/* ============================================================================
   Velora — hellovelora.com marketing site
   Shared stylesheet. Custom build (no framework). Brand tokens match the
   Velora proposals + portal: Source Serif 4 / Source Sans 3 / IBM Plex Mono,
   ink #0A1E28, cream #FBFAF6, teal #3D778B, gold #B0925A.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* palette */
  --cream:        #FBFAF6;
  --cream-deep:   #F3F1E9;
  --paper:        #ffffff;
  --ink:          #0A1E28;
  --ink-soft:     #14313D;
  --ink-700:      #1E3A46;
  --ink-500:      #3C4646;
  --ink-400:      #586066;
  --gold:         #B0925A;
  --gold-soft:    #C7AB75;
  --gold-deep:    #8E743F;
  --teal:         #3D778B;
  --teal-deep:    #2E6072;
  --teal-soft:    #6FA0B0;
  --rule:         #D2D2DC;
  --rule-soft:    #E8E8EC;
  --muted:        #6b6b6b;

  /* type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:  "Source Sans 3", "Source Sans Pro", -apple-system, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* fluid type scale */
  --fs-display: clamp(2.7rem, 6.2vw, 5.1rem);
  --fs-h1:      clamp(2.3rem, 4.6vw, 3.6rem);
  --fs-h2:      clamp(1.9rem, 3.4vw, 2.8rem);
  --fs-h3:      clamp(1.25rem, 1.8vw, 1.55rem);
  --fs-lead:    clamp(1.08rem, 1.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.72rem;

  /* layout */
  --maxw:       1180px;
  --maxw-prose: 64ch;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(4.5rem, 9vw, 8.5rem);
  --radius:     14px;
  --radius-sm:  9px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-sig: cubic-bezier(.2, .7, .2, 1);   /* signature reveal easing */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 1px 2px rgba(10,30,40,.04), 0 8px 24px -12px rgba(10,30,40,.14);
  --shadow-lift: 0 2px 6px rgba(10,30,40,.06), 0 22px 48px -18px rgba(10,30,40,.24);
  --shadow-deep: 0 4px 12px rgba(8,20,28,.14), 0 36px 80px -28px rgba(8,20,28,.55);
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-500);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

/* --------------------------------------------------------- typography ---- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; color: var(--ink); letter-spacing: -0.018em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { max-width: var(--maxw-prose); }
strong { font-weight: 600; color: var(--ink-soft); }
em { font-style: italic; }

.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* eyebrow — mono uppercase with gold tick */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before { content: ""; width: 1.7em; height: 1px; background: var(--gold); }
.eyebrow.on-ink { color: var(--gold-soft); }
.eyebrow.center { justify-content: center; }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-400); }
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-feature-settings: "tnum"; }

/* ------------------------------------------------------------- layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* alternating bands */
.band-cream { background: var(--cream); }
.band-paper { background: var(--paper); }
.band-deep  { background: var(--cream-deep); }
.band-ink   {
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(61,119,139,.20), transparent 55%),
    radial-gradient(90% 70% at 100% 110%, rgba(176,146,90,.14), transparent 55%),
    linear-gradient(170deg, #0B212C 0%, #081A23 60%, #0A1E28 100%);
  color: rgba(251,250,246,.82); position: relative; isolation: isolate; overflow: hidden;
}
/* hairline grid texture on dark bands — barely-there engineered tell */
.band-ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(111,160,176,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,160,176,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 30%, transparent 80%);
}
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--cream); }
.band-ink .lead { color: rgba(251,250,246,.72); }
.band-ink .muted { color: rgba(251,250,246,.55); }

/* hairline divider */
.rule-soft { border: 0; border-top: 1px solid var(--rule-soft); }

