/* ── Variables ────────────────────────────────────────────────────────── */
:root {
  font-size: clamp(14px, calc(.5rem + .6vw), 18px);

  --void: #070d1a;
  --abyss: #0a1628;
  --obsidian: #101c34;
  --slate-glass: rgba(16, 28, 52, 0.55);
  --frost-glass: rgba(10, 16, 32, 0.72);
  --smoke-glass: rgba(8, 14, 28, 0.92);

  --sapphire: #0131db;
  --ocean: #018ccd;
  --cyan: #00e8e6;
  --depths: #0080b3;
  --marine: #0183b7;
  --teal: #00c9a7;
  --rose: #ff6ba8;

  --frost: #e8f4ff;
  --mist: #7f9dbc;
  --ice: #fff;

  --border-glow: rgba(0, 229, 255, 0.14);
  --border-bright: rgba(0, 229, 255, 0.38);
  --border-faint: rgba(0, 229, 255, 0.06);

  --gradient: linear-gradient(135deg, #0131db 0%, #018ccd 30%, #00e8e6 50%, #0080b3 75%, #00c9a7 100%);
  --grad-text: linear-gradient(90deg, #018ccd, #00e8e6, #00c9a7);
  --grad-glow: radial-gradient(ellipse at center, rgba(0, 232, 230, 0.12) 0%, transparent 70%);

  --text-hero: clamp(52px, 8.5vw, 100px);
  --text-display: clamp(40px, 6vw, 80px);
  --text-title: clamp(32px, 4.5vw, 56px);
  --text-heading: clamp(24px, 3vw, 36px);
  --text-stat: clamp(48px, 7vw, 96px);
  --text-body: clamp(16px, 2vw, 19px);
  --text-small: clamp(14px, 1.6vw, 16px);
  --text-eyebrow: clamp(10px, 1.2vw, 11px);

  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--void);
  color: var(--frost);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

::selection {
  background: rgba(0, 232, 230, 0.25);
  color: var(--ice);
}

/* ── Brand Splash (Screen 1) ─────────────────────────────────────────── */
.section_brand-splash {
  position: sticky;
  top: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #070d1a;
}

.brand-splash_logo {
  width: clamp(360px, 90vw, 1600px);
  height: auto;
  max-width: 100%;
  position: relative;
  z-index: 2;
  /* v4.5.17: hide at first paint to prevent FOUC flash on cold-cache
     loads. GSAP's intro timeline fades this in at 3.4s — previously the
     browser painted the logo visible, then JS ran and hid it, causing
     a brief blink before the animation began. */
  opacity: 0;
}

.brand-splash_canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── Velocity-comet scroll indicator (replaces old "SCROLL" text) ───
   A vertical rail with a cyan comet block that accelerates, stretches
   into a comet tail at peak velocity, then decelerates into a block
   and exits. R—K pattern, restyled to brand. */
.brand-splash_scroll-hint {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 7em;
  background: rgba(0, 232, 230, 0.22);
  overflow: hidden;
  z-index: 2;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  pointer-events: auto;
}
.brand-splash_scroll-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 1.8em;
  background: linear-gradient(
    to bottom,
    rgba(0, 232, 230, 0.0) 0%,
    rgba(0, 232, 230, 0.85) 45%,
    rgba(255, 107, 168, 0.55) 92%,
    rgba(255, 107, 168, 0.0) 100%
  );
  box-shadow:
    0 0 6px rgba(0, 232, 230, 0.65),
    0 0 14px rgba(0, 232, 230, 0.35);
  opacity: 0;
  clip-path: polygon(22% 0%, 78% 0%, 78% 100%, 22% 100%);
  animation: sailsy-scroll-comet 2.8s cubic-bezier(0.7, 0.05, 0.13, 1) infinite;
  animation-delay: 4s;
  pointer-events: none;
  will-change: transform, opacity, clip-path;
  transform: translate(-50%, -180%) scaleY(0.8);
}
@keyframes sailsy-scroll-comet {
  0% {
    transform: translate(-50%, -180%) scaleY(0.8);
    opacity: 0;
    clip-path: polygon(22% 0%, 78% 0%, 78% 100%, 22% 100%);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -120%) scaleY(0.95);
    clip-path: polygon(18% 0%, 82% 0%, 82% 100%, 18% 100%);
  }
  40% {
    transform: translate(-50%, 170%) scaleY(1.35);
    clip-path: polygon(22% 0%, 78% 0%, 92% 32%, 86% 100%, 14% 100%, 8% 32%);
  }
  65% {
    transform: translate(-50%, 320%) scaleY(2);
    clip-path: polygon(28% 0%, 72% 0%, 92% 20%, 84% 100%, 16% 100%, 8% 20%);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 560%) scaleY(1);
    opacity: 1;
    clip-path: polygon(16% 0%, 84% 0%, 84% 100%, 16% 100%);
  }
  100% {
    transform: translate(-50%, 620%) scaleY(0.5);
    opacity: 0;
    clip-path: polygon(22% 0%, 78% 0%, 78% 100%, 22% 100%);
  }
}

/* ── v4.4: Full-bleed wrappers ────────────────────────────────────────
   The three rebuilt sections need zero horizontal boxing. Kill any
   Webflow-inherited max-width / padding on the section elements and
   let the inner .v5-* wrappers handle their own layout. */
.section_approach,
.section_proof,
.section_about {
  width: 100vw;
  max-width: 100vw;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.section_approach::before { display: none !important; }
.section_approach > *:not(.v5-approach-wrap),
.section_proof    > *:not(.v5-results-wrap),
.section_about    > *:not(.v5-about-wrap) { display: none !important; }

/* ── v5 Section 3: WHAT I DO — horizontal pin-scroll ────────────────
   v4.4.2 BUG FIX: .v5-approach-wrap must NOT have a fixed height.
   ScrollTrigger injects a pin-spacer inside it that's (sticky_h +
   pin_duration) tall. If the wrap is locked to 100vh, the spacer is
   clipped and document flow never gets the extra scroll space — which
   means Results & About ScrollTriggers fire DURING the approach pin
   instead of after it. Let the wrap size to its pin-spacer child. */
.v5-approach-wrap {
  width: 100vw;
  position: relative;
}
.v5-approach-sticky {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.v5-approach-tag-global {
  position: absolute;
  /* v4.5.22: 4vh → 10vh. The Webflow nav (~60–80px tall) was sitting
     over the top of the pinned title because 4vh on a 1200px viewport
     is only ~48px. 10vh (~120px on desktop) gives clear headroom. */
  top: 10vh;
  left: 6vw;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
  pointer-events: none;
  /* v4.5.30: will-change promotes to GPU layer so the cohesive spring
     doesn't repaint during its 2.3s arc. No visual change. */
  will-change: transform;
}
.v5-approach-tag-global span {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-transform: uppercase;
}
.v5-approach-tag-global em {
  font-size: clamp(14px, 1.15vw, 18px);
  font-style: normal;
  color: var(--frost);
  opacity: 0.85;
  letter-spacing: -0.01em;
}
.v5-approach-track {
  display: flex;
  width: 300vw;
  height: 100vh;
  will-change: transform;
}
.v5-approach-panel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  padding: 0 6vw;
  gap: 2vw;
  overflow: hidden;
}
.v5-approach-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.v5-approach-panel[data-color="cyan"]::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 35%, rgba(0, 232, 230, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(1, 140, 205, 0.14) 0%, transparent 70%),
    linear-gradient(135deg, rgba(0, 232, 230, 0.04) 0%, rgba(8, 24, 42, 0.28) 100%);
}
.v5-approach-panel[data-color="rose"]::before {
  background:
    radial-gradient(ellipse 70% 60% at 85% 35%, rgba(255, 107, 168, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(255, 139, 189, 0.10) 0%, transparent 70%),
    linear-gradient(135deg, rgba(255, 107, 168, 0.04) 0%, rgba(26, 14, 32, 0.28) 100%);
}
.v5-approach-panel[data-color="teal"]::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 70%, rgba(0, 201, 167, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(0, 232, 230, 0.12) 0%, transparent 70%),
    linear-gradient(135deg, rgba(0, 201, 167, 0.04) 0%, rgba(8, 24, 28, 0.28) 100%);
}
.v5-approach-num {
  font-size: clamp(140px, 22vw, 360px);
  font-weight: 100;
  line-height: 0.88;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
  font-feature-settings: "tnum";
  will-change: transform;
}
.v5-approach-panel[data-color="cyan"] .v5-approach-num {
  background: linear-gradient(135deg, #00e8e6 0%, #018ccd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-approach-panel[data-color="rose"] .v5-approach-num {
  background: linear-gradient(135deg, #ff6ba8 0%, #ff8bbd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-approach-panel[data-color="teal"] .v5-approach-num {
  background: linear-gradient(135deg, #00c9a7 0%, #00e8e6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-approach-content {
  position: relative;
  z-index: 1;
  max-width: 46vw;
}
.v5-approach-tag {
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 2vh;
  font-weight: 500;
}
.v5-approach-panel[data-color="rose"] .v5-approach-tag { color: #ff8bbd; }
.v5-approach-panel[data-color="teal"] .v5-approach-tag { color: var(--teal); }
.v5-approach-title {
  font-size: clamp(36px, 5.2vw, 88px);
  font-weight: 700;
  line-height: 0.95;
  margin-bottom: 3vh;
  letter-spacing: -0.025em;
  color: var(--ice);
}
.v5-approach-desc {
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.55;
  color: var(--frost);
  opacity: 0.82;
  max-width: 40vw;
  margin-bottom: 4vh;
}
.v5-approach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7vw;
}
.v5-approach-chip {
  padding: 0.55em 1.15em;
  border: 1px solid rgba(0, 232, 230, 0.24);
  border-radius: 999px;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.04em;
  color: var(--frost);
  background: rgba(0, 232, 230, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease;
}
.v5-approach-chip:hover { transform: translateY(-2px); }
.v5-approach-panel[data-color="rose"] .v5-approach-chip {
  border-color: rgba(255, 139, 189, 0.28); background: rgba(255, 139, 189, 0.05);
}
.v5-approach-panel[data-color="teal"] .v5-approach-chip {
  border-color: rgba(0, 201, 167, 0.28); background: rgba(0, 201, 167, 0.05);
}
.v5-approach-hint {
  position: absolute;
  bottom: 4vh;
  right: 6vw;
  font-size: 10px;
  letter-spacing: 0.55em;
  color: var(--mist);
  opacity: 0.55;
  z-index: 10;
  pointer-events: none;
  /* v4.5.30: GPU-promote for cohesive spring. */
  will-change: transform;
}
.v5-approach-hint::after {
  content: '\2192';
  margin-left: 1em;
  display: inline-block;
  animation: v5-hint-nudge 1.8s ease-in-out infinite;
}
@keyframes v5-hint-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(6px); opacity: 1; }
}
.v5-approach-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 10;
}
.v5-approach-progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00e8e6, #ff8bbd, #00c9a7);
  transform: scaleX(0);
  transform-origin: left;
}

/* ── v5 Section 4: RESULTS — scramble reel ─────────────────────────── */
.v5-results-wrap {
  padding: 14vh 0 10vh;
  position: relative;
}
.v5-results-header {
  padding: 0 6vw 10vh;
}
.v5-results-tag {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  margin-bottom: 2.5vh;
  font-weight: 500;
}
.v5-results-title {
  font-size: clamp(40px, 7vw, 120px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ice);
  margin-bottom: 3vh;
  max-width: 18ch;
}
.v5-results-title .v5-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.05em;
}
.v5-results-title .v5-letter {
  display: inline-block;
  will-change: transform, opacity;
}
.v5-results-desc {
  font-size: clamp(16px, 1.3vw, 21px);
  color: var(--frost);
  opacity: 0.7;
  max-width: 62ch;
  line-height: 1.5;
}
.v5-results-reel {
  display: flex;
  flex-direction: column;
}
.v5-results-row {
  width: 100vw;
  min-height: 68vh;
  display: grid;
  align-items: center;
  padding: 8vh 6vw;
  position: relative;
  gap: 4vw;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.v5-results-row[data-side="left"]  { grid-template-columns: 1.35fr 1fr; }
.v5-results-row[data-side="right"] { grid-template-columns: 1fr 1.35fr; }
.v5-results-row[data-side="right"] .v5-results-num-wrap { order: 2; justify-self: end; text-align: right; }
.v5-results-row[data-side="right"] .v5-results-meta     { order: 1; }
.v5-results-num-wrap {
  position: relative;
  padding: 2vh 0;
}
.v5-results-rule {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-glow);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0;
}
.v5-results-row[data-side="right"] .v5-results-rule { transform-origin: right; }
.v5-results-num {
  font-size: clamp(110px, 18vw, 300px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  white-space: nowrap;
  --glow-strength: 0.3;
}
/* ── v4.5.1: digit-roulette barrel-roll structure ────────────────── */
.v5-digit {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: top;
}
.v5-digit-inner {
  display: block;
  line-height: 1;
  will-change: transform, filter;
}
.v5-digit-char {
  display: block;
  height: 1em;
  line-height: 1;
}
.v5-digit-suffix {
  display: inline-block;
  line-height: 1;
  vertical-align: top;
  will-change: transform, opacity, filter;
}
/* Solid brand colour + glow (replaces gradient text so digit roll renders cleanly) */
.v5-results-row[data-color="cyan"] .v5-results-num {
  color: #00e8e6;
  text-shadow: 0 0 calc(40px * var(--glow-strength)) rgba(0, 232, 230, calc(0.45 * var(--glow-strength)));
}
.v5-results-row[data-color="rose"] .v5-results-num {
  color: #ff8bbd;
  text-shadow: 0 0 calc(40px * var(--glow-strength)) rgba(255, 139, 189, calc(0.45 * var(--glow-strength)));
}
.v5-results-row[data-color="teal"] .v5-results-num {
  color: #3fe3c0;
  text-shadow: 0 0 calc(40px * var(--glow-strength)) rgba(63, 227, 192, calc(0.45 * var(--glow-strength)));
}
.v5-results-label {
  font-size: clamp(20px, 2.1vw, 36px);
  font-weight: 600;
  color: var(--ice);
  margin-bottom: 2vh;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.v5-results-note {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--frost);
  opacity: 0.72;
  margin-bottom: 3vh;
  max-width: 48ch;
}
.v5-results-source {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist);
  opacity: 0.8;
  font-weight: 500;
}

