/* ── Brand Tokens ──────────────────────────────────────── */
  :root {
    --brand-black:        #4A7C59;
    --brand-black-2:      #3E6B4D;
    --brand-grey:         #355E42;
    --brand-grey-border:  #2E5239;
    --brand-white:        #F7F3EC;
    --brand-white-2:      #EDE9E1;
    --brand-muted-dark:   #C8DFD0;
    --brand-muted-light:  #5C5F59;
    --brand-green:        #A8CEAF;
    --brand-green-mid:    #86BB95;
    --brand-green-glow:   #F0F7F2;
    --brand-green-pale:   #D4E8DA;
    --brand-error:        #C0392B;
    --brand-link:         var(--brand-green-mid);
    --font-display:       'Playfair Display', 'Georgia', serif;
    --font-body:          'DM Sans', system-ui, sans-serif;
    --font-mono:          'SF Mono', 'Fira Code', monospace;
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.375rem;
    --text-2xl:   1.75rem;
    --text-3xl:   2.25rem;
    --text-4xl:   3rem;
    --text-5xl:   4rem;
    --text-hero:  5.5rem;
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   1.5rem;
    --space-lg:   2.5rem;
    --space-xl:   4rem;
    --space-2xl:  6rem;
    --space-3xl:  9rem;
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-pill: 999px;
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --duration:   280ms;
    --max-width:  1140px;
    --nav-height: 72px;
  }
  

    /* ── Reset & Base ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }
    body {
      font-family: var(--font-body);
      background: var(--brand-black);
      color: var(--brand-white);
      -webkit-font-smoothing: antialiased;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    .container { width: min(var(--max-width), 92vw); margin: 0 auto; }

    /* ── Drops Overlay ─────────────────────────────────────── */
    #drops-overlay {
      position: fixed; inset: 0;
      pointer-events: none; z-index: 1; overflow: hidden;
    }

    /* ── Navigation ────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100; height: var(--nav-height);
      display: flex; align-items: center;
      border-bottom: 1px solid transparent;
      transition: background var(--duration) var(--ease-out),
                  border-color var(--duration) var(--ease-out);
    }
    nav.scrolled {
      background: rgba(58, 100, 72, 0.96);
      backdrop-filter: blur(12px);
      border-color: var(--brand-grey-border);
    }
    .nav-inner {
      width: min(var(--max-width), 92vw); margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-logo {
      font-family: var(--font-display); font-size: var(--text-xl);
      font-weight: 400; letter-spacing: 0.12em; color: var(--brand-white);
    }
    .nav-links {
      display: flex; gap: var(--space-lg);
      align-items: center; list-style: none;
    }
    .nav-links a {
      font-size: var(--text-sm); font-weight: 400;
      color: var(--brand-muted-dark); letter-spacing: 0.04em;
      transition: color var(--duration) var(--ease-out);
    }
    .nav-links a:hover { color: var(--brand-white); }
    .nav-cta {
      font-size: var(--text-sm) !important; font-weight: 500 !important;
      color: var(--brand-grey) !important; background: var(--brand-white);
      border: 1px solid var(--brand-white);
      padding: 0.45rem 1.2rem; border-radius: var(--radius-pill);
      transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
    }
    .nav-cta:hover { background: var(--brand-green-glow); border-color: var(--brand-green-glow); }

    /* ── Hero ──────────────────────────────────────────────── */
    #hero {
      position: relative; min-height: 100svh;
      display: flex; flex-direction: column; justify-content: center;
      overflow: hidden; background: var(--brand-black);
      padding-top: var(--nav-height);
    }
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(46,82,57,0.45) 0%, transparent 62%);
    }
    #honeycomb-canvas {
      position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    }
    #hero-sun {
      position: absolute; right: 5vw; top: 88px;
      width: clamp(90px, 13vw, 168px); height: clamp(90px, 13vw, 168px);
      z-index: 1; opacity: 0; pointer-events: none;
      animation: heroSunCycle 18s ease-in-out infinite;
    }
    .hero-sun-rays {
      transform-box: fill-box; transform-origin: center;
      animation: heroRaySpin 38s linear infinite;
    }
    @keyframes heroSunCycle {
      0%   { opacity: 0;    transform: scale(0.93); }
      14%  { opacity: 0.82; transform: scale(1);    }
      72%  { opacity: 0.68; transform: scale(1.04); }
      90%  { opacity: 0;    transform: scale(0.97); }
      100% { opacity: 0;    transform: scale(0.93); }
    }
    @keyframes heroRaySpin { to { transform: rotate(360deg); } }
    .hero-content {
      position: relative; z-index: 2;
      padding: var(--space-3xl) 0 var(--space-2xl);
    }
    .hero-eyebrow {
      font-family: var(--font-body); font-size: var(--text-sm);
      font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--brand-green-glow); margin-bottom: var(--space-md); opacity: 0.75;
    }
    .hero-headline {
      font-family: var(--font-display);
      font-size: clamp(3.2rem, 7.5vw, 6rem); font-weight: 700;
      line-height: 1.05; letter-spacing: -0.01em;
      color: var(--brand-white); margin-bottom: var(--space-lg); max-width: 14ch;
    }
    .hero-headline em { font-style: italic; font-weight: 700; color: var(--brand-green-glow); }
    .hero-sub {
      font-size: var(--text-lg); font-weight: 300; color: var(--brand-muted-dark);
      max-width: 48ch; line-height: 1.65; margin-bottom: var(--space-xl);
    }
    .hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 50%;
      transform: translateX(-50%); z-index: 2;
      display: flex; flex-direction: column; align-items: center;
      gap: 0.5rem; color: var(--brand-muted-dark); font-size: var(--text-xs);
      letter-spacing: 0.12em; text-transform: uppercase;
      animation: float 2.4s ease-in-out infinite; opacity: 0.6;
    }
    @keyframes float {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%       { transform: translateX(-50%) translateY(6px); }
    }
    .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--brand-muted-dark)); }

    /* ── Buttons ───────────────────────────────────────────── */
    .btn-primary {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--brand-white); color: var(--brand-grey);
      font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
      letter-spacing: 0.03em; padding: 0.85rem 2rem; border-radius: var(--radius-pill);
      border: 1px solid var(--brand-white); cursor: pointer;
      transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
    }
    .btn-primary:hover { background: var(--brand-green-glow); border-color: var(--brand-green-glow); transform: translateY(-1px); }
    .btn-ghost {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: transparent; color: var(--brand-muted-dark);
      font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
      padding: 0.85rem 1.5rem; border-radius: var(--radius-pill);
      border: 1px solid rgba(200, 223, 208, 0.4); cursor: pointer;
      transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
    }
    .btn-ghost:hover { color: var(--brand-white); border-color: var(--brand-muted-dark); }
    .btn-primary--dark {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--brand-grey); color: var(--brand-white);
      font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
      padding: 0.85rem 2rem; border-radius: var(--radius-pill);
      border: 1px solid var(--brand-grey); white-space: nowrap; cursor: pointer;
      transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
    }
    .btn-primary--dark:hover { background: var(--brand-black); border-color: var(--brand-black); transform: translateY(-1px); }
    .btn-investor {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--brand-white); color: var(--brand-grey);
      font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
      padding: 0.7rem 1.4rem; border: 1px solid var(--brand-white); cursor: pointer;
      white-space: nowrap; transition: background var(--duration), color var(--duration); text-decoration: none;
    }
    .btn-investor:hover { background: var(--brand-green-glow); border-color: var(--brand-green-glow); }

    /* ── Section Basics ────────────────────────────────────── */
    section { padding: var(--space-3xl) 0; }
    .section-label {
      font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--brand-muted-dark); margin-bottom: var(--space-md); opacity: 0.7;
    }
    .section-label--light { color: var(--brand-black-2); opacity: 1; }
    .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, var(--text-5xl)); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; }
    .section-title--dark  { color: var(--brand-grey); }
    .section-title--light { color: var(--brand-white); }
    .section-body { font-size: var(--text-lg); font-weight: 300; line-height: 1.7; max-width: 58ch; }
    .section-body--dark  { color: var(--brand-muted-light); }
    .section-body--light { color: var(--brand-muted-dark); }

    /* ── Problem ───────────────────────────────────────────── */
    #problem { background: var(--brand-black-2); border-top: 1px solid var(--brand-grey-border); }
    .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; margin-top: var(--space-2xl); }
    .problem-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--brand-grey-border); border: 1px solid var(--brand-grey-border); }
    .stat-cell { background: var(--brand-grey); padding: var(--space-lg) var(--space-md); }
    .stat-number { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 4rem); font-weight: 300; color: var(--brand-white); line-height: 1; margin-bottom: 0.5rem; }
    .stat-number span { color: var(--brand-green-glow); }
    .stat-desc { font-size: var(--text-sm); color: var(--brand-muted-dark); line-height: 1.5; font-weight: 300; }
    .problem-prose { display: flex; flex-direction: column; gap: var(--space-md); }
    .problem-quote { border-left: 2px solid var(--brand-green); padding-left: var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; line-height: 1.3; color: var(--brand-white); font-style: italic; margin-top: var(--space-md); }

    /* ── Built Value ───────────────────────────────────────── */
    #built-value { background: var(--brand-white); color: var(--brand-grey); }
    .value-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-2xl); }
    .value-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); }
    .value-col { border-top: 2px solid var(--brand-grey); padding-top: var(--space-md); }
    .value-col-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-muted-light); margin-bottom: var(--space-sm); }
    .value-col-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--brand-grey); line-height: 1.2; margin-bottom: var(--space-sm); }
    .value-col-body { font-size: var(--text-base); color: var(--brand-muted-light); line-height: 1.65; font-weight: 300; }

    /* ── Pillars ───────────────────────────────────────────── */
    #pillars { background: var(--brand-black); border-top: 1px solid var(--brand-grey-border); border-bottom: 1px solid var(--brand-grey-border); }
    .pillars-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--brand-grey-border); margin-top: var(--space-2xl); border: 1px solid var(--brand-grey-border); }
    .pillar { background: var(--brand-black); padding: var(--space-xl) var(--space-lg); position: relative; }
    .pillar::before { content: ''; display: block; width: 32px; height: 2px; background: var(--brand-muted-dark); margin-bottom: var(--space-lg); opacity: 0.5; }
    .pillar-number { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 300; color: var(--brand-grey-border); line-height: 1; position: absolute; top: var(--space-lg); right: var(--space-lg); }
    .pillar-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; color: var(--brand-white); line-height: 1.15; margin-bottom: var(--space-sm); }
    .pillar-body { font-size: var(--text-base); color: var(--brand-muted-dark); line-height: 1.65; font-weight: 300; }

    /* ── Why Paint ─────────────────────────────────────────── */
    #why-paint { background: var(--brand-black-2); }
    .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; margin-top: var(--space-2xl); }
    .adoption-steps { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
    .step { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--brand-grey-border); }
    .step:last-child { border-bottom: none; }
    .step-n { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; color: var(--brand-muted-dark); opacity: 0.6; min-width: 2.5rem; }
    .step-text { font-size: var(--text-base); color: var(--brand-muted-dark); line-height: 1.5; }
    .step-text strong { display: block; color: var(--brand-white); font-weight: 500; margin-bottom: 0.2rem; }

    /* ── HOW IT WORKS ──────────────────────────────────────── */
    #how-it-works { background: var(--brand-white); color: var(--brand-grey); overflow: hidden; }
    .hiw-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-xl); }
    .hiw-scene-wrap {
      border: 1px solid var(--brand-white-2);
      background: var(--brand-white);
      padding: var(--space-lg) var(--space-xl);
      overflow: hidden; margin-top: var(--space-lg);
    }
    .hiw-svg { width: 100%; display: block; height: auto; min-height: 140px; }

    /* HIW animation states */
    .hiw-entry {
      opacity: 0; transform: translate(0, 9px);
      transition: opacity 0.7s var(--ease-out) var(--hd, 0s),
                  transform 0.7s var(--ease-out) var(--hd, 0s);
    }
    .hiw-active .hiw-entry { opacity: 1; transform: translate(0, 0); }
    .hiw-flowpath { opacity: 0; transition: opacity 0.6s var(--ease-out) var(--hd, 0s); }
    .hiw-active .hiw-flowpath { opacity: 1; }
    .hiw-beams { opacity: 0; transition: opacity 1.1s ease 1.4s; }
    .hiw-active .hiw-beams { opacity: 1; }
    .hiw-paint-reveal { opacity: 0; transition: opacity 1.4s ease 1.6s; }
    .hiw-active .hiw-paint-reveal { opacity: 1; }
    .hiw-wall-glow { opacity: 0; transition: opacity 1.6s ease 2.2s; }
    .hiw-active .hiw-wall-glow { opacity: 0.13; }
    .hiw-drip { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 0.9s ease 1.8s; }
    .hiw-active .hiw-drip { stroke-dashoffset: 0; }
    .hiw-drip-blob { opacity: 0; transition: opacity 0.4s ease 2.6s; }
    .hiw-active .hiw-drip-blob { opacity: 1; }

    /* Infinite SVG animations */
    .hiw-rays { transform-box: fill-box; transform-origin: center; animation: hiwRaySpin 28s linear infinite; }
    @keyframes hiwRaySpin { to { transform: rotate(360deg); } }
    .hiw-sun-glow { animation: hiwSunPulse 3.5s ease-in-out infinite; }
    @keyframes hiwSunPulse { 0%,100%{ opacity:.5; } 50%{ opacity:.88; } }
    .hiw-led { animation: hiwLedBlink 1.9s ease-in-out infinite; }
    @keyframes hiwLedBlink { 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
    .hiw-carbon-float { animation: hiwCarbonRise 3.2s ease-in-out infinite; }
    @keyframes hiwCarbonRise { 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(0,-9px); } }

    /* HIW step cards */
    .hiw-steps-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--brand-white-2); border: 1px solid var(--brand-white-2); margin-top: var(--space-md); }
    .hiw-step { background: var(--brand-white); padding: var(--space-md) var(--space-sm); }
    .hiw-step-num { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; color: var(--brand-green-mid); line-height: 1; margin-bottom: var(--space-xs); }
    .hiw-step-text { font-size: var(--text-base); color: var(--brand-muted-light); line-height: 1.6; font-weight: 300; }
    .hiw-step-text .c-blue  { color: #3B72C0; font-weight: 600; font-style: normal; }
    .hiw-step-text .c-green { color: #2D6E45; font-weight: 600; }
    .hiw-step-text .c-amber { color: #B07018; font-weight: 600; }

    /* ── FACTS ─────────────────────────────────────────────── */
    #facts { background: var(--brand-black); border-top: 1px solid var(--brand-grey-border); }
    .facts-video-wrap { margin-top: var(--space-xl); position: relative; border: 1px solid var(--brand-grey-border); overflow: hidden; }
    .facts-video-wrap video { width: 100%; display: block; max-height: 58vh; object-fit: cover; }
    .facts-video-caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: var(--space-md) var(--space-lg);
      background: linear-gradient(to top, rgba(37,62,47,0.92) 0%, transparent 100%);
      display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md);
    }
    .facts-vid-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--brand-white); font-style: italic; }
    .facts-vid-sub { font-size: var(--text-xs); color: var(--brand-muted-dark); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; text-align: right; }
    .facts-data-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-sm); margin-top: var(--space-md); }
    .data-card { background: var(--brand-black-2); border: 1px solid var(--brand-grey-border); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
    .data-card-label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-muted-dark); opacity: 0.65; }
    .data-card-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; color: var(--brand-white); line-height: 1.2; }
    .data-card-sub { font-size: var(--text-xs); color: var(--brand-muted-dark); opacity: 0.55; margin-top: -0.3rem; }
    .data-card-chart { flex: 1; display: flex; flex-direction: column; gap: 0.12rem; }
    .data-bar-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0; }
    .data-bar-label { font-size: 10.5px; font-family: var(--font-body); color: var(--brand-muted-dark); width: 108px; flex-shrink: 0; }
    .data-bar-track { flex: 1; height: 4px; background: var(--brand-grey-border); border-radius: 2px; overflow: hidden; }
    .data-bar-fill {
      height: 100%; border-radius: 2px; width: 0%;
      transition: width 1.1s var(--ease-out) calc(var(--ri, 0) * 0.08s + 0.25s);
    }
    .data-card.visible .data-bar-fill { width: var(--bp, 50%); }
    .data-bar-val { font-size: 10px; font-family: var(--font-mono); color: var(--brand-muted-dark); min-width: 40px; text-align: right; opacity: 0.75; }
    .data-card-source { font-size: var(--text-xs); color: var(--brand-muted-dark); opacity: 0.45; transition: opacity var(--duration); margin-top: auto; padding-top: var(--space-xs); border-top: 1px solid var(--brand-grey-border); }
    .data-card-source:hover { opacity: 0.9; color: var(--brand-green-glow); }

    /* ── Partners ──────────────────────────────────────────── */
    #partners { background: var(--brand-white); color: var(--brand-grey); }
    .partners-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; margin-bottom: var(--space-2xl); }
    .partner-types { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-sm); }
    .partner-type { border: 1px solid var(--brand-white-2); padding: var(--space-md); background: var(--brand-white); box-shadow: 0 2px 12px rgba(46,82,57,0.08), 0 1px 4px rgba(46,82,57,0.05); transition: border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
    .partner-type:hover { border-color: var(--brand-green-pale); background: rgba(74,124,89,0.04); box-shadow: 0 4px 20px rgba(46,82,57,0.13), 0 1px 6px rgba(46,82,57,0.07); }
    .partner-icon { width: 36px; height: 36px; margin-bottom: var(--space-sm); }
    .partner-type-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; color: var(--brand-grey); margin-bottom: 0.35rem; }
    .partner-type-body { font-size: var(--text-sm); color: var(--brand-muted-light); line-height: 1.55; }
    .partners-paint-body { margin-top: var(--space-md); }
    .partners-cta-block { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--brand-white-2); padding-top: var(--space-lg); margin-top: var(--space-md); }
    .partners-cta-text { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--brand-grey); max-width: 40ch; line-height: 1.3; }

    /* ── Vision ────────────────────────────────────────────── */
    #vision { background: var(--brand-black); border-top: 1px solid var(--brand-grey-border); }
    .vision-quote { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,var(--text-4xl)); font-weight: 400; font-style: italic; color: var(--brand-white); line-height: 1.25; max-width: 24ch; margin: var(--space-xl) 0; position: relative; }
    .vision-quote::before { content: '"'; font-size: 6rem; color: var(--brand-muted-dark); opacity: 0.3; line-height: 0; position: absolute; top: 0.6rem; left: -2rem; }
    .founders-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-xl); border-top: 1px solid var(--brand-grey-border); padding-top: var(--space-lg); }
    .founder { display: flex; flex-direction: column; gap: 0.35rem; }
    .founder-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; color: var(--brand-white); }
    .founder-role { font-size: var(--text-sm); color: var(--brand-muted-dark); font-weight: 400; opacity: 0.8; }
    .founder-bio { font-size: var(--text-sm); color: var(--brand-muted-dark); line-height: 1.6; margin-top: 0.2rem; opacity: 0.7; }

    /* ── Developers ────────────────────────────────────────── */
    #developers { background: var(--brand-black-2); border-top: 1px solid var(--brand-grey-border); }
    .dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; margin-top: var(--space-2xl); }
    .dev-contact-card { background: var(--brand-grey); border: 1px solid var(--brand-grey-border); padding: var(--space-lg); box-shadow: 0 8px 32px rgba(15,26,20,0.5), 0 0 48px rgba(251,191,36,0.15), 0 4px 20px rgba(251,191,36,0.08); }
    .dev-card-label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-muted-dark); opacity: 0.65; margin-bottom: var(--space-sm); }
    .dev-card-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; color: var(--brand-white); line-height: 1.2; margin-bottom: var(--space-sm); }
    .dev-card-body { font-size: var(--text-base); color: var(--brand-muted-dark); line-height: 1.65; font-weight: 300; margin-bottom: var(--space-lg); }
    .dev-email-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); font-weight: 500; color: var(--brand-white); border-bottom: 1px solid rgba(200,223,208,0.3); padding-bottom: 0.15rem; transition: border-color var(--duration), color var(--duration); }
    .dev-email-link:hover { color: var(--brand-green-glow); border-color: var(--brand-muted-dark); }

    /* ── Investors ─────────────────────────────────────────── */
    #investors { background: var(--brand-white); color: var(--brand-grey); }
    .learn-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-2xl); }
    .lm-card { border: 1px solid var(--brand-white-2); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
    .lm-card--dark { background: var(--brand-grey); border-color: var(--brand-grey); color: var(--brand-white); }
    .lm-card-eyebrow { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-muted-light); margin-bottom: 0.25rem; }
    .lm-card--dark .lm-card-eyebrow { color: var(--brand-muted-dark); opacity: 0.65; }
    .lm-card-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; line-height: 1.2; color: var(--brand-grey); }
    .lm-card--dark .lm-card-title { color: var(--brand-white); }
    .lm-card-body { font-size: var(--text-base); color: var(--brand-muted-light); line-height: 1.65; font-weight: 300; flex: 1; }
    .lm-card--dark .lm-card-body { color: var(--brand-muted-dark); }
    .lm-card-action { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--brand-white-2); display: flex; align-items: center; justify-content: space-between; }
    .lm-card--dark .lm-card-action { border-color: var(--brand-grey-border); }
    .lm-action-label { font-size: var(--text-sm); color: var(--brand-muted-light); font-weight: 300; }
    .lm-card--dark .lm-action-label { color: var(--brand-muted-dark); }

    /* ── Waitlist Dropdown Panel ───────────────────────────── */
    .wl-panel {
      position: fixed; z-index: 300; width: 300px;
      background: var(--brand-grey); border: 1px solid rgba(255,255,255,0.35);
      box-shadow: 0 12px 40px rgba(15,26,20,0.6), 0 0 48px rgba(251,191,36,0.18), 0 4px 20px rgba(251,191,36,0.10);
      padding: 1.4rem 1.5rem;
      opacity: 0; transform: translateY(-8px); pointer-events: none;
      transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    }
    .wl-panel.open { opacity: 1; transform: translateY(0); pointer-events: all; }
    .wl-panel-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; color: var(--brand-white); margin-bottom: 1rem; line-height: 1.2; }
    .wl-field { margin-bottom: 0.6rem; }
    .wl-field input, .wl-field textarea { display: block; width: 100%; background: var(--brand-black-2); border: 1px solid var(--brand-grey-border); color: var(--brand-white); font-family: var(--font-body); font-size: var(--text-sm); padding: 0.6rem 0.85rem; outline: none; transition: border-color var(--duration); appearance: none; resize: none; }
    .wl-field input::placeholder, .wl-field textarea::placeholder { color: var(--brand-muted-dark); opacity: 0.5; }
    .wl-field input:focus, .wl-field textarea:focus { border-color: var(--brand-muted-dark); }
    .wl-field input.wl-err, .wl-field textarea.wl-err { border-color: var(--brand-error); animation: wlShake 0.35s ease; }
    .dev-email-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
    @keyframes wlShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
    .wl-submit { display: block; width: 100%; background: var(--brand-white); color: var(--brand-grey); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; padding: 0.65rem 1rem; border: 1px solid var(--brand-white); cursor: pointer; margin-top: 0.85rem; transition: background var(--duration), border-color var(--duration); }
    .wl-submit:hover { background: var(--brand-green-glow); border-color: var(--brand-green-glow); }
    .wl-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .wl-note { font-size: 10.5px; color: var(--brand-muted-dark); opacity: 0.5; margin-top: 0.6rem; text-align: center; }
    .wl-panel-success { text-align: center; padding: 0.75rem 0; }
    .wl-success-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(240,247,242,0.08); border: 1px solid var(--brand-muted-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.85rem; }
    .wl-success-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--brand-white); margin-bottom: 0.35rem; }
    .wl-success-sub { font-size: var(--text-sm); color: var(--brand-muted-dark); line-height: 1.5; opacity: 0.8; }
    @media (max-width: 360px) { .wl-panel { width: calc(100vw - 32px) !important; left: 16px !important; } }

    /* ── Footer ────────────────────────────────────────────── */
    footer { background: var(--brand-grey); border-top: 1px solid var(--brand-grey-border); padding: var(--space-2xl) 0 var(--space-xl); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
    .footer-brand-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; letter-spacing: 0.1em; color: var(--brand-white); margin-bottom: var(--space-xs); }
    .footer-brand-tagline { font-size: var(--text-sm); color: var(--brand-muted-dark); font-weight: 300; margin-bottom: var(--space-md); opacity: 0.7; }
    .footer-email { font-size: var(--text-sm); color: var(--brand-muted-dark); transition: color var(--duration); }
    .footer-email:hover { color: var(--brand-white); }
    .footer-col-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-muted-dark); opacity: 0.6; margin-bottom: var(--space-sm); }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
    .footer-links a { font-size: var(--text-sm); color: var(--brand-muted-dark); font-weight: 300; opacity: 0.75; transition: color var(--duration), opacity var(--duration); }
    .footer-links a:hover { color: var(--brand-white); opacity: 1; }
    .footer-bottom { border-top: 1px solid var(--brand-grey-border); padding-top: var(--space-md); display: flex; align-items: center; justify-content: space-between; }
    .footer-legal { font-size: var(--text-xs); color: var(--brand-muted-dark); opacity: 0.5; }
    .footer-location { font-size: var(--text-xs); color: var(--brand-muted-dark); opacity: 0.6; display: flex; align-items: center; gap: 0.4rem; }
    .location-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-muted-dark); animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

    /* ── Reveals ───────────────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ── Responsive ────────────────────────────────────────── */
    @media (max-width: 900px) {
      .problem-grid, .value-header, .why-grid, .partners-header, .founders-row, .hiw-header { grid-template-columns: 1fr; }
      .pillars-row, .value-columns { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
      .problem-stats { grid-template-columns: 1fr 1fr; }
      .partners-cta-block { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
      .nav-links { display: none; }
      .hero-headline { font-size: clamp(2.6rem, 10vw, 4.5rem); }
      .hiw-steps-row { grid-template-columns: 1fr 1fr; }
      .facts-data-grid { grid-template-columns: 1fr; }
      .learn-more-grid, .dev-grid { grid-template-columns: 1fr; }
      .hiw-scene-wrap {
        overflow-x: auto; overflow-y: hidden;
        padding: var(--space-md) var(--space-sm);
        scroll-snap-type: none;
      }
      .hiw-svg { width: 960px; max-width: none; height: auto; min-height: unset; }
    }
    @media (max-width: 600px) {
      :root { --space-3xl: 5rem; --space-2xl: 3.5rem; }
      .partner-types, .hiw-steps-row, .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
      section { padding: var(--space-2xl) 0; }
      .facts-video-caption { flex-direction: column; align-items: flex-start; }
    }
    .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; min-width: 36px; min-height: 36px; }
    .nav-toggle span { width: 24px; height: 2px; background: var(--brand-white); display: block; border-radius: 1px; }
    @media (max-width: 900px) { .nav-toggle { display: flex; } }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

    /* ── Progress Rail ─────────────────────────────────────────── */
    .progress-rail {
      position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
      z-index: 50; display: flex; flex-direction: column; gap: 10px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.5s var(--ease-out);
      list-style: none; margin: 0; padding: 0;
    }
    .progress-rail.visible { opacity: 1; pointer-events: auto; }
    .progress-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(247,243,236,0.28);
      border: 1px solid rgba(247,243,236,0.5);
      transition: all 0.3s var(--ease-out);
      cursor: pointer; position: relative; display: block;
      text-decoration: none;
    }
    .progress-dot:hover { transform: scale(1.55); background: var(--brand-muted-dark); border-color: var(--brand-muted-dark); }
    .progress-dot.active {
      background: var(--brand-green); transform: scale(1.5);
      box-shadow: 0 0 0 3px rgba(168,206,175,0.22);
      border-color: var(--brand-green);
    }
    .progress-label {
      position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
      font-family: var(--font-body); font-size: 9px; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--brand-muted-dark); white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s;
    }
    .progress-dot:hover .progress-label { opacity: 1; }
    /* On light-background sections the dots flip dark */
    .progress-rail.on-light .progress-dot { background: rgba(53,94,66,0.15); border-color: rgba(53,94,66,0.35); }
    .progress-rail.on-light .progress-dot:hover { background: var(--brand-grey); border-color: var(--brand-grey); }
    .progress-rail.on-light .progress-dot.active { background: var(--brand-grey); border-color: var(--brand-grey); box-shadow: 0 0 0 3px rgba(53,94,66,0.15); }
    .progress-rail.on-light .progress-label { color: var(--brand-grey); }
    @media (max-width: 900px) { .progress-rail { right: 12px; gap: 8px; } }
    @media (max-width: 900px) { .progress-dot { width: 6px; height: 6px; } }

    /* ── Scroll to Top ─────────────────────────────────────────── */
    .scroll-top {
      position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 200;
      width: 42px; height: 42px;
      background: var(--brand-grey); color: var(--brand-muted-dark);
      border: 1px solid var(--brand-grey-border);
      cursor: pointer; display: none; align-items: center; justify-content: center;
      transition: background var(--duration), transform var(--duration), opacity var(--duration);
      box-shadow: 0 4px 20px rgba(15,26,20,0.4);
    }
    .scroll-top.visible { display: flex; }
    .scroll-top:hover { background: var(--brand-black); color: var(--brand-white); transform: translateY(-2px); }

