/* ============================================================================
   WELLFY — Marketing site
   Two worlds, one spine: obsidian data-world for gyms, electric paper-world
   for members. Indigo→magenta brand gradient throughout.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand (from app logo + app.css) */
  --indigo: #4F46E5;
  --magenta: #A21CAF;
  --violet: #7C3AED;
  --violet-bright: #9D5FF5;
  --magenta-bright: #E879F9;

  /* Dark world (gyms) */
  --ink-0: #080512;
  --ink-1: #0E0A1C;
  --ink-2: #160F2E;
  --ink-3: #1E1540;
  --line-dark: rgba(255, 255, 255, 0.08);
  --txt-dark-hi: #F4F1FB;
  --txt-dark-mid: rgba(244, 241, 251, 0.66);
  --txt-dark-lo: rgba(244, 241, 251, 0.42);

  /* Light world (members) */
  --paper-0: #F8F7FA;
  --paper-1: #FFFFFF;
  --paper-2: #F1EDF9;
  --line-light: rgba(30, 10, 74, 0.10);
  --txt-light-hi: #17112B;
  --txt-light-mid: rgba(23, 17, 43, 0.68);
  --txt-light-lo: rgba(23, 17, 43, 0.45);

  /* Signal colours */
  --good: #34D399;
  --warn: #FBBF24;
  --drift: #F87171;
  --flame: #FF7A3D;
  --xp: #C4F542;

  --grad-brand: linear-gradient(120deg, var(--indigo), var(--violet) 45%, var(--magenta));
  --grad-brand-soft: linear-gradient(120deg, rgba(79,70,229,.22), rgba(162,28,175,.22));

  /* Match the app — Outfit is the Wellfy brand typeface (loaded in the app's index.html) */
  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --rad-lg: 28px;
  --rad-md: 18px;
  --rad-sm: 12px;

  --container: 1180px;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--violet); color: #fff; }

body.theme-dark { background: var(--ink-1); color: var(--txt-dark-hi); }
body.theme-light { background: var(--paper-0); color: var(--txt-light-hi); }

/* Film-grain overlay — gives every page texture */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Type scale ─────────────────────────────────────────────────────────── */
.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display-xl { font-size: clamp(3rem, 7.4vw, 6.2rem); }
.display-lg { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
.display-md { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.display-sm { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.12; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
.theme-dark .eyebrow { color: var(--violet-bright); }
.theme-light .eyebrow { color: var(--violet); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 58ch; }
.theme-dark .lede { color: var(--txt-dark-mid); }
.theme-light .lede { color: var(--txt-light-mid); }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.theme-dark .grad-text { background: linear-gradient(110deg, #8B83FF, var(--violet-bright) 45%, var(--magenta-bright)); -webkit-background-clip: text; background-clip: text; }

/* ── Layout primitives ──────────────────────────────────────────────────── */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.section-tight { padding: clamp(48px, 7vw, 88px) 0; }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

@media (max-width: 980px) {
  .split-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 16px 30px; border-radius: 999px; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring);
  white-space: nowrap;
}
.btn .arrow { transition: transform 0.3s var(--ease-spring); }
.btn:hover .arrow { transform: translateX(5px); }
.btn:active { transform: scale(0.97); }

.btn-brand {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 8px 28px -8px rgba(124, 58, 237, 0.55);
}
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(124, 58, 237, 0.7); }
.btn-brand::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s ease;
}
.btn-brand:hover::before { transform: translateX(110%); }

.btn-ghost-dark {
  background: rgba(255,255,255,0.06);
  color: var(--txt-dark-hi);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

.btn-ghost-light {
  background: rgba(23,17,43,0.05);
  color: var(--txt-light-hi);
  border: 1px solid var(--line-light);
}
.btn-ghost-light:hover { background: rgba(23,17,43,0.1); transform: translateY(-2px); }

.btn-lg { padding: 19px 38px; font-size: 1.08rem; }

.text-link {
  font-weight: 700;
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.25s var(--ease-spring);
}
.text-link:hover { gap: 13px; }
.theme-dark .text-link { color: var(--violet-bright); }
.theme-light .text-link { color: var(--violet); }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-nav .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.theme-dark .site-nav.scrolled { background: rgba(14,10,28,0.78); backdrop-filter: blur(18px) saturate(150%); border-color: var(--line-dark); }
.theme-light .site-nav.scrolled { background: rgba(248,247,250,0.82); backdrop-filter: blur(18px) saturate(150%); border-color: var(--line-light); }

.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a {
  font-size: 0.95rem; font-weight: 600; opacity: 0.75;
  transition: opacity 0.2s ease;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; border-radius: 2px; background: var(--grad-brand);
}
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .btn { padding: 11px 22px; font-size: 0.92rem; }

.nav-burger {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-burger span {
  width: 22px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-spring), opacity 0.2s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; inset: 76px 0 0 0; z-index: 99;
  padding: 28px 24px;
  flex-direction: column; gap: 6px;
}
.theme-dark .mobile-menu { background: rgba(10,7,20,0.97); }
.theme-light .mobile-menu { background: rgba(248,247,250,0.98); }
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.9rem; padding: 14px 6px;
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  animation: menu-in 0.4s var(--ease-spring) forwards;
}
.theme-light .mobile-menu a { border-color: var(--line-light); }
.mobile-menu a:nth-child(1) { animation-delay: 0.03s; }
.mobile-menu a:nth-child(2) { animation-delay: 0.07s; }
.mobile-menu a:nth-child(3) { animation-delay: 0.11s; }
.mobile-menu a:nth-child(4) { animation-delay: 0.15s; }
.mobile-menu a:nth-child(5) { animation-delay: 0.19s; }
@keyframes menu-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line-dark); padding: 56px 0 40px; }
.theme-light .site-footer { border-color: var(--line-light); }
.footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand img { height: 24px; margin-bottom: 14px; }
.footer-brand p { font-size: 0.9rem; max-width: 30ch; }
.theme-dark .footer-brand p { color: var(--txt-dark-lo); }
.theme-light .footer-brand p { color: var(--txt-light-lo); }
.footer-cols { display: flex; gap: clamp(40px, 6vw, 90px); flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 16px;
}
.theme-dark .footer-col h4 { color: var(--txt-dark-lo); }
.theme-light .footer-col h4 { color: var(--txt-light-lo); }
.footer-col a { display: block; font-size: 0.94rem; font-weight: 500; padding: 5px 0; opacity: 0.75; transition: opacity 0.2s; }
.footer-col a:hover { opacity: 1; }
.footer-base {
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 0.82rem;
}
.theme-light .footer-base { border-color: var(--line-light); }
.theme-dark .footer-base { color: var(--txt-dark-lo); }
.theme-light .footer-base { color: var(--txt-light-lo); }
.footer-pulse { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.74rem; }
.footer-pulse .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: pulse-dot 2.2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ── Reveal-on-scroll ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ============================================================================
   PHONE MOCKUPS — CSS-built product UI; the load-bearing visuals
   ========================================================================== */
