:root{
  --bg:#0b0c10;
  --card:#12141a;
  --text:#f2f4f8;
  --muted:#b8c0cc;
  --border:#232733;
  --accent:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #171a24 0%, var(--bg) 55%);
  color:var(--text);
  line-height:1.6;
}
.container{width:min(980px, 92vw); margin:40px auto 80px;}
.hero{
  padding:28px 24px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border-radius:18px;
}
.hero.compact{padding:22px 24px}
.badge{
  display:inline-block; padding:6px 10px;
  border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-size:12px;
}
h1{margin:14px 0 10px; font-size: clamp(28px, 4.2vw, 44px); line-height:1.15;}
h2{margin:0 0 10px; font-size:20px;}
.sub{margin:0; color:var(--muted); font-size:16px;}
.fine{margin:10px 0 0; color:var(--muted); font-size:12px;}
.card{
  margin-top:18px; padding:22px 24px;
  border:1px solid var(--border);
  background: rgba(18,20,26,0.76);
  border-radius:18px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  margin-top:14px;
  padding:12px 16px; border-radius:12px;
  background: var(--accent); color:#0b0c10;
  text-decoration:none; font-weight:800;
  border:none; cursor:pointer;
}
.btn.secondary{
  background: transparent;
  color: var(--text);
  border:1px solid var(--border);
  font-weight:700;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;}
.form{display:grid; gap:14px; margin-top:14px;}
label{display:grid; gap:6px; color:var(--muted); font-size:14px;}
input{
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
.email{max-width:420px}
.qbox{padding:14px 14px; border:1px solid var(--border); border-radius:14px; background: rgba(255,255,255,0.02);}
.qtitle{font-size:18px; font-weight:800; margin-bottom:10px;}
.opts{display:grid; gap:10px; margin-top:8px;}
.opt{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,0.02);
}
.opt input{margin-top:3px;}
.nav{display:flex; gap:12px; flex-wrap:wrap;}
.toprow{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:10px;}
.progresswrap{flex:1; height:10px; border:1px solid var(--border); border-radius:999px; overflow:hidden; background: rgba(255,255,255,0.03);}
.progressbar{height:100%; width:0%; background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.35));}
.progressText{color:var(--muted); font-size:12px; min-width:64px; text-align:right;}
.paywall{
  margin: 18px 0 0;
  padding: 16px 16px;
  border:1px dashed var(--border);
  border-radius: 14px;
}
.profile{min-height:72px}
.skeleton{height:14px; border-radius:10px; background: rgba(255,255,255,0.07); margin:10px 0;}
.skeleton.short{width:55%}
.footer{margin-top:18px; text-align:center;}
ol, ul{color:var(--muted);}
a{color:var(--text);}
code{background: rgba(255,255,255,0.06); padding:2px 6px; border-radius:8px; border:1px solid var(--border);}