/* section header block */
.sec-head { max-width: 50rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head.center { margin-inline: auto; }
.sec-head h2 { margin-top: 0.9rem; }
.sec-head p { margin-top: 1.1rem; }

/* ------------------------------------------------------------ buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 600;
  padding: 0.85em 1.5em; border-radius: 999px; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary { background: var(--ink); color: var(--cream); box-shadow: 0 8px 22px -8px rgba(10,30,40,.5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(10,30,40,.55); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 8px 22px -10px rgba(176,146,90,.6); }
.btn-gold:hover { transform: translateY(-2px); background: var(--gold-soft); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--rule); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--ink); }
.btn-ghost.on-ink { color: var(--cream); border-color: rgba(251,250,246,.25); }
.btn-ghost.on-ink:hover { border-color: rgba(251,250,246,.6); background: rgba(251,250,246,.06); }

/* animated text underline */
.link-underline { position: relative; font-weight: 600; color: var(--teal-deep); display: inline-flex; align-items: center; gap: 0.4em; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); }
.link-underline svg { width: .9em; height: .9em; transition: transform .25s var(--ease); }
.link-underline:hover svg { transform: translateX(3px); }
.on-ink .link-underline, a.link-underline.on-ink { color: var(--gold-soft); }

/* ------------------------------------------------------------- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,246,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled { border-bottom-color: var(--rule-soft); box-shadow: 0 6px 24px -18px rgba(10,30,40,.4); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: 1.55rem;
  letter-spacing: -0.02em; color: var(--ink); display: inline-flex; align-items: baseline;
}
.wordmark .dot {
  color: var(--gold); display: inline-block; transform-origin: center bottom;
  animation: dot-pulse 5.5s var(--ease-sig) infinite;
}
.wordmark:hover .dot { animation: dot-bounce .6s var(--ease-out); }
@keyframes dot-pulse {
  0%, 92%, 100% { transform: scale(1); opacity: 1; }
  96% { transform: scale(1.35); opacity: .82; }
}
@keyframes dot-bounce {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-4px) scale(1.3); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .wordmark .dot { animation: none !important; } }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  position: relative; font-size: var(--fs-small); font-weight: 500; color: var(--ink-400);
  transition: color .2s; padding-block: 4px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease-sig);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
.nav-login { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
.nav-login:hover { color: var(--teal-deep); }
.nav-toggle { display: none; background: none; border: 0; padding: .4rem; color: var(--ink); }

/* mobile nav */
@media (max-width: 880px) {
  .nav-links, .nav-cta .nav-login { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu {
    display: none; flex-direction: column; gap: .2rem;
    padding: 1rem var(--gutter) 1.6rem; border-top: 1px solid var(--rule-soft); background: var(--cream);
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { padding: .8rem 0; font-size: 1.05rem; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--rule-soft); }
  .mobile-menu .btn { margin-top: 1rem; justify-content: center; }
}
@media (min-width: 881px) { .mobile-menu { display: none !important; } }

/* --------------------------------------------------------------- hero ---- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: var(--fs-display); font-weight: 700; line-height: 1.0; letter-spacing: -0.028em; }
.hero h1 .serif-italic { color: var(--teal-deep); }
.hero .lead { margin-top: 1.6rem; max-width: 38ch; }
.hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-meta { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.hero-meta .item { display: flex; align-items: center; gap: .55em; font-size: var(--fs-small); color: var(--ink-400); }
.hero-meta .item svg { width: 1.1em; height: 1.1em; color: var(--teal); flex: none; }

/* hero ambient glow */
.hero::before {
  content: ""; position: absolute; top: -20%; right: -10%; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(closest-side, rgba(61,119,139,.14), transparent 70%); pointer-events: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }

/* page hero (interior pages) */
.page-hero { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { font-size: var(--fs-h1); margin-top: 1rem; max-width: 18ch; }
.page-hero .lead { margin-top: 1.4rem; max-width: 56ch; }
.page-hero .hero-cta { margin-top: 2rem; }

/* ------------------------------------------------------------- cards ----- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative; background: var(--paper); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: clamp(1.5rem, 2.4vw, 2rem); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  height: 100%;
}
.card::before { /* gold hairline along top, draws on hover */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--rule); box-shadow: var(--shadow-lift); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: .6rem; }
.card p { font-size: var(--fs-small); color: var(--ink-400); }