.phone {
  width: 310px;
  aspect-ratio: 9 / 19;
  border-radius: 48px;
  padding: 11px;
  background: linear-gradient(160deg, #2a2342, #0b0817 55%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 40px 90px -28px rgba(0,0,0,0.75),
    0 0 120px -30px rgba(124, 58, 237, 0.45);
  position: relative;
  flex-shrink: 0;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--ink-1);
  color: var(--txt-dark-hi);
  display: flex; flex-direction: column;
  position: relative;
  font-size: 12px;
  line-height: 1.4;
}
.phone-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; border-radius: 999px;
  background: #000; z-index: 5;
  border: 1px solid rgba(255,255,255,0.06);
}
.ps-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.ps-body { flex: 1; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

/* mini-UI building blocks */
.ps-card {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 12px;
}
.ps-row { display: flex; align-items: center; gap: 9px; }
.ps-title { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.ps-sub { font-size: 10px; color: var(--txt-dark-lo); }
.ps-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; color: #fff;
  flex-shrink: 0;
}
.ps-pill {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.pill-good { background: rgba(52,211,153,0.14); color: var(--good); }
.pill-warn { background: rgba(251,191,36,0.14); color: var(--warn); }
.pill-drift { background: rgba(248,113,113,0.14); color: var(--drift); }
.pill-brand { background: rgba(157,95,245,0.16); color: var(--violet-bright); }
.pill-xp { background: rgba(196,245,66,0.14); color: var(--xp); }

/* — Gym dashboard phone — */
.ps-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-kpi { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 10px 12px; }
.ps-kpi .num { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.05; letter-spacing: -0.02em; }
.ps-kpi .lbl { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--txt-dark-lo); margin-top: 3px; }
.ps-kpi .delta { font-family: var(--font-mono); font-size: 9px; font-weight: 600; margin-left: 5px; }
.delta-up { color: var(--good); }
.delta-down { color: var(--drift); }

.ps-chart { display: flex; align-items: flex-end; gap: 5px; height: 64px; padding-top: 6px; }
.ps-chart .bar {
  flex: 1; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(to top, rgba(124,58,237,0.35), rgba(157,95,245,0.9));
  animation: bar-grow 1.2s var(--ease-spring) both;
  transform-origin: bottom;
}
.ps-chart .bar.dim { background: rgba(255,255,255,0.1); }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ps-member { padding: 8px 10px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line-dark); }
.ps-member + .ps-member { margin-top: 6px; }
.ps-spark { margin-left: auto; flex-shrink: 0; }

/* — Member feed phone — */
.phone-light .phone-screen { background: var(--paper-0); color: var(--txt-light-hi); }
.phone-light .ps-statusbar { color: rgba(23,17,43,0.8); }
.phone-light .ps-card { background: #fff; border-color: var(--line-light); box-shadow: 0 4px 16px -8px rgba(30,10,74,0.12); }
.phone-light .ps-sub { color: var(--txt-light-lo); }
.phone-light .ps-member { background: #fff; border-color: var(--line-light); }

.ps-stories { display: flex; gap: 8px; padding: 2px 2px 4px; }
.ps-story {
  width: 44px; height: 44px; border-radius: 50%;
  padding: 2.5px;
  background: var(--grad-brand);
  flex-shrink: 0;
}
.ps-story .inner {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--paper-0);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #fff;
}
.ps-streak-banner {
  background: linear-gradient(110deg, #FF7A3D, #F43F5E);
  border-radius: 16px; padding: 12px 14px; color: #fff;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 24px -10px rgba(244,63,94,0.5);
}
.ps-streak-banner .flame { font-size: 22px; animation: flame-bob 1.6s ease-in-out infinite; }
@keyframes flame-bob { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.08); } }
.ps-streak-banner .big { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; }
.ps-streak-banner .small { font-size: 9.5px; opacity: 0.85; }

.ps-xpbar { height: 7px; border-radius: 99px; background: rgba(124,58,237,0.15); overflow: hidden; margin-top: 7px; }
.ps-xpbar .fill {
  height: 100%; width: 72%;
  border-radius: 99px;
  background: var(--grad-brand);
  animation: xp-fill 1.6s var(--ease-spring) both;
}
@keyframes xp-fill { from { width: 8%; } }

.ps-reactions { display: flex; gap: 5px; margin-top: 9px; }
.ps-react {
  font-size: 10px; padding: 4px 9px; border-radius: 999px;
  background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.14);
  font-weight: 600;
}

.ps-league-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.ps-league-row .rank { font-family: var(--font-mono); font-size: 9px; width: 16px; color: var(--txt-light-lo); }
.ps-league-row.me { background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.25); }
.ps-league-row .xp { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--violet); }
.ps-promote-line {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 8px; color: var(--good);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 4px 0;
}
.ps-promote-line::before, .ps-promote-line::after { content: ""; flex: 1; height: 1px; background: rgba(52,211,153,0.4); }

/* Floating chips around phones */
.float-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  font-weight: 700; font-size: 0.86rem;
  white-space: nowrap;
  animation: chip-float 5s ease-in-out infinite;
  z-index: 6;
}
.float-chip.dark {
  background: rgba(22,15,46,0.85); border: 1px solid rgba(157,95,245,0.35);
  color: var(--txt-dark-hi); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
.float-chip.light {
  background: rgba(255,255,255,0.92); border: 1px solid var(--line-light);
  color: var(--txt-light-hi);
  box-shadow: 0 18px 40px -16px rgba(30,10,74,0.25);
}
.float-chip .mono { font-family: var(--font-mono); font-size: 0.78rem; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-chip:nth-of-type(2n) { animation-delay: -2.4s; }
.float-chip:nth-of-type(3n) { animation-duration: 6s; }

.phone-stage { position: relative; display: flex; justify-content: center; }
.phone-stage .glow {
  position: absolute; inset: 10% -10%;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.32), transparent 65%);
  filter: blur(30px);
  z-index: 0;
}
.phone-stage .phone { z-index: 2; }
.phone-tilt-l { transform: rotate(-5deg); }
.phone-tilt-r { transform: rotate(5deg); }

