/* ═══════════════════════════════════════════════════════════════
   Wifi-Arena · SHARED design tokens + base components
   Redpine Editorial-Engineering · used by both mockups
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Redpine paper foundation */
  --bg:#FAF8F8;
  --bg-2:#FFFFFF;
  --paper:#faf9f5;
  --bone:#f1efe7;
  --surface-2:#F4F1F1;

  /* Ink ramp */
  --ink:#11090A;
  --ink-elev:#2a1416;
  --ink-hover:#5a3235;
  --text:#11090A;
  --text-2:#212326;
  --text-3:#626a73;
  --text-4:#8B959E;
  --text-5:#aab0b7;

  /* Oxblood ramp */
  --red:#AB2832;
  --red-2:#91222b;
  --red-ink:#6f1a21;
  --red-soft:#c05e65;
  --red-soft-bg:rgba(171,40,50,0.08);
  --red-glow:rgba(171,40,50,0.18);
  --red-line:rgba(171,40,50,0.35);

  /* Semantic */
  --success:#28A745;
  --warn:#B45309;
  --danger:#DC3545;
  --info:#17A2B8;

  /* Rules */
  --rule:rgba(17,9,10,0.07);
  --rule-2:#E8E3E3;
  --rule-3:#DDE1E6;

  /* Motion (Redpine spec) */
  --ease:cubic-bezier(0.2,0,0,1);
  --ease-2:cubic-bezier(0.65,0,0.35,1);
  --t-120:120ms;
  --t-200:200ms;
  --t-360:360ms;

  /* Fonts */
  --f-sans:"neue-haas-grotesk-display","neue-haas-grotesk-text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-text:"neue-haas-grotesk-text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r-1:4px;
  --r-2:8px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--bg);}
html{scroll-behavior:auto;}
body{
  background:var(--bg);color:var(--text-2);
  font-family:var(--f-text);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  font-variant-numeric:tabular-nums lining-nums;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff;}
img,svg{display:block;max-width:100%;}
strong{color:var(--text);font-weight:600;}
em{font-style:normal;color:var(--red);font-weight:500;}
a{color:inherit;text-decoration:none;}

/* Lenis hooks */
html.lenis{scroll-behavior:auto !important;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}

@keyframes rp-thinking{0%,100%{opacity:0.3;transform:scale(0.85);}50%{opacity:1;transform:scale(1.15);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.55;transform:scale(1.4);}}

/* ─── 1. LOADER ─────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;align-items:flex-end;
  padding:0 5vw 6vh;
  transition:opacity 0.55s var(--ease) 0.1s,visibility 0s linear 0.7s;
}
#loader.done{opacity:0;visibility:hidden;}
.loader-inner{width:100%;max-width:520px;}
.loader-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text);margin-bottom:18px;
}
.loader-brand .dot{width:8px;height:8px;background:var(--red);animation:rp-thinking 1.2s ease-in-out infinite;}
.loader-brand .div{color:var(--text-3);font-weight:400;}
.loader-brand .t2{color:var(--text-3);font-weight:500;}
.loader-bar{height:1px;background:var(--rule-2);position:relative;overflow:hidden;margin-bottom:14px;}
#loader-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--red);transition:width 0.18s linear;}
.loader-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);
}
.loader-pct{color:var(--red);font-weight:700;}

/* ─── 2. FIXED HEADER ────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:linear-gradient(180deg,rgba(250,248,248,0.93) 0%,rgba(250,248,248,0.78) 100%);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  border-bottom:1px solid var(--rule-2);
  opacity:0;transform:translateY(-100%);
  transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);
}
.site-header.ready{opacity:1;transform:translateY(0);}
.hdr-row{
  max-width:1640px;margin:0 auto;padding:14px 5vw;
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
}
.hdr-brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-weight:600;font-size:13px;color:var(--text);
  white-space:nowrap;
}
.hdr-pulse{width:8px;height:8px;background:var(--red);animation:rp-thinking 1.2s ease-in-out infinite;}
.hdr-div{color:var(--text-3);font-weight:400;}
.hdr-section{color:var(--text-3);font-weight:400;}
.hdr-badge{
  font-family:var(--f-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  color:var(--red);padding:4px 10px;border:1px solid var(--red-line);background:var(--red-soft-bg);border-radius:2px;
}
.hdr-progress{width:140px;height:2px;background:var(--rule-2);position:relative;overflow:hidden;}
#hdr-progress-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--red);transition:width 0.15s linear;}
@media (max-width:768px){
  .hdr-row{grid-template-columns:1fr auto;}
  .hdr-section{display:none;}
}

/* ─── 3. HERO STANDALONE ────────────────────────────── */
.hero-standalone{
  position:relative;z-index:20;
  min-height:100vh;
  background:var(--bg);
  padding:140px 5vw 8vh;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero-grid{display:flex;flex-direction:column;gap:48px;max-width:1640px;width:100%;margin:0 auto;}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--red);align-self:flex-start;
}
.hero-tag-dot{width:8px;height:8px;background:var(--red);animation:rp-thinking 1.6s ease-in-out infinite;}
.hero-heading{
  font-family:var(--f-sans);font-weight:500;
  font-size:clamp(72px,12vw,196px);line-height:0.92;letter-spacing:-0.038em;color:var(--text);
  max-width:1300px;display:flex;flex-wrap:wrap;gap:0.24em 0.34em;
}
.hero-word{display:inline-block;opacity:0;transform:translateY(40px);will-change:opacity,transform;}
.hero-word.in{animation:wordIn 0.95s var(--ease) forwards;}
.hero-word.hero-word-accent{color:var(--red);}
@keyframes wordIn{
  0%{opacity:0;transform:translateY(40px) scale(1.02);filter:blur(4px);letter-spacing:0.02em;}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);letter-spacing:-0.038em;}
}
.hero-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  opacity:0;transform:translateY(20px);
  transition:opacity 0.7s var(--ease) 0.9s,transform 0.7s var(--ease) 0.9s;
}
.hero-meta.in{opacity:1;transform:translateY(0);}
@media (max-width:768px){.hero-meta{grid-template-columns:1fr 1fr;}}
.hero-meta-cell{
  padding:18px 22px;display:flex;flex-direction:column;gap:8px;
  border-right:1px solid var(--rule-2);
}
.hero-meta-cell:last-child{border-right:none;}
.hero-meta-k{font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);}
.hero-meta-v{font-family:var(--f-sans);font-weight:500;font-size:22px;letter-spacing:-0.018em;color:var(--text);}
.hero-meta-v em{font-style:normal;color:var(--red);font-weight:500;}
.hero-foot{display:flex;justify-content:flex-end;align-items:baseline;opacity:0;transition:opacity 0.6s var(--ease) 1.4s;}
.hero-foot.in{opacity:1;}
.hero-scroll-cue{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-3);
}
.hero-scroll-cue .line{display:inline-block;width:48px;height:1px;background:var(--red);animation:lineSlide 2s var(--ease) infinite;}
@keyframes lineSlide{0%,100%{transform:scaleX(0.4);transform-origin:left;}50%{transform:scaleX(1);transform-origin:left;}}

