/* ============================================================================
   sections.css : metaphor, problem, moat/permission-gate, capabilities,
   posture, architecture, global/RTL, brand story, footer
   ============================================================================ */

/* ─── Shared section type ─── */
.section h2 { font-size: clamp(28px, 4.2vw, 46px); font-weight: 700; letter-spacing: -0.03em; margin: 14px 0 0; }
.section .eyebrow + h2 { margin-top: 14px; }
.lead {
  margin-top: 22px; max-width: 62ch; font-size: clamp(16px, 1.5vw, 18.5px);
  color: var(--text); opacity: 0.92;
}
.lead-center { margin-inline: auto; text-align: start; }

/* ─── Hero proof card (audit ledger glimpse) ─── */
.hero-proofcard {
  position: relative;
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #10141c 0%, #0B0E14 100%);
  border: 1px solid var(--border-cyan);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 60px rgba(10,12,16,0.5);
  overflow: hidden;
}
.hero-proofcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand); opacity: 0.9;
}
.proofcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.proofcard-policy { font-size: 11px; color: var(--text-muted); }
.ledger { list-style: none; display: grid; gap: 10px; font-size: 12.5px; color: var(--text-secondary); }
.ledger li { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,0.06); }
/* a log line is ALWAYS one line — long entries clip under a soft fade at the
   card edge (authentic console truncation). Uniform row height at every width
   means the live tape's locked view height and measured shift can never drift
   from reality, even mid-stream on a 320px phone. Static mask, no paint cost. */
.ledger li {
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
  mask-image: linear-gradient(90deg, #000 94%, transparent);
}
.ledger li:last-child { border-bottom: 0; padding-bottom: 0; }
/* The ledger writes itself in — one staggered pass after the hero settles
   (~1.5s), so the proof card reads as a live audit, not a screenshot.
   CSS-only and starts hidden → flash-free, fires once, survives a slow main.js. */
.ledger li {
  opacity: 0;
  transform: translateY(6px);
  animation: ledgerRowIn var(--t-base) var(--ease-spring) forwards;
}
.ledger li:nth-child(1) { animation-delay: calc(1.5s * var(--motion-scale)); }
.ledger li:nth-child(2) { animation-delay: calc(1.5s * var(--motion-scale) + 1 * var(--stagger)); }
.ledger li:nth-child(3) { animation-delay: calc(1.5s * var(--motion-scale) + 2 * var(--stagger)); }
.ledger li:nth-child(4) { animation-delay: calc(1.5s * var(--motion-scale) + 3 * var(--stagger)); }
@keyframes ledgerRowIn { to { opacity: 1; transform: none; } }
/* the audit-trail chip dot gives one confirming breath as the last row lands,
   then hands off to a quiet infinite breath (the ignition→loop stack, same
   pattern as logoFirstBreath→logoBreathe): the trail is live, so its dot never
   fully sleeps. 4.4s = the cyan-breath family period (hero badge dot); the
   live peak stays under the arrival peak so it reads as an echo, not a beacon.
   Animate filter (compositor-eligible), NOT box-shadow (paint-thread): the base
   dot keeps its static box-shadow; these just layer a brighter glow on top. */
.hero-proofcard .chip-dot {
  animation:
    dotArrive var(--t-rise) var(--ease-smooth) calc(2.05s * var(--motion-scale)) both,
    dotLive 4.4s var(--ease-smooth) calc(2.05s * var(--motion-scale) + var(--t-rise)) infinite;
}
@keyframes dotArrive {
  0%, 100% { filter: drop-shadow(0 0 0 var(--cyan-glow)); }
  50% { filter: drop-shadow(0 0 6px var(--cyan-glow)); }
}
@keyframes dotLive {
  0%, 100% { filter: drop-shadow(0 0 0 var(--cyan-glow)); }
  50% { filter: drop-shadow(0 0 3.5px var(--cyan-glow)); }
}

/* ── Live Ledger — the trail keeps writing (Tier-3 ambient; logic in main.js) ──
   The hero write-in stops being a screenshot: the view clips a log tape that
   advances on a fixed metronome. JS locks .ledger-view to its rendered pixel
   height once the write-in settles (re-locked on resize), so the growing /
   shrinking <ul> can never move the card below — CLS stays 0. Without JS the
   view is auto-height and the static 4-row trail stands untouched. */
.ledger-view { overflow: hidden; }
/* the tape advance: transform-only, sprung like every entrance; will-change
   lives only while .shifting and is released with the class as the row settles */
.ledger.shifting { transition: transform var(--t-base) var(--ease-spring); will-change: transform; }
/* rows that finished entering are pinned stable — after a tape removal the
   nth-child delay rules re-map onto different rows, and without this a
   *finished* write-in animation could rewind to its pre-state (opacity 0)
   when its animation-delay suddenly moves into the future */
.ledger li.led-done { animation: none; opacity: 1; transform: none; }
/* the exiting top line dims as it rides up under the card header */
.ledger li.led-exit { opacity: 0; transition: opacity var(--t-base) var(--ease-smooth); }
/* status flips (◷ awaiting human → ✓ approved) are a micro dip-and-swap —
   the eco-chip state-change family: color/opacity only. --t-micro on purpose:
   a governance decision should read as a crisp digital tick at any tempo knob. */
.ledger li > span { transition: opacity var(--t-micro) var(--ease-smooth), color var(--t-micro) var(--ease-smooth); }
.ledger .led-dip { opacity: 0; }

.led-ok { color: var(--success-fg); }
.led-pending { color: var(--warning-fg); }
.led-cyan { color: var(--cyan); }
.led-dim { color: var(--text-muted); }
.led-warn { color: var(--warning-fg); }
.led-no { color: var(--coral); }
@media (max-width: 980px) { .hero-proofcard { max-width: 460px; } }
/* narrow phones: one step smaller, and the secondary fields (amount, stamp,
   approver tail) yield so the story line — action + status — always fits
   whole. The soft clip stays as the last-resort guard, not the norm. */
@media (max-width: 480px) {
  .ledger { font-size: 11.5px; }
  .led-amt, .led-ts, .led-tail { display: none; }
}

/* hero proof strip (load-bearing value props → secondary for AA contrast) */
.hero-proofstrip { margin-top: 30px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-secondary); }

/* ─── Metaphor band ─── */
.metaphor {
  position: relative; overflow: hidden;
  padding: clamp(38px, 4.2vw, 58px) 0;
  text-align: center;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,107,107,0.06), transparent 60%),
              radial-gradient(ellipse 80% 100% at 50% 100%, rgba(0,229,255,0.05), transparent 60%);
}
.metaphor .wrap { position: relative; z-index: 2; }
.metaphor-line {
  font-size: clamp(15px, 2.6vw, 22px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan); opacity: 0.92; line-height: 1.6;
  max-width: 24ch; margin-inline: auto;
}
.metaphor-sub { margin-top: 22px; color: var(--text-secondary); font-size: clamp(14px,1.6vw,17px); max-width: 52ch; margin-inline: auto; }