/* ── App-accurate mini-UI pieces (mirror the real Blazor components) ─────── */

/* Section caption — uppercase tracked grey, used across the app */
.ps-caption {
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--txt-dark-lo); margin-bottom: 7px;
}
.phone-light .ps-caption { color: var(--txt-light-lo); }

/* Feed app-bar tabs: "My Feed" / "Explore" */
.ps-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line-light); margin: 2px 0 2px; }
.phone .ps-tabs { border-color: var(--line-dark); }
.ps-tab { font-size: 11px; font-weight: 600; padding-bottom: 7px; color: var(--txt-dark-lo); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.phone-light .ps-tab { color: var(--txt-light-lo); }
.ps-tab.on { color: var(--violet-bright); border-color: var(--violet-bright); }
.phone-light .ps-tab.on { color: var(--violet); border-color: var(--violet); }

/* Workout achievement card — 4-cell stat grid (DurationMinutes/min, exer, badges, PBs) */
.ps-wkt-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; }
.ps-wkt-head .xp { margin-left: auto; color: var(--violet-bright); font-weight: 700; }
.phone-light .ps-wkt-head .xp { color: var(--violet); }
.ps-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }
.ps-stat-cell {
  background: var(--ink-3); border-radius: 9px; padding: 7px 4px; text-align: center;
}
.phone-light .ps-stat-cell { background: var(--paper-2); }
.ps-stat-cell .v { font-size: 12px; font-weight: 700; line-height: 1; }
.ps-stat-cell .k { font-family: var(--font-mono); font-size: 7px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-dark-lo); margin-top: 4px; }
.phone-light .ps-stat-cell .k { color: var(--txt-light-lo); }
.ps-wr {
  margin-top: 8px; font-size: 9px; font-weight: 700;
  color: var(--violet-bright);
}
.phone-light .ps-wr { color: var(--violet); }

