:root{
  --bg:#08080d; --bg2:#0d0d16; --panel:#12121d; --panel2:#181826; --border:#26263a;
  --text:#ececf4; --muted:#9a9ab8; --pink:#ff2d78; --ember:#ff6a3d; --cyan:#38e8ff; --violet:#a05bff;
  --glow-pink:0 0 22px rgba(255,45,120,.45); --glow-cyan:0 0 22px rgba(56,232,255,.35);
  --grad:linear-gradient(100deg,var(--pink),var(--ember));
  --radius:16px; --maxw:1160px;
  font-family:"Segoe UI",system-ui,-apple-system,Inter,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(1100px 620px at 12% -8%,rgba(255,45,120,.12),transparent),
  radial-gradient(1000px 560px at 108% 4%,rgba(56,232,255,.09),transparent),
  radial-gradient(900px 700px at 50% 120%,rgba(160,91,255,.10),transparent),
  var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.mono{font-family:"JetBrains Mono",Consolas,monospace}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(8,8,13,.72);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px;font-size:18px}
.brand .mark{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
  background:var(--grad);box-shadow:var(--glow-pink);color:#fff;font-size:15px}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a.link{color:var(--muted);font-weight:600;font-size:14px}
.nav a.link:hover{color:var(--text);text-decoration:none}
.nav .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;
  font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--glow-pink)}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none}
.btn-ghost{background:var(--panel);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--pink);text-decoration:none}

/* hero */
.hero{padding:90px 0 60px;text-align:center}
.kicker{display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--border);border-radius:999px;padding:6px 14px;margin-bottom:22px;
  box-shadow:var(--glow-cyan)}
.hero h1{font-size:clamp(34px,6vw,62px);line-height:1.05;margin:0 0 18px;font-weight:800;letter-spacing:-1px}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(16px,2.2vw,21px);color:var(--muted);max-width:720px;margin:0 auto 30px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:38px;justify-content:center;flex-wrap:wrap;margin-top:52px}
.stat b{display:block;font-size:34px;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:13px;letter-spacing:.5px}

/* sections */
section{padding:64px 0}
.sec-head{text-align:center;max-width:660px;margin:0 auto 44px}
.sec-head h2{font-size:clamp(26px,4vw,40px);margin:0 0 12px;font-weight:800;letter-spacing:-.5px}
.sec-head p{color:var(--muted);margin:0;font-size:17px}

/* feature grid */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;transition:.18s}
.card:hover{border-color:rgba(255,45,120,.5);transform:translateY(-3px);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.card .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:20px;
  background:var(--panel2);border:1px solid var(--border);margin-bottom:14px}
.card h3{margin:0 0 8px;font-size:19px}
.card p{margin:0;color:var(--muted);font-size:14px}

/* category chips + store */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--panel);
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.chip:hover{color:var(--text)}
.chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--glow-pink)}
.search{display:block;width:100%;max-width:520px;margin:0 auto 26px;padding:14px 18px;border-radius:12px;
  background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:15px;outline:none}
.search:focus{border-color:var(--pink);box-shadow:var(--glow-pink)}
.actor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.actor-grid{grid-template-columns:1fr}}
.actor{display:block;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;transition:.15s}
.actor:hover{border-color:var(--pink);text-decoration:none;transform:translateY(-2px)}
.actor .cat{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ember)}
.actor h4{margin:6px 0 6px;font-size:17px;color:var(--text)}
.actor p{margin:0;color:var(--muted);font-size:13px}
.actor code{color:var(--cyan);font-size:12px}

/* code blocks */
pre{background:#0a0a12;border:1px solid var(--border);border-radius:12px;padding:16px 18px;overflow-x:auto;
  font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;line-height:1.7;color:#d6d6ea}
code{font-family:"JetBrains Mono",Consolas,monospace}
p code,li code,td code{background:var(--panel2);border:1px solid var(--border);border-radius:6px;
  padding:1px 6px;font-size:.9em;color:var(--ember)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:28px;text-align:center}
.price.feat{border-color:var(--pink);box-shadow:var(--glow-pink);position:relative}
.price.feat::before{content:"Most popular";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:999px}
.price h3{margin:0 0 6px;font-size:20px}
.price .amt{font-size:42px;font-weight:800;margin:10px 0}
.price .amt span{font-size:15px;color:var(--muted);font-weight:500}
.price ul{list-style:none;padding:0;margin:18px 0;text-align:left}
.price li{padding:7px 0;color:var(--muted);font-size:14px;border-bottom:1px solid var(--border)}
.price li::before{content:"✦ ";color:var(--cyan)}

/* docs layout */
.docs{display:grid;grid-template-columns:230px 1fr;gap:40px;padding:40px 0 80px}
@media(max-width:900px){.docs{grid-template-columns:1fr}}
.docnav{position:sticky;top:84px;align-self:start}
.docnav a{display:block;padding:7px 12px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:600}
.docnav a:hover,.docnav a.on{background:var(--panel);color:var(--text);text-decoration:none}
.doc-body h1{font-size:34px;margin:0 0 14px}
.doc-body h2{font-size:24px;margin:34px 0 12px;padding-top:12px;border-top:1px solid var(--border)}
.doc-body h3{font-size:18px;margin:22px 0 8px;color:var(--cyan)}
.doc-body table{width:100%;border-collapse:collapse;margin:16px 0}
.doc-body th,.doc-body td{text-align:left;padding:9px 12px;border:1px solid var(--border);font-size:14px}
.doc-body th{background:var(--panel2)}

/* schema table */
.schema{width:100%;border-collapse:collapse;margin:14px 0}
.schema th,.schema td{text-align:left;padding:9px 12px;border:1px solid var(--border);font-size:14px}
.schema th{background:var(--panel2);color:var(--muted)}

/* footer */
footer{border-top:1px solid var(--border);padding:50px 0 40px;margin-top:40px;background:var(--bg2)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h5{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.foot a{display:block;color:var(--muted);font-size:14px;padding:4px 0}
.foot a:hover{color:var(--text)}
.copyright{color:var(--muted);font-size:13px;margin-top:34px;text-align:center;border-top:1px solid var(--border);padding-top:24px}
.breadcrumb{color:var(--muted);font-size:13px;margin:24px 0}
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;background:var(--panel2);
  border:1px solid var(--border);color:var(--ember);margin-right:6px}