/* ==========================================================================
   MY WEEKLY TRACK — ABOUT PAGE
   Editorial precision · Montserrat-only · Brand-strict
   ========================================================================== */

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:        #2D2B6B;
  --navy-deep:   #1A1A4E;
  --navy-soft:   #3A3878;
  --green:       #3DB83D;
  --green-bright:#4ADE80;
  --green-deep:  #2E9230;
  --gold:        #F59E0B;
  --gold-bright: #FBBF24;
  --gold-deep:   #D97706;

  /* Neutrals */
  --ink:         #0A0A1F;
  --ink-soft:    #14143A;
  --paper:       #FAFAF7;
  --paper-warm:  #F5F3EE;
  --paper-cool:  #F0F0F5;
  --line:        rgba(45, 43, 107, 0.10);
  --line-bold:   rgba(45, 43, 107, 0.22);
  --line-light:  rgba(255, 255, 255, 0.12);
  --mute:        rgba(10, 10, 31, 0.56);
  --mute-light:  rgba(255, 255, 255, 0.62);

  /* Typography */
  --ff: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Scale (fluid) */
  --fs-xs:   clamp(11px, 0.7vw + 8px, 13px);
  --fs-sm:   clamp(13px, 0.8vw + 9px, 15px);
  --fs-base: clamp(15px, 0.9vw + 11px, 17px);
  --fs-md:   clamp(17px, 1.1vw + 12px, 20px);
  --fs-lg:   clamp(20px, 1.4vw + 14px, 26px);
  --fs-xl:   clamp(28px, 2.4vw + 16px, 42px);
  --fs-2xl:  clamp(36px, 4vw + 18px, 64px);
  --fs-3xl:  clamp(48px, 6vw + 20px, 96px);
  --fs-4xl:  clamp(64px, 9vw + 22px, 140px);

  /* Space */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-10: 128px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* Layout */
  --wrap: 1280px;
  --wrap-narrow: 960px;
  --nav-h: 72px;
  --ticker-h: 32px;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,10,31,0.05), 0 0 0 1px rgba(45,43,107,0.04);
  --shadow:    0 4px 16px rgba(10,10,31,0.06), 0 0 0 1px rgba(45,43,107,0.06);
  --shadow-lg: 0 18px 48px -8px rgba(10,10,31,0.18), 0 0 0 1px rgba(45,43,107,0.08);
  --shadow-glow: 0 12px 48px rgba(61,184,61,0.20);
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'kern', 'liga';
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--navy); color: var(--gold-bright); }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);
}

/* ─── CUSTOM CURSOR ──────────────────────────────────────────────────────── */
.cursor {
  position: fixed; pointer-events: none; z-index: 9999;
  top: 0; left: 0; opacity: 0;
  mix-blend-mode: difference;
  transition: opacity .3s var(--ease-out);
}
.cursor.is-active { opacity: 1; }
.cursor__dot {
  position: absolute; top: -3px; left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper);
  transition: transform .2s var(--ease-out);
}
.cursor__ring {
  position: absolute; top: -20px; left: -20px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--paper);
  transition: transform .35s var(--ease-out), border-color .25s var(--ease-out);
}
.cursor.is-hover .cursor__dot { transform: scale(0); }
.cursor.is-hover .cursor__ring { transform: scale(1.6); border-color: var(--green-bright); }
.cursor.is-click .cursor__ring { transform: scale(0.7); }
@media (hover: none), (max-width: 900px) { .cursor { display: none; } }

/* ─── SCROLL PROGRESS ────────────────────────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 1000;
  background: rgba(45, 43, 107, 0.08);
}
.progress__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green) 0%, var(--gold) 50%, var(--navy) 100%);
  transform-origin: left;
  transition: width .12s linear;
  box-shadow: 0 0 12px rgba(61, 184, 61, 0.4);
}
.progress__pct {
  position: fixed; top: 16px; right: 24px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--navy); opacity: 0;
  transition: opacity .3s var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.progress__pct::after { content: '%'; margin-left: 1px; }
.progress.is-visible .progress__pct { opacity: 0.5; }
@media (max-width: 720px) { .progress__pct { display: none; } }

/* ─── SECTION ANCHORS (desktop side nav) ─────────────────────────────────── */
.anchors {
  position: fixed; right: 32px; top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transition: opacity .5s var(--ease-out) .5s;
}
.anchors.is-ready { opacity: 1; }
.anchor {
  display: flex; align-items: center;
  position: relative;
  padding: 8px 0;
}
.anchor i {
  display: block; width: 24px; height: 1.5px;
  background: var(--line-bold);
  transition: width .35s var(--ease-out), background .25s ease;
}
.anchor.is-active i { width: 48px; background: var(--navy); }
.anchor::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  color: var(--navy); text-transform: uppercase;
  background: var(--paper);
  padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--line);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .25s var(--ease-out);
}
.anchor:hover::after,
.anchor.is-active::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 1100px) { .anchors { display: none; } }

