/* ========== OfficiallyBigBrained — template styles ========== */

:root{
  --bg: #07040f;
  --bg-2: #0c0820;
  --ink: #f4f0ff;
  --ink-dim: #a79fc8;
  --ink-faint: #6b6490;
  --line: rgba(255,255,255,.08);
  --card: rgba(255,255,255,.04);
  --card-hi: rgba(255,255,255,.07);
  --cyan: #3bd0ff;
  --magenta: #ff4bd8;
  --violet: #7a5cff;
  --lime: #c8ff3b;
  --gold: #ffd64b;
  --silver: #cbd5e1;
  --bronze: #d97a4b;
  --grad: linear-gradient(92deg, #ff4bd8 0%, #7a5cff 45%, #3bd0ff 100%);
  --grad-alt: linear-gradient(92deg, #c8ff3b 0%, #3bd0ff 55%, #7a5cff 100%);
  --radius: 18px;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--sans);
  background: radial-gradient(1200px 800px at 85% -10%, #2a1352 0%, transparent 60%),
              radial-gradient(1000px 700px at -10% 30%, #0d2d5a 0%, transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* === cosmic backdrop === */
.stars{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 88%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 36% 38%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 68% 14%, rgba(255,255,255,.8) 50%, transparent 51%);
  opacity:.45;
}
.glow{position:fixed; z-index:0; filter:blur(80px); pointer-events:none; border-radius:50%;}
.glow-a{width:520px;height:520px;background:#ff4bd8; opacity:.18; top:-120px; right:-140px;}
.glow-b{width:640px;height:640px;background:#3bd0ff; opacity:.14; bottom:-200px; left:-160px;}

main, nav, footer{position:relative; z-index:1;}

/* === nav === */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px; gap:24px; max-width:1440px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-weight:700; letter-spacing:-.01em;
}
.brand-emoji{font-size:24px; filter: drop-shadow(0 0 18px rgba(255,75,216,.55));}
.brand-text{font-size:18px;}
.tm{font-size:10px; color:var(--ink-dim); vertical-align:super; margin-left:2px;}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{
  color:var(--ink-dim); text-decoration:none; font-size:14px; letter-spacing:.02em;
  padding:8px 2px; border-bottom:1px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink); border-color:var(--magenta);}
.cta-small{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:13px;
  padding:9px 14px; border:1px solid var(--line); border-radius:999px;
  background: rgba(255,255,255,.03);
  transition: border-color .15s, background .15s, transform .1s;
}
.cta-small:hover{border-color:var(--magenta); background:rgba(255,75,216,.08);}

/* === hero === */
.hero{max-width:1440px; margin:20px auto 40px; padding:60px 48px 0;}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center;}
.pill{
  display:inline-block; padding:7px 14px; border:1px solid var(--line);
  border-radius:999px; font-size:12px; color:var(--ink-dim);
  background: rgba(255,255,255,.03); margin-bottom:22px;
}
h1{
  font-size: clamp(48px, 7vw, 104px);
  line-height: .96; letter-spacing:-.03em; font-weight:700;
  margin:0 0 20px;
}
h2{
  font-size: clamp(32px, 4.2vw, 56px);
  line-height:1.02; letter-spacing:-.025em; font-weight:700; margin:0 0 12px;
}
h3{font-size:22px; letter-spacing:-.01em; margin:0 0 8px;}
h4{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); margin:0 0 14px;}

.grad{
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad.alt{background: var(--grad-alt); -webkit-background-clip:text; background-clip:text; color:transparent;}

.lede{font-size:18px; line-height:1.55; color:var(--ink-dim); max-width:560px; margin:0 0 28px;}
.lede em{color:var(--ink); font-style:normal; background: linear-gradient(180deg, transparent 55%, rgba(255,75,216,.25) 55%);}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:999px; font-weight:600; font-size:15px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: transform .12s, box-shadow .2s, background .2s, border-color .2s;
}
.btn.xl{padding:18px 32px; font-size:17px;}
.btn.w-full{width:100%;}
.btn-primary{
  color:#07040f; background: var(--grad);
  box-shadow: 0 10px 40px -10px rgba(255,75,216,.6), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.btn-primary:hover{transform: translateY(-1px); box-shadow: 0 16px 50px -10px rgba(255,75,216,.8), 0 0 0 1px rgba(255,255,255,.3) inset;}
.btn-ghost{
  color:var(--ink); background: rgba(255,255,255,.04); border:1px solid var(--line);
}
.btn-ghost:hover{background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18);}

.social-proof{display:flex; gap:10px; flex-wrap:wrap;}
.sp-chip{
  font-size:12px; color:var(--ink-dim); padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03);
}
.dim{color:var(--ink-dim)}
.small{font-size:13px}

