:root{
  --bg:#0b1220; --surface:#0f1728; --panel:#121a2e; --card:#151f36; --line:#22304c;
  --text:#eaf0f8; --muted:#a8b3c7; --brand:#5fa8ff; --brand-2:#1fd6a3;
  --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --shadow-1:0 10px 24px rgba(0,0,0,.28); --shadow-2:0 6px 16px rgba(0,0,0,.22);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:2.5rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 10% 0%, #0e1931 0%, var(--bg) 60%);
  color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:1160px;margin:0 auto;padding:var(--space-6) var(--space-4)}
.small{font-size:.92rem}.muted{color:var(--muted)}.hidden{display:none}
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--space-4);top:var(--space-4);background:#fff;color:#000;padding:var(--space-2) var(--space-3);border-radius:6px;z-index:9999}

/* Nav */
.topnav{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(9,14,25,.6);border-bottom:1px solid rgba(255,255,255,.05);z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-right{display:flex;gap:.5rem}
.ghost.small{padding:.35rem .6rem;font-size:.9rem}

/* Hero */
.site-header{
  background:
    radial-gradient(600px 300px at 20% -10%, rgba(95,168,255,.35) 0%, rgba(31,214,163,.25) 40%, transparent 70%),
    linear-gradient(180deg, #0c1426 0%, #0f1728 80%);
  border-bottom:1px solid var(--line);
}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-7);align-items:center;min-height:42vh}
.hero-left h1{margin:.2rem 0 .6rem;font-size:2.25rem;line-height:1.08;letter-spacing:-.01em}
.sub{margin:0 0 var(--space-5);color:var(--muted)}.break{display:block;margin-top:.35rem}
.quick-start{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 var(--space-5)}
.quick-start select,.quick-start button{border-radius:var(--radius-md);border:1px solid var(--line);padding:.62rem .8rem;background:var(--card);color:var(--text);outline:none}
.quick-start select:focus{border-color:var(--brand)}
.quick-start button{background:linear-gradient(135deg,var(--brand) 0%, #2f8dff 60%);color:#061325;border:0;font-weight:800;cursor:pointer;box-shadow:var(--shadow-1)}
.quick-start button:hover{filter:brightness(1.06)} .quick-start button:active{transform:translateY(1px)}
.trust-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 var(--space-4)}
.trust-badge{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.4rem .7rem;font-size:.9rem;color:var(--muted)}

.hero-right .demo-panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.0));border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-2)}
.demo-row{display:flex;gap:.75rem;flex-wrap:wrap}
.demo-item{display:flex;gap:.6rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:.55rem .7rem}
.demo-icon{font-size:1.2rem}.demo-text{font-size:.96rem}.demo-footer{margin-top:.6rem;color:var(--muted)}

/* Output */
.output{margin-top:var(--space-6)}
.output-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.selector-inline select{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-md);padding:.4rem .6rem}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem;margin-top:.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5)}
.card h3{margin-top:0;letter-spacing:.01em}
.card:nth-child(1){grid-column:span 4}.card:nth-child(2){grid-column:span 4}.card:nth-child(3){grid-column:span 4}.steps-card{grid-column:span 8}.card:nth-child(5){grid-column:span 4}
.card a{color:var(--brand);text-decoration:none}.card a:hover{text-decoration:underline}
.progressive li{opacity:0;transform:translateY(4px);animation:rise .35s ease-out forwards}
.progressive li:nth-child(1){animation-delay:.02s}.progressive li:nth-child(2){animation-delay:.08s}
.progressive li.revealed{opacity:1;transform:none;animation:none}
.inline-disclaimer{margin-top:var(--space-6);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-5)}
.neutral-links{margin:.35rem 0 0 1.1rem}
.ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:.55rem .9rem;border-radius:var(--radius-md);cursor:pointer}
.ghost:hover{border-color:var(--brand)}
.site-footer{border-top:1px solid var(--line);color:var(--muted);padding:var(--space-6) 0;margin-top:var(--space-8)}
.foot-wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between}

/* Responsive */
@keyframes rise{to{opacity:1;transform:none}}
@media (max-width:960px){.hero{grid-template-columns:1fr;gap:var(--space-6)}.steps-card{grid-column:span 12}.card{grid-column:span 12 !important}}
@media (max-width:540px){.hero-left h1{font-size:1.9rem}.container{padding:var(--space-5) var(--space-4)}}