/* ─── TICKER (top strip) ─────────────────────────────────────────────────── */
.ticker {
  height: var(--ticker-h);
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
  position: relative;
}
.ticker::before, .ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.ticker::after  { right: 0; background: linear-gradient(-90deg, var(--navy), transparent); }
.ticker__track {
  display: inline-flex; align-items: center; gap: 20px;
  height: 100%; white-space: nowrap;
  animation: tickerScroll 38s linear infinite;
  padding-left: 20px;
}
.ticker__track span {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase;
}
.ticker__track i {
  color: var(--gold); font-style: normal; font-size: 9px;
}
@keyframes tickerScroll {
  to { transform: translateX(-50%); }
}

/* ─── NAVIGATION ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 800;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(250, 250, 247, 0.95);
}
.nav__wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
}
.nav__logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  color: var(--navy);
}
.nav__logo-img {
  width: 36px; height: 36px;
  object-fit: contain;
  transition: transform .5s var(--ease-back);
}
.nav__logo:hover .nav__logo-img { transform: rotate(10deg) scale(1.05); }

.nav__links {
  display: flex; align-items: center; gap: 4px;
}
.nav__links a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  transition: color .2s ease;
}
.nav__links a::before {
  content: ''; position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1.5px; background: var(--navy);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover { color: var(--navy); }
.nav__links a:hover::before,
.nav__links a.is-active::before { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-active { color: var(--navy); font-weight: 600; }

.nav__right { display: flex; align-items: center; gap: 12px; }

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 100px;
  font-family: var(--ff); font-weight: 600; font-size: 14px;
  letter-spacing: -0.005em;
  transition: transform .3s var(--ease-back), background .25s ease, color .25s ease, box-shadow .3s ease;
  white-space: nowrap;
  overflow: hidden;
}
.btn em { font-style: normal; display: inline-flex; transition: transform .35s var(--ease-out); }
.btn:hover em { transform: translateX(4px); }

.btn--demo {
  background: var(--navy); color: var(--paper);
}
.btn--demo:hover {
  background: var(--navy-deep);
  box-shadow: 0 8px 24px rgba(45,43,107,0.30);
}
.btn--primary {
  background: var(--gold); color: var(--navy);
  padding: 14px 26px; font-size: 15px; font-weight: 700;
}
.btn--primary:hover {
  background: var(--gold-bright);
  box-shadow: 0 12px 32px rgba(245,158,11,0.35);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent; color: var(--navy);
  padding: 14px 22px; font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--line-bold);
}
.btn--ghost:hover { border-color: var(--navy); background: rgba(45,43,107,0.04); }
.btn--full { width: 100%; justify-content: center; }

/* Burger menu */
.burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; border-radius: 8px;
}
.burger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--navy);
  transition: transform .3s var(--ease-back), opacity .2s ease;
}
.burger span:nth-child(2) { width: 14px; }
.burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); width: 18px; }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scale(0); }
.burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav__links { display: none; }
  .burger { display: flex; }
  .nav__right .btn--demo { display: none; }
}

/* ─── MOBILE DRAWER ──────────────────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: 950;
  pointer-events: none; visibility: hidden;
}
.drawer.is-open { pointer-events: auto; visibility: visible; }
.drawer__veil {
  position: absolute; inset: 0;
  background: rgba(10, 10, 31, 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.drawer.is-open .drawer__veil { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 88vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 24px 28px;
  transform: translateX(100%);
  transition: transform .5s var(--ease-out);
  box-shadow: -12px 0 40px rgba(10,10,31,0.20);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.drawer__label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mute);
}
.drawer__close {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; color: var(--navy);
  transition: background .2s ease, transform .3s var(--ease-back);
}
.drawer__close:hover { background: rgba(45,43,107,0.08); transform: rotate(90deg); }
.drawer__list { padding: 16px 0; flex: 1; }
.drawer__list li {
  opacity: 0; transform: translateX(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i) * 0.07s + 0.2s);
}
.drawer.is-open .drawer__list li { opacity: 1; transform: translateX(0); }
.drawer__list a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0;
  font-size: 22px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color .2s ease, padding-left .3s var(--ease-out);
}
.drawer__list a:hover { color: var(--navy); padding-left: 8px; }
.drawer__list a.is-active { color: var(--navy); font-weight: 800; }
.drawer__num {
  font-size: 11px; font-weight: 700; color: var(--mute);
  letter-spacing: 1px; min-width: 24px;
  font-variant-numeric: tabular-nums;
}
.drawer__foot {
  padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i) * 0.07s + 0.2s);
}
.drawer.is-open .drawer__foot { opacity: 1; transform: translateY(0); }
.drawer__meta {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  color: var(--mute); text-transform: uppercase; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 540px) {
  .hero { padding: 40px 0 60px; }
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity: 0.55;
  z-index: -1;
}
.hero__orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.4;
  z-index: -1;
  animation: orbFloat 16s ease-in-out infinite;
}
.hero__orb--a {
  top: 8%; left: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%);
}
.hero__orb--b {
  bottom: 12%; right: -10%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  animation-delay: -8s;
  opacity: 0.32;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 30px) scale(0.95); }
}

.hero__meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: clamp(32px, 4vw, 52px);
  flex-wrap: wrap; gap: 16px;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(45,43,107,0.06);
  border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--navy);
}
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(61,184,61,0.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61,184,61,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(61,184,61,0.06); }
}
.hero__crumb {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--mute);
}
.hero__crumb a { transition: color .2s ease; }
.hero__crumb a:hover { color: var(--navy); }
.hero__crumb i { margin: 0 8px; color: var(--line-bold); font-style: normal; }
.hero__crumb span { color: var(--navy); font-weight: 700; }

/* Hero headline — character reveal */
.hero__h {
  font-size: var(--fs-4xl);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--navy);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.hero__h-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em; /* prevent descenders being clipped during animation */
}
/* Each word stays intact (no mid-word breaks) — animates as character cascade */
.hero__h-line .word {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
}
.hero__h-line .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: charRise 1.1s var(--ease-out) forwards;
  animation-delay: calc(var(--ci, 0) * 0.022s + 0.2s);
  will-change: transform, opacity;
}
.hero__h-line--accent em {
  font-style: italic; font-weight: 900;
  position: relative;
}
/* Em word animates as a single block — background-clip:text works because
   em directly owns the text node (no nested spans interfering) */
.hero__h-line .hero-em-word {
  display: inline-block;
  font-style: italic; font-weight: 900;
  background: linear-gradient(120deg, var(--green) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  /* Same slide-up animation as .char */
  transform: translateY(110%);
  opacity: 0;
  animation: charRise 1.1s var(--ease-out) forwards;
  animation-delay: calc(var(--ci, 0) * 0.022s + 0.2s);
  will-change: transform, opacity;
}
/* Gradient underline draws in beneath the em word */
.hero__h-line .hero-em-word::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0.04em;
  height: 0.06em;
  background: var(--gold);
  border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  animation: underline 1s var(--ease-out) forwards 1.6s;
}
@keyframes charRise {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes underline {
  to { transform: scaleX(1); }
}

/* On narrow screens, dial back hero font + line-height for breathing room */
@media (max-width: 540px) {
  .hero__h {
    font-size: clamp(48px, 13vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.035em;
  }
}

.hero__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 960px) {
  .hero__body { grid-template-columns: 1fr; }
}

.hero__lede p {
  font-size: var(--fs-lg);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-soft);
  margin-bottom: 20px;
  max-width: 36ch;
}
.hero__lede p strong {
  font-weight: 700; color: var(--navy);
}
.hero__cta {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* Hero card — the gap chart */
.card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow);
  position: relative;
  transition: transform .5s var(--ease-out), box-shadow .5s ease;
  transform-style: preserve-3d;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card__head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line-bold);
  margin-bottom: 20px;
}
.card__num {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase;
}
.card__title {
  font-size: 13px; font-weight: 600;
  color: var(--navy); flex: 1;
}
.card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(61,184,61,0.18);
  animation: pulse 2s ease-in-out infinite;
}
.card__split {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  align-items: stretch;
}
.card__lab {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.card__lab-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  color: var(--mute); text-transform: uppercase;
}
.card__lab-tag--after { color: var(--green-deep); }
.card__lab-bar {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--mute) 0%, transparent 100%);
}
.card__lab-bar--after {
  background: linear-gradient(90deg, var(--green) 0%, transparent 100%);
}
.card__list { display: flex; flex-direction: column; gap: 10px; }
.card__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
  font-weight: 500;
}
.card__list i {
  display: inline-flex; justify-content: center; align-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 700;
  font-style: normal;
  flex-shrink: 0; margin-top: 1px;
}
.card__list--before i { background: rgba(220, 50, 50, 0.10); color: #B91C1C; }
.card__list--after i  { background: rgba(61, 184, 61, 0.14); color: var(--green-deep); }
.card__divider { color: var(--line-bold); }
.card__foot {
  display: flex; justify-content: space-between;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mute);
}
.card__foot-stamp { color: var(--gold-deep); }

