/* ─────────────────────────────────────
   BRAND TOKENS
───────────────────────────────────── */
:root {
  /* Palette */
  --paper:   #F4EFE6;
  --paper2:  #EDE7DC;
  --white:   #FFFFFF;
  --ink:     #0D1810;
  --ink2:    #1A2E1D;
  --night:   #07100D;
  --night2:  #0C1A14;
  --sig:     #0DC5A8;
  --sigdk:   #089E87;
  --gold:    #B8922A;
  --goldlt:  #CFA84A;
  --slate:   #4A5E52;

  /* Dark bg text — brand spec */
  --dk-h:    #E7E8E8;   /* headers on dark */
  --dk-b:    #B6BBB9;   /* body on dark */
  --dk-dim:  rgba(182,187,185,.75); /* dimmed body */

  /* Light bg text */
  --lt-h:    #0D1810;
  --lt-b:    #4A5E52;
  --lt-dim:  rgba(13,24,16,.4);

  /* Translucent whites */
  --w80: rgba(255,255,255,.8);
  --w60: rgba(255,255,255,.6);
  --w40: rgba(255,255,255,.4);
  --w25: rgba(255,255,255,.25);
  --w15: rgba(255,255,255,.15);
  --w10: rgba(255,255,255,.10);
  --w06: rgba(255,255,255,.06);
  --w04: rgba(255,255,255,.04);

  /* Translucent ink */
  --i60: rgba(13,24,16,.6);
  --i40: rgba(13,24,16,.4);
  --i30: rgba(13,24,16,.3);
  --i20: rgba(13,24,16,.2);
  --i15: rgba(13,24,16,.15);
  --i10: rgba(13,24,16,.10);
  --i06: rgba(13,24,16,.06);
}

/* ─────────────────────────────────────
   RESET & BASE
───────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper);
  color: var(--lt-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ─────────────────────────────────────
   BUTTONS
───────────────────────────────────── */
.btn-primary {
  background: var(--sig);
  color: var(--night);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .25s;
}
.btn-primary:hover { background: #0BE0BF; }

.btn-ghost {
  background: transparent;
  color: var(--dk-h);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid var(--w25);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .25s;
}
.btn-ghost:hover { border-color: var(--w40); color: var(--white); }

/* ─────────────────────────────────────
   NAV
───────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 64px;
  padding: 0 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all .35s;
}
#nav.scrolled {
  background: rgba(244,239,230,.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--i10);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--sig);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-logo-mark svg { width: 16px; height: 16px; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-name { font-size: 13px; font-weight: 600; transition: color .3s; }
.nav-logo-sub  { font-size: 9px; font-weight: 400; letter-spacing: .8px; text-transform: uppercase; transition: color .3s; }
#nav:not(.scrolled) .nav-logo-name { color: var(--dk-h); }
#nav:not(.scrolled) .nav-logo-sub  { color: var(--dk-dim); }
#nav.scrolled .nav-logo-name { color: var(--lt-h); }
#nav.scrolled .nav-logo-sub  { color: var(--lt-dim); }

.nav-wrap { display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
#nav:not(.scrolled) .nav-links a { font-size: 13px; color: var(--dk-dim); transition: color .2s; }
#nav:not(.scrolled) .nav-links a:hover { color: var(--dk-h); }
#nav.scrolled .nav-links a { font-size: 13px; color: var(--i60); transition: color .2s; }
#nav.scrolled .nav-links a:hover { color: var(--lt-h); }

.nav-cta {
  background: var(--sig); color: var(--night);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 9px 22px; border-radius: 100px; border: none;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .25s;
  letter-spacing: .1px;
}
.nav-cta:hover { background: #0BE0BF; }
.nav-cta-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--night);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: var(--sig); font-weight: 800;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: inherit;
}
.menu-toggle svg { width: 24px; height: 24px; }

/* ─────────────────────────────────────
   HERO
───────────────────────────────────── */
#hero {
  min-height: 640px;
  max-height: 860px;
  background: var(--night);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 60% at 25% 65%, rgba(13,197,168,.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 30%, rgba(184,146,42,.04) 0%, transparent 55%);
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--w04) 1px, transparent 1px), linear-gradient(90deg, var(--w04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 90% at 40% 50%, black 20%, transparent 80%);
}
.hero-ambient {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-55%);
  display: flex; flex-direction: column; gap: 0;
  pointer-events: none; z-index: 0;
}
.ha-word {
  font-family: 'DM Serif Display', serif;
  font-size: 120px;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(13,197,168,.07);
  line-height: 1.02;
  letter-spacing: -2px;
  white-space: nowrap;
  padding-right: 32px;
}

/* Left column */
.hero-left {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 56px 72px 64px;
  border-right: 1px solid var(--w06);
  overflow: hidden;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 32px;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sig); flex-shrink: 0;
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(13,197,168,.5);}
  60%{opacity:.6;box-shadow:0 0 0 8px rgba(13,197,168,0);}
}
.hero-eyebrow-text { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--sig); }

.hero-h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 64px;
  line-height: .94;
  letter-spacing: -2px;
  color: var(--dk-h);
  margin-bottom: 28px;
}
.hero-h1 em { font-style: italic; color: var(--goldlt); }

.hero-tagline {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--dk-dim);
  line-height: 1.55;
  margin-bottom: 40px;
  padding-left: 16px;
  border-left: 2px solid var(--sig);
  max-width: 440px;
}
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Right column */
.hero-right {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 64px 72px 52px;
}
.hero-pillars-label {
  font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(182,187,185,.8);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--w10);
  margin-bottom: 0;
}
.pillars-subtitle { opacity:.75; font-weight:400; font-size:9px; font-style:italic; letter-spacing:.3px; text-transform:none; }
.hero-pillar {
  display: flex; gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--w06);
}
.hero-pillar:last-child { border-bottom: none; }
.pillar-bar {
  width: 2.5px; border-radius: 2px; flex-shrink: 0;
  align-self: stretch; min-height: 16px;
}
.pillar-title {
  font-family: 'DM Serif Display', serif;
  font-size: 17px; color: var(--dk-h);
  margin-bottom: 5px; letter-spacing: -.2px;
}
.pillar-desc { font-size: 12px; color: #C8CDCB; line-height: 1.6; font-weight: 300; }

/* ─────────────────────────────────────
   PLATFORM SECTION
───────────────────────────────────── */
#platform { background: var(--paper); padding: 96px 64px 112px; }

.section-kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--sigdk);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-kicker::before { content: ''; width: 20px; height: 1.5px; background: var(--sigdk); }
.section-h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.06; letter-spacing: -1.2px; color: var(--lt-h);
  margin-bottom: 48px;
}
.section-h2 em { font-style: italic; color: var(--gold); }

/* THE INTERACTIVE BLOCK */
.plat-block {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 680px;
  border: 1px solid var(--i15);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 64px rgba(13,24,16,.12);
}

/* ── LEFT: statement panel ── */
.stmt-col {
  background: var(--night2);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--w06);
  overflow: hidden;
}
.stmt-top {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--w06);
  flex-shrink: 0;
}
.stmt-top-label {
  font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(182,187,185,.8);
}
.stmt-list { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.s-btn {
  flex: 1; min-height: 0;
  text-align: left; background: none; border: none;
  cursor: pointer; padding: 0 28px;
  border-left: 3px solid transparent;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  transition: background .2s;
}
.s-btn:hover { background: var(--w04); }
.s-btn.active { background: rgba(var(--rc), .09); border-left-color: rgb(var(--rc)); }

.s-divider { height: 1px; background: var(--w06); flex-shrink: 0; }

.s-cat {
  font-size: 8px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(var(--rc), .65); transition: color .2s;
}
.s-btn:hover .s-cat, .s-btn.active .s-cat { color: rgb(var(--rc)); }

.s-txt {
  font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: 13.5px; color: rgba(231,232,232,.72);
  line-height: 1.35; letter-spacing: -.1px; transition: color .22s;
}
.s-btn:hover .s-txt { color: rgba(231,232,232,.90); }
.s-btn.active .s-txt { color: #FFFFFF; }

.s-out {
  font-size: 9px; font-weight: 600; color: rgb(var(--rc));
  opacity: 0; transform: translateX(-4px); transition: all .3s;
  display: flex; align-items: center; gap: 4px;
}
.s-out::before { content: '→'; font-size: 8px; }
.s-btn.active .s-out { opacity: 1; transform: translateX(0); }

.s-btn.s-overview {
  flex: 0 0 auto; min-height: 52px; max-height: 52px;
  border-top: 1px solid var(--w10);
}
.s-btn.s-overview .s-txt {
  font-family: 'DM Sans', sans-serif; font-style: normal;
  font-size: 13px; font-weight: 500;
}

/* ── RIGHT: diagram panel ── */
.diag-col {
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.diag-header {
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--i10);
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 76px;
}
.diag-label {
  font-size: 9px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--i30);
  margin-bottom: 4px; transition: color .3s;
}
.diag-label.lit { color: var(--ac, var(--sigdk)); }
.diag-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--i30); line-height: 1.2; letter-spacing: -.3px;
  transition: color .3s;
}
.diag-title.lit { color: var(--lt-h); }

/* Canvas fills remaining space exactly */
.diag-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.conn-svg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.conn-path {
  fill: none; stroke: var(--i10); stroke-width: 1.5; stroke-dasharray: 5 4;
  transition: stroke .4s, stroke-width .4s, stroke-dasharray .4s;
}
.conn-path.lit { stroke-dasharray: none; stroke-width: 2; }
.flow-dot { opacity: 0; }

/* Nodes */
.node {
  position: absolute;
  background: var(--paper2);
  border: 1.5px solid var(--i10);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .3s, background .3s, box-shadow .3s, opacity .3s;
  z-index: 2; overflow: hidden;
  display: flex; flex-direction: column;
}
.node::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  background: var(--nc, transparent);
  border-radius: 11px 11px 0 0; opacity: 0; transition: opacity .3s;
}
.node:hover { border-color: var(--i15); background: var(--white); box-shadow: 0 4px 16px rgba(13,24,16,.07); }
.node.lit { border-color: var(--nc, var(--sig)); background: var(--white); box-shadow: 0 8px 28px rgba(13,24,16,.10); }
.node.lit::after { opacity: 1; }
.node.dim { opacity: .15; pointer-events: none; }
.node.spine { --nc: var(--gold); border-color: rgba(184,146,42,.2); background: rgba(184,146,42,.03); }
.node.spine:hover { background: rgba(184,146,42,.07); border-color: rgba(184,146,42,.3); }
.node.spine.lit { border-color: rgba(184,146,42,.5); background: var(--white); }

.n-inner {
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
  height: 100%;
}
.n-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.n-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--i06);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .3s;
}
.n-icon svg { width: 12px; height: 12px; }
.node.lit .n-icon { background: rgba(var(--nrgb, 13,197,168), .12); }
.node.spine.lit .n-icon { background: rgba(184,146,42,.12); }
.n-name { font-size: 11px; font-weight: 700; color: var(--lt-h); letter-spacing: -.1px; line-height: 1.2; }
.n-desc { font-size: 9.5px; color: var(--lt-b); line-height: 1.4; font-weight: 300; }

.n-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.n-tag {
  font-size: 8px; font-weight: 600; padding: 1px 5px; border-radius: 100px;
  background: rgba(184,146,42,.07); border: 1px solid rgba(184,146,42,.18); color: var(--gold);
  transition: all .3s;
}
.node.spine.lit .n-tag { background: rgba(184,146,42,.14); border-color: rgba(184,146,42,.3); }
.n-outcome {
  font-size: 9px; font-weight: 600; color: var(--sigdk);
  letter-spacing: .2px; margin-top: 4px;
  font-style: italic;
}
.n-cta {
  margin-top: auto; padding-top: 6px;
  opacity: 1;
}
.n-cta-link {
  font-size: 9px; font-weight: 600; color: var(--white);
  background: var(--sigdk);
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px; transition: background .2s;
}
.n-cta-link:hover { background: var(--sig); }
.n-cta-soon { font-size: 9px; color: var(--slate); font-weight: 400; font-style: italic; }

/* ─────────────────────────────────────
   HOW IT WORKS
───────────────────────────────────── */
#how { background: var(--paper); padding: 96px 64px; border-top: 1px solid var(--i10); }
.how-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; max-width: 1080px; margin: 0 auto;
}
.how-h {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.06; letter-spacing: -1.2px; color: var(--lt-h); margin-bottom: 20px;
}
.how-h em { font-style: italic; color: var(--gold); }
.how-p { font-size: 15px; color: var(--lt-b); line-height: 1.75; font-weight: 300; margin-bottom: 32px; }
.how-steps { display: flex; flex-direction: column; }
.how-step { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--i10); }
.how-step:last-child { border-bottom: none; }
.hs-n { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 12px; color: var(--sig); flex-shrink: 0; width: 16px; padding-top: 1px; }
.hs-title { font-size: 14px; font-weight: 600; color: var(--lt-h); margin-bottom: 4px; }
.hs-desc { font-size: 13px; color: var(--lt-b); line-height: 1.6; font-weight: 300; }

