/* ── Base ────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img { max-width: 100%; display: block; }

    /* ── Scroll Reveal (progressive enhancement) ─────────── */
    @media (prefers-reduced-motion: no-preference) {
        .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);
        }
        .reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal:nth-child(2) { transition-delay: 0.08s; }
        .reveal:nth-child(3) { transition-delay: 0.16s; }
        .reveal:nth-child(4) { transition-delay: 0.24s; }
    }

    /* Always-visible fallback for reduced-motion or no-JS */
    @media (prefers-reduced-motion: reduce) {
        .reveal { opacity: 1; transform: none; transition: none; }
    }
    .no-js .reveal, .reveal.always-visible { opacity: 1; transform: none; transition: none; }

    /* ── Navbar ──────────────────────────────────────────── */
    #navbar.scrolled {
        background: rgba(240, 253, 249, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.04);
    }
    #navbar.scrolled .nav-link { color: #1e293b; }
    #navbar.scrolled .nav-link:hover { background: rgba(94, 234, 212, 0.15); }

    /* ── Mobile Menu ─────────────────────────────────────── */
    #mobile-menu-btn[aria-expanded="true"] #bar1 { transform: translateY(6px) rotate(45deg); }
    #mobile-menu-btn[aria-expanded="true"] #bar2 { opacity: 0; }
    #mobile-menu-btn[aria-expanded="true"] #bar3 { transform: translateY(-6px) rotate(-45deg); width: 1.5rem; }

    /* ── Hover effects ───────────────────────────────────── */
    a { transition: color 0.2s ease; }
    .service-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .service-card:hover { transform: translateY(-4px); }

    /* ── Selection ───────────────────────────────────────── */
    ::selection { background: #99f6df; color: #0f172a; }

    /* ── Focus styles ────────────────────────────────────── */
    :focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; border-radius: 4px; }

    /* ── Smooth image loading ────────────────────────────── */
    img { background-color: #e2e8f0; }