/* Custom Font Config */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap');

    :root {
        --color-midnight-900: #0f172a;
        --color-midnight-800: #1e293b;
        --color-emerald-500: #10b981;
        --color-emerald-400: #34d399;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', sans-serif;
    }

    h1, h2, h3, h4, .font-outfit {
        font-family: 'Outfit', sans-serif;
    }

    /* Custom Color Utilities (Tailwind doesn't have these by default) */
    .text-midnight-900 { color: var(--color-midnight-900); }
    .text-midnight-800 { color: var(--color-midnight-800); }
    .bg-midnight-900 { background-color: var(--color-midnight-900); }
    .bg-midnight-950 { background-color: #020617; } /* Darker than 900 */
    .border-midnight-900 { border-color: var(--color-midnight-900); }

    /* Animation Utilities */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 40px, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .animate-fade-in-up {
        animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        opacity: 0; /* Start hidden */
    }

    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }

    /* Scroll Reveal Base State (Progressive Enhancement) */
    .reveal {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    /* JS will add .is-visible to trigger transition */
    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Navbar Glass Effect */
    #navbar {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
    }
    
    #navbar.scrolled {
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }