/* ================================================================
   Vitality Desk — site styles
   Layered on top of colors_and_type.css. High-tech dark theme.
   colors_and_type.css must be linked BEFORE this file in index.html.
   ================================================================ */

/* ---- Hard text-color floors (don't ever fall back to dark on dark) ---- */
body,
.vd-hero,
.vd-block,
.vd-block--paper,
.vd-block--paper-deep,
.vd-block--ink,
.vd-block--vital,
.vd-block--mist,
.vd-block--sun,
.vd-block--acid,
.vd-block--electric,
.vd-block--plum,
.vd-stat,
.vd-footer,
.vd-cta-block { color: var(--paper-100); }

h1, h2, h3, h4,
.vd-hero__h,
.vd-block__h,
.vd-manifesto__lead,
.vd-founder__h,
.vd-why__h,
.vd-service__t,
.vd-stat__num,
.vd-cta-block__h,
.vd-quote__body,
.vd-footer__brand { color: var(--paper-100); }

/* ================================================================
   Layout shell
   ================================================================ */
.vd-page {
  padding: 96px 24px 24px;
  display: flex; flex-direction: column; gap: 18px;
  max-width: 1760px; margin: 0 auto;
}
.vd-row { display: grid; gap: 18px; }
.vd-row--2 { grid-template-columns: 1fr 1fr; }
.vd-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.vd-row--asym   { grid-template-columns: 1.4fr 1fr; }
.vd-row--asym-r { grid-template-columns: 1fr 1.4fr; }

/* ================================================================
   Block — the core editorial primitive
   ================================================================ */
.vd-block {
  position: relative;
  border-radius: var(--r-block);
  padding: clamp(28px, 4vw, 64px);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 360px;
}
.vd-block--lg { min-height: 560px; padding: clamp(36px, 5vw, 88px); border-radius: var(--r-block-lg); }
.vd-block--xl { min-height: 720px; padding: clamp(40px, 6vw, 112px); border-radius: var(--r-block-lg); }