/* Hero scroll indicator */
.hero__scroll {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: scrollBob 2.5s ease-in-out infinite;
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: var(--line-bold);
  overflow: hidden; position: relative;
}
.hero__scroll-line span {
  position: absolute; top: 0; left: 0; width: 100%; height: 50%;
  background: var(--navy);
  animation: scrollFill 2.5s ease-in-out infinite;
}
.hero__scroll-text {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: var(--mute); text-transform: uppercase;
}
@keyframes scrollBob { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,-6px);} }
@keyframes scrollFill {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}
@media (max-width: 720px) { .hero__scroll { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   STATS RIBBON
   ═══════════════════════════════════════════════════════════════════════════ */
.ribbon {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 5vw, 64px) 0;
  position: relative; overflow: hidden;
}
.ribbon::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}
.ribbon__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) ;
  align-items: center;
  position: relative;
  gap: 0;
}
.ribbon__cell {
  text-align: center;
  padding: 16px 12px;
}
.ribbon__sep {
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, var(--line-light), transparent);
  justify-self: center;
  display: none;
}
.ribbon__num {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.ribbon__num .counter { display: inline-block; }
.ribbon__small {
  font-size: 0.45em; font-weight: 700;
  margin-left: 4px; color: var(--gold);
}
.ribbon__lab {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mute-light);
}
@media (max-width: 720px) {
  .ribbon__row { grid-template-columns: 1fr 1fr; gap: 24px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════ */
.sec-head {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 760px;
}
.sec-head--center {
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.sec-marker {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.sec-marker--center { justify-content: center; }
.sec-marker__num {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold);
}
.sec-marker__rule {
  width: 48px; height: 1px; background: var(--line-bold);
  display: inline-block;
}
.sec-marker__label {
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--navy);
}
.sec-marker--light .sec-marker__rule { background: rgba(255,255,255,0.2); }
.sec-marker--light .sec-marker__label { color: var(--paper); }
.sec-marker--light .sec-marker__num { color: var(--gold-bright); }

.sec-h {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 16px;
}
.sec-h em {
  font-style: italic; font-weight: 900;
  background: linear-gradient(120deg, var(--green) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.sec-h--light { color: var(--paper); }
.sec-sub {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--mute);
  max-width: 60ch;
  font-weight: 400;
}
.sec-sub em { font-style: italic; color: var(--navy); font-weight: 600; }
.sec-sub--light { color: var(--mute-light); }
.sec-sub--light em { color: var(--gold-bright); }
.sec-head--center .sec-sub { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROBLEM — editorial essay + stats
   ═══════════════════════════════════════════════════════════════════════════ */
.problem { padding: clamp(80px, 10vw, 140px) 0; }
.problem__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.problem__essay p {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 38ch;
}
.problem__essay em { font-style: italic; color: var(--navy); font-weight: 600; }
.dropcap { position: relative; }
.dropcap .dc {
  float: left;
  font-size: clamp(64px, 7vw, 100px);
  font-weight: 900;
  line-height: 0.86;
  margin: 4px 12px 0 0;
  color: var(--navy);
  letter-spacing: -0.04em;
  font-style: italic;
}

.problem__stats {
  display: flex; flex-direction: column; gap: 20px;
}
.stat {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}
.stat:hover {
  transform: translateY(-3px);
  border-color: var(--line-bold);
  box-shadow: var(--shadow);
}
.stat__num {
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 4px;
}
.stat__num i {
  font-size: 0.4em; font-weight: 700; font-style: normal;
  color: var(--gold);
}

/* Range style stat (e.g., 3 – 6 months) — properly spaced */
.stat__num--range {
  display: flex; align-items: baseline;
  gap: clamp(8px, 1.2vw, 14px);
  flex-wrap: wrap;
}
.stat__num--range .stat__digit {
  display: inline-block;
  color: var(--navy);
  font-weight: 900;
}
.stat__num--range .stat__dash {
  display: inline-block;
  color: var(--gold);
  font-weight: 700;
  transform: translateY(-0.08em);
  font-size: 0.85em;
  letter-spacing: 0;
}
.stat__num--range .stat__unit {
  font-size: 0.36em;
  font-weight: 800;
  font-style: normal;
  color: var(--gold);
  letter-spacing: 0.5px;
  margin-left: 6px;
  align-self: center;
  text-transform: lowercase;
}
.stat__lab {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--green-deep);
  margin-bottom: 12px;
}
.stat__desc {
  font-size: 14px; line-height: 1.55; color: var(--mute);
  max-width: 38ch;
}
.stat__bar {
  position: absolute; left: 26px; right: 26px; bottom: 14px;
  height: 2px; background: var(--line);
  border-radius: 2px; overflow: hidden;
}
.stat__bar span {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width 1.4s var(--ease-out);
}
.stat.is-in .stat__bar span { width: 100%; }

@media (max-width: 900px) {
  .problem__layout { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOLUTION — 3D phase cards
   ═══════════════════════════════════════════════════════════════════════════ */
.solution {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--paper-warm);
  position: relative;
}
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  perspective: 1400px;
}
.phase {
  position: relative;
  transform-style: preserve-3d;
}
.phase__inner {
  position: relative;
  padding: 36px 28px 28px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .6s var(--ease-out), box-shadow .5s ease;
  transform-style: preserve-3d;
  overflow: hidden;
}
.phase:hover .phase__inner {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.phase__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-bold);
}
.phase__num {
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px;
  color: var(--gold);
}
.phase__when {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--mute);
}
.phase__h {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 16px;
}
.phase__p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.phase__role {
  display: flex; gap: 10px; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.phase__role-k {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mute);
}
.phase__role-v {
  font-size: 12px; font-weight: 600; color: var(--navy);
}
.phase__glow {
  position: absolute; inset: -2px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--green), var(--gold), var(--navy));
  z-index: -1; opacity: 0;
  filter: blur(20px);
  transition: opacity .5s ease;
}
.phase:hover .phase__glow { opacity: 0.35; }

