/* ── Base & Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; }

/* ── Navbar scroll state ── */
.nav-text-white { color: rgb(16, 42, 67); }
.nav-text-muted { color: rgb(98, 125, 152); }
.nav-link { color: rgb(51, 78, 104); }

nav.scrolled .nav-text-white { color: rgb(255, 255, 255); }
nav.scrolled .nav-text-muted { color: rgb(160, 195, 220); }
nav.scrolled .nav-link { color: rgb(229, 235, 240); }
nav.scrolled .nav-link:hover { color: rgb(111, 199, 154); }
nav.scrolled .mobile-link { color: rgb(51, 78, 104); }
nav.scrolled .mobile-link:hover { color: rgb(42, 149, 98); }

/* ── Scroll reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fallback: always visible if JS is disabled */
.no-js .scroll-reveal,
html:not(.js-enabled) .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ── Selection ── */
::selection { background: rgb(168, 223, 192); color: rgb(16, 42, 67); }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid rgb(111, 199, 154); outline-offset: 2px; }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgb(240, 244, 248); }
::-webkit-scrollbar-thumb { background: rgb(161, 179, 204); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(98, 125, 152); }