:root {
            --charcoal: #1F1F1F;
            --steel: #4A4A4A;
            --copper: #B85C38;
            --ash: #F2F2F2;
            --deep-blue: #2B3A67;
        }

        body {
            background-color: var(--ash);
            color: var(--charcoal);
            font-family: 'Montserrat', sans-serif;
            scroll-behavior: smooth;
        }

        .font-serif { font-family: 'Playfair Display', serif; }
        .font-cursive { font-family: 'La Belle Aurore', cursive; }

        /* Smooth Scroll & Animations */
        .reveal { opacity: 0; transform: translateY(40px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* Nav & UI Components */
        .nav-link { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; opacity: 0.5; transition: 0.4s; position: relative; }
        .nav-link:hover, .nav-link.active { opacity: 1; color: var(--copper); }
        
        .btn-industrial {
            position: relative; padding: 18px 40px; border: 1px solid rgba(0,0,0,0.15);
            font-size: 10px; text-transform: uppercase; letter-spacing: 0.4em;
            background: white; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            cursor: pointer; display: inline-block;
        }
        .btn-industrial:hover { 
            background: var(--charcoal); color: white; border-color: var(--charcoal);
            transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .page-view { display: none; }
        .page-view.active { display: block; animation: fadeIn 1s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--ash); }
        ::-webkit-scrollbar-thumb { background: var(--steel); }

        .blueprint-overlay {
            background-image: radial-gradient(var(--steel) 0.5px, transparent 0.5px);
            background-size: 30px 30px;
            opacity: 0.05;
        }

        .industrial-gradient {
            background: linear-gradient(135deg, #1f1f1f 0%, #2b2b2b 100%);
        }
    #mobile-nav {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-nav.hidden {
    opacity: 0;
    transform: translateX(100%);
}

#mobile-nav:not(.hidden) {
    opacity: 1;
    transform: translateX(0);
}
    @keyframes float-slow {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(1deg); }
    }
    @keyframes float-medium {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-30px) rotate(2deg); }
    }
    @keyframes float-fast {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }
    @keyframes scrollPulse {
        0% { transform: translateY(-100%); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateY(100%); opacity: 0; }
    }
    @keyframes lineDraw {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    @keyframes scanLine {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(100vh); }
    }
    @keyframes slide-up {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes progress {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    @keyframes orbit {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes fall {
        0% { transform: translateY(-100px); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateY(100vh); opacity: 0; }
    }
    @keyframes pulse-slow {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    @keyframes bounce-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
    .animate-float-medium { animation: float-medium 8s ease-in-out infinite; }
    .animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
    .animate-slide-up { animation: slide-up 1s ease-out forwards; }
    .animate-progress { animation: progress 3s linear infinite; }
    .animate-orbit { animation: orbit 20s linear infinite; }
    .animate-fall { animation: fall 10s linear infinite; }
    .animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
    .animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }
    .animate-spin-slow { animation: spin-slow 20s linear infinite; }

    .scroll-trigger {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease-out;
    }
    .scroll-trigger.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .btn-industrial {
        background: black;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1.5rem 3rem;
        font-size: 10px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }
    .btn-industrial:hover {
        letter-spacing: 0.4em;
    }

    .industrial-gradient {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    }

    .blueprint-overlay {
        background-image: 
            linear-gradient(90deg, transparent 99%, #C4A48410 100%),
            linear-gradient(0deg, transparent 99%, #C4A48410 100%);
        background-size: 20px 20px;
    }