/* NXBLOX AI - all styles. No build step, no framework. */
:root{
  --bg:#07070c; --bg2:#0d0d16; --surface:#12121d; --line:rgba(255,255,255,.08);
  --text:#ecedf5; --muted:#969ab5; --accent:#7c5cff; --accent2:#1fd6c6;
  --grad:linear-gradient(110deg,#7c5cff,#5b8cff 45%,#1fd6c6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit}
.wrap{width:100%; max-width:1100px; margin:0 auto; padding:0 24px}
.display{font-family:"Space Grotesk",Inter,system-ui,sans-serif; letter-spacing:-.02em; font-weight:700}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.btn{
  display:inline-block; border-radius:999px; padding:14px 28px; font-weight:600;
  text-decoration:none; background:var(--grad); color:#0a0a12; border:0; cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1); filter:none}

/* glow behind the hero */
.glow{position:absolute; inset-inline:0; top:0; height:600px; pointer-events:none; z-index:-1;
  background:radial-gradient(600px 380px at 70% 10%,rgba(124,92,255,.30),transparent 60%),
             radial-gradient(520px 360px at 20% 25%,rgba(31,214,198,.18),transparent 60%);}
main{position:relative; overflow:hidden; flex:1 0 auto}

header.site{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:24px; padding-bottom:24px; flex-wrap:wrap}
.logo{font-size:20px; text-decoration:none}
header.site nav{display:flex; align-items:center; gap:20px; font-size:14px}
header.site nav a{color:var(--muted); text-decoration:none}
header.site nav a:hover{color:var(--text)}

.hero{max-width:720px; margin:0 auto; padding:80px 24px 96px; text-align:center}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); margin:0}
.hero h1{font-size:clamp(34px,6vw,60px); line-height:1.05; margin:20px 0 0}
.hero p.lede{color:var(--muted); font-size:18px; max-width:560px; margin:24px auto 0}
.cta{display:flex; justify-content:center; gap:12px; margin-top:36px; flex-wrap:wrap}
.hero p.fine{color:var(--muted); font-size:14px; margin-top:24px}

h1.page{font-size:clamp(28px,4vw,44px); margin:32px 0 0}
.sub{color:var(--muted); margin-top:8px}

.cards{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:40px}
.card{border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:24px;
  display:flex; flex-direction:column}
.card h2{font-size:18px; margin:0}
.price{font-size:38px; margin:8px 0 0}
.card .meta{color:var(--muted); font-size:14px; margin-top:4px}
.card .btn{margin-top:20px; text-align:center}
.panel{border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:24px; margin-top:24px}
.panel h2{font-size:18px; margin:0}
.panel p{color:var(--muted); font-size:14px; margin:4px 0 0}

/* legal pages */
.doc{max-width:760px; margin:0 auto; padding:64px 24px}
.doc .body{margin-top:24px; font-size:14px; line-height:1.7; color:var(--muted)}
.doc .body h2{font-family:"Space Grotesk",Inter,sans-serif; color:var(--text); font-size:18px;
  font-weight:600; margin:32px 0 0}
.doc .body p{margin:12px 0 0}
.doc .body p.strong{color:var(--text); font-weight:500}
.doc .body ul{margin:8px 0 0; padding-left:20px}
.doc .body li{margin-top:4px}
.back{display:inline-block; margin-top:40px; color:var(--accent2); font-size:14px}

footer.site{border-top:1px solid var(--line); flex-shrink:0}
footer.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:24px; padding-bottom:24px; font-size:14px; color:var(--muted); flex-wrap:wrap}
footer.site nav{display:flex; gap:20px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--text)}