/* ── Base ──────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    body { overflow-x: hidden; }

    /* ── Scroll Reveal ─────────────────────────────────── */
    @media (prefers-reduced-motion: no-preference) {
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            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);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .scroll-reveal { opacity: 1; transform: none; transition: none; }
    }

    /* ── Navbar ────────────────────────────────────────── */
    #navbar {
        background: transparent;
    }
    #navbar.scrolled {
        background: rgba(19, 21, 25, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
    }

    /* ── Mobile Menu ───────────────────────────────────── */
    #mobileMenu.open {
        opacity: 1;
        pointer-events: all;
    }

    /* ── Typography refinements ────────────────────────── */
    h1, h2, h3, h4 { font-feature-settings: "ss01"; }

    /* ── Selection ─────────────────────────────────────── */
    ::selection {
        background: rgba(255, 107, 74, 0.2);
        color: inherit;
    }

    /* ── Smooth image rendering ────────────────────────── */
    img { -webkit-font-smoothing: antialiased; }

    /* ── Focus styles ──────────────────────────────────── */
    a:focus-visible, button:focus-visible {
        outline: 2px solid #FF6B4A;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ── Custom scrollbar ──────────────────────────────── */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #131519; }
    ::-webkit-scrollbar-thumb { background: #5c5f68; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #FF6B4A; }

    /* ── Subtle gradient for hero text area ────────────── */
    #hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to top, white, transparent);
        pointer-events: none;
        z-index: 1;
    }

    /* ── Service card hover glow ───────────────────────── */
    .group:hover .rounded-xl {
        box-shadow: 0 0 30px rgba(255, 107, 74, 0.15);
    }