/* ============================================================
   Strive — marketing website styles
   Builds on colors_and_type.css (site.css) tokens.
   Bolder / bigger than the app, same dark-forest + lime DNA.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--page-base); }
body {
  margin: 0;
  font-family: var(--tf-display);
  color: var(--tf-fg-1);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* layered, breathing, textured canvas (sits behind all content) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--page-grad);
}
body::after {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 24%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 24%, #000 0%, transparent 72%);
  opacity: .6;
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 38px 76px; } }
@media (prefers-reduced-motion: reduce){ body::after { animation: none; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─── Visual style variants (Tweak-driven) ───────────────── */
/* DEFAULT = forest green (matches the app + the brief). */
:root {
  --page-base: #07160E;
  --page-grad:
    radial-gradient(ellipse 78% 48% at 50% -6%, rgba(120,180,55,.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 6%, rgba(200,241,53,.07), transparent 60%),
    radial-gradient(ellipse 95% 75% at 0% 100%, rgba(12,131,31,.16), transparent 62%),
    radial-gradient(ellipse 80% 70% at 100% 100%, rgba(12,131,31,.10), transparent 60%);
  --card-bg: rgba(180,230,120,.035);
  --card-bd: rgba(200,241,53,.12);
  --card-glow: transparent;
  --hero-accent: var(--tf-lime);
}
:root[data-style="midnight"] {
  --page-base: #080808;
  --page-grad:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(200,241,53,.06), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(12,131,31,.06), transparent 60%);
  --card-bg: rgba(255,255,255,.025);
  --card-bd: rgba(255,255,255,.08);
}
:root[data-style="aurora"] {
  --page-base: #060606;
  --page-grad:
    radial-gradient(ellipse 70% 50% at 50% -4%, rgba(200,241,53,.14), transparent 55%),
    radial-gradient(ellipse 60% 55% at 8% 95%, rgba(168,85,247,.08), transparent 58%),
    radial-gradient(ellipse 65% 60% at 100% 100%, rgba(12,131,31,.10), transparent 60%);
  --card-bg: rgba(255,255,255,.03);
  --card-bd: rgba(255,255,255,.10);
  --card-glow: 0 0 60px -20px rgba(200,241,53,.20);
}

/* ─── Layout primitives ──────────────────────────────────── */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 110px 0; position: relative; }
.section.tight { padding: 72px 0; }
@media (max-width: 720px){ .section { padding: 76px 0; } }

.eyebrow {
  font-family: var(--tf-mono);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tf-lime); font-weight: 500;
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow.mute { color: var(--tf-fg-3); }
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tf-lime);
  animation: pulse 1.9s var(--ease-out) infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.25)} }

/* ─── Display type ───────────────────────────────────────── */
.display {
  font-weight: 800; letter-spacing: -0.04em; line-height: 0.96;
  text-wrap: balance; margin: 0;
}
.display .it { font-style: italic; font-weight: 300; color: var(--tf-fg-3); }
.display .strk { color: transparent; -webkit-text-stroke: 2px var(--hero-accent); }
.display .lime { color: var(--tf-lime); }

h2.display { font-size: clamp(34px, 5vw, 60px); }
h3.display { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.02; }

.lede {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--tf-fg-2);
  max-width: 56ch; margin: 0; font-weight: 400;
}
.lede strong { color: #fff; font-weight: 600; }
.lede em { font-style: normal; background: rgba(200,241,53,.12); color: var(--tf-lime); padding: 1px 6px; border-radius: 5px; font-weight: 500; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--tf-display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; border-radius: var(--r-pill);
  padding: 14px 22px; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base), color var(--dur-base);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
.btn-lime { background: var(--tf-lime); color: var(--tf-ink); box-shadow: var(--shadow-cta); }
.btn-lime:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-h); }
.btn-lime:active { transform: translateY(0); }
.btn-ghost { background: rgba(255,255,255,.04); color: #fff; border-color: var(--tf-stroke-2); }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--page-base) 72%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 70px; }
.nav .logo { height: 26px; width: auto; }
.nav .links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav .links a {
  font-size: 14px; color: var(--tf-fg-2); font-weight: 500; letter-spacing: -0.01em;
  transition: color var(--dur-fast); position: relative;
}
.nav .links a:hover { color: #fff; }
.nav .links a.active { color: #fff; }
.nav .links a.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-24px; height:2px;
  background: var(--tf-lime); box-shadow: 0 0 12px var(--tf-lime-glow);
}
.nav-cta { margin-left: 4px; }
.nav .burger {
  display: none; margin-left: 6px; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--tf-stroke-2);
  align-items: center; justify-content: center; cursor: pointer; flex-direction: column; gap: 4px;
}
.nav .burger span { width: 17px; height: 2px; background: #fff; border-radius: 2px; display:block; }
.mobile-sheet {
  position: fixed; inset: 70px 0 0; z-index: 55; background: var(--page-base);
  padding: 28px; transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); display: flex; flex-direction: column; gap: 6px;
}
.mobile-sheet.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-sheet a { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.mobile-sheet .btn { margin-top: 22px; justify-content: center; }
@media (max-width: 860px){
  .nav .links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav .burger { display: flex; }
}
@media (min-width: 861px){ .mobile-sheet { display: none; } }

/* ─── Hero ───────────────────────────────────────────────── */
.hero { padding-top: 84px; padding-bottom: 96px; }
.hero-grid { display: grid; grid-template-columns: 1fr .96fr; gap: 40px; align-items: center; }
.hero h1.display { font-size: clamp(46px, 7.4vw, 104px); }
.hero .lede { margin-top: 26px; }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-note { margin-top: 28px; display: flex; align-items: center; gap: 16px; color: var(--tf-fg-3); font-size: 13px; }
.store-row { display: flex; gap: 10px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--tf-stroke-2); border-radius: 14px; padding: 9px 15px;
  background: rgba(255,255,255,.03); transition: background var(--dur-base), border-color var(--dur-base);
}
.store-badge:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.store-badge svg { width: 20px; height: 20px; }
.store-badge .sb { line-height: 1.05; }
.store-badge .sb small { display:block; font-family: var(--tf-mono); font-size: 8.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-fg-3); }
.store-badge .sb b { font-size: 14px; font-weight: 700; }
@media (max-width: 920px){
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-visual { order: -1; }
}