/* dark "jewel" card */
.card-ink {
  background: linear-gradient(155deg, #0C2530, #081A23);
  border: 1px solid rgba(251,250,246,.1); color: rgba(251,250,246,.74);
}
.card-ink h3 { color: var(--cream); }
.card-ink p { color: rgba(251,250,246,.7); }
.card-ink::after { /* corner bloom */
  content: ""; position: absolute; top: -3rem; right: -3rem; width: 11rem; height: 11rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61,119,139,.45), transparent 72%); opacity: .7; transition: opacity .4s;
}
.card-ink:hover::after { opacity: 1; }

/* framed icon tile */
.icon-tile {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; margin-bottom: 1.4rem;
  background: linear-gradient(160deg, var(--cream-deep), var(--paper));
  border: 1px solid var(--rule-soft); color: var(--teal-deep); transition: all .35s var(--ease);
}
.icon-tile svg { width: 22px; height: 22px; }
.card:hover .icon-tile { border-color: var(--teal-soft); color: var(--teal-deep); background: linear-gradient(160deg, rgba(61,119,139,.1), var(--paper)); }
.card-ink .icon-tile { background: rgba(251,250,246,.07); border-color: rgba(251,250,246,.15); color: var(--gold-soft); }

/* feature card with index number */
.card .idx { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--gold-deep); font-weight: 600; }

/* ----------------------------------------------------- audience selector */
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
@media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card { display: flex; flex-direction: column; }
.audience-card .tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.audience-card h3 { margin: .7rem 0 .5rem; font-size: 1.4rem; }
.audience-card .cta-row { margin-top: auto; padding-top: 1.3rem; }

/* ------------------------------------------------------ how-it-works ----- */
.steps { counter-reset: step; display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.steps.cols-3 { grid-template-columns: repeat(3, 1fr); }
.steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps.cols-3, .steps.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps.cols-3, .steps.cols-4 { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 2.6rem; }
.step .step-num {
  position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: .6em;
}
.step .step-num::before { content: ""; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); display: inline-grid; }
.step h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.step p { font-size: var(--fs-small); color: var(--ink-400); }
.band-ink .step h3 { color: var(--cream); }
.band-ink .step p { color: rgba(251,250,246,.66); }
.band-ink .step .step-num { color: var(--gold-soft); }
.band-ink .step .step-num::before { border-color: rgba(251,250,246,.25); }

/* ------------------------------------------------------ programs split --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.program {
  border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--paper); box-shadow: var(--shadow-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.program:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.program .kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.program h3 { font-size: 1.7rem; margin: .6rem 0 .9rem; }
.program ul { list-style: none; margin-top: 1.4rem; display: grid; gap: .8rem; }
.program li { display: flex; gap: .7em; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-500); }
.program li svg { width: 1.1em; height: 1.1em; color: var(--teal); flex: none; margin-top: .25em; }

/* ------------------------------------------------------------ stat row --- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; gap: 2rem; } }
.stat { text-align: center; }
.stat .figure { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.band-ink .stat .figure { color: var(--cream); }
.stat .label { margin-top: .8rem; font-size: var(--fs-small); color: var(--ink-400); }
.band-ink .stat .label { color: rgba(251,250,246,.6); }
.stat .figure .unit { color: var(--gold); }

/* --------------------------------------------------- pull / quote band --- */
.pull { max-width: 30ch; }
.pull blockquote { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.25; color: var(--cream); letter-spacing: -.015em; }
.pull blockquote .serif-italic { color: var(--gold-soft); }

/* placeholder proof slot (no fake logos) */
.proof-note {
  margin-top: 1.4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: .6em;
}
.proof-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.proof-slot {
  flex: 1 1 140px; min-height: 64px; border: 1px dashed var(--rule); border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--muted); font-family: var(--mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.4);
}

