/* ============================================================
   PeakFocus — marketing site
   Dark moonlit aesthetic, matched to the app.
   Palette + motifs pulled from the app's theme.js & climb screens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* brand */
  --primary:   #4f7cff;
  --primary-2: #7da0ff;
  --primary-d: #3a62e0;
  --glow:      rgba(79,124,255,0.45);

  /* mountains */
  --hill:      #45b56a;
  --peak:      #5b86ff;
  --summit:    #a878d8;

  /* semantic */
  --danger:    #ff6b6b;
  --warning:   #ff9d4d;
  --success:   #34d399;
  --gold:      #ffcf4a;

  /* type */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'SF Mono', monospace;

  /* radii */
  --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px; --pill: 999px;
}

/* ============================================================
   THEME — dark = night climb (default), light = day climb
   ============================================================ */
:root, :root[data-theme="dark"] {
  --bg:#080d1a; --bg-2:#0a0f1e; --bg-3:#0c1530; --card:#111a30; --card-2:#0e1730;
  --hairline:rgba(124,150,210,0.14); --hairline-2:rgba(124,150,210,0.22);
  --text:#f3f6ff; --text-2:#93a3c6; --text-3:rgba(214,224,250,0.45);
  --shadow:0 24px 60px -24px rgba(0,0,0,0.7);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.8);

  --eyebrow:var(--primary-2);
  --grad:linear-gradient(110deg, var(--primary-2), #c4d2ff 60%, #fff);

  --nav-bg:rgba(8,13,26,0.72); --nav-bg-2:rgba(8,13,26,0.9);
  --store-bg:#ffffff; --store-fg:#0a0f1e; --store-shadow:0 10px 30px -10px rgba(255,255,255,0.25);
  --float-bg:rgba(17,26,48,0.92); --float-border:var(--hairline-2);
  --star-opacity:1;
  --orb-bg:radial-gradient(circle at 38% 36%, #ffffff, #d6e2ff 55%, #aebfe8);
  --orb-shadow:0 0 60px 18px rgba(120,160,255,0.35), 0 0 140px 50px rgba(79,124,255,0.18);

  --hero-sky:
    radial-gradient(120% 80% at 62% 8%, rgba(79,124,255,0.18), transparent 45%),
    radial-gradient(90% 60% at 48% 100%, rgba(79,124,255,0.14), transparent 55%),
    linear-gradient(180deg, #050810 0%, #0a0f1e 42%, #0f1e3a 76%, #1a2e54 100%);
  --finale-sky:
    radial-gradient(80% 60% at 50% 120%, rgba(79,124,255,0.3), transparent 60%),
    linear-gradient(180deg, #0a0f1e, #0f1e3a);

  --ridge-far1:#22356a; --ridge-far2:#16244a;
  --ridge-mid1:#15244a; --ridge-mid2:#0d1830;
  --ridge-m1:#2a3e6e; --ridge-m2:#1a2a52; --ridge-m3:#0a1124;
  --ridge-snow1:#eaf1ff; --ridge-snow2:#9fb6e0;
  --finale-ridge:#16244a; --finale-snow:#eaf1ff;
}

:root[data-theme="light"] {
  --bg:#eef3fb; --bg-2:#ffffff; --bg-3:#e4edf8; --card:#ffffff; --card-2:#f2f6fc;
  --hairline:rgba(40,70,120,0.13); --hairline-2:rgba(40,70,120,0.2);
  --text:#0e1b33; --text-2:#4f6086; --text-3:rgba(20,40,70,0.5);
  --shadow:0 24px 60px -28px rgba(40,70,130,0.3);
  --shadow-lg:0 40px 90px -34px rgba(40,70,130,0.38);

  --eyebrow:#2f55c8;
  --grad:linear-gradient(110deg, #2f55c8, #4f7cff 55%, #6b34d8);

  --nav-bg:rgba(248,251,255,0.78); --nav-bg-2:rgba(248,251,255,0.93);
  --store-bg:#0a0f1e; --store-fg:#ffffff; --store-shadow:0 14px 30px -12px rgba(10,20,50,0.35);
  --float-bg:rgba(255,255,255,0.95); --float-border:rgba(40,70,120,0.16);
  --star-opacity:0;
  --orb-bg:radial-gradient(circle at 40% 38%, #fff6cf, #ffd564 55%, #ffac3a);
  --orb-shadow:0 0 70px 22px rgba(255,193,90,0.55), 0 0 160px 60px rgba(255,175,70,0.3);

  --hero-sky:
    radial-gradient(120% 80% at 64% 4%, rgba(255,212,120,0.5), transparent 40%),
    radial-gradient(100% 70% at 48% 104%, rgba(255,228,175,0.65), transparent 56%),
    linear-gradient(180deg, #4f86d8 0%, #7fb0ee 40%, #c2e1ff 72%, #ffe7b6 100%);
  --finale-sky:
    radial-gradient(80% 60% at 50% 120%, rgba(255,216,132,0.5), transparent 60%),
    linear-gradient(180deg, #7fb0ee, #cfe6ff 68%, #ffe7ba);

  --ridge-far1:#abc3e8; --ridge-far2:#8caad6;
  --ridge-mid1:#8ca8d4; --ridge-mid2:#6f8ec0;
  --ridge-m1:#7e99cc; --ridge-m2:#5f7eb2; --ridge-m3:#41609a;
  --ridge-snow1:#ffffff; --ridge-snow2:#e1eaff;
  --finale-ridge:#7e99cc; --finale-snow:#ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: min(1180px, 92vw); margin: 0 auto; }
.section { padding: clamp(64px, 9vw, 130px) 0; position: relative; }
.section.tight { padding: clamp(44px, 6vw, 80px) 0; }

/* ---- shared bits -------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--eyebrow);
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content:""; width: 26px; height: 1.5px; background: var(--primary); opacity: .7;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }

.display { font-size: clamp(40px, 6.4vw, 78px); letter-spacing: -0.035em; }
.h-sec { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -0.03em; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--text-2); line-height: 1.6; }
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head { max-width: 640px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head .lead { margin-top: 16px; }

/* ---- buttons ------------------------------------------------------------ */
.btn-store {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--store-bg); color: var(--store-fg);
  border-radius: var(--r); padding: 12px 22px 12px 18px;
  font-family: var(--f-body); font-weight: 600;
  border: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--store-shadow);
}
.btn-store:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(255,255,255,0.35); }
.btn-store .apple { flex: none; margin-top: -2px; }
.btn-store .lbl small { display:block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing:.06em; opacity:.7; font-weight:400; }
.btn-store .lbl b { display:block; font-size: 19px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(124,150,210,0.08);
  border: 1px solid var(--hairline-2);
  color: var(--text); border-radius: var(--pill);
  padding: 11px 20px; font-family: var(--f-body); font-weight: 600; font-size: 15px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: rgba(124,150,210,0.14); border-color: var(--primary); }

.meta { font-family: var(--f-mono); font-size: 12px; color: var(--text-3); letter-spacing: .02em; }

/* rating stars */
.rating { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 14px; }
.rating .stars { color: var(--gold); letter-spacing: 2px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled { border-color: var(--hairline); background: var(--nav-bg-2); }
.nav .row { display: flex; align-items: center; gap: 16px; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand .mark { width: 30px; height: 30px; }
.nav .links { display: flex; gap: 28px; margin-left: 26px; }
.nav .links a { color: var(--text-2); font-size: 15px; font-weight: 500; transition: color .15s ease; }
.nav .links a:hover { color: var(--text); }
.nav .spacer { margin-left: auto; }
.nav .btn-store { padding: 9px 16px 9px 14px; }
.nav .btn-store .lbl b { font-size: 16px; }
@media (max-width: 760px){ .nav .links { display:none; } }

/* ============================================================
   HERO — moonlit scene
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-top: clamp(40px, 6vw, 80px); }
.sky {
  position: absolute; inset: 0; z-index: 0;
  background: var(--hero-sky);
}
.stars-layer { position: absolute; inset: 0; z-index: 1; opacity: var(--star-opacity); }
.star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:.25} 50%{opacity:.9} }
.moon {
  position: absolute; top: 9%; left: 64%; width: 76px; height: 76px; z-index: 1;
  border-radius: 50%;
  background: var(--orb-bg);
  box-shadow: var(--orb-shadow);
}
.ridge { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: auto; }

.hero .wrap { position: relative; z-index: 3; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
  padding-bottom: clamp(60px, 9vw, 130px);
}
.hero-copy { max-width: 560px; }
.hero-copy .display { margin-bottom: 22px; }
.hero-copy .lead { margin-bottom: 32px; max-width: 30ch; }
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-meta { display: flex; align-items: center; gap: 18px; margin-top: 20px; flex-wrap: wrap; }

@media (max-width: 880px){
  .hero-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .hero-copy { margin: 0 auto; }
  .hero-copy .lead { margin-left:auto; margin-right:auto; }
  .hero-cta, .hero-meta { justify-content: center; }
  .phone-wrap { margin: 0 auto; }
}

/* ---- phone + climb scene ----------------------------------------------- */
.phone-wrap { display: flex; justify-content: center; position: relative; }
.phone {
  width: 300px; aspect-ratio: 9/19.3; flex: none; position: relative;
  background: linear-gradient(160deg, #1a2440, #0a0f1e);
  border-radius: 46px; padding: 11px;
  box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(124,150,210,0.25), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.phone .notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: #05080f; border-radius: 16px; z-index: 5;
}
.phone .screen {
  position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
  background: linear-gradient(180deg, #0a1428 0%, #0e1c38 60%, #15294a 100%);
}
/* climb scene inside phone */
.scene { position: absolute; inset: 0; }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .timer { position: absolute; top: 64px; left: 0; right: 0; text-align: center; z-index: 4; }
.scene .timer .pct { font-family: var(--f-mono); font-size: 11px; color: var(--text-2); letter-spacing: .04em; }
.scene .timer .clock { font-family: var(--f-display); font-weight: 700; font-size: 46px; letter-spacing: 2px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.scene .timer .sub { font-family: var(--f-mono); font-size: 10px; color: var(--text-2); }
.scene .climber { position: absolute; z-index: 4; transition: none; }
.scene .climber .body { width: 13px; height: 13px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 14px 3px var(--glow); border: 2px solid #cdd9ff; }
.scene .cta-pill {
  position: absolute; bottom: 26px; left: 18px; right: 18px; z-index: 4;
  background: var(--primary); color: #fff; text-align: center;
  border-radius: var(--pill); padding: 13px; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 30px -8px var(--glow);
}
/* floating badge near phone */
.float-badge {
  position: absolute; z-index: 6;
  background: rgba(17,26,48,0.92); border: 1px solid var(--hairline-2);
  border-radius: 16px; padding: 11px 15px; backdrop-filter: blur(8px);
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 11px;
}
.float-badge { background: var(--float-bg); border-color: var(--float-border); }
.float-badge .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; }
.float-badge .txt small { display:block; font-family: var(--f-mono); font-size: 9.5px; color: var(--text-3); letter-spacing:.04em; }
.float-badge .txt b { font-size: 15px; font-family: var(--f-display); }
.float-badge.tl { top: 9%; left: -62px; }
.float-badge.br { bottom: 16%; right: -42px; }
@media (max-width: 520px){ .float-badge.tl{left:-12px} .float-badge.br{right:-12px} }

/* logo strip / trust */
.trust { display:flex; align-items:center; justify-content:center; gap: clamp(20px,5vw,56px); flex-wrap: wrap; opacity:.8; }
.trust .item { display:flex; align-items:center; gap:10px; color: var(--text-2); font-family: var(--f-mono); font-size: 12px; letter-spacing:.04em; }
.trust .num { font-family: var(--f-display); font-weight:700; font-size: 26px; color: var(--text); letter-spacing:-0.02em; }

/* ============================================================
   HOOK — don't slip
   ============================================================ */
.hook { background: linear-gradient(180deg, var(--bg), var(--bg-3)); }
.hook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 820px){ .hook-grid { grid-template-columns: 1fr; gap: 36px; } }
.slip-demo { position: relative; min-height: 320px; display: grid; place-items: center; }
.slip-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow);
}
.slip-banner {
  display: flex; align-items: center; gap: 13px;
  background: rgba(180,40,40,0.16); border: 1px solid rgba(255,80,80,0.32);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 18px;
}
.slip-banner .emo { font-size: 30px; }
.slip-banner b { display:block; color: #ffb3b3; font-family: var(--f-display); }
.slip-banner small { color: #ff9a9a; font-family: var(--f-mono); font-size: 11px; }
.slip-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--hairline); }
.slip-row span { color: var(--text-2); font-size: 14px; }
.slip-row b { font-family: var(--f-mono); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--hairline-2); border-radius: var(--pill);
  padding: 7px 15px; font-size: 14px; color: var(--text-2);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ============================================================
   MOUNTAINS — pick your climb
   ============================================================ */
.mtn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 54px; }
@media (max-width: 820px){ .mtn-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline:auto; } }
.mtn-card {
  position: relative; background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 30px 26px 28px; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mtn-card::before {
  content:""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--mc, var(--primary)); opacity: .9;
}
.mtn-card:hover { transform: translateY(-6px); border-color: var(--mc); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.mtn-card.feature { border-color: var(--mc); box-shadow: 0 0 0 1px var(--mc), 0 30px 70px -30px rgba(91,134,255,.4); }
.mtn-card .tier { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--text-3); }
.mtn-card .pop {
  position: absolute; top: 18px; right: 18px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing:.1em; color: var(--mc); border: 1px solid var(--mc); border-radius: var(--pill); padding: 3px 10px;
}
.mtn-glyph { height: 96px; display: grid; place-items: end center; margin: 14px 0 10px; }
.mtn-card h3 { font-size: 30px; }
.mtn-card .dur { font-family: var(--f-mono); color: var(--text-2); margin-top: 4px; }
.mtn-card .reward { display:flex; align-items:center; justify-content:space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.mtn-card .xp { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--mc); }
.mtn-card .stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 54px; counter-reset: s; }
@media (max-width: 820px){ .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 30px 26px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.step .n {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 17px;
  background: rgba(79,124,255,0.14); color: var(--primary-2); border: 1px solid var(--hairline-2);
  margin-bottom: 20px;
}
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { color: var(--text-2); font-size: 15.5px; }
.step .connector { position: absolute; top: 52px; right: -18px; color: var(--primary); opacity:.5; font-size: 22px; }
@media (max-width: 820px){ .step .connector { display:none; } }

/* ============================================================
   DASHBOARD / STATS
   ============================================================ */
.dash-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
@media (max-width: 880px){ .dash-grid { grid-template-columns: 1fr; gap: 36px; } }
.dash-card {
  background: linear-gradient(170deg, var(--card), var(--card-2));
  border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 26px;
  box-shadow: var(--shadow); position: relative;
}
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.dash-head h4 { font-size: 18px; }
.streak-pill { display:inline-flex; align-items:center; gap:7px; background: rgba(255,157,77,0.14); border:1px solid rgba(255,157,77,0.3); color: var(--warning); border-radius: var(--pill); padding: 5px 13px; font-size: 13px; font-family: var(--f-mono); }
.bars { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; align-items: end; height: 150px; margin-bottom: 22px; }
.bars .bar { background: linear-gradient(180deg, var(--primary), var(--primary-d)); border-radius: 7px 7px 4px 4px; height: var(--h); position: relative; opacity:.55; }
.bars.in .bar { height: var(--h); }
.bars .bar.peak { opacity: 1; box-shadow: 0 0 18px -2px var(--glow); }
.bars .bar span { position:absolute; top:-18px; left:0; right:0; text-align:center; font-family:var(--f-mono); font-size:9px; color: var(--text-3); }
.dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.dash-stat { text-align: center; background: rgba(124,150,210,0.06); border-radius: 14px; padding: 14px 8px; }
.dash-stat .v { font-family: var(--f-display); font-weight: 700; font-size: 26px; }
.dash-stat .v.grade { color: var(--primary); }
.dash-stat .k { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); letter-spacing:.04em; margin-top: 4px; }

/* grade chips row */
.grades { display:flex; gap:10px; margin-top: 26px; }
.grade-badge { width: 46px; height: 46px; border-radius: 50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:20px; border:2px solid; background: rgba(255,255,255,0.02); }

/* big stat band */
.statband { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 760px){ .statband { grid-template-columns: 1fr 1fr; gap: 30px 14px; } }
.bigstat { text-align: center; }
.bigstat .v { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.03em; }
.bigstat .v em { font-style: normal; color: var(--primary); }
.bigstat .k { font-family: var(--f-mono); font-size: 12px; color: var(--text-2); letter-spacing: .06em; margin-top: 8px; text-transform: uppercase; }

/* ============================================================
   MULTIPLAYER
   ============================================================ */
.mp { background: linear-gradient(180deg, var(--bg-3), var(--bg)); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 880px){ .mp-grid { grid-template-columns: 1fr; gap: 36px; } }
.mp-visual {
  position: relative; border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(180deg, #0a1428, #15294a); min-height: 360px; box-shadow: var(--shadow);
}
.mp-visual .ridge2 { position:absolute; inset:0; width:100%; height:100%; }
.mp-climber { position: absolute; display:flex; flex-direction:column; align-items:center; gap:4px; }
.mp-climber .dot2 { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 12px 2px currentColor; }
.mp-climber .nm { font-family: var(--f-mono); font-size: 10px; background: rgba(8,13,26,0.7); padding: 2px 7px; border-radius: 6px; color: var(--text); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 800px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 14px; }
.faq-item { border: 1px solid var(--hairline); border-radius: var(--r); background: var(--card); overflow: hidden; transition: border-color .2s ease; }
.faq-item[open] { border-color: var(--hairline-2); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--f-display); font-weight: 600; font-size: 18px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .pm { width: 24px; height: 24px; flex: none; position: relative; }
.faq-item .pm::before, .faq-item .pm::after { content:""; position: absolute; background: var(--primary); border-radius: 2px; transition: transform .25s ease; }
.faq-item .pm::before { top: 11px; left: 4px; width: 16px; height: 2px; }
.faq-item .pm::after { top: 4px; left: 11px; width: 2px; height: 16px; }
.faq-item[open] .pm::after { transform: rotate(90deg); opacity: 0; }
.faq-item .ans { padding: 0 22px 22px; color: var(--text-2); font-size: 16px; max-width: 64ch; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.finale { position: relative; overflow: hidden; text-align: center; padding-bottom: clamp(180px, 20vw, 260px); }
.finale .sky { background: var(--finale-sky); }
.finale .wrap { position: relative; z-index: 2; }
.finale .display { margin-bottom: 26px; }
.finale .ridge { opacity: .92; height: clamp(170px, 20vw, 250px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-2); border-top: 1px solid var(--hairline); padding: 64px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px){ .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
.footer .brand { margin-bottom: 16px; }
.footer .blurb { color: var(--text-2); font-size: 15px; max-width: 26ch; margin-bottom: 22px; }
.footer h5 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer li a { color: var(--text-2); font-size: 15px; transition: color .15s ease; }
.footer li a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--hairline); font-family: var(--f-mono); font-size: 12px; color: var(--text-3); }

/* ============================================================
   IMAGE SLOTS (drop real screenshots later)
   ============================================================ */
image-slot {
  --is-bg: var(--card-2);
  border: 1px dashed var(--hairline-2);
  color: var(--text-3); font-family: var(--f-mono); font-size: 12px;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* hard fallback — forces the visible end-state with no transition, so content
   can never be trapped at opacity:0 in render-throttled / unpainted contexts */
.reveal.shown { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   THEME PLUMBING — ridge fills, toggle button, smooth swap
   ============================================================ */
body { background: var(--bg); }

/* hero ridge gradient stops follow the theme */
#r-far  stop:nth-child(1){ stop-color: var(--ridge-far1); }
#r-far  stop:nth-child(2){ stop-color: var(--ridge-far2); }
#r-mid  stop:nth-child(1){ stop-color: var(--ridge-mid1); }
#r-mid  stop:nth-child(2){ stop-color: var(--ridge-mid2); }
#r-main stop:nth-child(1){ stop-color: var(--ridge-m1); }
#r-main stop:nth-child(2){ stop-color: var(--ridge-m2); }
#r-main stop:nth-child(3){ stop-color: var(--ridge-m3); }
#r-snow stop:nth-child(1){ stop-color: var(--ridge-snow1); }
#r-snow stop:nth-child(2){ stop-color: var(--ridge-snow2); }
/* finale ridge */
.finale .ridge path:nth-of-type(1){ fill: var(--finale-ridge); }
.finale .ridge path:nth-of-type(2){ fill: var(--finale-snow); }

/* theme toggle */
.theme-toggle {
  width: 42px; height: 42px; flex: none; border-radius: var(--pill);
  border: 1px solid var(--hairline-2); background: rgba(124,150,210,0.10);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.theme-toggle:hover { border-color: var(--primary); transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }