/* ============================================================
   PT Fan Tech Solution — Company Profile (dark tech theme)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg: #070B15;
    --bg2: #0B1226;
    --bg3: #0E1630;
    --card: rgba(148, 163, 184, 0.055);
    --card-hover: rgba(148, 163, 184, 0.10);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #E6EAF5;
    --muted: #94A3B8;
    --dim: #64748B;
    --indigo: #6366F1;
    --violet: #8B5CF6;
    --cyan: #22D3EE;
    --grad: linear-gradient(120deg, #6366F1, #22D3EE);
    --grad-soft: linear-gradient(120deg, rgba(99, 102, 241, .18), rgba(34, 211, 238, .18));
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 18px 45px -18px rgba(0, 0, 0, 0.65);
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-sm { padding: 9px 17px; font-size: 0.88rem; }

.btn-grad {
    background: var(--grad);
    color: #05070F;
    box-shadow: 0 8px 26px -8px rgba(99, 102, 241, .55), 0 4px 14px -6px rgba(34, 211, 238, .45);
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(99, 102, 241, .7), 0 6px 18px -6px rgba(34, 211, 238, .55); }

.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }

/* ============================================================
   Navbar
   ============================================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 11, 21, 0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border);
}
.nav.scrolled { background: rgba(7, 11, 21, 0.92); }

.nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-logo {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--grad);
    color: #05070F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .02em;
    box-shadow: 0 6px 18px -6px rgba(99, 102, 241, .6);
    overflow: hidden;
    flex: none;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 1.02rem; letter-spacing: .03em; }
.brand-text small { font-size: 0.72rem; color: var(--muted); }

.nav-links { display: flex; align-items: center; gap: 6px; }

/* Tautan akun di drawer mobile: disembunyikan di layar besar, ditampilkan di
   dalam drawer pada layar kecil (lihat media query <=860px). Diletakkan di
   sini — bukan di shop.css — supaya aturan "tampilkan" di media query tidak
   kalah oleh aturan dasar karena urutan pemuatan berkas. */
.nav-links .nav-drawer { display: none; }

/* Lapisan peredup di belakang drawer mobile. Diletakkan sebagai anak body —
   bukan di dalam .nav — supaya position:fixed-nya benar-benar relatif ke
   layar, dan z-index-nya DI BAWAH .nav (100) agar drawer tetap bisa diklik. */
.nav-scrim { display: none; }
.nav-links a {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--muted);
    transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-burger {
    display: none;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    padding: 8px;
    cursor: pointer;
}
.nav-burger svg { width: 22px; height: 22px; display: block; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 24px 110px;
    border-bottom: 1px solid var(--border);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
}
.blob-a { width: 480px; height: 480px; background: rgba(99, 102, 241, .35); top: -180px; right: -100px; }
.blob-b { width: 420px; height: 420px; background: rgba(34, 211, 238, .22); bottom: -160px; left: -120px; }
.blob-c { width: 300px; height: 300px; background: rgba(139, 92, 246, .25); top: 30%; left: 45%; }
.grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}

.hero-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 56px;
    align-items: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(99, 102, 241, .4);
    background: var(--grad-soft);
    color: #A5B4FC;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.hero-title {
    margin-top: 22px;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, #FFFFFF 20%, #A5B4FC 60%, #67E8F9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-tagline {
    margin-top: 18px;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
}

