:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --acc:#0ea5e9;
  --acc-2:#22c55e;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --stroke:#1e293b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --max:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(180deg,#0a1020 0%,#0b1325 100%);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--acc);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:20px}
header{position:sticky;top:0;background:rgba(10,16,32,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--stroke);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:
  radial-gradient(70% 70% at 30% 30%, #22d3ee 0%, #2563eb 40%, #1d4ed8 70%, #0b1325 100%);
  box-shadow:0 0 0 2px #0b1325, 0 4px 16px rgba(37,99,235,.45)}
.menu{display:flex;gap:18px;flex-wrap:wrap}
.menu a{color:var(--muted)}
.cta{background:var(--acc);color:#001018;padding:10px 16px;border-radius:10px;font-weight:700}
.cta:hover{filter:brightness(1.1)}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;margin:28px 0 18px}
.hero-card{background:linear-gradient(180deg,#0f1a35 0%,#0b1220 100%);border:1px solid var(--stroke);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:0 0 10px}
.sub{color:var(--muted);font-size:18px}
.hero-actions{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--stroke);background:#0b1220;color:var(--text)}
.btn--primary{background:var(--acc);color:#001018;border-color:transparent;font-weight:800}
.badges{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.badge{font-size:12px;padding:6px 10px;border:1px solid var(--stroke);border-radius:999px;color:var(--muted)}
.hero-media{position:relative}
.hero-media .poster{border-radius:var(--radius);border:1px solid var(--stroke);box-shadow:var(--shadow);overflow:hidden}
.hero-stats{position:absolute;bottom:10px;left:10px;display:flex;gap:10px;flex-wrap:wrap}
.chip{background:rgba(2,6,23,.7);backdrop-filter:blur(6px);border:1px solid var(--stroke);padding:8px 10px;border-radius:10px;font-size:12px}

.section{margin:34px 0}
.section h2{font-size:24px;margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.cols-3 > *{grid-column:span 4}
.cols-4 > *{grid-column:span 3}

.card{background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);border:1px solid var(--stroke);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.thumb{aspect-ratio:16/9;background:#0b1220}
.card-body{padding:14px}
.eyebrow{font-size:12px;color:#9ca3af;text-transform:uppercase;letter-spacing:.12em}
.card h3{font-size:18px;line-height:1.3;margin:6px 0}
.meta{display:flex;gap:10px;color:#9ca3af;font-size:12px}
.card .tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tag{font-size:11px;padding:4px 8px;border:1px dashed #334155;border-radius:999px;color:#9ca3af}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}

.poll h3{margin:0 0 8px}
.poll .option{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--stroke);border-radius:10px;margin:8px 0;background:#0b1220;cursor:pointer}
.poll .option input{accent-color:var(--acc-2)}
.progress{height:8px;background:#0b1325;border:1px solid var(--stroke);border-radius:999px;overflow:hidden}
.progress > div{height:100%;background:var(--acc-2);width:0%}

.carousel{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--stroke)}
.track{display:flex;transition:transform .4s ease}
.slide{min-width:100%;aspect-ratio:3/2;display:grid;place-items:center;background:#0b1220}
.controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:10px}
.controls button{border:1px solid var(--stroke);background:rgba(2,6,23,.7);color:var(--text);backdrop-filter:blur(6px);padding:8px 12px;border-radius:10px}

.subscribe{display:flex;gap:10px;margin-top:10px}
.subscribe input{flex:1;min-width:0;border:1px solid var(--stroke);background:#0b1220;color:#fff;padding:12px 14px;border-radius:10px}
.subscribe button{white-space:nowrap}

footer{border-top:1px solid var(--stroke);margin-top:28px}
.foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:22px 0;color:#9ca3af}
.foot a{color:#9ca3af}

.article-head .lede{color:var(--muted)}
.meta-line{color:#9ca3af}
.article{padding-bottom:40px}
.criteria ul{margin:0 0 10px 18px}
.ranked{counter-reset:rank}
.ranked > li{margin:18px 0;padding:14px;border:1px dashed #24324a;border-radius:12px;background:#0b1320}
.ranked > li h2{margin:0 0 10px}
.video{margin-top:10px;max-width:820px}
.back{color:var(--muted)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:16px}
  .split{grid-template-columns:1fr}
  .cols-3 > *{grid-column:span 6}
  .cols-4 > *{grid-column:span 6}
}
@media (max-width:640px){
  .menu{display:none}
  .cols-3 > *,.cols-4 > *{grid-column:span 12}
  .hero-card{padding:22px}
}