/* ─── Problem ─── */
.problem { background: linear-gradient(180deg, var(--bg) 0%, #090A0E 100%); }
.problem .lead { max-width: 70ch; }
.stat-lines { list-style: none; margin-top: 42px; display: grid; gap: 0; max-width: 760px; }
.stat-lines li {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 18px 2px; font-size: clamp(14px,1.6vw,17px);
}
/* The governance ledger rules itself in: each row's divider draws from the left
   as the row rises — reuses the architecture line-draw idiom. transform-only. */
.stat-lines li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--border); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-draw);
  transition-delay: calc(var(--reveal-delay, 0s) * var(--motion-scale));
}
.stat-lines li.in::before { transform: scaleX(1); }
.stat-lines li:last-child::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--border); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-draw);
  transition-delay: calc(var(--reveal-delay, 0s) * var(--motion-scale) + var(--stagger));
}
.stat-lines li:last-child.in::after { transform: scaleX(1); }
.sl-k { color: var(--text-secondary); }
.sl-v { color: var(--text); font-weight: 500; text-align: end; }

/* ─── Moat / Permission Gate ─── */
.moat { background: #090A0E; }
/* Top-align: the thesis heading and the card start together, so a short text
   column doesn't get centered against the taller card and open a void above it. */
.moat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 940px) { .moat-grid { grid-template-columns: 1fr; gap: 44px; } }
.moat-caption { margin-top: 24px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--cyan); opacity: 0.85; }

.gate-wrap { display: grid; gap: 16px; }
.gate-card {
  position: relative;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--border-cyan);
  background:
    radial-gradient(circle at 18% 16%, rgba(255,107,107,0.16), transparent 55%),
    radial-gradient(circle at 84% 84%, rgba(0,229,255,0.13), transparent 60%),
    linear-gradient(180deg, #0F1218 0%, #0A0C10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 60px rgba(10,12,16,0.45);
  overflow: hidden;
}
.gate-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand); opacity: 0.9; z-index: 2;
}
.gate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.gate-action { font-size: 15px; color: var(--text); font-weight: 500; }
.gate-amount { font-size: 15px; color: var(--coral); font-weight: 500; margin-top: 12px; }

.gate-beats { list-style: none; display: grid; gap: 10px; margin-bottom: 16px; }
.beat {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--border);
  /* beats are "states", not entrances — smooth role keeps them from competing
     with the hand-hold's reserved bounce, preserving the motion hierarchy */
  transition: border-color var(--t-quick) var(--ease-smooth), background var(--t-quick) var(--ease-smooth), opacity var(--t-quick) var(--ease-smooth);
  opacity: 0.55;
}
.beat.is-active { opacity: 1; border-color: var(--border-cyan); background: rgba(0,229,255,0.05); }
.beat.is-done { opacity: 1; border-color: rgba(110,231,183,0.3); }
.beat-ico { font-size: 9px; color: var(--text-muted); transition: color var(--t-quick) var(--ease-smooth); }
.beat.is-active .beat-ico { color: var(--cyan); animation: beatThink 1.1s var(--ease-smooth) infinite alternate; }
/* "processing" blink — a status indicator (caret-blink family), not decoration */
@keyframes beatThink { from { opacity: 0.45; transform: scale(0.9); } to { opacity: 1; transform: scale(1.05); } }
.beat.is-done .beat-ico { color: var(--success-fg); }
.beat-label { font-size: 13.5px; color: var(--text); font-weight: 500; }
.beat-tag { font-size: 11.5px; color: var(--text-secondary); text-align: end; }
.beat.is-done .beat-tag { color: var(--success-fg); }

/* hand-hold (human-in-the-loop) */
.gate-handhold {
  display: flex; align-items: center; justify-content: center; gap: 0;
  height: 0; overflow: hidden; opacity: 0;
  transition: height var(--t-base) var(--ease-spring), opacity var(--t-quick), margin var(--t-base);
}
.gate-handhold.show { height: 34px; opacity: 1; margin-bottom: 14px; }
.hh-chip {
  font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); white-space: nowrap;
  /* the lock is the brand's "hold hands" peak — the page's one reserved bounce */
  transition: transform var(--t-base) var(--ease-bounce);
}
/* compositor hint only while the hand-hold is on screen and about to lock */
.gate-handhold.show .hh-chip { will-change: transform; }
.hh-ai { color: var(--cyan); background: rgba(0,229,255,0.08); border-color: var(--border-cyan); transform: translateX(14px); }
.hh-human { color: var(--coral); background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.3); transform: translateX(-14px); }
.gate-handhold.lock .hh-ai { transform: translateX(2px); }
.gate-handhold.lock .hh-human { transform: translateX(-2px); }
.hh-link { width: 14px; height: 2px; background: var(--grad-brand); opacity: 0; transition: opacity var(--t-quick) calc(0.35s * var(--motion-scale)); }
.gate-handhold.lock .hh-link { opacity: 1; }

/* ── Otter hand-hold (progressive enhancement of the gate's "hold hands" beat) ──
   rive-gate.js mounts an otter here that reaches → hooks → locks in sync with the
   gate. With a real otter-handhold.riv it's Rive; until then it's an authored SVG
   paws stand-in (zero runtime). Under reduced-motion / no-JS the otter never mounts
   and the chip hand-hold above stays — so this is purely additive (CLS-safe: the
   stage's height is reserved the moment it engages, before the gate scrolls in). */
.otter-stage { display: none; height: 84px; place-items: center; margin: 2px 0 12px; position: relative; }
.otter-stage[hidden] { display: none !important; }
.gate-card.otter-on [data-handhold] { display: none; }   /* hide the chip hand-hold */
.gate-card.otter-on .otter-stage { display: grid; }        /* reveal the otter */
.otter-canvas { width: min(320px, 100%); height: 84px; display: block; }

.otter-paws { width: min(320px, 100%); height: auto; display: block; }

/* party labels + the current line arrive with the reach */
.otter-paws .pl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0; transition: opacity var(--t-base) var(--ease-smooth); }
.otter-paws .pl-l { fill: rgba(126, 232, 255, 0.62); }
.otter-paws .pl-r { fill: rgba(255, 155, 145, 0.62); }
.otter-paws.is-reach .pl { opacity: 1; transition-delay: calc(0.12s * var(--motion-scale)); }
/* the water line draws from the center out — the existing line-draw vocabulary */
.otter-paws .current { transform: scaleX(0); transform-box: view-box; transform-origin: 160px 70px;
  opacity: 0.85; transition: transform var(--t-draw) var(--ease-draw); }
.otter-paws.is-reach .current { transform: scaleX(1); }
/* reflection on the current — lights when the hold locks, then breathes (ambient) */
.otter-paws .mirror-glow { opacity: 0; transition: opacity var(--t-base) var(--ease-smooth) calc(0.5s * var(--motion-scale)); }
.otter-paws.is-lock .mirror-glow { opacity: 0.5; animation: ogGlowBreathe 4.6s var(--ease-smooth) calc(1.6s * var(--motion-scale)) infinite alternate; }
@keyframes ogGlowBreathe { from { opacity: 0.5; } to { opacity: 0.26; } }

/* arms: apart → reach → clasp. The lock beat is the page's ONE reserved bounce
   (same accent as the chip hand-hold it replaces — not a third bounce). */
.otter-paws .arm { transition: transform var(--t-base) var(--ease-spring), filter var(--t-base) var(--ease-smooth); }
.otter-paws .arm-l { transform: translateX(-30px); }
.otter-paws .arm-r { transform: translateX(30px); }
.otter-paws.is-reach .arm-l { transform: translateX(-16px); }
.otter-paws.is-reach .arm-r { transform: translateX(16px); }
.otter-paws.is-lock .arm-l,
.otter-paws.is-lock .arm-r { transform: translateX(0); transition-timing-function: var(--ease-bounce), var(--ease-smooth); }
.otter-paws.is-lock .arm-l { filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.38)); }
.otter-paws.is-lock .arm-r { filter: drop-shadow(0 0 7px rgba(255, 107, 107, 0.38)); }

/* before the hold: each arm drifts on its own current (ambient family, fixed seconds,
   opposite phase) — on lock the drift merges into the clasp and they move as ONE */
.otter-paws .drift { animation: ogDrift 4.4s ease-in-out infinite alternate; will-change: transform; }
.otter-paws .drift-r { animation-duration: 4.8s; animation-delay: -2.4s; }
@keyframes ogDrift { from { transform: translateY(0.9px); } to { transform: translateY(-0.9px); } }
.otter-paws.is-lock .drift { animation: none; transform: translateY(0);
  transition: transform var(--t-base) var(--ease-bounce); will-change: auto; }
.otter-paws.is-lock .hold { animation: ogHold 4.6s ease-in-out calc(1.4s * var(--motion-scale)) infinite alternate; will-change: transform; }
@keyframes ogHold { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }

/* the claws: splayed while reaching, then they curl in and hook — a rolling curl
   (thumb → mid → bottom) landing on the same reserved-bounce instant as the clasp */
.otter-paws .fgr { transform-box: fill-box; transform-origin: 12% 50%; transition: transform var(--t-base) var(--ease-spring); }
.otter-paws .fgr-t  { transform: rotate(-9deg); }
.otter-paws .fgr-m  { transform: rotate(-4deg); }
.otter-paws .fgr-b  { transform: rotate(8deg); }
.otter-paws .fgr-th { transform: rotate(-7deg); }
.otter-paws.is-lock .fgr { transform: rotate(0deg); transition-timing-function: var(--ease-bounce); }
.otter-paws.is-lock .fgr-th { transition-delay: calc(0.035s * var(--motion-scale)); }
.otter-paws.is-lock .fgr-m  { transition-delay: calc(0.06s * var(--motion-scale)); }
.otter-paws.is-lock .fgr-b  { transition-delay: calc(0.09s * var(--motion-scale)); }

/* refined lock payoff — a layered "governance seal", not a single flash:
   seal pops (spring) + glows once → twin snap-rings radiate (one per party) →
   "approved" check draws. */
.otter-paws .clasp { opacity: 0; }
.otter-paws.is-lock .clasp { opacity: 1; }
.otter-paws .clasp-core { transform: scale(0); transform-box: view-box; transform-origin: 160px 40px; opacity: 0;
  transition: transform var(--t-base) var(--ease-spring) calc(0.06s * var(--motion-scale)), opacity var(--t-quick) var(--ease-smooth) calc(0.06s * var(--motion-scale)); }
.otter-paws.is-lock .clasp-core { transform: scale(1); opacity: 1; animation: claspGlow var(--t-draw) var(--ease-smooth) calc(0.12s * var(--motion-scale)) 1 both; }
.otter-paws .clasp-check { stroke-dasharray: 1; stroke-dashoffset: 1; }
.otter-paws.is-lock .clasp-check { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-base) var(--ease-draw) calc(0.28s * var(--motion-scale)); }
.otter-paws .clasp-pulse { opacity: 0; transform: scale(0.5); transform-box: view-box; transform-origin: 160px 40px; }
.otter-paws.is-lock .clasp-pulse { animation: claspPulse var(--t-rise) var(--ease-smooth) calc(0.12s * var(--motion-scale)) 1 both; }
.otter-paws.is-lock .clasp-pulse.p2 { animation-delay: calc(0.3s * var(--motion-scale)); animation-duration: calc(var(--t-rise) * 1.15); }
@keyframes claspPulse { 0% { opacity: 0; transform: scale(0.5); } 35% { opacity: 0.6; } 100% { opacity: 0; transform: scale(2); } }
@keyframes claspGlow { 0% { filter: drop-shadow(0 0 0 rgba(0, 229, 255, 0)); } 45% { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)); } 100% { filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.28)); } }

.gate-audit {
  display: flex; align-items: center; gap: 2px; min-height: 22px;
  padding-top: 14px; border-top: 1px dashed rgba(0,229,255,0.22);
}
.audit-line { font-size: 11.5px; color: var(--success-fg); letter-spacing: 0.01em; }
.audit-caret { display: inline-block; width: 7px; height: 13px; background: var(--cyan); opacity: 0; }
.audit-caret.blink { opacity: 1; animation: caretBlink 1s step-end infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

.gate-status {
  position: absolute; top: 16px; right: 18px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--warning-fg); transition: color var(--t-base) var(--ease-smooth);
}
.gate-status.approved { color: var(--success-fg);
  /* the verdict lands like a stamp — house spring, settles without bouncing */
  animation: statusStamp var(--t-base) var(--ease-spring) 1 both; transform-origin: 100% 50%; }
@keyframes statusStamp {
  from { opacity: 0.2; transform: scale(1.22); filter: drop-shadow(0 0 8px rgba(110, 231, 183, 0.55)); }
  to   { opacity: 1;   transform: scale(1);    filter: drop-shadow(0 0 0 rgba(110, 231, 183, 0)); }
}

/* composer */
.composer {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 16px; border-radius: var(--r-pill);
  background: var(--bg-input); border: 1px solid var(--border-strong);
}
.composer-input {
  flex: 1; min-width: 0; height: 36px; border: 0; background: transparent;
  color: var(--text); font-family: var(--font-display); font-size: 14px; outline: none;
}
.composer-input::placeholder { color: var(--text-muted); }
.composer-send { height: 40px; width: 40px; padding: 0; border-radius: 999px; }
.composer-micro { margin-top: 4px; font-size: 12px; color: var(--text-secondary); padding-inline-start: 4px; }

