@layer utilities {
    /* ===================================
       BACKGROUND ANIMATED EFFECTS
    =================================== */
    
    /* Floating particles */
    .bg-particles {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }
    
    .bg-particles span {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(81, 250, 170, 0.3);
        border-radius: 50%;
        animation: particleFloat 15s infinite ease-in-out;
    }
    
    .bg-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 18s; }
    .bg-particles span:nth-child(2) { left: 20%; top: 80%; animation-delay: 2s; animation-duration: 22s; }
    .bg-particles span:nth-child(3) { left: 30%; top: 40%; animation-delay: 4s; animation-duration: 16s; }
    .bg-particles span:nth-child(4) { left: 40%; top: 60%; animation-delay: 1s; animation-duration: 20s; }
    .bg-particles span:nth-child(5) { left: 50%; top: 30%; animation-delay: 3s; animation-duration: 17s; }
    .bg-particles span:nth-child(6) { left: 60%; top: 70%; animation-delay: 5s; animation-duration: 21s; }
    .bg-particles span:nth-child(7) { left: 70%; top: 50%; animation-delay: 2.5s; animation-duration: 19s; }
    .bg-particles span:nth-child(8) { left: 80%; top: 25%; animation-delay: 1.5s; animation-duration: 23s; }
    .bg-particles span:nth-child(9) { left: 90%; top: 85%; animation-delay: 3.5s; animation-duration: 15s; }
    .bg-particles span:nth-child(10) { left: 15%; top: 55%; animation-delay: 0.5s; animation-duration: 24s; }
    .bg-particles span:nth-child(11) { left: 85%; top: 45%; animation-delay: 4.5s; animation-duration: 14s; }
    .bg-particles span:nth-child(12) { left: 45%; top: 90%; animation-delay: 6s; animation-duration: 18s; }
    
    @keyframes particleFloat {
        0%, 100% { 
            transform: translate(0, 0) scale(1); 
            opacity: 0.3;
        }
        25% { 
            transform: translate(30px, -40px) scale(1.5); 
            opacity: 0.6;
        }
        50% { 
            transform: translate(-20px, -80px) scale(1); 
            opacity: 0.4;
        }
        75% { 
            transform: translate(40px, -40px) scale(1.2); 
            opacity: 0.5;
        }
    }
    
    /* Subtle grid movement */
    .bg-grid {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image: 
            linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
        background-size: 60px 60px;
        animation: gridMove 20s linear infinite;
    }
    
    @keyframes gridMove {
        0% { transform: translate(0, 0); }
        100% { transform: translate(60px, 60px); }
    }
    
    /* Glowing orbs */
    .bg-glow-orb {
        position: fixed;
        border-radius: 50%;
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.3;
    }
    
    .orb-1 {
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(81, 250, 170, 0.15), transparent);
        top: 10%;
        left: 5%;
        animation: orbFloat1 12s ease-in-out infinite;
    }
    
    .orb-2 {
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.12), transparent);
        top: 60%;
        right: 10%;
        animation: orbFloat2 15s ease-in-out infinite;
    }
    
    .orb-3 {
        width: 250px;
        height: 250px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent);
        bottom: 20%;
        left: 30%;
        animation: orbFloat3 18s ease-in-out infinite;
    }
    
    @keyframes orbFloat1 {
        0%, 100% { transform: translate(0, 0); }
        33% { transform: translate(50px, -30px); }
        66% { transform: translate(-30px, 20px); }
    }
    
    @keyframes orbFloat2 {
        0%, 100% { transform: translate(0, 0); }
        33% { transform: translate(-40px, 40px); }
        66% { transform: translate(30px, -20px); }
    }
    
    @keyframes orbFloat3 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(20px, -30px) scale(1.1); }
    }
    
    /* Shooting stars */
    .bg-shooting-star {
        position: fixed;
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, rgba(81, 250, 170, 0.8), transparent);
        pointer-events: none;
        z-index: 0;
        opacity: 0;
    }
    
    /* Subtle vignette */
    .bg-vignette {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
    }
    
    /* Noise texture overlay */
    .bg-noise {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.03;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    }
    
    /* Disabled on mobile for performance */
    @media (max-width: 768px) {
        .bg-particles, .bg-grid, .bg-glow-orb, .bg-shooting-star, .bg-vignette, .bg-noise, .bg-aurora, .bg-constellation {
            display: none;
        }
    }
    
    /* Aurora Borealis effect */
    .bg-aurora {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: linear-gradient(180deg, 
            transparent 0%, 
            rgba(81, 250, 170, 0.03) 30%, 
            rgba(168, 85, 247, 0.02) 60%, 
            transparent 100%);
        animation: auroraShift 15s ease-in-out infinite;
    }
    
    .bg-aurora::before,
    .bg-aurora::after {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background: radial-gradient(ellipse at center, 
            rgba(81, 250, 170, 0.08) 0%, 
            transparent 60%);
        animation: auroraWave 20s ease-in-out infinite;
    }
    
    .bg-aurora::after {
        background: radial-gradient(ellipse at center, 
            rgba(168, 85, 247, 0.06) 0%, 
            transparent 50%);
        animation: auroraWave 25s ease-in-out infinite reverse;
    }
    
    @keyframes auroraShift {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.1); }
    }
    
    @keyframes auroraWave {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(100px, -50px) rotate(10deg); }
        66% { transform: translate(-50px, 50px) rotate(-5deg); }
    }
    
    /* Constellation */
    .bg-constellation {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }
    
    .bg-constellation .star {
        position: absolute;
        width: 3px;
        height: 3px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        animation: starTwinkle 3s ease-in-out infinite;
    }
    
    .bg-constellation .star:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
    .bg-constellation .star:nth-child(2) { top: 25%; left: 45%; animation-delay: 0.5s; }
    .bg-constellation .star:nth-child(3) { top: 10%; left: 70%; animation-delay: 1s; }
    .bg-constellation .star:nth-child(4) { top: 40%; left: 15%; animation-delay: 1.5s; }
    .bg-constellation .star:nth-child(5) { top: 35%; left: 85%; animation-delay: 2s; }
    .bg-constellation .star:nth-child(6) { top: 60%; left: 30%; animation-delay: 0.3s; }
    .bg-constellation .star:nth-child(7) { top: 55%; left: 60%; animation-delay: 0.8s; }
    .bg-constellation .star:nth-child(8) { top: 70%; left: 80%; animation-delay: 1.3s; }
    .bg-constellation .star:nth-child(9) { top: 80%; left: 40%; animation-delay: 1.8s; }
    .bg-constellation .star:nth-child(10) { top: 45%; left: 50%; animation-delay: 2.3s; }
    
    @keyframes starTwinkle {
        0%, 100% { opacity: 0.3; transform: scale(1); box-shadow: 0 0 2px rgba(81, 250, 170, 0.3); }
        50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 8px rgba(81, 250, 170, 0.8); }
    }

    /* DRAMATIC ENTRANCE ANIMATIONS
       Elements that come from far away
    =================================== */
    html {
        scroll-behavior: smooth;
    }
    
    /* Fly from bottom - dramatic entrance */
    .fly-in-bottom {
        opacity: 0;
        transform: translateY(120px) scale(0.9);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .fly-in-bottom.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    
    /* Fly from top */
    .fly-in-top {
        opacity: 0;
        transform: translateY(-120px) scale(0.9);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .fly-in-top.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    
    /* Fly from left - dramatic */
    .fly-in-left {
        opacity: 0;
        transform: translateX(-150px) scale(0.9);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .fly-in-left.visible {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    
    /* Fly from right - dramatic */
    .fly-in-right {
        opacity: 0;
        transform: translateX(150px) scale(0.9);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .fly-in-right.visible {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    
    /* Zoom in from far */
    .zoom-in-far {
        opacity: 0;
        transform: scale(0.3) translateY(50px);
        transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .zoom-in-far.visible {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    
    /* Flip in */
    .flip-in {
        opacity: 0;
        transform: perspective(1000px) rotateX(-30deg) translateY(50px);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .flip-in.visible {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateY(0);
    }
    
    /* Slide + fade combo */
    .slide-fade-left {
        opacity: 0;
        transform: translateX(-200px);
        transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .slide-fade-left.visible {
        opacity: 1;
        transform: translateX(0);
    }
    
    .slide-fade-right {
        opacity: 0;
        transform: translateX(200px);
        transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .slide-fade-right.visible {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Wide slide */
    .wide-slide-up {
        opacity: 0;
        transform: translateY(200px) scale(0.8);
        transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .wide-slide-up.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    
    /* Elastic bounce in */
    .elastic-in {
        opacity: 0;
        transform: translateY(100px) scale(0.5);
        transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .elastic-in.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    
    /* Staggered children animation */
    .stagger-children > * {
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
    .stagger-children.visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
    .stagger-children.visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
    .stagger-children.visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
    .stagger-children.visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
    .stagger-children.visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
    
    /* Continuous parallax */
    .parallax-slow {
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Float animation */
    .smooth-float {
        animation: smoothFloat 6s ease-in-out infinite;
    }
    
    @keyframes smoothFloat {
        0%, 100% { transform: translateY(0) translateX(0); }
        25% { transform: translateY(-10px) translateX(5px); }
        50% { transform: translateY(-5px) translateX(-5px); }
        75% { transform: translateY(-15px) translateX(3px); }
    }
    
    /* Gradient text animation */
    .gradient-text-animated {
        background-size: 200% auto;
        animation: gradientMove 3s linear infinite;
    }
    
    @keyframes gradientMove {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    /* Glow pulse */
    .glow-pulse {
        animation: glowPulse 2s ease-in-out infinite;
    }
    
    @keyframes glowPulse {
        0%, 100% { box-shadow: 0 0 20px rgba(81, 250, 170, 0.3); }
        50% { box-shadow: 0 0 40px rgba(81, 250, 170, 0.6); }
    }
    
    /* Card hover lift */
    .card-lift {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .card-lift:hover {
        transform: translateY(-8px);
    }
    
    /* Smooth border glow */
    .border-glow {
        position: relative;
    }
    
    .border-glow::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: linear-gradient(45deg, rgba(81, 250, 170, 0.3), transparent, rgba(168, 85, 247, 0.3));
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: -1;
    }
    
    .border-glow:hover::before {
        opacity: 1;
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        html {
            scroll-behavior: auto;
        }
    }
    
    /* Hero animations */
    .hero-animate {
        opacity: 0;
        transform: translateY(30px);
    }
    
    /* Continuous subtle breathing animation */
    .breathing-glow {
        animation: breathingGlow 4s ease-in-out infinite;
    }
    
    @keyframes breathingGlow {
        0%, 100% { 
            filter: brightness(1) drop-shadow(0 0 10px rgba(81, 250, 170, 0.3));
        }
        50% { 
            filter: brightness(1.1) drop-shadow(0 0 25px rgba(81, 250, 170, 0.5));
        }
    }
    
    /* Wave animation for sections */
    .wave-in {
        opacity: 0;
        transform: translateY(80px) scale(0.95);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .wave-in.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* RESPONSIVE ANIMATIONS - Mobile adjustments */
    @media (max-width: 768px) {
        /* Reduce animation distances on mobile */
        .fly-in-bottom {
            transform: translateY(60px) scale(0.95);
        }
        
        .fly-in-top {
            transform: translateY(-60px) scale(0.95);
        }
        
        .fly-in-left {
            transform: translateX(-80px) scale(0.95);
        }
        
        .fly-in-right {
            transform: translateX(80px) scale(0.95);
        }
        
        .slide-fade-left,
        .slide-fade-right {
            transform: translateX(0) translateY(40px);
        }
        
        .wide-slide-up {
            transform: translateY(100px) scale(0.9);
        }
        
        .zoom-in-far {
            transform: scale(0.6) translateY(30px);
        }
        
        .flip-in {
            transform: perspective(1000px) rotateX(-15deg) translateY(30px);
        }
        
        .elastic-in {
            transform: translateY(60px) scale(0.7);
        }
        
        .wave-in {
            transform: translateY(50px) scale(0.97);
        }
        
        /* Stagger children - faster on mobile */
        .stagger-children > * {
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; }
        .stagger-children.visible > *:nth-child(2) { transition-delay: 50ms; }
        .stagger-children.visible > *:nth-child(3) { transition-delay: 100ms; }
        .stagger-children.visible > *:nth-child(4) { transition-delay: 150ms; }
        .stagger-children.visible > *:nth-child(5) { transition-delay: 200ms; }
        .stagger-children.visible > *:nth-child(6) { transition-delay: 250ms; }
    }
    
    /* Even smaller - phones */
    @media (max-width: 480px) {
        .fly-in-bottom,
        .fly-in-top,
        .fly-in-left,
        .fly-in-right {
            transform: translateY(40px) scale(0.98);
        }
        
        .slide-fade-left,
        .slide-fade-right {
            transform: translateY(30px);
        }
        
        .wide-slide-up {
            transform: translateY(60px) scale(0.95);
        }
        
        /* Disable heavy animations on small screens for performance */
        .parallax-slow {
            transform: none !important;
        }
    }

    .text-glow {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }

    .glass-card {
        @apply bg-white/5 backdrop-blur-xl border border-white/10;
    }

    .glass-panel {
        @apply bg-[#050508]/60 backdrop-blur-lg border border-white/10 shadow-2xl;
    }

    .glass-container {
        @apply bg-[#080808]/40 backdrop-blur-xl border border-white/10 rounded-3xl;
    }

    .blob {
        position: absolute;
        filter: blur(80px);
        z-index: -1;
        opacity: 0.6;
        animation: float 10s infinite alternate;
    }

    @keyframes float {
        0% {
            transform: translate(0, 0) scale(1);
        }

        100% {
            transform: translate(20px, -20px) scale(1.1);
        }
    }

    .purple-script {
        background: linear-gradient(to right, #a855f7, #6366f1);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'Playfair Display', serif;
        font-style: italic;
    }

    .purple-gradient-text {
        background: linear-gradient(to right, #a855f7, #6366f1);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .faq-accordion-item {
        @apply bg-[#0A0A0B]/60 backdrop-blur-md border border-purple-500/10 rounded-2xl p-6 transition-all duration-300 hover:border-purple-500/30 cursor-pointer;
    }

    .nav-btn {
        @apply w-10 h-10 rounded-full flex items-center justify-center bg-white/5 backdrop-blur-md border border-white/10 text-white transition-all duration-300 hover:bg-white/15 hover:border-white/20 cursor-pointer;
        transition: box-shadow 0.3s;
    }

    .nav-btn:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    }

    .section-divider {
        @apply w-full h-[1px] bg-gradient-to-r from-transparent via-purple-500/50 to-transparent relative;
    }

    .section-divider::after {
        content: '';
        @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-purple-400 to-transparent blur-[1px];
    }

    /* ===================================
       PULSE BEAM BORDER ANIMATIONS
    =================================== */
    .btn-pulse-beam {
        @apply relative overflow-hidden isolate shadow-lg;
    }

    .btn-pulse-beam-inner {
        @apply absolute inset-[1.5px] -z-10 rounded-[inherit];
    }

    .pulse-beam-top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: linear-gradient(90deg, transparent, #fff);
        animation: pulse-top 8s linear infinite;
    }

    .pulse-beam-right {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 1.5px;
        background: linear-gradient(180deg, transparent, #fff);
        animation: pulse-right 8s linear infinite;
    }

    .pulse-beam-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: linear-gradient(270deg, transparent, #fff);
        animation: pulse-bottom 8s linear infinite;
    }

    .pulse-beam-left {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 1.5px;
        background: linear-gradient(0deg, transparent, #fff);
        animation: pulse-left 8s linear infinite;
    }

    @keyframes pulse-top {
        0% {
            transform: translateX(-100%);
            opacity: 1;
        }

        9.375% {
            transform: translateX(100%);
            opacity: 1;
        }

        9.38% {
            opacity: 0;
            transform: translateX(-100%);
        }

        18.75% {
            opacity: 0;
            transform: translateX(-100%);
        }

        18.76% {
            opacity: 1;
        }

        28.125% {
            transform: translateX(100%);
            opacity: 1;
        }

        28.13% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes pulse-right {
        0% {
            opacity: 0;
            transform: translateY(-100%);
        }

        9.37% {
            opacity: 0;
            transform: translateY(-100%);
        }

        9.375% {
            opacity: 1;
            transform: translateY(-100%);
        }

        18.75% {
            transform: translateY(100%);
            opacity: 1;
        }

        18.76% {
            opacity: 0;
            transform: translateY(-100%);
        }

        28.12% {
            opacity: 0;
            transform: translateY(-100%);
        }

        28.125% {
            opacity: 1;
            transform: translateY(-100%);
        }

        37.5% {
            transform: translateY(100%);
            opacity: 1;
        }

        37.51% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes pulse-bottom {
        0% {
            transform: translateX(100%);
            opacity: 1;
        }

        9.375% {
            transform: translateX(-100%);
            opacity: 1;
        }

        9.38% {
            opacity: 0;
            transform: translateX(100%);
        }

        18.75% {
            opacity: 0;
            transform: translateX(100%);
        }

        18.76% {
            opacity: 1;
            transform: translateX(100%);
        }

        28.125% {
            transform: translateX(-100%);
            opacity: 1;
        }

        28.13% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes pulse-left {
        0% {
            opacity: 0;
            transform: translateY(100%);
        }

        9.37% {
            opacity: 0;
            transform: translateY(100%);
        }

        9.375% {
            opacity: 1;
            transform: translateY(100%);
        }

        18.75% {
            transform: translateY(-100%);
            opacity: 1;
        }

        18.76% {
            opacity: 0;
            transform: translateY(100%);
        }

        28.12% {
            opacity: 0;
            transform: translateY(100%);
        }

        28.125% {
            opacity: 1;
            transform: translateY(100%);
        }

        37.5% {
            transform: translateY(-100%);
            opacity: 1;
        }

        37.51% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    .btn-border-beam {
        @apply relative overflow-hidden isolate cursor-pointer;
    }

    .btn-border-beam::before {
        content: '';
        @apply absolute top-1/2 left-1/2 w-[300%] aspect-square -z-20 transition-opacity duration-300 opacity-0;
        background: conic-gradient(from 0deg, transparent 0 340deg, theme('colors.primary') 360deg);
        transform: translate(-50%, -50%);
    }

    .btn-border-beam:hover::before {
        @apply opacity-100;
        animation: border-spin 2s linear infinite;
    }

    @keyframes border-spin {
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .btn-border-beam-inner {
        @apply absolute inset-[2px] -z-10 rounded-[inherit];
    }

    /* ===================================
       PREMIUM BUTTON SYSTEM — REVISED
    =================================== */

    /* --- PRIMARY: green neon gradient — hero CTA ---  */
    .btn-primary {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #020c07;
        font-weight: 700;
        letter-spacing: 0.01em;
        background: linear-gradient(135deg, #51FAAA 0%, #1de99a 50%, #0ecf88 100%) !important;
        box-shadow:
            0 0 0 1px rgba(81, 250, 170, 0.4),
            0 0 28px rgba(81, 250, 170, 0.35),
            0 4px 20px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
        cursor: pointer;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.25s ease;
    }

    /* shimmer sweep */
    .btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg,
                transparent 30%,
                rgba(255, 255, 255, 0.45) 50%,
                transparent 70%);
        transform: translateX(-100%);
        transition: transform 0.55s ease;
        pointer-events: none;
    }

    .btn-primary:hover {
        transform: translateY(-2px) scale(1.015);
        box-shadow:
            0 0 0 1px rgba(81, 250, 170, 0.6),
            0 0 55px rgba(81, 250, 170, 0.6),
            0 8px 30px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .btn-primary:hover::before {
        transform: translateX(100%);
    }

    .btn-primary:active {
        transform: scale(0.975);
        box-shadow: 0 0 22px rgba(81, 250, 170, 0.3);
    }

    /* --- GHOST: glass morphism élégant --- */
    .btn-ghost {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: #000000;
        border: 1px solid rgba(255, 255, 255, 0.25);
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 15px rgba(0, 0, 0, 0.5);
    }

    .btn-ghost::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    .btn-ghost:hover {
        color: #51FAAA;
        background: #050505;
        border-color: rgba(81, 250, 170, 0.5);
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgba(81, 250, 170, 0.2),
            0 4px 20px rgba(0, 0, 0, 0.5),
            0 0 15px rgba(81, 250, 170, 0.15);
    }

    .btn-ghost:hover::after {
        opacity: 1;
    }

    .btn-ghost:active {
        transform: scale(0.975);
    }

    /* --- CARD SERVICE: dark + shimmer vert au hover --- */
    .btn-card-service {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: #000000;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* shimmer vert */
    .btn-card-service::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg,
                transparent 30%,
                rgba(81, 250, 170, 0.18) 50%,
                transparent 70%);
        transform: translateX(-100%);
        transition: transform 0.5s ease;
        pointer-events: none;
    }

    /* barre de glow bas */
    .btn-card-service::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 1px;
        background: #51FAAA;
        transform: translateX(-50%);
        transition: width 0.3s ease;
        pointer-events: none;
    }

    .btn-card-service:hover {
        color: #51FAAA;
        background: #020c07;
        border-color: rgba(81, 250, 170, 0.4);
        box-shadow: 0 0 25px rgba(81, 250, 170, 0.15), 0 8px 25px rgba(0, 0, 0, 0.6);
        transform: translateY(-1px);
    }

    .btn-card-service:hover::before {
        transform: translateX(100%);
    }

    .btn-card-service:hover::after {
        width: 60%;
    }

    .btn-card-service .btn-icon {
        transition: transform 0.3s ease;
        display: inline-flex;
    }

    .btn-card-service:hover .btn-icon {
        transform: translateX(5px);
    }

    /* --- GLOW CTA: bouton hero bas de page, anneaux pulsants --- */
    .btn-glow-cta {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #020c07;
        font-weight: 700;
        background: #51FAAA;
        border: 1px solid #51FAAA;
        box-shadow:
            0 0 35px rgba(81, 250, 170, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
        cursor: pointer;
        isolation: isolate;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-glow-cta:hover {
        background: #1de99a;
        box-shadow:
            0 0 50px rgba(81, 250, 170, 0.6),
            0 8px 32px rgba(0, 0, 0, 0.4);
        transform: translateY(-3px) scale(1.02);
    }

    .btn-glow-cta:active {
        transform: scale(0.98);
    }

    .btn-glow-cta-ring {
        position: absolute;
        inset: -6px;
        border-radius: inherit;
        border: 1px solid rgba(81, 250, 170, 0.2);
        animation: glow-ring 2.5s ease-in-out infinite;
        pointer-events: none;
    }

    .btn-glow-cta-ring-2 {
        position: absolute;
        inset: -13px;
        border-radius: inherit;
        border: 1px solid rgba(81, 250, 170, 0.1);
        animation: glow-ring 2.5s ease-in-out infinite 0.6s;
        pointer-events: none;
    }

    @keyframes glow-ring {

        0%,
        100% {
            opacity: 0.3;
            transform: scale(1);
        }

        50% {
            opacity: 1;
            transform: scale(1.04);
        }
    }

    .btn-glow-cta .btn-icon {
        transition: transform 0.3s ease;
        display: inline-flex;
    }

    .btn-glow-cta:hover .btn-icon {
        transform: translateX(5px);
    }

    /* --- FAQ TABS: adaptatif mobile --- */
    .faq-tab-btn {
        flex: 1 1 0%;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.5rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        border: 1px solid;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    @media (min-width: 640px) {
        .faq-tab-btn {
            flex: none;
            padding: 0.75rem 2rem;
            font-size: 0.875rem;
        }
    }

    /* PREVIEW BROWSER TOOLBAR */
    .browser-toolbar {
        @apply bg-[#1A1A1A] px-4 py-3 flex items-center gap-2 border-b border-white/5;
    }

    .browser-dot {
        @apply w-3 h-3 rounded-full;
    }

    /* METHOD & FORM */
    .method-card {
        @apply bg-[#0A0A0B]/60 backdrop-blur-md border border-white/5 p-8 rounded-3xl transition-all duration-300 hover:border-primary/30;
    }

    .form-input {
        @apply w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-600 transition-all focus:border-primary/50 focus:bg-white/8 outline-none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .form-input:focus {
        box-shadow: 0 0 0 3px rgba(81, 250, 170, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .timeline-dot {
        @apply w-4 h-4 rounded-full bg-primary shadow-[0_0_10px_#51FAAA] relative z-10;
    }

    .timeline-line {
        @apply absolute left-[7px] top-4 w-[2px] h-full bg-gradient-to-b from-primary/50 to-transparent;
    }
}