:root{
  --bg:#0b1020; --panel:#11182e; --card:#141d36; --line:#23304f;
  --text:#e8edf7; --muted:#9aa7c2; --brand:#5b8cff; --brand2:#7af0c8;
  --radius:14px; --maxw:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:inherit; text-decoration:none}

/* nav */
.nav{position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:rgba(11,16,32,.72); border-bottom:1px solid var(--line); z-index:10}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.2px}
.logo{color:var(--brand2)}
.links{display:flex; align-items:center; gap:22px}
.links a{color:var(--muted); font-size:14.5px}
.links a:hover{color:var(--text)}

/* buttons */
.btn{display:inline-block; padding:10px 16px; border-radius:10px; font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--brand),#4a78e6); color:#fff}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--brand)}

/* hero */
.hero{padding:84px 0 64px; background:radial-gradient(1200px 400px at 50% -50%, rgba(91,140,255,.18), transparent)}
.eyebrow{color:var(--brand2); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:1.4px; margin:0 0 14px}
.hero h1{font-size:46px; line-height:1.1; margin:0 0 18px; letter-spacing:-.5px}
.sub{color:var(--muted); font-size:18px; max-width:620px}
.cta{display:flex; gap:12px; margin:26px 0 12px; flex-wrap:wrap}
.trust{color:var(--muted); font-size:13.5px; margin-top:18px}

/* sections */
section{padding:56px 0}
h2{font-size:30px; letter-spacing:-.3px; margin:0 0 8px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.card h3{margin:0 0 8px; font-size:18px}
.card p{color:var(--muted); margin:0}

/* code */
.code{background:#0a0f1f; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; overflow:auto; font-size:13.5px; color:#cdd8f0; margin-top:22px}
.code code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}

/* pricing */
.price{display:flex; flex-direction:column}
.price .amount{font-size:30px; font-weight:700; margin:6px 0 12px}
.price .amount span{font-size:15px; color:var(--muted); font-weight:500}
.price ul{list-style:none; padding:0; margin:0 0 18px; color:var(--muted)}
.price ul li{padding:6px 0; border-bottom:1px solid var(--line)}
.price .btn{margin-top:auto}
.featured{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset}

/* footer */
.footer{border-top:1px solid var(--line); padding:40px 0 28px; margin-top:40px}
.footer-inner{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:14px}
.foot-links{display:flex; gap:20px; align-items:center}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:13px}

/* doc pages */
.doc{padding:48px 0; max-width:760px}
.doc h1{font-size:34px; margin:0 0 6px}
.doc h2{font-size:21px; margin:28px 0 8px}
.doc p,.doc li{color:var(--muted)}
.doc .updated{font-size:13px}

@media(max-width:820px){
  .grid3{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .links a:not(.btn){display:none}
}