@layer components {
    .animate-marquee {
        @apply flex;
        animation: marquee 40s linear infinite;
    }
    .btn-premium {
        @apply relative inline-flex items-center gap-2 px-8 py-4 bg-gradient-premium text-white font-bold rounded-full overflow-hidden transition-all duration-500 hover:shadow-[0_0_30px_rgba(59,130,246,0.5)] hover:-translate-y-1 active:scale-95 z-10;
    }
    .btn-premium::before {
        @apply content-[''] absolute top-0 -left-full w-full h-full bg-white/20 skew-x-[-25deg] transition-all duration-500 group-hover:left-full;
    }
    .glass-header {
        @apply bg-white/60 backdrop-blur-xl border-b border-white/20 shadow-[0_4px_30px_rgba(0,0,0,0.03)];
    }
    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-premium;
    }
    .card-creative {
        @apply relative bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-[0_10px_40px_rgba(0,0,0,0.04)] transition-all duration-500 hover:shadow-[0_20px_60px_rgba(30,64,175,0.1)] hover:-translate-y-2 overflow-hidden;
    }
    .card-creative::after {
        @apply content-[''] absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2 transition-transform duration-500 group-hover:scale-[10];
    }
    .input-premium {
        @apply w-full px-5 py-4 bg-slate-50 border-2 border-transparent rounded-2xl focus:border-primary/30 focus:bg-white outline-none transition-all shadow-inner;
    }
    .section-glow {
        @apply relative overflow-hidden;
    }
    .section-glow::before {
        @apply content-[''] absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] -z-10;
    }
    .section-glow::after {
        @apply content-[''] absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-accent/5 rounded-full blur-[120px] -z-10;
    }
}

.swiper-pagination-bullet { 
    width: 12px; 
    height: 12px; 
    transition: all 0.3s; 
    opacity: 0.3; 
}
/* Global Spacing Refinement */
section {
    @apply py-20 md:py-32;
}

.hero-slider .swiper-slide img {
    @apply transition-transform duration-[10s] scale-110;
}

.hero-slider .swiper-slide-active img {
    @apply scale-100;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .section-title {
        @apply text-3xl md:text-5xl;
    }
    .hero-content {
        @apply text-center items-center;
    }
    .hero-avatars {
        @apply justify-center;
    }
}

.swiper-pagination-bullet-active { 
    width: 30px; 
    border-radius: 6px; 
    background: #1E40AF !important; 
    opacity: 1; 
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #1E40AF;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3B82F6;
}