/* --------------------------------------------------------- CTA band ------ */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; bottom: -30%; left: 50%; transform: translateX(-50%);
  width: 80vw; height: 60vw; max-width: 900px; max-height: 600px;
  background: radial-gradient(closest-side, rgba(61,119,139,.22), transparent 70%); pointer-events: none;
}
.cta-band .wrap { position: relative; }
.cta-inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.cta-inner h2 { font-size: var(--fs-h1); }
.cta-inner .hero-cta { justify-content: center; margin-top: 2.2rem; }

/* --------------------------------------------------------------- FAQ ----- */
.faq { max-width: 52rem; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--rule-soft); padding: 1.3rem 0;
}
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 1.1em; height: 1.1em; color: var(--gold-deep); transition: transform .3s var(--ease); }
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq details p { margin-top: .9rem; font-size: var(--fs-small); color: var(--ink-400); }

/* ------------------------------------------------------------- footer ---- */
.site-footer { background: var(--ink); color: rgba(251,250,246,.6); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .wordmark { color: var(--cream); }
.footer-col h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); font-weight: 500; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; display: grid; gap: .7rem; }
.footer-col a { font-size: var(--fs-small); color: rgba(251,250,246,.62); transition: color .2s; }
.footer-col a:hover { color: var(--cream); }
.footer-blurb { font-size: var(--fs-small); color: rgba(251,250,246,.55); max-width: 34ch; margin-top: 1rem; }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.8rem; border-top: 1px solid rgba(251,250,246,.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: rgba(251,250,246,.45);
}
.footer-bottom .disclaimer { max-width: 70ch; font-family: var(--mono); font-size: .72rem; line-height: 1.6; letter-spacing: .02em; }

/* ----------------------------------------------------- scroll reveals ---- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease-sig), transform .8s var(--ease-sig), filter .8s var(--ease-sig);
  filter: blur(2px); will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }
.reveal[data-d="5"] { transition-delay: .35s; }
/* directional + scale reveal variants */
.reveal.from-left  { transform: translateX(-30px); }
.reveal.from-right { transform: translateX(30px); }
.reveal.scale-in   { transform: scale(.96) translateY(18px); }
.reveal.in.from-left, .reveal.in.from-right, .reveal.in.scale-in { transform: none; }
/* on narrow screens, X-direction reveals can briefly extend past the viewport
   before they settle — collapse them to a plain Y rise (no horizontal overflow) */
@media (max-width: 720px) {
  .reveal.from-left, .reveal.from-right { transform: translateY(26px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------------------ helpers ---- */
.stack-sm > * + * { margin-top: 1rem; }
.mt-lg { margin-top: clamp(2.5rem, 5vw, 4rem); }
.maxw-narrow { max-width: 44rem; }
.badge {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: .4em .8em; border-radius: 999px;
  background: rgba(61,119,139,.1); color: var(--teal-deep); border: 1px solid rgba(61,119,139,.18);
}
.badge.gold { background: rgba(176,146,90,.12); color: var(--gold-deep); border-color: rgba(176,146,90,.25); }
.badge.soon { background: rgba(251,250,246,.08); color: var(--gold-soft); border-color: rgba(251,250,246,.16); }

/* ---------------------------------------------------- hero art / SVG --- */
.hero-art {
  position: relative; aspect-ratio: 5 / 4.4; border-radius: var(--radius);
  background:
    linear-gradient(155deg, #0C2530 0%, #08191F 100%);
  box-shadow: var(--shadow-lift); overflow: hidden;
  border: 1px solid rgba(251,250,246,.08);
}
/* blueprint grid — faint, the "engineered" tell */
.hero-art::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111,160,176,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,160,176,.12) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(120% 120% at 70% 20%, #000 35%, transparent 78%);
}
/* gold/teal mesh bloom */
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 78% 22%, rgba(176,146,90,.28), transparent 60%),
    radial-gradient(closest-side at 22% 82%, rgba(61,119,139,.34), transparent 62%);
}
/* a floating "case → proposal" card stack rendered in pure CSS */
.hero-art .panel {
  position: absolute; left: 12%; right: 12%; background: rgba(251,250,246,.06);
  border: 1px solid rgba(251,250,246,.14); border-radius: 12px; backdrop-filter: blur(3px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); z-index: 2;
}
.hero-art .panel .rowline { height: 8px; border-radius: 6px; background: rgba(251,250,246,.16); margin: 0 16px; }
.hero-art .panel.top { top: 16%; padding: 18px 0; }
.hero-art .panel.top .rowline { margin-block: 12px; }
.hero-art .panel.top .rowline.short { width: 46%; background: rgba(199,171,117,.55); }
.hero-art .panel.bot { bottom: 14%; padding: 18px 0; transform: rotate(-2deg); transform-origin: left bottom; }
.hero-art .panel.bot .tag { margin: 0 16px 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
.hero-art .panel.bot .rowline { margin-block: 9px; }
.hero-art .panel.bot .rowline.t { width: 80%; background: rgba(111,160,176,.5); }
/* the arrow connecting them */
.hero-art .flow-arrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold); display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(176,146,90,.7);
}
.hero-art .flow-arrow svg { width: 20px; height: 20px; color: var(--ink); }

/* diagram wrapper */
.diagram { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.6rem); box-shadow: var(--shadow-card); }
.diagram svg { width: 100%; height: auto; }


/* ==========================================================================
   ELEVATION LAYER — signature motion system (added in the v2 polish pass)
   Hero SVG pipeline · animated vector diagrams · LF-vs-RP comparison ·
   scroll progress · section indicator · magnetic/tilt finishes · RBP note.
   All transform/opacity only; everything respects prefers-reduced-motion.
   ========================================================================== */

/* ----------------------------------------------- scroll progress bar ----- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 60;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0); transform-origin: left; will-change: transform;
  transition: transform .08s linear; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------------------------------------------- right-rail section nav --- */
.section-nav {
  position: fixed; right: clamp(.9rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: .85rem; align-items: flex-end;
}
.section-nav a {
  display: flex; align-items: center; gap: .6rem; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: transparent; transition: color .3s var(--ease-sig);
}
.section-nav a::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--rule); background: transparent;
  transition: all .3s var(--ease-sig);
}
.section-nav a:hover { color: var(--ink-400); }
.section-nav a:hover::after { border-color: var(--teal); }
.section-nav a.active { color: var(--ink); }
.section-nav a.active::after { background: var(--gold); border-color: var(--gold); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(176,146,90,.15); }
@media (max-width: 1280px) { .section-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .section-nav a::after { transition: none; } }

/* ============================ SIGNATURE HERO SVG PIPELINE ================ */
.hero-svg-art {
  position: relative; aspect-ratio: 1 / .92; border-radius: var(--radius);
  background: linear-gradient(165deg, #0C2733 0%, #07151C 100%);
  box-shadow: var(--shadow-deep); overflow: hidden;
  border: 1px solid rgba(251,250,246,.09);
  transition: transform .4s var(--ease-out);
  transform-style: preserve-3d; will-change: transform;
}
/* blueprint grid — parallax layer (translated by JS via the inner node) */
.hero-svg-art .blueprint {
  position: absolute; inset: -8%; z-index: 0;
  background-image:
    linear-gradient(rgba(111,160,176,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,160,176,.10) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(120% 120% at 60% 30%, #000 30%, transparent 80%);
  will-change: transform;
}
/* ambient blooms */
.hero-svg-art .bloom {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 80% 16%, rgba(176,146,90,.30), transparent 60%),
    radial-gradient(closest-side at 18% 86%, rgba(61,119,139,.34), transparent 62%);
}
.hero-svg-art .pipeline { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.hero-svg-art [data-tilt-shine] {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side at 50% 40%, rgba(251,250,246,.10), transparent 70%);
  transition: transform .3s var(--ease-out); will-change: transform;
}

/* stroke line-draw: paths carry pathLength="1" so 1 unit == whole path */
.hero-svg-art .draw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.5s var(--ease-sig);
}
.hero-svg-art.anim .draw { stroke-dashoffset: 0; }
.hero-svg-art .draw.d2 { transition-delay: .28s; }
.hero-svg-art .draw.d3 { transition-delay: .55s; }

/* the node cards (case in, proposal out) fade+rise as the line reaches them */
.hero-svg-art .node {
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease-sig), transform .7s var(--ease-sig);
}
.hero-svg-art.anim .node { opacity: 1; transform: none; }
.hero-svg-art .node.n1 { transition-delay: .15s; }
.hero-svg-art .node.n2 { transition-delay: .7s; }
.hero-svg-art .node.n3 { transition-delay: 1.25s; }

/* labels */
.hero-svg-art .lbl { opacity: 0; transition: opacity .6s var(--ease-sig); }
.hero-svg-art.anim .lbl { opacity: 1; }
.hero-svg-art .lbl.l2 { transition-delay: .8s; }
.hero-svg-art .lbl.l3 { transition-delay: 1.35s; }

/* flowing gold "value" travelling the path — starts once drawn (settled) */
.hero-svg-art .value-dot {
  offset-path: var(--flow-path);
  offset-rotate: 0deg;
  opacity: 0;
}
.hero-svg-art.settled .value-dot {
  animation: value-travel 3.6s var(--ease-sig) infinite;
}
@keyframes value-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* fallback animated pulse if offset-path unsupported: the comet uses motion via SMIL too */
.hero-svg-art .value-comet { opacity: 0; }
.hero-svg-art.settled .value-comet { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-svg-art .draw { stroke-dashoffset: 0; transition: none; }
  .hero-svg-art .node, .hero-svg-art .lbl { opacity: 1; transform: none; transition: none; }
  .hero-svg-art .value-dot, .hero-svg-art .value-comet { animation: none !important; opacity: 0; }
}

/* ===================== ANIMATED SELF-FUNDING DIAGRAM ===================== */
.diagram.diagram-anim svg { overflow: visible; }
/* boxes scale/fade in sequence when [data-anim] gets .anim */
.diagram-anim .dg-box { opacity: 0; transform: translateY(8px) scale(.98); transform-box: fill-box; transform-origin: center;
  transition: opacity .6s var(--ease-sig), transform .6s var(--ease-sig); }
.diagram-anim.anim .dg-box { opacity: 1; transform: none; }
.diagram-anim .dg-box.b2 { transition-delay: .18s; }
.diagram-anim .dg-box.b3 { transition-delay: .36s; }
.diagram-anim .dg-box.b4 { transition-delay: .54s; }
.diagram-anim .dg-box.b5 { transition-delay: .72s; }
.diagram-anim .dg-text { opacity: 0; transition: opacity .6s var(--ease-sig); }
.diagram-anim.anim .dg-text { opacity: 1; }
.diagram-anim .dg-text.t2 { transition-delay: .22s; }
.diagram-anim .dg-text.t3 { transition-delay: .4s; }
.diagram-anim .dg-text.t4 { transition-delay: .58s; }
.diagram-anim .dg-text.t5 { transition-delay: .76s; }
/* connector lines draw down */
.diagram-anim .dg-flow { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease-sig); }
.diagram-anim.anim .dg-flow { stroke-dashoffset: 0; }
.diagram-anim .dg-flow.f2 { transition-delay: .3s; }
.diagram-anim .dg-flow.f3 { transition-delay: .5s; }
/* gold value pellets travelling down the funding flows (SMIL drives motion) */
.diagram-anim .dg-pellet { opacity: 0; }
.diagram-anim.anim .dg-pellet { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .diagram-anim .dg-box, .diagram-anim .dg-text { opacity: 1; transform: none; transition: none; }
  .diagram-anim .dg-flow { stroke-dashoffset: 0; transition: none; }
  .diagram-anim .dg-pellet { opacity: 0; }
}