.vd-block--ink        { background: linear-gradient(160deg,#16161A 0%,#0E0E10 100%); color: var(--paper-100); border: 1px solid rgba(236,232,230,0.06); }
.vd-block--paper      { background: linear-gradient(160deg,#1E1E22 0%,#16161A 100%); color: var(--paper-100); border: 1px solid rgba(178,58,72,0.10); }
.vd-block--paper-deep { background: linear-gradient(160deg,#1A1A1E 0%,#101012 100%); color: var(--paper-100); border: 1px solid rgba(236,232,230,0.06); }
.vd-block--vital      { background: linear-gradient(160deg,#8B1F2B 0%,#4A1018 100%); color: var(--paper-100); border: 1px solid rgba(255,255,255,0.10); }
.vd-block--mist       { background: linear-gradient(160deg,#241719 0%,#160E10 100%); color: var(--paper-100); border: 1px solid rgba(178,58,72,0.12); }
.vd-block--sun        { background: linear-gradient(160deg,#16161A 0%,#0B0B0D 100%); color: var(--paper-100); border: 1px solid rgba(255,255,255,0.06); }
.vd-block--acid       { background: linear-gradient(160deg,#2A1612 0%,#160A08 100%); color: var(--paper-100); border: 1px solid rgba(166,90,63,0.18); }
.vd-block--electric   { background: linear-gradient(160deg,#5A1820 0%,#1A0A0D 100%); color: var(--paper-100); border: 1px solid rgba(178,58,72,0.25); }
.vd-block--plum       { background: linear-gradient(160deg,#1A0D0F 0%,#0E0707 100%); color: var(--paper-100); border: 1px solid rgba(178,58,72,0.10); }

.vd-block__chrome {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.6; margin-bottom: 28px;
}
.vd-block__h    { font-family: var(--font-display-heavy); font-size: clamp(40px, 5.2vw, 96px); line-height: 0.9; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.vd-block__h--xl{ font-size: clamp(56px, 8vw, 168px); line-height: 0.86; letter-spacing: -0.035em; }
.vd-block__sub  { font-size: clamp(16px, 1.4vw, 22px); line-height: 1.45; margin: 18px 0 0; max-width: 56ch; opacity: 0.85; }
.vd-block__foot { margin-top: auto; padding-top: 32px; }

/* ================================================================
   Scroll-reveal
   ================================================================ */
.vd-reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo); }
.vd-reveal.is-in { opacity: 1; transform: none; }

/* ================================================================
   Pill nav (floating)
   ================================================================ */
.vd-nav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 8px;
  background: rgba(11,11,13,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 6px;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 32px rgba(11,11,13,0.18);
  transition: box-shadow var(--d-med) var(--ease-out-expo);
}
.vd-nav.is-scrolled { box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.vd-nav__brand {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 10px 12px;
  border-radius: var(--r-pill);
  background: var(--paper-100); color: var(--ink-900);
  font-family: var(--font-display-heavy); font-size: 13px;
  letter-spacing: -0.005em; text-transform: uppercase;
}
.vd-nav__brand img { width: 24px; height: 24px; display: block; }
.vd-nav__links { display: flex; gap: 2px; align-items: center; }
.vd-nav__links a {
  padding: 10px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--paper-100);
  transition: background var(--d-fast), color var(--d-fast);
}
.vd-nav__links a:hover { background: rgba(255,255,255,0.1); }
.vd-nav__cta {
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--vital-500); color: var(--paper-100);
  font-size: 13px; font-weight: 600;
}
.vd-nav__cta:hover { background: var(--vital-600); }

/* ================================================================
   Buttons
   ================================================================ */
.vd-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: var(--r-pill); border: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  letter-spacing: 0.005em; cursor: pointer; text-decoration: none;
  transition: transform var(--d-fast) var(--ease-out-expo),
              background var(--d-fast) var(--ease-out-expo);
}
.vd-btn:hover { transform: translateY(-2px); }
.vd-btn--lg { padding: 22px 36px; font-size: 17px; }
.vd-btn--vital        { background: var(--vital-500); color: var(--paper-100); }
.vd-btn--vital:hover  { background: var(--vital-600); }
.vd-btn--ink          { background: var(--ink-900); color: var(--paper-100); }
.vd-btn--paper        { background: var(--paper-100); color: var(--ink-900); }
.vd-btn--paper:hover  { background: #fff; }
.vd-btn--outline-ink         { background: var(--vital-500); color: var(--paper-100); border: 1.5px solid var(--vital-500); }
.vd-btn--outline-ink:hover   { background: var(--vital-600); border-color: var(--vital-600); }
.vd-btn--outline-paper       { background: transparent; color: var(--paper-100); border: 1.5px solid var(--paper-100); }
.vd-btn--ghost-dark          { background: rgba(255,255,255,0.1); color: var(--paper-100); }

/* ================================================================
   HERO
   ================================================================ */
.vd-hero {
  background: #060608; color: var(--paper-100);
  border-radius: var(--r-block-lg);
  padding: clamp(40px, 5vw, 80px);
  min-height: 82vh;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  isolation: isolate;
}
.vd-hero > *:not(.vd-hero__fx) { position: relative; z-index: 2; }

/* --- FX container, parallax target --- */
.vd-hero__fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --mx: 0; --my: 0;
}

/* gradient mesh — drifting orbs in maroon/sun */
.vd-hero__mesh {
  position: absolute; inset: -10%; filter: blur(70px); opacity: 0.85;
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 18px), 0);
  transition: transform 0.2s linear;
  will-change: transform;
}
.vd-hero__orb { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; }
.vd-hero__orb--a { left: -8%; top: -12%;   background: radial-gradient(circle, #8B1F2B 0%, rgba(139,31,43,0) 60%); animation: vdOrbA 22s var(--ease-in-out) infinite alternate; }
.vd-hero__orb--b { right: -10%; top: 12%;  background: radial-gradient(circle, #B23A48 0%, rgba(178,58,72,0) 62%); animation: vdOrbB 26s var(--ease-in-out) infinite alternate; }
.vd-hero__orb--c { left: 12%; bottom: -18%; background: radial-gradient(circle, #4A1018 0%, rgba(74,16,24,0) 60%); animation: vdOrbC 24s var(--ease-in-out) infinite alternate; }
.vd-hero__orb--d { right: 6%; bottom: -8%;  background: radial-gradient(circle, #C9A14A 0%, rgba(201,161,74,0) 58%); animation: vdOrbD 28s var(--ease-in-out) infinite alternate; opacity: 0.35; }
@keyframes vdOrbA { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(22%, 26%, 0) scale(1.25); } }
@keyframes vdOrbB { 0% { transform: translate3d(0,0,0) scale(1.05); } 100% { transform: translate3d(-26%, 30%, 0) scale(0.85); } }
@keyframes vdOrbC { 0% { transform: translate3d(0,0,0) scale(0.95); } 100% { transform: translate3d(30%, -22%, 0) scale(1.2); } }
@keyframes vdOrbD { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-22%, -26%, 0) scale(1.15); } }

/* dotted grid (mask follows cursor) */
.vd-hero__grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,239,234,0.07) 1px, transparent 1.4px);
  background-size: 38px 38px;
  background-position: calc(var(--mx) * -14px) calc(var(--my) * -14px);
  mask-image: radial-gradient(ellipse at calc(50% + var(--mx) * 8%) calc(60% + var(--my) * 6%), #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at calc(50% + var(--mx) * 8%) calc(60% + var(--my) * 6%), #000 35%, transparent 80%);
  transition: background-position 0.2s linear;
}

/* floating geometry */
.vd-hero__geo {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--mx) * 28px), calc(var(--my) * 28px), 0);
  transition: transform 0.25s ease-out;
}
.vd-hero__shape { position: absolute; opacity: 0.5; will-change: transform; }
.vd-hero__shape--ring   { width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(244,239,234,0.14); top: 12%; right: 8%; animation: vdFloatA 18s var(--ease-in-out) infinite alternate; }
.vd-hero__shape--ring2  { width: 220px; height: 220px; border-radius: 50%; border: 1px dashed rgba(178,58,72,0.45); top: 18%; right: 14%; animation: vdSpin 60s linear infinite; }
.vd-hero__shape--diamond{ width: 140px; height: 140px; border: 1px solid rgba(215,226,226,0.22); transform: rotate(45deg); left: 6%; bottom: 22%; animation: vdFloatB 22s var(--ease-in-out) infinite alternate; }
.vd-hero__shape--line   { width: 280px; height: 1px; background: linear-gradient(90deg, transparent, rgba(178,58,72,0.7), transparent); left: 38%; top: 20%; animation: vdFloatC 14s var(--ease-in-out) infinite alternate; }
.vd-hero__shape--dot    { width: 8px; height: 8px; border-radius: 50%; background: var(--vital-300); box-shadow: 0 0 24px 4px rgba(178,58,72,0.6); left: 22%; top: 38%; animation: vdFloatD 13s var(--ease-in-out) infinite alternate; }
.vd-hero__shape--bar    { width: 6px; height: 180px; background: linear-gradient(180deg, transparent, rgba(201,161,74,0.5), transparent); right: 26%; bottom: 14%; animation: vdFloatE 16s var(--ease-in-out) infinite alternate; }

@keyframes vdFloatA { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-30px,40px,0); } }
@keyframes vdFloatB { 0% { transform: rotate(45deg) translate3d(0,0,0); } 100% { transform: rotate(60deg) translate3d(20px,-30px,0); } }
@keyframes vdFloatC { 0% { transform: translate3d(0,0,0); opacity: 0.3; } 100% { transform: translate3d(40px,20px,0); opacity: 0.7; } }
@keyframes vdFloatD { 0% { transform: translate3d(0,0,0); opacity: 0.6; } 100% { transform: translate3d(60px,-40px,0); opacity: 1; } }
@keyframes vdFloatE { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-20px,-30px,0); } }
@keyframes vdSpin   { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* HUD reticle (follows pointer) */
.vd-hero__hud {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: rgba(178,58,72,0.55); stroke-width: 0.08;
  opacity: 0.6;
  transform: translate3d(calc(var(--mx) * 40px), calc(var(--my) * 40px), 0);
  transition: transform 0.18s ease-out;
  animation: vdHudPulse 4s var(--ease-in-out) infinite;
}
@keyframes vdHudPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* Vertical data streams */
.vd-hero__streams { position: absolute; inset: 0; overflow: hidden; }
.vd-hero__streams span {
  position: absolute; top: -20%; width: 1px; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(178,58,72,0.6), transparent);
  animation: vdStream 5s linear infinite;
  will-change: transform;
}
.vd-hero__streams span:nth-child(1) { left: 8%;  animation-delay: 0s; }
.vd-hero__streams span:nth-child(2) { left: 18%; animation-delay: 1.4s; height: 22%; opacity: 0.7; }
.vd-hero__streams span:nth-child(3) { left: 31%; animation-delay: 0.6s; }
.vd-hero__streams span:nth-child(4) { left: 44%; animation-delay: 2.2s; height: 40%; }
.vd-hero__streams span:nth-child(5) { left: 57%; animation-delay: 1.0s; opacity: 0.5; }
.vd-hero__streams span:nth-child(6) { left: 69%; animation-delay: 2.8s; height: 26%; }
.vd-hero__streams span:nth-child(7) { left: 84%; animation-delay: 0.3s; }
.vd-hero__streams span:nth-child(8) { left: 93%; animation-delay: 1.7s; height: 36%; opacity: 0.6; }
@keyframes vdStream { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(0,450%,0); } }

/* Audio waveform */
.vd-hero__wave {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; height: 60px;
  opacity: 0.55; z-index: 1;
}
.vd-hero__wave span {
  display: block; width: 3px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, var(--vital-300), var(--vital-600));
  animation: vdWave 1.4s var(--ease-in-out) infinite;
}
@keyframes vdWave { 0%,100% { height: 6px; opacity: 0.35; } 50% { height: 48px; opacity: 1; } }

/* Sweeping scan beam */
.vd-hero__beam {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(178,58,72,0.08) 49%, rgba(244,239,234,0.10) 50%, rgba(178,58,72,0.08) 51%, transparent 60%);
  background-size: 250% 250%;
  mix-blend-mode: screen;
  animation: vdBeam 9s linear infinite;
}
@keyframes vdBeam { 0% { background-position: 120% 0%; } 100% { background-position: -20% 0%; } }

/* scanlines + vignette */
.vd-hero__scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(215,226,226,0.022) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
}
.vd-hero__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at calc(50% + var(--mx) * 6%) calc(40% + var(--my) * 4%), transparent 40%, rgba(6,6,8,0.65) 100%),
    linear-gradient(180deg, rgba(6,6,8,0.2) 0%, transparent 30%, transparent 70%, rgba(6,6,8,0.4) 100%);
}

/* Pause expensive FX when hero is offscreen */
.vd-hero[data-visible="0"] .vd-hero__fx * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .vd-hero__fx, .vd-hero__fx * { animation: none !important; transition: none !important; }
}

/* Hero foreground content */
.vd-hero__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-300);
}
.vd-hero__top-stack { display: flex; flex-direction: column; gap: 6px; }
.vd-hero__pulse { display: inline-flex; align-items: center; gap: 8px; color: var(--vital-300); }
.vd-pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--vital-500);
  animation: vdPulse 1.6s var(--ease-out-expo) infinite;
}
@keyframes vdPulse {
  0%   { box-shadow: 0 0 0 0 rgba(178,58,72,0.6); }
  100% { box-shadow: 0 0 0 14px rgba(178,58,72,0); }
}

