/* ═══════════════════════════════════════════
   LongEdge — Shared Stylesheet
   styles.css  |  v1.0  |  2026
   All pages link to this file.
   Page-specific CSS stays in each HTML file.
═══════════════════════════════════════════ */

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  --black:     #000000;
  --bg:        #06090d;
  --bg2:       #050708;
  --bg3:       #0f1620;
  --bg4:       #0b1219;
  --bgIntro1:  #07070e;
  --bgIntro:   #020206;
  --bg-dark:   #020406; /* darker tone - Phantom Emerald */
  --bg-verydark:       #020506; /* deep black with green tint */
  --bg-light:       #182231; /* ligther tone - grey with green tint */
--bg-Recognition:       #0c1118; /* dark navy-slate */
--bg-Charcoal:       #0a0a0a; /* Charcoal tone - back with grey tint */
--bg-NeutralBlack:       #090909; /* NeutralBlack without Blue */
--bg-BlueBlack:       #080c0f; /* BlueBlack */
--bg-NavyBlack:		#101c2b; /* NavyBlack */
--bg-BlackGreen: 	#0b1219; /* vpsection */
--bg-Divider:	#263545;  /* dark blue grey */
  --surface3:   #0b1219;
  --surface:   #131c27;
  --surface2:  #182231;
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.13);
  --accent:    #00c896;
  --accentmid: #0db3cc;
  --accent-dim:rgba(0,200,150,0.3);
  --accent2:   #1a8fff;
  --amber:     #f0a500;
  --accentRed: #e53935;
  --text:      #dde4ec;
  --muted:     #a8bdd0;
  --muted2:    #8499ae;
  --heading:   #ffffff;
  --radius:    6px;
  --radius8:    8px;
  --fh:        'Syne', sans-serif;
  --fb:        'DM Sans', sans-serif;
  --fs:        Georgia, 'Times New Roman', serif;
  --fu:        'system-ui', sans-serif;
  --muted3:    #527088;
  --transition: .28s cubic-bezier(.4,0,.2,1);
  --brand-ls:  0.06em;
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* noise grain overlay 
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
*/

/* ─────────────────────────────────────────
   UTILITY
───────────────────────────────────────── */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2.5vw 5vw; }

.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem; opacity: 0.6;
}
.tag::before { display:none; }

.le-eyebrow-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 0.5rem; opacity: 0.9;
}

.section-title {
  font-family: var(--fh);
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 600; line-height: 1.24; letter-spacing: -.015em; color: var(--heading); 
  margin-bottom: 2.4rem;
  font-feature-settings: "lnum" 1;
}

.section-title-line2 {
  
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700; line-height: 1.24; letter-spacing: -.015em; color: var(--heading); 
background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 40%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap;
  margin-bottom: 2.4rem;
}

.section-body {
   font-size: .95rem; font-style: italic; color: var(--muted); line-height: 1.8; max-width: 600px;
}
.section-body + .section-body { margin-top: 0.6rem; }

.btn-primary {
  display: inline-block; padding: .8rem 2rem;
  background: var(--accent); color: var(--bg);
  font-family: var(--fb); font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  border: none; border-radius: var(--radius); text-decoration: none; cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-primary:hover { opacity: .85; transform: translateY(-2px); }

.btn-outline {
  display: inline-block; padding: .8rem 2rem;
  background: transparent; color: var(--text);
  font-family: var(--fb); font-size: .88rem; font-weight: 400; letter-spacing: .01em;
  border: 1px solid var(--border-hi); border-radius: var(--radius); text-decoration: none; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline--stop:hover { border-color: #E53935; color: #E53935; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 400; color: var(--accent); text-decoration: none;
  transition: gap var(--transition);
}
.link-arrow::after { content: '→'; }
.link-arrow:hover { gap: .8rem; }

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: none; }
/* eyebrow tags revealed directly keep their natural resting opacity */
.le-eyebrow-tag.reveal.visible { opacity: 0.9; }

/* sav2-seq: hidden until .visible added via section observer; uses animation not transition
   to avoid race conditions between hidden state and class addition */
.sav2-seq { opacity: 0; }
.sav2-seq.visible { animation: sav2-fade-up .65s ease forwards; }
@keyframes sav2-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
/* eyebrow variant — fades to 0.6 to preserve .tag natural opacity */
.sav2-seq-eyebrow { opacity: 0; }
.sav2-seq-eyebrow.visible { animation: sav2-eyebrow-in .65s ease forwards; }
@keyframes sav2-eyebrow-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 0.6; transform: none; }
}

/* Left-to-right wipe variant — overrides fade-up with a clip-path sweep */
.reveal--ltr {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s cubic-bezier(.4, 0, .2, 1);
}
.reveal--ltr.visible {
  clip-path: inset(0 0% 0 0);
}

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; padding: 0 5vw;
  background: var(--bgIntro);
  
  border-bottom: 1px solid var(--bg-light);
  /*transition: border-color var(--accent2);*/
}

.nav-logo {
  font-family: var(--fh); font-size: 2.0rem; font-weight: 600; letter-spacing: .05em;
  color: var(--heading); text-decoration: none;
  display: flex; flex-direction: column; gap: .35rem; line-height: 1;
}
.nav-logo-row { display: flex; align-items: center; gap: 0.6rem; }
.nav-logo-row svg { height: 1.0em; width: auto; }
.footer-logo .nav-logo-row svg { height: 1.0em; }
.nav-logo-img { height: 44px; width: auto; display: block; flex-shrink: 0; }
.footer-logo .nav-logo-img { height: 36px; }
.nav-logo .accent { color: var(--accent); }
.nav-logo .nav-wordmark { display: flex; align-items: baseline; gap: 0; font-style: italic; position: relative; bottom: -0.5px; }
.nav-logo .nav-tagline {
  font-family: var(--fb); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.60);
  white-space: nowrap;
}

.nav-links {
  display: flex; align-items: center; gap: 2.2rem; list-style: none;
}
.nav-links a {
  font-size: .84rem; font-weight: 400; letter-spacing: .02em;
  color: var(--muted); text-decoration: none; transition: color var(--transition);
}
.nav-links a:hover { color: var(--text); }

.nav-item-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 14px; /* invisible buffer so hover doesn't drop crossing the gap */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 501;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown-card {
  min-width: 210px;
  background: var(--bg3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius8);
  padding: .4rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.5);
}
.nav-dropdown-item {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .65rem .75rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition);
}
.nav-dropdown-item:hover { background: var(--surface2); }
.nav-dropdown-item-name {
  font-family: var(--fh); font-size: .82rem; font-weight: 700; letter-spacing: .05em;
  color: var(--heading);
}
.nav-dropdown-item-desc {
  font-size: .72rem; color: var(--muted2); line-height: 1.4;
}

.nav-cta {
  padding: .5rem 1.3rem;
  border: 1px solid rgba(0,200,150,.4) !important;
  color: var(--accent) !important;
  border-radius: var(--radius);
  font-size: .82rem !important; font-weight: 500 !important;
  transition: background var(--transition), color var(--transition) !important;
}
.nav-cta:hover { background: var(--accent) !important; color: var(--bg) !important; }

.mobile-menu-btn {
  display: none; background: none; border: 1.5px solid var(--accent); border-radius: 4px; cursor: pointer; color: var(--accent);
  flex-direction: column; gap: 5px; padding: 12px 5px;
}
.mobile-menu-btn span {
  display: block; width: 22px; height: 1.5px; background: currentColor; transition: var(--transition);
}

/* ─────────────────────────────────────────
   MOBILE DRAWER
───────────────────────────────────────── */
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed; top: 76px; left: 0; right: 0; z-index: 499;
  background: rgba(6,9,13,.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 5vw 2rem;
  flex-direction: column; gap: 0;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  font-size: .95rem; font-weight: 400; letter-spacing: .02em;
  color: var(--muted); text-decoration: none;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover { color: var(--text); }
.nav-drawer-tag {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  color: var(--accent); opacity: .8;
  margin-left: .5rem; vertical-align: middle;
}
.nav-drawer .nav-cta {
  margin-top: 1rem; text-align: center;
  border: 1px solid rgba(0,200,150,.4) !important;
  color: var(--accent) !important; border-radius: var(--radius);
  font-weight: 500 !important; padding: .75rem 0 !important;
}

/* ─────────────────────────────────────────
   PAGE HERO  (inner pages — not homepage)
───────────────────────────────────────── */
.page-hero {
  padding: calc(76px + 4rem) 0 4rem;
  background: var(--bgIntro);
  
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,200,150,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,150,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero-title {
  font-family: var(--fh);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem); 
  /* font-size: clamp(2rem, 4vw, 3.4rem); */
  font-weight: 700; line-height: 1.18;
  letter-spacing: -.02em; color: var(--heading);
  margin-bottom: .8rem;
font-feature-settings: 'lnum';
}
.page-hero-title span {
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero-sub {
  font-size: .97rem; color: var(--muted);
  line-height: 1.85; max-width: 620px;
}
.page-hero-sub + .page-hero-sub {
  margin-top: 1rem;
}
.page-hero-contrast {
  font-size: 1.17rem; color: var(--accent2);
  line-height: 1.5; max-width: 620px;
  letter-spacing: 0.03em;
  margin-top: 1.5rem;
}
.page-hero-claim {
  font-size: .97rem; color: var(--muted);
  line-height: 1.85; max-width: 620px;
  margin-top: 1rem;
}
.page-hero-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 400;
  color: var(--muted2); text-decoration: none;
  margin-bottom: 1.6rem;
  transition: color var(--transition);
}
.page-hero-back::before { content: '←'; }
.page-hero-back:hover { color: var(--accent); }

/* ─────────────────────────────────────────
   DIVIDER STRIP
───────────────────────────────────────── */
.divider-strip {
  height: 1px; background: var(--bg-light);
  opacity: 1.0;
}

/* ─────────────────────────────────────────
   SYSTEM ARCHITECTURE — shared wrappers
───────────────────────────────────────── */

.system-arch {
  padding: 3rem 0 4rem;
  background: var(--bgIntro) ;
  /* background-color: #010101; */
  position: relative; /* needed for ::before positioning */
}

/*
.system-arch::before {
  content: '';
  position: absolute;
  inset: 0; /* top:0, right:0, bottom:0, left:0 */
   background-image: radial-gradient(rgba(0,200,150,.3) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30%,
    black 70%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30%,
    black 70%,
    transparent 100%
  );
  pointer-events: none; /* prevents ::before blocking clicks */
  z-index: 0;
}
*/

.system-arch-header { margin-bottom: 2.4rem; }

/* ── Pipeline flow ── */
.system-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 2rem;
  position: relative;
}

/* connector between blocks */
.system-connector {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 40px;
  position: relative;
  z-index: 1;
}
.system-connector::before {
  content: '';
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(0,200,150,.2), rgba(0,200,150,.42));
  animation: flowPulse 2.8s ease-in-out infinite;
}
.system-connector::after {
  content: '';
  width: 0; height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 8px solid rgba(0,200,150,.45);
  flex-shrink: 0;
}

/* individual block */
.sf-block {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  cursor: default;
}

.sf-body { flex-shrink: 0; }

.sf-index {
  font-family: var(--fh);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted2); margin-bottom: 1rem;
}

.sf-title {
  font-family: var(--fh); text-align: center;
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--heading); line-height: 1.25;
  margin-bottom: 1.4rem;
}

.sf-sub {
  font-size: .65em; font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted2);
  margin-top: .2rem; margin-bottom: .9rem;
}

.sf-text {
  flex: 1; text-align: center;
  font-family: var(--fh); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* top accent line */
.sf-block::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border-hi);
  transition: background var(--transition);
}

/* Governance block */
.sf-block--governance {
  flex: 1.1;
  background: var(--bg);
  border: 1px solid rgba(0,200,150,.5);
  box-shadow: inset 0 0 24px rgba(0,200,150,.04), 0 0 0 1px rgba(0,200,150,.08);
  padding: 1.2rem;
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}
.sf-block--governance::before { background: rgba(0,200,150,.6); }
.sf-block--governance .sf-title { color: #fff; }

/* philosophy gradient line */
.sf-philosophy {
  font-size: .9rem !important; font-weight: 400 !important; font-style: italic;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent !important;
}

/* governance rule chip */
.sf-governance-marker {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.2rem; font-size: .65rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); opacity: 0.35; position: relative;
  transition: opacity var(--transition), transform var(--transition);
}
.sf-governance-marker::before {
  content: ''; display: block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.sf-governance-marker::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  height: 1px; width: 0; background: var(--accent);
  transition: width 0.3s ease;
}

.sf-reject-hint {
  margin-top: .6rem; font-size: .72rem; font-weight: 400;
  color: rgba(255,255,255,.35); letter-spacing: .06em; line-height: 1.6;
}

/* connector variants */
.system-connector--pre-gov::before {
  background: linear-gradient(90deg, rgba(0,200,150,.42), rgba(0,200,150,.65));
  animation: none; opacity: 1;
}
.system-connector--pre-gov::after { border-left-color: rgba(0,200,150,.68); }
.system-connector--post-gov::before {
  background: linear-gradient(90deg, rgba(0,200,150,.65), #00C896);
  animation: none; opacity: 1;
}
.system-connector--post-gov::after { border-left-color: #00C896; }

/* flow statement row */
.system-flow-statement {
  margin-top: 1.2rem; margin-bottom: 1.2rem;
}
.fss-line {
  display: inline-flex;
  align-items: center;
  gap: clamp(.3rem, .8vw, .7rem);
  font-family: var(--fh);
  font-size: clamp(.6rem, 1.4vw, .88rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fss-chev {
  width: clamp(40px, 5vw, 62px);
  height: 12px;
  flex-shrink: 0;
}

/* Execution System group */
.es-group {
  position: relative; flex: 1;
  display: flex; align-items: stretch;
  padding: 1.6rem 1.4rem 1.8rem;
  border: 1px dashed rgba(229,57,53,.5);
  background: linear-gradient(180deg, rgba(229,57,53,.04), rgba(229,57,53,.01));
}
.es-label {
  position: absolute; top: -10px; left: 14px;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #E53935; background: var(--bg2); padding: 0 .5rem; opacity: .9;
}

/* Trade Decision System group */
.tds-group {
  position: relative; flex: 3.1;
  display: flex; align-items: stretch;
  padding: 1.6rem 1.4rem 1.8rem;
  border: 1px dashed rgba(0,200,150,.25);
  background: linear-gradient(180deg, rgba(0,200,150,.04), rgba(0,200,150,.01));
}
.tds-label {
  position: absolute; top: -10px; left: 14px;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: var(--bg2); padding: 0 .5rem; opacity: .8;
}
.tds-flow { display: flex; align-items: stretch; flex: 1; gap: 0; }

.system-connector:nth-child(2)::before { animation-delay: .4s; }
.system-connector:nth-child(4)::before { animation-delay: .8s; }

/* ─────────────────────────────────────────
   PLATFORM — DES-1
───────────────────────────────────────── */
.platform { padding: 5rem 0 6rem; background: #020506; position: relative; overflow: hidden; }
.platform-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(26,143,255,.06) 0%, transparent 65%);
  pointer-events: none;
}
.platform-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7rem; align-items: center; }
.platform-visual { position: relative; }

.code-block {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden;
  font-family: 'Courier New', monospace; font-size: .75rem;
}
.code-bar {
  background: var(--surface); padding: .65rem 1.1rem;
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--border);
}
.code-dot { width: 8px; height: 8px; border-radius: 50%; }
.code-label { margin-left: auto; font-family: var(--fb); font-size: .68rem; color: var(--muted2); letter-spacing: .06em; }
.code-body { padding: 1.5rem 1.2rem; line-height: 2.1; }
.c-dim    { color: rgba(107,126,145,.6); }
.c-key    { color: #1a8fff; }
.c-val    { color: var(--accent); }
.c-str    { color: #f0a500; }
.c-comment{ color: rgba(107,126,145,.45); font-style: italic; }
.c-cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent); vertical-align: middle; animation: blink 1s step-end infinite; }

.platform-badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: var(--surface); border: 1px solid var(--border);
  padding: 1.2rem 1.5rem; min-width: 180px;
  box-shadow: 0 24px 48px rgba(0,0,0,.4);
}
.badge-label { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.badge-val { font-family: var(--fh); font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1; }
.badge-sub { font-size: .72rem; color: var(--muted2); margin-top: .3rem; }

.platform-bullets { list-style: none; display: flex; flex-direction: column; gap: .9rem; margin-top: 2rem; }
.platform-bullets li { display: flex; align-items: flex-start; gap: .9rem; font-size: .92rem; font-weight: 400; color: var(--muted); line-height: 1.7; }
.platform-bullets li::before { content:''; flex-shrink:0; margin-top:.55rem; width:5px; height:5px; border-radius:50%; background: var(--accent2); }

/* ─────────────────────────────────────────
   MODULES
───────────────────────────────────────── */
.modules { padding: 3rem 0 4rem; background: var(--bg2); }
.modules-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5px; background: var(--border); border: 1px solid var(--border);
  margin-top: 3.5rem;
}
.module-card {
  background: var(--bg2); padding: 2.8rem 2.5rem;
  position: relative; overflow: hidden;
  transition: background var(--transition);
  display: flex; flex-direction: column;
}
.module-card:hover { background: var(--surface); }
.module-tag {
  display: inline-block; margin-bottom: 1.2rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); padding: .2rem .7rem;
  border: 1px solid rgba(0,200,150,.2); border-radius: var(--radius);
}
.module-title { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; color: var(--heading); line-height: 1.3; margin-bottom: .9rem; }
.module-text { font-size: .9rem; font-weight: 400; color: var(--muted); line-height: 1.85; }
.module-icon { position: absolute; top: 2.5rem; right: 2.5rem; opacity: .15; }