/* League tier emblem + row (Bronze→Apex, "Div N", multiplier ×) */
.ps-tier-emblem {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}
.tier-gold   { color: #fbbf24; background: radial-gradient(circle, rgba(251,191,36,0.18), transparent 70%); box-shadow: inset 0 0 0 1px rgba(251,191,36,0.4); }
.tier-silver { color: #c4c4c4; background: radial-gradient(circle, rgba(196,196,196,0.16), transparent 70%); box-shadow: inset 0 0 0 1px rgba(196,196,196,0.35); }
.tier-emerald{ color: #34d399; background: radial-gradient(circle, rgba(52,211,153,0.16), transparent 70%); box-shadow: inset 0 0 0 1px rgba(52,211,153,0.4); }
.ps-mult { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: #fbbf24; display: flex; align-items: center; gap: 4px; }

/* Standings rows ("12,450 XP", promotion/relegation zone borders) */
.ps-rank { font-family: var(--font-mono); font-size: 9px; width: 14px; color: var(--txt-dark-lo); text-align: center; }
.phone-light .ps-rank { color: var(--txt-light-lo); }
.ps-rank.medal-1 { color: #9D5FF5; } .ps-rank.medal-2 { color: #06B6D4; } .ps-rank.medal-3 { color: #34D399; }
.ps-zone-promo { border-left: 2px solid #34D399; background: linear-gradient(90deg, rgba(52,211,153,0.08), transparent); }
.ps-zone-me { border-left: 2px solid var(--violet); background: rgba(124,58,237,0.1); }

/* 3-column PlayerIdentityWidget: streak | level | league */
.ps-identity { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ps-identity .col { padding: 0 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.ps-identity .col + .col::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: rgba(255,255,255,0.1); }
.phone-light .ps-identity .col + .col::before { background: rgba(23,17,43,0.08); }
.ps-identity .big { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
.ps-identity .lbl { font-size: 8px; color: var(--txt-dark-lo); font-weight: 600; }
.phone-light .ps-identity .lbl { color: var(--txt-light-lo); }
.ps-identity .flame { color: var(--flame); font-size: 16px; }

/* Rating stars (member sentiment / claim banner) */
.ps-stars { color: #fbbf24; font-size: 11px; letter-spacing: 1px; }
.ps-stars .off { color: rgba(251,191,36,0.25); }

/* KPI tile accent for "At risk" (amber, triangle-exclamation) */
.ps-kpi.warn .num { color: var(--warn); }

/* ── Workout summary / XP reveal (dark celebration screen) ───────────────── */
.ps-eyebrow { font-family: var(--font-mono); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--txt-dark-lo); }
.ps-ws-hero {
  border-radius: 16px; padding: 13px 14px; color: #fff;
  background: linear-gradient(150deg, #4F46E5, #A21CAF);
  position: relative; overflow: hidden;
  box-shadow: 0 12px 30px -14px rgba(124,58,237,0.6);
}
.ps-ws-hero .badge { font-family: var(--font-mono); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.92; }
.ps-ws-hero .name { font-weight: 800; font-size: 15px; margin-top: 5px; letter-spacing: -0.01em; }
.ps-ws-hero .meta { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; font-weight: 700; }
.ps-ws-hero .meta .flm { color: #FDBA74; }

.ps-xp-reveal {
  background: var(--ink-2); border: 1px solid rgba(157,95,245,0.28);
  border-radius: 16px; padding: 15px; text-align: center; position: relative; overflow: hidden;
}
.ps-xp-reveal::before { content: ""; position: absolute; inset: -50% 0 auto 0; height: 130%; background: radial-gradient(ellipse at 50% 0%, rgba(157,95,245,0.4), transparent 62%); }
.ps-xp-reveal > * { position: relative; }
.ps-xp-reveal .lbl { font-family: var(--font-mono); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--txt-dark-lo); }
.ps-xp-reveal .big {
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -2px; margin-top: 4px;
  background: linear-gradient(110deg, #9D5FF5, #EC4899); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-xp-chips { display: flex; gap: 5px; justify-content: center; margin-top: 11px; flex-wrap: wrap; }
.ps-xp-chip { font-size: 9px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.chip-streak { background: rgba(249,115,22,0.16); color: #F97316; }
.chip-league { background: rgba(6,182,212,0.16); color: #06B6D4; }
.chip-wr { background: rgba(157,95,245,0.18); color: var(--violet-bright); }

.ps-level-block { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 12px; }
.ps-level-block .top { display: flex; align-items: center; gap: 9px; }
.ps-level-emblem { width: 32px; height: 32px; border-radius: 10px; background: var(--ink-3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0; }
.ps-level-block .tier { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fbbf24; }
.ps-level-block .lv { font-size: 12px; font-weight: 600; color: var(--txt-dark-mid); }

.ps-streak-block { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 12px 8px; text-align: center; }
.ps-streak-block .flames { font-size: 15px; line-height: 1; }
.ps-streak-block .n { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -1px; margin-top: 4px; }
.ps-streak-block .l { font-family: var(--font-mono); font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt-dark-lo); margin-top: 4px; }

/* ── Workout player (live session) ───────────────────────────────────────── */
.ps-timer { display: flex; justify-content: center; padding: 4px 0 2px; }
.ps-timer-ring {
  width: 100px; height: 100px; border-radius: 50%; position: relative;
  background: conic-gradient(from -90deg, #9D5FF5 0 60%, #34D399 60% 63%, var(--ink-3) 63% 100%);
  display: flex; align-items: center; justify-content: center;
}
.ps-timer-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--ink-1); }
.ps-timer-ring .inner { position: relative; z-index: 2; text-align: center; }
.ps-timer-ring .t { font-weight: 700; font-size: 22px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ps-timer-ring .d { font-family: var(--font-mono); font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--txt-dark-lo); margin-top: 1px; }

.ps-chips3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ps-chip3 { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 12px; padding: 8px 5px; text-align: center; }
.ps-chip3.hl { border-color: rgba(157,95,245,0.4); }
.ps-chip3 .ic { font-size: 11px; color: var(--txt-dark-lo); }
.ps-chip3.hl .ic { color: var(--violet-bright); }
.ps-chip3 .v { font-size: 12px; font-weight: 700; margin-top: 3px; }
.ps-chip3 .k { font-family: var(--font-mono); font-size: 7px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-dark-lo); margin-top: 2px; }

.ps-set-head, .ps-set-row { display: grid; grid-template-columns: 22px 1fr 1fr 28px; gap: 6px; align-items: center; }
.ps-set-head { font-family: var(--font-mono); font-size: 7px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-dark-lo); padding: 8px 2px 4px; text-align: center; }
.ps-set-head span:first-child { visibility: hidden; }
.ps-set-row { margin-top: 5px; }
.ps-set-row.done { opacity: 0.5; }
.ps-set-badge { width: 22px; height: 22px; border-radius: 7px; background: var(--ink-1); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--txt-dark-lo); }
.ps-set-badge.done { background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.3); color: var(--violet-bright); }
.ps-set-input { background: var(--ink-1); border: 1px solid var(--line-dark); border-radius: 7px; padding: 5px 4px; text-align: center; font-size: 11px; font-weight: 600; }
.ps-set-check { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line-dark); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--txt-dark-lo); }
.ps-set-check.done { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 0 10px rgba(124,58,237,0.4); }

/* Brand "Start Workout" / "Finish" CTA inside a phone */
.ps-cta { background: var(--grad-brand); color: #fff; text-align: center; border-radius: 10px; padding: 9px; font-size: 11px; font-weight: 700; }

/* ============================================================================
   HOMEPAGE — the split
   ========================================================================== */
.home-body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.home-top {
  text-align: center;
  padding: 26px 20px 18px;
  position: relative; z-index: 10;
  background: var(--ink-0);
  border-bottom: 1px solid var(--line-dark);
}
.home-top .lockup { height: 30px; margin: 0 auto 14px; }
.home-top h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  letter-spacing: -0.02em; color: var(--txt-dark-hi);
}
.home-top p { font-size: 0.92rem; color: var(--txt-dark-lo); margin-top: 4px; }

.home-split { flex: 1; display: flex; min-height: 0; }
.home-half {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  text-align: center;
  /* Anchor copy to the top so the headline/CTA is never clipped under the top bar;
     the phone is absolutely positioned and peeks up from the bottom. */
  padding: clamp(36px, 5vh, 64px) 36px 0;
  overflow: hidden;
  transition: flex 0.65s var(--ease-spring);
  cursor: pointer;
}
@media (min-width: 901px) {
  .home-split:has(.home-half:hover) .home-half:hover { flex: 1.35; }
}

.home-half .half-inner {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  max-width: 460px;
  transition: transform 0.6s var(--ease-spring);
}
.home-half:hover .half-inner { transform: translateY(-6px); }

.half-gyms { background: var(--ink-1); color: var(--txt-dark-hi); }
.half-gyms::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(157,95,245,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,95,245,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
}
.half-gyms::after {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(circle at 30% 80%, rgba(79,70,229,0.3), transparent 50%);
  opacity: 0.8; transition: opacity 0.5s ease;
}
.half-gyms:hover::after { opacity: 1; }

.half-members { background: var(--paper-0); color: var(--txt-light-hi); }
.half-members::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 70% 25%, rgba(232,121,249,0.3), transparent 45%),
    radial-gradient(circle at 25% 75%, rgba(124,58,237,0.22), transparent 45%);
  animation: blob-drift 14s ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4%, -4%) scale(1.08); }
}

.home-half .half-kicker {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.24em;
  margin-bottom: 18px;
}
.half-gyms .half-kicker { color: var(--violet-bright); }
.half-members .half-kicker { color: var(--magenta); }

.home-half h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  letter-spacing: -0.03em; line-height: 0.95;
  margin-bottom: 16px;
}
.home-half .half-sub { max-width: 38ch; font-size: clamp(0.95rem, 1.3vw, 1.12rem); margin-bottom: 28px; }
.half-gyms .half-sub { color: var(--txt-dark-mid); }
.half-members .half-sub { color: var(--txt-light-mid); }

.home-half .half-phone {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%) translateY(24%) scale(0.92);
  transition: transform 0.65s var(--ease-spring);
  z-index: 3;
  pointer-events: none;
}
.home-half:hover .half-phone { transform: translateX(-50%) translateY(14%) scale(0.97) rotate(-2deg); }
.half-members:hover .half-phone { transform: translateX(-50%) translateY(14%) scale(0.97) rotate(2deg); }
.home-half .half-phone .phone { width: 270px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6); }

/* Hover-activated particles per half — fade in on hover (the canvas only animates
   while hovered; see particles.js data-particles-hover). Sits above the bg, below content. */