.vd-hero__h {
  font-family: var(--font-display-heavy);
  font-size: clamp(64px, 12vw, 220px);
  line-height: 1.02; letter-spacing: -0.04em;
  margin: 32px 0; text-wrap: balance;
}
.vd-hero__h em { font-style: normal; color: var(--vital-500); }
.vd-hero__h .pill {
  display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(180deg, transparent 0 0.10em, rgba(58,68,82,0.45) 0.10em 0.95em, transparent 0.95em);
  color: var(--vital-300);
  padding: 0 0.08em;
}

.vd-hero__foot { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.vd-hero__sub  { max-width: 56ch; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; color: var(--paper-200); }
.vd-hero__cta  { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.vd-hero__metric {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-300);
}

/* Bottom data ticker */
.vd-hero__ticker {
  position: absolute; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
  border-top: 1px solid rgba(244,239,234,0.06);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  padding: 10px 0;
  z-index: 3;
}
.vd-hero__ticker-track {
  display: inline-flex; gap: 36px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-300);
  animation: vdTicker 28s linear infinite;
}
.vd-hero__ticker-track span { display: inline-block; }
.vd-hero__ticker-track span:nth-child(odd) { color: var(--vital-300); }
@keyframes vdTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================================================================
   Manifesto
   ================================================================ */