@media (max-width: 900px) {
  .phases { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PILLARS
   ═══════════════════════════════════════════════════════════════════════════ */
.pillars { padding: clamp(80px, 10vw, 140px) 0; }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), border-color .3s ease, box-shadow .4s ease;
  overflow: hidden;
}
.pillar::before {
  content: ''; position: absolute;
  inset: 0; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none; z-index: 0;
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.pillar:hover::before { opacity: 0.06; }
.pillar > * { position: relative; z-index: 1; }
.pillar__line {
  width: 36px; height: 3px;
  background: var(--accent);
  margin-bottom: 24px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.pillar.is-in .pillar__line { transform: scaleX(1); }
.pillar:hover .pillar__line { transform: scaleX(2); }
.pillar__num {
  position: absolute; top: 24px; right: 24px;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--mute);
  transition: color .3s ease;
}
.pillar:hover .pillar__num { color: var(--accent); }
.pillar__h {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.2;
}
.pillar__p {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
}
.pillar__arrow {
  position: absolute; bottom: 24px; right: 24px;
  color: var(--accent);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .3s ease, transform .35s var(--ease-out);
}
.pillar:hover .pillar__arrow { opacity: 1; transform: translate(0,0); }
@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MANIFESTO — marquee strips + word-by-word reveal
   ═══════════════════════════════════════════════════════════════════════════ */
.manifesto {
  background: var(--navy);
  color: var(--paper);
  padding: 0;
  position: relative; overflow: hidden;
}
.manifesto::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(61,184,61,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(245,158,11,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.manifesto__strip {
  background: var(--navy-deep);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  overflow: hidden;
  padding: 14px 0;
  position: relative; z-index: 1;
}
.manifesto__track {
  display: inline-flex; align-items: center; gap: 28px;
  white-space: nowrap;
  animation: tickerScroll 28s linear infinite;
}
.manifesto__track--rev { animation-direction: reverse; animation-duration: 32s; }
.manifesto__track span {
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.manifesto__track i {
  font-style: normal;
  color: var(--gold);
  font-size: 12px;
}
.manifesto__wrap {
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative; z-index: 1;
  text-align: center;
}
.manifesto__h {
  font-size: var(--fs-3xl);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--paper);
  max-width: 22ch;
  margin: 0 auto 32px;
}
.manifesto__h em {
  font-style: italic; color: var(--gold-bright); font-weight: 900;
}
.manifesto__h .hl {
  position: relative;
  color: var(--green-bright);
  font-style: italic;
}
.manifesto__h .hl::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0.04em;
  height: 0.1em;
  background: var(--green);
  border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-out) 0.8s;
}
.manifesto__h.is-in .hl::after { transform: scaleX(1); }
.manifesto__h .word {
  display: inline-block;
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 0.04s);
}
.manifesto__h.is-in .word { opacity: 1; transform: translateY(0); }