/* ─────────────────────────────────────────
   PLATFORM PAGE
───────────────────────────────────────── */
.philosophy { padding: 3rem 0 4rem; background: var(--bgIntro); }
.phil-arch-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: clamp(3rem, 8vw, 8rem);
  margin-top: 0;
}
.phil-arch-header-left { flex: 0 0 auto; }
.phil-arch-header-left .section-title { margin: 0; line-height: 1.2; }
.phil-arch-header-right {
  flex: 1 1 auto;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.7;
  max-width: clamp(270px, 40vw, 560px);
  margin-top: 0.5rem;
  margin-left: auto;  
}
.phil-arch-header-right p { margin: 0; }
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
  .philosophy .reveal { text-align: center; }
  .phil-arch-header { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
  .phil-arch-header-right { max-width: 100%; font-size: 0.85rem; text-align: left; }
}
.phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4rem; }
.phil-card { background: #090d14; padding: 2.2rem 2.2rem; border: 1px solid var(--accent-dim); transition: background var(--transition); }
.phil-card:hover { border: 1px solid var(--accent); }
.phil-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.phil-icon { width: 2.34rem; height: 2.34rem; color: var(--accent); opacity: .65; flex-shrink: 0; }
.phil-title { font-family: var(--fh); font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: .03em;}
.phil-text { font-size: .84rem; color: var(--muted3); line-height: 1.85; margin-top: 2rem; }
.who-we-serve { padding: 3rem 0 4rem; background: var(--bg); }

/* ─────────────────────────────────────────
   ENGAGEMENT MODEL
───────────────────────────────────────── */
.engagement { padding: 3rem 0 4rem; background: var(--bg); }

/* EM Header ── */
.em-header {
  position: relative; z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(3rem, 8vw, 8rem);
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.em-header-left {
  flex: 0 0 auto;
  min-width: 240px;
  margin: 0;
}

.em-header-right {
  flex: 1 1 auto;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: clamp(270px, 40vw, 900px);
  font-style: italic;
  margin-top: 0.5rem;
  margin-bottom: 0;
  margin-left: auto;
}

.em-header-right p { margin: 0; }

/* Add this to remove default browser spacing from your title */
.em-header-left .section-title {
  margin: 0;
  line-height: 1.2; /* Tighter line height helps the "visual" center look more accurate */
}

.em-header-connector {
  flex: 1;
  align-self: center;
  height: 2px;
  
  /* 1. Define the long color transition */
  background: linear-gradient(90deg, #1a8fff, #00c896);
  
  /* 2. Use a mask to create the 'Dashes' and the 'Fade' simultaneously */
  -webkit-mask-image: 
    repeating-linear-gradient(90deg, 
      black, black 12px, 
      transparent 12px, transparent 20px
    ),
    linear-gradient(to right, rgba(0,0,0,0.2), black);
  
  /* This ensures both masks work together */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  margin-right: -1px; /* Ensure it touches the destination border */
}




/* Phase labels — sit above steps-track, share the same 5-col grid so
   span 2 / span 3 aligns exactly with the step columns beneath. */

.phase-labels {
  --steps-gap: clamp(20px, 3vw, 50px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--steps-gap);
  padding: 0 var(--steps-gap);
  margin-top: 4rem;
  margin-bottom: 0.6rem;
}
.phase-group--qualification { grid-column: span 2; }
.phase-group--delivery      { grid-column: span 3; }

.phase-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Left and right line segments — flex:1 fills remaining space on each side */
.phase-group::before,
.phase-group::after {
  content: '';
  flex: 1;
  height: 1px;
}

.phase-name {
  font-family: var(--fh);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.phase-group--qualification::before,
.phase-group--qualification::after { background: rgba(0,200,150,0.15); }
.phase-group--qualification .phase-name { color: var(--muted2); }
.phase-group--delivery::before,
.phase-group--delivery::after { background: rgba(0,200,150,0.5); }
.phase-group--delivery .phase-name { color: var(--accent); }

/* --steps-gap is the single source of truth for column gap, track padding,
   and desktop connector width — change one value, all three update. */
.steps-track {
  --steps-gap: clamp(20px, 3vw, 50px);
  margin-top: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--steps-gap); padding: 0 var(--steps-gap); position: relative;
}
.step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; position: relative; z-index: 1; }
.step-num {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: .8rem; font-weight: 800; letter-spacing: .05em;
  color: var(--accent); background: var(--surface);
  border: 1px solid rgba(0,200,150,.25);
  margin-bottom: .6rem; flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}

.step-title { font-family: var(--fh); font-size: .9rem; font-weight: 700; color: var(--heading); margin-bottom: .6rem; line-height: 1.3; }
.step-card {
  flex: 1; width: 100%; min-width: 0;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--accent-dim);
  padding: 1.2rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  text-align: center;
  min-height: 170px;
  position: relative;


}
.step-subtitle {
  font-family: var(--fh); font-size: .84rem; font-weight: 600;
  color: var(--accent); letter-spacing: .03em;
  text-align: center;
}
/* ── Step icon / description crossfade ─────────────────────── */
.step-body {
  flex: 1;
  display: grid;
  grid-template-areas: "layer";
  align-items: start;
  min-height: 0;
}

.step-icon {
  grid-area: layer;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.3rem 0;
  transition: opacity var(--transition);
}

.step-icon svg {
  height: 82px;
  width: auto;
  max-width: 100%;
}

.step-desc {
  grid-area: layer;
  align-self: start;
  position: static;
  opacity: 0;
  margin: 0;
  overflow: visible;
  transition: opacity var(--transition);
  font-size: .78rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.7;
  
  text-align: left;	
  
}
.step-card:hover { box-shadow: 0 0 8px 1px rgba(0,200,150, 0.8);} /* The Glow: x-offset, y-offset, blur-radius, spread-radius, color */


.step-card:hover .step-icon { opacity: 0; }
.step-card:hover .step-desc { opacity: 1; }

.engagement-cta { margin-top: 2rem; text-align: right; }

/* Desktop step-to-step connectors (4 individual segments, one per gap).
   Each ::after spans from its circle's right edge to the next circle's left edge.
   width = col_width + gap − 2×circle_radius  =  100% + var(--steps-gap) − 56px
   Gradient is split across 4 segments so it reads as one flow: accent2 → accent. */
@media (min-width: 1101px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 27px; /* circle centre (28px) − 1px to vertically centre 3px bar */
    left: calc(50% + 28px); /* right edge of circle */
    width: calc(100% + var(--steps-gap) - 56px);
    height: 1.5px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(.4,0,.2,1);

-webkit-mask-image: repeating-linear-gradient(90deg, black 0, black 12px, transparent 12px, transparent 20px);
  mask-image: repeating-linear-gradient(90deg, black 0, black 12px, transparent 12px, transparent 20px);
  }
  .step:nth-child(1)::after { background: linear-gradient(90deg, var(--accent2),  #149de5); }
  .step:nth-child(2)::after { background: linear-gradient(90deg, #149de5, var(--accentmid)); }
  .step:nth-child(3)::after { background: linear-gradient(90deg, var(--accentmid), #07bab0); }
  .step:nth-child(4)::after { background: linear-gradient(90deg, #07bab0, var(--accent)); }

  /* Connectors draw left→right, each timed to start as the next card arrives */
  .steps-track.connectors-live .step:nth-child(1)::after { transform: scaleX(1); transition-delay: 0.15s; }
  .steps-track.connectors-live .step:nth-child(2)::after { transform: scaleX(1); transition-delay: 0.30s; }
  .steps-track.connectors-live .step:nth-child(3)::after { transform: scaleX(1); transition-delay: 0.45s; }
  .steps-track.connectors-live .step:nth-child(4)::after { transform: scaleX(1); transition-delay: 0.60s; }

  /* Slide-in from left on reveal — distance is 75% of the inter-card gap */
  .step.reveal         { transform: translateX(calc(var(--steps-gap) * -0.75)); }
  .step.reveal.visible { transform: none; }
}


/* Single-column stacked layout for narrow viewports. */
@media (max-width: 1100px) {
  .em-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .em-header-connector { display: none; }
  .em-header-right {
    max-width: 100%;
  }

  /* Phase labels are only meaningful in the horizontal 5-col layout */
  .phase-labels { display: none; }

  /* Stack steps in a single column; row-gap is the vertical space the
     connector will occupy — connector height must match this exactly. */
  .steps-track {
    --steps-gap: 40px;
    margin-top: 4rem;
    grid-template-columns: 1fr;
    row-gap: var(--steps-gap);
    padding: 0 20px;
  }

  /* Vertical connector: absolutely positioned in the row-gap below each step.
     bottom: -var(--steps-gap) places it precisely in that gap;
     height: var(--steps-gap) fills the gap top-to-bottom, so the connector's
     top is flush with the card's bottom and its bottom touches the next circle. */
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--steps-gap));
    left: calc(50% - 1px);
    width: 2px;
    height: var(--steps-gap);
    background: linear-gradient(180deg, var(--accent2), var(--accent));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  }

  /* Vertical connectors draw top→down, staggered with card arrivals */
  .steps-track.connectors-live .step:nth-child(1)::after { transform: scaleY(1); transition-delay: 0.15s; }
  .steps-track.connectors-live .step:nth-child(2)::after { transform: scaleY(1); transition-delay: 0.30s; }
  .steps-track.connectors-live .step:nth-child(3)::after { transform: scaleY(1); transition-delay: 0.45s; }
  .steps-track.connectors-live .step:nth-child(4)::after { transform: scaleY(1); transition-delay: 0.60s; }

  /* Cards revert to natural height in single-column view */
  .step-card { flex: none; min-height: unset; }
}

@media (max-width: 768px) {
  .em-header { gap: 1rem; }
  .vp-header-right::before,
  .vp-header-right::after { width: 14px; height: 14px; }
  .vp-header { gap: 1rem; }
  .steps-track { padding: 0 12px; --steps-gap: 28px; }
  .step-num { width: 44px; height: 44px; font-size: .72rem; }
  .step-card { padding: 1rem 0.85rem; }
  .engagement-cta { margin-top: 2.5rem; }
  /* Icon always visible on mobile — no hover state on touch */
  .step-icon        { opacity: 1 !important; }
  .step-desc        { display: none; }
  .step-card:hover .step-icon { opacity: 1; }
}

/* ─────────────────────────────────────────
   USE CASES
───────────────────────────────────────── */

.use-cases {
  padding: 3rem 0 4rem;
  background: var(--bg2);
}
.uc-header {
  display: block;
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
}

/* ── USE CASES: new classes (bento redesign) ─────────────────── */

.uc-h2 {
  font-family: var(--fh);
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--heading);
  white-space: nowrap;
}

.uc-sub {
  font-size: .91rem;
  color: var(--muted);
  line-height: 1.88;
  padding-top: .2rem;
  text-align: left;
}

/* ── Instructional prompt ── */
.uc-instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
  opacity: 0.8;
  transition: opacity .4s ease;
}
.use-cases:has(.uc-bento:hover) .uc-instruction { opacity: 0.25; }

.uc-inst-line {
  height: 1px;
  flex-grow: 1;
  max-width: 100px;
  background: linear-gradient(to right, transparent, rgba(221,228,236,1), transparent);
}
.uc-inst-text {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 400;
  
  letter-spacing: .06em;
  color: #ffffff;
}

/* ── Bento grid ── */
.uc-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(150px, auto) minmax(150px, auto) minmax(150px, auto);
  gap: 30px;
  padding: 30px 5%;
  background: #101c2b;
  border: 1px solid var(--accent-dim);
  overflow: visible;
}

/* ── Cards ── */
.uc-card {
  position: relative;
  background: #07090e;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ca);
  display: flex;
  flex-direction: column;
  height: 100%; 
  overflow: visible;
  z-index: 1;
  cursor: default;
  /*  padding: clamp(1rem, 2vw, 1.4rem); */
     padding: clamp(.8rem, 1.5vw, 1rem); 
  transition: transform .46s cubic-bezier(.4,0,.2,1), border-color .32s ease;
}

/* diagonal scale — each card's outer corner anchors the expansion */
.uc-card:nth-child(1) { transform-origin: top    left;  }
.uc-card:nth-child(2) { transform-origin: top    right; }
.uc-card:nth-child(3) { transform-origin: center left;  }
.uc-card:nth-child(4) { transform-origin: center right; }
.uc-card:nth-child(5) { transform-origin: bottom left;  }
.uc-card:nth-child(6) { transform-origin: bottom right; }

.uc-card:hover {
  transform: scale(1.1);
  z-index: 10;
  border-color: var(--ca);
}
.uc-bento:has(.uc-card:hover) .uc-card:not(:hover) {
  opacity: .17;
  transition: opacity .28s ease;
}

/* ── Card typography ── */
.uc-pain {
  font-family: var(--fh);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ca);
}
.uc-label {
  font-size: .50rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #6a7c8d;
  display: block;
  margin: .2rem 0;
}
.uc-pain-label     { }
.uc-who-label      { }
.uc-approach-label { font-style: normal; }
.uc-outcome-label  { }
.uc-sep {
  display: none;
}
.uc-ctitle {
  font-family: var(--fh);
  font-size: .84rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--muted);
  line-height: 1.3;
  margin-top: .3rem;
}
.uc-cbody {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  bottom: clamp(.8rem, 1.5vw, 1.1rem);
  left:   clamp(1rem,  2vw,   1.4rem);
  right:  clamp(1rem,  2vw,   1.4rem);
  font-size: .66rem;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 1.5rem;
  opacity: .25;
  transition: opacity .3s ease .18s;
}
.uc-card:hover .uc-cbody { opacity: .85; }
.uc-approach { font-style: italic; }
.uc-outcome  { font-size: .72rem; }

/* ── Footer row ── */
.uc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
}
.uc-footer-left { font-size: .85rem; color: var(--muted); }
.uc-footer-left strong { color: var(--heading); font-weight: 600; }
.uc-footer-links { display: flex; gap: 2rem; align-items: center; }
.uc-lnk { font-size: .83rem; color: var(--accent); text-decoration: none; }
.uc-lnk:hover { text-decoration: underline; }
.uc-btn {
  display: inline-flex;
  align-items: center;
  padding: .58rem 1.35rem;
  background: var(--accent);
  color: var(--bg);
  font-size: .82rem;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity .18s;
}
.uc-btn:hover { opacity: .88; }

/* ── Mobile: stacked cards, scroll-triggered cbody reveal ── */
@media (max-width: 720px) {
  .uc-header        { grid-template-columns: 1fr; gap: 1rem; }
  .uc-h2            { white-space: normal; }
  .uc-sub           { text-align: left; }
  .uc-instruction   { display: none; }

  .uc-bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 16px;
    gap: 16px;
  }
  .uc-card {
    transform: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
  }
  .uc-cbody {
    opacity: 0;
    transition: opacity .5s ease;
  }
  .uc-card.in-view .uc-cbody {
    opacity: 1;
    transition-delay: .15s;
  }
  .uc-bento:has(.uc-card:hover) .uc-card:not(:hover) { opacity: 1; }
}


/* ─────────────────────────────────────────
   INSIGHTS / WHITE PAPERS
───────────────────────────────────────── */
.insights { padding: 3rem 0 4rem; background: var(--bg); }
.insights-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3.5rem; }
.insights-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5px; background: var(--border); border: 1px solid var(--border); }
.insight-card { background: var(--bg); padding: 2.8rem; transition: background var(--transition); }
.insight-card:hover { background: var(--surface); }
.insight-type {
  display: inline-block; margin-bottom: 1.2rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); padding: .2rem .7rem;
  border: 1px solid rgba(240,165,0,.22); border-radius: var(--radius);
}
.insight-title { font-family: var(--fh); font-size: 1.25rem; font-weight: 700; color: var(--heading); line-height: 1.3; margin-bottom: .9rem; }
.insight-card:last-child .insight-title { font-size: 1.05rem; }
.insight-text { font-size: .9rem; font-weight: 400; color: var(--muted); line-height: 1.85; }
.insight-meta { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; font-size: .75rem; color: var(--muted2); }
.insight-meta-sep { width: 1px; height: 10px; background: var(--border-hi); }

/* ─────────────────────────────────────────
   FOUNDER CARD (landing page section)
───────────────────────────────────────── */
.founder { padding: 3rem 0 4rem; background: var(--bg2); }
.founder-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: center; }
.founder-visual { aspect-ratio: 3/4; background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; }
.founder-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: linear-gradient(145deg, var(--surface) 0%, var(--bg3) 100%); color: var(--muted2);
}
.founder-placeholder svg { opacity: .2; }
.founder-placeholder p { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }
.founder-corner {
  position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: rgba(6,9,13,.85); border: 1px solid var(--border);
  padding: 1rem 1.2rem; backdrop-filter: blur(8px);
}
.founder-name { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; color: var(--heading); }
.founder-role { font-size: .78rem; color: var(--accent); margin-top: .2rem; letter-spacing: .04em; }
.founder-accent-line { display: flex; align-items: center; gap: 1rem; margin: 1.8rem 0; }
.founder-accent-line::before,
.founder-accent-line::after { content:''; flex:1; height:1px; background: var(--border); }
.founder-quote { font-size: 1.05rem; font-weight: 400; color: var(--text); line-height: 1.85; font-style: italic; border-left: 2px solid var(--accent); padding-left: 1.5rem; }

