:root{
  --bg:#0e0f12;
  --card:#13151a;
  --muted:#a5adbd;
  --text:#f3f5f7;
  --brand:#7aa2ff;
  --brand2:#9bffd6;
  --radius:16px;
  --maxw:1100px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(80vw 80vh at 70% -10%, rgba(122,162,255,.12), transparent 60%),
    radial-gradient(60vw 60vh at -10% 20%, rgba(155,255,214,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand);text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(122,162,255,.12); color:#cfe0ff; border:1px solid rgba(122,162,255,.25)}
.hero{padding:64px 0 24px; text-align:center}
.hero h1{font-size:clamp(32px,6vw,56px); line-height:1.05; margin:8px 0 14px}
.hero p{max-width:720px; margin:0 auto 24px; color:var(--muted); font-size:clamp(16px,2.5vw,18px)}
.cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:10px}
.btn{padding:14px 18px; border-radius:12px; font-weight:600; border:1px solid transparent; cursor:pointer;
  background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#0b0d10; box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:var(--text); border-color:rgba(255,255,255,.18)}
.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.section{padding:48px 0}
.section h2{font-size:clamp(24px,4.5vw,32px); margin:0 0 12px}
.muted{color:var(--muted)}
.list{display:grid; gap:10px; margin:10px 0; padding-left:0}
.list li{list-style:none; padding:12px 14px; border:1px dashed rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.02)}
.pill{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.12); color:var(--muted); margin:4px 6px 4px 0}
.columns{display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.footer{padding:28px 0 60px; color:var(--muted); text-align:center; font-size:14px}
.embed{width:100%; min-height:500px; border:0; border-radius:12px; background:#0b0d10}
.tiny{font-size:12px}
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
hr.div{border:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.16), rgba(255,255,255,.0)); margin:28px 0}
@media (prefers-reduced-motion:no-preference){
  .fade{opacity:0; transform:translateY(8px); animation:fade .7s ease forwards}
  .delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}.delay-4{animation-delay:.32s}
  @keyframes fade{to{opacity:1; transform:none}}
}