/* === hero brain === */
.hero-brain{position:relative; min-height:520px; display:flex; align-items:center; justify-content:center;}
.brain-halo{
  position:absolute; width:480px; height:480px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,75,216,.55), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(59,208,255,.55), transparent 60%);
  filter: blur(40px); animation: float 8s ease-in-out infinite;
}
.brain-emoji{
  position:relative; font-size:300px; line-height:1;
  filter:
    drop-shadow(0 0 40px rgba(255,75,216,.55))
    drop-shadow(0 0 80px rgba(122,92,255,.45))
    drop-shadow(0 0 120px rgba(59,208,255,.3));
  animation: floatBrain 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(10px,-20px) scale(1.05)}
}
@keyframes floatBrain{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-12px) rotate(1.5deg)}
}
.brain-tags{position:absolute; inset:0;}
.tag{
  position:absolute; font-family:var(--mono); font-size:12px;
  padding:7px 11px; border-radius:10px; border:1px solid var(--line);
  background:rgba(8,4,20,.7); backdrop-filter: blur(10px);
  white-space:nowrap;
}
.tag-a{top:10%; left:2%;   color:var(--cyan);}
.tag-b{top:28%; right:0%;  color:var(--magenta);}
.tag-c{bottom:30%; left:-2%; color:var(--lime);}
.tag-d{bottom:10%; right:4%; color:var(--gold);}

/* === meme strip === */
.meme-strip{
  margin:30px 0; padding:22px 0; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.meme-track{
  display:flex; gap:48px; white-space:nowrap;
  animation: scroll 30s linear infinite;
  font-family:var(--mono); font-size:20px;
}
.meme{padding:0 8px; color:var(--ink-dim);}
.meme.sparkle{color:var(--ink);}
.meme.sparkle2{color:var(--cyan);}
.meme.sparkle3{background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* === section shared === */
section{max-width:1440px; margin:80px auto; padding:0 48px;}
.section-head{max-width:780px; margin:0 auto 48px; text-align:center;}
.section-head .eyebrow{margin:0 auto 14px;}
.section-head .sub{color:var(--ink-dim); font-size:17px; line-height:1.5; margin:8px 0 0;}
.section-head .sub.big{font-size:19px;}
.eyebrow{
  display:inline-block; font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--ink-dim);
  padding:5px 10px; border:1px solid var(--line); border-radius:6px;
  background: rgba(255,255,255,.03);
}

/* === upload === */
.dropzone{
  max-width:920px; margin:0 auto;
  border:2px dashed rgba(255,75,216,.4); border-radius:24px;
  background: linear-gradient(180deg, rgba(255,75,216,.05), rgba(59,208,255,.03));
  padding:56px 32px; text-align:center;
  transition: border-color .2s, background .2s, transform .2s;
}
.dropzone:hover, .dropzone.drag{
  border-color: var(--magenta); background: linear-gradient(180deg, rgba(255,75,216,.12), rgba(59,208,255,.06));
  transform: scale(1.005);
}
.dz-icon{font-size:68px; line-height:1; margin-bottom:14px; filter: drop-shadow(0 0 30px rgba(255,75,216,.6));}
.dz-title{font-size:28px; font-weight:700; letter-spacing:-.01em;}
.dz-sub{margin-top:8px; color:var(--ink-dim); font-size:15px;}
.link{
  background:none; border:none; color:var(--cyan); font: inherit; cursor:pointer;
  text-decoration:underline; padding:0;
}
.dz-accepted{
  margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.dz-accepted span{
  font-family:var(--mono); font-size:11px; color:var(--ink-dim);
  padding:5px 10px; border:1px solid var(--line); border-radius:6px;
  background:rgba(255,255,255,.03);
}
.upload-progress{
  max-width:920px; margin:20px auto 0; padding:18px 22px;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
}
.up-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:13px;}
.bar{height:8px; margin-top:10px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden;}
.bar-fill{height:100%; width:0%; background:var(--grad); transition: width .15s linear;}
.up-log{font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:10px; min-height:18px;}
.disclaimer{
  max-width:920px; margin:16px auto 0; text-align:center;
  font-size:12px; color:var(--ink-faint); font-family:var(--mono);
}

/* === how === */
.steps{display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;}
.step{
  padding:28px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); transition: transform .2s, border-color .2s, background .2s;
}
.step:hover{transform: translateY(-3px); border-color: rgba(255,75,216,.35); background:var(--card-hi);}
.step-num{
  font-family:var(--mono); font-size:12px; color:var(--magenta); letter-spacing:.1em;
  margin-bottom:14px;
}
.step-title{font-size:20px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em;}
.step p{margin:0; color:var(--ink-dim); font-size:14px; line-height:1.55;}