/* ─────────────────────────────────────────
   IDENTITY STATEMENT
───────────────────────────────────────── */
.identity-section {
  /* px (not vw) so the diagram scales with browser zoom like the text; parent column constrains it on smaller screens */
  --identity-diagram-size: 418px;
  padding: 0.5rem 0; min-height: 40vh; background: var(--bgIntro); position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.identity-inner {
  position: relative; z-index: 2; padding-top: 0; padding-bottom: 0;
  display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 2.5rem;
}
.identity-copy { grid-column: 1; }
.identity-section .section-title {
  margin: 0; max-width: 620px; text-align: left;
  font-family: var(--fb);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 300; line-height: 1.5; letter-spacing: .01em;
  color: rgba(255,255,255,.75);
}
.identity-accent { color: var(--accent); }
.identity-visual { grid-column: 2; display: flex; flex-direction: column; gap: 1rem; }
.identity-section .diagram-wrap { position: relative; max-width: var(--identity-diagram-size); }
.identity-section .diagram-wrap::before {
  content: '';
  position: absolute;
  inset: 0 -13% 0 -13%;
  background-image:
    linear-gradient(rgba(160,170,185,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,170,185,0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 91% 80% at 50% 50%,
    black 0%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 91% 80% at 50% 50%,
    black 0%, black 20%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .identity-section { padding-top: 2rem; }
  .identity-inner { grid-template-columns: 1fr; gap: 0.5rem; text-align: center; }
  .identity-copy, .identity-visual { grid-column: 1; }
  .identity-section .section-title { margin: 0 auto; text-align: center; }
  .identity-visual { align-items: center; }
}

/* ── Identity hex diagram — static ecosystem: central hex, two hex rings, integration blocks ── */
#identity-hex-svg { position: relative; z-index: 1; }
.id2-hex-outline { stroke: var(--accent); }
/* data-feed block: dots streaming left→right toward the hex */
.id2-feed-dot { animation: id2FeedFlow 2.1s linear infinite; }
.id2-feed-dot:nth-of-type(2) { animation-delay: -0.7s; }
.id2-feed-dot:nth-of-type(3) { animation-delay: -1.4s; }
@keyframes id2FeedFlow {
  0%   { transform: translateX(-10px); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(10px); opacity: 0; }
}
/* charting block: chart-replay — candles form left→right, hold, clear;
   pass 1 shows green-red-green, pass 2 shows red-green-green (7s covers both passes) */
.id2-rp1 { animation: id2Rp1 7s linear infinite; }
.id2-rp2 { animation: id2Rp2 7s linear infinite; }
.id2-rp3 { animation: id2Rp3 7s linear infinite; }
@keyframes id2Rp1 {
  0%, 2%   { opacity: 0; fill: #22c55e; stroke: #22c55e; }
  5%       { opacity: 1; }
  47%      { opacity: 1; fill: #22c55e; stroke: #22c55e; }
  50%      { opacity: 0; }
  52%      { opacity: 0; fill: #ef4444; stroke: #ef4444; }
  55%      { opacity: 1; }
  97%      { opacity: 1; fill: #ef4444; stroke: #ef4444; }
  100%     { opacity: 0; }
}
@keyframes id2Rp2 {
  0%, 13%  { opacity: 0; fill: #ef4444; stroke: #ef4444; }
  16%      { opacity: 1; }
  47%      { opacity: 1; fill: #ef4444; stroke: #ef4444; }
  50%      { opacity: 0; }
  63%      { opacity: 0; fill: #22c55e; stroke: #22c55e; }
  66%      { opacity: 1; }
  97%      { opacity: 1; fill: #22c55e; stroke: #22c55e; }
  100%     { opacity: 0; }
}
@keyframes id2Rp3 {
  0%, 26%  { opacity: 0; }
  29%      { opacity: 1; }
  47%      { opacity: 1; }
  50%      { opacity: 0; }
  76%      { opacity: 0; }
  79%      { opacity: 1; }
  97%      { opacity: 1; }
  100%     { opacity: 0; }
}
/* hex badge glow: slow breathe — engine active/running (identity + founder badges) */
.id2-hex-glow { animation: id2GlowPulse 2.8s ease-in-out infinite; }
@keyframes id2GlowPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* terminal block: scalper order-clicks — B fires, S fires, B again, uneven rhythm */
.id2-btn {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.id2-btn-b { animation: id2BtnB 5.6s ease-in-out infinite; }
.id2-btn-s { animation: id2BtnS 5.6s ease-in-out infinite; }
@keyframes id2BtnB {
  0%       { transform: scale(1); filter: brightness(1); }
  3%       { transform: scale(0.88); filter: brightness(1.5); }
  6%, 52%  { transform: scale(1); filter: brightness(1); }
  55%      { transform: scale(0.88); filter: brightness(1.5); }
  58%, 100% { transform: scale(1); filter: brightness(1); }
}
@keyframes id2BtnS {
  0%, 28%  { transform: scale(1); filter: brightness(1); }
  31%      { transform: scale(0.88); filter: brightness(1.5); }
  34%, 100% { transform: scale(1); filter: brightness(1); }
}

/* dashboard block: round-robin tile refresh — each tile brightens in clockwise turn */
.id2-tiles rect { animation: id2TilePulse 4.8s ease-in-out infinite; }
.id2-tiles rect:nth-of-type(2) { animation-delay: 0.9s; }  /* top-right */
.id2-tiles rect:nth-of-type(4) { animation-delay: 2.6s; }  /* bottom-right */
.id2-tiles rect:nth-of-type(3) { animation-delay: 3.3s; }  /* bottom-left */
@keyframes id2TilePulse {
  0%   { fill-opacity: 0.35; }
  6%   { fill-opacity: 0.75; }
  14%  { fill-opacity: 0.35; }
  100% { fill-opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .id2-feed-dot { animation: none; }
  .id2-feed-dot:nth-of-type(1) { transform: translateX(-6px); }
  .id2-feed-dot:nth-of-type(3) { transform: translateX(6px); }
  .id2-rp1, .id2-rp2, .id2-rp3 { animation: none; }
  .id2-tiles rect { animation: none; }
  .id2-btn { animation: none; }
  .id2-hex-glow { animation: none; }
}

/* ─────────────────────────────────────────
   FINAL CTA
───────────────────────────────────────── */
.final-cta { padding: 5rem 0 7rem; background: var(--bgIntro); text-align: center; position: relative; overflow: hidden; }
.final-cta-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,200,150,.07) 0%, transparent 68%);
  pointer-events: none;
}
.final-cta-grid {
  position: absolute; inset: 0; opacity: .4;
  background-image:
    linear-gradient(rgba(0,200,150,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,150,.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
.final-cta-inner { position: relative; z-index: 2; }
.final-cta .section-title { margin: 0 auto; max-width: 700px; }
.final-cta .section-body  { margin: 1.4rem auto; text-align: center; max-width: 700px;}
.cta-actions { margin-top: 2.8rem; display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer { background: var(--bg3); border-top: 1px solid var(--border); }
.footer-main { padding: 4.5rem 0 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; }
.footer-logo { margin-bottom: 1rem; }
.footer-desc { font-size: .86rem; font-weight: 400; color: var(--muted); line-height: 1.85; max-width: 280px; }
.footer-disclaimer { margin-top: 1.4rem; font-size: .72rem; font-weight: 400; color: var(--muted2); line-height: 1.7; font-style: italic; }
.footer-disclaimer-lead { font-size: .76rem; font-weight: 400; color: var(--accent); font-style: normal; }
.footer-col-title { font-family: var(--fh); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); margin-bottom: 1.2rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer-links a { font-size: .84rem; font-weight: 400; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { padding-top: 1rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .76rem; color: var(--muted2); }

/* ─────────────────────────────────────────
   SIMULATION PREVIEW — section wrappers
───────────────────────────────────────── */
.simulation-preview { padding: 3rem 0 4rem; background: var(--bg3); }
.arch-scenarios { margin-top: 4rem; padding-top: 3.5rem; border-top: 1px solid var(--border); }

.sim-header { margin-bottom: 3rem; }
.sim-header .section-title { max-width: 600px; }
.sim-header .section-body  { max-width: 580px; }

.sim-divider {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: 2rem; font-size: .75rem; font-weight: 500; letter-spacing: .1em; color: var(--muted2);
}
.sim-divider::before, .sim-divider::after { content: ''; display: block; width: 36px; height: 1px; background: var(--border-hi); }

.sim-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }

/* ─────────────────────────────────────────
   SCENARIO CARDS
───────────────────────────────────────── */
.sim-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 2rem 1.2rem; position: relative;
  display: flex; flex-direction: column; gap: 0; overflow: hidden;
  width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.sim-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; border-radius: var(--radius) 0 0 var(--radius); transition: opacity var(--transition); }
.sim-card--accept::before { background: var(--accent); }
.sim-card--reject::before  { background: #e53935; }
.sim-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; transition: background var(--transition); }
.sim-card--accept::after { background: rgba(0,200,150,.25); }
.sim-card--reject::after  { background: rgba(229,57,53,.2); }
.sim-card--accept:hover { border-color: rgba(0,200,150,.35); box-shadow: 0 0 0 1px rgba(0,200,150,.1), inset 0 0 28px rgba(0,200,150,.04); transform: translateY(-3px); }
.sim-card--reject:hover { border-color: rgba(229,57,53,.3); box-shadow: 0 0 18px rgba(229,57,53,.08), inset 0 0 28px rgba(229,57,53,.04); }
.sim-card--reject:hover .sim-block--governance .sim-block-body { color: var(--text); }

.sim-flow { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 2rem; flex: 1; }

.sim-step {
  flex: 1; min-width: 0; padding: 0.8rem 1rem; position: relative;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
  background: var(--bg); opacity: 0.38;
  transition: opacity 0.45s ease, background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.sim-step--strategy   { flex: 0.7; }
.sim-step--reasoning  { flex: 1.2; }
.sim-step--governance { flex: 1.6; }
.sim-step--execution  { flex: 0.9; }

.sim-step.is-active { opacity: 1; transform: translateY(0); background: var(--bg3); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,200,150,.2); }
.sim-step--governance.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,200,150,.25), 0 0 20px rgba(0,200,150,.08); animation: simGovPulse .6s ease; }
@keyframes simGovPulse {
  0%   { box-shadow: 0 0 0 1px rgba(0,200,150,.25); }
  50%  { box-shadow: 0 0 0 1px rgba(0,200,150,.5), 0 0 24px rgba(0,200,150,.18); }
  100% { box-shadow: 0 0 0 1px rgba(0,200,150,.25); }
}
.sim-card--reject .sim-step--governance.is-active { border-color: rgba(229,57,53,.7); box-shadow: 0 0 0 1px rgba(229,57,53,.25), 0 0 18px rgba(229,57,53,.08); animation: simGovReject .6s ease; }
@keyframes simGovReject {
  0%   { box-shadow: 0 0 0 1px rgba(229,57,53,.25); }
  50%  { box-shadow: 0 0 0 1px rgba(229,57,53,.5), 0 0 22px rgba(229,57,53,.18); }
  100% { box-shadow: 0 0 0 1px rgba(229,57,53,.25); }
}
.sim-step.is-visited { opacity: 0.72; background: var(--bg); border-color: rgba(255,255,255,0.08); box-shadow: none; }
.sim-card--reject .sim-step--execution.is-dim { opacity: 0.18; }

.sim-step.is-active:not(:last-child)::before,
.sim-step.is-active:not(:last-child)::after,
.sim-step.is-visited:not(:last-child)::before,
.sim-step.is-visited:not(:last-child)::after { opacity: 1; }

.sim-step:not(:last-child)::before {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(100% + 0.4rem); width: 1.2rem; height: 1px;
  background: linear-gradient(90deg, var(--border-hi), var(--accent)); opacity: 0.6; transition: opacity var(--transition);
}
.sim-step:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(100% + 0.4rem + 1.2rem); width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 7px solid var(--accent); opacity: 0.75; transition: opacity var(--transition);
}
@keyframes flowStep {
  from { opacity: 0.4; transform: translateY(6px); }
  to   { opacity: 1;   transform: translateY(0); }
}
.sim-card.animate .sim-step:nth-child(1) { animation: flowStep 1s ease forwards; animation-delay: 0.1s; }
.sim-card.animate .sim-step:nth-child(2) { animation: flowStep 1s ease forwards; animation-delay: 0.4s; }
.sim-card.animate .sim-step:nth-child(3) { animation: flowStep 1s ease forwards; animation-delay: 0.7s; }
.sim-card.animate .sim-step:nth-child(4) { animation: flowStep 1s ease forwards; animation-delay: 1.0s; }

.sim-step-label { font-family: var(--fh); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.sim-step-value { font-family: var(--fh); font-size: .84rem; font-weight: 700; color: var(--heading); line-height: 1.35; margin-bottom: .35rem; }
.sim-step-body  { font-size: .76rem; color: var(--text); line-height: 1.65; }

.sim-card--accept .sim-step--governance .sim-step-label { color: var(--accent); opacity: .85; }
.sim-card--reject .sim-step--governance .sim-step-label { color: #e53935; opacity: .85; }
.sim-step--governance { background: rgba(0,200,150,.04); border-color: rgba(0,200,150,.25); opacity: 0.5; }
.sim-card--reject .sim-step--governance { background: rgba(229,57,53,.05); border-color: rgba(229,57,53,.25); }
.sim-card:hover .sim-step:not(:last-child)::before,
.sim-card:hover .sim-step:not(:last-child)::after { opacity: 1; }
.sim-step-value--accept { color: var(--accent); }
.sim-step-value--reject { color: rgba(229,57,53,.8); }

.sim-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.sim-label { font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted2); }
.sim-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .75rem; border-radius: var(--radius); line-height: 1; }
.sim-status--accept { color: var(--accent); background: rgba(0,200,150,.1); border: 1px solid rgba(0,200,150,.22); }
.sim-status--reject { color: #e53935; background: rgba(229,57,53,.1); border: 1px solid rgba(229,57,53,.22); }

.sim-block { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.sim-block:last-of-type { border-bottom: none; padding-bottom: 0; }
.sim-block-label { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); }
.sim-block-value { font-family: var(--fh); font-size: .9rem; font-weight: 700; color: var(--heading); line-height: 1.3; }
.sim-block-body  { font-size: .84rem; font-weight: 400; color: var(--muted); line-height: 1.8; transition: color var(--transition); }
.sim-block--governance .sim-block-label { color: var(--accent); opacity: .8; }
.sim-card--reject .sim-block--governance .sim-block-label { color: #e53935; opacity: .8; }
.sim-block--execution .sim-block-value--accept { color: var(--accent); }
.sim-block--execution .sim-block-value--reject { color: rgba(229,57,53,.75); }

.sim-insight { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: .76rem; font-weight: 400; color: var(--muted2); font-style: italic; line-height: 1.7; }
.sim-cta { margin-top: 3rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.sim-cta-sub { font-size: .8rem; color: var(--muted2); }
.arch-transition { margin-top: 2.2rem; max-width: 560px; }

/* ─────────────────────────────────────────
   SHARED KEYFRAMES
───────────────────────────────────────── */
@keyframes flowPulse {
  0%   { opacity: .5; }
  50%  { opacity: 1; }
  100% { opacity: .5; }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
@keyframes scaleIn { to { transform:scaleX(1); } }
@keyframes blink   { 50% { opacity:0; } }

/* ─────────────────────────────────────────
   SHARED RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1100px) {
  .platform-inner { grid-template-columns: 1fr; gap: 4rem; }
  .platform-badge { right: 1rem; bottom: -1rem; }
  .founder-inner  { grid-template-columns: 1fr; gap: 3rem; }
  .founder-visual { max-width: 360px; }
  .footer-main    { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* Mobile: system-flow column layout + connector fix */
@media (max-width: 900px) {
  .system-flow { flex-direction: column; align-items: stretch; gap: 1px; }
  .sf-block { height: auto; min-height: 0; overflow: visible; }
  .sf-body  { min-height: 0; }

  .system-connector {
    display: block; position: relative;
    width: auto; height: 48px; overflow: visible; z-index: 1;
  }
  .system-connector::before {
    content: ''; position: absolute;
    top: 0; bottom: 8px; left: calc(50% - 1px);
    width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(0,200,150,.2), rgba(0,200,150,.42));
    animation: none; transform: none; flex: unset;
  }
  .system-connector::after {
    content: ''; position: absolute;
    bottom: 0; top: auto; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 8px solid rgba(0,200,150,.45); border-bottom: none; flex-shrink: unset;
  }
  .system-connector--pre-gov::before { background: linear-gradient(180deg, rgba(0,200,150,.42), rgba(0,200,150,.65)); }
  .system-connector--pre-gov::after  { border-top-color: rgba(0,200,150,.68); }
  /* post-gov: expand box to bridge both group paddings */
  .system-connector--post-gov {
    height: calc(48px + 1.6rem + 1.4rem);
    margin-top: -1.6rem; margin-bottom: -1.4rem; z-index: 2;
  }
  .system-connector--post-gov::before { background: linear-gradient(180deg, rgba(0,200,150,.65), #00C896); }
  .system-connector--post-gov::after  { border-top-color: #00C896; }

  .tds-group, .es-group {
    align-self: stretch; flex-direction: column; padding: 1.4rem 1rem 1.6rem;
  }
  .tds-flow { flex-direction: column; }
}

@media (max-width: 820px) {
  .wwb-grid, .modules-grid, .phil-grid { grid-template-columns: 1fr; }
  .insights-grid   { grid-template-columns: 1fr; }
  .nav-links       { display: none; }
  .mobile-menu-btn { display: flex; }
  .nav-tagline { display: none; }
  .sim-grid        { grid-template-columns: 1fr; }
  .sim-flow        { flex-direction: column; gap: 0.8rem; }
  .sim-step        { padding: 0.7rem 0.9rem; }
  .sim-step::before,
  .sim-step::after { display: none !important; }
}

@media (max-width: 540px) {
  .footer-main { grid-template-columns: 1fr; }
  .wwb-header, .insights-header { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────
   SECTION INFO ICON
   Reusable across all animated sections.
   Add .section-info-wrap to any section
   headline row to enable the info tooltip.
───────────────────────────────────────── */
.section-info-wrap {
  position: absolute;
  right: 4px;
  flex-shrink: 0;
  z-index: 100;
}

.section-info-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  display: flex;
right:4px;
  align-items: center;
  justify-content: center;
position: relative; /* Required to anchor the pulse */
}

.section-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,200,150,0.8);
  border-radius: 3px;
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 600;
  font-style: italic;
  color: rgba(0,200,150,0.8);
  line-height: 1;
  pointer-events: none;
  transition: color 0.2s ease, border-color 0.2s ease;
  position: relative;
  z-index: 2; /* Keeps the icon above the pulse */
}

/* The Pulse Effect */
.section-info-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,200,150,1); 
  background: transparent;

  border-radius: 3px;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  80%, 100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}
.section-info-btn:hover .section-info-icon {
  color: var(--accent);
  border-color: rgba(0,200,150,1);
/* The Glow: x-offset, y-offset, blur-radius, spread-radius, color */
  box-shadow: 0 0 8px 1px rgba(0,200,150, 0.8);
  
  
  transition: all 0.3s ease;
}

.section-info-tooltip {
  position: absolute;
  top:22px;
  margin-top: -5px;
  padding-top: 20px;
  right: 1px;
  width: 280px;
  left: auto;
  
background: var(--bg2);
  
  border: 1px solid var(--border-hi); 
  border-radius: var(--radius8);
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  z-index: 101;
}

.section-info-tooltip[hidden] { display: none; }

.section-info-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.section-info-label {
  font-family: var(--fb);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-info-body {
  font-family: var(--fb);
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(0,200,150, 0.8);
  line-height: 1.65;
  margin: 0;
font-style: italic;

  
}

/* ═══════════════════════════════════════════════════
   VALUE PROPOSITION SECTION
   Geometry (1920×1080, 96 DPI, 100% scale):
   ─ card-size = min(270px, (100vw − 81px) / 4)
     → square at all widths; 270px at ≥ 1153px
   ─ row max-width = 4×270 + 3×15 = 1125px
   ─ frame inner at 1920px = 1884px
   ─ auto-margin each side ≈ 379px  (cinematic)

   Layer stack:
   1 — .vp-section   #0b1219  + green radial glow
   2 — .vp-frame     #111922  full-width, top+bottom border
   3 — .vp-card      #040608  near-black, square
═══════════════════════════════════════════════════ */

/* ── Card geometry variables (VP-scoped) ── */
.vp-section {
  --card-size: min(270px, calc((100vw - 81px) / 4));
  --card-gap:  15px;
}

/* ── 1. Section ── */
.vp-section {
  min-height: 100vh;
  width: 100vw;          /* always full viewport, no child influence */
  align-self: stretch;   /* in case parent is also flex */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 64px 0;
  gap: 44px;
  background: #0b1219;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,200,150,0.09);
}

/* Green radial glow — ambient lighting centred on card frame */
.vp-section::before {
  content: '';
  position: absolute;
  top: 56%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1600px; height: 560px;
  background: radial-gradient(ellipse at center,
    rgba(0,200,150,0.13)  0%,
    rgba(0,200,150,0.06)  35%,
    rgba(0,200,150,0.02)  58%,
    transparent           72%);
  pointer-events: none;
  z-index: 0;
}

/* ── 2. Header ── */
.vp-header {
  position: relative; 
  z-index: 1;
  width: 100%;

  display: flex;
  align-items: center;
  
  justify-content: flex-start;
  
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.vp-header-left  { 
  flex: 0 0 auto; 
  min-width: 240px; 
  margin: 0;  
  display: flex; 
   align-items: center;
}

/* Add this to remove default browser spacing from your title */
.vp-header-left .section-title {
  margin: 0;
  line-height: 1.2; /* Tighter line height helps the "visual" center look more accurate */
}

.vp-header-connector {
  flex: 1;     
  align-self: center;
  height: 2px;
  margin-right: -1px; /* Ensure it touches the destination border */
  background: linear-gradient(90deg, rgba(0,200,150,0.08), rgba(0,200,150,1.0));
}
.vp-header-right {
  flex: 0 1 auto;
  position: relative;
  max-width: clamp(270px, 40vw, 900px);
  font-size: 0.95rem; 
  color: var(--muted);
  line-height: 1.8;
  font-style: italic;
  background: #040608;
  padding: 1rem 1.2rem;

  border: 1.5px solid rgba(0, 200, 150, 0.75); /* Subtle rim light */
     
  
    /* Internal glow representing the powered-on specialized stack */
    box-shadow: 
    inset 0 0 10px rgba(0, 200, 150, 0.28), 
    0 0 20px rgba(0, 0, 0, 0.4);
}


/* ── 3. Frame — full-width separator layer ── */
.vp-frame {
  position: relative; z-index: 1;
  isolation: isolate;
  align-self: stretch;
   
  max-width: 1400px;
     margin-left: auto;
    margin-right: auto;

  flex-shrink: 0;
  background: #111922;
  margin-top: 44px;
  border-top: 1px solid var(--border-hi);
  border-bottom: 1px solid var(--border-hi);
  padding: 30px clamp(30px, 5vw, 120px);
}

/* ── 4. Card row ── */
.vp-cards {
  display: flex;
  flex-direction: row;
  height: var(--card-size);
  gap: var(--card-gap);
  max-width: calc(4 * var(--card-size) + 3 * var(--card-gap));
  width: 100%;
  margin: 0 auto;
}

/* ── 5. Individual card ── */
.vp-card {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  background: #040608;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px 10px 10px 22px;
  position: relative;
  isolation: isolate;       /* stacking context for .card-corner-glow z-index:-1 */
  cursor: default;
  transition:
    flex          0.52s cubic-bezier(0.4, 0, 0.2, 1),
    background    0.28s ease,
    border-color  0.28s ease;
}

/* Hover: hovered card expands, others shrink — row width stays constant */
.vp-cards:hover .vp-card       { flex: 0.75; }
.vp-cards:hover .vp-card:hover {
  flex: 2.8;
  background: #060C12;
  border-color: rgba(0,200,150,0.18);
}

/* Left-edge gradient — top-aligned, converges with top hairline at corner */
.vp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg,
    var(--accent)          0%,
    rgba(0,200,150,0.30)  40%,
    transparent            70%);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.vp-cards:hover .vp-card:hover::before { opacity: 0.85; }

/* Top hairline — left-anchored, same corner as left-edge gradient */
.vp-card::after {
  content: '';
  position: absolute;
  top: 0; left: 2px; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(0,200,150,0.55), transparent 65%);
  opacity: 0;
  transition: opacity 0.30s ease;
}
.vp-cards:hover .vp-card:hover::after { opacity: 1; }

/* Inner corner glow — radial from top-left, behind all content */
.card-corner-glow {
  position: absolute;
  inset: 0;
  z-index: -1;              /* below normal-flow content; above card background */
  background: radial-gradient(ellipse at 0% 0%,
    rgba(0,200,150,0.08) 0%,
    rgba(0,200,150,0.03) 40%,
    transparent          65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.36s ease;
}
.vp-cards:hover .vp-card:hover .card-corner-glow { opacity: 1; }

/* ── Card icon ── */
.card-icon {
  margin-bottom: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.card-icon svg {
  width: 22px; height: 22px;
  stroke: var(--muted2);
  transition: stroke 0.30s ease;
  flex-shrink: 0;
}
.vp-cards:hover .vp-card:hover .card-icon svg { stroke: var(--accent); }

/* ── Body label ── */
.body-label {
  font-size: 0.60rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); opacity: 0.65;
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
  transition: opacity 0.28s ease;
}
.vp-cards:hover .vp-card:hover .body-label { opacity: 1; }

/* ── Body title ── */
.body-title {
  font-family: var(--fh);
  font-size: clamp(0.95rem, 1.3vw, 1.18rem);
  font-weight: 700; line-height: 1.26; letter-spacing: -0.01em;
  color: var(--heading);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex-shrink: 0;
}

.body-title .break {
  display: block; /* or inline-block */
}

/* ── Divider ── */
.body-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin-top: 16px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.26s ease 0.14s;
}
.vp-cards:hover .vp-card:hover .body-divider { opacity: 1; }

/* ── Tagline + pitch — hidden until hover ── */
.body-tagline,
.body-pitch {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.28s ease, max-height 0.38s ease;
}
.vp-cards:hover .vp-card:hover .body-tagline {
  opacity: 1; max-height: 72px;
  transition: opacity 0.30s ease 0.18s, max-height 0.36s ease 0.13s;
}
.vp-cards:hover .vp-card:hover .body-pitch {
  opacity: 1; max-height: 140px;
  transition: opacity 0.30s ease 0.26s, max-height 0.40s ease 0.18s;
}

.body-tagline {
  font-size: 0.80rem; font-weight: 400;
  color: var(--muted); font-style: italic; line-height: 1.68;
  padding-left: 10px;
  border-left: 1px solid rgba(0,200,150,0.28);
  margin-top: 14px;
}
.body-pitch {
  font-size: 0.82rem; font-weight: 400;
  color: var(--muted); line-height: 1.82;
  margin-top: 11px;
}

/* ═══════════════════════════════════════════════════
   VP RESPONSIVE
═══════════════════════════════════════════════════ */

/* ── Mobile portrait ── */
@media (max-width: 820px) {
  .vp-section { min-height: 0; padding: 48px 0; gap: 32px; }
  .vp-frame   { padding: 16px 12px; }
  .vp-header  {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 6vw;
  }
  .vp-header-left  { text-align: left; }
  .vp-header-connector { display: none; }
  .vp-header-right { max-width: none; text-align: left; padding: 0.9rem 1rem; }

  .vp-cards {
    flex-direction: column;
    height: auto;
    max-width: 100%;
    gap: 10px;
  }

  /* Disable CSS hover-flex on touch devices */
  .vp-cards:hover .vp-card,
  .vp-cards:hover .vp-card:hover {
    flex: none;
    background: #040608;
    border-color: var(--border);
  }

  .vp-card {
    flex: none;
    height: 76px;
    overflow: hidden;
    padding: 16px 20px;
    cursor: pointer;
    transition:
      height        0.44s cubic-bezier(0.4, 0, 0.2, 1),
      background    0.28s ease,
      border-color  0.28s ease;
  }

  /* Icon hidden in closed state to keep 76px tidy; restored on open */
  .vp-card:not(.open) .card-icon { display: none; }
  .vp-card.open .card-icon       { display: flex; }

  .vp-card.open {
    height: auto;
    background: #060C12;
    border-color: rgba(0,200,150,0.18);
  }
  .vp-card.open::before          { opacity: 0.70; }
  .vp-card.open::after           { opacity: 1; }
  .vp-card.open .card-corner-glow { opacity: 1; }
  .vp-card.open .body-divider    { opacity: 1; }

  .body-title { -webkit-line-clamp: 1; }
  .vp-card.open .body-title { -webkit-line-clamp: 3; }

  .vp-card.open .body-tagline {
    opacity: 1; max-height: 72px;
    transition: opacity 0.30s ease 0.18s, max-height 0.36s ease 0.12s;
  }
  .vp-card.open .body-pitch {
    opacity: 1; max-height: 140px;
    transition: opacity 0.30s ease 0.26s, max-height 0.40s ease 0.18s;
  }
}

/* ── Mobile landscape ── */
@media (max-width: 820px) and (orientation: landscape) {
  .vp-section { min-height: 0; padding: 28px 0; gap: 20px; }
  .vp-cards {
    flex-direction: row;
    height: auto;
    max-width: 100%;
    gap: 10px;
  }
  .vp-card {
    flex: 1 1 0%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .vp-cards:hover .vp-card {
    flex: 0.75; background: #040608; border-color: var(--border);
  }
  .vp-cards:hover .vp-card:hover {
    flex: 2.8; aspect-ratio: unset;
    background: #060C12; border-color: rgba(0,200,150,0.18);
  }
  .vp-frame { padding: 14px 12px; }
}


/* ═══════════════════════════════════════════
   INDEX — PAGE-SPECIFIC STYLES
   (moved from index.ejs)
═══════════════════════════════════════════ */
/* ─────────────────────────────────────────
   HERO  (index.html only)
───────────────────────────────────────── */
.hero {
  min-height: min(100vh, 900px);
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 5vw; padding-top: calc(76px + 5vw);
  position: relative; overflow: hidden;
}
#le-field-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.hero-glow-2 {
  position: absolute; top: 20%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,200,150,.07) 0%, transparent 65%);
  pointer-events: none; z-index: 1;
}
.hero-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; width: 100%; }
.hero-brand {
  font-family: var(--fh); font-size: 1rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--heading);
  opacity: 0; animation: fadeUp .8s .2s forwards; margin-bottom: .5rem;
}
.hero-brand span { color: var(--accent); }
.hero-tagline-top {
  font-size: .8rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  opacity: 0; animation: fadeUp .8s .32s forwards; margin-bottom: 2.2rem;
  display: flex; align-items: center; gap: .7rem;
}
.hero-tagline-top::after { content:''; display:block; width:36px; height:1px; background: var(--muted2); }
.hero-h1 {
  font-family: var(--fh); font-size: clamp(1rem, 2.6vw, 3.2rem);
  line-height: 1.18; letter-spacing: -.015em; color: var(--heading); max-width: 100%;
  opacity: 0; animation: fadeUp .9s .45s forwards;
  display: flex; flex-direction: column; gap: .45em; margin-bottom: 2.4rem;
}
.h1-line1 { display: block; font-weight: 700; white-space: nowrap; }
.h1-bespoke { display: block; color: rgba(255,255,255,0.55); font-weight: 700; font-size: clamp(0.7rem, 1.82vw, 2.24rem); margin-bottom: 0.5em; }
.h1-primary { color: #ffffff; font-size: clamp(2.0rem, 3.0vw, 3.5rem); font-weight: 700; }
.h1-line2 {
  display: block; font-size: .82em; opacity: 0.9; font-weight: 600; letter-spacing: .07em; word-spacing: .2em;
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 40%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap;
}
.hero-sub { margin-top: 1.6rem; max-width: 600px; font-size: .97rem; font-weight: 400; word-spacing: .2em; color: var(--muted); line-height: 1.85; opacity: 0; animation: fadeUp .9s .6s forwards; }
.hero-actions { margin-top: 2.8rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; opacity: 0; animation: fadeUp .9s .75s forwards; }
.hero-trust { margin-top: 2.5rem; display: flex; align-items: flex-start; gap: .8rem; max-width: 560px; opacity: 0; animation: fadeUp .9s .9s forwards; }
.hero-trust-icon { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,200,150,.15); border: 1px solid rgba(0,200,150,.3); display: flex; align-items: center; justify-content: center; }
.hero-trust-icon::after { content:''; width:5px; height:5px; border-radius:50%; background: var(--accent); }
.hero-trust p { font-size: .78rem; font-weight: 400; color: var(--muted2); line-height: 1.7; font-style: italic; }
.hero-scroll { position: absolute; bottom: 2.5rem; left: 5vw; z-index: 2; display: flex; align-items: center; gap: .7rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); opacity: 0; animation: fadeUp .9s 1.2s forwards; }
.scroll-line { width: 36px; height: 1px; background: var(--muted2); transform: scaleX(0); transform-origin: left; animation: scaleIn 1.5s 1.4s forwards; }



/* ─────────────────────────────────────────
   RESPONSIVE  (index.html only)
───────────────────────────────────────── */
@media (max-width: 820px) {
  .hero-h1 { font-size: clamp(.9rem, 4.5vw, 2rem); }
  .h1-line1 { white-space: normal; }
  .h1-primary { font-size: clamp(1.4rem, 6vw, 2rem); }
  .hero-info-row .section-info-wrap .section-info-tooltip,
  .recognition-controls-row .section-info-wrap .section-info-tooltip {
    left: auto !important;
    right: 0 !important;
    width: 280px;
    max-width: calc(100vw - 40px);
  }
}

/* ─────────────────────────────────────────
   RECOGNITION SECTION
───────────────────────────────────────── */
.recognition-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 20px 4rem;
  background:
    radial-gradient(ellipse 100% 70% at 50% 58%, rgba(0,200,150,0.07) 0%, #0c1118  65%),
    #0c1118 ;
  width: 100%;
}
@media (orientation: portrait) {
  .recognition-section {
    min-height: auto;
    padding: 60px 20px;
  }
}

.recognition-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 1240px;
  padding: 0;
}
.recognition-inner > .le-eyebrow-tag { align-self: flex-start; }

.recognition-headline {
  font-family: var(--fh);
  font-weight: 700;
  color: var(--heading);
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  letter-spacing: -0.015em;
}

.recognition-cards-wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

#dial-card-1,
#dial-card-2 {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 340;
  background: #050508;
  border: 1px solid rgba(0,200,150,0.18);
  border-radius: 4px;
  overflow: hidden;
}

.recognition-bridge {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1240px;
  padding: 0 20px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 3.5s cubic-bezier(0.0, 0, 0.15, 1);
}

.recognition-bridge.visible {
  clip-path: inset(0 0% 0 0);
}

.recognition-bridge-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.recognition-bridge-primary {
  font-family: var(--fh);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.08em;
  text-align: center;
}

.recognition-bridge-secondary {
  font-family: var(--fb);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--muted2);
  line-height: 1.7;
  margin: 0;
  text-align: center;
}

#replay-btn {
  position: absolute;
  right: 0;
  font-family: var(--fb);
  font-size: 0.78rem;
  color: var(--muted2);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 14px;
  cursor: pointer;
  border-radius: var(--radius);
  white-space: nowrap;
}

@keyframes replayPulse {
  0%   { border-color: rgba(255,255,255,0.1); color: #8499ae; }
  50%  { border-color: rgba(0,200,150,0.6);   color: #00c896; }
  100% { border-color: rgba(255,255,255,0.1); color: #8499ae; }
}

.progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.recognition-hint {
  font-family: var(--fb);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted2);
  opacity: 0.5;
  text-align: center;
  margin: 6px 0 0 0;
  letter-spacing: 0.02em;
}

.recognition-hint-row {
  position: relative;
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.recognition-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.recognition-dot.active {
  background: #00c896;
  box-shadow: 0 0 6px rgba(0,200,150,0.5);
}

.recognition-dot.done {
  background: rgba(0,200,150,0.3);
  box-shadow: none;
}

/* Section Info Icon rules → styles.css */

/* Recognition section — 2-col header */
.recognition-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: clamp(3rem, 8vw, 8rem);
  margin-bottom: 0;
}
.recognition-header-left {
  flex: 0 0 auto;
}
.recognition-header-left .section-title {
  margin: 0;
  line-height: 1.2;
}
.recognition-header-right {
  flex: 1 1 auto;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.8;
  max-width: clamp(270px, 40vw, 560px);
  margin-top: 0.5rem;
  margin-left: auto; 
}
.recognition-header-right p {
  margin: 0;
}

@media (max-width: 768px), (orientation: portrait) {
  .recognition-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .recognition-header-right {
    max-width: 100%;
    font-size: 0.85rem;
    align-items: center;
    text-align: left;
  }
  .recognition-inner > .tag,
  .recognition-inner > .le-eyebrow-tag {
    align-self: center;
  }
}

.recognition-controls-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  position: relative;
  width: 100%;
  padding: 60px 0 40px;
}
.recognition-controls-row .section-info-wrap {
  position: absolute;
  right: 4px;
}

.recognition-headline {
  margin-bottom: 0;
  text-align: center;
  flex: 1;
}


@media (max-width: 820px) {
  .recognition-section {
    min-height: unset;
    padding: 40px 16px 60px;
    align-items: flex-start;
    justify-content: flex-start;
  }


  .recognition-cards-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .rs-card-col {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  #dial-card-1,
  #dial-card-2 {
    max-width: 100%;
  }
  .rs-caption {
    white-space: normal;
    text-align: center;
  }
  .recognition-controls-row {
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* ── Recognition Static Fallback ── */
.recognition-static {
  display: none;
  width: 100%;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.recognition-static.visible {
  display: block;
}
.recognition-static.rs-in {
  opacity: 1;
  transform: none;
}

/* ── Shared card column — used by both animated and static wrappers ── */
.rs-card-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 600px;
}
.rs-caption {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}

.rs-caption-left {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
  padding-bottom: 4px;
  min-height: 3em;

  
align-items-left;
text-align: left;
}
.rs-cap-sub {
  font-family: var(--fb);
  font-size: 1.0em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(168,189,208,0.85);
}
.rs-logo-inline {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: var(--brand-ls);
}

/* ── Hero Info Row ── */
.hero-info-row {
  position: absolute;
  top: calc(76px + 16px);
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1240px;
  z-index: 3;
  pointer-events: none;
}
@media (orientation: portrait) {
  .hero-info-row {
    left: 20px;
    right: 20px;
  }
}
.hero-info-row .section-info-wrap {
  pointer-events: none;
}
.hero-info-row .section-info-wrap .section-info-btn {
  pointer-events: all;
}
.hero-info-row .section-info-wrap .section-info-tooltip {
  pointer-events: all;
}

/* ═══════════════════════════════════════════
   SYSTEM ARCH V2  (index.ejs inline styles)
═══════════════════════════════════════════ */

/* ── Section header ── */
.sav2-header {
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 8vw, 8rem);
  margin-bottom: 1rem;
}
.sav2-header-left { flex: 0 0 auto; }
.sav2-header-left .section-title {
  margin: 0;
  line-height: 1.2;
}
.sav2-header-connector {
  flex: 0 0 auto; align-self: flex-start;
  margin-top: calc(clamp(1.6rem, 3vw, 2.2rem) * 1.86);
  width: clamp(50px, calc(2.5vw + 10px), 72px);
  height: 2px;
  background: linear-gradient(90deg, rgba(0,200,150,0.08), rgba(0,200,150,0.65));
}
.sav2-header-right {
  flex: 1; position: relative;
  font-size: 0.95rem; color: var(--muted);
  line-height: 1.8;
  font-style: italic;
  background: rgba(0,200,150,0.035);
  padding: 1.2rem 1.4rem; border-radius: 3px;
  margin-left: auto; 
}
.sav2-header-right::before {
  content: ''; position: absolute; top: -2px; left: -2px;
  width: 18px; height: 18px;
  border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent);
  border-radius: 2px 0 0 0; opacity: 0.7;
}
.sav2-header-right::after {
  content: ''; position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px;
  border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent);
  border-radius: 0 0 2px 0; opacity: 0.7;
}
.sav2-header .section-body { white-space: nowrap; }
@media (max-width: 820px) {
  .sav2-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .sav2-header-connector { display: none; }
  .sav2-header-right { max-width: 100%; padding: 0.9rem 1rem; }
  .sav2-header .section-body { white-space: normal; }
}
@media (max-width: 768px) {
  .sav2-header-right::before,
  .sav2-header-right::after { width: 14px; height: 14px; }
  .sav2-header { gap: 1rem; }
}


/* Layer 1: The Floating Control Plane */
.sav2-flow-wrap {
  position: relative;
  z-index: 20;
  background: rgba(11, 18, 25, 0.8); /* Translucent navy-black */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* THE RIM LIGHT: Sharp 1px top edge to catch 'overhead' light */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.35); /* Brighter top edge[cite: 1] */
  
  border-radius: var(--radius8);
  padding: 24px 48px;
  margin-top: 3rem;
  margin-bottom: 2rem;

  /* ELEVATION VIA LIGHT: 
     1. Deep core shadow for lift.
     2. Subtle emerald 'floor' glow.[cite: 1, 2] */
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(0, 200, 150, 0.03); 
}

.sav2-flow-wrap svg {
  min-width: 480px;
  display: block;
  width: 100%;
}

@media (max-width: 600px) {
  .sav2-flow-wrap {
    padding: 16px 14px;
    overflow-x: hidden;
  }
  .sav2-flow-wrap svg {
    min-width: 0;
    width: 100%;
    height: auto;
  }
}

/* ── Bridge connector: rect card + dashed stub linking control plane to stack ──
.sav2-bridge-connector {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.25rem 0 0.75rem;
}
.sav2-bridge-connector-stub {
  display: block;
  flex-shrink: 0;
}
.sav2-bridge-connector-card {
  width: min(760px, 100%);
  padding: 2.4rem 2.6rem;
  background: #141925;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius8);
  box-shadow: 0 0 24px rgba(0, 200, 150, .08);
}
.sav2-bridge-connector-copy {
  font-family: var(--fb);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  text-align: left;
  margin: 0;
}
@media (max-width: 768px) {
  .sav2-bridge-connector-card { width: 100%; padding: 1.8rem 1.3rem; }
  .sav2-bridge-connector-copy { font-size: 0.88rem; }
}
── end commented-out rect/connector approach ── */

/* ── Bridge statement: plain h3-scale line between control plane and stack ── */
.sav2-bridge-plain {
  font-family: var(--fh);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--heading);
  text-align: center;
  max-width: 700px;
  margin: 4rem auto;
}
.sav2-bridge-highlight { color: var(--accent); }
@media (max-width: 768px) {
  .sav2-bridge-plain {
    font-size: 1.05rem;
    margin: 2.75rem auto;
  }
}

/* Group the text and button together */
.sav2-terminal-group {
  display: flex;
  align-items: flex-end; /* Aligns button with the last line of text */
  gap: 30px;             /* Fixed spacing after the '?' */
  flex-wrap: wrap;      /* Prevents clipping on narrow screens */
}

/* ── Stack label: inline lead-in before the bridge phrase row ── */
.sav2-stack-label {
  font-family: var(--fb);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: normal;
  color: var(--heading);
  letter-spacing: 0.01em;
  margin-right: 0.5rem;
}

/* ── Bridge + play button: single flex row ── */
.sav2-bridge-row {
  display: flex;
  position: relative;
  z-index: 5; /* Sits between the two layers */
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  margin: 0 0 0.75rem;
  min-height: 2.4rem;
  padding-bottom: 0.6rem;
} 

.sav2-bridge {
  font-family: var(--fb);
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.01em;
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.5;
}
.sav2-bridge-phrase {
  opacity: 0;
  transition: opacity 400ms ease;
  display: inline;
}
.sav2-bridge-phrase + .sav2-bridge-phrase::before {
  content: ' ';
}
.sav2-bridge-phrase.sav2-phrase--visible {
  opacity: 1;
}

/* ── Play button: real button treatment ── */
.sav2-play-wrap {
  flex-shrink: 0;
}
.sav2-play-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fb);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms ease, background 200ms ease, border-color 200ms ease;
  user-select: none;
  border: 1px solid rgba(0,200,150,.45);
  background: rgba(04,05,06,.17);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-style: italic;
  white-space: nowrap;
transform: translateY(3px); /* Optical alignment with text baseline */
}
.sav2-play-btn:hover {
  background: rgba(0,200,150,.34);
  border-color: rgba(0,200,150,.75);
}
.sav2-play-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(0,200,150,0.7);
  border-radius: calc(var(--radius) + 1px);
  pointer-events: none;
  animation: sav2PlayPulse 2.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