.home-half .hero-particles { z-index: 1; opacity: 0; transition: opacity 0.55s ease; }
.home-half:hover .hero-particles { opacity: 1; }

.home-footer {
  position: relative; z-index: 10;
  background: var(--ink-0);
  border-top: 1px solid var(--line-dark);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 0.78rem; color: var(--txt-dark-lo);
}
.home-footer nav { display: flex; gap: 20px; }
.home-footer a { transition: color 0.2s; }
.home-footer a:hover { color: var(--txt-dark-hi); }

@media (max-width: 900px) {
  .home-body { height: auto; overflow: visible; }
  .home-split { flex-direction: column; }
  .home-half {
    min-height: auto;
    padding: 56px 28px 56px;   /* bottom padding gives the phone room */
    overflow: visible;          /* phone is in flow now, don't clip it */
  }
  .home-half .half-inner { max-width: none; }
  /* On mobile the phone flows BELOW the copy/CTA (not absolute), so it can never
     overlap the button. Override the hover transforms too (touch can trigger :hover). */
  .home-half .half-phone,
  .home-half:hover .half-phone,
  .half-members:hover .half-phone {
    position: static;
    transform: none;
    margin-top: 40px;
    pointer-events: auto;
  }
  .home-half .half-phone .phone { width: min(250px, 74vw); }
}

/* ============================================================================
   GYM PAGE — obsidian, data-dense
   ========================================================================== */
.gym-hero {
  padding: 160px 0 60px;
  position: relative;
  overflow: hidden;
}
/* Particle canvas — sits above the grid/glow pseudo-elements, below the content. */
.hero-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.gym-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(157,95,245,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,95,245,0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 20%, transparent 80%);
}
.gym-hero::after {
  content: ""; position: absolute; top: -300px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(124,58,237,0.28), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.gym-hero .container { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(157,95,245,0.1);
  border: 1px solid rgba(157,95,245,0.3);
  color: var(--violet-bright);
  margin-bottom: 28px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-bright); animation: pulse-dot 2.2s infinite; }

.gym-hero h1 { max-width: 12ch; }
.gym-hero h1 .drift-word {
  position: relative; display: inline-block;
  background: linear-gradient(110deg, #8B83FF, var(--magenta-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gym-hero .lede { margin: 28px 0 36px; }
.hero-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-aside-link { font-size: 0.92rem; color: var(--txt-dark-lo); }
.hero-aside-link a { color: var(--violet-bright); font-weight: 700; }

/* Hero dashboard mockup */
.dash-stage {
  margin-top: 76px;
  position: relative;
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: flex-start;
  perspective: 1400px;
}
.dash-panel {
  background: linear-gradient(165deg, rgba(30,21,64,0.85), rgba(14,10,28,0.95));
  border: 1px solid rgba(157,95,245,0.22);
  border-radius: var(--rad-lg);
  padding: 26px;
  backdrop-filter: blur(14px);
  box-shadow: 0 50px 110px -40px rgba(0,0,0,0.8), 0 0 90px -40px rgba(124,58,237,0.5);
  transform: rotateX(4deg);
  transform-style: preserve-3d;
}
.dash-main { flex: 0 1 620px; }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dash-head .t { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.dash-head .live {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; color: var(--good);
}
.dash-head .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse-dot 2s infinite; }

.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: 16px; padding: 16px 18px;
}
.dash-kpi .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; line-height: 1; }
.dash-kpi .lbl { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--txt-dark-lo); margin-top: 8px; }
.dash-kpi .delta { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; margin-left: 8px; }

.dash-chart-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: 16px; padding: 18px;
}
.dash-chart-card .lbl { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--txt-dark-lo); margin-bottom: 14px; display: flex; justify-content: space-between; }
.dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.dash-bars .bar {
  flex: 1; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top, rgba(124,58,237,0.3), rgba(157,95,245,0.95));
  transform-origin: bottom;
  animation: bar-grow 1.1s var(--ease-spring) both;
}
.dash-bars .bar.warn { background: linear-gradient(to top, rgba(251,191,36,0.25), rgba(251,191,36,0.85)); }
.dash-bars .bar:nth-child(2) { animation-delay: 0.06s; } .dash-bars .bar:nth-child(3) { animation-delay: 0.12s; }
.dash-bars .bar:nth-child(4) { animation-delay: 0.18s; } .dash-bars .bar:nth-child(5) { animation-delay: 0.24s; }
.dash-bars .bar:nth-child(6) { animation-delay: 0.3s; } .dash-bars .bar:nth-child(7) { animation-delay: 0.36s; }
.dash-bars .bar:nth-child(8) { animation-delay: 0.42s; } .dash-bars .bar:nth-child(9) { animation-delay: 0.48s; }
.dash-bars .bar:nth-child(10) { animation-delay: 0.54s; } .dash-bars .bar:nth-child(11) { animation-delay: 0.6s; }
.dash-bars .bar:nth-child(12) { animation-delay: 0.66s; }

.dash-side { flex: 0 1 330px; display: flex; flex-direction: column; gap: 14px; transform: rotateX(4deg) translateZ(30px); }
.drift-card {
  background: linear-gradient(165deg, rgba(30,21,64,0.9), rgba(14,10,28,0.96));
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 20px; padding: 20px;
  box-shadow: 0 40px 90px -36px rgba(0,0,0,0.8);
}
.drift-card .head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--drift);
  margin-bottom: 14px;
}
.drift-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-dark);
}
.drift-row + .drift-row { margin-top: 8px; }
.drift-row .name { font-weight: 700; font-size: 0.88rem; }
.drift-row .meta { font-size: 0.72rem; color: var(--txt-dark-lo); }
.drift-row .ps-pill { margin-left: auto; font-size: 0.62rem; }

@media (max-width: 980px) {
  .dash-stage { flex-direction: column; align-items: stretch; }
  .dash-main, .dash-side { flex: 1; transform: none; }
  .dash-panel { transform: none; }
}

/* Problem section */
.problem-cards .card-num {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--violet-bright); letter-spacing: 0.18em;
  margin-bottom: 18px; display: block;
}
.dark-card {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--rad-md);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-spring), border-color 0.4s ease;
}
.dark-card:hover { transform: translateY(-6px); border-color: rgba(157,95,245,0.35); }
.dark-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,95,245,0.6), transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
.dark-card:hover::before { opacity: 1; }
.dark-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.dark-card p { color: var(--txt-dark-mid); font-size: 0.98rem; }