.vd-manifesto__lead {
  font-family: var(--font-display-heavy);
  font-size: clamp(36px, 4vw, 68px); line-height: 1.12;
  letter-spacing: -0.02em;
}
.vd-manifesto__lead .hi {
  display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(180deg, transparent 0 0.10em, rgba(58,68,82,0.4) 0.10em 0.95em, transparent 0.95em);
  color: var(--vital-300); padding: 0 0.08em;
}
.vd-manifesto__lead .sun {
  display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(180deg, transparent 0 0.10em, rgba(201,161,74,0.22) 0.10em 0.95em, transparent 0.95em);
  color: #FDE68A; padding: 0 0.08em;
}
.vd-manifesto__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vd-manifesto__list li { display: flex; gap: 16px; align-items: baseline; font-size: 16px; }
.vd-manifesto__list li::before { content: "→"; font-family: var(--font-mono); color: var(--vital-500); font-size: 18px; }

/* ================================================================
   Services mosaic
   ================================================================ */
.vd-services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 280px;
  gap: 18px;
}
.vd-service {
  position: relative; overflow: hidden;
  border-radius: var(--r-block);
  padding: clamp(24px, 2.6vw, 40px);
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer;
  transition: transform var(--d-med) var(--ease-out-expo);
}
.vd-service:hover { transform: translateY(-4px); }
.vd-service::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.10), transparent 40%);
  opacity: 0; transition: opacity 400ms var(--ease-out-expo);
}
.vd-service:hover::after { opacity: 1; }
.vd-service__t { font-family: var(--font-display-heavy); font-size: clamp(28px, 2.8vw, 52px); line-height: 0.95; letter-spacing: -0.018em; }
.vd-service__t--xl { font-size: clamp(40px, 4.4vw, 84px); }
.vd-service__d { font-size: 15px; line-height: 1.45; max-width: 38ch; opacity: 0.85; }
.vd-service__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.vd-service__head { display: flex; justify-content: space-between; align-items: flex-start; }
.s-span-2 { grid-column: span 2; }
.s-span-3 { grid-column: span 3; }
.s-span-4 { grid-column: span 4; }
.s-span-6 { grid-column: span 6; }
.r-span-2 { grid-row: span 2; }