/* ── v5 Section 5: WHO I AM — zoom-out + cloud + stats ─────────────── */
.v5-about-wrap {
  padding: 14vh 0 6vh;
}
.v5-about-hero {
  padding: 0 6vw 4vh;
  position: relative;
  overflow: hidden;
}
.v5-about-tag {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  margin-bottom: 4vh;
  font-weight: 500;
}
.v5-about-headline {
  font-size: clamp(72px, 16vw, 320px);
  font-weight: 100;
  line-height: 0.85;
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, #e8f4ff 0%, #7f9dbc 35%, #00e8e6 75%, #ff8bbd 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  transform-origin: left center;
  will-change: transform;
}
.v5-about-body {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 6vw;
  padding: 10vh 6vw 8vh;
  align-items: start;
}
.v5-about-copy {
  max-width: 46ch;
}
.v5-about-sub {
  font-size: clamp(20px, 1.8vw, 30px);
  font-weight: 600;
  color: var(--ice);
  margin-bottom: 3vh;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.v5-about-bio {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--frost);
  opacity: 0.82;
}
/* ── v4.5: 3×3 numbered capability grid (replaces pill cloud) ─────── */
.v5-about-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 16em);     /* v4.5.3: THREE explicit rows, ALL 16em tall. Bulletproof uniform. */
  gap: 1.2vw;
  padding-top: 1vh;
  align-items: stretch;
}
.v5-about-caps > .v5-cap { height: 100%; align-self: stretch; }
.v5-cap {
  position: relative;
  padding: 2.2vw 2vw 2.4vw;
  background: rgba(10, 16, 32, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .5s var(--ease-smooth), border-color .4s ease, background .4s ease;
  cursor: default;
  will-change: transform, opacity;
  overflow: hidden;
}
.v5-cap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform .6s var(--ease-smooth), opacity .4s ease;
}
.v5-cap:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(14, 22, 42, 0.55);
}
.v5-cap:hover::before { transform: scaleX(1); opacity: 0.7; }
.v5-cap[data-color="cyan"] { color: #00e8e6; }
.v5-cap[data-color="rose"] { color: #ff8bbd; }
.v5-cap[data-color="teal"] { color: #3fe3c0; }
.v5-cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.2vw;
}
.v5-cap-num {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: currentColor;
  font-variant-numeric: tabular-nums;
}
.v5-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  box-shadow: 0 0 10px currentColor;
}
.v5-cap-name {
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ice);
  margin-bottom: 1vw;
  line-height: 1.15;
}
.v5-cap-desc {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--frost);
  opacity: 0.72;
}