/* Circle-wipe for hero (mockup B only) */
.hero-standalone{--circle-r:100%;will-change:clip-path,opacity;}
.hero-standalone.is-wiping{clip-path:circle(var(--circle-r) at 50% 50%);}

/* ─── COUNT-UP HOOK (from V13) ─────────────────────── */
.count-up{font-variant-numeric:tabular-nums lining-nums;}

/* ─── REUSABLE CARDS ──────────────────────────────── */

/* Ceiling card (Bullet 2 — Power / Uplink) */
.ceiling-card{
  background:#fff;border:1px solid var(--rule-2);border-top:4px solid var(--danger);
  padding:36px 40px;border-radius:var(--r-1);position:relative;
  max-width:540px;
  box-shadow:0 1px 2px rgba(17,9,10,0.04),0 12px 28px rgba(17,9,10,0.06);
}
.ceiling-card .ceiling-k{
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--danger);
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.ceiling-card .ceiling-k::before{content:'';width:7px;height:7px;background:var(--danger);}
.ceiling-card .ceiling-v{
  font-family:var(--f-sans);font-weight:500;font-size:clamp(48px,6.2vw,84px);line-height:0.98;letter-spacing:-0.028em;color:var(--text);
  margin-bottom:18px;
}
.ceiling-card .ceiling-v em{color:var(--danger);font-style:normal;font-weight:500;}
.ceiling-card .ceiling-sub{font-size:16px;line-height:1.55;color:var(--text-2);max-width:48ch;}
.ceiling-card .ceiling-sub strong{color:var(--text);font-weight:600;}
.ceiling-card .ceiling-id{
  margin-top:24px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:0.10em;text-transform:uppercase;color:var(--text-4);
}

