:root {
            --charcoal: #0F0F0F;
            --cream: #FAF9F6;
            --accent: #7D8E7E;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--cream);
            color: var(--charcoal);
            line-height: 1.6;
        }

        .serif { font-family: 'Cormorant Garamond', serif; }
        .cursive { font-family: 'Great Vibes', cursive; }
        
        /* Layout Transitions */
        .page { display: none; min-height: 100vh; animation: pageFade 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        .page.active { display: block; }
        @keyframes pageFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* Navigation */
        .nav-link { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: #888; transition: all 0.3s; }
        .nav-link:hover, .nav-link.active { color: var(--charcoal); }

        /* Buttons */
        .btn-editorial {
            border: 1px solid var(--charcoal);
            padding: 1rem 2.5rem;
            text-transform: uppercase;
            font-size: 10px;
            letter-spacing: 0.2em;
            font-weight: 600;
            transition: all 0.4s ease;
            background: transparent;
            position: relative;
            display: inline-block;
        }
        .btn-editorial:hover { background: var(--charcoal); color: white; transform: translateY(-2px); }

        /* Cart Badge */
        .cart-count {
            position: absolute; top: -8px; right: -8px;
            background: var(--charcoal); color: white;
            font-size: 8px; width: 16px; height: 16px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
        }

        /* Manifesto Styling */
        .manifesto-line { height: 1px; background: rgba(0,0,0,0.1); width: 100%; margin: 4rem 0; }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-thumb { background: var(--charcoal); }

        /* Form Handling UI */
        .success-toast {
            position: fixed; bottom: 2rem; right: 2rem;
            background: #2D3436; color: white; padding: 1rem 2rem;
            font-size: 12px; letter-spacing: 0.1em; display: none; z-index: 10000;
        }
    /* Grid Overlay */
    .grid-overlay {
        position: absolute;
        inset: 0;
        background-image: 
            linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
        background-size: 50px 50px;
    }
    
    /* Code Particles */
    .code-particle {
        position: absolute;
        font-family: monospace;
        color: rgba(0, 0, 0, 0.1);
        font-size: 14px;
        animation: floatParticle 20s linear infinite;
    }
    
    .particle-1 { top: 20%; left: 5%; animation-delay: 0s; }
    .particle-2 { top: 60%; right: 10%; animation-delay: 5s; }
    .particle-3 { bottom: 30%; left: 15%; animation-delay: 10s; }
    .particle-4 { top: 40%; right: 20%; animation-delay: 15s; }
    .particle-5 { bottom: 20%; left: 25%; animation-delay: 20s; }
    
    @keyframes floatParticle {
        0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.1; }
        25% { transform: translate(20px, 20px) rotate(5deg); opacity: 0.05; }
        50% { transform: translate(40px, 0) rotate(10deg); opacity: 0.1; }
        75% { transform: translate(20px, -20px) rotate(5deg); opacity: 0.05; }
    }
    
    /* Gradient Orbs */
    .gradient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(40px);
        opacity: 0.1;
        animation: orbFloat 30s ease-in-out infinite;
    }
    
    .orb-1 {
        width: 400px;
        height: 400px;
        background: linear-gradient(45deg, #667eea, #764ba2);
        top: -200px;
        right: -100px;
        animation-delay: 0s;
    }
    
    .orb-2 {
        width: 300px;
        height: 300px;
        background: linear-gradient(45deg, #f093fb, #f5576c);
        bottom: -150px;
        left: -100px;
        animation-delay: 10s;
    }
    
    @keyframes orbFloat {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(30px, 30px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
    }
    
    /* Typewriter Animation */
    .typewriter-text {
        overflow: hidden;
        border-right: 2px solid;
        white-space: nowrap;
        animation: typewriter 2s steps(40, end), blink 0.75s step-end infinite;
    }
    
    @keyframes typewriter {
        from { width: 0; }
        to { width: 100%; }
    }
    
    @keyframes blink {
        from, to { border-color: transparent; }
        50% { border-color: currentColor; }
    }
    
    /* Title Stagger Animation */
    .title-line {
        display: block;
        overflow: hidden;
    }
    
    .title-line:nth-child(1) {
        animation: titleSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: 0.1s;
    }
    
    .title-line:nth-child(2) {
        animation: titleSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: 0.3s;
    }
    
    .title-line:nth-child(3) {
        animation: titleSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: 0.5s;
    }
    
    @keyframes titleSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Fade In Up Animation */
    .fade-in-up {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Count Up Animation */
    .count-up {
        opacity: 0;
        animation: countUpFade 1s ease-out forwards;
        animation-delay: 1.5s;
    }
    
    @keyframes countUpFade {
        to {
            opacity: 1;
        }
    }
    
    /* Image Parallax Effect */
    .image-parallax {
        transition: transform 0.3s ease-out;
    }
    
    .group:hover .image-parallax {
        transform: scale(1.1) translate(var(--mouse-x, 0), var(--mouse-y, 0));
    }
    
    /* Editor's Note Animation */
    .editor-note {
        opacity: 0;
        transform: translateY(20px);
        animation: editorNoteAppear 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: 0.8s;
    }
    
    @keyframes editorNoteAppear {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Code Pattern */
    .code-pattern {
        position: absolute;
        inset: 0;
        background-image: 
            linear-gradient(90deg, transparent 79px, rgba(255, 255, 255, 0.1) 79px, rgba(255, 255, 255, 0.1) 81px, transparent 81px),
            linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 100% 24px, 100% 24px;
    }
    
    /* Slide Up Animation */
    .slide-up {
        opacity: 0;
        transform: translateY(30px);
        animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    @keyframes slideUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }.nav-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 0.6;
}