.hero-desc { margin-top: 16px; color: var(--muted); font-size: 1.02rem; max-width: 560px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hs-value {
    font-size: 1.9rem;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}
.hs-label { font-size: 0.82rem; color: var(--dim); }

/* Terminal card */
.terminal {
    border-radius: var(--radius);
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid var(--border-strong);
    box-shadow: 0 30px 70px -30px rgba(99, 102, 241, .5), 0 10px 30px -12px rgba(0, 0, 0, .6);
    overflow: hidden;
    backdrop-filter: blur(10px);
}
.terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--border);
}
.t-dot { width: 11px; height: 11px; border-radius: 50%; }
.t-dot.r { background: #F87171; }
.t-dot.y { background: #FBBF24; }
.t-dot.g { background: #34D399; }
.t-title { margin-left: 8px; font-family: var(--mono); font-size: 0.78rem; color: var(--dim); }

.terminal-body {
    padding: 22px 22px 24px;
    font-family: var(--mono);
    font-size: 0.84rem;
    line-height: 2;
    color: #C7D2FE;
}
.t-prompt { color: var(--cyan); font-weight: 500; }
.t-cmd { color: #E6EAF5; }
.t-arg { color: #93C5FD; }
.t-out { color: #94A3B8; }
.t-out .t-dim { color: #475569; }
.t-ok { color: #34D399; }
.t-cursor { color: var(--cyan); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   Sections (general)
   ============================================================ */
.main { display: block; }
.sec { padding: 96px 24px; max-width: 1180px; margin: 0 auto; }
.sec-alt { max-width: none; padding-left: 24px; padding-right: 24px; }
.sec-alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.sec-alt#tentang {
    background:
        radial-gradient(ellipse 60% 60% at 85% 20%, rgba(99, 102, 241, .10), transparent 60%),
        linear-gradient(180deg, rgba(11, 18, 38, .55), rgba(11, 18, 38, .55));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.sec-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.sec-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 12px;
}
.sec-head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.sec-sub { margin-top: 12px; color: var(--muted); }

/* Cards */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

/* ============================================================
   Layanan
   ============================================================ */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.svc-card { padding: 30px 28px; }
.svc-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .5);
    background: var(--card-hover);
    box-shadow: 0 24px 50px -24px rgba(99, 102, 241, .5);
}
.svc-ico {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-soft);
    border: 1px solid rgba(99, 102, 241, .35);
    color: #A5B4FC;
    margin-bottom: 20px;
}
.svc-ico svg { width: 26px; height: 26px; }
.svc-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.svc-card p { color: var(--muted); font-size: 0.94rem; }

/* ============================================================
   Tentang
   ============================================================ */
.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
}
.about-text .sec-eyebrow { margin-bottom: 14px; }
.about-text h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.about-paras { margin-top: 18px; color: var(--muted); }
.about-paras p + p { margin-top: 12px; }

.about-side {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 30px;
    position: relative;
}
.about-side::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(99, 102, 241, .35), transparent 45%, rgba(34, 211, 238, .25));
    z-index: -1;
    filter: blur(26px);
    opacity: .6;
}
.about-side h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 18px; }
.why-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.why-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 0.95rem; }
.why-check {
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--grad-soft);
    border: 1px solid rgba(99, 102, 241, .4);
    color: #67E8F9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.why-check svg { width: 12px; height: 12px; }

/* ============================================================
   Proyek
   ============================================================ */