.manifesto__sig {
  display: inline-flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
}
.manifesto__sig em {
  font-style: italic; font-weight: 400;
  color: var(--mute-light); letter-spacing: 0.5px;
  text-transform: none; font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDER — magazine spread with sophisticated portrait frame
   ═══════════════════════════════════════════════════════════════════════════ */
.founder {
  padding: clamp(100px, 12vw, 160px) 0;
  background: var(--paper);
}
.founder__spread {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* PORTRAIT FRAME — refined luxury edition (no labels) */
.portrait {
  position: relative;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  isolation: isolate;
}

/* Soft glow halo behind the frame */
.portrait__halo {
  position: absolute;
  inset: -32px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(61, 184, 61, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(245, 158, 11, 0.16) 0%, transparent 55%);
  filter: blur(30px);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 0.6s;
  z-index: -1;
}
.portrait.is-in .portrait__halo { opacity: 1; }

.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  padding: 14px;
  background: var(--paper);
  box-shadow:
    0 1px 2px rgba(10, 10, 31, 0.06),
    0 4px 14px rgba(10, 10, 31, 0.08),
    0 24px 60px -12px rgba(10, 10, 31, 0.22);
  transition: transform .8s var(--ease-out), box-shadow .6s ease;
}
.portrait:hover .portrait__frame {
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(10, 10, 31, 0.06),
    0 8px 24px rgba(10, 10, 31, 0.10),
    0 36px 80px -12px rgba(10, 10, 31, 0.28);
}

/* The luxurious rotating gradient ring (uses conic-gradient + mask) */
.portrait__ring {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 2px; /* ring thickness */
  background: conic-gradient(
    from 0deg,
    var(--green) 0deg,
    var(--gold) 120deg,
    var(--navy) 240deg,
    var(--green) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 1s ease 0.4s;
  animation: ringSpin 18s linear infinite;
  pointer-events: none;
}
.portrait.is-in .portrait__ring { opacity: 1; }
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

.portrait__inner {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: var(--navy-deep);
  /* Inner thin frame for double-frame editorial feel */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.portrait__mono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 1;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
}
.portrait__mono svg { width: 60%; height: 60%; opacity: 0.94; }
.portrait__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: transform 1.2s var(--ease-out), filter .6s ease;
  filter: contrast(1.04) saturate(1.06);
}
.portrait:hover .portrait__img {
  transform: scale(1.04);
  filter: contrast(1.08) saturate(1.1);
}

.portrait__caption {
  display: flex; align-items: center; gap: 10px;
  margin: 24px auto 0;
  padding: 12px 18px;
  background: var(--paper-warm);
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
  width: fit-content;
  max-width: 100%;
}
.portrait__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(61,184,61,0.18);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.portrait__caption strong { font-weight: 700; color: var(--navy); }

/* Founder content */
.founder__id {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.founder__id-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  font-size: 13px;
}
.founder__id-k {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mute);
  min-width: 56px;
}
.founder__id-rule {
  flex: 1; height: 1px;
  background: var(--line);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px);
  background-size: 8px 1px;
}
.founder__id-v { font-weight: 600; color: var(--navy); }