/* === preview cards === */
.preview-row{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;}
.preview-card{
  padding:28px; border:1px solid var(--line); border-radius:var(--radius);
  background: var(--card); display:flex; flex-direction:column; gap:18px;
}
.pc-eyebrow{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--ink-dim);
}
.score-hero{
  text-align:center; padding:28px 0 10px;
  border-radius:14px; background: radial-gradient(circle at 50% 30%, rgba(255,75,216,.18), transparent 70%);
}
.score-num{
  font-size:96px; line-height:1; font-weight:700;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.04em;
}
.score-label{font-family:var(--mono); font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.16em;}
.score-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;}
.score-grid > div{
  padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:4px;
}
.score-grid .k{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim);}
.score-grid .v{font-weight:700; font-size:17px;}

.stl-wrap{
  position:relative; aspect-ratio: 1/1; border-radius:14px; overflow:hidden;
  background: radial-gradient(circle at 50% 50%, rgba(59,208,255,.12), transparent 70%),
              linear-gradient(180deg, #0a0618, #0f0a24);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.stl-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(122,92,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,92,255,.15) 1px, transparent 1px);
  background-size: 30px 30px;
  transform: perspective(600px) rotateX(60deg) translateY(20%) scale(1.6);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 80%);
}
.stl-brain{
  position:relative; font-size:140px;
  filter:
    drop-shadow(0 0 30px rgba(59,208,255,.6))
    drop-shadow(0 0 60px rgba(122,92,255,.4));
  animation: floatBrain 6s ease-in-out infinite;
}
.stl-brain.big{font-size:220px;}
.stl-dims{
  position:absolute; bottom:10px; left:12px; right:12px; text-align:center;
  font-family:var(--mono); font-size:11px; color:var(--ink-dim);
}
.stl-actions{display:flex; gap:10px;}
.stl-actions .btn{flex:1; padding:10px; font-size:13px;}

.share-pre{
  padding:16px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.share-url{font-family:var(--mono); font-size:14px; word-break:break-all;}
.share-url.big{font-size:18px; padding:14px 16px; background:rgba(255,255,255,.04); border-radius:10px; border:1px solid var(--line);}
.share-url .hash{color:var(--magenta);}
.share-lock{margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--ink-dim);}
.share-list{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px; color:var(--ink-dim);}
.share-list li{padding-left:2px;}

/* === leaderboard preview table === */
.table-wrap{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  overflow:hidden;
}
.table-wrap.big{margin-top:28px;}
table.lb{width:100%; border-collapse:collapse;}
table.lb th{
  text-align:left; font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-dim); padding:16px 18px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);
}
table.lb td{
  padding:16px 18px; font-size:14px; border-bottom:1px solid var(--line);
  vertical-align:middle;
}
table.lb tr:last-child td{border-bottom:none;}
table.lb tr:hover td{background: rgba(255,75,216,.05);}
table.lb td.score{font-weight:700; font-size:16px; background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.av{display:inline-block; margin-right:10px; font-size:18px;}
.mini{
  color:var(--cyan); text-decoration:none; font-family:var(--mono); font-size:12px;
  padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:rgba(59,208,255,.05);
}
.mini:hover{background:rgba(59,208,255,.12);}
tr.gold td:first-child{color:var(--gold); font-weight:700;}
tr.silver td:first-child{color:var(--silver); font-weight:700;}
tr.bronze td:first-child{color:var(--bronze); font-weight:700;}
.lb-cta{text-align:center; margin-top:28px;}

/* === testimonials === */
.quotes{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px;}
blockquote{
  margin:0; padding:26px 28px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card);
}
blockquote p{margin:0 0 12px; font-size:17px; line-height:1.5;}
blockquote footer{font-family:var(--mono); font-size:12px; color:var(--ink-dim);}