/* ─── Capability matrix ─── */
.cap-grid, .posture-grid { margin-top: 44px; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .cap-grid, .posture-grid { grid-template-columns: 1fr; } }
.cap-card { padding: 26px 26px 24px; border-radius: var(--r-lg); }
.cap-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--coral), var(--cyan)); opacity: 0.9;
}
.cap-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cap-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.cap-card p { color: var(--text-secondary); font-size: 14.5px; }
.cap-card code { color: var(--cyan-soft); font-size: 13px; background: rgba(0,229,255,0.08); padding: 1px 5px; border-radius: 5px; }
.pill-live {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan);
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-cyan); background: rgba(0,229,255,0.07);
}
.pill-live::before { content: "● "; color: var(--cyan); }

/* ─── Ecosystem (closed-loop shared agent fleet) ─── */
.ecosystem { background: linear-gradient(180deg, var(--bg) 0%, #090A0E 100%); }
.eco-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 940px) { .eco-grid { grid-template-columns: 1fr; gap: 40px; } }
/* the calm, authoritative preamble: real leading, a tighter measure, and a
   generous closing gap so it reads as "the argument opens here; the detail
   begins below". text-wrap:pretty evens the last line in Latin and CJK alike. */
.eco-intro .lead {
  max-width: 46ch;
  line-height: 1.62;
  opacity: 1;
  margin-bottom: clamp(28px, 3.2vw, 36px);
  text-wrap: pretty;
}

/* Keyword-bearing subheads (H3) — close the one-h2/zero-h3 semantic gap without
   breaking the visual hierarchy; bodies mirror the live board rows (no new claims).
   Each subhead is anchored by a 2px brand-gradient RAIL (the leitmotif at its
   smallest scale) so the two scoping beats read as deliberate sections rather than
   slightly-bold text. Rhythm is grouped, not flat: a big gap leads INTO each beat,
   a tight gap binds the body to its own subhead. */
.eco-sub {
  position: relative;
  margin-top: clamp(30px, 3.4vw, 40px);
  padding-inline-start: 18px;            /* clears the rail; the indent itself reads as a 2nd tier */
  font-family: var(--font-display);
  font-size: clamp(15.5px, 1.4vw, 17px);
  font-weight: 600; line-height: 1.32; letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;                    /* evens 2-line Latin heads, e.g. "Scope by department, role, or person" */
}
/* the rail: logical insets → auto-mirrors in RTL with no extra rule; inset-block
   (not a fixed height) spans the full heading box, so a 1-line CJK head and a
   2-line Latin head both stay flush. Draws down once on the stroke-draw curve,
   riding the subhead's existing scroll-reveal. */
.eco-sub::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-block: 0.16em 0.16em;
  inline-size: 2px; border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-base) var(--ease-draw);
}
.eco-sub.in::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .eco-sub::before { transform: scaleY(1); transition: none; } }

.eco-sub-body {
  margin-top: 10px; padding-inline-start: 18px;   /* tight to its subhead; aligns under the heading text */
  max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--text-secondary);
  text-wrap: pretty;            /* no single-glyph CJK orphan last line ("色。") */
  overflow-wrap: anywhere;      /* long German compounds never overflow the measure */
}
/* reciprocal #architecture note (muted technical caption) */
.eco-archnote { margin-top: 22px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); letter-spacing: 0.02em; }
/* in-prose internal links (governance layer / admin console / shared across departments) */
.lead a, .eco-sub-body a, .eco-archnote a, .cap-card p a {
  color: var(--cyan); text-decoration: underline;
  text-decoration-color: rgba(0,229,255,0.4); text-underline-offset: 2px;
  transition: text-decoration-color var(--t-micro) var(--ease-smooth);
}
.lead a:hover, .eco-sub-body a:hover, .eco-archnote a:hover, .cap-card p a:hover { text-decoration-color: var(--cyan); }
.eco-intro[dir="rtl"] .eco-sub-body, .eco-intro[dir="rtl"] .eco-archnote { text-align: right; }
/* the access-level key reads as a quiet "meta footer" under a hairline that
   draws the line between the argument above and the controls (key + CTA) below.
   The rule fades away from the reading edge; RTL flips it via --eco-rule-dir. */
.eco-legend {
  position: relative;
  margin-top: clamp(30px, 3.4vw, 38px); padding-top: clamp(18px, 2.2vw, 24px);
  display: flex; flex-wrap: wrap; gap: 10px 20px;
}
.eco-legend::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(to var(--eco-rule-dir, right), var(--border-strong), transparent 78%);
  opacity: 0.6;
}
/* RTL is wired on <html> (i18n.js sets dir there, not on .eco-intro), so key the
   hairline's directional fade off the document dir — it stays opaque at the reading edge. */