/* "What Wellfy shows you" tiles */
.show-tile { display: flex; flex-direction: column; gap: 16px; }
.show-tile .viz {
  height: 150px; border-radius: var(--rad-md);
  background: var(--ink-2); border: 1px solid var(--line-dark);
  padding: 18px; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; position: relative;
}
.show-tile h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; }
.show-tile p { font-size: 0.92rem; color: var(--txt-dark-mid); }

.viz-donut { display: flex; align-items: center; gap: 18px; justify-content: center; height: 100%; }
.viz-donut .ring { width: 86px; height: 86px; border-radius: 50%;
  background: conic-gradient(var(--good) 0 72%, var(--warn) 72% 88%, var(--drift) 88% 100%);
  display: flex; align-items: center; justify-content: center;
}
.viz-donut .ring::after { content: "72%"; width: 62px; height: 62px; border-radius: 50%; background: var(--ink-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; }
.viz-legend { font-family: var(--font-mono); font-size: 0.62rem; display: flex; flex-direction: column; gap: 6px; color: var(--txt-dark-mid); }
.viz-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }

.viz-lines { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.viz-lines .bar { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, rgba(124,58,237,0.25), rgba(157,95,245,0.9)); transform-origin: bottom; animation: bar-grow 1.2s var(--ease-spring) both; }

.viz-streak { display: flex; gap: 5px; align-items: center; height: 100%; flex-wrap: wrap; align-content: center; }
.viz-streak i {
  width: 17px; height: 17px; border-radius: 5px;
  background: rgba(157,95,245,0.16);
}
.viz-streak i.on { background: var(--violet); box-shadow: 0 0 12px rgba(124,58,237,0.6); }
.viz-streak i.hot { background: var(--flame); box-shadow: 0 0 12px rgba(255,122,61,0.7); }

/* Mobile-first section */
.mobile-first { position: relative; overflow: hidden; }
.mobile-first::before {
  content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.2), transparent 65%);
  filter: blur(30px);
}
.check-list { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.02rem; color: var(--txt-dark-mid); }
.check-list .tick {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px;
  background: rgba(52,211,153,0.12); color: var(--good);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; margin-top: 2px;
}
.theme-light .check-list li { color: var(--txt-light-mid); }

/* Isn't strip */
.isnt-strip {
  border-block: 1px solid var(--line-dark);
  background: linear-gradient(110deg, rgba(79,70,229,0.07), rgba(162,28,175,0.07));
}
.isnt-strip .inner { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; justify-content: center; padding: 34px 0; }
.isnt-item { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.45rem); letter-spacing: -0.01em; color: var(--txt-dark-lo); display: flex; align-items: center; gap: 12px; }
.isnt-item .x { color: var(--drift); font-size: 0.9em; }
.isnt-item.is { color: var(--txt-dark-hi); }
.isnt-item.is .x { color: var(--good); }

/* Money section */
.money-panel {
  background: linear-gradient(150deg, rgba(79,70,229,0.16), rgba(162,28,175,0.14));
  border: 1px solid rgba(157,95,245,0.3);
  border-radius: var(--rad-lg);
  padding: clamp(36px, 5vw, 64px);
  position: relative; overflow: hidden;
}
.money-panel::before {
  content: "£0";
  position: absolute; right: -30px; bottom: -70px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(10rem, 22vw, 19rem); line-height: 1;
  color: rgba(157,95,245,0.09);
  pointer-events: none;
}
.money-panel .free-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--good);
  background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 26px;
}
.money-panel p { max-width: 62ch; color: var(--txt-dark-mid); font-size: 1.05rem; }
.money-panel p + p { margin-top: 18px; }
.money-panel p strong { color: var(--txt-dark-hi); }
.pro-note {
  margin-top: 30px; padding: 20px 24px;
  border-left: 3px solid var(--violet);
  background: rgba(14,10,28,0.5);
  border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
  font-size: 0.95rem; color: var(--txt-dark-mid);
}

/* Members proof strip (on gym page) */
.proof-phones { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.proof-phones .phone { width: 215px; border-radius: 36px; padding: 8px; }
.proof-phones .phone-screen { border-radius: 29px; font-size: 10.5px; }

/* Retention calculator */
.calc-panel {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--rad-lg);
  padding: clamp(30px, 4.5vw, 52px);
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 880px) { .calc-panel { grid-template-columns: 1fr; } }
.calc-field { margin-bottom: 28px; }
.calc-field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--txt-dark-lo); margin-bottom: 12px;
}
.calc-field label output { font-size: 1rem; color: var(--violet-bright); font-weight: 600; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 99px;
  background: rgba(157,95,245,0.18);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-brand);
  border: 3px solid var(--ink-1);
  box-shadow: 0 0 0 1px rgba(157,95,245,0.5), 0 4px 14px rgba(124,58,237,0.5);
  transition: transform 0.2s var(--ease-spring);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink-1);
  background: var(--violet);
}
.calc-result { text-align: center; }
.calc-result .lbl { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--txt-dark-lo); margin-bottom: 14px; }
.calc-result .big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(110deg, #8B83FF, var(--magenta-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.calc-result .note { margin-top: 16px; font-size: 0.84rem; color: var(--txt-dark-lo); max-width: 32ch; margin-inline: auto; }

/* Trust */
.founder-card {
  display: flex; align-items: center; gap: 24px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--rad-md);
  padding: 28px 32px;
  max-width: 620px;
  transition: transform 0.4s var(--ease-spring), border-color 0.3s;
}
.founder-card:hover { transform: translateY(-4px); border-color: rgba(157,95,245,0.4); }
.founder-card .face {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 10px 28px -10px rgba(124,58,237,0.6);
}
.founder-card .who { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.founder-card .role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-bright); margin: 4px 0 8px; }
.founder-card .bio { font-size: 0.92rem; color: var(--txt-dark-mid); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-shell {
  border-radius: var(--rad-lg);
  padding: clamp(32px, 5vw, 60px);
  position: relative; overflow: hidden;
}
.theme-dark .form-shell {
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  border: 1px solid rgba(157,95,245,0.25);
  box-shadow: 0 60px 130px -60px rgba(124,58,237,0.45);
}
.theme-light .form-shell {
  background: #fff;
  border: 1px solid var(--line-light);
  box-shadow: 0 50px 110px -50px rgba(30,10,74,0.3);
}
.form-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-brand);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 9px;
}
.theme-dark .field label { color: var(--txt-dark-lo); }
.theme-light .field label { color: var(--txt-light-lo); }
.field label .req { color: var(--magenta-bright); }
.field input, .field select {
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 1rem; font-weight: 500;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.theme-dark .field input, .theme-dark .field select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-dark);
  color: var(--txt-dark-hi);
}
.theme-dark .field select option { background: var(--ink-2); }
.theme-light .field input, .theme-light .field select {
  background: var(--paper-0);
  border: 1px solid var(--line-light);
  color: var(--txt-light-hi);
}
.field input:focus, .field select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.18);
}
.field input::placeholder { opacity: 0.45; }
.field.invalid input, .field.invalid select { border-color: var(--drift); box-shadow: 0 0 0 4px rgba(248,113,113,0.14); }