@keyframes sav2PlayPulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.6);  opacity: 0;    }
  100% { transform: scale(1.6);  opacity: 0;    }
}
.sav2-play-btn.sav2-play--visible { opacity: 1; }
.sav2-play-btn.sav2-play--running {
  opacity: 0.38;
  pointer-events: none;
}
.sav2-play-btn.sav2-play--running::before {
  animation: none;
  opacity: 0;
}
.sav2-play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent var(--accent);
  animation: sav2-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.sav2-play-btn.sav2-play--running .sav2-play-icon { animation: none; }
@keyframes sav2-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.28; }
}
@media (max-width: 600px) {
  .sav2-bridge-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .sav2-bridge {
    width: 100%;
    flex: none;
  }
  .sav2-play-btn { align-self: flex-start; }
}

/* ── Context transition ── */
.sav2-ctx {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0.8rem;
}
.sav2-ctx::before,
.sav2-ctx::after {
  content: '';
  display: block;
  height: 0.5px;
  width: 32px;
  background: rgba(0,200,150,.2);
}
.sav2-ctx span {
  font-family: var(--fb);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,200,150,.45);
}

/* ── Solitaire stack ──  */

.sav2-stack {
  position: relative;
  z-index: 1;
  border-radius: var(--radius8);
  padding: 25px 48px;
background: rgba(11, 18, 25, 0.8); /* Translucent navy-black */
  overflow: hidden;
  border: 1px solid var(--accent-dim);
}

.sav2-stack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 18, 25, 0.8); /* Translucent navy-black */
  
  opacity: 0.10;
  z-index: -1;
}

/* ── Card shell
   Gradient is the direct card background.
   Blocks sit on top with fully opaque solid fill — no bleed possible. ── */
.sav2-card {
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
  background: #0a0c0f;
}
.sav2-card.sav2-card--accept {
  /* background: linear-gradient(to right, #0c0f0e 0%, rgba(0,200,150,.13) 100%); */
  border-right: 2px solid rgba(0,200,150,.5);
}
.sav2-card.sav2-card--reject {
  /* background: linear-gradient(to right, #0c0f0e 0%, rgba(229,57,53,.13) 100%); */
  border-right: 2px solid rgba(229,57,53,.5);
}
/* Collapsed: stronger accent, pointer cursor */
.sav2-card--collapsed {
  cursor: pointer;
  opacity: 0.72;
}
.sav2-card--collapsed.sav2-card--accept {
  border-right: 3px solid rgba(0,200,150,.85);
}
.sav2-card--collapsed.sav2-card--reject {
  border-right: 3px solid rgba(229,57,53,.85);
}
.sav2-card--collapsed:hover {
  filter: brightness(1.08);
}
.sav2-card.sav2-card--active {
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.sav2-card.sav2-card--active.sav2-card--resolved.sav2-card--accept {
  border-right-color: rgba(0,200,150,.85);
  transition: border-right-color 0.5s ease;
}
.sav2-card.sav2-card--active.sav2-card--resolved.sav2-card--reject {
  border-right-color: rgba(229,57,53,.85);
  transition: border-right-color 0.5s ease;
}
/* ── Strip: single row — num left, ctx centre, outcome right ── */
.sav2-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
  user-select: none;
  background: var(--black);
  gap: 8px;
}

/* ── Card body: collapsible ── */
.sav2-card-body {
  max-height: 600px;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 280ms ease;

}
.sav2-card--collapsed .sav2-card-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: none; /* instant collapse — no height animation */
}

/* ── Step grid
   viewBox = 0 0 622 120, zero dead space.
   Blocks x: 0, 159, 318, 477 — each 145 wide. Gaps 14.
   grid-template-columns mirrors: 145fr 14fr 145fr 14fr 145fr 14fr 145fr.
   Zero horizontal padding → block edges align exactly with SVG blocks
   at every viewport width (both scale linearly from same total width). ── */

.sav2-steps {
  display: grid;
  grid-template-columns: 125fr 14fr 125fr 14fr 125fr 14fr 125fr;
  align-items: stretch;
  padding: 8px 1.78% 10px;
  background: linear-gradient(to right, rgba(26,143,255,.36) 30%, rgba(0,200,150,.26) 60%);
}

/* ── Step block: fully opaque solid background ── */
.sav2-blk {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 2px;
  /*background: #080d0b;*/
  background: #020506;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  gap:5px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* ── Solitaire animation states (own namespace, no sim-step conflict) ── */
.sav2-blk.sav2-is-active {
  border-color: rgba(0,200,150,.78);
  box-shadow: 0 0 0 1px rgba(0,200,150,.22), 0 0 20px rgba(0,200,150,.3);
}
.sav2-blk.sav2-is-active--red {
  border-color: rgba(229,57,53,.78);
  box-shadow: 0 0 0 1px rgba(229,57,53,.22), 0 0 20px rgba(229,57,53,.3);
}
.sav2-blk.sav2-is-visited {
  border-color: rgba(0,200,150,.3);
  box-shadow: none;
}
.sav2-blk.sav2-is-dim {
  border-color: rgba(229,57,53,.38);
  box-shadow: none;
  opacity: .5;
}

/* ── Arrow cells ── */
.sav2-arr-h {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: var(--black);
}
.sav2-arr-v { display: none; }

/* ── Block text ── */
.sav2-blk-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 5px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sav2-sp-lbl {
  font-family: var(--fb);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  line-height: 1;
}
.sav2-sp-map {
  font-family: var(--fb);
  font-size: 0.7rem;
  color: rgba(0,200,150,.6);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 2px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sav2-sp-val {
  font-family: var(--fh);
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
  margin-bottom: 4px;

  
  margin-left: 5px;
  
}
.sav2-sp-val--accept { color: var(--accent); }
.sav2-sp-val--reject { color: #e55353; }
.sav2-sp-b {
  font-family: var(--fb);
  font-size: 0.66rem;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
  margin-left: 16px;
  padding-left: 14px;
  position: relative;
}
.sav2-sp-b::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left: 6px solid rgba(180,180,180,.55);
}

/* ── Philosophy + CTA row ── */
.sav2-footer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 1rem 0 0.6rem;
}
.sav2-philosophy {
  font-family: var(--fb);
  font-size: 1.0rem;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.6;
  flex: 1;
  min-width: 0;
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; /* Essential for gradients on text lines */
  background-clip: text;
  color: transparent;
}
@media (max-width: 600px) {
  .sav2-footer-row {
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .sav2-steps {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
  }
  .sav2-arr-h { display: none; }
  .sav2-arr-v {
    display: flex;
    height: 13px;
    align-items: center;
    justify-content: center;
  }
}

/* ── Strip ctx: centred inline item, fades when collapsed ── */
.sav2-strip-ctx {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  opacity: 1;
  transition: opacity 280ms ease;
  pointer-events: none;
  overflow: hidden;
  min-width: 0;
}
.sav2-strip-ctx::before,
.sav2-strip-ctx::after {
  content: '';
  display: block;
  height: 0.5px;
  min-width: 16px;
  flex-shrink: 0;
  background: rgba(192,192,192,.85);
}
.sav2-strip-ctx span {
  font-family: var(--fb);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(192,192,192,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sav2-card--collapsed .sav2-strip-ctx {
  opacity: 0;
  transition: none;
}
/* Old direct strip padding override — strip is now column, padding on strip-row */
.sav2-strip-num {
  font-family: var(--fb);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.sav2-strip-outcome {
  font-family: var(--fb);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s ease;
}
.sav2-card--collapsed .sav2-strip-outcome { opacity: 1; }
.sav2-strip-outcome--accept { color: rgba(0,200,150,.88); }
.sav2-strip-outcome--reject { color: rgba(229,57,53,.88); }

/* ── Closing line: always visible, pulses on animation complete ── */
.sav2-closing {
  text-align: center;
  font-family: var(--fh);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.55);
  transition: color 600ms ease, transform 600ms ease;
  transform: scale(1);
  display: block;
  margin: 1.4rem 0 0;
}
@keyframes sav2-closing-pulse {
  0% {
    transform: scale(1);
    color: rgba(255,255,255,.55);
    letter-spacing: -0.01em;
    text-shadow: none;
  }
  40% {
    transform: scale(1.12);
    color: rgba(255,255,255,.96);
    letter-spacing: 0.04em;
    text-shadow: 0 0 32px rgba(0,200,150,.55), 0 0 10px rgba(0,200,150,.32);
  }
  60% {
    transform: scale(1.12);
    color: rgba(255,255,255,.96);
    letter-spacing: 0.04em;
    text-shadow: 0 0 32px rgba(0,200,150,.55), 0 0 10px rgba(0,200,150,.32);
  }
  100% {
    transform: scale(1);
    color: rgba(255,255,255,.72);
    letter-spacing: -0.01em;
    text-shadow: none;
  }
}
.sav2-closing.sav2-closing--pulse {
  animation: sav2-closing-pulse 1400ms ease-in-out forwards;
}

/* ── Brand wordmark inline in closing line ── */
.sav2-brand-word {
  font-style: italic;
  font-weight: 700;
  letter-spacing: var(--brand-ls);
}
/* Inherit parent colour while hidden — revealed via parent visible state */
.sav2-brand-long { color: inherit; }
.sav2-brand-edge { color: inherit; }
/* Brand colours always visible since closing line is always visible */
.sav2-closing .sav2-brand-long { color: var(--heading); }
.sav2-closing .sav2-brand-edge { color: var(--accent); }
/* Play button brand colours — long in white, edge in accent */
.sav2-play-btn .sav2-brand-long { color: rgba(255,255,255,.92); }
.sav2-play-btn .sav2-brand-edge { color: var(--accent); }

/* ─────────────────────────────────────────
   RECOGNITION — PLAY / REPLAY BUTTON
───────────────────────────────────────── */

#recognition-play-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-size: 0.78rem;
  
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--text);
  background: rgba(04,05,06,.17);
  border: 1px solid rgba(0,200,150,0.45);
  padding: 10px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.25s ease, border-color 0.25s ease,
              opacity 0.25s ease, color 0.25s ease;
}
#recognition-play-btn:hover {
  background: rgba(0,200,150,0.22);
  border-color: rgba(0,200,150,0.75);
}

.recognition-play-icon {
  font-size: 0.72rem;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
  font-style: normal;
}
.recognition-play-label{
 font-size: 0.72rem
  font-style: italic;
  font-weight: 700;
color: #ffffff;
  
}

/* Expanding ring pulse */
#recognition-play-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(0,200,150,0.7);
  border-radius: 7px;
  pointer-events: none;
  animation: recognitionPlayPulse 2.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes recognitionPlayPulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.6);  opacity: 0;    }
  100% { transform: scale(1.6);  opacity: 0;    }
}

/* Playing state — dimmed, non-interactive */
#recognition-play-btn.playing {
  opacity: 0.32;
  pointer-events: none;
}
#recognition-play-btn.playing::before {
  animation: none;
  opacity: 0;
}

/* Replay state — steady, interactive */
#recognition-play-btn.replay {
  opacity: 1;
  pointer-events: auto;
}
#recognition-play-btn.replay::before {
  animation: none;
  opacity: 0;
}
#recognition-play-btn.replay:hover {
  background: rgba(0,200,150,0.22);
  border-color: rgba(0,200,150,0.75);
}

/* Attention pulse when button transitions to Replay */
#recognition-play-btn.pulse {
  animation: replayPulse 1s ease 3;
}

/* ── Cross-fade transitions for static ↔ canvas swap ── */
.recognition-static,
.recognition-cards-wrapper {
  transition: opacity 400ms ease;
}


/* ═══════════════════════════════════════════════════════════
   INTRO — THE INTEGRATION LAYER
   ─────────────────────────────────────────────────────────
   Single resize control: change --diagram-size to scale
   the entire SVG diagram without touching anything else.
═══════════════════════════════════════════════════════════ */
:root {
  --diagram-size: clamp(380px, 32vw, 540px);
}

/* ── Connector dash animations ──────────────────────────── */
/* Paused by default; start only when SVG scrolls into view  */
.fli {
  stroke-dasharray: 7, 5;
  animation: ecoIn 2s linear infinite;
  animation-play-state: paused;
}
.flo {
  stroke-dasharray: 7, 5;
  animation: ecoOut 2s linear infinite;
  animation-play-state: paused;
}
.fmd {
  stroke-dasharray: 3, 4;
}
/* eco2: flow paused until eco2-flow-active is added after hex pulse */
#eco2 .fli,
#eco2 .flo {
  animation-play-state: paused;
}
#eco2.eco2-flow-active .fli,
#eco2.eco2-flow-active .flo {
  animation-play-state: running;
}
#eco2 .e2-bgn { opacity: 0; transition: opacity 0.7s ease; }
#eco2.eco2-glow-active .e2-bgn { opacity: 0.80; }
@keyframes eco2HexPulse {
  0%   { opacity: 0;    }
  25%  { opacity: 0.55; }
  65%  { opacity: 0.25; }
  100% { opacity: 0;    }
}
.eco2-pulse-active {
  animation: eco2HexPulse 1.4s ease-out forwards;
  pointer-events: none;
}
@keyframes ecoIn  { from { stroke-dashoffset: 0  } to { stroke-dashoffset:  24 } }
@keyframes ecoOut { from { stroke-dashoffset: 0  } to { stroke-dashoffset: -24 } }

/* ── Timed reveal — aura rings ──────────────────────────── */
.eco-ring             { opacity: 0; transition: opacity 0.55s ease; }
.eco-ring.eco-visible { opacity: 1; }

/* ── Timed reveal — node shapes + connectors ─────────────── */
.eco-node-unit             { opacity: 0; transition: opacity 0.45s ease; }
.eco-node-unit.eco-visible { opacity: 1; }