/* Dark Hero Mega card (Bullet 3 — adapted from V2-dark-hero-mega) */
.dark-mega-card{
  background:linear-gradient(180deg,#11090A 0%,#2a1416 55%,#5a3235 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  padding:44px 52px;border-radius:var(--r-1);position:relative;overflow:hidden;
  box-shadow:0 12px 32px rgba(17,9,10,0.18),0 2px 6px rgba(17,9,10,0.08);
}
.dark-mega-card::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent 7px,rgba(255,20,35,0.04) 7px,rgba(255,20,35,0.04) 8px);
  pointer-events:none;
}
.dark-mega-card > *{position:relative;z-index:1;}
.dark-mega-top{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:14px;margin-bottom:32px;gap:24px;
}
.dark-mega-eyebrow{
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:#BFB6B6;display:inline-flex;align-items:center;gap:10px;
}
.dark-mega-eyebrow em{color:var(--red-soft);font-style:normal;}
.dark-mega-live{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.10em;text-transform:uppercase;color:#fff;
}
.dark-mega-live::before{content:'';width:7px;height:7px;background:var(--red);border-radius:50%;animation:rp-thinking 1.2s ease-in-out infinite;}
.dark-mega-head{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:32px;
}
.dark-mega-title{
  font-family:var(--f-sans);font-weight:500;font-size:clamp(28px,3.6vw,46px);line-height:1.0;letter-spacing:-0.022em;color:#fff;max-width:20ch;
}
.dark-mega-title em{color:var(--red-soft);font-style:normal;font-weight:500;}
.dark-mega-num{
  font-family:var(--f-sans);font-weight:600;font-size:clamp(96px,12vw,160px);letter-spacing:-0.024em;line-height:0.86;color:#fff;
  font-variant-numeric:tabular-nums;text-align:right;
}
.dark-mega-num .small{
  display:block;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:#BFB6B6;margin-top:8px;text-align:right;
}
.dark-mega-bar{
  display:flex;height:96px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  position:relative;overflow:hidden;
}
.dark-mega-seg{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:12px 14px;color:#fff;
  border-right:1px solid rgba(255,255,255,0.12);overflow:hidden;width:0;
}
.dark-mega-seg:last-child{border-right:none;}
.dark-mega-seg .lbl{font-family:var(--f-sans);font-weight:700;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.92);}
.dark-mega-seg .num{font-family:var(--f-sans);font-weight:600;font-size:40px;letter-spacing:-0.022em;line-height:0.9;font-variant-numeric:tabular-nums;opacity:0;transition:opacity 0.4s var(--ease);}
.dark-mega-seg .sub{font-family:var(--f-mono);font-size:9px;color:rgba(255,255,255,0.7);letter-spacing:0.08em;text-transform:uppercase;opacity:0;transition:opacity 0.4s var(--ease);}

/* Trigger: parent wrapper .arena-card OR .scene receives .is-active,
   not the .dark-mega-card directly. Match both for A and B mockups. */
.arena-card.is-active .dark-mega-seg,
.scene.is-active .dark-mega-seg{animation:darkSegGrow 1100ms var(--ease) var(--d,0ms) forwards;}
.arena-card.is-active .dark-mega-seg .num,
.arena-card.is-active .dark-mega-seg .sub,
.scene.is-active .dark-mega-seg .num,
.scene.is-active .dark-mega-seg .sub{opacity:1;transition-delay:calc(var(--d,0ms) + 600ms);}
@keyframes darkSegGrow{to{width:var(--w);}}