.founder__name {
  font-size: var(--fs-2xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 28px;
}
.founder__story p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.founder__story em { font-style: italic; color: var(--navy); font-weight: 600; }
.founder__story strong { font-weight: 700; color: var(--navy); }
.founder__lede {
  font-size: var(--fs-lg) !important;
  font-weight: 500;
  color: var(--navy) !important;
  line-height: 1.5 !important;
}

.quote {
  position: relative;
  margin: 36px 0;
  padding: 28px 32px 28px 56px;
  background: var(--paper-warm);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--gold);
}
.quote__mark {
  position: absolute;
  top: 8px; left: 18px;
  font-size: 80px; font-weight: 900;
  line-height: 1;
  color: var(--gold);
  opacity: 0.4;
  font-family: var(--ff);
  font-style: italic;
}
.quote__body {
  font-size: var(--fs-md);
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
  margin-bottom: 14px;
}
.quote__cite {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold-deep);
}
.quote__cite-rule {
  width: 24px; height: 1px; background: var(--gold);
}
.founder__close {
  font-size: var(--fs-base);
  color: var(--mute);
  font-style: italic;
}

@media (max-width: 960px) {
  .founder__spread { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .portrait { position: static; }
  .portrait__halo { inset: -16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VALUES
   ═══════════════════════════════════════════════════════════════════════════ */
.values {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--paper-warm);
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.value {
  background: var(--paper);
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), box-shadow .4s ease, background .3s ease;
  position: relative;
}
.value--offset { transform: translateY(28px); }
.value:hover {
  transform: translateY(-4px);
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}
.value--offset:hover { transform: translateY(24px); }
.value:hover .value__h,
.value:hover .value__num { color: var(--paper); }
.value:hover .value__p { color: var(--mute-light); }
.value:hover .value__rule { background: rgba(255,255,255,0.2); }

.value__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.value__num {
  font-size: 13px; font-weight: 800; font-style: italic;
  color: var(--gold);
  transition: color .25s ease;
}
.value__rule {
  flex: 1; height: 1px; background: var(--line);
  transition: background .25s ease;
}
.value__h {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.015em; color: var(--navy);
  margin-bottom: 10px;
  transition: color .25s ease;
}
.value__p {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  transition: color .25s ease;
}
@media (max-width: 960px) {
  .values__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .value--offset { transform: none; }
  .value--offset:hover { transform: translateY(-4px); }
}
@media (max-width: 540px) {
  .values__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDUSTRIES — oversized typographic list
   ═══════════════════════════════════════════════════════════════════════════ */
.industries { padding: clamp(80px, 10vw, 140px) 0; }
.industries__list {
  border-top: 1px solid var(--line);
}
.ind {
  display: grid;
  grid-template-columns: 80px 1fr auto 32px;
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: padding-left .4s var(--ease-out);
}
.ind::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: var(--navy);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease-out);
  z-index: 0;
}
.ind:hover::before { transform: scaleY(1); transform-origin: top; }
.ind:hover { padding-left: 24px; }
.ind > * { position: relative; z-index: 1; transition: color .25s ease; }
.ind:hover .ind__num,
.ind:hover .ind__name,
.ind:hover .ind__desc,
.ind:hover .ind__arrow { color: var(--paper); }
.ind:hover .ind__name { font-style: italic; }

.ind__num {
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.ind__name {
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1;
  transition: color .25s ease, font-style .25s ease;
}
.ind__desc {
  font-size: 13px; font-weight: 500;
  color: var(--mute);
  text-align: right;
  letter-spacing: 0.2px;
}
.ind__arrow {
  font-size: 20px; font-weight: 700;
  color: var(--line-bold);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s ease, transform .35s var(--ease-out), color .25s ease;
}
.ind:hover .ind__arrow { opacity: 1; transform: translateX(0); color: var(--gold); }
@media (max-width: 720px) {
  .ind { grid-template-columns: 40px 1fr 20px; gap: 12px; }
  .ind__desc { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GET STARTED — dark sophisticated CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.start {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 120px);
  background: var(--navy-deep);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.start__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.start__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.start__orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.4;
}
.start__orb--a {
  top: 10%; left: -10%;
  width: 480px; height: 480px;
  background: var(--green);
  animation: orbFloat 18s ease-in-out infinite;
}
.start__orb--b {
  bottom: 5%; right: -12%;
  width: 540px; height: 540px;
  background: var(--gold);
  animation: orbFloat 22s ease-in-out infinite reverse;
  opacity: 0.35;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: clamp(40px, 5vw, 64px) 0;
  position: relative;
}
.timeline::before {
  content: ''; position: absolute;
  top: 22px; left: 5%; right: 5%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-light) 0 6px, transparent 6px 12px);
}
.t-step { position: relative; }
.t-dot {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy-deep);
  border: 2px solid var(--gold);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  color: var(--gold);
  margin-bottom: 20px;
  transition: transform .4s var(--ease-back), background .3s ease;
}
.t-dot--final {
  background: var(--gold); color: var(--navy-deep);
  border-color: var(--gold);
}
.t-step:hover .t-dot { transform: scale(1.1); }
.t-content { padding-right: 16px; }
.t-when {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--green-bright);
  margin-bottom: 8px;
}
.t-content h4 {
  font-size: 18px; font-weight: 800;
  color: var(--paper);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.t-content p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--mute-light);
}