.pillar-stack { display: flex; flex-direction: column; gap: 12px; }
.ptile {
  background: var(--night); border-radius: 16px; padding: 32px;
  border: 1px solid var(--w06); transition: all .25s;
}
.ptile:hover { background: var(--night2); border-color: var(--w10); }
.pt-tag { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.pt-h { font-family: 'DM Serif Display', serif; font-size: 24px; letter-spacing: -.4px; color: var(--dk-h); margin-bottom: 10px; line-height: 1.1; }
.pt-p { font-size: 13px; color: #C8CDCB; line-height: 1.65; font-weight: 300; }

/* ─────────────────────────────────────
   OUTCOMES
───────────────────────────────────── */
#outcomes { background: var(--night); padding: 96px 64px; border-top: 1px solid rgba(13,24,16,.5); }
.outcomes-kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--sig);
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.outcomes-kicker::before { content: ''; width: 20px; height: 1.5px; background: var(--sig); }
.outcomes-h {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.06; letter-spacing: -1.2px; color: var(--dk-h); margin-bottom: 48px;
}
.outcomes-h em { font-style: italic; color: var(--goldlt); }
.out-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.oc {
  background: var(--w04); border: 1px solid var(--w06);
  border-radius: 14px; padding: 26px; transition: all .25s;
}
.oc:hover { background: var(--w06); border-color: var(--w10); }
.oc-icon { width: 34px; height: 34px; border-radius: 8px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.oc-icon svg { width: 17px; height: 17px; }
.oc-title { font-size: 14px; font-weight: 600; color: var(--dk-h); margin-bottom: 8px; }
.oc-body { font-size: 12px; color: #C8CDCB; line-height: 1.65; font-weight: 300; }
.oc-mods { margin-top: 12px; font-size: 10px; font-weight: 600; color: var(--sig); }

/* ─────────────────────────────────────
   CTA — light background
───────────────────────────────────── */
#cta {
  background: var(--paper); padding: 140px 64px;
  text-align: center; border-top: 1px solid var(--i10);
  position: relative; overflow: hidden;
}
#cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 50% 50%, rgba(184,146,42,.07) 0%, transparent 65%);
}
.cta-bars { display: flex; justify-content: center; align-items: flex-end; gap: 5px; margin-bottom: 44px; }
.ct-b { width: 4px; border-radius: 2px; background: var(--lt-h); opacity: .1; animation: barPulse 1.6s ease-in-out infinite; }
.ct-b:nth-child(1){height:14px;}.ct-b:nth-child(2){height:26px;animation-delay:.12s;}
.ct-b:nth-child(3){height:42px;animation-delay:.24s;}.ct-b:nth-child(4){height:20px;animation-delay:.36s;}
.ct-b:nth-child(5){height:32px;animation-delay:.48s;}
.cta-inner { max-width: 640px; margin: 0 auto; position: relative; }
.cta-h {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(42px, 5.5vw, 70px);
  line-height: .97; letter-spacing: -2.5px; color: var(--lt-h); margin-bottom: 20px;
}
.cta-h em { font-style: italic; color: var(--gold); }
.cta-p { font-size: 16px; color: var(--lt-b); font-weight: 300; line-height: 1.65; margin-bottom: 44px; }
.cta-acts { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-cta-ghost {
  background: transparent; color: var(--i60);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 400;
  padding: 14px 28px; border-radius: 100px;
  border: 1px solid var(--i20); cursor: pointer;
  text-decoration: none; transition: all .25s;
}
.btn-cta-ghost:hover { border-color: var(--i40); color: var(--lt-h); }

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
footer {
  background: var(--night);
  border-top: 1px solid var(--w06);
  padding: 56px 64px 40px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; align-items: start;
}
.ft-brand {}
.ft-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ft-c {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--sig);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--night);
  font-family: 'DM Sans', sans-serif;
}
.ft-wordmark { font-size: 15px; font-weight: 600; color: var(--dk-h); }
.ft-tagline {
  font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: 13px; color: rgba(182,187,185,.8); line-height: 1.5;
  margin-bottom: 20px; max-width: 220px;
}
.ft-alch { display: flex; align-items: center; gap: 6px; }
.ft-alch-txt { font-size: 10px; color: rgba(182,187,185,.7); letter-spacing: .3px; }
.ft-col-title { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dk-dim); margin-bottom: 16px; }
.ft-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.ft-list a { font-size: 13px; color: rgba(182,187,185,.7); transition: color .2s; display: flex; align-items: center; gap: 6px; }
.ft-list a:hover { color: var(--sig); }
.ft-live { font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 100px; background: rgba(13,197,168,.1); color: var(--sig); }
.ft-bottom {
  grid-column: 1/-1;
  border-top: 1px solid var(--w06);
  margin-top: 16px; padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.ft-copy { font-size: 11px; color: rgba(182,187,185,.6); }
.ft-legal { display: flex; gap: 20px; list-style: none; flex-wrap: wrap; }
.ft-legal a { font-size: 11px; color: rgba(182,187,185,.6); transition: color .2s; }
.ft-legal a:hover { color: var(--dk-dim); }

/* ─────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.rv.in { opacity: 1; transform: translateY(0); }
.d1{transition-delay:.08s;}.d2{transition-delay:.16s;}.d3{transition-delay:.24s;}
.d4{transition-delay:.32s;}.d5{transition-delay:.4s;}.d6{transition-delay:.48s;}

/* ════════════════════════════════════════
   RESPONSIVE DESIGN
════════════════════════════════════════ */

/* ── Large Tablet / Small Desktop ── */
@media (max-width: 1200px) {
  #platform { padding: 80px 48px 96px; }
  #how { padding: 80px 48px; }
  #outcomes { padding: 80px 48px; }
  #cta { padding: 100px 48px; }
  footer { padding: 48px 48px 32px; }
  .plat-block { grid-template-columns: 260px 1fr; }
}

/* ── Tablet ── */
@media (max-width: 992px) {
  #nav { padding: 0 24px; }
  #hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    max-height: none;
    min-height: auto;
  }
  .hero-left {
    border-right: none;
    border-bottom: 1px solid var(--w06);
    padding: 100px 24px 48px;
    justify-content: flex-end;
  }
  .hero-right { padding: 48px 24px; }
  .hero-h1 { font-size: 56px; }
  .ha-word { font-size: 80px; }
  .hero-ambient { opacity: .6; }

  .plat-block { grid-template-columns: 220px 1fr; height: 640px; }
  .s-btn { padding: 0 20px; }
  .s-txt { font-size: 12.5px; }

  .how-inner { gap: 48px; }
  .out-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile Landscape / Large Phone ── */
@media (max-width: 768px) {
  #nav { padding: 0 16px; }
  .nav-wrap { gap: 16px; }
  .nav-links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(244,239,230,.98);
    flex-direction: column;
    padding: 0 16px;
    gap: 0;
    border-bottom: 1px solid var(--i10);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
    z-index: 299;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  #nav:not(.scrolled) .nav-links a,
  #nav.scrolled .nav-links a {
    display: block;
    font-size: 15px;
    color: var(--lt-h);
    padding: 16px 0;
    border-bottom: 1px solid var(--i10);
  }
  #nav:not(.scrolled) .nav-links a:hover,
  #nav.scrolled .nav-links a:hover { color: var(--sigdk); }
  .nav-links li:last-child a { border-bottom: none; }
  .menu-toggle { display: block; color: var(--dk-h); }
  #nav.scrolled .menu-toggle { color: var(--lt-h); }

  .hero-h1 { font-size: 44px; letter-spacing: -1.5px; }
  .hero-tagline { font-size: 16px; max-width: none; }
  .ha-word { font-size: 56px; padding-right: 16px; }

  #platform { padding: 64px 16px 80px; }
  .plat-block {
    grid-template-columns: 1fr;
    height: auto;
  }
  .stmt-col {
    border-right: none;
    border-bottom: 1px solid var(--w06);
    height: auto;
  }
  .stmt-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .stmt-list::-webkit-scrollbar { height: 4px; }
  .stmt-list::-webkit-scrollbar-thumb { background: var(--w10); border-radius: 2px; }
  .s-btn {
    flex: 0 0 auto;
    min-height: 72px;
    min-width: 240px;
    padding: 12px 20px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .s-btn.active { border-left-color: transparent; border-bottom-color: rgb(var(--rc)); }
  .s-divider { width: 1px; height: auto; flex-shrink: 0; }
  .s-btn.s-overview { min-height: 52px; max-height: 52px; border-top: none; }

  .diag-col { min-height: 800px; }

  #how { padding: 64px 16px; }
  .how-inner { grid-template-columns: 1fr; gap: 40px; }

  #outcomes { padding: 64px 16px; }
  .out-grid { grid-template-columns: 1fr; }

  #cta { padding: 80px 16px; }
  .cta-h { letter-spacing: -1.5px; }

  footer {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 16px 24px;
  }
  .ft-bottom { margin-top: 8px; }
}

/* ── Small Phone ── */
@media (max-width: 480px) {
  .hero-h1 { font-size: 36px; }
  .ha-word { font-size: 42px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { justify-content: center; }

  .diag-col { min-height: 950px; }

  .how-step { gap: 12px; }
  .ptile { padding: 24px; }
  .pt-h { font-size: 22px; }

  .cta-acts { flex-direction: column; align-items: stretch; }
  .cta-acts .btn-primary,
  .cta-acts .btn-cta-ghost { justify-content: center; }
}