/* ── Section shell ──────────────────────────────────────── */
.LE-intro-section {
  background: var(--bg-dark);
  padding-top: max(calc(50vh - 242px), 76px);
  padding-bottom: 4rem;
}
@media (max-width: 860px) {
  .LE-intro-section { padding: calc(76px + 4rem) 0 60px; }
}
@media (max-width: 480px) {
  .LE-intro-section { padding: calc(76px + 4rem) 0 60px; }
}
.LE-intro-section .intro-heading {
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
}
.intro-product-id {
  display: inline-block;
  font-family: var(--fh, 'Syne', sans-serif);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin: 0.35em 0 0;
  text-decoration: underline;
  text-decoration-color: rgba(0, 200, 150, 0.7);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.intro-product-id .le-brand-white { color: #ffffff; }
.intro-product-id .le-brand-green { color: #00C896; }
.le-des-id {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  color: var(--accent);
  font-style: normal;
  font-size: 0.95em;
  letter-spacing: 0.01em;
}
.le1-subtext {

  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.8;
  max-width: 38ch;
}
.LE-intro-section .diagram-wrap {
  position: relative;
}
.LE-intro-section .diagram-wrap::before {
  content: '';
  position: absolute;
  inset: 0 -13% 0 -13%;
  background-image:
    linear-gradient(rgba(160,170,185,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,170,185,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 91% 80% at 50% 50%,
    black 0%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 91% 80% at 50% 50%,
    black 0%, black 20%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── LE-Intro 6-panel grid ───────────────────────────────── */
.le1-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 288px);
  gap: 24px;
  margin: 0 auto;
  justify-content: center;
}
.le1-panel-item {
  padding: 24px;
  background: #090d14;
  border: 1px solid rgba(160,170,185,0.18);
}
.le1-panel-item h3 {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  opacity: 0.80;
  margin: 0;
  line-height: 1.3;
}
.le1-panel-sub {
  margin: 0.8rem 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted2);
  line-height: 1.5;
}
@media (max-width: 960px) {
  .le1-panel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .le1-panel-grid {
    grid-template-columns: 1fr;
  }
}

.intro-section {

 background: var(--bgIntro);


  padding: 5rem 0 6rem;
  overflow: hidden;
  position: relative;
}

/* ── Hex Banner Section ─────────────────────────────────────── */
.hex-banner-section > .container > .le-eyebrow-tag {
  display: flex;
  justify-content: center;
}
.hex-banner-section {
  background-color: var(--bgIntro);
  padding: 3rem 0 4rem;
  overflow: hidden;
  position: relative;
}
.hb-section-title {
  font-family: var(--fh);
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--heading);
  text-align: center;
  margin: 0 0 1rem;
  white-space: normal;
}
.hb-section-title br {
  display: block;
}
@media (max-width: 768px) {
  .hb-section-title {
    text-align: center;
  }
}
.hex-banner-wrap {
  width: 100%;
  position: relative;
  z-index: 1;
}
.hex-banner-section {
  --card-size: min(270px, calc((100vw - 81px) / 4));
  --card-gap:  15px;
}
.hex-banner-section .vp-frame {
  margin-top: 1rem;
}
.hex-banner-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(160,170,185,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,170,185,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%,
    black 0%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%,
    black 0%, black 20%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
#hex-banner-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Pin the box ratio to the desktop viewBox (1200x400): Chromium can lose the
     viewBox-derived intrinsic ratio across browser-zoom changes, mis-sizing the
     box until reload. */
  aspect-ratio: 1200 / 400;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  #hex-banner-svg {
    aspect-ratio: 840 / 360; /* matches the MOBILE viewBox set in scripts.ejs */
  }
}

/* Grid emanating from the diagram — fades outward from diagram centre 
.intro-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(38,53,69,0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,53,69,0.25) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 82% 72% at 65% 50%,
    white 0%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 65% 50%,
    white 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
} */

/* ── Two-column grid — copy left, diagram right ─────────── */
.intro-inner {
  display: grid;
  grid-template-columns: 1fr 600px;
  align-items: center;
  gap: 48px;
z-index: 1;
}

/* ── Left: copy block ────────────────────────────────────── */
.intro-copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-heading {
  font-family: var(--fh, 'Syne', sans-serif);
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
  color: #f4f8fb;
  margin: 0;
}

.intro-sub {
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
}

/* ── Info panels ─────────────────────────────────────────── */
.intro-panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
}
.intro-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #151f2e;
  border-radius: 6px;
  padding: 11px 14px;
  border-top:    1px solid rgba(255,255,255,0.10);
  border-right:  1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left:   2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.40),
              0 1px 2px rgba(0,0,0,0.28),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.ip-title {
  flex: 0 0 76px;
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
}
.ip-body {
  flex: 1;
  margin: 0;
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  line-height: 1.55;
  /* color: rgba(255,255,255,0.48); */
color: var(--muted2);
}

/* ── Right: diagram container ───────────────────────────── */
.intro-diagram {
  grid-column: 2;
  grid-row: 1;
  position: relative; /* anchors .eco-micro-label absolute positioning */
}

.diagram-wrap {
  width: 100%;
  max-width: var(--diagram-size);
  margin: 0 auto; /* centre diagram within container */
}

.diagram-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* allows φ⁴ field ring to bleed outside SVG layout box */
filter: saturate(0.78);
}

/* ── Responsive: stack on tablet / mobile ───────────────── */
@media (max-width: 860px) {
  .intro-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .le1-panel-grid {
    margin-top: 1rem;
  }
  .intro-copy {
    grid-column: unset;
    grid-row: unset;
    z-index: auto;
    width: 100%;
    text-align: center;
    align-items: center;
  }
  .intro-diagram {
    grid-column: unset;
    grid-row: unset;
    width: 100%;
  }
  .diagram-wrap {
    margin: 0 auto; /* re-centre on mobile */
  }
  .intro-heading br {
    display: none;   /* reflow naturally at narrow widths */
  }
}

@media (max-width: 480px) {
  /* field ring can feel dominant on very narrow screens — pull it back */
  .eco-field-ring { opacity: 0.03; }
}



/* ─── Section wrapper ─── */
.le-code {
  padding: 3rem 0 4rem; background: var(--bgIntro);
}

/* ─── Crown (section header) ─── */
.fl-crown {
  margin-bottom: 4rem;
}
.fl-crown .section-title {
  margin-bottom: 0;
}
.lec-g {
  color: inherit;
}
.fl-crown-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted2);
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* ─── Body wrap ─── */
.fl-body-wrap {
  display: flex;
  align-items: stretch;
  position: relative;
  border-left:   4px solid rgba(0, 200, 150, .65);
  border-top:    2px solid rgba(0, 200, 150, .38);
  border-right:  2px solid rgba(0, 200, 150, .38);
  border-bottom: 2px solid rgba(0, 200, 150, .38);
  overflow: visible;
  background:var(--black);
  
}

/* ─── Corner nodes ─── */
.fl-node {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(0, 200, 150, .55), 0 0 2px rgba(0, 200, 150, .95);
  z-index: 10;
  pointer-events: none;
}
.fl-nl {
  width: 8px;
  height: 8px;
  left: -5px;
  transform: translateY(-50%);
}
.fl-nr {
  width: 6px;
  height: 6px;
  right: -4px;
  transform: translateY(-50%);
}
.fl-node[data-npos="top"] { top: 0; }
.fl-node[data-npos="bot"] { top: 100%; }

/* ─── Left column ─── */
.fl-left {
  width: 38%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 200, 150, .14);
}

.fl-layer {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid rgba(0, 200, 150, .09);
  transition: background .28s ease;
  flex: 1;
}
.fl-layer:last-child { border-bottom: none; }

.fl-layer:hover  {
  background: linear-gradient(to right, rgba(0, 200, 150, .09) 0%, transparent 72%);
}
.fl-layer.active {
  background: linear-gradient(to right, rgba(0, 200, 150, .11) 0%, transparent 72%);
}

.fl-lstrip {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(0, 200, 150, .07);
}
.fl-lstrip span {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  opacity: .22;
  transition: opacity .25s;
  user-select: none;
}
.fl-layer:hover  .fl-lstrip span { opacity: .72; }
.fl-layer.active .fl-lstrip span { opacity: 1; }

.fl-layer-inner {
  padding: 24px 14px 24px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.fl-lmeta {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
  transition: color .25s;
}
.fl-layer.active .fl-lmeta,
.fl-layer:hover  .fl-lmeta { color: var(--accent); }

.fl-ltitle {
  font-family: var(--fh);
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(240, 244, 248, .42);
  line-height: 1.26;
  transition: color .25s;
}
.fl-layer.active .fl-ltitle,
.fl-layer:hover  .fl-ltitle { color: var(--heading); }

.fl-arrow {
  margin-left: auto;
  font-size: 11px;
  color: rgba(0, 200, 150, 0);
  transition: color .25s;
  flex-shrink: 0;
  align-self: center;
  padding: 0 10px 0 6px;
}
.fl-layer.active .fl-arrow,
.fl-layer:hover  .fl-arrow { color: rgba(0, 200, 150, .6); }

/* ─── Right panel ─── */
.fl-right {
  flex: 1;
  position: relative;
  display: grid;
  padding: 22px 34px 22px 28px;
}

.fl-panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 26px;
  position: relative;
}
.fl-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.fl-ptitle {
  font-family: var(--fh);
  font-size: 1.18rem;
  font-weight: 700;
  color: rgba(240, 244, 248, .44);
  letter-spacing: -.01em;
  margin-bottom: 14px;
  line-height: 1.28;
  position: relative;
  z-index: 1;

}

.fl-pbody {
  font-size: .875rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.92;
  max-width: 460px;
  position: relative;
  z-index: 1;
}
.fl-pbody em {
  font-style: italic;
  color: var(--text);
  font-weight: 400;
}

/* ─── Zone overlays ─── */
.fl-zones {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 3;
}
.fl-zone {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  pointer-events: none;
}
.fl-zm {
  flex: 1;
  pointer-events: none;
}

.fl-zr {
  width: 63px;
  flex-shrink: 0;
  background: linear-gradient(to left, rgba(0, 200, 150, .05), transparent);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  pointer-events: auto;
  cursor: pointer;
  transition: background .28s;
}
.fl-zr span {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--accent);
  opacity: .18;
  transition: opacity .28s;
  user-select: none;
}

.fl-zone:not(:last-child) .fl-zr {
  border-bottom: 1px solid rgba(0, 200, 150, .13);
}

.fl-zr.act {
  background: linear-gradient(to left, rgba(0, 200, 150, .09), transparent);
}
.fl-zr.act span,
.fl-zr:hover span { opacity: .78; }
.fl-zr:hover {
  background: linear-gradient(to left, rgba(0, 200, 150, .08), transparent);
}

/* ─── Responsive ─── */
@media (max-width: 700px) {
  .le-code { padding: 3rem 0; }

  .fl-body-wrap { flex-direction: column; }
  .fl-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0, 200, 150, .12);
  }
  .fl-right { padding: 20px 18px; }

  .fl-panel { padding-top: 0; }

  .fl-zones,
  .fl-node { display: none; }

  .fl-pbody { max-width: none; }

  .fl-ltitle { font-size: 1.1rem; }
}

/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */

/* Contact page */
.contact-page { padding: calc(76px + 4rem) 0 4rem; background: var(--bg); }

/* Page header */
.contact-header {
  margin-bottom: 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  column-gap: 6rem;
  align-items: center;
}

.contact-header-left {
  display: flex;
  align-items: center;
}

.contact-header-left .page-hero-title {
  margin: 0;
  line-height: 1.2;
}

.contact-header h1 span { color: var(--accent); }

.contact-header-connector {
  flex: 1;
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, #1a8fff, #00c896);
  -webkit-mask-image:
    repeating-linear-gradient(90deg, black, black 12px, transparent 12px, transparent 20px),
    linear-gradient(to right, rgba(0,0,0,0.2), black);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  margin-right: -1px;
}

.contact-header-sub {
  position: relative;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.8;
  font-style: italic;
  background: rgba(0,200,150,0.035);
  padding: 1rem 1.2rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  margin: 0;
}

/* Two-column grid */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 6rem; align-items: start;
}

.contact-grid .tag { margin-bottom: 0; }

/* What is the agenda */
.agenda-list { display: flex; flex-direction: column; gap: 0; margin-top: 0.25rem; }
.agenda-item {
  display: grid; grid-template-columns: 48px 1fr;
  gap: 1.4rem; align-items: start;
  padding: 1.8rem 0; border-bottom: 1px solid var(--border);
}
.agenda-item:last-child { border-bottom: none; }
.agenda-num {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: .78rem; font-weight: 800;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid rgba(0,200,150,.25);
}
.agenda-title {
  font-family: var(--fh); font-size: .95rem; font-weight: 700;
  color: var(--heading); margin-bottom: .4rem;
}
.agenda-desc { font-size: .84rem; color: var(--muted); line-height: 1.8; }

/* Form panel */
.contact-form-wrap {
  background: var(--bg2); border: 1px solid rgba(0,200,150,.4);
  padding: 2.4rem;
}
.form-title {
  font-family: var(--fh); font-size: 1.2rem; font-weight: 700;
  color: var(--heading); margin-bottom: .5rem;
}
.form-sub { font-size: .86rem; color: var(--muted); margin-bottom: 2rem; line-height: 1.7; }
.form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.4rem; }
.form-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted2);
}
.form-label-opt {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .72rem; opacity: .55;
}
.form-input, .form-select, .form-textarea {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-family: var(--fb); font-size: .88rem;
  padding: .75rem 1rem; border-radius: var(--radius);
  transition: border-color var(--transition); width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: rgba(0,200,150,.5);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted2); opacity: .5; }
.form-input:-webkit-autofill,
.form-select:-webkit-autofill,
.form-textarea:-webkit-autofill {
  -webkit-text-fill-color: #dde4ec;
  -webkit-box-shadow: 0 0 0px 1000px #0f1620 inset;
  box-shadow: 0 0 0px 1000px #0f1620 inset;
  caret-color: #dde4ec;
}
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.form-select { appearance: none; cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note {
  font-size: .76rem; color: var(--muted2); line-height: 1.7;
  padding: 1rem 1.1rem; background: var(--bg); border: 1px solid var(--border);
  margin-top: 1.4rem; border-left: 2px solid rgba(0,200,150,.3);
}
.form-note p + p { margin-top: .55rem; }
.form-submit {
  width: 100%; margin-top: 1.6rem;
  background: var(--accent); color: var(--bg);
  font-family: var(--fb); font-size: .9rem; font-weight: 600;
  padding: .9rem 2rem; border: none; border-radius: var(--radius);
  cursor: pointer; transition: opacity var(--transition), transform var(--transition);
}
.form-submit:hover { opacity: .85; transform: translateY(-1px); }

.form-error {
  font-size: .72rem;
  font-weight: 500;
  color: var(--accentRed);
  margin-top: .3rem;
  letter-spacing: .02em;
  display: none;
}
.form-error.visible {
  display: block;
}
.form-input.field-error,
.form-select.field-error,
.form-textarea.field-error {
  border-color: var(--accentRed);
}
.form-input.field-error:focus,
.form-select.field-error:focus,
.form-textarea.field-error:focus {
  border-color: var(--accentRed);
}
.form-char-count {
  font-size: .7rem;
  color: var(--muted2);
  text-align: right;
  margin-top: .25rem;
  opacity: .6;
}
.form-group--consent { margin-top: 1.4rem; }
.form-label--consent {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .82rem; color: var(--muted2); line-height: 1.6;
  cursor: pointer;
}
.form-label--consent a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.form-label--consent a:hover { opacity: .75; }
.form-checkbox {
  flex-shrink: 0; margin-top: .2rem; width: 1rem; height: 1rem; cursor: pointer;
  accent-color: var(--accent);
}
.form-checkbox.field-error { outline: 2px solid var(--accentRed); outline-offset: 2px; }

/* Alternative contact */
.alt-contact {
  padding: 3rem 0 4rem;
  background: var(--bg2);
}
.alt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px; background: var(--border);
  border: 1px solid var(--border); margin-top: 3rem;
}
.alt-card {
  background: var(--bg2); padding: 2.4rem 2rem;
  transition: background var(--transition);
}
.alt-card:hover { background: var(--surface); }
.alt-card-icon {
  width: 36px; height: 36px; margin-bottom: 1.2rem;
  color: var(--accent);
}
.alt-card-icon svg { width: 100%; height: 100%; }
.alt-title {
  font-family: var(--fh); font-size: .95rem; font-weight: 700;
  color: var(--heading); margin-bottom: .5rem;
}
.alt-desc { font-size: .84rem; color: var(--muted); line-height: 1.75; }

