/* Minimal modern CSS — same as starter with small tweaks for Ming‑Hong */
*,
*::before,
*::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; line-height:1.6; color:var(--text); background:var(--bg); }
:root{ --bg:#0b0c0e; --surface:#121318; --surface-2:#171923; --text:#e9ecf1; --muted:#a7afc0; --accent:#7aa2ff; --accent-2:#93e5ab; --radius:12px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --step-0: clamp(14px, 0.9vw + 10px, 16px);
  --step-1: clamp(20px, 1.4vw + 12px, 24px);
  --step-2: clamp(26px, 1.8vw + 14px, 34px);
  --step-3: clamp(34px, 2.4vw + 16px, 48px);
}
@media (prefers-color-scheme: light){ :root{ --bg:#fcfcfd; --surface:#fff; --surface-2:#f2f4f8; --text:#0e1525; --muted:#5b6474; --accent:#365cff; --accent-2:#116149; --shadow:0 6px 24px rgba(14,21,37,.08);} }
h1,h2,h3{ line-height:1.15 }
h1{ font-size:var(--step-3); margin:0 0 .3em; letter-spacing:-.02em }
h2{ font-size:var(--step-2); margin:0 0 .5em }
h3{ font-size:1.2rem; margin:0 0 .4em }
p{ margin:0 0 1rem; font-size:var(--step-0); color:var(--text) }
.lead{ font-size:clamp(1rem, 1vw + .75rem, 1.25rem); color:var(--muted) }
.container{ width:min(1100px, 92vw); margin-inline:auto }
.section{ padding:clamp(3rem,6vw,6rem) 0; background:var(--bg) }
.section.alt{ background:var(--surface-2) }
.section .narrow{ width:min(760px, 92vw) }

.site-header{ position:sticky; top:0; z-index:1000; background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px); border-bottom:1px solid color-mix(in oklab, var(--muted) 20%, transparent); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px }
.logo{ font-weight:700; text-decoration:none; color:var(--text); font-size:1.1rem }
.logo .accent{ color:var(--accent) }
.site-nav ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0 }
.site-nav a{ color:var(--muted); text-decoration:none; padding:.5rem .75rem; border-radius:8px }
.site-nav a:hover, .site-nav a:focus{ color:var(--text); background:color-mix(in oklab, var(--accent) 22%, transparent) }
.nav-toggle{ display:none }
.hamburger{ display:none; cursor:pointer; padding:.5rem; border-radius:8px }
.hamburger span{ display:block; width:26px; height:2px; background:var(--text); margin:6px 0; transition:transform .2s ease }

@media (max-width:760px){
  .hamburger{ display:block }
  .site-nav{ position:absolute; right:1rem; top:64px; background:var(--surface); border:1px solid color-mix(in oklab, var(--muted) 25%, transparent);
    padding:.5rem; border-radius:var(--radius); box-shadow:var(--shadow); transform-origin:top right; transform:scale(.98); opacity:0; pointer-events:none;
    transition: transform .15s ease, opacity .15s ease; }
  .site-nav ul{ flex-direction:column }
  .nav-toggle:checked ~ .site-nav{ transform:scale(1); opacity:1; pointer-events:auto }
}

.hero{ background:
  radial-gradient(80rem 40rem at 10% -20%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%),
  radial-gradient(80rem 40rem at 120% 10%, color-mix(in oklab, var(--accent-2) 18%, transparent), transparent 70%); }
.eyebrow{ letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-size:.85rem }
.hero-title{ font-size: clamp(2rem, 6vw, 4rem) }
.actions{ display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap }

.btn{ display:inline-block; border:1px solid color-mix(in oklab, var(--muted) 28%, transparent); padding:.7rem 1rem; border-radius:999px; text-decoration:none; color:var(--text);
  background: color-mix(in oklab, var(--surface) 90%, transparent) }
.btn:hover{ border-color: color-mix(in oklab, var(--muted) 48%, transparent) }
.btn.primary{ background: color-mix(in oklab, var(--accent) 22%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 30%, var(--surface)) }
.link{ color:var(--accent); text-decoration:none; font-weight:600 }
.link:hover{ text-decoration:underline }

.grid{ display:grid; gap:1rem }
.cards{ grid-template-columns: repeat(3,1fr) }
@media (max-width:960px){ .cards{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:600px){ .cards{ grid-template-columns: 1fr } }

.card{ border:1px solid color-mix(in oklab, var(--muted) 20%, transparent); border-radius:var(--radius); overflow:clip; background:var(--surface); box-shadow:var(--shadow);
  display:flex; flex-direction:column }
.card img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--surface-2) }
.card-body{ padding:1rem }
.card p{ color:var(--muted) }

.bullets{ padding-left:1.1rem; color:var(--muted) }
.bullets li{ margin:.4rem 0 }

.site-footer{ padding:2rem 0; background:var(--surface); border-top:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:.5rem }
.footer-inner .top{ text-decoration:none; color:var(--muted) }
.footer-inner .top:hover{ color:var(--text) }

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--accent); color:#fff; border-radius:8px; z-index:1001 }
:where(a,button,input,.btn):focus-visible{ outline:2px solid color-mix(in oklab, var(--accent) 40%, #fff); outline-offset:2px }