/* ─── Base & Reset ─── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body { margin: 0; overflow-x: hidden; }
    img, svg { display: block; max-width: 100%; }
    button, input, textarea, select { font: inherit; }

    /* ─── Scrollbar ─── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #0A1628; }
    ::-webkit-scrollbar-thumb { background: rgba(126, 208, 194, 0.2); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(126, 208, 194, 0.4); }

    /* ─── Selection ─── */
    ::selection { background: rgba(126, 208, 194, 0.25); color: #f0f4f8; }

    /* ─── Nav Links ─── */
    .nav-link { position: relative; }
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 1px;
        background: #7ED0C2;
        transition: width 0.3s ease;
    }
    .nav-link:hover::after { width: 100%; }
    .nav-link::after { left: 0; }

    /* ─── Header States ─── */
    #site-header.scrolled {
        background: rgba(4, 8, 16, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(126, 208, 194, 0.08);
    }
    #site-header.scrolled .nav-link { color: rgba(200, 224, 232, 0.8); }

    /* ─── Mobile Menu ─── */
    #mobile-menu.open { opacity: 1; pointer-events: all; }
    #mobile-menu.closed { opacity: 0; pointer-events: none; }
    .menu-line.active:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
    .menu-line.active:nth-child(2) { opacity: 0; }
    .menu-line.active:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); width: 5px; }

    /* ─── Hero Animations ─── */
    .hero-eyebrow {
        animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    }
    .hero-title {
        animation: slideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    }
    .hero-subtitle {
        animation: slideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
    }
    .hero-btn {
        animation: slideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
    }
    .hero-stats {
        animation: slideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ─── Scroll Reveal (progressive enhancement) ─── */
    @media (prefers-reduced-motion: no-preference) {
        .reveal-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-up.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-24px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-left.revealed {
            opacity: 1;
            transform: translateX(0);
        }
        .reveal-right {
            opacity: 0;
            transform: translateX(24px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-right.revealed {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* ─── Focus Styles ─── */
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
        outline: 2px solid #7ED0C2;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ─── Form Input Autofill ─── */
    input:-webkit-autofill, textarea:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 30px #0A1628 inset !important;
        -webkit-text-fill-color: #f0f4f8 !important;
    }

    /* ─── Smooth Image Loading ─── */
    img { background-color: rgba(10, 22, 40, 0.3); }

    /* ─── Mobile Menu Link Animation ─── */
    @media (max-width: 767px) {
        .mobile-link {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
        }
        #mobile-menu.open .mobile-link {
            opacity: 1;
            transform: translateY(0);
        }
        #mobile-menu.open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
        #mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
        #mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
        #mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.2s; }
    }