/* === faq === */
.faq{max-width:900px;}
details{
  border:1px solid var(--line); border-radius:12px; padding:18px 22px;
  margin-bottom:10px; background:var(--card); cursor:pointer;
}
details[open]{background:var(--card-hi);}
summary{font-weight:600; font-size:16px; list-style:none; position:relative; padding-right:28px;}
summary::after{
  content:"+"; position:absolute; right:0; top:-2px; font-size:22px;
  color:var(--magenta); transition: transform .2s;
}
details[open] summary::after{content:"−";}
details p{margin:12px 0 0; color:var(--ink-dim); font-size:14px; line-height:1.55;}

/* === cta band === */
.cta-band{
  margin:100px auto 80px; max-width:1200px; padding:0 48px;
}
.cta-band-inner{
  position:relative; overflow:hidden;
  padding:70px 40px; border-radius:28px; text-align:center;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,75,216,.3), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(59,208,255,.25), transparent 55%),
    linear-gradient(180deg, #16082b, #0a0418);
  border:1px solid rgba(255,75,216,.25);
}
.cta-band h2{font-size:clamp(32px, 5vw, 60px);}
.cta-band p{font-size:19px; color:var(--ink-dim); margin: 10px 0 28px;}

/* === footer === */
.foot{max-width:1440px; margin:0 auto; padding:60px 48px 30px; border-top:1px solid var(--line);}
.foot-top{display:grid; grid-template-columns: 1fr 2fr; gap:40px; margin-bottom:40px;}
.foot-cols{display:grid; grid-template-columns: repeat(3, 1fr); gap:30px;}
.foot-cols a{display:block; color:var(--ink-dim); text-decoration:none; font-size:14px; padding:4px 0;}
.foot-cols a:hover{color:var(--ink);}
.foot-bot{display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--ink-dim); padding-top:20px; border-top:1px solid var(--line);}

/* =========================================================
   LEADERBOARD PAGE
   ========================================================= */
.lb-hero{text-align:center; padding:60px 48px 20px; max-width:1200px;}
.lb-hero h1{font-size: clamp(44px, 6vw, 86px);}
.stat-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:36px;
}
.stat{
  padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
}
.stat-n{
  font-size:36px; font-weight:700; letter-spacing:-.02em;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-l{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); margin-top:4px;}

.lb-controls{
  max-width:1200px; display:flex; justify-content:space-between; gap:14px;
  align-items:center; flex-wrap:wrap; margin:50px auto 20px; padding:0 48px;
}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  background:var(--card); border:1px solid var(--line); color:var(--ink-dim);
  font: inherit; font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer;
  transition: all .15s;
}
.chip.active{color:var(--ink); border-color: rgba(255,75,216,.5); background: rgba(255,75,216,.08);}
.chip:hover{color:var(--ink);}
.search{
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  font:inherit; font-size:14px; padding:10px 16px; border-radius:999px; min-width:260px;
}
.search:focus{outline:none; border-color:var(--cyan);}

