/* ============================================================
   Asteroid — Cosmic design system (shared)
   Used by: index.html, pilot.html, cost.html, docs.html, benchmark.html
   Dark default + light theme. Body DM Sans · display Sora · code JetBrains Mono.
   ============================================================ */
:root{
  --bg:#070a12; --bg2:#0c1322; --surface:rgba(20,28,45,.55); --surface-solid:#0e1626; --surface2:#141c2c; --border:rgba(126,144,168,.16);
  --text:#e7edf6; --text-muted:#8a98ae; --text-faint:#5b6880;
  --accent:#d4a574; --accent-hi:#f0cfa0; --accent-glow:rgba(212,165,116,.22); --accent-soft:rgba(212,165,116,.12);
  --silver:#7e90a8; --indigo:#9aa6e8; --radius:18px;
  --grid-line:rgba(126,144,168,.08);
}
[data-theme="light"]{
  --bg:#eef2f8; --bg2:#e3eaf4; --surface:rgba(255,255,255,.72); --surface-solid:#ffffff; --surface2:#e9eef6; --border:rgba(90,107,130,.2);
  --text:#0f172a; --text-muted:#4f5b72; --text-faint:#8593a8;
  --accent:#a9763a; --accent-hi:#c79452; --accent-glow:rgba(169,118,58,.18); --accent-soft:rgba(169,118,58,.1);
  --silver:#5a6b82; --indigo:#5b66c7;
  --grid-line:rgba(90,107,130,.1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}html[data-theme="light"]{color-scheme:light}
body{background:radial-gradient(150% 110% at 72% -5%,var(--bg2),var(--bg) 58%);color:var(--text);
  font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-top:68px;transition:color .4s}
a{color:inherit}
.mono{font-family:'JetBrains Mono',monospace}

/* ---- atmosphere ---- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;background:var(--silver);border-radius:50%;opacity:.5;animation:tw var(--t,4s) ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.62}}
.aurora{position:fixed;z-index:0;pointer-events:none;top:-220px;right:-120px;width:760px;height:760px;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 64%);filter:blur(8px)}
.aurora.a2{top:auto;bottom:-360px;left:-220px;right:auto;width:680px;height:680px;opacity:.55}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:68px;display:flex;align-items:center;gap:26px;padding:0 38px;
  background:color-mix(in srgb,var(--bg) 64%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.nav-logo img{height:30px;width:auto}
.nav-logo .wm{font-family:'Sora';font-weight:600;font-size:19px;letter-spacing:.4px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav-links>a{font-size:13.5px;color:var(--text-muted);text-decoration:none;transition:color .2s;position:relative}
.nav-links>a:hover,.nav-links>a.active{color:var(--text)}
.nav-links>a.active::after{content:'';position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--accent)}
.nav-tools{display:flex;align-items:center;gap:14px}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);display:inline-flex;padding:6px;border-radius:7px;transition:color .2s}
.icon-btn:hover{color:var(--text)}
.theme-toggle .sun{display:none}.theme-toggle .moon{display:block}
[data-theme="light"] .theme-toggle .sun{display:block}[data-theme="light"] .theme-toggle .moon{display:none}
.nav-cta{white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--bg);background:linear-gradient(120deg,var(--accent),var(--accent-hi));padding:9px 18px;border-radius:100px;text-decoration:none;transition:box-shadow .25s,transform .15s}
.nav-cta:hover{box-shadow:0 0 26px var(--accent-glow);transform:translateY(-1px)}
.hamburger{display:none;background:none;border:none;color:var(--text);cursor:pointer;margin-left:auto;padding:6px}

/* ---- buttons / chips / kickers ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'DM Sans';font-size:14px;font-weight:600;padding:13px 24px;border-radius:100px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all .22s}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-hi));color:var(--bg)}
.btn-primary:hover{box-shadow:0 0 26px var(--accent-glow);transform:translateY(-1px)}
.btn-ghost,.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border);backdrop-filter:blur(6px)}
.btn-ghost:hover,.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.kick{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.kick .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chip,.badge{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(6px);padding:7px 15px;border-radius:100px}

/* ---- layout containers ---- */
.container{max-width:1200px;margin:0 auto;padding:56px 38px;position:relative;z-index:1}
.section{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:80px 38px}
.sec-head{max-width:720px;margin-bottom:40px}
.sec-title{font-family:'Sora';font-weight:600;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-1px;margin-top:16px;line-height:1.1}
.sec-sub{margin-top:14px;font-size:16px;line-height:1.65;color:var(--text-muted)}
.page-hero{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:64px 38px 8px}

/* ---- cards ---- */
.card{position:relative;background:var(--surface);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:30px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(0,0,0,.4);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.card:hover::before{opacity:.6}

/* ---- inline code + blocks ---- */
code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:var(--surface2);padding:2px 6px;border-radius:5px;color:var(--accent)}
pre{background:var(--surface-solid);border:1px solid var(--border);border-radius:12px;padding:18px 20px;overflow-x:auto}
pre code{background:none;padding:0;color:var(--text);font-size:13.5px;line-height:1.65}
.code-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface-solid);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.code-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;background:color-mix(in srgb,var(--surface-solid) 60%,#000 6%);border-bottom:1px solid var(--border)}
.code-bar .dot{width:11px;height:11px;border-radius:50%}
.dot-r{background:#ff5f56}.dot-y{background:#ffbd2e}.dot-g{background:#27c93f}
.code-lang{margin-left:10px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-faint)}
.code-copy{margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--text-muted);font-family:'JetBrains Mono';font-size:11px;padding:5px 12px;border-radius:7px;cursor:pointer;transition:all .2s}
.code-copy:hover,.code-copy.copied{color:var(--accent);border-color:var(--accent)}
.code-card pre{margin:0;border:none;border-radius:0;background:transparent}
.tok-c{color:var(--text-faint);font-style:italic}.tok-s{color:var(--accent)}.tok-k{color:var(--indigo)}.tok-f{color:var(--silver)}

