:root {
            --midnight: #080B12;
            --asphalt: #121620;
            --amber: #D4AF37; /* Metallic Gold/Amber */
            --sky-glow: #1A202C;
            --cream: #F4F4F1;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--midnight);
            color: var(--cream);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .serif { font-family: 'Playfair Display', serif; }
        .cursive { font-family: 'Great Vibes', cursive; }
        .mono { font-family: 'JetBrains Mono', monospace; }

        /* Smooth Page Transitions */
        .page { display: none; min-height: 100vh; animation: pageFade 1s ease-out; }
        .page.active { display: block; }
        @keyframes pageFade { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }

        /* Premium Buttons */
        .btn-luxury {
            position: relative;
            padding: 1rem 2.5rem;
            font-size: 10px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            border: 1px solid rgba(212, 175, 55, 0.3);
            background: transparent;
            overflow: hidden;
            transition: 0.5s;
        }
        .btn-luxury:hover {
            color: var(--midnight);
            background: var(--amber);
            border-color: var(--amber);
            box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
        }

        /* Cart Floating Bubble */
        #cart-trigger {
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        #cart-trigger:hover { transform: scale(1.1); }

        /* Background Grain Overlay */
        .grain::before {
            content: "";
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://grainy-gradients.vercel.app/noise.svg');
            opacity: 0.04;
            pointer-events: none;
            z-index: 9999;
        }

        /* Broken Grid Elements */
        .parallax-img { transition: transform 0.1s ease-out; }
        
        .lesson-card {
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .lesson-card:hover { transform: translateY(-20px); }

        /* Custom Modal Scroll */
        .modal-content-area::-webkit-scrollbar { width: 3px; }
        .modal-content-area::-webkit-scrollbar-thumb { background: var(--amber); }
    /* Animation Keyframes */
    @keyframes typing {
        from { width: 0 }
        to { width: 100% }
    }
    
    @keyframes slideUp {
        from { 
            transform: translateY(30px);
            opacity: 0;
        }
        to { 
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes shimmer {
        0% { transform: translateX(-100%); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateX(100%); opacity: 0; }
    }
    
    @keyframes glow {
        0%, 100% { box-shadow: 0 0 20px transparent; }
        50% { box-shadow: 0 0 40px #f59e0b; }
    }
    
    @keyframes lineExtend {
        from { width: 0 }
        to { width: 100% }
    }
    
    @keyframes textReveal {
        from { 
            clip-path: inset(0 100% 0 0);
            opacity: 0;
        }
        to { 
            clip-path: inset(0 0 0 0);
            opacity: 1;
        }
    }
    
    /* Animation Classes */
    .animate-typing-1 {
        animation: typing 1.5s steps(20) 0.5s forwards;
    }
    
    .animate-typing-2 {
        animation: typing 2s steps(25) 1s forwards;
    }
    
    .animate-typing-3 {
        animation: typing 1s steps(10) 2s forwards;
    }
    
    .animate-slide-up {
        animation: slideUp 0.8s ease-out forwards;
    }
    
    .animate-slide-up-delay {
        animation: slideUp 0.8s ease-out 0.5s forwards;
    }
    
    .animate-slide-up-delay-2 {
        animation: slideUp 0.8s ease-out 0.8s forwards;
    }
    
    .animate-shimmer {
        animation: shimmer 3s infinite;
    }
    
    .animate-glow {
        animation: glow 2s ease-in-out infinite;
    }
    
    .animate-line-extend {
        animation: lineExtend 1s ease-out forwards;
        animation-delay: 0.5s;
    }
    
    .animate-text-reveal {
        animation: textReveal 1.2s ease-out forwards;
        opacity: 0;
    }
    
    .delay-200 { animation-delay: 0.2s; }
    .delay-400 { animation-delay: 0.4s; }
    
    .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    .animate-fade-in-out {
        animation: fadeInOut 3s ease-in-out infinite;
    }
    
    /* Story Chapter Animations */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(50px);
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .animate-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    [data-animation="fade-left"].visible {
        animation: slideFromLeft 1s ease-out forwards;
    }
    
    [data-animation="fade-right"].visible {
        animation: slideFromRight 1s ease-out forwards;
    }
    
    [data-animation="fade-up"].visible {
        animation: slideFromBottom 1s ease-out forwards;
    }
    
    /* Interactive Elements */
    .light-trail {
        position: absolute;
        width: 2px;
        height: 100px;
        background: linear-gradient(to bottom, transparent, cyan, transparent);
        animation: trailMove 4s linear infinite;
        opacity: 0.3;
    }
    
    .headlight-beam {
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: beamScan 8s ease-in-out infinite;
    }
    
    /* 3D Testimonial Cards */
    .testimonial-card {
        position: absolute;
        width: 300px;
        height: 400px;
        transform-style: preserve-3d;
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .testimonial-card:hover {
        transform: rotateY(180deg);
    }
    
    /* Final CTA Animations */
    .animate-final-title {
        animation: slideUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    }
    
    .animate-final-text {
        animation: slideUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
    }
    
    .animate-cta-pulse {
        animation: pulseGlow 2s ease-in-out infinite;
    }
    
    .animate-bounce-slow {
        animation: bounce 3s ease-in-out infinite;
    }
    
    /* Progress Animation */
    .animate-progress {
        animation: progressFill 3s ease-out forwards;
    }
.testimonial-carousel {
    perspective: 1500px;
    position: relative;
}

.testimonial-card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.card-front,
.card-back {
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card-back {
    transform: rotateY(180deg);
}

@media (max-width: 1024px) {
    .testimonial-carousel {
        height: 500px;
    }
}

@media (max-width: 640px) {
    .testimonial-carousel {
        height: 400px;
    }
    .text-2xl {
        font-size: 1.2rem;
    }
}