/* Responsive */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; gap: 4rem; }
}
@media (max-width: 840px) {
  .contact-header { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .contact-header-sub { max-width: 100%; }
}
@media (max-width: 820px) {
  .form-row { grid-template-columns: 1fr; }
  .alt-grid { grid-template-columns: 1fr; }
}

/* ── Logo wordmark ── */
.le-logo { font-style: italic; letter-spacing: .06em; }
.le-logo .le-long { color: #ffffff; }
.le-logo .le-edge { color: #00c896; }

/* ═══════════════════════════════════════════════════════════
   ECO INTERACTIVE LAYER — palette shapes + reset bar
   Controlled by ECO_INTERACTIVE flag in scripts.ejs
   ═══════════════════════════════════════════════════════════ */

/* Palette node drag affordance (cursor set in SVG attr; hover handled here) */
.palette-node          { cursor: grab; transition: opacity 0.15s; }
.palette-node:hover    { opacity: 0.85 !important; }

/* Controls bar: reset button only (label is now an overlay) */
.eco-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding: 0 4px;
}

/* Micro-label: absolute overlay — far-left of diagram, backup hint text */
.eco-micro-label {
  position: absolute;
  bottom: 80px;
  left: 4px;
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-size: 0.70rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   FROM SPARK TO STACK — About page origin section
   ═══════════════════════════════════════════════════════════ */

/* ── Section ────────────────────────────────────────────────── */
.spark-section { padding: 3rem 0 4rem; background: var(--bg); }

/* ── Header: 2-column ───────────────────────────────────────── */
.spark-header {
  display: flex;
  gap: 2.25rem;
  align-items: flex-end;
  margin-bottom: 1.75rem;
}
.spark-header-left {
  flex: 1;
  min-width: 0;
}
.spark-header-right {
  width: min(520px, 100%);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.1rem;
}

/* ── "LongEdge Origin" label ────────────────────────────────── */
.about-hero-title {
  font-family: var(--fh);
  font-size: clamp(1.2rem, 2.8vw, 2.2rem);
  font-weight: 700; line-height: 1.18;
  letter-spacing: -.02em; color: var(--heading);
  margin-bottom: .8rem;
}

/* ── Subtitle ───────────────────────────────────────────────── */
.spark-sub-mobile { display: none; }
.spark-sub {
  font-size: 0.82rem;
  color: var(--muted2);
  line-height: 1.75;
  font-family: var(--fb);
  border-left: 2px solid rgba(42,159,255,0.48);
  padding-left: 0.9rem;
}

/* ── Main row ───────────────────────────────────────────────── */
.spark-main {
  display: flex;
  gap: 2.25rem;
  align-items: flex-start;
  justify-content: center;
}

/* ── Stage timeline (left) ──────────────────────────────────── */
.stage-timeline {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  height: 354px;
  display: flex;
  flex-direction: column;
}

.st-item {
  flex: 1;
  display: flex;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border: 1px solid transparent;
  border-left-width: 2px;
  opacity: 1;
  transition: background 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
  min-height: 0;
}

/* Per-stage resting fills */
.st-item-1 { background: var(--black); border-color: rgba(26,143,255,0.18); }
.st-item-2 { background: var(--black); border-color: rgba(15,180,232,0.18); }
.st-item-3 { background: var(--black); border-color: rgba(8,196,160,0.18);  }
.st-item-4 { background: var(--black); border-color: rgba(0,200,150,0.18);  }

/* Per-stage active fills */
.st-item-1:hover, .st-item-1.active { background: var(--black); border-color: rgba(26,143,255,0.80); filter:brightness(1.06); }
.st-item-2:hover, .st-item-2.active { background: var(--black); border-color: rgba(15,180,232,0.80); filter:brightness(1.06); }
.st-item-3:hover, .st-item-3.active { background: var(--black); border-color: rgba(8,196,160,0.80);  filter:brightness(1.06); }
.st-item-4:hover, .st-item-4.active { background: var(--black); border-color: rgba(0,200,150,0.80);  filter:brightness(1.06); }

/* Left rail: node + connector */
.st-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.st-node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(80,140,255,0.28);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted2);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.st-node svg { width: 14px; height: 14px; display: block; flex-shrink: 0; }

/* Per-stage node active */
.st-item-1:hover .st-node, .st-item-1.active .st-node { color:#1a8fff; border-color:rgba(26,143,255,0.85); background:rgba(26,143,255,0.18); box-shadow:0 0 14px rgba(26,143,255,0.40); }
.st-item-2:hover .st-node, .st-item-2.active .st-node { color:#0fb4e8; border-color:rgba(15,180,232,0.85); background:rgba(15,180,232,0.18); box-shadow:0 0 14px rgba(15,180,232,0.40); }
.st-item-3:hover .st-node, .st-item-3.active .st-node { color:#08c4a0; border-color:rgba(8,196,160,0.85);  background:rgba(8,196,160,0.18);  box-shadow:0 0 14px rgba(8,196,160,0.40);  }
.st-item-4:hover .st-node, .st-item-4.active .st-node { color:#00c896; border-color:rgba(0,200,150,0.85);  background:rgba(0,200,150,0.18);  box-shadow:0 0 14px rgba(0,200,150,0.40);  }

.st-connector {
  width: 1px;
  flex: 1;
  background: rgba(80,140,255,0.18);
  margin: 3px 0;
  transition: background 0.4s ease;
  min-height: 4px;
}
.st-item-1:hover .st-connector, .st-item-1.active .st-connector { background:rgba(26,143,255,0.55); }
.st-item-2:hover .st-connector, .st-item-2.active .st-connector { background:rgba(15,180,232,0.55); }
.st-item-3:hover .st-connector, .st-item-3.active .st-connector { background:rgba(8,196,160,0.55);  }
.st-item-4:hover .st-connector, .st-item-4.active .st-connector { background:rgba(0,200,150,0.55);  }
.st-item:last-child .st-connector { display: none; }

/* Right: text meta */
.st-meta { flex: 1; min-width: 0; padding-top: 0.1rem; }

/* Per-stage label colors */
.st-label {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-top: 0.48rem;
  text-transform: uppercase;
  font-family: var(--fh);
  transition: color 0.3s;
}
.st-item-1 .st-label { color: rgba(26,143,255,0.6); }
.st-item-2 .st-label { color: rgba(15,180,232,0.6); }
.st-item-3 .st-label { color: rgba(8,196,160,0.6);  }
.st-item-4 .st-label { color: rgba(0,200,150,0.6);  }
.st-item-1:hover .st-label, .st-item-1.active .st-label { color: #1a8fff; }
.st-item-2:hover .st-label, .st-item-2.active .st-label { color: #0fb4e8; }
.st-item-3:hover .st-label, .st-item-3.active .st-label { color: #08c4a0; }
.st-item-4:hover .st-label, .st-item-4.active .st-label { color: #00c896; }

.st-name {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 0.38rem;
  transition: color 0.3s;
}
.st-item.active .st-name,
.st-item:hover .st-name { color: var(--heading); }

.st-subtitle {
  font-size: 0.74rem;
  color: var(--muted2);
  margin-top: 0.38rem;
  font-style: italic;
  line-height: 1.4;
  font-family: var(--fb);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.st-item.active .st-subtitle,
.st-item:hover .st-subtitle { color: var(--muted); }

/* ── Canvas wrap ────────────────────────────────────────────── */
.spiral-wrap {
  width: 520px;
  height: 354px;
  position: relative;
  flex-shrink: 0;
}

#spiral-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--black);
  border: 1px solid rgba(0,200,150,0.50);
  border-radius: 4px;
  transition: box-shadow 0.45s ease;
}

#spiral-canvas.completion-glow {
  box-shadow:
    0 0 22px rgba(0,200,150,0.38),
    0 0 48px rgba(42,159,255,0.20);
}

.spiral-overlay { position: absolute; inset: 0; pointer-events: none; }

/* ── Milestone boxes ────────────────────────────────────────── */
.milestone { position: absolute; opacity: 0; transition: opacity 1s ease; }
.milestone.visible { opacity: 1; }

.mbox {
  border-radius: 3px;
  padding: 0.38rem 0.55rem;
  width: 110px;
  background: var(--surface);
}
.mbox.v1 { border: 1px solid rgba(13,179,204,0.75); }
.mbox.v2 { border: 1px solid rgba(0,200,150,0.75); }

.mbox-label {
  font-size: 0.52rem;
  letter-spacing: 0.13em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.mbox.v1 .mbox-label { color: #0db3cc; }
.mbox.v2 .mbox-label { color: var(--accent); }

.mbox-img {
  width: 100%; height: 46px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.54rem; color: var(--muted3);
  letter-spacing: 0.05em;
  background: rgba(0,200,150,0.03);
}
.mbox.v1 .mbox-img { border: 1px dashed rgba(13,179,204,0.25); }
.mbox.v2 .mbox-img { border: 1px dashed rgba(0,200,150,0.25); }

.mbox-year { font-size: 0.54rem; color: var(--muted2); margin-top: 0.22rem; }

/* ── Body panel ─────────────────────────────────────────────── */
.stage-body-panel {
  margin-top: 1.1rem;
  background: var(--black);
  border: 1px solid rgba(80,140,255,0.30);
  border-radius: var(--radius);
  padding: 0 1.25rem 0.9rem;
}

/* Panel visibility — only the active panel is shown */
.sbp-panel { display: none; }
.sbp-panel.active { display: block; }
.sbp-stage-label { display: none; }

/* ── Stage selector nav strip ───────────────────────────────── */
.sbp-stage-nav {
  display: flex;
  margin: 0 -1.25rem;
  background: var(--surface2);
  
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.sbp-tab {
  flex: 1;
  padding: 0.52rem 0.4rem;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--fh);
  background: transparent;
  border: none;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
}

/* Per-stage tab resting */
.sbp-tab-1 { color: rgba(26,143,255,0.65); }
.sbp-tab-2 { color: rgba(15,180,232,0.65); }
.sbp-tab-3 { color: rgba(8,196,160,0.65);  }
.sbp-tab-4 { color: rgba(0,200,150,0.65);  }

/* Per-stage tab hover */
.sbp-tab-1:hover { color:#1a8fff; border-top-color:#1a8fff; background:rgba(26,143,255,0.16); }
.sbp-tab-2:hover { color:#0fb4e8; border-top-color:#0fb4e8; background:rgba(15,180,232,0.16); }
.sbp-tab-3:hover { color:#08c4a0; border-top-color:#08c4a0; background:rgba(8,196,160,0.16);  }
.sbp-tab-4:hover { color:#00c896; border-top-color:#00c896; background:rgba(0,200,150,0.16);  }
/* Per-stage tab active (selected) */
.sbp-tab-1.active { color:#1a8fff; border-top-color:#1a8fff; background:var(--black); }
.sbp-tab-2.active { color:#0fb4e8; border-top-color:#0fb4e8; background:var(--black); }
.sbp-tab-3.active { color:#08c4a0; border-top-color:#08c4a0; background:var(--black); }
.sbp-tab-4.active { color:#00c896; border-top-color:#00c896; background:var(--black); }

/* Panel header row */
.sbp-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
  padding: 0.7rem 0 0.55rem;
  border-bottom: 1px solid rgba(80,140,255,0.28);
}

.sbp-num {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.sbp-name {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--heading);
  flex: 1;
  min-width: 0;
  font-family: var(--fh);
}

.sbp-period {
  font-size: 0.67rem;
  color: var(--muted2);
  font-family: var(--fb);
  flex-shrink: 0;
}

.sbp-subtitle {
  font-size: 0.71rem;
  color: var(--muted);
  font-style: italic;
  font-family: var(--fb);
  width: 100%;
  margin-top: -0.22rem;
  line-height: 1.45;
}

/* Three-column bullet grid */
.sbp-bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.sbp-bullet {
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255,255,255,0.07);
  transition: border-color 0.4s ease;
}

/* Blue → teal → green border + head colour progression */
.sbp-bullet:nth-child(1) { border-left-color: rgba(42,159,255,0.80); }
.sbp-bullet:nth-child(2) { border-left-color: rgba(13,179,204,0.80); }
.sbp-bullet:nth-child(3) { border-left-color: rgba(0,200,150,0.80); }

.sbp-bullet:nth-child(1) .sbp-head { color: var(--accent2); }
.sbp-bullet:nth-child(2) .sbp-head { color: var(--accentmid); }
.sbp-bullet:nth-child(3) .sbp-head { color: var(--accent); }

.sbp-head {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  font-family: var(--fh);
}

.sbp-body {
  font-size: 0.74rem;
  color: var(--muted2);
  line-height: 1.65;
  font-family: var(--fb);
  font-weight: 300;
}

/* ── Mantra ─────────────────────────────────────────────────── */
.spark-mantra {
  text-align: center;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(80,140,255,0.22);
}
.spark-mantra p {
  font-family: var(--fs);
  font-size: 0.96rem;
  font-style: italic;
  color: var(--muted2);
  letter-spacing: 0.05em;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 820px) {
  .spark-header { flex-direction: column; gap: 1rem; align-items: center; text-align: center; }
  .spark-header-left { width: 100%; text-align: center; }
  .about-hero-title { text-align: center; }
  .spark-section .le-eyebrow-tag { display: flex; justify-content: center; }
  .spark-header-right { display: none; }
  .spark-sub-mobile { display: block; width: 100%; margin-bottom: 0.75rem; }
  .spark-main { flex-direction: column; align-items: center; }
  .stage-timeline { width: 100%; min-width: 0; max-width: 100%; height: auto; }
  .spiral-wrap { width: 100%; max-width: 520px; height: auto; aspect-ratio: 560/380; }
  .sbp-tab { font-size: 0.52rem; padding: 0.45rem 0.25rem; letter-spacing: 0.06em; }

  /* Vertical stage reveal — hide tabs, show all panels stacked */
  .sbp-stage-nav { display: none; }
  .sbp-panel { display: block; padding-top: 1.25rem; }
  .sbp-panel + .sbp-panel {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(80,140,255,0.18);
    padding-top: 1.5rem;
  }

  /* Stage label shown on mobile */
  .sbp-stage-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--fh);
    margin-bottom: 0.6rem;
  }
  #sbp-panel-0 .sbp-stage-label { color: #1a8fff; }
  #sbp-panel-1 .sbp-stage-label { color: #0fb4e8; }
  #sbp-panel-2 .sbp-stage-label { color: #08c4a0; }
  #sbp-panel-3 .sbp-stage-label { color: #00c896; }

  /* Bullets single column */
  .sbp-bullets { grid-template-columns: 1fr; }
}

/* ── Stage labels (spiral overlay) ─────────────────────────── */
.slabel {
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.slabel.visible { opacity: 1; }
.slabel-inner {
  width: max-content;
  max-width: 160px;
  border-radius: 3px;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  border: 1px solid; /* colour set inline by JS to match dot gradient */
}
.slabel-line1 {
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 0.2rem;
  font-family: var(--fh);
}
.slabel-line2 {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
  font-family: var(--fh);
}

/* ═══════════════════════════════════════════
   PLATFORM PAGE — PAGE-SPECIFIC STYLES
   (moved from platform.ejs)
═══════════════════════════════════════════ */

/* ─────────────────────────────────────────
   LAYER GRID
───────────────────────────────────────── */
.layers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px; background: var(--border); border: 1px solid var(--border);
  margin-top: 3.5rem;
}
.layer-card {
  background: var(--bg2); padding: 2.4rem 2rem;
  position: relative; overflow: hidden;
  transition: background var(--transition);
  display: flex; flex-direction: column;
}
.layer-card:hover { background: var(--surface); }
.layer-card--governance {
  background: var(--bg3);
  border-left: 1px solid rgba(0,200,150,.35);
  border-right: 1px solid rgba(0,200,150,.35);
}
.layer-num {
  font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 500;
  color: var(--heading); opacity: .05; line-height: 1;
  position: absolute; top: 1.6rem; right: 1.8rem;
}
.layer-title { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--heading); margin-bottom: .4rem; letter-spacing: 0.8px; }
.layer-sub { font-size: .65rem; font-weight: 600; letter-spacing: .12em; color: var(--muted2); margin-bottom: 1.2rem; }
.layer-desc { font-size: .85rem; color: var(--muted); line-height: 1.8; }
.layer-components { margin-top: 1.4rem; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.layer-components li { font-size: .76rem; color: var(--muted2); display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.layer-components li::before { content:''; flex-shrink:0; margin-top:.45rem; width:4px; height:4px; border-radius:50%; background: var(--accent); }

/* ─────────────────────────────────────────
   INTEGRATIONS
───────────────────────────────────────── */
.integrations { padding: 3rem 0 4rem; background: var(--bg2); }
.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.int-card {
  background: var(--bg3); border: 1px solid var(--border); padding: 2rem;
  transition: border-color var(--transition);
}
.int-card:hover { border-color: var(--border-hi); }
.int-name { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--heading); margin-bottom: .6rem; }
.int-desc { font-size: .85rem; color: var(--muted); line-height: 1.8; }
.int-badge { display: inline-block; margin-bottom: 1rem; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: .2rem .6rem; border: 1px solid rgba(0,200,150,.22); border-radius: var(--radius); }

/* ─────────────────────────────────────────
   INSTRUMENTS
───────────────────────────────────────── */
.instruments { padding: 5rem 0 6rem; background: var(--bg); }
.inst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
.inst-card {
  background: var(--surface); border: 1px solid var(--border); padding: 2rem 1.5rem;
  text-align: center; transition: border-color var(--transition), background var(--transition);
}
.inst-card:hover { border-color: var(--accent); background: var(--surface2); }
.inst-ticker { font-family: var(--fh); font-size: 1.4rem; font-weight: 800; color: var(--accent); margin-bottom: .4rem; }
.inst-name { font-size: .78rem; color: var(--muted2); letter-spacing: .04em; }

@media (max-width: 1100px) { .layers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) {
  .layers-grid { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: 1fr; }
  .inst-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) { .inst-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────
   SIMULATION STATE OVERLAYS
───────────────────────────────────────── */
/* sf-block height override scoped to platform's decision-sim section */
.decision-sim { padding: 3rem 0 4rem; background: var(--bg); }
.decision-sim .sf-block { height: 350px; overflow: hidden; }

@media (max-width: 1200px) and (min-width: 901px) {
  .decision-sim .sf-block { height: 420px; }
}

@media (max-width: 900px) {
  .decision-sim .sf-block { height: auto; min-height: 0; overflow: visible; }
}

.sf-state {
  position: absolute; top: 7rem; left: 2rem; right: 2rem;
  font-size: .72rem; font-weight: 500; color: var(--accent);
  letter-spacing: .08em; opacity: 0; transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.gov-log, .market-log {
  position: absolute; top: 7rem; left: 2rem; right: 2rem;
  padding-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0;
  background: var(--bg); transition: background var(--transition);
}
.sf-block.active .gov-log, .sf-block.active .market-log { background: var(--bg3); }
.sf-block--governance.rejected .gov-log { background: var(--bg3); }

.gov-log-entry, .market-log-entry {
  margin: 0; font-size: .72rem; font-weight: 500; letter-spacing: .08em; line-height: 1.55;
  color: var(--accent); opacity: 0; transform: translateY(5px);
  transition: opacity .35s ease, transform .35s ease, color .35s ease;
}
.market-log-entry { white-space: pre-line; }
.gov-log-entry.visible, .market-log-entry.visible { opacity: 1; transform: translateY(0); }
.gov-log-entry.dimmed, .market-log-entry.dimmed { opacity: 0.28; color: var(--muted); }
.gov-log-entry.is-reject { color: #E53935 !important; }

.market-log-entry.is-verdict-approved,
.market-log-entry.is-verdict-rejected,
.gov-log-entry.is-verdict-authorized,
.gov-log-entry.is-verdict-rejected {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  margin-top: .3rem;
}
.market-log-entry.is-verdict-approved  { color: var(--accent) !important; }
.market-log-entry.is-verdict-rejected  { color: #E53935 !important; }
.gov-log-entry.is-verdict-authorized   { color: var(--accent) !important; }
.gov-log-entry.is-verdict-rejected     { color: #E53935 !important; }

.gov-log-arrow, .market-log-arrow {
  font-size: .58rem; color: var(--muted2); margin: .3rem 0;
  opacity: 0; transition: opacity .3s ease .1s; line-height: 1; user-select: none;
}
.gov-log-arrow.visible, .market-log-arrow.visible { opacity: 0.4; }

.sf-block.active { border-color: var(--accent); background: var(--bg3); box-shadow: 0 0 0 1px rgba(0,200,150,.2); }
.sf-block.active .sf-state { opacity: 1; transform: translateY(0); }
.sf-block--governance.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,200,150,.25), 0 0 20px rgba(0,200,150,.08); animation: govPulse .6s ease; }

@keyframes govPulse {
  0%   { box-shadow: 0 0 0 1px rgba(0,200,150,.25); }
  50%  { box-shadow: 0 0 0 1px rgba(0,200,150,.5), 0 0 24px rgba(0,200,150,.18); }
  100% { box-shadow: 0 0 0 1px rgba(0,200,150,.25); }
}
.sf-block--dim .sf-state { opacity: 1; transform: translateY(0); color: #E53935; }
.sf-block--visited .sf-state { opacity: 0.72; color: var(--muted); transform: translateY(0); }
.sf-state--reject { color: #E53935; }
.sf-block--governance.rejected { border-color: rgba(229,57,53,.6); box-shadow: 0 0 0 1px rgba(229,57,53,.25), 0 0 18px rgba(229,57,53,.08); }
.sf-block--dim { opacity: 0.3; transition: opacity .4s ease; }

/* Mobile: simulation overlays switch to static */
@media (max-width: 900px) {
  .sf-state { position: static; margin-top: 1rem; top: auto; left: auto; right: auto; }
  .gov-log, .market-log { position: static; top: auto; left: auto; right: auto; bottom: auto; margin-top: 1rem; padding-bottom: 0; background: transparent !important; }
}

/* ─────────────────────────────────────────
   PSIM — Platform Simulation Layout
   Independent copy of sav2 layout system.
   All classes prefixed psim- to avoid sav2 conflicts.
───────────────────────────────────────────── */
.psim-card {
  position: relative;
  z-index: 1;
  border-radius: var(--radius8);
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
  background: rgba(11,18,25,0.8);
  transition: border-right-color .5s ease;
}
.psim-card.psim-card--accept { border-right: 2px solid rgba(0,200,150,.85); }
.psim-card.psim-card--reject { border-right: 2px solid rgba(229,57,53,.85); }

.psim-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
  user-select: none;
  background: var(--black);
  gap: 8px;
}
.psim-strip-num {
  font-family: var(--fb);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  flex-shrink: 0;
}
.psim-strip-ctx {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.psim-strip-ctx::before,
.psim-strip-ctx::after {
  content: '';
  display: block;
  height: 0.5px;
  min-width: 16px;
  flex-shrink: 0;
  background: rgba(192,192,192,.85);
}
.psim-strip-ctx span {
  font-family: var(--fb);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(192,192,192,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psim-strip-outcome {
  font-family: var(--fb);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: opacity .3s ease;
}
.psim-strip-outcome--accept { color: rgba(0,200,150,.88); }
.psim-strip-outcome--reject { color: rgba(229,57,53,.88); }

.psim-card-body { overflow: hidden; }

.psim-steps {
  display: grid;
  grid-template-columns: 125fr 14fr 125fr 14fr 125fr 14fr 125fr;
  align-items: stretch;
  padding: 2.25%;
  background: transparent;
}

.psim-blk {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px;
  background: #020506;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  gap: 5px;
  min-height: 266px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.psim-blk.psim-is-active {
  border-color: rgba(0,200,150,.78);
  box-shadow: 0 0 0 1px rgba(0,200,150,.22), 0 0 20px rgba(0,200,150,.3);
}
.psim-blk.psim-is-active--red {
  border-color: rgba(229,57,53,.78);
  box-shadow: 0 0 0 1px rgba(229,57,53,.22), 0 0 20px rgba(229,57,53,.3);
}
.psim-blk.psim-is-visited {
  border-color: rgba(0,200,150,.3);
  box-shadow: none;
}
.psim-blk.psim-is-dim {
  border-color: rgba(229,57,53,.38);
  box-shadow: none;
  opacity: .5;
}

.psim-arr-h {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: var(--black);
}
.psim-arr-v { display: none; }

/* psim-sp-map is now the top title; psim-blk-header (lbl) sits at bottom */
.psim-sp-map {
  font-family: var(--fh);
  font-size: 0.98rem;
  font-weight: 700;
text-align: center;
  letter-spacing: 0.3px;
  color: var(--muted);
  line-height: 1.25;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
  order: -1;
}
.psim-sp-map-layer {
  font-size: .75em;
  font-weight: 500;
  color: var(--muted2);
  letter-spacing: .08em;
}
.psim-blk-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 5px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.psim-sp-lbl {
  flex: 1; text-align: center;
  font-family: var(--fh); font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted3);
}
.psim-sp-val {
  font-family: var(--fh);
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--muted2);
  line-height: 1.3;
  padding: 0 6px;
  margin: 1rem 0 0;
}
.psim-sp-val--accept { color: var(--accent); }
.psim-sp-val--reject { color: #e55353; }

.psim-market-log,
.psim-gov-log {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  margin-top: 1rem;
  gap: 0;
  padding: 0 6px;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .psim-blk { min-height: 294px; }
}

@media (max-width: 600px) {
  .psim-steps {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
  }
  .psim-arr-h { display: none; }
  .psim-arr-v {
    display: flex;
    height: 13px;
    align-items: center;
    justify-content: center;
  }
  .psim-blk { min-height: 0; }

  /* mobile: vertical stack, CSS connectors replace SVGs */
  .system-flow-statement { display: flex; justify-content: center; }
  .fss-line {
    flex-direction: column;
    align-items: center;
    white-space: normal;
    gap: 0;
  }
  .fss-chev { display: none; }
  .fss-word {
    display: block;
    text-align: center;
  }
  .fss-word:not(:last-child)::after {
    content: '';
    display: block;
    width: 1.5px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(26,143,255,.6), rgba(0,200,150,.7));
    margin: 3px auto 0;
  }
}

/* ─────────────────────────────────────────
   PLATFORM ARCHITECTURE DIAGRAM
───────────────────────────────────────── */
.platform-arch-diagram { padding: 3rem 0 4rem; background: var(--bgIntro); }
.pad-arch-header { margin-bottom: 4rem; }
.pad-arch-header-row { display: flex; flex-direction: row; align-items: flex-start; width: 100%; gap: clamp(3rem, 8vw, 8rem); margin-top: 0; }
.pad-arch-header-left { flex: 0 0 auto; }
.pad-arch-header-left .section-title { margin: 0; line-height: 1.2; }
.pad-arch-header-right { flex: 1 1 auto; font-size: 0.95rem; color: var(--muted); font-style: italic; line-height: 1.7; max-width: clamp(270px, 40vw, 560px); margin-top: 0.5rem; margin-left: auto; }
.pad-arch-header-right p { margin: 0; }
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
  .pad-arch-header { text-align: center; }
  .pad-arch-header-row { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
  .pad-arch-header-right { max-width: 100%; font-size: 0.85rem; text-align: left; }
}
.pad-hover-hint { font-size: .72rem; color: rgba(255,255,255,.28); margin: 0 0 1rem; letter-spacing: .03em; text-align: center; }
@media (hover: none), (max-width: 768px) { .pad-hover-hint { display: none; } }
.pad-diagram {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(0,200,150,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,150,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.05); overflow: hidden;
}
.pad-diagram svg { display: block; width: 100%; height: auto; }
#sv text { pointer-events: none; }
@media (min-width: 769px) {
  .pad-diagram svg { width: 88%; margin: 0 auto; }
}
.pad-legend { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.2rem; justify-content: center; }
.pad-legend-item { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--muted2); letter-spacing: .04em; }
.pad-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── SVG block tooltip ── */
#pad-tooltip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  display: none;
  max-width: clamp(180px, 18vw, 240px);
  padding: clamp(.5rem, .8vw, .7rem) clamp(.7rem, 1.1vw, .95rem);
  background: rgba(19,28,39,.72);
  border: 1px solid rgba(255,255,255,.10);
 
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.pad-tt-label {
  font-family: 'Syne', sans-serif;
  font-size: clamp(.62rem, .75vw, .72rem);
  
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(0,200,150,.75);
  margin-bottom: .35rem;
}
.pad-tt-body {
  font-size: clamp(.62rem, .75vw, .72rem);
  line-height: 1.6;
  color: rgba(26,143,255,.72);
  margin-top: .5rem;
}
@media (hover: none), (max-width: 768px) { #pad-tooltip { display: none !important; } }

/* SVG animation classes */
@keyframes tickFlow     { from{ stroke-dashoffset:60 } to{ stroke-dashoffset:0 } }
@keyframes tickFlowSlow { from{ stroke-dashoffset:60 } to{ stroke-dashoffset:0 } }
@keyframes rtdPulse     { 0%,100%{ opacity:.35 } 50%{ opacity:.85 } }
.tick-bg  { stroke-dasharray:2 18; animation:tickFlow     2.2s  linear infinite; opacity:.28 }
.tick-mid { stroke-dasharray:3  8; animation:tickFlow     0.90s linear infinite; opacity:.60 }
.tick-hi  { stroke-dasharray:1 14; animation:tickFlow     0.44s linear infinite; opacity:.88 }
.stk-bg   { stroke-dasharray:2 18; animation:tickFlowSlow 4.4s  linear infinite; opacity:.22 }
.stk-mid  { stroke-dasharray:3  8; animation:tickFlowSlow 1.8s  linear infinite; opacity:.52 }
.stk-hi   { stroke-dasharray:1 14; animation:tickFlowSlow 1s    linear infinite; opacity:.78 }
.rtd-border { animation:rtdPulse 1.6s ease-in-out infinite; }
#d3 { filter: blur(1px); }

/* ═══════════════════════════════════════════
   MODULES PAGE — PAGE-SPECIFIC STYLES
   (moved from modules.ejs)
═══════════════════════════════════════════ */
.modules-page { padding: 3rem 0 4rem; background: var(--bg2); }
.layer-section { margin-bottom: 5rem; }
.layer-section:last-child { margin-bottom: 0; }
.layer-header {
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: 2.4rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.layer-badge {
  font-family: var(--fh); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: var(--radius);
  color: var(--accent); border: 1px solid rgba(0,200,150,.25);
  white-space: nowrap;
}
.layer-badge--gov { color: #00c896; border-color: rgba(0,200,150,.5); background: rgba(0,200,150,.06); }
.layer-heading { font-family: var(--fh); font-size: 1.3rem; font-weight: 700; color: var(--heading); }
.module-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px; background: var(--border); border: 1px solid var(--border);
}
.module-cell {
  background: var(--bg2); padding: 2rem 1.8rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: background var(--transition);
}
.module-cell:hover { background: var(--surface); }
.module-cell-name { font-family: var(--fh); font-size: .95rem; font-weight: 700; color: var(--heading); }
.module-cell-desc { font-size: .84rem; color: var(--muted); line-height: 1.75; }
.module-cell-tag { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); opacity: .7; }

@media (max-width: 820px) { .module-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   INSIGHTS PAGE — PAGE-SPECIFIC STYLES
   (moved from insights.ejs)
═══════════════════════════════════════════ */
.insights-page { padding: 5rem 0 7rem; background: var(--bg); }
.insights-full-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.5px; background: var(--border); border: 1px solid var(--border);
  margin-top: 3.5rem;
}
.insight-full-card {
  background: var(--bg); padding: 2.8rem;
  transition: background var(--transition);
  display: flex; flex-direction: column;
}
.insight-full-card:hover { background: var(--surface); }
.insight-full-card--featured { grid-row: span 2; }
.insight-coming {
  margin-top: 5rem; padding: 3rem;
  border: 1px dashed var(--border); text-align: center;
  background: var(--bg2);
}
.insight-coming-title { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--muted2); margin-bottom: .6rem; }
.insight-coming-desc { font-size: .88rem; color: var(--muted2); }

@media (max-width: 820px) { .insights-full-grid { grid-template-columns: 1fr; } .insight-full-card--featured { grid-row: auto; } }

/* ═══════════════════════════════════════════
   FOUNDER PAGE — PAGE-SPECIFIC STYLES
   (moved from founder.ejs)
═══════════════════════════════════════════ */

/* ─────────────────────────────────────────
   FOUNDER HERO
───────────────────────────────────────── */
.founder-page-hero {
  padding: calc(76px + 5rem) 0 4rem;
  background: var(--bg);
  position: relative; overflow: hidden;
}
.founder-page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,200,150,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,150,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%);
  pointer-events: none;
}
.founder-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: center;
}
.founder-photo-wrap {
  aspect-ratio: 3/4; background: var(--surface);
  border: 1px solid var(--border); position: relative; overflow: hidden;
  max-width: 340px;
}
.founder-photo-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: linear-gradient(145deg, var(--surface) 0%, var(--bg3) 100%); color: var(--muted2);
}
.founder-photo-placeholder svg { opacity: .15; }
.founder-photo-placeholder p { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .4; }
.founder-photo-tag {
  position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: rgba(6,9,13,.88); border: 1px solid var(--border);
  padding: 1rem 1.2rem; backdrop-filter: blur(8px);
}
.fp-name { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; color: var(--heading); }
.fp-role { font-size: .78rem; color: var(--accent); margin-top: .3rem; letter-spacing: .04em; }
.fp-location { font-size: .72rem; color: var(--muted2); margin-top: .2rem; }

.founder-intro-text { position: relative; z-index: 1; }
.founder-name-large {
  font-family: var(--fh);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700; line-height: 1.18; letter-spacing: -.02em; color: var(--heading);
  margin-bottom: .6rem;
}
.founder-title-line {
  font-family: var(--fh); font-size: 1rem; font-weight: 600;
  letter-spacing: .05em; color: var(--accent); margin-bottom: 2rem;
}
.founder-bio { font-size: .97rem; color: var(--muted); line-height: 1.9; max-width: 580px; }
.founder-bio + .founder-bio { margin-top: 1rem; }
.founder-social { display: flex; gap: 1.2rem; margin-top: 2.4rem; flex-wrap: wrap; }

/* ─────────────────────────────────────────
   CAPABILITIES
───────────────────────────────────────── */
.capabilities { padding: 3rem 0 4rem; background: var(--bg2); }
.cap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px; background: var(--border); border: 1px solid var(--border);
  margin-top: 3.5rem;
}
.cap-card {
  background: var(--bg2); padding: 2.4rem 2rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: background var(--transition);
}
.cap-card:hover { background: var(--surface); }
.cap-icon { font-size: 1.4rem; margin-bottom: .4rem; }
.cap-title { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--heading); }
.cap-desc { font-size: .85rem; color: var(--muted); line-height: 1.8; }
.cap-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.cap-tag { font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); padding: .18rem .55rem; border: 1px solid var(--border); border-radius: var(--radius); }

/* ─────────────────────────────────────────
   CURRENT BUILD
───────────────────────────────────────── */
.current-build { padding: 3rem 0 4rem; background: var(--bg); }
.build-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6rem; align-items: start; margin-top: 3.5rem; }
.build-detail { display: flex; flex-direction: column; gap: 1.4rem; }
.build-item { padding: 1.4rem 1.6rem; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--accent); }
.build-item-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; }
.build-item-val { font-family: var(--fh); font-size: .95rem; font-weight: 700; color: var(--heading); margin-bottom: .3rem; }
.build-item-desc { font-size: .82rem; color: var(--muted); line-height: 1.7; }

/* ─────────────────────────────────────────
   EXPERIENCE TIMELINE
───────────────────────────────────────── */
.experience { padding: 3rem 0 4rem; background: var(--bg2); }
.timeline { margin-top: 3rem; display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 160px 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-period { font-family: var(--fh); font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--muted2); padding-top: .2rem; }
.timeline-content { display: flex; flex-direction: column; gap: .4rem; }
.timeline-role { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--heading); }
.timeline-org { font-size: .84rem; color: var(--accent); }
.timeline-desc { font-size: .85rem; color: var(--muted); line-height: 1.8; margin-top: .2rem; }

@media (max-width: 1100px) {
  .founder-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .founder-photo-wrap { max-width: 280px; }
  .build-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 820px) {
  .cap-grid { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 1fr; gap: .6rem; }
}

/* ─────────────────────────────────────────
   THE LONGEDGE FRAMEWORK — vertical tab panel
───────────────────────────────────────── */
.lef-section {
  /* background: var(--bg4); */
  background: var(--bg);
  padding: 3rem 0 4rem;
}

.lef-header { margin-bottom: 4rem; }
.lef-header .section-title { margin-bottom: 0; }

.lef-body {
  display: flex;
  gap: 10px;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius8);
  padding: 1.5rem;
  background: var(--bg-dark);
}

/* ── LEFT: spine + tabs ── */
.lef-left-wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-shrink: 0;
  z-index: 1;
}

.lef-spine {
  width: 38px;
  background: linear-gradient(to bottom, #1a8fff 0%, #00c896 100%);
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}

.lef-spine-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--fh);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-feature-settings: 'lnum';
}

.lef-spine-divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}

.lef-tabs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-self: stretch;
}

/* Per-layer gradient colour stops */
.lef-tab[data-layer="0"] { --spine-color: #1a8fff; }
.lef-tab[data-layer="1"] { --spine-color: #1599ea; }
.lef-tab[data-layer="2"] { --spine-color: #10a6d5; }
.lef-tab[data-layer="3"] { --spine-color: #0ab1c0; }
.lef-tab[data-layer="4"] { --spine-color: #05bcab; }
.lef-tab[data-layer="5"] { --spine-color: #00c896; }

.lef-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0;
  border: 1.5px solid rgba(255,255,255,0.09);
  background: var(--bg4);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
/* Thin horizontal connector: spine → card left edge */
.lef-tab::before {
  content: '';
  position: absolute;
  left: -12px;       /* 2px overlap into spine — eliminates subpixel gap */
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background: rgba(255,255,255,0.18);   /* default: dim muted white */
  transition: background var(--transition);
}
.lef-tab:hover {
  border-color: rgba(255,255,255,0.2);
  background: var(--surface3);
}
.lef-tab:hover::before { background: rgba(255,255,255,0.32); }
.lef-tab.active {
  background: var(--bg-dark);
  border-color: var(--spine-color);
  border-right-color: var(--bg-dark);
  transform: translateX(12px);
}
.lef-tab.active::before {
  background: var(--spine-color);
  left: -24px;
  width: 24px;
}

.lef-tab-text { flex: 1; }

.lef-tab-anchor {
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted3);
  margin-bottom: 0.18rem;
  transition: color var(--transition);
}
.lef-tab.active .lef-tab-anchor { color: var(--heading); opacity: 0.8;}

.lef-tab-title {
  font-family: var(--fh);
  font-size: 0.91rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--transition);
}
.lef-tab.active .lef-tab-title { color: var(--spine-color); }

.lef-tab-arrow {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted3);
  flex-shrink: 0;
  transition: color var(--transition), transform var(--transition);
}
.lef-tab.active .lef-tab-arrow { color: var(--spine-color); }

/* ── RIGHT: panel wrap ── */
.lef-panel-wrap {
  flex: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Per-panel accent colours */
.lef-panel[data-panel="0"] { --panel-accent: #1a8fff; }
.lef-panel[data-panel="1"] { --panel-accent: #1599ea; }
.lef-panel[data-panel="2"] { --panel-accent: #10a6d5; }
.lef-panel[data-panel="3"] { --panel-accent: #0ab1c0; }
.lef-panel[data-panel="4"] { --panel-accent: #05bcab; }
.lef-panel[data-panel="5"] { --panel-accent: #00c896; }

.lef-panel {
  display: none;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1rem;
  position: relative;
  animation: lef-fadein 0.3s ease;
}
.lef-diag-center-label {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 400;
  fill: var(--panel-accent);
  opacity: 0.18;
  letter-spacing: -0.5px;
  pointer-events: none;
  user-select: none;
  font-feature-settings: 'lnum';
}
.lef-panel.active {
  display: flex;
  flex: 1;
  border: 1.5px solid var(--panel-accent, #1a8fff);
}

@keyframes lef-fadein {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}


.lef-panel-title {
  font-family: var(--fh);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  text-align: center;
  color: var(--heading);
  opacity: 0.8;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}

.lef-panel-sentence {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.75;
}

.lef-panel-bullets {
  list-style: none;
  padding: 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lef-panel-bullets li {
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--panel-accent) 80%, transparent);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.6;
}
.lef-panel-bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--panel-accent) 60%, transparent);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
}

/* ── Flow nodes + arrows ── */
.lef-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0;
}
.lef-flow-node {
  background: #04070a;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 0.45rem 1.25rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--panel-accent) 80%, transparent);
  line-height: 1.5;
  text-align: center;
  max-width: 640px;
}
.lef-flow-arrow {
  color: var(--panel-accent);
  opacity: 0.4;
  display: block;
  flex-shrink: 0;
}

/* ── Terminal window ── */
.lef-terminal {
  border-radius: var(--radius8);
  border: 1px solid rgba(255,255,255,0.20);
  overflow: hidden;
  background: #04070a;
  width: 100%;
  margin-top: auto;
  box-shadow: 0 0 18px rgba(26,143,255,0.28),
              0 4px 28px rgba(0,0,0,0.70);
}

.lef-terminal-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.32rem 0.75rem;
  background: #0a0f14;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.lef-terminal-favicon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lef-terminal-winctrl {
  margin-left: auto;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.lef-wc-min,
.lef-wc-close {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.65rem;
  color: var(--muted3);
  cursor: default;
  user-select: none;
  transition: color var(--transition);
}
.lef-wc-min:hover,
.lef-wc-close:hover { color: var(--heading); }

.lef-j-comment { color: var(--muted3); font-style: italic; }

.lef-terminal-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.5rem;
}

.lef-terminal-body {
  margin: 0;
  padding: 0.55rem 1.4rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.68rem;
  line-height: 1.85;
  overflow-x: auto;
  overflow-y: auto;
  height: 100px;
  white-space: pre;
  overflow-wrap: normal;
  color: var(--muted);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.lef-terminal-body::-webkit-scrollbar { width: 4px; }
.lef-terminal-body::-webkit-scrollbar-track { background: transparent; }
.lef-terminal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* JSON syntax colours */
.lef-j-key   { color: #1a8fff; }
.lef-j-str   { color: #00c896; }
.lef-j-num   { color: #f0a500; }
.lef-j-bool  { color: #0db3cc; }
.lef-j-punc  { color: #8499ae; }
.lef-j-brace { color: #a8bdd0; }
.lef-j-arrow { font-size: 0.90rem; vertical-align: -0.1em; }

/* ── Responsive / mobile accordion ── */
@media (max-width: 900px) {
  .lef-body { flex-direction: column; padding: 1rem; gap: 1rem; }
  .lef-left-wrap { width: 100%; align-self: auto; gap: 0; z-index: auto; }
  .lef-spine { display: none; }
  .lef-tabs { width: 100%; align-self: auto; }
  .lef-tab { border-radius: var(--radius8); }
  .lef-tab::before { display: none; }

  /* Panel-wrap hidden on mobile — active panel is moved into .lef-tabs via JS */
  .lef-panel-wrap { display: none; }

  /* Accordion panel injected right after its active tab */
  .lef-tabs .lef-panel {
    animation: none;
    padding: 1.2rem;
    background: var(--surface);
    border: 1.5px solid rgba(0,200,150,0.22);
    border-top: none;
    border-radius: 0 0 var(--radius8) var(--radius8);
    gap: 1.1rem;
  }
  .lef-tabs .lef-panel.active { display: flex; flex: none; }

  /* Active tab: flat bottom connects to accordion panel; undo desktop polygon shift */
  .lef-tab.active {
    border-radius: var(--radius8) var(--radius8) 0 0;
    border-bottom-color: transparent;
    border-right-color: var(--spine-color);
    background: var(--surface);
    transform: none;
  }
  .lef-tab.active .lef-tab-arrow { transform: rotate(90deg); }
}


/* ═══════════════════════════════════════════════════════════
   GRID SAMPLE  —  gridSample.ejs
   ───────────────────────────────────────────────────────────
   SINGLE-LAYER ARCHITECTURE

   The <section> is simultaneously the CSS Grid and the
   background canvas.

   background-image draws 48 × 48 px squares starting at
   origin (0,0).  grid-template-columns: repeat(auto-fill,48px)
   and grid-auto-rows: 48px place tracks starting at the same
   origin.  Both are permanently in sync at every viewport
   width — no JS, no custom properties, no offsets.

   Title / sub blocks (grid-column: 1/-1)
     background: transparent — the grid texture shows through.
     Only the horizontal track boundaries (48px multiples)
     define the top and bottom of each block.

   Copy items (grid-column: span 8; grid-row: span 6)
     background: #08080e — slightly elevated above #020206.
     The elevation covers interior grid lines inside the item.
     Grid lines at the item's four edges are visible in the
     adjacent empty cells — those lines ARE the copy borders.
     No border property is required.

   At ≥24 cols (≥1152 px) all three copy items sit in one row.
   Below that they wrap naturally by the grid engine.
   At ≤480 px copy items expand to full width (1/-1).
   ─────────────────────────────────────────────────────── */

.gs-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 48px);
  grid-auto-rows: 48px;

  background-color: #020206;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 0 0;

  overflow: hidden;
  padding-bottom: 76px; /* 2 empty grid rows at base of section */
}

/* ── Title block ────────────────────────────────────────────
   grid-column: 2/-2 leaves one 48 px cell empty on each side.
   Those empty cells show the grid, and the grid lines at
   column 2 and column N-1 ARE the left/right borders.
   Solid background hides the interior grid cells. ── */
.gs-title-block {
  grid-column: 2 / -2;
  grid-row: span 6;        /* 6 × 48 = 288 px */
  padding: 48px 48px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  background: #020206;
  border: 1px solid rgba(255,255,255,0.07);
  border-bottom: none;     /* shared line with gs-sub-block top */
}

.gs-title {
  font-family: var(--fh);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── Sub block ──────────────────────────────────────────────
   Same column range as title-block so the left/right borders
   form one continuous vertical line down both blocks. ── */
.gs-sub-block {
  grid-column: 2 / -2;
  grid-row: span 4;        /* 4 × 48 = 192 px */
  padding: 20px 48px;
  display: flex;
  align-items: center;
  background: #020206;
  border: 1px solid rgba(255,255,255,0.07);
}

.gs-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
  max-width: 640px;
}

/* ── Copy items ─────────────────────────────────────────────
   8 cols × 6 rows = 384 × 288 px per item at default scale.
   Elevated background covers interior grid lines.
   The four surrounding grid lines become the item border.

   Auto-fill behaviour:
     ≥24 cols  → 3 across (fills 24 of 24+ available cols)
     16 cols   → 2 across, 1 wraps below
     8 cols    → 1 per row
     ≤480 px   → full-width override ── */
.gs-copy-item {
  grid-column: span 8;
  grid-row: span 6;
  background: #08080e;
  padding: 32px;
  overflow: hidden;
}

/* Vertical divider between copy items.
   border-right sits at the item's right track edge —
   the same pixel position as the background-image grid line
   at that column boundary — so they read as one line. */
.gs-copy-item:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.07);
}

.gs-chip {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 0.2rem 0.5rem;
  margin-bottom: 1.25rem;
}

.gs-copy-item h3 {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 0.625rem;
  line-height: 1.3;
}

.gs-copy-item p {
  font-size: 0.9375rem;
  color: var(--muted2);
  line-height: 1.65;
  margin: 0;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  /* Title / sub: full-width, drop side borders (section edge is the frame) */
  .gs-title-block,
  .gs-sub-block {
    grid-column: 1 / -1;
    border-left: none;
    border-right: none;
  }
  .gs-title-block { padding: 48px 24px 20px; }
  .gs-sub-block   { padding: 16px 24px; }

  /* Copy items: full-width, horizontal divider replaces vertical */
  .gs-copy-item                  { grid-column: 1 / -1; grid-row: span 5; border-right: none; }
  .gs-copy-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.07); }
}

/* ═══════════════════════════════════════
   LEF LAYER DIAGRAM (SVG)
═══════════════════════════════════════ */
.lef-panel-top:has(.lef-diag) {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lef-diag {
color: var(--panel-accent);  
display: block;
  width: 100%;
  max-width: 710px;
  height: auto;
  overflow: visible;
  margin: auto;
}
.lef-panel:has(.lef-diag) .lef-terminal {
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
}
.lef-diag-node {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.40))
          drop-shadow(0 1px 2px rgba(0,0,0,0.28));
}
.lef-diag-node rect {
  stroke: var(--panel-accent);
  stroke-width: 0.7;
  stroke-opacity: 0.60;
}
.lef-diag-label {
  fill: var(--text);
  font-size: 13px;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
}
.lef-diag-body {
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  fill: var(--muted2);

}
.lef-diag-conn {
  stroke: var(--panel-accent);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  stroke-linecap: round;
  color: var(--panel-accent);
  fill: none;
  stroke-opacity: 0.80;
}
.lef-diag-chip rect,
.lef-diag-badge rect {
  fill: var(--panel-accent);
  stroke: var(--panel-accent);
  stroke-width: 1;
  stroke-opacity: 0.35;
}

.lef-diag-chip1 rect,
.lef-diag-badge1 rect {
  fill: #1a8fff;
  stroke: #1a8fff;
  stroke-width: 1;
  stroke-opacity: 0.35;
}
.lef-diag-chip2 rect,
.lef-diag-badge2 rect {
  fill: #1599ea;
  stroke: #1599ea;
  stroke-width: 1;
  stroke-opacity: 0.35;
}
.lef-diag-chip3 rect,
.lef-diag-badge3 rect {
  fill: #10a6d5;
  stroke: #10a6d5;
  stroke-width: 1;
  stroke-opacity: 0.35;
}
.lef-diag-chip4 rect,
.lef-diag-badge4 rect {
  fill: #0ab1c0;
  stroke: #0ab1c0;
  stroke-width: 1;
  stroke-opacity: 0.35;
}
.lef-diag-chip5 rect,
.lef-diag-badge5 rect {
  fill: #05bcab;
  stroke: #05bcab;
  stroke-width: 1;
  stroke-opacity: 0.35;
}
.lef-diag-chip6 rect,
.lef-diag-badge6 rect {
  fill: #00c896;
  stroke: #00c896;
  stroke-width: 1;
  stroke-opacity: 0.35;
}

.lef-diag-chip1 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-feature-settings: 'lnum';
}
.lef-diag-badge1 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: 'lnum';
}

.lef-diag-chip2 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-feature-settings: 'lnum';
}
.lef-diag-badge2 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: 'lnum';
}

.lef-diag-chip3 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-feature-settings: 'lnum';
}
.lef-diag-badge3 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: 'lnum';
}

.lef-diag-chip4 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-feature-settings: 'lnum';
}
.lef-diag-badge4 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: 'lnum';
}

.lef-diag-chip5 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-feature-settings: 'lnum';
}
.lef-diag-badge5 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: 'lnum';
}