.lb-full{max-width:1200px; padding:0 48px; margin:0 auto;}
.podium{
  display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:16px; margin-bottom:40px; align-items:end;
}
.podium-spot{
  padding:30px 20px; border:1px solid var(--line); border-radius:20px;
  text-align:center; background:var(--card); position:relative;
}
.podium-spot.p1{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,214,75,.2), transparent 60%),
    linear-gradient(180deg, rgba(255,214,75,.08), rgba(255,214,75,.02));
  border-color: rgba(255,214,75,.4);
  transform: translateY(-20px);
  padding-top: 40px;
}
.podium-spot.p2{border-color: rgba(203,213,225,.3);}
.podium-spot.p3{border-color: rgba(217,122,75,.4);}
.crown{position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-size:36px;}
.p-rank{font-family:var(--mono); font-size:14px; color:var(--ink-dim); margin-bottom:8px;}
.p1 .p-rank{color:var(--gold);}
.p2 .p-rank{color:var(--silver);}
.p3 .p-rank{color:var(--bronze);}
.p-brain{font-size:70px; line-height:1; filter:drop-shadow(0 0 20px rgba(255,75,216,.4));}
.p-brain.big{font-size:110px; filter:drop-shadow(0 0 40px rgba(255,214,75,.6));}
.p-name{font-weight:700; font-size:18px; margin-top:10px;}
.p-score{
  font-size:40px; font-weight:700; margin-top:6px;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.p-tag{font-family:var(--mono); font-size:11px; color:var(--ink-dim); margin-top:8px;}
.lb-foot{text-align:center; margin:28px 0;}

.you-band{max-width:1200px; padding:0 48px; margin:80px auto 40px;}
.you-inner{
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  padding:40px; border:1px solid var(--line); border-radius:24px;
  background: radial-gradient(circle at 0% 50%, rgba(255,75,216,.18), transparent 55%), var(--card);
}

/* =========================================================
   RESULTS PAGE
   ========================================================= */
.result-top{
  max-width:1200px; margin:40px auto; padding:30px 48px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center;
}
.result-copy h1{font-size: clamp(40px, 5vw, 72px);}
.meta-row{
  display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono);
  font-size:12px; color:var(--ink-dim); margin-top:20px;
}
.hero-score{
  padding:34px; border-radius:24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,75,216,.3), transparent 60%),
    linear-gradient(180deg, rgba(255,75,216,.06), rgba(59,208,255,.03));
  border:1px solid rgba(255,75,216,.3); text-align:center;
}
.hs-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-dim);}
.hs-num{
  font-size:140px; line-height:1; font-weight:700; letter-spacing:-.04em; margin:6px 0 10px;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 30px rgba(255,75,216,.3));
}
.hs-num.giant{font-size:180px;}
.hs-rank{font-size:14px; color:var(--ink-dim);}
.hs-meme{margin-top:14px; font-family:var(--mono); font-size:13px; color:var(--gold);}

.result-grid{
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.rcard{
  padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
}
.rcard-eyebrow{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim);}
.rcard-val{font-size:44px; font-weight:700; letter-spacing:-.025em; margin:8px 0 4px;}
.rcard-val .u{font-size:18px; color:var(--ink-dim); margin-left:3px; font-weight:500;}
.rcard-sub{font-size:13px; color:var(--ink-dim); margin-bottom:14px;}
.mini-bar{height:6px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden;}
.mini-bar > div{height:100%; background: var(--grad);}

.result-stl{
  max-width:1200px; margin:80px auto; padding:0 48px;
  display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center;
}
.rs-viewer{
  position:relative; aspect-ratio: 1/1; border-radius:24px; overflow:hidden;
  background: radial-gradient(circle at 50% 50%, rgba(59,208,255,.15), transparent 70%),
              linear-gradient(180deg, #0a0618, #0f0a24);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.viewer-controls{
  position:absolute; top:14px; right:14px; display:flex; gap:6px;
}
.viewer-controls button{
  background: rgba(8,4,20,.7); color:var(--ink); border:1px solid var(--line);
  width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:14px;
}
.viewer-label{
  position:absolute; bottom:14px; left:14px;
  font-family:var(--mono); font-size:11px; color:var(--ink-dim);
}
.stl-facts{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin:20px 0;
}
.stl-facts > div, .proof-grid > div, .score-grid > div{
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:4px;
}
.stl-facts .k, .proof-grid .k{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim);}
.stl-facts .v, .proof-grid .v{font-weight:700; font-size:15px; font-family:var(--mono);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}

.result-share{max-width:1000px;}
.share-box{
  padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  display:flex; flex-direction:column; gap:18px;
}
.share-actions{display:flex; gap:10px; flex-wrap:wrap;}
.privacy-toggle{
  margin-top:22px; display:grid; gap:10px; max-width:500px; margin-inline:auto;
}
.privacy-toggle label{
  display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-dim);
  cursor:pointer;
}
.privacy-toggle input{accent-color: var(--magenta); width:16px; height:16px;}