.start__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: clamp(40px, 5vw, 56px) 0 28px;
}
.start-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 32px 28px 28px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-light);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .4s var(--ease-out), background .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
  cursor: pointer;
}
.start-card::before {
  content: ''; position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(135deg, var(--green), var(--gold));
  border-radius: var(--radius-lg);
  z-index: -1; opacity: 0;
  transition: opacity .4s ease;
}
.start-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.06);
  border-color: transparent;
}
.start-card:hover::before { opacity: 0.6; }
.start-card--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}
.start-card--primary:hover { background: var(--gold-bright); }
.start-card__lbl {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(45,43,107,0.15);
  color: var(--navy-deep);
  margin-bottom: 12px;
}
.start-card__lbl--m { background: rgba(61,184,61,0.18); color: var(--green-bright); }
.start-card:not(.start-card--primary) .start-card__lbl { color: var(--paper); background: rgba(255,255,255,0.10); }
.start-card__h {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.start-card__sub {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 18px;
  line-height: 1.5;
}
.start-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  margin-top: auto;
}
.start-card__cta i {
  display: inline-flex;
  transition: transform .35s var(--ease-out);
  font-style: normal;
}
.start-card:hover .start-card__cta i { transform: translateX(6px); }

.start__trust {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  padding-top: 24px;
}
.start__trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--mute-light);
}
.start__trust i {
  font-style: normal;
  color: var(--green-bright);
  font-weight: 800;
}
@media (max-width: 720px) {
  .timeline { grid-template-columns: 1fr; gap: 16px; }
  .timeline::before { display: none; }
  .start__cta { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  color: var(--mute-light);
  padding: clamp(60px, 7vw, 96px) 0 28px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: clamp(40px, 6vw, 80px);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-light);
}
.footer__logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--paper); font-weight: 700; font-size: 15px;
  margin-bottom: 14px;
}
.footer__logo-img {
  width: 28px; height: 28px;
  object-fit: contain;
  filter: brightness(1.08);
}
.footer__brand p {
  font-size: 14px; line-height: 1.55;
  max-width: 36ch;
  margin-bottom: 20px;
}
.footer__socials { display: flex; gap: 8px; }
.footer__socials a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06);
  color: var(--mute-light);
  transition: background .25s ease, color .25s ease, transform .3s var(--ease-back);
}
.footer__socials a:hover {
  background: var(--gold); color: var(--navy-deep);
  transform: translateY(-2px);
}
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.footer__nav h4 {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--paper);
  margin-bottom: 14px;
}
.footer__nav a {
  display: block;
  font-size: 14px; padding: 4px 0;
  transition: color .2s ease, padding-left .25s ease;
}
.footer__nav a:hover { color: var(--gold-bright); padding-left: 4px; }
.footer__bottom {
  display: flex; justify-content: space-between;
  padding-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap; gap: 8px;
}
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY: REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
[data-reveal="fade"]    { transform: translateY(20px); }
[data-reveal="lift"]    { transform: translateY(40px) scale(0.98); }
[data-reveal="tilt"]    { transform: translateY(30px) rotateX(8deg); transform-origin: top center; }
[data-reveal="ind"]     { transform: translateY(20px); }
[data-reveal="portrait"]{ transform: translateY(40px) scale(0.97); }
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}