.lef-diag-chip6 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-feature-settings: 'lnum';
}
.lef-diag-badge6 text {
  fill: #000000;
  font-size: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: 'lnum';
}

/* ─────────────────────────────────────────
   MOBILE: Center section header triad
───────────────────────────────────────── */
@media (max-width: 768px) {
  .le-eyebrow-tag {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .section-title,
  .page-hero-title,
  .hb-section-title,
  .ca-h2,
  .uc2-h2,
  #le-founder h2 {
    text-align: center;
  }
  .section-title br,
  .page-hero-title br,
  .hb-section-title br,
  .ca-h2 br,
  .uc2-h2 br,
  #le-founder h2 br {
    display: none;
  }
  .em-header-left { width: 100%; min-width: 0; }
  .section-body,
  .page-hero-sub {
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .sim-header .section-title,
  .sim-header .section-body {
    max-width: 100%;
  }

  /* About page hero — sub copy left-aligned on mobile */
  .about-page-hero .page-hero-sub,
  .about-page-hero .page-hero-contrast,
  .about-page-hero .page-hero-claim {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ══════════════════════════════════════
   CAPABILITY ANCHOR — Founder Section
══════════════════════════════════════ */
.ca-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% 8%, rgba(0,200,150,.045), transparent 55%),
    radial-gradient(120% 90% at 8% 100%, rgba(26,143,255,.04), transparent 55%),
    var(--bgIntro);
}
.ca-section {
  --ca-arrow: 9.5%;
  --ca-gap: clamp(38px, 4.5vw, 68px);
  /* px (not vw) so the badge scales with browser zoom like the text; 170px maps the 140-unit viewBox to the identity diagram's scale */
  --ca-badge-w: 170px;
  --ca-node-h: clamp(400px, 28vw, 440px);
}
.ca-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5vw;
}
.ca-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.ca-h2 {
  font-family: var(--fh);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--heading);
  max-width: 800px;
}
.ca-h2 .ca-accent { color: var(--accent); }
.ca-h2 .ca-accent2 { color: var(--accent2); }
.ca-bridge {
  text-align: center;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.ca-bridge b { color: var(--text); font-weight: 500; }
.ca-bridge .ca-prod { color: var(--accent); font-weight: 600; }

.ca-node {
  display: flex;
  align-items: center;
  gap: var(--ca-gap);
  max-width: 1320px;
  margin: 0 auto;
}
.ca-arrow {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ca-badge-wrap { flex: 0 0 var(--ca-badge-w); }

.ca-panel {
  position: relative;
  display: flex;
  overflow: hidden;
}
.ca-panel--eng {
  align-items: flex-start;
  clip-path: polygon(0 0, calc(100% - var(--ca-arrow)) 0, 100% 100%, var(--ca-arrow) 100%);
  background:
    linear-gradient(180deg, #05090f 0%, #0a1626 74%, #0d2032 100%),
    radial-gradient(70% 120% at 8% 0%, rgba(26,143,255,.06), transparent 60%);
}
.ca-panel--mkt {
  align-items: flex-end;
  clip-path: polygon(var(--ca-arrow) 0, 100% 0, calc(100% - var(--ca-arrow)) 100%, 0 100%);
  background:
    linear-gradient(0deg, #05090f 0%, #0a1626 74%, #0d2032 100%),
    radial-gradient(70% 120% at 8% 100%, rgba(0,200,150,.06), transparent 60%);
}
.ca-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  pointer-events: none;
}
.ca-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.ca-panel__content {
  position: relative;
  z-index: 2;
  max-width: 90%;
  padding: clamp(.9rem,1.6vw,1.15rem) clamp(1.4rem,4vw,2.2rem) clamp(.9rem,1.6vw,1.15rem) calc(clamp(2.2rem,11%,7rem) + 30px);
}
.ca-kicker {
  font-family: var(--fb);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.ca-panel--eng .ca-kicker { color: var(--accent2); }
.ca-panel--mkt .ca-kicker { color: var(--accent); margin-top: .7rem; margin-bottom: 0; }
.ca-kicker .ca-lab,
.ca-kicker .ca-ex,
.ca-kicker .ca-hi {
  text-transform: none;
  letter-spacing: .05em;
}
.ca-kicker .ca-lab {
  font-weight: 400;
  color: var(--muted);
}
.ca-ex { color: var(--accent2); }
.ca-hi { color: var(--accent); }

.ca-quals { display: flex; flex-direction: column; gap: .45rem; }
.ca-qrow { display: flex; gap: .45rem; flex-wrap: nowrap; }
.ca-qual {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  padding: .3rem .56rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text);
  background: rgba(255,255,255,.018);
  white-space: nowrap;
}

.ca-tags {
  margin-top: .8rem;
  font-size: .61rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
}
.ca-tags .ca-lab { color: var(--muted3); margin-right: .5rem; }
.ca-panel--eng .ca-tags .ca-ex { color: #6f93b8; }
.ca-panel--mkt .ca-tags .ca-ex { color: #5a9f8b; }

.ca-seam {
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 5;
}
.ca-seam__line {
  position: absolute;
  left: var(--ca-arrow);
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(0,200,150,0) 0%, rgba(0,200,150,.8) 30%, var(--accentmid) 100%);
  box-shadow: 0 0 7px rgba(0,200,150,.3);
}
.ca-connector {
  position: absolute;
  left: 100%;
  /* span the flex gap plus the badge wrap's glow padding (ring edge is 16.65/140 in), stop 3px short */
  width: calc(var(--ca-gap) + var(--ca-badge-w) * 0.119 - 3px);
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(13,179,204,.5), rgba(0,200,150,.1));
  z-index: 5;
}
.ca-seam__wm { display: none; }

.ca-badge-wrap {
  position: relative;
  width: var(--ca-badge-w);
  aspect-ratio: 140 / 150;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-hex { position: absolute; inset: 0; width: 100%; height: 100%; }

.ca-foot {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: end;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.ca-close { font-size: .95rem; color: var(--muted); line-height: 1.8; max-width: 54ch; }
.ca-attrib { text-align: right; }
.ca-name {
  font-family: var(--fh);
  font-size: 1.02rem;
  color: var(--heading);
  font-weight: 600;
  letter-spacing: -.01em;
}
.ca-role { font-size: .78rem; color: var(--muted2); letter-spacing: .04em; margin-top: .15rem; margin-bottom: 1rem; }
.ca-links { display: flex; gap: 1.6rem; justify-content: flex-end; flex-wrap: wrap; }
.ca-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .86rem;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--transition);
}
.ca-link::after { content: '→'; }
.ca-link:hover { gap: .75rem; }


/* ── ca-node chevron reveal (Option 1: unit slides in from left → connector draws → hex pops) ── */
.ca-node--ready .ca-arrow    { opacity: 0; }
.ca-node--ready .ca-connector { opacity: 0; }
.ca-node--ready .ca-badge-wrap { opacity: 0; }

.ca-node--live .ca-arrow {
  animation: ca-chev-enter 2.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.ca-node--live .ca-connector {
  transform-origin: left center;
  animation: ca-line-draw .6s ease-out 1.0s forwards;
}
.ca-node--live .ca-badge-wrap {
  opacity: 0;
  animation: ca-hex-pop .65s cubic-bezier(.2,.8,.2,1) 1.5s both;
}

@keyframes ca-chev-enter {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ca-line-draw {
  from { opacity: 1; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes ca-hex-pop {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-node--ready .ca-arrow,
  .ca-node--ready .ca-connector,
  .ca-node--ready .ca-badge-wrap { opacity: 1; }
  .ca-node--live .ca-arrow,
  .ca-node--live .ca-connector,
  .ca-node--live .ca-badge-wrap { animation: none; }
}

@media (max-width: 1024px) {
  .ca-h2 { max-width: none; }
  .ca-node { flex-direction: column; gap: 0; max-width: 620px; }
  .ca-arrow { display: contents; }
  .ca-panel {
    position: static;
    height: auto;
    clip-path: none;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius8);
  }
  .ca-panel::after { display: none; }
  .ca-edge { display: none; }
  .ca-panel--eng {
    background: linear-gradient(to bottom, #080f17 0%, #0d2535 100%);
    border-bottom-color: rgba(0,200,150,.6);
  }
  .ca-panel--mkt {
    background: linear-gradient(to bottom, #0d2535 0%, #080f17 100%);
    border-top-color: rgba(0,200,150,.6);
  }
  .ca-panel__content { max-width: none; padding: clamp(1.3rem, 5vw, 1.7rem); }
  .ca-panel--eng .ca-panel__content { padding-bottom: 72px; }
  .ca-panel--mkt .ca-panel__content { padding-top: 72px; }
  .ca-quals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .45rem; }
  .ca-qrow { display: contents; }
  .ca-qual { white-space: normal; line-height: 1.4; }
  .ca-seam { display: none; }
  .ca-seam__line,
  .ca-connector { display: none; }
  .ca-seam__wm { display: none; }
  .ca-badge-wrap { flex: none; width: 132px; margin: -71px auto; order: 2; position: relative; z-index: 10; }
  .ca-panel--mkt { order: 3; }
  .ca-foot { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
  .ca-close { margin-inline: auto; }
  .ca-attrib { text-align: center; }
  .ca-links { justify-content: center; }
}
@media (max-width: 430px) { .ca-container { padding: 6vw 6vw; } }

/* ── Privacy Policy ───────────────────────────────────────── */
.privacy-section { padding: calc(4rem + 60px) 0 4rem; }
.privacy-body { max-width: 780px; }
.privacy-body .section-body { max-width: none; margin-top: 1rem; }
.privacy-body .section-body + .section-body { margin-top: 0.6rem; }
.privacy-heading {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 600;
  color: var(--fg); margin-top: 3rem; margin-bottom: 0.5rem;
}
.privacy-list {
  list-style: disc; padding-left: 1.6rem;
  color: var(--muted); font-size: .97rem; line-height: 1.9;
  margin-top: 0.6rem;
}
.privacy-list li + li { margin-top: 0.25rem; }

/* ── Founder Section (#le-founder) ───────────────────────────────────────── */
#le-founder {
  padding: 3rem 0 4rem;
  /* --bg: #0a0d14; */
  --bg: #06090d;
  --surface: #11151f;
  --surface-2: #141925;
  --surface-3: #10141d;
  --line: #222a38;
  --line-soft: #1b2230;
  --text: #e7eaf0;
  --text-mut: #9aa3b2;
  --text-faint: #69727f;
  --accent: #00c896;
  --accent-blue: #5ac8fa;
  --gold: #c9a961;
  --f1: #5ac8fa; --f2: #48c8e6; --f3: #36c8d2;
  --f4: #24c8be; --f5: #12c8aa; --f6: #00c896;

  background: var(--bg);
  color: var(--text);
  
  -webkit-font-smoothing: antialiased;
}
#le-founder * { box-sizing: border-box; }

/* section header */
#le-founder h2 {
  font-family: var(--font-head, "Sora", sans-serif); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12;
  margin: 0; color: #fff; letter-spacing: -.01em;
}

/* identity + synthesis layout */
#le-founder .fnd-converge {
  display: grid; grid-template-columns: 340px 1fr; gap: 56px;
  align-items: center; margin-top: 32px;
}
#le-founder .fnd-id-card  { }
#le-founder .fnd-synthesis { padding-top: 1.5rem; align-self: center; }
#le-founder .fnd-id-surface {
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--line); border-radius: 6px; padding: 22px;
}
#le-founder .fnd-photo {
  width: 100%; aspect-ratio: 1/1; border-radius: 4px; margin-bottom: 20px;
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  background: #0e121b;
}
#le-founder .fnd-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
#le-founder .fnd-id-name {
  font-family: var(--font-head, "Sora", sans-serif); font-weight: 600;
  font-size: 1.3rem; color: #fff; margin: 0 0 5px;
}
#le-founder .fnd-id-title {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px;
}
#le-founder .fnd-id-linkedin {
  display: inline-block;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: .74rem; letter-spacing: .06em; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px;
}
#le-founder .fnd-id-linkedin:hover { border-bottom-color: var(--accent); color: #fff; }
#le-founder .fnd-id-meta {
  border-top: 1px solid var(--line-soft); padding-top: 16px; display: grid; gap: 11px;
}
#le-founder .fnd-id-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 10px;
  font-size: .84rem; line-height: 1.45;
}
#le-founder .fnd-id-row .k {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); padding-top: 2px;
}
#le-founder .fnd-id-row .v { color: var(--text-mut); }
#le-founder .fnd-id-row .v a {
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line);
}
#le-founder .fnd-id-row .v a:hover { border-bottom-color: var(--accent); color: #fff; }