[dir="rtl"] .eco-legend { --eco-rule-dir: left; }
.eco-lvl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }
.eco-lvl .lv { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.lv-org { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.lv-dept { background: var(--coral); }
.lv-role { background: var(--orange); }
.lv-user { background: var(--text-muted); }

.eco-board {
  position: relative;
  padding: 22px; border-radius: 22px;
  border: 1px solid var(--border-cyan);
  background:
    radial-gradient(circle at 84% 10%, rgba(0,229,255,0.10), transparent 55%),
    radial-gradient(circle at 12% 92%, rgba(255,107,107,0.08), transparent 55%),
    linear-gradient(180deg, #0F1218 0%, #0A0C10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 60px rgba(10,12,16,0.45);
  overflow: hidden;
}
.eco-board::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); z-index: 2; }
.eco-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.eco-board-head .font-mono { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
/* the four agent cards, docked at the constellation's corners. Anchored by their
   CENTER (--nx/--ny, % of the stage) so the SVG links below can target the same
   coordinates — card size can vary per locale without ever desyncing an endpoint. */
.hub-nodes { list-style: none; margin: 0; padding: 0; }
.hub-node {
  position: absolute; left: calc(var(--nx) * 1%); top: calc(var(--ny) * 1%); z-index: 2;
  display: grid; gap: 7px; justify-items: start;
  width: max-content; max-width: min(46%, 190px);
  padding: 10px 12px; border-radius: 12px;
  background: rgba(13,16,22,0.92); border: 1px solid var(--border);
  /* agents dock into the constellation one by one after the board card lands.
     The -50%/-50% centering is baked into the transform so the entrance travel
     and the reduced-motion end state can never drop it. */
  opacity: 0; transform: translate(-50%, -50%) translateY(8px);
  transition: border-color var(--t-micro) var(--ease-smooth), background var(--t-micro) var(--ease-smooth),
              opacity var(--t-base) var(--ease-spring), transform var(--t-base) var(--ease-spring);
}
.eco-board.in .hub-node { opacity: 1; transform: translate(-50%, -50%); }
.eco-board.in .hub-node:nth-child(1) { transition-delay: calc(.16s * var(--motion-scale)); }
.eco-board.in .hub-node:nth-child(2) { transition-delay: calc(.26s * var(--motion-scale)); }
.eco-board.in .hub-node:nth-child(3) { transition-delay: calc(.36s * var(--motion-scale)); }
.eco-board.in .hub-node:nth-child(4) { transition-delay: calc(.46s * var(--motion-scale)); }
.hub-node:hover { border-color: var(--border-cyan); background: rgba(13,18,24,0.96); }
.hn-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hn-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.ea-mark {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
  font-size: 11.5px; font-weight: 500; color: var(--cyan);
  background: rgba(0,229,255,0.08); border: 1px solid var(--border-cyan);
}
.ea-name { font-size: 13.5px; line-height: 1.25; font-weight: 500; color: var(--text); }
.ea-scope { font-size: 10.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.sc-org { color: var(--cyan); background: rgba(0,229,255,0.08); border-color: var(--border-cyan); }
.sc-dept { color: #FFA5A5; background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.3); }
.sc-role { color: #FFC59E; background: rgba(255,142,83,0.08); border-color: rgba(255,142,83,0.3); }
.sc-user { color: var(--text-secondary); background: rgba(255,255,255,0.04); border-color: var(--border-strong); }
.eco-board-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(0,229,255,0.2); font-size: 11.5px; color: var(--text-secondary); letter-spacing: 0.02em; }
@media (max-width: 420px) { .ea-scope { font-size: 10px; padding: 4px 9px; } }

/* ─── Ecosystem · in-section language switcher + CTA (live transcreation, 11 locales) ─── */
.eco-locale-switch {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  justify-content: flex-end; margin-bottom: clamp(22px, 3vw, 32px);
}
@media (max-width: 940px) { .eco-locale-switch { justify-content: flex-start; } }
.els-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.els-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.els-chip {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 500; line-height: 1;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  color: var(--text-secondary); background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-strong);
  transition: color var(--t-micro) var(--ease-smooth), border-color var(--t-micro) var(--ease-smooth), background var(--t-micro) var(--ease-smooth);
}
.els-chip:hover { color: var(--text); border-color: var(--border-cyan); }
.els-chip.is-active { color: #0A0C10; background: linear-gradient(135deg, var(--coral), var(--orange)); border-color: transparent; font-weight: 600; }
.els-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.eco-cta-row { margin-top: clamp(26px, 3vw, 34px); }
/* let long localized labels (de/ar/…) wrap instead of overflowing the fixed-height btn */
.eco-cta { white-space: normal; height: auto; min-height: 48px; padding-block: 11px; line-height: 1.25; }
.eco-cta-arrow { transition: transform var(--t-micro) var(--ease-spring); }
.eco-cta:hover .eco-cta-arrow { transform: translateX(3px); }

/* RTL: mirror the marketing copy column for Arabic & Hebrew; the console board stays LTR by design */
.eco-intro[dir="rtl"] { text-align: right; }
.eco-intro[dir="rtl"] .eco-cta-arrow { transform: scaleX(-1); }
.eco-intro[dir="rtl"] .eco-cta:hover .eco-cta-arrow { transform: scaleX(-1) translateX(3px); }

/* Mobile: the constellation keeps its geometry (the --nx/--ny anchors are %), the
   cards just get tighter and the stage taller so longer localized labels (de / fr /
   he …) still fit two-abreast. The ignite sequence is color/filter only, so this
   re-size can't desync it. */
@media (max-width: 480px) {
  .eco-stage { aspect-ratio: 10 / 11; }
  .hub-node { max-width: min(47%, 152px); padding: 8px 10px; gap: 6px; }
  .hn-head { gap: 7px; }
  .ea-mark { width: 24px; height: 24px; border-radius: 8px; font-size: 10.5px; }
  .ea-name { font-size: 12px; }
  .ea-scope { white-space: normal; }
}

/* ─── Ecosystem · "Authorize the Orbit" ─────────────────────────────────────
   The control plane — the brand core, CENTER of the stage — authorizes its
   constellation: four links draw outward (LINE DRAW, pathLength dash), a
   governed token rides each one (the flow-pulse echo, fires once), and on
   arrival the agent's scope chip snaps from a neutral "pending" state into its
   true access color. When the 4th grant lands the header "closed loop" chip
   ignites its gradient frame — the loop closes. Settled, the board turns
   Tier-3 ambient: a grant keeps flowing out, a dim audit echo returns, and the
   core breathes (logoBreathe — the hero's own halo, same period).
   Stays inside the system: transform/opacity/filter only (+ the sanctioned
   stroke-dashoffset line-draw), the 4 existing curves, no new bounce. Cards
   keep their Tier-1 rise (.eco-board.in cascade above); this performer
   sequence rides a separate .run class (mirrors .arch).

   GEOMETRY — one coordinate space, three renderers, zero measurement:
   the link layer is viewBox 0 0 100 100 + preserveAspectRatio:none, so an SVG
   (x,y) = (x%, y%) of the stage = every card/token's --nx/--ny (index.html
   keeps each trio in lockstep). Tokens travel in container-query units
   (1cqw/1cqh = 1% of the stage), which is why the stage is a size container.
   Browsers without cq units never run the token keyframes (@supports) and
   keep their opacity-0 rest state — links, chips and stacks still tell the
   whole story. */
.eco-stage {
  position: relative; container-type: size;
  max-width: 560px; margin-inline: auto;
  aspect-ratio: 20 / 17;
}

/* the four governed links — each draws center→agent (LINE DRAW via pathLength
   dash; vector-effect keeps the stroke 1.5px under the non-uniform viewBox) */
.hub-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hub-link {
  stroke: var(--cyan); stroke-opacity: 0.3; stroke-width: 1.5px;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.eco-board.run .hub-link {
  transition: stroke-dashoffset var(--t-base) var(--ease-draw);
  transition-delay: calc((4 + var(--gi) * 2) * var(--stagger));
  stroke-dashoffset: 0;
}

/* the control-plane core — the brand mark, ringed. The ring ignites as .run
   begins (opacity-only, the gradient-frame idiom); grants leave the plane,
   audit returns to the log — the two caps name the loop's ends. */
.hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
.hub-core-disc {
  position: relative; display: grid; place-items: center;
  width: 76px; width: clamp(62px, 15cqw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #141924, #0B0D12 74%);
  border: 1px solid var(--border-cyan);
}
.hub-core-disc::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.5);
  filter: drop-shadow(0 0 9px rgba(0, 229, 255, 0.35));
  opacity: 0;
}
.eco-board.run .hub-core-disc::after {
  opacity: 0.9;
  transition: opacity var(--t-quick) var(--ease-smooth);
  transition-delay: calc(var(--stagger) * 2);
}
.hub-mark { width: 54%; height: auto; display: block; }
/* settled, the mark takes the hero's FIRST BREATH — the loop closes and the
   core visibly comes alive: one deep one-shot cycle igniting from zero glow
   (logoFirstBreath, hero.css), then the calm loop (logoBreathe) takes over one
   period later from the identical rest pose. Same 2.2s·scale period so the
   brand never breathes at two speeds — verbatim reuse, no new idiom. */
.eco-board.settled .hub-mark {
  animation:
    logoFirstBreath calc(2.2s * var(--motion-scale)) var(--ease-smooth) forwards,
    logoBreathe calc(2.2s * var(--motion-scale)) var(--ease-smooth) calc(2.2s * var(--motion-scale)) infinite;
}
.hub-core-cap {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: var(--text-muted); white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; background: rgba(10, 12, 16, 0.78);
}
.hub-core-foot { bottom: auto; top: calc(100% + 8px); }

/* the governed tokens: each rides its link center→agent once (translate +
   opacity), fading as the grant lands under the card's edge. Glow is filter
   (drop-shadow), never box-shadow. Travel = (--nx − 50, --ny − 50) in cq units,
   the exact vector of its link — so the token can never leave the wire. */
.hub-token, .hub-flow {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; z-index: 1;
  border-radius: 999px; pointer-events: none;
  background: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan));
  opacity: 0; transform: translate(-50%, -50%);
}
.hub-flow-in { width: 5px; height: 5px; filter: drop-shadow(0 0 4px var(--cyan)); }
@supports (width: 1cqw) {
  .eco-board.run .hub-token {
    animation: hubGrant var(--t-rise) var(--ease-smooth) both;
    animation-delay: calc((4 + var(--gi) * 2) * var(--stagger));
    will-change: transform, opacity;
  }
  /* ─ Act 3 · THE LOOP LIVES ─ settled, the board turns Tier-3 ambient: a
     governed grant keeps flowing OUT to one agent and a dimmer audit echo
     returns IN from another — read governed, write permissioned, everything
     logged; the "closed loop" chip, drawn literally. Reuses the arch
     flow-pulse idiom. AMBIENT PERIODS ARE FIXED SECONDS (5.6s, the arch flow
     family) — they do NOT ride --motion-scale; retune by hand if the knob
     moves. The two keep their will-change while animating, like the arch pulses. */
  .eco-board.settled .hub-flow-out { animation: hubFlowOut 5.6s var(--ease-smooth) infinite; will-change: transform, opacity; }
  .eco-board.settled .hub-flow-in  { animation: hubFlowIn  5.6s var(--ease-smooth) infinite; will-change: transform, opacity; }
}
/* transform/opacity only — the tokens ride the links, they never touch layout */
@keyframes hubGrant {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  14%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(calc((var(--nx) - 50) * 1cqw), calc((var(--ny) - 50) * 1cqh)); opacity: 0; }
}
@keyframes hubFlowOut {
  0%       { transform: translate(-50%, -50%); opacity: 0; }
  6%       { opacity: 0.9; }
  38%      { transform: translate(-50%, -50%) translate(calc((var(--nx) - 50) * 1cqw), calc((var(--ny) - 50) * 1cqh)); opacity: 0.9; }
  46%,100% { transform: translate(-50%, -50%) translate(calc((var(--nx) - 50) * 1cqw), calc((var(--ny) - 50) * 1cqh)); opacity: 0; }
}
@keyframes hubFlowIn {
  0%,52%   { transform: translate(-50%, -50%) translate(calc((var(--nx) - 50) * 1cqw), calc((var(--ny) - 50) * 1cqh)); opacity: 0; }
  58%      { opacity: 0.45; }
  92%      { transform: translate(-50%, -50%); opacity: 0.45; }
  100%     { transform: translate(-50%, -50%); opacity: 0; }
}

/* scope chips start NEUTRAL (pending), then snap to their true legend color when
   the token arrives (a STATE CHANGE: --ease-smooth, fires once). The box never
   changes size (border stays 1px), so CLS = 0. */
.eco-stage .ea-scope {
  color: var(--text-muted); background: rgba(255, 255, 255, 0.03);
  border-color: var(--border); filter: drop-shadow(0 0 0 transparent);
  transition: color var(--t-quick) var(--ease-smooth),
              background var(--t-quick) var(--ease-smooth),
              border-color var(--t-quick) var(--ease-smooth),
              filter var(--t-quick) var(--ease-smooth);
}
.eco-board.run .hub-node .ea-scope {
  /* light the chip just as the token lands (token delay + its ~0.8×t-rise travel,
     coupled to the token's own animation-duration so it never desyncs with tempo) */
  transition-delay: calc((4 + var(--gi) * 2) * var(--stagger) + var(--t-rise) * 0.8);
}
.eco-board.run .hub-node .sc-org  { color: var(--cyan); background: rgba(0, 229, 255, 0.08); border-color: var(--border-cyan); filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.45)); }
.eco-board.run .hub-node .sc-dept { color: #FFA5A5; background: rgba(255, 107, 107, 0.08); border-color: rgba(255, 107, 107, 0.3); filter: drop-shadow(0 0 7px rgba(255, 107, 107, 0.4)); }
.eco-board.run .hub-node .sc-role { color: #FFC59E; background: rgba(255, 142, 83, 0.08); border-color: rgba(255, 142, 83, 0.3); filter: drop-shadow(0 0 7px rgba(255, 142, 83, 0.4)); }
.eco-board.run .hub-node .sc-user { color: var(--text-secondary); background: rgba(255, 255, 255, 0.04); border-color: var(--border-strong); filter: drop-shadow(0 0 0 transparent); }

/* ─ Act 2 · SHARE ─ once an agent's grant lands, the departments/people
   consuming it dock in as an overlapping avatar stack (the "shared with"
   pattern: one agent, many teams). Dots occupy layout from first paint
   (CLS = 0) and pop in on the reveal curve — an entrance, so --ease-spring,
   one --stagger apart. */
.ea-share { display: inline-flex; align-items: center; pointer-events: none; }
.ea-share i {
  width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0;
  border: 1.5px solid #10131A; /* seats each dot against the one beneath it */
  margin-left: -4px;
  opacity: 0; transform: scale(0.4);
}
.ea-share i:first-child { margin-left: 0; }
.ea-share i:nth-child(1) { --si: 0; }
.ea-share i:nth-child(2) { --si: 1; }
.ea-share i:nth-child(3) { --si: 2; }
.ea-share i:nth-child(4) { --si: 3; }
.sh-org  { background: var(--cyan); }
.sh-dept { background: var(--coral); }
.sh-role { background: var(--orange); }
.sh-user { background: var(--text-muted); }
.eco-board.run .ea-share i {
  opacity: 1; transform: scale(1);
  transition: opacity var(--t-quick) var(--ease-spring), transform var(--t-quick) var(--ease-spring);
  /* each consumer docks just after its agent's chip lights (chip delay + one beat each) */
  transition-delay: calc((4 + var(--gi) * 2) * var(--stagger) + var(--t-rise) * 0.8 + (var(--si) + 1) * var(--stagger));
}
/* mobile: the cards tighten for long localized labels; the stack is decorative,
   so it steps aside rather than crowding the real text */
@media (max-width: 480px) { .ea-share { display: none; } }

/* the loop closes: header "closed loop" chip ignites its gradient frame after the
   4th grant (existing gradient-frame::after opacity, fires once). */
.eco-loop-chip { position: relative; white-space: nowrap; flex-shrink: 0; }
.eco-board.run .eco-loop-chip::after {
  opacity: 0.9; transition: opacity var(--t-base) var(--ease-smooth);
  /* fires as the 4th grant lands: 10 staggers out + one token's travel */
  transition-delay: calc(10 * var(--stagger) + var(--t-rise));
}

/* release the compositor hint once the one-shot sequence has settled */
.eco-board.settled .hub-token { will-change: auto; }

/* ─── Posture ─── */
.posture { background: linear-gradient(180deg, #090A0E, var(--bg)); }
.posture-tile { padding: 24px; border-radius: var(--r-lg); }
.pt-k { font-size: 12.5px; letter-spacing: 0.06em; color: var(--cyan); margin-bottom: 10px; }
.pt-v { color: var(--text-secondary); font-size: 14.5px; }

/* ─── Architecture diagram ─── */
.arch-diagram { margin: 48px auto 0; max-width: 760px; display: grid; gap: 0; }
.arch-band {
  position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 22px 26px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--bg-card); backdrop-filter: blur(10px);
}
.band-k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.band-model .band-k { color: var(--text-secondary); }
.band-systems .band-k { color: var(--text-secondary); }
.band-v { font-size: 13.5px; color: var(--text-secondary); }
.band-layer {
  border: 1px solid var(--border-cyan);
  background:
    radial-gradient(circle at 20% 50%, rgba(255,107,107,0.12), transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(0,229,255,0.12), transparent 60%),
    linear-gradient(180deg, #11151d, #0C0F15);
  box-shadow: 0 0 40px -12px var(--cyan-glow);
}
.band-layer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--grad-brand);
}
.band-layer .band-k { color: var(--cyan); font-weight: 500; }
.band-layer .band-v { color: var(--text-secondary); }

.arch-flow { position: relative; height: 46px; display: flex; align-items: center; justify-content: center; }
.flow-line { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--border-cyan), rgba(0,229,255,0.06)); transform-origin: top; }
/* Architecture stack assembles top-to-bottom: bands rise (.reveal), connectors
   only fade (a moving connector reads wrong), and the line "draws" the link down. */