/* ================================================================
   Founder
   ================================================================ */
.vd-founder-grid { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: clamp(32px, 4vw, 80px); align-items: stretch; }
.vd-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-block);
  background: linear-gradient(135deg, #2a221d 0%, #4a3a30 60%, #1a1512 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 28px;
  color: var(--paper-100);
}
.vd-photo--real { background-size: cover !important; background-position: center 18% !important; }
.vd-photo__caption {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-200);
}
.vd-founder__h { font-family: var(--font-display-heavy); font-size: clamp(40px, 4.6vw, 80px); line-height: 0.94; letter-spacing: -0.02em; margin: 0 0 24px; }
.vd-founder__copy p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; margin: 0 0 18px; }
.vd-founder__copy em { font-style: italic; font-weight: 600; }
.vd-founder__sig {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(244,239,234,0.10);
  display: flex; gap: 24px; align-items: center;
}
.vd-founder__sig-name { font-family: var(--font-display-heavy); font-size: 17px; }
.vd-founder__sig-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }

/* ================================================================
   Why us
   ================================================================ */
.vd-why__h { font-family: var(--font-display-heavy); font-size: clamp(48px, 7vw, 128px); line-height: 1.04; letter-spacing: -0.03em; }
.vd-why__h .x {
  display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: var(--vital-500); color: var(--paper-100);
  padding: 0 0.08em;
}
.vd-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.vd-pillar {
  background: rgba(255,255,255,0.06); border-radius: var(--r-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  color: var(--paper-100);
}
.vd-pillar__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; opacity: 0.6; }
.vd-pillar__t   { font-family: var(--font-display-heavy); font-size: 22px; line-height: 1.05; letter-spacing: -0.01em; }
.vd-pillar__d   { font-size: 14px; line-height: 1.5; opacity: 0.85; color: var(--paper-200); }

