*,*::before,*::after { box-sizing:border-box; }
:root {
  --bg:#0A0C1B; --header:#1A1F52; --primary:#717DFC; --gold:#FFD700;
  --neon:#00F3FF; --green:#06D6A0; --fire:#FF5E62;
  --head:'Space Grotesk', system-ui, sans-serif; --body:'Inter', system-ui, sans-serif;
}
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:#fff; font-family:var(--body); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--neon); }
::selection { background:var(--primary); color:#fff; }
h1,h2 { font-family:var(--head); margin:0; text-wrap:pretty; }
p { margin:0; }

.wrap { max-width:1312px; margin:0 auto; padding:0 24px; }
.logo { font-family:var(--head); font-weight:800; display:flex; align-items:baseline; letter-spacing:-.5px; }
.logo i { width:.34em; height:.34em; border-radius:50%; background:var(--primary); display:inline-block; margin:0 .1em; }

/* header */
header { position:sticky; top:0; z-index:20; background:rgba(26,31,82,.72); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.07); }
.nav { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav .logo { font-size:21px; color:#fff; }
.nav a.logo:hover { color:#fff; }
.nav ul { display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; font:600 12px var(--body); letter-spacing:.14em; }
.nav ul a { color:rgba(255,255,255,.62); }
.nav ul a:hover { color:#fff; }
.nav .pill { background:var(--primary); color:#fff; padding:11px 20px; border-radius:16px; box-shadow:0 4px 15px rgba(113,125,252,.3); letter-spacing:.1em; }
.nav .pill:hover { color:#fff; }

/* store badges */
.badges { display:flex; flex-wrap:wrap; gap:14px; }
.badge { display:flex; align-items:center; gap:12px; padding:0 20px; height:60px; border-radius:12px; background:#000; border:1px solid rgba(255,255,255,.45); color:#fff; transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.badge:hover { color:#fff; transform:translateY(-2px); }
.badge:active { transform:scale(.98); }
.badge span { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.badge .t { font:400 10px var(--body); letter-spacing:.04em; }
.badge .b { font:500 20px var(--head); letter-spacing:-.3px; }
.badge.web { background:rgba(6,214,160,.1); border-color:var(--green); }
.badge.web .t { color:var(--green); }

/* hero */
.hero { display:grid; grid-template-columns:1fr 520px; gap:40px; align-items:center; padding-block:86px 96px; }
.hero .mark { font:800 clamp(52px, 8vw, 104px)/.92 var(--head); letter-spacing:-.04em; display:flex; align-items:center; }
.hero .mark i { width:.25em; height:.25em; border-radius:50%; background:var(--primary); display:inline-block; margin:.14em .06em 0 .04em; box-shadow:0 0 24px rgba(113,125,252,.6); }
.hero h1 { font:700 clamp(32px, 3.6vw, 52px)/1.1 var(--head); letter-spacing:-1.5px; margin:40px 0 0; max-width:580px; }
.hero .lede { font:400 clamp(16px, 1.4vw, 19px)/1.6 var(--body); color:rgba(255,255,255,.62); max-width:500px; margin:22px 0 0; }
.hero .badges { margin-top:44px; }
.social-proof { display:flex; align-items:center; gap:14px; margin-top:26px; font:500 13px var(--body); color:rgba(255,255,255,.45); }
.stack { display:flex; }
.stack img { width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid var(--bg); }
.stack img + img { margin-left:-9px; }
.shot { position:relative; display:flex; justify-content:center; }
.shot::before { content:""; position:absolute; top:40px; left:50%; transform:translateX(-50%); width:min(420px,90%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(113,125,252,.28), transparent 70%); }
.shot img { position:relative; width:372px; filter:drop-shadow(0 40px 80px rgba(0,0,0,.65)); }

/* sections */
section { border-top:1px solid rgba(255,255,255,.07); }
.tint { background:rgba(255,255,255,.015); }
.pad { padding-block:96px; }
.kicker { font:700 12px var(--body); letter-spacing:.2em; margin-bottom:18px; }
.h2 { font:700 clamp(30px, 3.2vw, 44px)/1.14 var(--head); letter-spacing:-1.2px; }
.split { display:grid; grid-template-columns:1fr 400px; gap:72px; align-items:center; }
.split.rev { grid-template-columns:400px 1fr; }
.frame { width:340px; max-width:100%; margin:0 auto; border-radius:30px; padding:8px; background:linear-gradient(160deg,#2A2F45,#0F1220); border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.55); }
.frame > div { border-radius:23px; overflow:hidden; background:var(--bg); display:flow-root; }
.shot-poster { width:340px; max-width:100%; margin:0 auto; }
.shot-poster img { width:100%; border-radius:24px; box-shadow:0 30px 70px rgba(0,0,0,.55); }

.card { padding:28px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(20px); }
.elo-top { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.elo-num { font:800 clamp(40px,5vw,58px) var(--head); letter-spacing:-1px; line-height:1; }
.tag { padding:7px 14px; border-radius:100px; font:700 11px var(--body); letter-spacing:.12em; }
.tag.green { background:rgba(6,214,160,.12); border:1px solid rgba(6,214,160,.4); color:var(--green); }
.tag.gold { background:rgba(255,215,0,.14); border:1px solid rgba(255,215,0,.45); color:var(--gold); }
.bar { position:relative; height:10px; border-radius:100px; background:linear-gradient(90deg,var(--primary),var(--neon),var(--green),var(--gold),var(--fire)); }
.bar .knob { position:absolute; left:73%; top:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; border:3px solid var(--gold); background:var(--bg); overflow:hidden; box-shadow:0 0 20px rgba(255,215,0,.4); }
.bar .knob img { width:100%; height:100%; object-fit:cover; transform:scale(1.1); }
.scale { display:flex; justify-content:space-between; margin-top:16px; font:600 12px var(--body); color:rgba(255,255,255,.4); }

.domains { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.dom { position:relative; height:220px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.dom img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dom .veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,27,.95) 12%, rgba(10,12,27,.25) 70%); }
.dom .meta { position:absolute; left:18px; right:18px; bottom:16px; }
.dom .name { font:700 20px var(--head); }
.dom .row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px; margin-top:10px; font:600 12px/1.35 var(--body); color:rgba(255,255,255,.6); }
.dom .track { height:5px; border-radius:100px; background:rgba(255,255,255,.14); margin-top:8px; overflow:hidden; }
.dom .track div { height:100%; }
.dom.more { border:1px dashed rgba(255,255,255,.2); background:rgba(255,255,255,.03); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px; }

.chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.chip { padding:10px 18px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font:700 12px var(--body); letter-spacing:.1em; color:rgba(255,255,255,.75); }
.chip.on { background:var(--gold); color:var(--bg); border-color:var(--gold); }
.rows { display:flex; flex-direction:column; gap:10px; max-width:520px; }
.row-card { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:16px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08); }
.row-card.me { background:rgba(113,125,252,.12); border-color:var(--primary); box-shadow:0 4px 15px rgba(113,125,252,.2); }
.row-card .n { font:700 15px var(--head); color:rgba(255,255,255,.5); width:18px; }
.row-card.me .n { color:#fff; }
.row-card img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.row-card .who { font:600 16px var(--body); flex:1; }
.row-card .who em { font:700 11px var(--body); letter-spacing:.14em; color:var(--primary); font-style:normal; }
.score { padding:6px 14px; border-radius:100px; font:700 13px var(--head); }
.score.g { background:rgba(255,215,0,.15); color:var(--gold); }
.score.solid { background:var(--gold); color:var(--bg); }
.score.dim { background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }

.final { text-align:center; }
.final h2 { font:700 clamp(30px,3.4vw,46px)/1.12 var(--head); letter-spacing:-1.2px; max-width:700px; margin:0 auto 18px; }
.final p { font:400 18px var(--body); color:rgba(255,255,255,.6); max-width:520px; margin:0 auto 40px; }
.final .badges { justify-content:center; }

footer { background:#080A15; border-top:1px solid rgba(255,255,255,.07); padding:54px 0 36px; }
.fcols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
.fcols h3 { font:700 11px var(--body); letter-spacing:.16em; color:rgba(255,255,255,.4); margin:0 0 12px; }
.fcols ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fcols a { font:500 14px var(--body); color:rgba(255,255,255,.7); }
.fcols a:hover { color:#fff; }
.legal { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.07); font:400 13px var(--body); color:rgba(255,255,255,.35); }
.legal-links { display:flex; gap:18px; }
.legal-links a { color:rgba(255,255,255,.45); }
.legal-links a:hover { color:#fff; }

/* legal documents */
.doc { max-width:760px; padding-block:72px 96px; }
.doc h1 { font:700 clamp(32px,4vw,48px)/1.15 var(--head); letter-spacing:-1.2px; }
.doc .date { font:400 15px/1.6 var(--body); color:rgba(255,255,255,.45); margin:14px 0 36px; }
.doc h2 { font:700 20px/1.35 var(--head); letter-spacing:-.2px; margin:36px 0 12px; }
.doc p, .doc li { font:400 16px/1.7 var(--body); color:rgba(255,255,255,.72); }
.doc p + p { margin-top:14px; }
.doc ul { margin:10px 0 0; padding-left:22px; }
.doc li { margin:6px 0; }
.doc a { text-decoration:underline; text-underline-offset:3px; }

@media (max-width:1100px) {
  .domains { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .split, .split.rev { grid-template-columns:1fr; gap:48px; }
  .hero { grid-template-columns:1fr; gap:48px; padding-block:64px 72px; }
  .pad { padding-block:72px; }
}
@media (max-width:820px) {
  .nav ul li:not(.cta) { display:none; }
  .fcols { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:640px) {
  .wrap { padding:0 22px; }
  .pad { padding-block:56px; }
  .hero { padding-block:44px 56px; }
  .hero h1 { margin-top:24px; }
  .hero .badges { margin-top:28px; gap:10px; }
  .badge { flex:1 1 calc(50% - 5px); height:54px; padding:0 14px; justify-content:center; gap:9px; }
  .badge .t { font-size:9px; }
  .badge .b { font-size:16px; }
  .badge.web { flex-basis:100%; }
  .shot img { width:min(300px,80%); }
  .domains { grid-template-columns:1fr 1fr; gap:12px; }
  .dom { height:170px; border-radius:16px; }
  .dom .name { font-size:16px; }
  .dom .meta { left:14px; right:14px; bottom:12px; }
  .dom.more { grid-column:1 / -1; height:auto; padding:18px; }
  .card { padding:20px; }
  .rows { max-width:none; }
  .fcols { grid-template-columns:1fr; }
  .final p { margin-bottom:28px; }
  .doc { padding-block:48px 64px; }
}