.form-success {
  display: none;
  text-align: center;
  padding: clamp(20px, 4vw, 40px) 10px;
}
.form-success.show { display: block; animation: success-in 0.6s var(--ease-spring); }
@keyframes success-in { from { opacity: 0; transform: scale(0.94) translateY(14px); } to { opacity: 1; transform: none; } }
.form-success .check-ring {
  width: 84px; height: 84px; margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
  box-shadow: 0 18px 50px -14px rgba(124,58,237,0.65);
  animation: chip-float 4s ease-in-out infinite;
}
.form-success h3 { font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 14px; }
.form-success p { max-width: 46ch; margin: 0 auto 26px; }
.theme-dark .form-success p { color: var(--txt-dark-mid); }
.theme-light .form-success p { color: var(--txt-light-mid); }

/* ============================================================================
   MEMBER PAGE — bright, electric, alive
   ========================================================================== */
.member-hero {
  padding: 150px 0 0;
  position: relative;
  overflow: hidden;
}
.member-hero::before {
  content: ""; position: absolute; inset: -10% -20%;
  background:
    radial-gradient(circle at 80% 12%, rgba(232,121,249,0.34), transparent 38%),
    radial-gradient(circle at 12% 50%, rgba(124,58,237,0.26), transparent 42%),
    radial-gradient(circle at 60% 95%, rgba(255,122,61,0.2), transparent 40%);
  animation: blob-drift 16s ease-in-out infinite alternate;
}
.member-hero .container { position: relative; z-index: 2; }
.member-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 980px) { .member-hero-grid { grid-template-columns: 1fr; } }

.member-hero h1 { font-weight: 700; }
.member-hero h1 em {
  font-style: normal;
  background: linear-gradient(110deg, var(--violet), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.member-hero .lede { margin: 26px 0 34px; }

.free-ribbon {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 0.85rem;
  padding: 9px 18px; border-radius: 999px;
  background: var(--txt-light-hi); color: #fff;
  margin-bottom: 26px;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 30px -10px rgba(23,17,43,0.4);
}
.free-ribbon .spark { color: var(--xp); }

/* Pillars */
.pillar-card {
  border-radius: var(--rad-md);
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line-light);
  box-shadow: 0 18px 44px -24px rgba(30,10,74,0.18);
  position: relative; overflow: hidden;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-spring);
}
.pillar-card:hover { transform: translateY(-8px) rotate(-0.5deg); box-shadow: 0 30px 60px -24px rgba(30,10,74,0.3); }
.pillar-card .icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 20px;
  transition: transform 0.45s var(--ease-spring);
}
.pillar-card:hover .icon { transform: scale(1.12) rotate(-6deg); }
.pillar-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 10px; }
.pillar-card p { font-size: 0.94rem; color: var(--txt-light-mid); }
.icon-flame { background: linear-gradient(135deg, #FFE8D9, #FFD0BC); }
.icon-league { background: linear-gradient(135deg, #EDE5FF, #DCCEFF); }
.icon-bolt { background: linear-gradient(135deg, #FDE7FB, #F8CDF4); }
.icon-friends { background: linear-gradient(135deg, #E2F8EC, #C8F0DC); }
.pillar-card .tag {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-light-lo);
}

/* Session loop */
.loop-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: loop; position: relative; }
@media (max-width: 880px) { .loop-steps { grid-template-columns: 1fr; } }
.loop-step {
  background: #fff; border: 1px solid var(--line-light);
  border-radius: var(--rad-md); padding: 30px 26px;
  position: relative;
  box-shadow: 0 18px 44px -26px rgba(30,10,74,0.16);
}
.loop-step::before {
  counter-increment: loop;
  content: "0" counter(loop);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--violet);
  display: block; margin-bottom: 16px;
}
.loop-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; margin-bottom: 10px; }
.loop-step p { font-size: 0.93rem; color: var(--txt-light-mid); }
.loop-step .demo { margin-top: 20px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line-light); padding: 14px; font-size: 0.85rem; }
.loop-arrow {
  position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; z-index: 3;
  background: var(--grad-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800;
  box-shadow: 0 8px 20px -6px rgba(124,58,237,0.5);
}
@media (max-width: 880px) { .loop-arrow { top: auto; bottom: -16px; right: 50%; transform: translateX(50%) rotate(90deg); } }

/* Different / comparison */
.diff-quote {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  letter-spacing: -0.02em; line-height: 1.2;
  max-width: 26ch;
}
.diff-quote .dim { color: var(--txt-light-lo); }
.train-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.train-tag {
  font-weight: 700; font-size: 0.9rem;
  padding: 10px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-light);
  box-shadow: 0 8px 22px -14px rgba(30,10,74,0.25);
  transition: transform 0.3s var(--ease-spring), background 0.3s, color 0.3s;
}
.train-tag:hover { transform: translateY(-3px) rotate(-1deg); background: var(--violet); color: #fff; }

/* Marquee */
.marquee { overflow: hidden; padding: 22px 0; border-block: 1px solid var(--line-light); background: #fff; }
.theme-dark .marquee { border-color: var(--line-dark); background: var(--ink-0); }
.marquee-track {
  display: flex; gap: 48px; width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  color: var(--txt-light-mid);
}
.theme-dark .marquee-item { color: var(--txt-dark-mid); }
.marquee-item .spark { color: var(--violet); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Built in public band */
.public-band {
  background: var(--txt-light-hi);
  color: #fff;
  border-radius: var(--rad-lg);
  padding: clamp(36px, 5vw, 64px);
  position: relative; overflow: hidden;
}
.public-band::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 85% 20%, rgba(157,95,245,0.35), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(232,121,249,0.25), transparent 40%);
}
.public-band > * { position: relative; }
.public-band h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom: 16px; }
.public-band p { color: rgba(255,255,255,0.75); max-width: 56ch; }
.public-ctas { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.discord-btn {
  background: #5865F2; color: #fff;
  box-shadow: 0 10px 30px -10px rgba(88,101,242,0.6);
}
.discord-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(88,101,242,0.75); }

/* ============================================================================
   ROADMAP
   ========================================================================== */
.road-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 920px) { .road-cols { grid-template-columns: 1fr; } }
.road-col {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--rad-md);
  padding: 24px;
}
.road-col-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
}
.road-col-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.road-now .dot { background: var(--good); animation: pulse-dot 2s infinite; }
.road-next .dot { background: var(--warn); }
.road-later .dot { background: var(--txt-dark-lo); }
.road-now .road-col-head { color: var(--good); }
.road-next .road-col-head { color: var(--warn); }
.road-later .road-col-head { color: var(--txt-dark-lo); }
.road-col-head .count { margin-left: auto; opacity: 0.6; }