/* ===================== LF vs RISK POOL COMPARISON ======================= */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.compare-card {
  position: relative; background: var(--paper); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 2rem); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .35s var(--ease-sig), box-shadow .35s var(--ease-sig);
}
.compare-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.compare-card .ctag { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.compare-card h4 { font-family: var(--serif); font-size: 1.3rem; margin: .5rem 0 1rem; color: var(--ink); }
.compare-bars { display: grid; gap: .9rem; margin-top: 1.2rem; }
.bar-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; align-items: center; font-size: .82rem; color: var(--ink-400); }
.bar-track { position: relative; height: 9px; border-radius: 999px; background: var(--rule-soft); overflow: hidden; }
.bar-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%; width: var(--v, 50%); border-radius: 999px;
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-sig);
}
.bar-fill.teal { background: linear-gradient(90deg, var(--teal-deep), var(--teal-soft)); }
.bar-fill.gold { background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); }
.reveal.in .bar-fill { transform: scaleX(1); }
.bar-fill:nth-of-type(1) { transition-delay: .1s; }
.compare-card ul { list-style: none; margin-top: 1.3rem; display: grid; gap: .65rem; }
.compare-card li { display: flex; gap: .6em; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-500); }
.compare-card li svg { width: 1.05em; height: 1.05em; color: var(--teal); flex: none; margin-top: .25em; }
@media (prefers-reduced-motion: reduce) { .bar-fill { transform: scaleX(1); transition: none; } }

/* ===================== RBP "not the same thing" callout ================== */
.rbp-note {
  margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 100%;
  display: flex; gap: 1rem; align-items: flex-start;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px dashed var(--rule); border-radius: var(--radius-sm);
  background: rgba(61,119,139,.045);
}
.rbp-note .rbp-mark {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(61,119,139,.1); color: var(--teal-deep); border: 1px solid rgba(61,119,139,.2);
}
.rbp-note .rbp-mark svg { width: 18px; height: 18px; }
.rbp-note p { font-size: var(--fs-small); color: var(--ink-400); margin: 0; max-width: none; }
.rbp-note .rbp-k { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: .35rem; }

/* hero positioning/tagline supporting line under the lead */
.hero-tagline {
  margin-top: 1.4rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep); display: flex; align-items: center; gap: .7em;
}
.hero-tagline::before { content: ""; width: 1.8rem; height: 1px; background: var(--gold); flex: none; }

/* ONE small "who's at the table" mention under the coordination grid */
.who-note {
  margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 100%;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: rgba(176,146,90,.05); border-left: 3px solid var(--gold);
}
.who-note p { font-size: var(--fs-small); color: var(--ink-400); margin: 0; max-width: none; }
.who-note .who-k { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: .35rem; }

/* ===================== MICRO-INTERACTION finishes ======================= */
[data-magnetic], [data-tilt] { transition: transform .35s var(--ease-out); will-change: transform; }
/* card hover sheen — a soft gold light passes across on hover */
.card { --sheen: -120%; }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(176,146,90,.10) 48%, transparent 66%);
  transform: translateX(var(--sheen)); transition: transform .9s var(--ease-out); opacity: 0;
}
.card:hover::after { transform: translateX(120%); opacity: 1; }
.card-ink::after { background: linear-gradient(155deg, rgba(61,119,139,.45), transparent 72%); } /* keep existing bloom; no sheen on ink */
.card-ink:hover::after { transform: none; opacity: 1; }
/* program / compare cards get a left gold rail that grows on hover */
.program { position: relative; overflow: hidden; }
.program::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--gold), var(--gold-soft)); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-sig);
}
.program:hover::before { transform: scaleY(1); }

/* button shine micro-interaction */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease-out); pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-gold::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); }

/* step number ring fills with gold tick on reveal */
.step .step-num::before { transition: border-color .4s var(--ease-sig), background .4s var(--ease-sig); }
.reveal.in .step .step-num::before, .step.reveal.in .step-num::before { border-color: var(--gold); }

/* hero meta items get a subtle check pop */
.hero-meta .item svg { transition: transform .3s var(--ease-out); }
.hero-meta .item:hover svg { transform: scale(1.18); }

@media (prefers-reduced-motion: reduce) {
  .card::after, .btn::after, .program::before, [data-magnetic], [data-tilt] { transition: none; }
}