.arch-flow.reveal { transform: none; }
.arch-flow .flow-line { transform: scaleY(0); transition: transform var(--t-base) var(--ease-draw); transition-delay: calc(var(--reveal-delay, 0s) * var(--motion-scale)); }
.arch-flow.reveal.in .flow-line { transform: scaleY(1); }
.flow-pulse {
  position: absolute; top: -4px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan); opacity: 0;
}
/* hint the compositor only while the pulse is actually running, then it's released */
.arch.run .flow-pulse { animation: flowDown1 5.6s var(--ease-smooth) infinite; will-change: transform, opacity; }
.arch.run .flow-pulse-2 { animation: flowDown2 5.6s var(--ease-smooth) infinite; }
/* transform/opacity only — animating `top` here forced per-frame layout */
@keyframes flowDown1 { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 38% { transform: translateY(44px); opacity: 1; } 46%,100% { transform: translateY(48px); opacity: 0; } }
@keyframes flowDown2 { 0%,54% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 92% { transform: translateY(44px); opacity: 1; } 100% { transform: translateY(48px); opacity: 0; } }
.flow-gate {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan); padding: 3px 9px; border-radius: 999px;
  background: #0A0C10; border: 1px solid var(--border-cyan);
}
.arch.run .flow-gate { animation: gatePulse 5.6s ease-in-out infinite; }
@keyframes gatePulse { 0%,40%,100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); } 48% { box-shadow: 0 0 0 4px rgba(0,229,255,0.18); } 56% { box-shadow: 0 0 14px 2px rgba(0,229,255,0.35); } }
/* deployment options pills */
.arch-deploy { margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.deploy-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03);
  transition: border-color 0.2s, color 0.2s;
}
.deploy-pill:hover { color: var(--text); border-color: var(--border-cyan); }
.deploy-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.deploy-dot.d1 { background: var(--coral); box-shadow: 0 0 8px rgba(255,107,107,0.6); }
.deploy-dot.d2 { background: var(--orange); box-shadow: 0 0 8px rgba(255,142,83,0.6); }
.deploy-dot.d3 { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }

.arch-caption { margin-top: 26px; max-width: 760px; margin-inline: auto; text-align: start; color: var(--text-secondary); font-size: 15px; }
.arch-caption em { font-style: normal; color: var(--cyan); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .arch .flow-pulse, .arch.run .flow-pulse, .arch.run .flow-pulse-2 { display: none; animation: none !important; }
  .arch.run .flow-gate { animation: none !important; }
  .flow-gate { box-shadow: 0 0 14px 2px rgba(0,229,255,0.3); }
  .audit-caret.blink { animation: none !important; }
  .aurora-calm span { animation: none !important; }
  /* proof-card ledger appears fully written, no entrance; the live tape
     (main.js) never starts under reduced motion — these are belt-and-braces */
  .ledger li { animation: none !important; opacity: 1; transform: none; }
  .ledger, .ledger li, .ledger li > span { transition: none !important; }
  .hero-proofcard .chip-dot { animation: none !important; }
  /* architecture connectors + ecosystem agents arrive composed, no entrance */
  .arch-flow .flow-line { transform: scaleY(1) !important; }
  /* ecosystem constellation: composed static end-state — cards docked (the
     centering translate must survive), links drawn, ring lit, every scope chip
     already in its access color, loop closed, tokens + ambient flows hidden,
     core mark still (flat halo, mirrors the hero logo fallback). */
  .hub-node { opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none !important; }
  .hub-link { stroke-dashoffset: 0 !important; transition: none !important; }
  .hub-core-disc::after { opacity: 0.9 !important; transition: none !important; }
  .hub-token, .hub-flow { display: none !important; animation: none !important; will-change: auto !important; }
  .eco-board.settled .hub-mark { animation: none !important; filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35)); }
  .eco-stage .ea-scope { transition: none !important; }
  /* share stacks arrive composed; the ambient loop tokens never run */
  .ea-share i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .eco-board.run .hub-node .sc-org,
  .eco-board.run .hub-node .sc-dept,
  .eco-board.run .hub-node .sc-role,
  .eco-board.run .hub-node .sc-user { filter: none !important; }
  .eco-board.run .eco-loop-chip::after { transition: none !important; }
  /* stat-line dividers fully ruled, no draw */
  .stat-lines li::before, .stat-lines li:last-child::after { transform: scaleX(1) !important; }
  /* reduced-motion always keeps the labeled chip hand-hold (never the otter) */
  .gate-card.otter-on [data-handhold] { display: flex !important; }
  .gate-card.otter-on .otter-stage { display: none !important; }
  /* safety net if the stage is ever shown: the composed, fully-clasped end state */
  .otter-paws * { animation: none !important; transition: none !important; }
  .otter-paws .arm, .otter-paws .drift, .otter-paws .hold, .otter-paws .fgr { transform: none !important; }
  .otter-paws .current { transform: scaleX(1) !important; }
  .otter-paws .pl { opacity: 1 !important; }
  .otter-paws .mirror-glow { opacity: 0.4 !important; }
  .otter-paws .clasp, .otter-paws .clasp-core { opacity: 1 !important; }
  .otter-paws .clasp-core { transform: scale(1) !important; }
  .otter-paws .clasp-check { stroke-dashoffset: 0 !important; }
  .otter-paws .clasp-pulse { display: none !important; }
  /* gate status/beat indicators land composed */
  .gate-status.approved { animation: none !important; }
  .beat.is-active .beat-ico { animation: none !important; }
}