/* code tabs (docs) */
.code-tabs{margin:16px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-solid)}
.code-tabs .tab-btns{display:flex;background:color-mix(in srgb,var(--surface-solid) 60%,#000 6%);border-bottom:1px solid var(--border)}
.code-tabs .tab-btn{background:none;border:none;cursor:pointer;padding:9px 18px;font-family:'JetBrains Mono';font-size:12px;color:var(--text-muted);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.code-tabs .tab-btn:hover{color:var(--text)}
.code-tabs .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.code-tabs .tab-panel{margin:0}.code-tabs .tab-panel[hidden]{display:none}
.code-tabs .tab-panel pre{margin:0;border:none;border-radius:0}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;margin:18px 0}
th{text-align:left;padding:11px 14px;border-bottom:2px solid var(--border);color:var(--text-muted);font-size:11.5px;text-transform:uppercase;letter-spacing:1px;font-family:'JetBrains Mono',monospace}
td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-muted)}
td code{font-size:12.5px}

/* ---- callouts (docs) ---- */
.callout{background:var(--surface);backdrop-filter:blur(8px);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:14px 18px;margin:18px 0}
.callout p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.6}
.callout strong{color:var(--text)}
.group-intro{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:12px;padding:16px 20px;margin:0 0 12px}
.group-intro p{margin:0;color:var(--text);font-size:14.5px;line-height:1.6}

/* ---- forms (pilot) ---- */
.form-row{margin-bottom:20px}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
.form-row label .req{color:var(--accent)}
.form-row input[type=text],.form-row input[type=email],.form-row textarea{width:100%;background:color-mix(in srgb,var(--surface-solid) 75%,transparent);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;transition:border-color .2s,box-shadow .2s}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--text-faint)}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-row textarea{resize:vertical;min-height:104px}
.radio-group{display:flex;gap:10px;flex-wrap:wrap}
.radio-group label{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--text-muted);cursor:pointer;margin-bottom:0;border:1px solid var(--border);background:color-mix(in srgb,var(--surface-solid) 60%,transparent);padding:9px 16px;border-radius:100px;transition:all .2s}
.radio-group label:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--text)}
.radio-group input{accent-color:var(--accent);margin:0}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-actions .btn[disabled]{opacity:.55;cursor:not-allowed}
.form-status{font-size:13px;line-height:1.5}.form-status.ok{color:var(--accent)}.form-status.err{color:#f87171}
.form-fineprint{font-size:12px;color:var(--text-faint);margin-top:16px}

/* ---- footer ---- */
.footer{position:relative;z-index:1;border-top:1px solid var(--border);margin-top:48px}
.footer-in{max-width:1200px;margin:0 auto;padding:40px 38px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-in img{height:26px;width:auto;opacity:.9}
.footer-in .name{font-family:'Sora';font-weight:600;font-size:15px}
.footer-in .by{color:var(--text-faint);font-size:13px}
.footer-links{margin-left:auto;display:flex;gap:24px}
.footer-links a{color:var(--text-muted);font-size:13.5px;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--accent)}

/* ---- reveal ---- */
[data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js [data-reveal]{opacity:0;transform:translateY(24px)}
html.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{transition:none}html.js [data-reveal]{opacity:1;transform:none}
  .star,.kick .pulse{animation:none}
}

/* ---- responsive nav ---- */
@media(max-width:820px){
  .nav-links{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:18px;
    background:var(--surface-solid);border-bottom:1px solid var(--border);padding:22px 38px;margin-left:0;display:none}
  .nav-links.open{display:flex}
  .nav-links>a.active::after{display:none}
  .nav-links .nav-tools{margin-top:4px}
  .hamburger{display:block}
}
@media(max-width:640px){
  .container,.section,.page-hero{padding-left:22px;padding-right:22px}
  .form-row.two{grid-template-columns:1fr}
}