/* ================================================================
   Results
   ================================================================ */
.vd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vd-stat {
  border-radius: var(--r-block); padding: clamp(20px, 2vw, 32px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 260px;
  overflow: hidden;
}
.vd-stat--ink   { background: linear-gradient(160deg,#16161A 0%,#0E0E10 100%); color: var(--paper-100); border: 1px solid rgba(236,232,230,0.06); }
.vd-stat--vital { background: linear-gradient(160deg,#8B1F2B 0%,#4A1018 100%); color: var(--paper-100); border: 1px solid rgba(255,255,255,0.10); }
.vd-stat--sun   { background: linear-gradient(160deg,#22191A 0%,#120C0D 100%); color: var(--paper-100); border: 1px solid rgba(201,161,74,0.18); }
.vd-stat--paper { background: linear-gradient(160deg,#1E1E22 0%,#16161A 100%); color: var(--paper-100); border: 1px solid rgba(178,58,72,0.10); }
.vd-stat__num   {
  font-family: var(--font-display-heavy);
  font-size: clamp(48px, 5vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.vd-stat__num .u{ font-size: 0.5em; vertical-align: 0.05em; margin-left: 0.04em; letter-spacing: -0.02em; }
.vd-stat__l     { font-size: 13px; line-height: 1.45; opacity: 0.85; max-width: 24ch; }
.vd-stat__tag   { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }

.vd-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vd-flow__col {
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-md); padding: 28px;
  color: var(--paper-100);
}
.vd-flow__col--good { background: var(--ink-900); color: var(--paper-100); border: 1px solid rgba(178,58,72,0.2); }
.vd-flow__col h4 { font-family: var(--font-display-heavy); font-size: 22px; margin-bottom: 18px; }
.vd-flow__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.vd-flow__list li { display: flex; gap: 12px; align-items: baseline; }
.vd-flow__list--bad li { opacity: 0.55; text-decoration: line-through; }
.vd-flow__list--bad li::before  { content: "—"; }
.vd-flow__list--good li::before { content: "✓"; color: var(--vital-300); }

/* ================================================================
   Testimonials
   ================================================================ */
.vd-quote { display: flex; flex-direction: column; gap: 32px; height: 100%; }
.vd-quote__mark { font-family: var(--font-display-heavy); font-size: 120px; line-height: 0.7; margin: -20px 0 -40px; opacity: 0.25; }
.vd-quote__body { font-family: var(--font-display-heavy); font-size: clamp(24px, 2.4vw, 44px); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.vd-quote__foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18); display: flex; justify-content: space-between; align-items: center; }
.vd-quote__foot--dark { border-top-color: rgba(11,11,13,0.15); }
.vd-quote__who { display: flex; flex-direction: column; gap: 2px; }
.vd-quote__name  { font-family: var(--font-display-heavy); font-size: 16px; }
.vd-quote__role  { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; }
.vd-quote__stars { letter-spacing: 0.15em; font-size: 14px; }

/* ================================================================
   Final CTA
   ================================================================ */
.vd-cta-block {
  background: linear-gradient(160deg,#8B1F2B 0%,#3A0E14 60%,#0E0E10 100%);
  color: var(--paper-100);
  border-radius: var(--r-block-lg);
  padding: clamp(48px, 7vw, 120px);
  min-height: 540px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 36px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(178,58,72,0.35);
}
.vd-cta-block::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(178,58,72,0.35), transparent 55%);
}
.vd-cta-block > * { position: relative; z-index: 1; }
.vd-cta-block__h { font-family: var(--font-display-heavy); font-size: clamp(64px, 10vw, 200px); line-height: 0.92; letter-spacing: -0.035em; margin: 0; }
.vd-cta-block__sub { font-size: clamp(18px, 1.5vw, 22px); max-width: 56ch; line-height: 1.45; opacity: 0.95; }
.vd-cta-block__row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.vd-cta-block__foot { margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }

/* ================================================================
   Marquee
   ================================================================ */
.vd-marquee {
  overflow: hidden; padding: 22px 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display-heavy);
  font-size: clamp(32px, 5vw, 72px); line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
}
.vd-marquee--ink   { background: var(--ink-900); color: var(--paper-100); border: 1px solid rgba(178,58,72,0.18); }
.vd-marquee--vital { background: var(--vital-500); color: var(--paper-100); }
.vd-marquee__track {
  display: inline-flex; gap: 48px; padding-left: 48px;
  animation: vdMarquee 28s linear infinite;
}
.vd-marquee__track span::after { content: "●"; margin-left: 48px; color: var(--vital-300); opacity: 0.5; }
@keyframes vdMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================================================================
   Footer
   ================================================================ */
.vd-footer {
  background: var(--ink-900); color: var(--paper-200);
  border-radius: var(--r-block-lg);
  padding: clamp(40px, 5vw, 80px);
  display: flex; flex-direction: column; gap: 48px;
  border: 1px solid rgba(236,232,230,0.06);
}
.vd-footer__top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 48px; }
.vd-footer__brand { font-family: var(--font-display-heavy); font-size: clamp(40px, 5vw, 80px); line-height: 0.9; letter-spacing: -0.02em; color: var(--paper-100); }
.vd-footer__lead  { max-width: 40ch; font-size: 16px; line-height: 1.5; margin-top: 18px; }
.vd-footer__cols  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.vd-footer__col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 16px; color: var(--mist-100); }
.vd-footer__col a  { display: block; font-size: 15px; padding: 4px 0; color: var(--paper-200); }
.vd-footer__col a:hover { color: var(--vital-300); }
.vd-footer__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7;
}

/* ================================================================
   Grid overflow guards
   ================================================================ */
.vd-founder-grid > *, .vd-pillars > *, .vd-services-grid > *,
.vd-stats > *, .vd-flow > *, .vd-row > * { min-width: 0; }
.vd-photo { width: 100%; }
.vd-founder__h, .vd-why__h, .vd-block__h { word-break: normal; overflow-wrap: anywhere; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1100px) {
  .vd-row--2, .vd-row--3, .vd-row--asym, .vd-row--asym-r { grid-template-columns: 1fr; }
  .vd-services-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .s-span-3, .s-span-4, .s-span-6 { grid-column: span 2; }
  .vd-founder-grid { grid-template-columns: 1fr; }
  .vd-stats { grid-template-columns: 1fr 1fr; }
  .vd-stat__num { font-size: clamp(56px, 7vw, 88px); }
  .vd-pillars { grid-template-columns: 1fr; }
  .vd-flow { grid-template-columns: 1fr; }
  .vd-footer__top { grid-template-columns: 1fr; }
  .vd-footer__cols { grid-template-columns: 1fr 1fr; }
  .vd-hero__foot { grid-template-columns: 1fr; }
  .vd-hero__cta { align-items: flex-start; }
  .vd-nav__links { display: none; }
}
@media (max-width: 768px) {
  .vd-page { padding: 88px 16px 16px; gap: 14px; }
  .vd-block { padding: clamp(22px, 5vw, 40px); }
  .vd-block--lg, .vd-block--xl { padding: clamp(24px, 6vw, 56px); }
  .vd-hero { padding: clamp(28px, 5vw, 56px); min-height: auto; }
  .vd-hero__h { font-size: clamp(38px, 10.5vw, 80px); margin: 20px 0; }
  .vd-block__h, .vd-block__h--xl { font-size: clamp(30px, 8vw, 60px); }
  .vd-manifesto__lead { font-size: clamp(26px, 6.5vw, 48px); }
  .vd-why__h { font-size: clamp(34px, 9vw, 72px); }
  .vd-cta-block__h { font-size: clamp(38px, 10.5vw, 88px); }
  .vd-founder__h { font-size: clamp(32px, 7.5vw, 70px); }
  .vd-stat__num { font-size: clamp(44px, 10vw, 80px); }
  .vd-btn--lg { padding: 18px 28px; font-size: 16px; }
}
@media (max-width: 640px) {
  .vd-page { padding: 88px 14px 14px; gap: 12px; }
  .vd-row { gap: 12px; }
  .vd-services-grid { grid-template-columns: 1fr; gap: 12px; grid-auto-rows: auto; }
  .vd-service { min-height: 200px; }
  .s-span-2, .s-span-3, .s-span-4, .s-span-6 { grid-column: span 1; }
  .r-span-2 { grid-row: auto; }
  .vd-stats { grid-template-columns: 1fr; }
  .vd-stat { min-height: 180px; }
  .vd-stat__num { font-size: clamp(48px, 13vw, 80px); }
  .vd-footer__cols { grid-template-columns: 1fr; }
  .vd-hero__top { flex-direction: column; gap: 10px; }
  .vd-hero__top-stack { text-align: left !important; }
  .vd-nav__brand img { display: none; }
  .vd-nav { padding: 4px; gap: 4px; }
  .vd-nav__cta { padding: 8px 14px; font-size: 12px; }
  .vd-nav__brand { padding: 8px 12px; font-size: 11px; }
  /* Aggressive font scaling for small phones */
  .vd-hero__h { font-size: clamp(32px, 9.5vw, 52px); margin: 16px 0; }
  .vd-block__h, .vd-block__h--xl { font-size: clamp(26px, 7.5vw, 44px); }
  .vd-manifesto__lead { font-size: clamp(22px, 6vw, 36px); }
  .vd-why__h { font-size: clamp(28px, 8vw, 52px); }
  .vd-cta-block__h { font-size: clamp(32px, 9.5vw, 60px); }
  .vd-founder__h { font-size: clamp(28px, 7.5vw, 48px); }
  .vd-hero__sub { font-size: clamp(14px, 4vw, 18px); }
  /* Buttons scale down */
  .vd-btn--lg { padding: 15px 22px; font-size: 14px; }
  .vd-btn { padding: 13px 22px; font-size: 14px; }
  /* Block padding tighter */
  .vd-block { padding: clamp(18px, 5vw, 32px); }
  .vd-block--lg, .vd-block--xl { padding: clamp(20px, 5.5vw, 36px); }
  /* Pillar grid stacks to 1 col */
  .vd-pillars { grid-template-columns: 1fr; }
  /* Flow always stacked */
  .vd-flow { grid-template-columns: 1fr; }
  /* Footer cols single */
  .vd-footer__top { grid-template-columns: 1fr; }
}