.compare{max-width:1000px;}
.dist{
  position:relative; padding:30px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); margin-bottom:20px;
}
.dist-bars{display:flex; align-items:flex-end; gap:2px; height:140px;}
.dist-bars .b{
  flex:1; background: linear-gradient(180deg, rgba(122,92,255,.4), rgba(122,92,255,.08));
  border-radius: 3px 3px 0 0; transition: all .2s;
}
.dist-bars .b.you{background: var(--grad); box-shadow: 0 0 30px rgba(255,75,216,.6);}
.dist-you{font-family:var(--mono); font-size:12px; color:var(--magenta); margin-top:10px; text-align:center;}
.dist-axis{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:8px;}
.versus{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
.vs-card{
  padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  text-align:center;
}
.vs-card.me{background: radial-gradient(circle at 50% 50%, rgba(255,75,216,.15), transparent 70%), var(--card); border-color: rgba(255,75,216,.4);}
.vs-avatar{font-size:34px; margin-bottom:8px;}
.vs-score{font-weight:700; font-size:28px; margin-top:6px; background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* =========================================================
   SHARE / PROOF PAGE
   ========================================================= */
.proof{
  max-width:1200px; margin:40px auto; padding:0 48px;
  display:grid; grid-template-columns: 1.6fr .9fr; gap:30px; align-items:start;
}
.proof-card{
  padding:36px; border-radius:24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,75,216,.18), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(59,208,255,.15), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,75,216,.3);
}
.proof-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.verified{
  font-family:var(--mono); font-size:12px; color:var(--lime);
  padding:5px 10px; border:1px solid rgba(200,255,59,.3); border-radius:6px;
  background: rgba(200,255,59,.06);
}
.proof-hero{
  display:grid; grid-template-columns: 1fr auto; gap:30px; align-items:center;
  padding-bottom:30px; border-bottom:1px solid var(--line);
}
.ph-left h1{font-size: clamp(32px, 4vw, 52px); margin:10px 0 10px;}
.proof-rank{font-family:var(--mono); font-size:14px; color:var(--ink-dim);}
.proof-rank strong{color:var(--gold); font-size:18px;}
.proof-line{margin-top:14px; font-size:15px; color:var(--ink-dim); font-style:italic;}
.ph-right{text-align:center;}

.proof-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
  margin: 30px 0;
}
.proof-stl{
  position:relative; aspect-ratio: 16/9; border-radius:16px; overflow:hidden;
  background: radial-gradient(circle at 50% 50%, rgba(59,208,255,.18), transparent 70%),
              linear-gradient(180deg, #0a0618, #0f0a24);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  margin-bottom: 24px;
}

.signed{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
  padding:18px; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.02); margin-bottom:24px;
}
.sig-k{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:var(--ink-dim); margin-bottom:4px;}
.sig-v{font-size:13px;}
.mono{font-family:var(--mono);}

.proof-actions{display:flex; gap:10px; flex-wrap:wrap;}

.proof-side{display:flex; flex-direction:column; gap:16px;}
.side-card{
  padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
}
.side-card p{color:var(--ink-dim); font-size:14px; line-height:1.55; margin:10px 0 14px;}
.side-card.roast{
  background: radial-gradient(circle at 50% 0%, rgba(255,75,216,.15), transparent 60%), var(--card);
  border-color: rgba(255,75,216,.35);
}
.roast-text{color:var(--ink) !important; font-style:italic;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .hero-inner{grid-template-columns: 1fr;}
  .hero-brain{min-height:380px;}
  .brain-emoji{font-size:220px;}
  .steps{grid-template-columns: repeat(2, 1fr);}
  .preview-row{grid-template-columns: 1fr;}
  .quotes{grid-template-columns: 1fr;}
  .stat-grid{grid-template-columns: repeat(2, 1fr);}
  .result-top, .result-stl, .proof{grid-template-columns: 1fr;}
  .result-grid{grid-template-columns: repeat(2, 1fr);}
  .foot-top{grid-template-columns: 1fr;}
  .foot-cols{grid-template-columns: repeat(3, 1fr);}
  .proof-hero{grid-template-columns: 1fr;}
}
@media (max-width: 680px){
  .nav{padding:18px 20px;}
  .nav-links{display:none;}
  section, .foot{padding-left:20px; padding-right:20px;}
  .hero{padding:30px 20px 0;}
  .steps, .result-grid, .signed, .proof-grid, .versus{grid-template-columns: 1fr;}
  .podium{grid-template-columns: 1fr;}
  .podium-spot.p1{transform:none;}
  .hs-num, .hs-num.giant{font-size:96px;}
  .score-num{font-size:72px;}
  .stat-grid{grid-template-columns: 1fr 1fr;}
  table.lb th:nth-child(n+6), table.lb td:nth-child(n+6){display:none;}
  h1{font-size: 48px;}
  .brand-text{display:none;}
}