/* synthesis */
#le-founder .fnd-synthesis h3 {
  font-family: var(--font-head, "Sora", sans-serif); font-weight: 600;
  font-size: 1.15rem; color: #fff; margin: 4px 0 22px; letter-spacing: -.005em;
}
#le-founder .fnd-synthesis p {
  font-size: 1.02rem; line-height: 1.75; color: #c6ccd8; margin: 0 0 20px; max-width: 60ch;
}
#le-founder .fnd-synthesis p strong { color: #eef1f6; font-weight: 600; }
#le-founder .fnd-pull {
  margin: 34px 0 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--gold);
}
#le-founder .fnd-pull q {
  font-family: var(--font-head, "Sora", sans-serif); font-weight: 400;
  font-size: 1.22rem; line-height: 1.5; color: #fff; quotes: none;
}
#le-founder .fnd-pull .by {
  display: block; margin-top: 12px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}

/* facets */
#le-founder .fnd-facets-head { margin: 118px 0 36px; }
#le-founder .fnd-facets-head .le-eyebrow-tag { margin-bottom: 14px; }
#le-founder .fnd-facets-head h3 {
  font-family: var(--font-head, "Sora", sans-serif); font-weight: 600;
  font-size: 1.5rem; color: #fff; margin: 0;
}
#le-founder .fnd-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px;
}
#le-founder .fnd-facet {
  --c: var(--accent);
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--line); border-radius: 6px; padding: 26px 26px 24px;
  overflow: hidden; transition: border-color .25s ease, transform .25s ease;
}
#le-founder .fnd-facet::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c); opacity: .85;
}
#le-founder .fnd-facet::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px;
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
#le-founder .fnd-facet:hover {
  border-color: color-mix(in srgb, var(--c) 45%, var(--line));
  transform: translateY(-3px);
}
#le-founder .fnd-facet:hover::after { opacity: .10; }
#le-founder .fnd-ic { width: 36px; height: 36px; color: var(--c); margin-bottom: 18px; display: block; }
#le-founder .fnd-ic svg { width: 100%; height: 100%; display: block; }
#le-founder .fnd-facet h4 {
  font-family: var(--font-head, "Sora", sans-serif); font-weight: 600;
  font-size: 1.06rem; color: #fff; margin: 0 0 8px; letter-spacing: -.005em;
}
#le-founder .fnd-lede {
  font-size: .93rem; line-height: 1.62; color: #c6ccd8; margin: 0 0 18px;
}
#le-founder .fnd-facet ul {
  list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px;
}
#le-founder .fnd-facet li {
  position: relative; padding-left: 16px;
  font-size: .84rem; line-height: 1.5; color: var(--text-mut);
}
#le-founder .fnd-facet li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  background: var(--c); border-radius: 1px; opacity: .7;
}
#le-founder .fnd-facet li b { color: #eef1f6; font-weight: 600; }
#le-founder .fnd-principle {
  font-size: .84rem; line-height: 1.55; color: #aab2c0; margin: 0 0 18px;
  border-top: 1px solid var(--line-soft); padding-top: 14px;
}
#le-founder .fnd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#le-founder .fnd-tags span {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: .68rem; letter-spacing: .02em;
  color: var(--text-mut); background: #0c0f17;
  border: 1px solid var(--line-soft); padding: 3px 8px; border-radius: 3px;
}

  #le-founder .credo{
    margin-top:34px; padding-top:22px; border-top:1px solid var(--line-soft);
  }
  #le-founder .credo .eq{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:1.05rem; letter-spacing:.01em; color:#c6ccd8;white-space: nowrap;
  }
  #le-founder .credo .eq b{ color:var(--accent); font-weight:500; }
  #le-founder .credo .eq sup{ font-size:.62em; color:var(--accent-blue); }

.eq1 {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.05em; /* Slightly boosts readability */
    white-space: nowrap; /* Prevents the formula from breaking into two lines on mobile screens */
  color:#c6ccd8;
}
.eq1 b{ color:var(--accent); font-weight:500; }

.eq1 sup1 {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.4em; /* Manually nudges the 'n' up without disrupting paragraph spacing */
  color:var(--accent-blue);
}

/* responsive */
@media (max-width: 880px) {
  #le-founder { padding: 2rem 0 3.5rem; }
  #le-founder .fnd-converge { grid-template-columns: 1fr; gap: 36px; }
  #le-founder .fnd-id-card { position: static; max-width: 420px; }
  #le-founder .fnd-facets-head { margin-top: 84px; }
}


/* ══════════════════════════════════════════════════════════
   USE CASES 2 — BUYER SELF-IDENTIFICATION
   Namespace: .uc2-*
══════════════════════════════════════════════════════════ */

.use-cases2 {
  padding: 3rem 0 4rem;
  background: var(--bg);
}

/* ── Header row ── */
.uc2-header {
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 8vw, 8rem);
  margin-bottom: 1rem;
}

.uc2-header-left { flex: 0 0 auto; }

.uc2-header-left .section-title {
  margin: 0;
  line-height: 1.2;
}

.uc2-header-right {
  flex: 1 1 auto;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.8;
  max-width: clamp(270px, 40vw, 560px);
  margin-top: 0.5rem;
}

.uc2-header-right p { margin: 0; }

@media (max-width: 820px) {
  .uc2-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .uc2-header-right { max-width: 100%; }
}

/* ── Classification tag panel ── */
.uc2-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem .65rem;
  margin-top: 2rem;
}

.uc2-tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  border: 1px solid var(--border-hi);
  padding: .28rem .7rem;
  border-radius: 3px;
  background: var(--bg3);
  transition: color .25s ease, border-color .25s ease;
}

.uc2-tag:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
}

/* ── Operating model divider statement ── */
.uc2-divider-statement {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  font-feature-settings: "lnum" 1;
}

.uc2-div-line {
  flex: 1;
  height: 1px;
  background: var(--border-hi);
  
}

.uc2-divider-statement p {
  font-family: var(--fh);
  font-size: .95rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  margin: 0;
  white-space: nowrap;
}

/* ── Footer strip ── */
.uc2-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.uc2-footer-left strong {
  display: block;
  font-size: .95rem;
  color: var(--heading);
  font-weight: 600;
  margin-bottom: .4rem;
}

.uc2-footer-left p {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
}

.uc2-footer-cta-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--heading);
}

.uc2-footer-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {
  .uc2-grid { grid-template-columns: repeat(2, 1fr); }
  .uc2-header { flex-wrap: wrap; gap: 1rem; }
  .uc2-header-connector { display: none; }
  .uc2-header-right { max-width: none; flex: 1 1 100%; }
}

/* ── Responsive: mobile ── */
@media (max-width: 580px) {
  .use-cases2 { padding: 3.5rem 0; }
  .uc2-grid { grid-template-columns: 1fr; }
  .uc2-divider-statement p { white-space: normal; }
  .uc2-footer { flex-direction: column; }
  .uc2-footer-right { align-items: flex-start; }
}

/* ══════════════════════════════════════
   PLATFORM CAPABILITIES — Namespace: .cap-*
   All classes scoped to this section only.
   Do not reuse outside platform-capabilities.
══════════════════════════════════════ */

.platform-capabilities {
  padding: 3rem 0 4rem;
  background: var(--bgIntro);
}

.cap-header { margin-bottom: 4rem; }
.cap-header .section-title { margin-bottom: 0; }

/* 3-column grid, full container width */
.platform-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
}

/* Card */
.platform-cap-card {
  padding: 24px;
  background: #090d14;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  border-top:    1px solid rgba(255,255,255,0.18);
  border-right:  1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.14);
  box-shadow: 0 2px 6px rgba(0,0,0,0.40),
              0 1px 2px rgba(0,0,0,0.28),
              inset 0 1px 0 rgba(255,255,255,0.06);
  transition: box-shadow var(--transition), transform var(--transition);
}

.platform-cap-card:hover {
  background: #090d14;
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,200,120,0.22),
              0 2px 8px rgba(0,200,120,0.10),
              0 6px 24px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Card tag */
.platform-cap-card-tag {
  font-size: 0.60rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.65;
  margin-bottom: 6px;
}

/* Card title */
.platform-cap-card-title {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  opacity: 0.80;
  margin: 0;
  line-height: 1.3;
}

/* Subdescription */
.platform-cap-card-sub {
  margin: 16px 0 0;
  font-size: 0.75rem;
  
  color: var(--muted2);
  opacity: 0.80;
  line-height: 1.8;
}

/* Scope strip */
.cap-scope-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
}

.cap-scope-dot {
  color: var(--accent);
  opacity: 0.4;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .platform-cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .platform-cap-grid {
    grid-template-columns: 1fr;
  }
  .cap-scope-strip {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }
}


/* ─────────────────────────────────────────
   QUESTION BRIDGE  (landing — 2nd section)
   Wordless interstitial: the trader's own questions
   surface and settle into a halo around the anchor,
   which Recognition then answers.
───────────────────────────────────────── */
.question-bridge-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: clamp(520px, 78vh, 760px);
  padding: 2rem 0 2rem;
  overflow: hidden;
  background: var(--bg);
  --qb-floor: 0.10;
}

/* chalkboard field — contained by .container, wall shows either side */
.qb-field {
  position: relative;
  width: 100%;
  height: clamp(440px, 62vh, 600px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0,200,150,0.07) 0%, transparent 70%),
    var(--bgIntro);
  border-top:    1px solid rgba(255,255,255,0.18);
  border-right:  1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.14);
}
/* chalkboard slate grain */
.qb-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: overlay;
}
/* vignette — deepened for chalkboard feel; no letterbox bars needed now */
.qb-field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  box-shadow:
    inset 0 0 100px rgba(0,0,0,0.55),
    inset 0 0 40px rgba(0,0,0,0.25);
}

/* a question (text never moves or resizes — only opacity / clip changes) */
.qb-q {
  position: absolute; top: 50%; left: 50%;
  width: min(80%, 560px); text-align: center; pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--qb-x, 0px), var(--qb-y, 0px));
}
.qb-setup { display: block; font-family: var(--fb); font-weight: 400;
  color: var(--muted2); font-size: clamp(0.875rem, 1.92vw, 1.575rem); margin-bottom: .1rem; }

.qb-ask   { display: block; font-family: var(--fh); font-weight: 600;
  color: var(--heading); font-size: clamp(0.975rem, 2.67vw, 1.725rem);
  line-height: 1.18; letter-spacing: -.01em; }

/* satellites: viewport-relative width so hex slots never clip at any desktop size */
.qb-q.qb-sat { width: min(24vw, 460px); }

.qb-q.qb-sat .qb-setup { font-size: clamp(0.54rem, 1.19vw, 0.98rem); margin-bottom: .2rem; }
.qb-q.qb-sat .qb-ask   { font-size: clamp(0.60rem, 1.66vw, 1.07rem); }

/* ── default state = the rested composition (no-JS / reduced-motion safe) ── */
.qb-q.qb-sat    { opacity: var(--qb-floor); z-index: 1; }
.qb-q.qb-anchor { opacity: 1; z-index: 7; }
.qb-q.qb-anchor .qb-ask { text-shadow: 0 0 30px rgba(13,179,204,.32); }
.qb-q.qb-anchor::after {
  content: ""; display: block; width: 48px; height: 2px; margin: 18px auto 0;
  border-radius: 2px; opacity: 1; transition: opacity .5s ease;
  box-shadow: 0 0 16px rgba(13,179,204,.5);
  background: linear-gradient(90deg, var(--accent2), var(--accentmid), var(--accent));
}

/* ── armed (JS present, motion allowed): begin blank, then sequence in ── */
.qb-field.qb-armed .qb-q.qb-sat    { opacity: 0; }
.qb-field.qb-armed .qb-q.qb-anchor { opacity: 0; }
.qb-field.qb-armed .qb-q.qb-anchor::after { opacity: 0; }      /* underline hidden until resolve */

.qb-field.qb-armed .qb-q.qb-lead     { opacity: 1; z-index: 6; transition: opacity .5s ease; }
.qb-field.qb-armed .qb-q.qb-waiting  { opacity: .22; z-index: 2; transition: opacity .8s ease; }
.qb-field.qb-armed .qb-q.qb-dominant {
  opacity: 1; z-index: 7; transform: translate(-50%,-50%) scale(1.03);
  transition: opacity .5s ease, transform .5s ease;
}
.qb-field.qb-armed .qb-q.qb-dominant::after { opacity: 1; }
.qb-field.qb-armed .qb-q.qb-dominant.qb-pulse .qb-ask { animation: qb-glow .95s ease; }

/* satellite reveal: top-to-bottom unveil → hold (readable) → settle to floor. opacity + clip only. */
@keyframes qb-revealDown {
  0%   { opacity: 1; clip-path: inset(0 0 100% 0); }
  20%  { opacity: 1; clip-path: inset(0 0 0 0); }
  50%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: var(--qb-floor); clip-path: inset(0 0 0 0); }
}
.qb-field.qb-armed .qb-q.qb-run { animation: qb-revealDown 3.5s ease forwards; }

@keyframes qb-glow {
  0%   { text-shadow: 0 0 30px rgba(13,179,204,.3); }
  45%  { text-shadow: 0 0 50px rgba(13,179,204,.78); }
  100% { text-shadow: 0 0 30px rgba(13,179,204,.3); }
}

/* mobile / portrait: taller field, wider text column (JS switches to a vertical slot layout) */
@media (max-width: 760px), (orientation: portrait) {
  .qb-field { height: clamp(460px, 70vh, 620px); }
  .qb-q { width: 88%; }
}

/* above/below-field captions — typography mirrors .sav2-bridge */
.qb-caption {
  font-family: var(--fb);
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
  margin: 0;

}
.qb-caption--top    { text-align: left;  margin-bottom: 0.5rem; color: var(--accent2); }
.qb-caption--bottom { text-align: right; margin-top: 0.5rem;   color: var(--accent); }

/* play/pause button */
.qb-playbtn {
  position: absolute; bottom: 14px; right: 14px; z-index: 9;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, border-color .2s ease;
  padding: 0;
}
.qb-playbtn:hover { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.32); }
/* icon visibility — pause shown during play, play shown when paused/done/idle */
.qb-icon-play  { display: none; }
.qb-icon-pause { display: block; }
.qb-field:not(.qb-armed) .qb-icon-play,
.qb-field.qb-paused      .qb-icon-play,
.qb-field.qb-done        .qb-icon-play  { display: block; }
.qb-field:not(.qb-armed) .qb-icon-pause,
.qb-field.qb-paused      .qb-icon-pause,
.qb-field.qb-done        .qb-icon-pause { display: none; }
/* freeze keyframe animations while paused */
.qb-field.qb-paused .qb-q.qb-run { animation-play-state: paused; }

/* visually-hidden heading for document outline / screen readers */
.qb-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* belt-and-suspenders: if armed but motion reduced, hold the rested composition */
@media (prefers-reduced-motion: reduce) {
  .qb-field.qb-armed .qb-q.qb-sat    { opacity: var(--qb-floor); }
  .qb-field.qb-armed .qb-q.qb-anchor { opacity: 1; }
  .qb-field.qb-armed .qb-q.qb-anchor::after { opacity: 1; }
  .qb-field.qb-armed .qb-q.qb-run    { animation: none; }
}

/* ============ SKIP LINK (a11y — first focusable element, visible on keyboard focus only) ============ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.6rem 1.2rem;
  background: var(--accent);
  color: #06090d;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* Hero title is a span inside the single h1 (headings cannot nest) — restore block flow */
.hero-h1-title { display: block; }