/* ── Language Switcher ──────────────────────────────────── */
.lang-switch {
  position: fixed;
  bottom: 9.5rem;
  right: 1.75rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  background: rgba(247, 243, 236, 0.96);
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(46, 82, 57, 0.12);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.lang-switch:hover {
  border-color: rgba(46, 82, 57, 0.28);
  box-shadow: 0 4px 18px rgba(46, 82, 57, 0.18);
}
.lang-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-grey);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.lang-name:hover { color: var(--brand-grey-border); }
.lang-code {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 82, 57, 0.28);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-grey);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lang-code:hover,
.lang-switch.open .lang-code {
  border-color: var(--brand-grey-border);
  background: rgba(46, 82, 57, 0.08);
}
.lang-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: rgba(247, 243, 236, 0.98);
  border: 1px solid rgba(46, 82, 57, 0.18);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(46, 82, 57, 0.14);
  overflow: hidden;
  display: none;
  flex-direction: column;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.lang-switch.open .lang-dropdown { display: flex; }
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-grey);
  transition: background 0.15s;
}
.lang-option:hover { background: rgba(46, 82, 57, 0.06); }
.lang-option.current { color: var(--brand-grey-border); font-weight: 600; }
.lang-option-code {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 82, 57, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-muted-light);
  flex-shrink: 0;
}
.lang-option.current .lang-option-code {
  border-color: var(--brand-grey-border);
  color: var(--brand-grey-border);
}
@media (max-width: 600px) {
  .lang-switch { bottom: 9rem; right: 1rem; padding: 6px 8px 6px 12px; }
  .lang-code { width: 24px; height: 24px; font-size: 9px; }
  .lang-name { font-size: 12px; }
}
/* Hide desktop scroll-to-top and lang-switch on mobile — island replaces them */
@media (max-width: 900px) {
  .scroll-top { display: none !important; }
  .lang-switch { display: none !important; }
}

/* ── Mobile float nav ───────────────────────────────────── */
@media (min-width: 901px) { #xm-nav { display: none !important; } }
#xm-nav {
  display: none;
  position: fixed;
  left: 0; right: 0;
  z-index: 9999;
  justify-content: center;
  pointer-events: none;
}
#xm-nav.xm-on { display: flex; }
#xm-nav-inner {
  display: flex; align-items: center; gap: 2px;
  background: #ffffff; border-radius: 999px; padding: 6px 8px;
  pointer-events: all; position: relative;
  box-shadow: 0 4px 24px rgba(15,26,20,0.22), 0 1px 4px rgba(15,26,20,0.10);
}
#xm-nav-home, #xm-nav-lang-btn {
  display: flex; align-items: center; gap: 6px;
  border: none; background: transparent; cursor: pointer;
  padding: 8px 12px; border-radius: 999px;
  color: var(--brand-grey); font-size: 15px; line-height: 1;
  -webkit-tap-highlight-color: transparent; transition: background 0.15s;
}
#xm-nav-home:hover, #xm-nav-lang-btn:hover { background: rgba(53,94,66,0.08); }
#xm-nav-lang-btn span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.xm-nav-sep { width: 1px; height: 20px; background: rgba(53,94,66,0.15); flex-shrink: 0; }
#xm-nav-lang-wrap { position: relative; }
#xm-nav-langs {
  display: none; flex-direction: column;
  position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 170px;
  background: rgba(247,243,236,0.98); border: 1px solid rgba(53,94,66,0.14);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,26,20,0.18);
}
#xm-nav-langs.xm-open { display: flex; }
#xm-nav-langs a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; text-decoration: none; font-size: 13px; font-weight: 500;
  color: var(--brand-grey); border-bottom: 1px solid rgba(53,94,66,0.08);
  transition: background 0.12s;
}
#xm-nav-langs a:last-child { border-bottom: none; }
#xm-nav-langs a:hover { background: rgba(53,94,66,0.06); }
#xm-nav-langs a.xm-cur { font-weight: 700; color: var(--brand-green); }
.xm-lcode {
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(53,94,66,0.22);
  display: flex; align-items: center; justify-content: center;
}
#xm-nav-langs a.xm-cur .xm-lcode { border-color: var(--brand-green); color: var(--brand-green); }