.v5-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.v5-about-stat {
  padding: 7vh 4vw;
  border-right: 1px solid var(--border-faint);
  position: relative;
  overflow: hidden;
  transition: background .4s ease;
}
.v5-about-stat:last-child { border-right: none; }
.v5-about-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.v5-about-stat[data-color="cyan"]::before { background: radial-gradient(circle at 30% 30%, rgba(0, 232, 230, 0.10), transparent 65%); }
.v5-about-stat[data-color="rose"]::before { background: radial-gradient(circle at 30% 30%, rgba(255, 139, 189, 0.08), transparent 65%); }
.v5-about-stat[data-color="teal"]::before { background: radial-gradient(circle at 30% 30%, rgba(0, 201, 167, 0.09), transparent 65%); }
.v5-about-stat:hover::before { opacity: 1; }
.v5-about-statnum {
  font-size: clamp(64px, 7.5vw, 140px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 2.5vh;
  font-variant-numeric: tabular-nums;
}
.v5-about-stat[data-color="cyan"] .v5-about-statnum {
  background: linear-gradient(135deg, #00e8e6, #018ccd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-about-stat[data-color="rose"] .v5-about-statnum {
  background: linear-gradient(135deg, #ff6ba8, #ff8bbd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-about-stat[data-color="teal"] .v5-about-statnum {
  background: linear-gradient(135deg, #00c9a7, #00e8e6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-about-statlabel {
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 600;
  color: var(--ice);
  margin-bottom: 1.2vh;
  letter-spacing: -0.008em;
}
.v5-about-statdetail {
  font-size: clamp(12px, 0.95vw, 14px);
  color: var(--mist);
  opacity: 0.85;
  line-height: 1.55;
}

/* ── v4.4 mobile fallbacks for all three rebuilt sections ─────────── */
@media (max-width: 991px) {
  .v5-approach-wrap,
  .v5-approach-sticky { height: auto; }
  .v5-approach-track { flex-direction: column; width: 100vw; height: auto; }
  .v5-approach-panel {
    height: auto;
    min-height: 82vh;
    grid-template-columns: 1fr;
    padding: 9vh 6vw 7vh;
    gap: 3vh;
  }
  .v5-approach-content { max-width: 100%; }
  .v5-approach-desc    { max-width: 100%; }
  .v5-approach-num     { font-size: clamp(110px, 40vw, 220px); }
  .v5-approach-hint    { display: none; }
  .v5-approach-tag-global { position: static; padding: 4vh 6vw 0; }

  .v5-results-row,
  .v5-results-row[data-side="left"],
  .v5-results-row[data-side="right"] {
    grid-template-columns: 1fr;
    gap: 3vh;
    min-height: auto;
    padding: 7vh 6vw;
  }
  .v5-results-row[data-side="right"] .v5-results-num-wrap { order: 1; justify-self: start; text-align: left; }
  .v5-results-row[data-side="right"] .v5-results-meta     { order: 2; }
  .v5-results-num { font-size: clamp(80px, 30vw, 160px); }

  .v5-about-body  { grid-template-columns: 1fr; gap: 5vh; padding: 6vh 6vw; }
  .v5-about-caps  { grid-template-columns: 1fr; gap: 2vh; }
  .v5-cap         { padding: 6vw 6vw 7vw; }
  .v5-about-stats { grid-template-columns: 1fr; }
  .v5-about-stat  {
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
    padding: 6vh 6vw;
  }
  .v5-about-stat:last-child { border-bottom: none; }
  .v5-about-headline { font-size: clamp(72px, 22vw, 180px); }
}

/* ── Kinetic scrub row opacities ──────────────────────────────────────── */
.ks-row:nth-child(1) .ks-track { opacity: .78; }
.ks-row:nth-child(2) .ks-track { opacity: .9;  }
.ks-row:nth-child(3) .ks-track { opacity: .72; }
.ks-row:nth-child(4) .ks-track { opacity: .95; }
.ks-row:nth-child(5) .ks-track { opacity: .7;  }
.ks-row:nth-child(6) .ks-track { opacity: .9;  }

/* ── "Where time is wasted" — backdrop + coloured rows ───────────────── */
/* Override Webflow's flat dark fill with a diagonal gradient plus two
   large soft radial glows (cyan top-left, rose bottom-right) and a
   subtle edge vignette to pull focus centre. */
.section_problem, section.section_problem.ks-section {
  background:
    radial-gradient(ellipse 65% 55% at 15% 20%, rgba(0, 232, 230, 0.22) 0%, rgba(0, 232, 230, 0) 60%),
    radial-gradient(ellipse 60% 50% at 88% 85%, rgba(255, 139, 189, 0.18) 0%, rgba(255, 139, 189, 0) 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(135deg, rgba(8,24,42,0.55) 0%, rgba(10,21,40,0.55) 45%, rgba(18,15,36,0.58) 75%, rgba(26,15,31,0.58) 100%)
    !important;
  position: relative;
}

/* Row text colours — cyan / teal / rose / ice, cycled. Applied via
   text fill-colour so the kinetic scrub remains crisp. */
.section_problem .ks-row:nth-child(1) .ks-text { color: #00e8e6; }  /* cyan     */
.section_problem .ks-row:nth-child(2) .ks-text { color: #dfefff; }  /* ice      */
.section_problem .ks-row:nth-child(3) .ks-text { color: #ff8bbd; }  /* rose     */
.section_problem .ks-row:nth-child(4) .ks-text { color: #00c9a7; }  /* teal     */
.section_problem .ks-row:nth-child(5) .ks-text { color: #dfefff; }  /* ice      */
.section_problem .ks-row:nth-child(6) .ks-text { color: #00e8e6; }  /* cyan     */

/* Separator dots pick up the row colour too */
.section_problem .ks-row:nth-child(1) .ks-sep { color: #00e8e6; }
.section_problem .ks-row:nth-child(2) .ks-sep { color: #dfefff; }
.section_problem .ks-row:nth-child(3) .ks-sep { color: #ff8bbd; }
.section_problem .ks-row:nth-child(4) .ks-sep { color: #00c9a7; }
.section_problem .ks-row:nth-child(5) .ks-sep { color: #dfefff; }
.section_problem .ks-row:nth-child(6) .ks-sep { color: #00e8e6; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary, .cta_primary {
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-primary:hover, .cta_primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 48px rgba(0, 229, 255, 0.6);
}

.btn-ghost, .cta_ghost {
  transition: border-color .2s, color .2s, transform .2s;
}
.btn-ghost:hover, .cta_ghost:hover {
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--ice);
  transform: translateY(-2px);
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.navbar.is-scrolled {
  background: rgba(7, 13, 26, 0.85) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
}

/* ── 3D Tilt ──────────────────────────────────────────────────────────── */
[data-tilt] { transition: transform .06s ease; }
[data-tilt]:not(:hover) { transition: transform .4s var(--ease-reveal); }