/* ─── Global / RTL ─── */
.global { text-align: center; }
.global .eyebrow { display: inline-block; }
.locale-chips { margin: 34px auto 24px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.loc-chip {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  color: var(--text-secondary); background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-strong); transition: all 0.2s;
}
.loc-chip:hover { color: var(--text); border-color: var(--border-cyan); }
.loc-chip.is-active { color: #0A0C10; background: linear-gradient(135deg, var(--coral), var(--orange)); border-color: transparent; font-weight: 600; }

.locale-card {
  max-width: 560px; margin: clamp(28px, 4vw, 40px) auto 0; padding: 22px 24px; border-radius: var(--r-lg);
  text-align: start; border: 1px solid var(--border-cyan);
  transition: all var(--t-base) var(--ease-smooth);
}
.locale-card[dir="rtl"] { direction: rtl; }
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.lc-title { font-size: 16px; font-weight: 600; color: var(--text); }
.lc-audit {
  display: block; font-size: 12px; color: var(--success-fg);
  padding: 12px 14px; border-radius: 10px; background: rgba(6,78,59,0.25);
  border: 1px solid var(--success-border); word-break: break-word;
}
.global-caption { margin-top: 22px; max-width: 560px; margin-inline: auto; text-align: start; color: var(--text-secondary); font-size: 14px; }

/* ─── Brand story + close ─── */
.close { position: relative; overflow: hidden; }
/* close-section aurora: static glow (keeps the drifting "heartbeat" singular to the hero) */
.aurora-calm span { opacity: 0.22; animation: none; }
.story-card {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(190px, 250px) 1fr; gap: 32px; align-items: center;
  max-width: 1000px; margin: 0 auto; padding: 34px;
  border-radius: 24px; border: 1px solid var(--border-cyan);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,107,107,0.16), transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(0,229,255,0.13), transparent 60%),
    linear-gradient(180deg, #0F1218 0%, #0A0C10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 70px rgba(10,12,16,0.5);
  overflow: hidden;
}
.story-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); }
.story-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,107,107,0.22) 1px, transparent 1px);
  background-size: 28px 28px; opacity: 0.07;
}
@media (max-width: 760px) { .story-card { grid-template-columns: 1fr; padding: 26px; gap: 22px; text-align: start; } }
.story-visual, .story-body { position: relative; z-index: 1; }
.story-visual {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px; border-radius: 18px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(10px);
}
.story-logo { width: 88px; height: 88px; }
.story-wordmark { font-size: 27px; font-weight: 800; letter-spacing: -0.01em; color: #fff; line-height: 1; }
.story-wordmark span { font-weight: 300; color: var(--coral); }
.story-mono { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0,229,255,0.8); }
.story-body { display: flex; flex-direction: column; gap: 14px; }
.story-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 760px) { .story-meta { justify-content: flex-start; } }
.story-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.story-tone {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--border-cyan); background: rgba(0,229,255,0.08); color: var(--cyan-soft);
  font-size: 11.5px; font-weight: 600;
}
.story-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; line-height: 1.32; color: #fff; letter-spacing: -0.02em; margin: 0; }
.story-lead { font-size: 14.5px; line-height: 1.75; color: rgba(226,232,240,0.85); }
.story-points { list-style: none; display: grid; gap: 7px; }
.story-points li { position: relative; padding-inline-start: 22px; font-size: 13.5px; color: rgba(226,232,240,0.92); }
.story-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--cyan) 0%, rgba(0,229,255,0.2) 70%, transparent 100%);
  box-shadow: 0 0 8px rgba(0,229,255,0.55);
}
.story-footer {
  margin-top: 4px; padding-top: 12px; border-top: 1px dashed rgba(255,107,107,0.28);
  font-size: 12.5px; line-height: 1.7; color: rgba(255,142,83,0.95);
}
.story-cta { margin-top: 8px; align-self: flex-start; text-align: center; }
/* On phones the long CTA label can't sit on one line — let it wrap with auto
   height instead of overflowing the card (body clips overflow-x, so it'd be cut). */
@media (max-width: 760px) {
  .story-cta {
    align-self: stretch;
    white-space: normal; height: auto; min-height: 54px;
    padding-top: 13px; padding-bottom: 13px; line-height: 1.3;
  }
}
/* ─── Footer ─── */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand .mark { width: 26px; height: 26px; }
.foot-brand span { font-size: 13px; color: var(--text-secondary); letter-spacing: 0.04em; }
.foot-contact { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); transition: color 0.18s; }
.foot-contact:hover { color: var(--cyan); }
.foot-contact svg { color: var(--cyan); flex-shrink: 0; }
.foot-copy { font-size: 12.5px; color: var(--text-secondary); max-width: 52ch; }

/* ─── Canonical focus (solid cyan, WCAG 2.4.11 ≥3:1 on every surface) ─── */
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan); border-radius: 8px; }
a:focus-visible, button:focus-visible { border-radius: 999px; }
input:focus-visible { border-radius: 999px; }