.road-item {
  padding: 16px 14px;
  border-radius: 13px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-dark);
  transition: transform 0.3s var(--ease-spring), border-color 0.3s;
}
.road-item:hover { transform: translateX(4px); border-color: rgba(157,95,245,0.3); }
.road-item + .road-item { margin-top: 10px; }
.road-item .t { font-weight: 700; font-size: 0.97rem; display: flex; align-items: center; gap: 9px; }
.road-item .t .done { color: var(--good); font-size: 0.85rem; }
.road-item .d { font-size: 0.85rem; color: var(--txt-dark-mid); margin-top: 5px; }
.road-item .aud {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
}
.aud-members { background: rgba(232,121,249,0.12); color: var(--magenta-bright); }
.aud-gyms { background: rgba(157,95,245,0.12); color: var(--violet-bright); }
.aud-platform { background: rgba(255,255,255,0.07); color: var(--txt-dark-mid); }

/* Changelog */
.changelog { max-width: 760px; }
.log-entry { display: grid; grid-template-columns: 150px 1fr; gap: 26px; position: relative; padding-bottom: 44px; }
.log-entry::before {
  content: ""; position: absolute; left: 170px; top: 34px; bottom: 0;
  width: 1px; background: var(--line-dark);
}
.log-entry:last-child::before { display: none; }
.log-entry .when { text-align: right; }
.log-entry .ver {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem;
  color: var(--violet-bright);
}
.log-entry .date { font-size: 0.78rem; color: var(--txt-dark-lo); margin-top: 4px; font-family: var(--font-mono); }
.log-entry .what { position: relative; padding-left: 30px; }
.log-entry .what::before {
  content: ""; position: absolute; left: -5.5px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 4px var(--ink-1), 0 0 14px rgba(124,58,237,0.7);
}
.log-entry h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin-bottom: 10px; }
.log-entry ul { list-style: none; }
.log-entry li { font-size: 0.93rem; color: var(--txt-dark-mid); padding: 4px 0; display: flex; gap: 10px; }
.log-entry li::before { content: "+"; color: var(--good); font-family: var(--font-mono); font-weight: 600; }
@media (max-width: 640px) {
  .log-entry { grid-template-columns: 1fr; gap: 8px; padding-left: 24px; }
  .log-entry::before { left: 0; top: 8px; }
  .log-entry .when { text-align: left; display: flex; gap: 14px; align-items: baseline; }
  .log-entry .what { padding-left: 0; }
  .log-entry .what::before { display: none; }
}

/* ============================================================================
   ABOUT
   ========================================================================== */
.about-hero { padding: 170px 0 80px; position: relative; overflow: hidden; }
.about-hero::after {
  content: ""; position: absolute; top: -200px; right: -150px;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(162,28,175,0.2), transparent 60%);
  filter: blur(40px);
}
.about-hero .container { position: relative; z-index: 2; }

.about-founder {
  display: grid; grid-template-columns: 300px 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
@media (max-width: 880px) { .about-founder { grid-template-columns: 1fr; } }
.founder-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--rad-lg);
  background: var(--grad-brand);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  box-shadow: 0 40px 90px -40px rgba(124,58,237,0.6);
}
.founder-portrait .big-letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9rem; color: rgba(255,255,255,0.5);
}
.founder-portrait .strap {
  position: relative; width: 100%;
  padding: 18px 22px;
  background: rgba(8,5,18,0.55); backdrop-filter: blur(10px);
  color: #fff;
}
.founder-portrait .strap .n { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.founder-portrait .strap .r { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-top: 3px; }

.about-prose p { color: var(--txt-dark-mid); font-size: 1.06rem; line-height: 1.75; }
.about-prose p + p { margin-top: 22px; }
.about-prose p strong { color: var(--txt-dark-hi); }
.about-prose .pull {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--txt-dark-hi);
  border-left: 3px solid; border-image: var(--grad-brand) 1;
  padding-left: 24px;
  margin: 34px 0;
}

.value-card {
  background: var(--ink-2); border: 1px solid var(--line-dark);
  border-radius: var(--rad-md); padding: 28px 24px;
  transition: transform 0.4s var(--ease-spring), border-color 0.3s;
}
.value-card:hover { transform: translateY(-6px); border-color: rgba(157,95,245,0.35); }
.value-card .num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--violet-bright); letter-spacing: 0.16em; display: block; margin-bottom: 16px; }
.value-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin-bottom: 10px; }
.value-card p { font-size: 0.92rem; color: var(--txt-dark-mid); }

/* ── CTA band (shared) ──────────────────────────────────────────────────── */
.cta-band {
  text-align: center;
  border-radius: var(--rad-lg);
  padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 60px);
  position: relative; overflow: hidden;
  background: var(--grad-brand);
  color: #fff;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.12;
}
.cta-band > * { position: relative; }
.cta-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; margin-bottom: 16px; }
.cta-band p { color: rgba(255,255,255,0.82); max-width: 50ch; margin: 0 auto 32px; }
.cta-band .btn { background: #fff; color: var(--violet); box-shadow: 0 14px 36px -12px rgba(0,0,0,0.4); }
.cta-band .btn:hover { transform: translateY(-3px); }

/* ── Count-up stat ──────────────────────────────────────────────────────── */
.stat-row { display: flex; gap: clamp(26px, 5vw, 70px); flex-wrap: wrap; }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; line-height: 1; }
.stat .l { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 10px; }
.theme-dark .stat .l { color: var(--txt-dark-lo); }
.theme-light .stat .l { color: var(--txt-light-lo); }