/* ─── Phone mock ─────────────────────────────────────────── */
.phone-wrap { display: flex; justify-content: center; position: relative; }
.phone {
  width: 300px; border-radius: 44px; background: var(--tf-forest-1);
  padding: 12px; position: relative;
  box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 3px #2a2a2a, 0 50px 90px -30px rgba(0,0,0,.7);
}
.phone::after { /* lime depth glow behind */
  content:''; position:absolute; inset:-40px; z-index:-1; border-radius:60px;
  background: radial-gradient(circle at 50% 30%, rgba(200,241,53,.14), transparent 60%);
}
.phone-screen {
  background:
    radial-gradient(circle at 100% 0%, rgba(200,241,53,.10), transparent 50%),
    var(--tf-forest-1);
  border-radius: 32px; overflow: hidden; padding: 16px 14px 20px;
  min-height: 540px; position: relative;
}
.phone-status { display:flex; justify-content:space-between; align-items:center; font-family: var(--tf-mono); font-size: 11px; color:#fff; padding: 2px 6px 14px; }
.phone-status .right { display:flex; gap:5px; align-items:center; }
.ph-card { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 14px; }
.ph-card + .ph-card { margin-top: 12px; }
.ph-k { font-family: var(--tf-mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.55); display:flex; align-items:center; gap:7px; margin-bottom:9px; font-weight:600; }
.ph-k::before { content:''; width:5px; height:5px; background: var(--tf-lime); border-radius:50%; animation: pulse 1.8s ease-in-out infinite; }
.ph-body { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
.ph-body strong { color:#fff; font-weight:700; }
.ph-body em { font-style: normal; background: rgba(200,241,53,.12); color: var(--tf-lime); padding: 1px 4px; border-radius: 4px; font-weight: 500; }
.clip-head { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.clip-av { width:34px; height:34px; border-radius:100px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#0A0A0A; font-size:12px; flex-shrink:0; background: linear-gradient(135deg,#F8CB46,#FF6B35); }
.clip-who { line-height:1.1; }
.clip-who .n { font-size:13px; font-weight:700; color:#fff; }
.clip-who .r { font-size:10.5px; color: rgba(255,255,255,.55); margin-top:2px; }
.clip-row { display:flex; align-items:center; gap:10px; padding:8px; border-radius:100px; background: rgba(0,0,0,.28); }
.clip-play { width:28px; height:28px; border-radius:100px; background: var(--tf-lime); color:#0A0A0A; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.clip-play svg { width:12px; height:12px; fill:#0A0A0A; stroke:none; }
.wave { flex:1; display:flex; gap:2px; align-items:center; height:20px; }
.wave i { flex:1; max-width:3px; background: var(--tf-lime); border-radius:1.5px; display:block; }
.wave i:nth-child(2n){ background: rgba(200,241,53,.4); }
.clip-t { font-family: var(--tf-mono); font-size:10px; color: rgba(255,255,255,.6); }
.clip-delta { margin-top:10px; font-family: var(--tf-mono); font-size:10px; letter-spacing:.1em; color: var(--tf-lime); text-transform:uppercase; }

/* ─── Generic card ───────────────────────────────────────── */
.card {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(200,241,53,.05), transparent 58%),
    var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-2xl); padding: 28px;
  box-shadow: var(--card-glow);
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.card.hover:hover { border-color: rgba(200,241,53,.28); transform: translateY(-3px); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .lede { margin-top: 20px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ─── How it works ───────────────────────────────────────── */
.how { display: grid; gap: 20px; }
/* default = stepper (4 across) */
:root[data-how="stepper"] .how { grid-template-columns: repeat(4, 1fr); }
:root[data-how="timeline"] .how { grid-template-columns: 1fr; max-width: 760px; }
:root[data-how="cards"] .how { grid-template-columns: repeat(4, 1fr); }

.step { position: relative; }
.step .idx {
  font-family: var(--tf-mono); font-size: 12px; letter-spacing:.12em;
  color: var(--tf-lime); font-weight: 600; margin-bottom: 16px; display:flex; align-items:center; gap:10px;
}
.step .idx b { color: var(--tf-fg-3); font-weight: 500; }
.step .ic {
  width: 46px; height: 46px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: rgba(200,241,53,.1); border:1px solid rgba(200,241,53,.2); margin-bottom: 18px;
}
.step .ic svg { width: 22px; height: 22px; stroke: var(--tf-lime); stroke-width: 2; fill: none; }
.step h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color:#fff; }
.step p { font-size: 14.5px; line-height: 1.55; color: var(--tf-fg-2); margin: 0; }
.step .arrow { display: none; }

/* stepper connectors */
:root[data-how="stepper"] .step:not(:last-child) .arrow {
  display:block; position:absolute; top: 22px; right: -12px; color: var(--tf-fg-4);
}
:root[data-how="stepper"] .step:not(:last-child) .arrow svg { width:18px; height:18px; stroke: var(--tf-fg-3); }

/* timeline layout */
:root[data-how="timeline"] .step {
  display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 36px;
}
:root[data-how="timeline"] .step:not(:last-child)::before {
  content:''; position:absolute; left: 23px; top: 56px; bottom: -4px; width: 2px;
  background: linear-gradient(var(--tf-lime), rgba(200,241,53,.1));
}
:root[data-how="timeline"] .step .ic { margin: 0; }
:root[data-how="timeline"] .step .idx { position: absolute; }

/* cards layout = elevated cards */
:root[data-how="cards"] .step { background: var(--card-bg); border:1px solid var(--card-bd); border-radius: var(--r-xl); padding: 24px; }
:root[data-how="cards"] .step .ic { background: rgba(200,241,53,.12); }

@media (max-width: 920px){
  :root[data-how="stepper"] .how, :root[data-how="cards"] .how { grid-template-columns: repeat(2,1fr); }
  :root[data-how="stepper"] .step .arrow { display:none !important; }
}
@media (max-width: 560px){
  :root[data-how="stepper"] .how, :root[data-how="cards"] .how { grid-template-columns: 1fr; }
}

/* ─── Proof / readiness concept ──────────────────────────── */
.proof-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
@media (max-width: 920px){ .proof-grid { grid-template-columns: 1fr; gap: 40px; } }
.equation { display:flex; align-items:center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.eq-chip {
  font-family: var(--tf-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--card-bd);
  background: var(--card-bg); color: var(--tf-fg-1);
}
.eq-chip.accent { border-color: rgba(200,241,53,.35); background: rgba(200,241,53,.1); color: var(--tf-lime); }
.eq-op { color: var(--tf-fg-3); font-family: var(--tf-mono); font-size: 16px; }

.score-card { padding: 30px; }
.score-top { display:flex; justify-content: space-between; align-items:flex-start; margin-bottom: 24px; }
.score-role { font-family: var(--tf-mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-fg-3); }
.score-num { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: .9; color:#fff; }
.score-num .delta { font-family: var(--tf-mono); font-size: 13px; color: var(--tf-lime); letter-spacing:.06em; vertical-align: middle; margin-left: 10px; }
.score-state { font-family: var(--tf-mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--tf-ink); background: var(--tf-lime); padding: 5px 10px; border-radius: var(--r-pill); font-weight:600; }
.bars { display:grid; gap: 14px; }
.bar-row { display:grid; grid-template-columns: 110px 1fr 40px; align-items:center; gap: 12px; }
.bar-row .lbl { font-family: var(--tf-mono); font-size: 10px; letter-spacing:.08em; text-transform:uppercase; color: var(--tf-fg-2); }
.bar-track { height: 7px; border-radius: 100px; background: rgba(255,255,255,.08); overflow:hidden; }
.bar-fill { display:block; height:100%; border-radius:100px; }
.bar-row .val { font-family: var(--tf-mono); font-size: 11px; color: var(--tf-fg-2); text-align:right; }

/* ─── Audience split ─────────────────────────────────────── */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } }
.split-card { padding: 36px; display:flex; flex-direction: column; min-height: 340px; }
.split-card .tag { font-family: var(--tf-mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--tf-lime); margin-bottom: 18px; }
.split-card.alt .tag { color: var(--tf-sky); }
.split-card h3 { font-size: 30px; font-weight:800; letter-spacing:-0.03em; line-height:1; margin: 0 0 14px; }
.split-card h3 .it { font-style: italic; font-weight:300; color: var(--tf-fg-3); }
.split-card p { font-size: 15px; line-height: 1.6; color: var(--tf-fg-2); margin: 0 0 24px; }
.split-list { list-style:none; padding:0; margin: 0 0 26px; display:grid; gap: 12px; }
.split-list li { display:flex; gap: 11px; align-items:flex-start; font-size: 14px; color: var(--tf-fg-1); line-height:1.45; }
.split-list li svg { width:17px; height:17px; stroke: var(--tf-lime); stroke-width:2.4; flex-shrink:0; margin-top:1px; fill:none; }
.split-card.alt .split-list li svg { stroke: var(--tf-sky); }
.split-card .foot { margin-top:auto; }

/* ─── Mentors ────────────────────────────────────────────── */
.mentor-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 820px){ .mentor-grid { grid-template-columns: 1fr; } }
.mentor { padding: 26px; }
.mentor .q { font-size: 17px; line-height: 1.5; color: #fff; font-weight: 500; letter-spacing:-0.01em; margin: 0 0 22px; }
.mentor .q em { font-style: normal; color: var(--tf-lime); }
.mentor .who { display:flex; align-items:center; gap: 12px; }
.mentor .av { width: 42px; height:42px; border-radius:100px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#0A0A0A; font-size:14px; flex-shrink:0; }
.mentor .who .n { font-size: 14px; font-weight:700; color:#fff; }
.mentor .who .r { font-size: 12px; color: var(--tf-fg-2); margin-top:2px; }
.logos-row { display:flex; flex-wrap:wrap; align-items:center; gap: 14px 34px; margin-top: 8px; }
.logos-row .co { font-family: var(--tf-display); font-weight: 800; font-size: 19px; letter-spacing:-0.02em; color: var(--tf-fg-3); transition: color var(--dur-base); }
.logos-row .co:hover { color: var(--tf-fg-1); }

/* ─── Brand logo wall (real, color) ──────────────────────── */
.logo-wall { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 12px; }
.brandlogo {
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 18px 10px 11px; border:1px solid var(--card-bd); background: var(--card-bg);
  border-radius: var(--r-pill);
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.brandlogo:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.bl-mark { width: 26px; height: 26px; flex-shrink:0; }
/* real-logo tile (white app-icon style, guarantees legibility on dark) */
.bl-tile {
  width: 30px; height: 30px; flex-shrink:0; border-radius: 8px;
  background: #fff; display:flex; align-items:center; justify-content:center;
  padding: 5px; position:relative; overflow:hidden;
}
.bl-tile img { width:100%; height:100%; object-fit: contain; display:block; }
.bl-tile.miss { background: var(--c, #2a2a2a); padding:0; }
.bl-tile.miss::after { content: attr(data-l); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; }
.bl-name { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: #fff; }
/* attention-band wrapper */
.trust-band {
  border:1px solid var(--card-bd); border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(200,241,53,.05), transparent 60%),
    var(--card-bg);
  padding: 34px 30px;
}
@media (max-width: 560px){ .brandlogo { padding: 8px 14px 8px 9px; } .bl-name { font-size: 14px; } .bl-mark { width:22px; height:22px; } .bl-tile { width:26px; height:26px; } }

/* ─── Bigger, prouder Strive logo ────────────────────────── */
.nav .logo { height: 34px; }
.nav-in { height: 76px; }
.foot .logo { height: 30px; }

/* ─── Stats strip ────────────────────────────────────────── */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width: 720px){ .stats { grid-template-columns: repeat(2,1fr); } }
.stat .n { font-size: 44px; font-weight:800; letter-spacing:-0.04em; color:#fff; line-height:1; }
.stat .n .u { color: var(--tf-lime); }
.stat .l { font-size: 13.5px; color: var(--tf-fg-2); margin-top: 10px; line-height:1.4; }

/* ─── CTA band (strong — olive gradient, screenshot spec) ── */
.cta-band {
  border-radius: var(--r-2xl); padding: 84px 56px; text-align:center;
  background: linear-gradient(158deg, #5a6c2e 0%, #43521f 52%, #2c3a18 100%);
  border: 1px solid rgba(200,241,53,.22); position: relative; overflow: hidden;
  box-shadow: 0 44px 100px -44px rgba(0,0,0,.7);
}
.cta-band::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 90% at 50% -10%, rgba(200,241,53,.18), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-ic {
  width: 60px; height: 60px; margin: 0 auto 26px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(200,241,53,.14); border:1px solid rgba(200,241,53,.3);
}
.cta-ic svg { width: 30px; height: 30px; stroke: var(--tf-blink-yellow); stroke-width: 2; fill:none; }
.cta-band h2 { margin: 0 auto 18px; max-width: 22ch; color:#fff; }
.cta-band h2 .it { color: rgba(255,255,255,.78); }
.cta-band .lede { margin: 0 auto 38px; color: rgba(255,255,255,.72); }
.cta-band .store-row { justify-content: center; }
@media (max-width: 620px){ .cta-band { padding: 56px 24px; } }

/* white store buttons (on the green CTA) */
.store-badge.light { background:#fff; border-color:#fff; border-radius: 16px; padding: 12px 22px; }
.store-badge.light:hover { background:#f0efe9; transform: translateY(-2px); }
.store-badge.light svg { fill: var(--tf-ink); }
.store-badge.light .sb small { color: #5b5b5b; }
.store-badge.light .sb b { color: var(--tf-ink); font-size: 16px; }

/* ─── Reusable icon tile (cards, section heads) ──────────── */
.ic-tile {
  width: 52px; height: 52px; border-radius: 15px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(200,241,53,.12); border:1px solid rgba(200,241,53,.24);
}
.ic-tile svg { width: 26px; height: 26px; stroke: var(--tf-lime); stroke-width: 2; fill:none; }
.ic-tile.sky { background: rgba(110,185,255,.12); border-color: rgba(110,185,255,.26); }
.ic-tile.sky svg { stroke: var(--tf-sky); }

/* ─── Footer ─────────────────────────────────────────────── */
.foot { border-top: 1px solid rgba(255,255,255,.07); padding: 56px 0 64px; margin-top: 40px; }
.foot-grid { display:flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot .logo { height: 24px; margin-bottom: 16px; }
.foot .tag { color: var(--tf-fg-3); font-size: 13.5px; max-width: 30ch; line-height:1.5; }
.foot-cols { display:flex; gap: 64px; flex-wrap: wrap; }
.foot-col h5 { font-family: var(--tf-mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--tf-fg-3); margin:0 0 16px; font-weight:500; }
.foot-col a { display:block; font-size: 14px; color: var(--tf-fg-2); margin-bottom: 11px; transition: color var(--dur-fast); }
.foot-col a:hover { color:#fff; }
.foot-base { margin-top: 48px; padding-top: 26px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family: var(--tf-mono); font-size:11px; letter-spacing:.06em; color: var(--tf-fg-3); }

/* ─── Page hero (sub-pages) ──────────────────────────────── */
.page-hero { padding-top: 72px; padding-bottom: 24px; }
.page-hero h1.display { font-size: clamp(40px, 6vw, 80px); }
.page-hero .lede { margin-top: 24px; }

/* ─── Reveal on scroll ───────────────────────────────────── */
/* Default = visible (no-JS / frozen-transition safe). The hidden start
   state is gated behind html.js so content can never get stuck invisible. */
.reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .reveal { opacity: 0; transform: translateY(22px); }
html.js .reveal.in { opacity: 1; transform: none; }
/* Hard safety: snap everything visible with NO transition (a frozen
   transition would otherwise keep forced values stuck at 0). */
html.reveal-all .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce){ html.js .reveal { opacity:1; transform:none; } html{scroll-behavior:auto;} }

/* ─── Misc helpers ───────────────────────────────────────── */
.divider { height:1px; background: rgba(255,255,255,.07); border:0; margin: 0; }
.pill-tag { display:inline-flex; align-items:center; gap:8px; font-family: var(--tf-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-fg-2); border:1px solid var(--card-bd); background: var(--card-bg); padding:7px 13px; border-radius:var(--r-pill); }

/* ─── Feature rows (alternating, sub-pages) ──────────────── */
.feature-row { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.feature-row + .feature-row { margin-top: 96px; }
.feature-row.flip .fr-media { order: -1; }
.feature-row h3.display { margin-bottom: 16px; }
.feature-row .lede { margin-bottom: 22px; }
@media (max-width: 860px){
  .feature-row, .feature-row.flip { grid-template-columns: 1fr; gap: 32px; }
  .feature-row.flip .fr-media { order: 0; }
  .feature-row + .feature-row { margin-top: 64px; }
}
.fr-media { display:flex; justify-content:center; }

/* mini list with lime ticks */
.tick-list { list-style:none; padding:0; margin: 0; display:grid; gap: 13px; }
.tick-list li { display:flex; gap: 11px; align-items:flex-start; font-size: 15px; color: var(--tf-fg-1); line-height:1.5; }
.tick-list li svg { width:18px; height:18px; stroke: var(--tf-lime); stroke-width:2.4; flex-shrink:0; margin-top:2px; fill:none; }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq { max-width: 780px; margin: 0 auto; display:grid; gap: 0; }
.faq details { border-bottom: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size: 19px; font-weight: 700; letter-spacing:-0.02em; color:#fff; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pl { width:22px; height:22px; flex-shrink:0; position:relative; }
.faq summary .pl::before, .faq summary .pl::after { content:''; position:absolute; background: var(--tf-lime); border-radius:2px; transition: transform var(--dur-base); }
.faq summary .pl::before { left:0; right:0; top:10px; height:2px; }
.faq summary .pl::after { top:0; bottom:0; left:10px; width:2px; }
.faq details[open] summary .pl::after { transform: scaleY(0); }
.faq details p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--tf-fg-2); max-width: 64ch; }

/* ─── Big number list (sub-page metric callouts) ─────────── */
.metric-band { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 720px){ .metric-band { grid-template-columns: 1fr; } }

/* ============================================================
   VISUAL SPARK  — motion, depth, color
   ============================================================ */

/* breathing lime glow behind the hero phone */
.phone::after {
  content:''; position:absolute; inset:-50px; z-index:-1; border-radius:60px;
  background: radial-gradient(circle at 50% 32%, rgba(200,241,53,.18), transparent 62%);
  animation: breathe 5.5s var(--ease-out) infinite;
}
@keyframes breathe { 0%,100%{ opacity:.65; transform:scale(.96);} 50%{ opacity:1; transform:scale(1.04);} }

/* hero visual gets room for floating fragments */
.hero-stage { position: relative; padding: 8px; }
.float {
  position: absolute; z-index: 5; border-radius: var(--r-lg);
  background: rgba(13,35,24,.78); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.65);
  padding: 12px 14px; animation: floaty 6s var(--ease-out) infinite;
}
.float .fl-k { font-family: var(--tf-mono); font-size: 8.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-fg-3); }
.float .fl-v { font-weight: 800; letter-spacing:-0.02em; color:#fff; }

/* readiness badge — the loud lime artifact */
.float-readiness {
  top: 30%; right: -13%; padding: 0; border:0; background:transparent; box-shadow:none; animation-delay:-1.5s;
  display:flex; flex-direction:column; align-items:center;
}
.rbadge {
  width: 104px; height: 116px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: linear-gradient(160deg, var(--tf-lime), var(--tf-lime-d));
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  box-shadow: 0 18px 50px -10px rgba(200,241,53,.55);
}
.rbadge .n { font-size: 32px; font-weight: 800; letter-spacing:-0.04em; color: var(--tf-ink); line-height:.9; }
.rbadge .l { font-family: var(--tf-mono); font-size: 8.5px; letter-spacing:.16em; text-transform:uppercase; color: rgba(10,10,10,.7); margin-top:4px; font-weight:600; }

/* skill ring donut */
.float-ring { top: 2%; left: -12%; display:flex; align-items:center; gap:12px; }
.ring { width:52px; height:52px; flex-shrink:0; }
.ring .track { fill:none; stroke: rgba(255,255,255,.12); stroke-width:5; }
.ring .meter { fill:none; stroke: var(--tf-lime); stroke-width:5; stroke-linecap:round; transform: rotate(-90deg); transform-origin:center; }
.ring-cap { font-size:13px; font-weight:800; fill:#fff; }

/* role card with company logos */
.float-role { bottom: 4%; right: -9%; animation-delay:-3.5s; width: 168px; }
.float-role .role-n { font-size:15px; font-weight:800; letter-spacing:-0.02em; color:#fff; margin-top:3px; }
.float-role .role-logos { display:flex; gap:6px; margin-top:9px; }
.float-role .role-logos i { width:22px; height:22px; border-radius:6px; display:block; background:#fff; }

/* mentor progress float */
.float-mentor { bottom: 13%; left: -13%; display:flex; align-items:center; gap:10px; animation-delay:-2.4s; width:172px; }
.float-mentor .av { width:34px; height:34px; border-radius:100px; flex-shrink:0; background:linear-gradient(135deg,#F8CB46,#FF6B35); color:#0A0A0A; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.float-mentor .mbar { height:6px; border-radius:100px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:6px; }
.float-mentor .mbar i { display:block; height:100%; width:72%; border-radius:100px; background: var(--tf-lime); }

@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@media (max-width: 1180px){ .float-readiness{right:-4%} .float-ring{left:-4%} .float-role{right:-2%} .float-mentor{left:-3%} }
@media (max-width: 960px){ .float { display:none; } }
@media (prefers-reduced-motion: reduce){ .float, .phone::after { animation: none; } }

/* live animated waveform (bars dance) */
.wave.live i { animation: dance 1.1s ease-in-out infinite; transform-origin: center; }
.wave.live i:nth-child(3n){ animation-delay: -.2s; }
.wave.live i:nth-child(3n+1){ animation-delay: -.5s; }
.wave.live i:nth-child(4n){ animation-delay: -.8s; }
@keyframes dance { 0%,100%{ transform: scaleY(.55);} 50%{ transform: scaleY(1.15);} }
@media (prefers-reduced-motion: reduce){ .wave.live i { animation: none; } }

/* rotating case-prompt pill in hero */
.case-ticker {
  display:inline-flex; align-items:center; gap:11px; max-width:100%;
  border:1px solid rgba(200,241,53,.28); background: rgba(200,241,53,.07);
  border-radius: var(--r-pill); padding: 9px 16px 9px 13px; margin-bottom: 26px; overflow:hidden;
}
.case-ticker .tag { font-family: var(--tf-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color: var(--tf-lime); background: rgba(200,241,53,.14); padding: 4px 8px; border-radius: var(--r-pill); flex-shrink:0; }
.case-ticker .q { font-size: 14px; font-weight: 600; color:#fff; letter-spacing:-0.01em; white-space:nowrap; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.case-ticker .q.swap { opacity:0; transform: translateY(-6px); }
@media (max-width: 560px){ .case-ticker .q { font-size: 12.5px; white-space:normal; } }

/* plain-english 3-step strip */
.plain {
  display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items:center;
  border:1px solid var(--card-bd); background: var(--card-bg); border-radius: var(--r-2xl); padding: 28px 30px;
}
.plain .pstep { display:flex; gap:14px; align-items:flex-start; }
.plain .pnum { width:34px; height:34px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--tf-mono); font-weight:600; font-size:13px; }
.plain .pstep h4 { margin:0 0 4px; font-size:15.5px; font-weight:800; letter-spacing:-0.02em; color:#fff; }
.plain .pstep p { margin:0; font-size:13px; line-height:1.45; color: var(--tf-fg-2); }
.plain .parrow { color: var(--tf-fg-4); }
.plain .parrow svg { width:20px; height:20px; stroke: var(--tf-fg-3); }
@media (max-width: 860px){
  .plain { grid-template-columns: 1fr; gap: 22px; padding: 26px; }
  .plain .parrow { display:none; }
}

/* case marquee */
.marquee { overflow:hidden; position:relative; padding: 18px 0; border-block:1px solid rgba(255,255,255,.07); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; gap: 14px; width:max-content; animation: marq 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-chip { display:inline-flex; align-items:center; gap:10px; padding: 11px 18px; border-radius: var(--r-pill); border:1px solid var(--card-bd); background: var(--card-bg); white-space:nowrap; font-size: 14.5px; font-weight:600; letter-spacing:-0.01em; color: var(--tf-fg-1); }
.marquee-chip .dotc { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
@keyframes marq { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; } }

/* colorized how-it-works steps */
.step.c1 .ic { background: rgba(200,241,53,.12); border-color: rgba(200,241,53,.28); }
.step.c1 .ic svg { stroke: var(--tf-lime); }  .step.c1 .idx { color: var(--tf-lime); }
.step.c2 .ic { background: rgba(110,185,255,.12); border-color: rgba(110,185,255,.28); }
.step.c2 .ic svg { stroke: var(--tf-sky); }    .step.c2 .idx { color: var(--tf-sky); }
.step.c3 .ic { background: rgba(255,110,180,.12); border-color: rgba(255,110,180,.28); }
.step.c3 .ic svg { stroke: var(--tf-pink); }   .step.c3 .idx { color: var(--tf-pink); }
.step.c4 .ic { background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.30); }
.step.c4 .ic svg { stroke: var(--tf-purple); } .step.c4 .idx { color: var(--tf-purple); }

/* readiness bars animate in + number counts up */
.bar-fill { width: 0 !important; transition: width 1.1s var(--ease-out); }
.reveal.in .bar-fill, html.reveal-all .bar-fill { width: var(--w) !important; }
html.reveal-all .bar-fill { transition: none !important; }

/* section eyebrow gets a little lime tick line */
.section-head .eyebrow::after { content:''; height:1px; width:46px; background: linear-gradient(90deg, var(--tf-lime), transparent); display:inline-block; margin-left:4px; }

/* ============================================================
   INTERACTIVE CASE — the playable "dare"
   ============================================================ */
.dare-grid { display:grid; gap: 28px; }

/* ─── For-students solo block ────────────────────────────── */
.split-solo { display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; padding: 40px; }
.split-solo .solo-feat h4 { font-size:18px; font-weight:800; letter-spacing:-0.02em; color:#fff; margin: 16px 0 8px; }
.split-solo .solo-feat p { font-size:14.5px; line-height:1.55; color: var(--tf-fg-2); margin:0; }
.split-solo .solo-cta { grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 820px){ .split-solo { grid-template-columns: 1fr; gap: 26px; padding: 30px; } }

/* ─── Mentor lead-collection band ────────────────────────── */
.mentor-lead {
  margin-top: 30px; padding: 30px 34px; border-radius: var(--r-2xl);
  border:1px solid rgba(200,241,53,.22);
  background: radial-gradient(ellipse 60% 130% at 100% 0%, rgba(200,241,53,.08), transparent 60%), var(--card-bg);
  display:flex; align-items:center; gap: 30px;
}
.mentor-lead .ml-copy { flex:1; }
.mentor-lead .ml-k { font-family: var(--tf-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--tf-lime); margin-bottom:8px; }
.mentor-lead .ml-h { font-size:22px; font-weight:800; letter-spacing:-0.02em; color:#fff; line-height:1.15; }
.mentor-lead .ml-copy p { margin:8px 0 0; font-size:14px; line-height:1.55; color: var(--tf-fg-2); max-width: 60ch; }
.mentor-lead .btn { flex-shrink:0; }
@media (max-width: 720px){ .mentor-lead { flex-direction:column; align-items:flex-start; gap:20px; } }

/* case selector — segmented chips that drive the live case */
.icase-picker { display:grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 860px){ .icase-picker { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .icase-picker { grid-template-columns: repeat(2, 1fr); } }
.cpick {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; cursor:pointer; text-align:left;
  border:1px solid var(--card-bd); background: var(--card-bg); border-radius: var(--r-lg);
  padding: 12px 13px; color:#fff; font-family: var(--tf-display);
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.cpick:hover { border-color: rgba(200,241,53,.32); transform: translateY(-2px); }
.cpick.on { border-color: var(--tf-lime); background: rgba(200,241,53,.08); box-shadow: 0 0 0 1px var(--tf-lime) inset; }
.cpick-dot { width:9px; height:9px; border-radius:50%; }
.cpick-co { font-size:14px; font-weight:700; letter-spacing:-0.01em; }
.cpick-cat { font-family: var(--tf-mono); font-size:8.5px; letter-spacing:.14em; color: var(--tf-fg-3); }
.cpick.on .cpick-cat { color: var(--tf-lime); }

/* provocation chips that lead into the case */
.prov-row { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 860px){ .prov-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .prov-row { grid-template-columns: 1fr; } }
.prov {
  display:flex; align-items:center; gap: 12px; text-align:left; cursor:pointer;
  border:1px solid var(--card-bd); background: var(--card-bg); border-radius: var(--r-lg);
  padding: 15px 16px; color: var(--tf-fg-1); font-family: var(--tf-display);
  font-size: 14.5px; font-weight: 600; letter-spacing:-0.01em; line-height:1.25;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.prov:hover { background: rgba(255,255,255,.055); border-color: rgba(200,241,53,.32); transform: translateY(-2px); }
.prov .pd { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.prov .cat { font-family: var(--tf-mono); font-size:8.5px; letter-spacing:.12em; font-weight:600; color: var(--tf-lime); background: rgba(200,241,53,.14); border:1px solid rgba(200,241,53,.25); padding:3px 6px; border-radius:5px; flex-shrink:0; }
.prov .solve { margin-left:auto; font-family: var(--tf-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-lime); opacity:0; transform: translateX(-4px); transition: opacity var(--dur-base), transform var(--dur-base); white-space:nowrap; }
.prov:hover .solve { opacity:1; transform:none; }

/* the case card */
.icase {
  border:1px solid rgba(200,241,53,.22); border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(200,241,53,.08), transparent 55%),
    var(--card-bg);
  padding: 30px; box-shadow: var(--glow-soft);
}
@media (max-width: 620px){ .icase { padding: 22px; } }
.icase-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.icase-tag { display:inline-flex; align-items:center; gap:9px; font-family: var(--tf-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--tf-lime); }
.icase-tag .dot { width:6px; height:6px; border-radius:50%; background: var(--tf-lime); animation: pulse 1.7s var(--ease-out) infinite; }
.icase-reset { background:none; border:0; cursor:pointer; font-family: var(--tf-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--tf-fg-3); transition: color var(--dur-fast); }
.icase-reset:hover { color:#fff; }
.icase-turn { font-family: var(--tf-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-lime); }

/* conversation thread (multi-turn) */
.ithread { display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.ithread-item { display:flex; flex-direction:column; gap:8px; }
.ichose { font-size:14px; color: var(--tf-fg-2); display:flex; gap:9px; align-items:baseline; }
.ichose-k { font-family: var(--tf-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-fg-3); flex-shrink:0; }
.icoach { font-size:14.5px; line-height:1.5; color: var(--tf-fg-1); display:flex; gap:9px; align-items:baseline;
  border-left:2px solid var(--tf-lime); background: rgba(200,241,53,.05); border-radius:0 var(--r-md) var(--r-md) 0; padding:11px 14px; }
.icoach-k { font-family: var(--tf-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-lime); flex-shrink:0; }
.icoach em { font-style:normal; background: rgba(200,241,53,.14); color: var(--tf-lime); padding:1px 5px; border-radius:4px; font-weight:500; }
/* opacity stays at base (1) so content can never stall invisible; entrance animates transform only */
.icase-body { opacity: 1; }
@media (prefers-reduced-motion: no-preference){ .icase-body { animation: caseIn .4s var(--ease-out); } }
@keyframes caseIn { from { transform: translateY(10px); } to { transform: none; } }

/* ── Polish pass: prevent awkward wraps ── */
.nav .links a { white-space: nowrap; }
.foot-base span { white-space: nowrap; }
.store-badge .sb small { white-space: nowrap; }

.icase-q { font-size: clamp(22px, 3vw, 32px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; color:#fff; text-wrap:balance; }
.icase-prompt { margin-top:14px; font-size:14px; color: var(--tf-fg-2); }
.icase-opts { margin-top:22px; display:grid; gap:11px; }
.icase-opt {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--card-bd); background: rgba(255,255,255,.02); border-radius: var(--r-lg);
  padding: 16px 18px; color:#fff; font-family: var(--tf-display); font-size:15.5px; font-weight:500; letter-spacing:-0.01em;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.icase-opt:hover { background: rgba(200,241,53,.07); border-color: rgba(200,241,53,.35); transform: translateX(3px); }
.icase-opt .ok { width:30px; height:30px; flex-shrink:0; border-radius:9px; background: rgba(200,241,53,.14); color: var(--tf-lime); font-family: var(--tf-mono); font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; }
.icase-opt .oarrow { margin-left:auto; color: var(--tf-fg-4); transition: color var(--dur-base), transform var(--dur-base); }
.icase-opt .oarrow svg { width:18px; height:18px; stroke-width:2.4; }
.icase-opt:hover .oarrow { color: var(--tf-lime); transform: translateX(3px); }

/* result */
.icase-chosen { font-family: var(--tf-mono); font-size:11px; letter-spacing:.06em; color: var(--tf-fg-3); margin-bottom:16px; }
.icase-chosen strong { color: var(--tf-lime); }
.icase-note { border-left:2px solid var(--tf-lime); background: rgba(200,241,53,.05); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 16px; }
.icase-note-k { font-family: var(--tf-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--tf-lime); margin-bottom:7px; }
.icase-note-b { font-size: 15px; line-height:1.55; color: var(--tf-fg-1); }
.icase-note-b em { font-style:normal; background: rgba(200,241,53,.14); color: var(--tf-lime); padding:1px 5px; border-radius:4px; font-weight:500; }

.icase-clip { display:flex; align-items:center; gap:14px; margin-top:16px; background: rgba(0,0,0,.28); border:1px solid var(--card-bd); border-radius: var(--r-lg); padding: 14px 16px; }
.clip-play.big { width:46px; height:46px; border-radius:100px; background: var(--tf-lime); color:#0A0A0A; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; border:0; box-shadow: var(--shadow-cta); transition: transform var(--dur-base); }
.clip-play.big:hover { transform: scale(1.06); }
.clip-play.big svg { width:18px; height:18px; fill:#0A0A0A; stroke:none; }
.clip-play.big.on { animation: breathe 1.6s var(--ease-out) infinite; }
.icase-clip-body { flex:1; min-width:0; }
.icase-clip .wave { height:26px; }
.icase-clip-meta { margin-top:9px; font-family: var(--tf-mono); font-size:10px; letter-spacing:.04em; color: var(--tf-fg-3); }

.icase-score { display:flex; align-items:center; gap:20px; margin-top:18px; padding:16px 18px; border:1px solid var(--card-bd); border-radius: var(--r-lg); background: var(--card-bg); }
.icase-score-k { font-family: var(--tf-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-fg-3); }
.icase-score-n { font-size:34px; font-weight:800; letter-spacing:-0.03em; color:#fff; line-height:1; margin-top:6px; }
.icase-score-n .up { font-family: var(--tf-mono); font-size:13px; color: var(--tf-lime); margin-left:9px; letter-spacing:.04em; }
.icase-bar { flex:1; height:8px; border-radius:100px; background: rgba(255,255,255,.08); overflow:hidden; }
.icase-bar span { display:block; height:100%; border-radius:100px; background: linear-gradient(90deg, var(--tf-lime-d), var(--tf-lime)); transition: width 1s var(--ease-out); }

.icase-cta { margin-top:20px; padding-top:22px; border-top:1px dashed rgba(255,255,255,.12); display:flex; gap:26px; align-items:center; }
.icase-cta-copy { flex:1; }
.icase-cta-h { font-size:19px; font-weight:800; letter-spacing:-0.02em; color:#fff; line-height:1.2; }
.icase-cta-h strong { color: var(--tf-lime); }
.icase-cta-copy p { margin:8px 0 16px; font-size:14px; line-height:1.55; color: var(--tf-fg-2); }
.icase-cta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.icase-founding { font-family: var(--tf-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--tf-fg-3); }
.icase-qr { flex-shrink:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px; }
.icase-qr .iqr { width:104px; height:104px; border-radius:14px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.icase-qr span { font-family: var(--tf-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--tf-fg-3); line-height:1.4; }
@media (max-width: 720px){ .icase-cta { flex-direction:column; align-items:stretch; } .icase-qr { flex-direction:row; justify-content:center; gap:14px; } .icase-qr .iqr { width:86px; height:86px; } }

/* ============================================================
   HERO MOCK v2 — dimensional 3D phone + layered floating cards
   (overrides the flat phone styles above)
   ============================================================ */
.hero-visual { perspective: 1700px; }
.hero-mock {
  display:block; width:100%; max-width:680px; height:auto; margin:0 auto;
  border-radius: 28px;
  /* feather all four edges so the baked-in dark background melts into the page */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.hero-stage { position: relative; padding: 30px 18px; transform-style: preserve-3d; max-width: 332px; margin: 0 auto; }

.phone {
  width: 286px; border-radius: 46px; background: linear-gradient(150deg,#16181a,#070808);
  padding: 10px; position: relative; z-index: 2;
  transform: rotateY(-17deg) rotateX(5deg) rotateZ(.5deg);
  transform-style: preserve-3d;
  box-shadow:
    0 0 0 2px #000, 0 0 0 4px #2c2e2c, 0 0 0 5px #111,
    -34px 46px 70px -24px rgba(0,0,0,.85);
}
/* lime floor glow under the device */
.phone::after {
  content:''; position:absolute; left:50%; bottom:-46px; width:78%; height:120px;
  transform: translateX(-50%); z-index:-1; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(120,235,90,.5), rgba(200,241,53,.2) 45%, transparent 72%);
  filter: blur(20px); animation: breathe 5.5s var(--ease-out) infinite;
}
.phone-screen {
  background: radial-gradient(120% 80% at 100% 0%, rgba(40,90,45,.5), transparent 55%), #0b130d;
  border-radius: 36px; overflow: hidden; padding: 14px 13px 12px;
  min-height: 540px; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-screen .phone-status { color:#fff; padding: 6px 8px 12px; }

/* in-screen chat/terminal header */
.scr-top { display:flex; align-items:center; gap:10px; padding: 2px 6px 12px; }
.scr-top .back { color: rgba(255,255,255,.6); font-size:20px; line-height:1; }
.scr-title { flex:1; }
.scr-title .t { font-size:14px; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.scr-title .s { font-family: var(--tf-mono); font-size:8.5px; letter-spacing:.08em; color: rgba(255,255,255,.4); margin-top:2px; }
.scr-av { width:26px; height:26px; border-radius:100px; flex-shrink:0; background:linear-gradient(135deg,#6EB9FF,#A855F7); }

/* code terminal */
.term { background: rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:11px 12px; font-family: var(--tf-mono); font-size:9.5px; line-height:1.7; }
.term-ln { display:flex; gap:9px; white-space:nowrap; }
.term-ln .n { color: rgba(255,255,255,.22); width:11px; text-align:right; flex-shrink:0; }
.term-ln .c { color: rgba(255,255,255,.82); }
.cy { color:#C8F135; } .cb { color:#6EB9FF; } .cp { color:#FF6EB4; } .cg { color:rgba(255,255,255,.4); } .cw { color:#fff; }

/* chat below */
.chat { margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.chat-day { font-family: var(--tf-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.32); }
.chat-row { display:flex; gap:8px; align-items:flex-start; }
.chat-ic { width:20px; height:20px; border-radius:6px; flex-shrink:0; background:#fff; display:flex; align-items:center; justify-content:center; }
.chat-ic svg { width:12px; height:12px; }
.chat-b { flex:1; background: rgba(200,241,53,.08); border:1px solid rgba(200,241,53,.16); border-radius:10px; padding:8px 10px; font-size:10.5px; line-height:1.45; color: rgba(255,255,255,.82); }
.chat-b .bt { font-size:9px; font-weight:700; color:#fff; display:block; margin-bottom:2px; }
.chat-input { margin-top:12px; display:flex; align-items:center; gap:9px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:100px; padding:7px 8px; }
.chat-input .ci-av { width:24px; height:24px; border-radius:100px; flex-shrink:0; background:linear-gradient(135deg,#F8CB46,#FF6B35); }
.chat-input .ci-ph { flex:1; font-size:11px; color: rgba(255,255,255,.4); }
.chat-input .ci-mic { width:26px; height:26px; border-radius:100px; background: var(--tf-lime); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.chat-input .ci-mic svg { width:13px; height:13px; stroke:#0a0a0a; fill:none; stroke-width:2; }

/* ─── floats repositioned for the 3D composition ─────────── */
.float { z-index: 6; }
.float-ring { top: 16%; left: -14%; }
.float-mini { top: 6%; right: -14%; display:flex; align-items:center; gap:9px; animation-delay:-1s; }
.float-mini .av { width:30px; height:30px; border-radius:100px; flex-shrink:0; background:linear-gradient(135deg,#6EB9FF,#0C831F); }
.float-mentor { bottom: 24%; left: -17%; animation-delay:-2.4s; width: 196px; }
.float-mentor .mscore { font-family: var(--tf-mono); font-size:11px; color: var(--tf-lime); font-weight:600; align-self:flex-end; }
.float-readiness { top: 34%; right: -7%; animation-delay:-1.5s; }
.float-role { bottom: 4%; right: -12%; animation-delay:-3.5s; }

/* white role card (matches reference) */
.float-role.light { background:#fff; border-color:#fff; width: 178px; box-shadow: 0 26px 56px -18px rgba(0,0,0,.6); }
.float-role.light .role-logos { display:flex; gap:7px; margin-bottom:10px; }
.float-role.light .role-logos i { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.float-role.light .role-logos i svg { width:15px; height:15px; }
.float-role.light .role-n { font-size:16px; font-weight:800; letter-spacing:-0.02em; color:#111; }
.float-role.light .role-sub { font-size:10.5px; color:#5b5b5b; margin-top:3px; }

@media (max-width: 1180px){ .float-ring{left:-6%} .float-mini{right:-6%} .float-mentor{left:-6%} .float-readiness{right:-2%} .float-role{right:-4%} }
@media (max-width: 960px){ .phone { transform:none; } .float { display:none; } }

/* ─── Mentor lead modal ─────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; }
.modal-scrim { position: absolute; inset: 0; background: rgba(2,8,5,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: mScrim .25s var(--ease-out); }
@keyframes mScrim { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  position: relative; width: 100%; max-width: 420px; border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,241,53,.10), transparent 60%),
    var(--tf-forest-1, #0D2318);
  border: 1px solid rgba(200,241,53,.22);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.7);
  padding: 32px 30px 28px; animation: mCard .3s var(--ease-out);
}
@keyframes mCard { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--tf-stroke-2); color: var(--tf-fg-2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-base), color var(--dur-base); }
.modal-x:hover { background: rgba(255,255,255,.1); color: #fff; }
.modal-x svg { width: 17px; height: 17px; stroke-width: 2.2; }
.modal-k { font-family: var(--tf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tf-lime); margin-bottom: 12px; }
.modal-h { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #fff; margin: 0 0 22px; }
.modal-h .it { font-style: italic; font-weight: 300; color: var(--tf-fg-3); }
.mform { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field-l { font-family: var(--tf-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tf-fg-3); }
.field input {
  width: 100%; box-sizing: border-box; font-family: var(--tf-display); font-size: 15px; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid var(--tf-stroke-2); border-radius: var(--r-md);
  padding: 13px 15px; transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}
.field input::placeholder { color: var(--tf-fg-4); }
.field input:focus { outline: none; border-color: var(--tf-lime); background: rgba(200,241,53,.05); box-shadow: 0 0 0 3px rgba(200,241,53,.12); }
.field input:user-invalid { border-color: #FF6B6B; }
.mform-submit { justify-content: center; margin-top: 6px; }
.mform-fine { font-family: var(--tf-mono); font-size: 10px; letter-spacing: .04em; color: var(--tf-fg-3); text-align: center; margin: 12px 0 0; }
.mform-done { text-align: center; padding: 10px 0 6px; animation: mCard .3s var(--ease-out); }
.mform-check { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: rgba(200,241,53,.12); border: 1px solid rgba(200,241,53,.3); display: flex; align-items: center; justify-content: center; }
.mform-check svg { width: 26px; height: 26px; stroke: var(--tf-lime); stroke-width: 2.6; }
@media (max-width: 480px){ .modal-card { padding: 28px 22px 24px; } .modal-h { font-size: 23px; } }

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */

/* Tighter horizontal padding on very small phones */
@media (max-width: 360px) {
  .wrap { padding: 0 18px; }
}

/* Hero: reduce vertical padding and h1 floor size on mobile */
@media (max-width: 720px) {
  .hero { padding-top: 44px; padding-bottom: 56px; }
  .hero h1.display { font-size: clamp(36px, 10.5vw, 104px); }
  .hero .lede { margin-top: 18px; }
  .hero-cta { margin-top: 24px; }
  .hero-note { margin-top: 20px; }
}

/* Store badges: always wrap so they never overflow on narrow viewports */
.store-row { flex-wrap: wrap; }

/* CTA band store row: centre the badges once they wrap */
@media (max-width: 560px) {
  .cta-band .store-row { justify-content: center; }
}

/* Section head lede: remove the 56ch cap on mobile so it fills the column */
@media (max-width: 640px) {
  .section-head .lede { max-width: 100%; }
  .section-head { margin-bottom: 40px; }
}

/* Footer column gap: tighten on mobile */
@media (max-width: 720px) {
  .foot-cols { gap: 36px; }
  .foot-grid { gap: 32px; }
}

/* Score card: shrink the big number and label column on small screens */
@media (max-width: 480px) {
  .score-num { font-size: 42px; }
  .bar-row { grid-template-columns: 76px 1fr 30px; gap: 8px; }
}

/* Proof grid: reduce gap on mobile */
@media (max-width: 640px) {
  .proof-grid { gap: 28px; }
}