.dark-mega-seg.s-bowl{background:linear-gradient(180deg,#AB2832 0%,#91222b 100%);--w:63.68%;--d:0ms;}
.dark-mega-seg.s-conc{background:linear-gradient(180deg,#C2410C 0%,#9A330A 100%);--w:14.35%;--d:180ms;}
.dark-mega-seg.s-off{background:linear-gradient(180deg,#B45309 0%,#8F4307 100%);--w:13.45%;--d:360ms;}
.dark-mega-seg.s-press{background:linear-gradient(180deg,#7C2D12 0%,#5C200C 100%);--w:4.04%;--d:540ms;padding:8px 6px;}
.dark-mega-seg.s-press .lbl,.dark-mega-seg.s-tm .lbl{font-size:9px;}
.dark-mega-seg.s-press .num,.dark-mega-seg.s-tm .num{font-size:18px;}
.dark-mega-seg.s-tm{background:linear-gradient(180deg,#28A745 0%,#1E7E34 100%);--w:4.48%;--d:720ms;padding:8px 6px;}
.dark-mega-axis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;color:#BFB6B6;letter-spacing:0.10em;margin-top:10px;text-transform:uppercase;}
.dark-mega-axis em{color:var(--red-soft);font-style:normal;}
.dark-mega-source{
  font-family:var(--f-mono);font-size:10px;color:var(--text-4);letter-spacing:0.06em;
  margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.08);
}

/* Editorial Spec Card (Bullet 4 — adapted from V1-editorial-spec-card) */
.spec-card{
  background:#fff;border:1px solid var(--rule-2);border-top:4px solid var(--red);
  padding:32px 36px;border-radius:var(--r-1);max-width:600px;position:relative;
  box-shadow:0 1px 2px rgba(17,9,10,0.04),0 12px 28px rgba(17,9,10,0.06);
}
.spec-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:20px;border-bottom:1px solid var(--rule-2);margin-bottom:24px;gap:16px;
}
.spec-meta{display:flex;align-items:baseline;gap:10px;}
.spec-stage-num{
  font-family:var(--f-sans);font-weight:700;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:4px 8px;
}
.spec-stage-year{
  font-family:var(--f-sans);font-weight:700;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--red);border:1px solid var(--red);padding:4px 8px;
}
.spec-status{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--red);
}
.spec-status::before{content:'';width:6px;height:6px;background:var(--red);border-radius:50%;animation:rp-thinking 1.2s ease-in-out infinite;}
.spec-hero{display:grid;grid-template-columns:1.4fr auto;align-items:end;gap:24px;margin-bottom:24px;}
.spec-eyebrow{font-family:var(--f-sans);font-weight:700;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;}
.spec-title{font-family:var(--f-sans);font-weight:500;font-size:clamp(40px,5.5vw,72px);line-height:0.96;letter-spacing:-0.02em;color:var(--ink);margin-bottom:10px;}
.spec-sub{font-family:var(--f-text);font-size:14px;line-height:1.5;color:var(--text-3);max-width:36ch;}
.spec-sub em{font-style:normal;color:var(--ink);font-weight:500;}
.spec-mega{text-align:right;}
.spec-mega-num{font-family:var(--f-sans);font-weight:600;font-size:clamp(60px,8.5vw,96px);letter-spacing:-0.024em;line-height:0.85;color:var(--ink);font-variant-numeric:tabular-nums;}
.spec-mega-unit{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);margin-top:4px;}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule-2);}
.spec-cell{padding:16px 0;border-bottom:1px solid var(--rule-2);opacity:0;transform:translateY(8px);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease);}
.spec-cell:nth-child(odd){padding-right:22px;border-right:1px solid var(--rule-2);}
.spec-cell:nth-child(even){padding-left:22px;}
.spec-card.is-active .spec-cell{opacity:1;transform:translateY(0);}
.spec-card.is-active .spec-cell:nth-child(1){transition-delay:0.20s;}
.spec-card.is-active .spec-cell:nth-child(2){transition-delay:0.28s;}
.spec-card.is-active .spec-cell:nth-child(3){transition-delay:0.36s;}
.spec-card.is-active .spec-cell:nth-child(4){transition-delay:0.44s;}
.spec-cell .k{font-family:var(--f-sans);font-weight:700;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px;}
.spec-cell .v{font-family:var(--f-sans);font-weight:500;font-size:15px;letter-spacing:-0.012em;line-height:1.25;color:var(--ink);}
.spec-cell .v em{color:var(--red);font-style:normal;font-weight:600;}
.spec-cell .v code{font-family:var(--f-mono);font-weight:500;background:var(--bone);padding:1px 5px;font-size:13px;color:var(--ink);}
.spec-driver{
  margin-top:18px;background:var(--paper);border-left:4px solid var(--red);padding:16px 18px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.spec-driver .k{
  font-family:var(--f-sans);font-weight:700;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--red);
  writing-mode:vertical-rl;transform:rotate(180deg);align-self:stretch;
}
.spec-driver .v{font-family:var(--f-text);font-size:13px;line-height:1.55;color:var(--ink);max-width:48ch;}
.spec-driver .v strong{color:var(--red);font-weight:600;}

/* CTA shared */
.cta-inner{text-align:center;width:min(960px,90vw);margin:0 auto;}
.cta-label{font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);margin-bottom:18px;}
.cta-heading{font-family:var(--f-sans);font-weight:500;font-size:clamp(40px,6.5vw,108px);line-height:0.96;letter-spacing:-0.032em;color:var(--text);margin-bottom:24px;}
.cta-heading em{font-style:normal;color:var(--red);font-weight:500;}
.cta-body{font-size:16px;line-height:1.55;color:var(--text-2);max-width:620px;margin:0 auto 28px;}
.cta-row{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:var(--r-1);
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  transition:transform var(--t-200) var(--ease),background var(--t-200) var(--ease),border-color var(--t-200) var(--ease),color var(--t-200) var(--ease);
}
.cta-btn.primary{background:var(--red);color:#fff;border:1px solid var(--red);}
.cta-btn.primary:hover{background:var(--red-2);}
.cta-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--rule-2);}
.cta-btn.ghost:hover{border-color:var(--red);color:var(--red);}

/* Baseline scene shared bits */
.baseline-stat-row{display:flex;gap:48px;margin-top:24px;flex-wrap:wrap;}
.baseline-stat{display:flex;flex-direction:column;gap:4px;}
.baseline-stat .num{font-family:var(--f-sans);font-weight:500;font-size:clamp(52px,6.5vw,96px);line-height:0.9;letter-spacing:-0.032em;color:var(--red);}
.baseline-stat .num em{font-size:0.5em;color:var(--text-2);font-style:normal;font-weight:500;}
.baseline-stat .lbl{font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);}