.proj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.proj-card { overflow: hidden; display: flex; flex-direction: column; }
.proj-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .5);
    box-shadow: 0 24px 50px -24px rgba(99, 102, 241, .5);
}
.proj-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg3); }
.proj-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.proj-card:hover .proj-img img { transform: scale(1.05); }
.proj-img-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(34, 211, 238, .14));
}
.proj-img-ph span { font-size: 2.2rem; font-weight: 800; color: rgba(255, 255, 255, .35); letter-spacing: .04em; }
.proj-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proj-meta { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; }
.proj-year {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--grad-soft);
    border: 1px solid rgba(34, 211, 238, .35);
    color: #67E8F9;
    font-weight: 600;
}
.proj-client { color: var(--dim); }
.proj-body h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.proj-desc { color: var(--muted); font-size: 0.92rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.tag {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
    color: #C7D2FE;
    font-size: 0.76rem;
    font-weight: 500;
}

/* ============================================================
   Tim
   ============================================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.team-card { padding: 28px 26px; text-align: center; }
.team-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .5);
    box-shadow: 0 24px 50px -24px rgba(99, 102, 241, .5);
}
.team-photo {
    width: 88px; height: 88px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: var(--grad);
    color: #05070F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    overflow: hidden;
    box-shadow: 0 10px 26px -10px rgba(99, 102, 241, .6);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 1.08rem; font-weight: 700; }
.team-pos {
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #67E8F9;
    letter-spacing: .02em;
}
.team-bio { margin-top: 12px; color: var(--muted); font-size: 0.9rem; }

/* ============================================================
   Testimoni
   ============================================================ */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.testi-card { padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.testi-card:hover {
    transform: translateY(-5px);
    border-color: rgba(34, 211, 238, .45);
    box-shadow: 0 24px 50px -24px rgba(34, 211, 238, .4);
}
.stars { display: flex; gap: 3px; color: #FBBF24; }
.stars svg { width: 17px; height: 17px; }
.testi-text { color: #C9D4EA; font-size: 0.97rem; font-style: italic; flex: 1; }
.testi-who { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--grad-soft);
    border: 1px solid rgba(99, 102, 241, .4);
    color: #A5B4FC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex: none;
}
.testi-who div { display: flex; flex-direction: column; line-height: 1.3; }
.testi-who strong { font-size: 0.95rem; }
.testi-who div span { font-size: 0.8rem; color: var(--dim); }

/* ============================================================
   Kontak
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 32px 24px;
}
.contact-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .5);
    background: var(--card-hover);
    box-shadow: 0 24px 50px -24px rgba(99, 102, 241, .5);
}
.contact-ico {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-soft);
    border: 1px solid rgba(99, 102, 241, .35);
    color: #A5B4FC;
    margin-bottom: 14px;
}
.contact-ico svg { width: 25px; height: 25px; }
.contact-ico.ico-wa { color: #4ADE80; border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .1); }
.contact-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.contact-value { font-weight: 600; color: var(--text); word-break: break-word; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(11, 18, 38, .7), rgba(7, 11, 21, 1));
    padding: 64px 24px 0;
}
.footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
}
.footer-brand p { margin-top: 16px; color: var(--muted); font-size: 0.92rem; max-width: 340px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #A5B4FC;
    margin-bottom: 8px;
}
.footer-col a, .footer-col span { color: var(--muted); font-size: 0.92rem; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
    border-top: 1px solid var(--border);
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-bottom p { color: var(--dim); font-size: 0.86rem; }
.admin-link {
    color: var(--dim);
    font-size: 0.8rem;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: color .15s ease, border-color .15s ease;
}
.admin-link:hover { color: var(--text); border-color: var(--border-strong); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .hero-side { max-width: 560px; }
    .svc-grid, .proj-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    /* PENTING: `backdrop-filter` pada .nav membuat CONTAINING BLOCK untuk
       keturunan ber-position: fixed. Akibatnya drawer .nav-links yang
       seharusnya memenuhi tinggi layar justru terkunci di dalam header
       (tinggi 72px) — terukur hanya 44px sehingga seluruh item menu
       melimpah keluar kotak dan menimpa konten halaman ("menu tidak
       nampak jelas"). Di layar kecil blur itu dimatikan dan diganti latar
       yang lebih pekat supaya drawer benar-benar memenuhi layar. */
    .nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(7, 11, 21, 0.97);
    }

    .nav-links {
        position: fixed;
        top: 72px;
        right: 0;
        bottom: 0;
        width: min(320px, 84vw);
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: #0A0F1E;              /* pekat: menu harus terbaca jelas */
        border-left: 1px solid var(--border-strong);
        box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .75);
        padding: 22px;
        overflow-y: auto;                 /* menu panjang bisa digulir */
        -webkit-overflow-scrolling: touch;
        transform: translateX(105%);
        transition: transform .25s ease;
        z-index: 120;
    }
    .nav-links.open { transform: translateX(0); }
    .nav-links a { padding: 12px 16px; font-size: 1rem; border-radius: 10px; }
    /* Tautan akun di dalam drawer. Spesifisitas dinaikkan (.nav .nav-links …)
       supaya menang atas aturan dasar di berkas ini, bukan bergantung pada
       urutan pemuatan CSS. */
    .nav .nav-links .nav-drawer {
        display: block;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
        color: #A5B4FC;
        font-weight: 600;
    }
    .nav-burger { display: inline-flex; }
    .nav-actions .btn { display: none; }

    /* Lapisan peredup di belakang drawer agar menu makin jelas. z-index 90 =
       DI BAWAH .nav (100) sehingga drawer tetap menerima klik, tetapi DI ATAS
       seluruh konten halaman. */
    .nav-scrim {
        display: block;
        position: fixed;
        inset: 72px 0 0 0;
        background: rgba(4, 7, 14, .62);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 90;
    }
    body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}

@media (max-width: 640px) {
    .hero { padding: 64px 20px 80px; }
    .sec { padding: 72px 20px; }
    .sec-alt { padding-left: 20px; padding-right: 20px; }
    .svc-grid, .proj-grid, .team-grid, .contact-grid, .testi-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 24px; }
    .footer-inner { grid-template-columns: 1fr; gap: 36px; }
    .hero-actions .btn { width: 100%; }
}