/* ================================================================
   DeepLogic — the observatory  (living brain)
   Near-black obsidian · triangle-in-circle sigil · serif whispers
   mono instruments · amber = life, violet = structure, cyan = signal
   ================================================================ */

:root {
  --bg: #06070a;
  --line: rgba(255, 255, 255, 0.28);
  --line-strong: rgba(255, 255, 255, 0.44);
  --text: #f0f2f8;
  --text-dim: #aab1c2;
  --text-faint: #7a8196;
  --accent-ink: #c3c5ff;
  --violet: #a4a6ff;
  --cyan: #6fe0f2;
  --cyan-soft: rgba(111, 224, 242, 0.5);
  --amber: #e8a95c;
  --steel: #aab3c7;
  --grad: linear-gradient(120deg, #a4a6ff, #6fe0f2);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 980px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 92px; /* sections snap below the fixed DEEPLOGIC bar */
}
/* each chapter settles into place — proximity, so long scenes scroll freely */
.hero, .creed, .section { scroll-snap-align: start; }

html, body {
  overflow-x: hidden;
  overflow-x: clip; /* kills horizontal pan/drag without creating a scroll container */
  max-width: 100vw;
  overscroll-behavior-x: none; /* no horizontal rubber-banding */
}
body {
  touch-action: pan-y pinch-zoom; /* touch may scroll vertically and zoom — never sideways */
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* faint sigil field — triangle-in-circle, static */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' fill='none'%3E%3Ccircle cx='600' cy='430' r='560' stroke='rgba(160,166,255,0.045)'/%3E%3Ccircle cx='600' cy='430' r='400' stroke='rgba(160,166,255,0.035)'/%3E%3Cpath d='M600 -130 L1085 710 L115 710 Z' stroke='rgba(160,166,255,0.05)'/%3E%3Cpath d='M600 90 L897 605 L303 605 Z' stroke='rgba(160,166,255,0.035)'/%3E%3C/svg%3E");
  background-position: center top;
  background-size: cover;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

::selection { background: rgba(164, 166, 255, 0.3); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.grain {
  position: fixed; inset: -50%;
  z-index: 1; pointer-events: none;
  opacity: 0.035;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-2%,3%); }
  40% { transform: translate(3%,-2%); } 60% { transform: translate(-3%,-3%); }
  80% { transform: translate(2%,2%); }
}

main, .top, .footer { position: relative; z-index: 2; }

/* ---------- top bar ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(24px, 4vw, 48px);
}
/* a soft scrim so scrolling content fades under the lockup instead of colliding */
.top::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 32%, rgba(6, 7, 10, 0.62) 62%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand-mark { width: 44px; height: 44px; }
.brand-name {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--text);
}
.brand-name strong { font-weight: 700; }
.top-right { display: flex; align-items: center; gap: 26px; }
.btn-demo { padding: 10px 24px; font-size: 14px; }
.top-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  display: flex; align-items: center; gap: 9px;
}
.status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: blip 3s ease-in-out infinite;
}
@keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- typography ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 30px;
}
.sig {
  width: 14px; height: 14px;
  border: 1px solid rgba(164, 166, 255, 0.55);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.sig::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 7px; height: 7px;
  transform: translate(-50%, -54%);
  background: rgba(164, 166, 255, 0.8);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.eyebrow-num {
  color: var(--accent-ink);
  border: 1px solid rgba(164, 166, 255, 0.4);
  border-radius: 4px;
  padding: 3px 8px 2px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.eyebrow-center { justify-content: center; }

h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; color: var(--accent-ink); padding-right: 0.04em; }

.hero-h { font-size: clamp(2.6rem, 5.2vw, 4.3rem); line-height: 1.06; }
.h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; max-width: 24ch; }
.lede {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-dim);
  max-width: 52ch;
  margin-top: 22px;
}
.lede-center { margin-left: auto; margin-right: auto; }

/* amber = living numbers */
.num {
  font-family: var(--mono);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  transition: text-shadow 0.5s, color 0.5s;
}
.num.tick { color: #ffd9a3; text-shadow: 0 0 14px rgba(232, 169, 92, 0.55); }

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.22s; }
.d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .grain, .status-dot, .delta-slow, .delta-slower, .live-tag, .bar > i::after,
  .orb, .flow-line::before, .source-icon::after, .neural-block::after,
  .nb-state::before, .nb-spark circle.pop { animation: none !important; }
  html { scroll-behavior: auto; scroll-snap-type: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 15px;
  text-decoration: none;
  border-radius: 8px;
  padding: 14px 26px;
  border: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.3s, box-shadow 0.3s, color 0.3s;
  will-change: transform;
}
.btn-solid {
  color: #0a0b10;
  background: #e7e9f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(10, 11, 16, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 14px 36px -16px rgba(164, 166, 255, 0.4);
}
.btn-solid:hover {
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(10, 11, 16, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 18px 46px -16px rgba(164, 166, 255, 0.55);
}
.btn-ghost { color: var(--text-dim); background: transparent; padding: 14px 16px; }
.btn-ghost:hover { color: var(--text); }
.btn-arrow { transition: transform 0.3s var(--ease); }
.btn-ghost:hover .btn-arrow { transform: translateY(3px); }

/* ---------- hero / observatory ---------- */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  position: relative;
  padding: 48px 24px 90px;
}
.dial-stage {
  width: min(440px, 74vw);
  aspect-ratio: 1;
  margin-bottom: -34px;
  position: relative;
}
#dial { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; will-change: transform; }

/* triangle mark — bold single stroke, rounded corners like the logo, but with
   the original violet→cyan gradient for the "same feeling as before" */
.sigil-tri {
  fill: none;
  stroke: url(#edge);
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* the instrument ring around the sigil (rotates gently with scroll) */
#ring { transform-origin: 320px 320px; }
.ring-line { fill: none; stroke: rgba(164, 166, 255, 0.5); stroke-width: 1.3; }
.ring-tick { stroke: rgba(164, 166, 255, 0.58); stroke-width: 1.2; }

/* neurons drifting inside the ring + their web of connectors */
.web { stroke: rgba(164, 166, 255, 0.18); stroke-width: 0.7; fill: none; }
.neuron { fill: rgba(196, 200, 235, 0.65); }
.fire-line { stroke: rgba(232, 169, 92, 0.75); stroke-width: 1; fill: none; }
.fire-dot { fill: #ffd9a3; }
.fade-out { transition: opacity 0.7s ease-out; opacity: 0; }
/* glowing orbs riding the triangle's circumcircle */
.orbit-dot {
  fill: #d9f4ff;
  filter: drop-shadow(0 0 17px rgba(141, 233, 255, 0.9));
  transition: r 0.2s var(--ease);
}
.orbit-dot:nth-child(2) {
  fill: var(--violet);
  filter: drop-shadow(0 0 17px rgba(164, 166, 255, 0.9));
}

/* obsidian constellation: satellite notes + relation links per hub */
.orb-sat {
  fill: rgba(205, 210, 240, 0.85);
  filter: drop-shadow(0 0 5px rgba(164, 166, 255, 0.5));
  transition: r 0.25s var(--ease);
}
.orb-link {
  stroke: rgba(164, 166, 255, 0.3);
  stroke-width: 1.3;
  fill: none;
  transition: stroke 0.22s;
}
.orb-link-core { stroke: rgba(164, 166, 255, 0.16); }
.orb-link.firing { stroke: rgba(255, 217, 163, 0.85); }
/* the impulse riding a link — brain activity made visible */
.link-flash {
  fill: #ffd9a3;
  filter: drop-shadow(0 0 8px rgba(232, 169, 92, 0.95));
}

/* vertex strike: a ripple blooms at the struck corner… */
.ripple {
  fill: none;
  stroke: rgba(141, 233, 255, 0.85);
  stroke-width: 1.4;
  r: 3;
  animation: ripple 0.95s var(--ease) forwards;
}
@keyframes ripple {
  from { r: 3; opacity: 0.9; }
  to { r: 36; opacity: 0; }
}
/* …and the impact conducts through the whole triangle */
.sigil-tri.conduct { animation: conduct 0.7s var(--ease); }
@keyframes conduct {
  0%, 100% { filter: none; }
  30% { filter: drop-shadow(0 0 13px rgba(141, 233, 255, 0.7)); }
}

/* the AI brain orb at the triangle's core — soft halo + gentle pulse */
.orb {
  transform-origin: 320px 320px;
  animation: orbBreathe 4.5s var(--ease) infinite;
}
@keyframes orbBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
/* a strike reaches the core: the brain convulses, then settles */
.orb.orb-hit { animation: orbHit 0.75s var(--ease); }
@keyframes orbHit {
  0% { transform: scale(1); }
  28% { transform: scale(1.38); }
  58% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.orb-shell { pointer-events: none; }
#graphEdges { stroke: url(#edge); stroke-width: 1.1; }
.graph-edge { stroke: url(#edge); stroke-width: 1.1; }
#graphNodes { filter: drop-shadow(0 0 4px rgba(141, 233, 255, 0.55)); }
.graph-node { stroke: rgba(240, 252, 255, 0.35); stroke-width: 0.4; }

/* ---------- HUD instruments ---------- */
/* the instruments sit under the hero copy, side by side */
.hero-instruments {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px clamp(40px, 7vw, 84px);
  margin-top: 46px;
}
.hud {
  width: 250px;
  text-align: left;
}
.hud-log { width: 288px; }

.hud-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-faint);
  display: block;
  margin-bottom: 14px;
}
.live-tag { color: var(--cyan-soft); animation: blip 2.6s ease-in-out infinite; }

.hud-metric { font-size: 0; margin-top: 14px; }
.hud-metric .num { font-size: 16px; }
.hud-metric .unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--steel);
  letter-spacing: 0.08em;
  margin-left: 8px;
}
.hud-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--steel);
  margin-top: 8px;
}
.hud-sub .num { font-size: 11px; }

/* segmented bar — solid fill, dithered remainder */
.bar {
  height: 15px;
  position: relative;
  background-image: radial-gradient(rgba(220, 224, 240, 0.3) 0.8px, transparent 1px);
  background-size: 4.5px 4.5px;
  overflow: hidden;
}
.bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 60%);
  background:
    repeating-linear-gradient(to right, transparent 0 21px, rgba(6, 7, 10, 0.85) 21px 22.5px),
    #a9b2c6;
  transition: width 1.2s var(--ease);
}
/* the block under construction — breathing at the leading edge */
.bar > i::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0; bottom: 0;
  width: 21px;
  margin-left: 1.5px;
  background: #a9b2c6;
  opacity: 0.3;
  animation: building 2.4s ease-in-out infinite;
}
@keyframes building {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.7; }
}
.bar-s { height: 11px; }

/* activity log */
.log { list-style: none; }
.log li {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--steel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.log li .t { color: var(--text-faint); margin-right: 8px; }
.log li .num { font-size: 10px; }
.log li:nth-child(4) { opacity: 0.7; }
.log li:nth-child(5) { opacity: 0.45; }
.log li:nth-child(6) { opacity: 0.25; }
.log-in { animation: login 0.5s var(--ease); }
@keyframes login {
  from { opacity: 0; transform: translateY(-6px); }
  to { transform: none; }
}

.hero-copy {
  position: relative;
  margin-top: clamp(20px, 3.5vw, 44px);
  --focus: 1; /* 0 = off-centre, 1 = snapped to centre (set by JS on scroll) */
  opacity: calc(0.5 + 0.5 * var(--focus));
  filter: brightness(calc(0.9 + 0.45 * var(--focus)));
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
  will-change: opacity, filter;
}
/* the heading ignites — brightest exactly when snapped to centre */
.hero-copy .hero-h em {
  text-shadow:
    0 0 calc(34px * var(--focus)) rgba(164, 166, 255, calc(0.7 * var(--focus))),
    0 0 calc(14px * var(--focus)) rgba(111, 224, 242, calc(0.45 * var(--focus)));
  transition: text-shadow 0.3s var(--ease);
}
.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-dim);
  max-width: 50ch;
  margin: 22px auto 0;
}
/* the security promise — encrypted, your keys, sovereign */
.hero-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.trust-rule {
  width: min(320px, 62%);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}
.trust-list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.trust-ico {
  width: 13px; height: 13px;
  flex-shrink: 0;
  color: rgba(164, 166, 255, 0.62); /* violet = structure / trust */
}
.hero-actions {
  display: flex; gap: 12px; margin-top: 36px;
  justify-content: center; flex-wrap: wrap;
}

.hero-foot {
  position: absolute; bottom: 28px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  padding: 0 40px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--text-faint);
  white-space: nowrap;
}
.foot-line { width: min(90px, 8vw); height: 1px; background: var(--line); flex-shrink: 1; }

/* ---------- sections ---------- */
.section { padding: 170px 0; position: relative; }

/* ---------- depth rail ---------- */
.rail {
  position: fixed;
  right: 26px; top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column;
  gap: 18px;
  align-items: flex-end;
}
.rail-item {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.r-label {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), color 0.3s;
  color: var(--text-dim);
}
.rail-item:hover .r-label { opacity: 1; transform: none; }
.rail-item.active .r-label { opacity: 1; transform: none; color: var(--accent-ink); }
.r-num { transition: color 0.3s; }
.rail-item.active .r-num { color: var(--accent-ink); }
.r-line {
  width: 14px; height: 1px;
  background: var(--line-strong);
  transition: width 0.4s var(--ease), background 0.3s;
}
.rail-item.active .r-line { width: 30px; background: var(--accent-ink); }
@media (max-width: 1100px) { .rail { display: none; } }

/* ---------- the creed ---------- */
.creed {
  padding: 170px 32px 0;
  text-align: center;
}
/* scroll-scene mode (enabled by JS) */
.creed-scroll { min-height: 210vh; padding: 0 32px; }
.creed-sticky { position: relative; }
.creed-scroll .creed-sticky {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.creed-scroll .creed-line { opacity: 1; transform: none; transition: none; }
.creed-scroll .w { display: inline-block; opacity: 1; } /* the creed line is always fully lit */
.creed-line { position: relative; z-index: 1; }
/* the creed statement + its live instruments, centered together over the graph */
.creed-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* the thought forming behind the words */
.creed-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.glink { stroke-width: 1; stroke-opacity: 0.32; }
.glink-cross { stroke-opacity: 0.22; }
.gnode-label {
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: 0.06em;
  fill: #868da4;
}
.gnode-hub {
  font-size: 7px;
  letter-spacing: 0.08em;
  fill: #c6cbdd;
}
.net-frontier {
  fill: none;
  stroke: #ffd9a3;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 9px rgba(232, 169, 92, 0.9));
}
.net-pulse { fill: #8de9ff; filter: drop-shadow(0 0 6px rgba(111, 224, 242, 0.8)); }
@media (max-width: 760px) {
  /* leaf labels are noise at this scale — but the hubs stay legible */
  .gnode-label { display: none; }
  .gnode-label.gnode-hub { display: block; font-size: 10px; }
}
.creed-line {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
  line-height: 1.35;
  color: var(--text-dim);
  max-width: 34ch;
  margin: 0 auto;
  /* keep the words legible over the graph behind them */
  text-shadow: 0 0 8px var(--bg), 0 0 8px var(--bg);
}
.creed-line em {
  font-style: italic;
  color: var(--accent-ink);
}

/* ---------- the blocks: one focused mini-app ---------- */
.block-showcase {
  position: relative;
  margin-top: 78px;
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(340px, 1.2fr) minmax(170px, 0.72fr);
  gap: 34px;
  align-items: center;
}
.block-showcase::before {
  content: "";
  position: absolute;
  inset: -28px -34px;
  z-index: -1;
}
.flow-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--accent-ink);
}
.source-card,
.action-card {
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(8, 9, 14, 0.8);
  box-shadow: 0 18px 50px -34px rgba(0, 0, 0, 0.95);
}
.source-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
.source-card strong,
.source-card span,
.action-card {
  font-family: var(--mono);
}
.source-card strong {
  display: block;
  font-size: 12px;
  color: var(--text);
}
.source-card div > span {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--steel);
}
.source-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #061016;
  background: var(--cyan);
  box-shadow: 0 0 22px rgba(111, 224, 242, 0.28);
  font-size: 11px;
  font-weight: 700;
}
.flow-line {
  width: calc(100% + 34px);
  height: 1px;
  margin-top: 28px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
}
.neural-block {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(164, 166, 255, 0.26);
  border-radius: 10px;
  padding: 24px;
  background:
    radial-gradient(circle at 80% 10%, rgba(164, 166, 255, 0.16), transparent 34%),
    rgba(8, 9, 14, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 32px 90px -54px rgba(111, 224, 242, 0.8);
}
.nb-top,
.nb-title,
.nb-controls,
.nb-rule p {
  display: flex;
  align-items: center;
}
.nb-top {
  justify-content: space-between;
  margin: -24px -24px 24px;
  padding: 11px 16px;
  background: rgba(164, 166, 255, 0.1);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
}
.nb-app { color: var(--text-faint); }
.nb-state {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(111, 224, 242, 0.5);
}
.nb-title {
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text);
}
.nb-title .tile-src { margin-left: auto; }
.nb-value {
  margin-top: 22px;
  font-size: 0;
}
.nb-value .num {
  font-size: clamp(2.9rem, 7vw, 4.8rem);
  line-height: 1;
}
.nb-value .tile-unit {
  font-size: 16px;
}
.nb-spark {
  height: 86px;
  margin-top: 24px;
}
.spark-fill {
  fill: rgba(111, 224, 242, 0.11);
}
.nb-spark polyline {
  stroke: var(--cyan);
  stroke-width: 2;
}
.nb-controls {
  margin-top: 20px;
  gap: 8px;
  flex-wrap: wrap;
}
.nb-controls span {
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--steel);
  background: rgba(255, 255, 255, 0.025);
}
.nb-rule {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.nb-rule p {
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--steel);
}
.block-actions {
  display: grid;
  gap: 10px;
}
.action-card {
  padding: 14px 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text);
}
.action-card:nth-child(2) { color: var(--accent-ink); }
.action-card:nth-child(3) { color: var(--cyan); }
.action-card:nth-child(4) { color: var(--amber); }
.block-note {
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
}

/* ---------- the blocks, alive: packets, sheen, reflex fire ---------- */
/* data packets stream from the source into the block */
.flow-line { position: relative; }
.flow-line::before {
  content: "";
  position: absolute; top: -2.5px; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: #d9f4ff;
  box-shadow: 0 0 10px var(--cyan), 0 0 24px rgba(111, 224, 242, 0.55);
  animation: packet 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes packet {
  0% { left: 0; opacity: 0; }
  14% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}
/* vertical variant — used when the flow-lines become connectors on mobile */
@keyframes packetV {
  0% { top: 0; opacity: 0; }
  14% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: calc(100% - 6px); opacity: 0; }
}
/* the source pings each time a packet departs (same 2.8s cadence) */
.source-icon { position: relative; }
.source-icon::after {
  content: "";
  position: absolute; inset: 0; border-radius: 8px;
  border: 1px solid rgba(111, 224, 242, 0.85);
  opacity: 0;
  animation: srcPing 2.8s var(--ease) infinite;
}
@keyframes srcPing {
  0% { opacity: 0.9; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(1.5); }
}

/* outgoing line to the reflexes — armed and dim until the rule trips */
.flow-line-out {
  margin-left: -34px;
  margin-top: 24px;
  background: linear-gradient(to right, transparent, rgba(164, 166, 255, 0.4), transparent);
  opacity: 0.45;
  transition: opacity 0.5s, background 0.5s;
}
.flow-line-out::before { animation: none; opacity: 0; }
.firing .flow-line-out {
  opacity: 1;
  background: linear-gradient(to right, transparent, var(--amber), transparent);
}
.firing .flow-line-out::before {
  background: #ffd9a3;
  box-shadow: 0 0 10px var(--amber), 0 0 24px rgba(232, 169, 92, 0.55);
  animation: packet 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* LIVE badge breathes */
.nb-state { display: inline-flex; align-items: center; gap: 7px; }
.nb-state::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: blip 2.4s ease-in-out infinite;
}

/* a sheen sweeps the tile now and then — the glass of an instrument */
.neural-block::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(164, 166, 255, 0.05) 45%,
    rgba(111, 224, 242, 0.09) 52%,
    transparent 70%);
  transform: skewX(-12deg);
  animation: nbSheen 8s var(--ease) infinite;
}
@keyframes nbSheen {
  0%, 58% { left: -60%; }
  100% { left: 140%; }
}

/* everything that changes state, transitions */
.neural-block {
  transition: transform 0.16s ease-out, border-color 0.5s, box-shadow 0.6s;
  will-change: transform;
}
.nb-top { transition: background 0.5s; }
.nb-value .num { transition: color 0.45s, text-shadow 0.45s; }
.nb-spark polyline { transition: stroke 0.45s; }
.spark-fill { transition: fill 0.45s; }
.nb-rule { transition: border-top-color 0.45s; }
.chip { transition: color 0.35s, border-color 0.35s, background 0.35s, box-shadow 0.35s; }
.action-card { transition: transform 0.45s var(--ease), border-color 0.45s, background 0.45s, box-shadow 0.45s; }
.block-showcase::before { transition: border-color 0.6s; }
.block-showcase.firing::before { border-color: rgba(232, 169, 92, 0.32); }

/* the live end of the sparkline pops on each reading */
.nb-spark circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.45s;
}
.nb-spark circle.pop { animation: dotPop 0.65s var(--ease); }
@keyframes dotPop {
  0% { transform: scale(1); }
  35% { transform: scale(2.2); }
  100% { transform: scale(1); }
}

/* REFLEX state — the rule trips and the block runs hot */
.nb-alert {
  border-color: rgba(232, 169, 92, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 32px 90px -50px rgba(232, 169, 92, 0.9);
}
.nb-alert .nb-top { background: rgba(232, 169, 92, 0.12); }
.nb-alert .nb-state {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(232, 169, 92, 0.6);
}
.nb-alert .nb-state::before { animation-duration: 0.65s; }
.nb-alert .tile-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.nb-alert .nb-value .num {
  color: #ffd9a3;
  text-shadow: 0 0 26px rgba(232, 169, 92, 0.4);
}
.nb-alert .nb-spark polyline { stroke: var(--amber); }
.nb-alert .spark-fill { fill: rgba(232, 169, 92, 0.1); }
.nb-alert .nb-rule { border-top-color: rgba(232, 169, 92, 0.32); }
.nb-alert .nb-rule p:first-of-type { color: #ffd9a3; }

/* the rule's THEN chips light in sequence… */
.chip.chip-hit {
  color: #ffd9a3;
  border-color: rgba(232, 169, 92, 0.6);
  background: rgba(232, 169, 92, 0.09);
  box-shadow: 0 0 14px -2px rgba(232, 169, 92, 0.45);
}
/* …and each reflex card answers */
.action-card.hit {
  transform: translateX(7px);
  border-color: rgba(232, 169, 92, 0.55);
  background: rgba(232, 169, 92, 0.06);
  box-shadow: 0 0 30px -8px rgba(232, 169, 92, 0.5);
}

/* legacy four-card deck kept hidden for now */
.deck[hidden],
.deck-note { display: none; }

.deck {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tile {
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(8, 9, 14, 0.75);
  padding: 20px 20px 16px;
  display: flex; flex-direction: column;
  transition: border-color 0.4s, transform 0.5s var(--ease), box-shadow 0.5s;
}
.tile:hover {
  transform: translateY(-4px);
  border-color: rgba(164, 166, 255, 0.4);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
.tile-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 18px;
}
.tile-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  flex-shrink: 0;
}
.tile-dot-amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.tile-id {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--text-faint);
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-src {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em;
  color: var(--steel);
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px 1px;
}
.tile-num { font-size: 0; }
.tile-num .num { font-size: 26px; }
.tile-unit {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--steel); margin-left: 8px;
}
.tile-delta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--steel);
  margin-top: 6px;
}
.tile-delta .num { font-size: 10px; }
.spark {
  width: 100%; height: 34px;
  margin-top: 16px;
}
.spark polyline {
  fill: none;
  stroke: rgba(170, 179, 199, 0.65);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.spark circle { fill: var(--amber); }

.tile-react { gap: 2px; }
.rx-line {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--steel);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 5px 0;
}
.rx-k {
  color: var(--amber);
  font-size: 9px; letter-spacing: 0.2em;
  width: 38px; flex-shrink: 0;
}
.chip {
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.02);
}
.rx-state {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--text-faint);
  border-top: 1px solid var(--line);
}

.deck-note {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
}
.deck-note span { color: var(--text-faint); }

/* ---------- the hierarchy: strata of the delta ---------- */
.strata {
  margin-top: 84px;
  display: flex; flex-direction: column; align-items: center;
  gap: 9px;
}
.strata-apex {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--accent-ink);
  margin-bottom: 4px;
  filter: drop-shadow(0 0 10px rgba(164, 166, 255, 0.5));
}
.stratum {
  width: max(var(--w), 300px);
  max-width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  padding: 13px 20px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.35s, background 0.35s, transform 0.4s var(--ease);
}
.stratum:hover {
  border-color: rgba(164, 166, 255, 0.45);
  background: rgba(164, 166, 255, 0.045);
  transform: scale(1.012);
}
.st-role {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--text);
  white-space: nowrap;
}
.st-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em;
  color: var(--text-faint);
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 3px 8px 2px;
  white-space: nowrap;
}
.s1 .st-tag { color: var(--accent-ink); border-color: rgba(164, 166, 255, 0.45); }
.s2 .st-tag { color: rgba(195, 197, 255, 0.75); border-color: rgba(164, 166, 255, 0.3); }
.s3 .st-tag { color: var(--steel); }
.s5 .st-tag { color: var(--cyan-soft); border-color: rgba(111, 224, 242, 0.25); }
.s1 { border-color: rgba(164, 166, 255, 0.4); }
.s2 { border-color: rgba(164, 166, 255, 0.26); }

/* assemble-on-scroll (enabled by JS), reversible both directions.
   The transition in effect is the one on the state being entered, so the
   collapsed rules carry the REVERSE stagger (bottom folds up first) and the
   built rules carry the FORWARD stagger (top builds down first) — a mirror. */
.strata-anim .stratum {
  width: 64px;
  overflow: hidden;
  /* reverse: s1 (apex) collapses last */
  transition: width 1.1s var(--ease) 0.4s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease);
}
.strata-anim .stratum .st-tag { opacity: 0; transition: opacity 0.4s; }
.strata-anim .s2 { transition: width 1.1s var(--ease) 0.3s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim .s3 { transition: width 1.1s var(--ease) 0.2s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim .s4 { transition: width 1.1s var(--ease) 0.1s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim .s5 { transition: width 1.1s var(--ease) 0s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
/* built state — forward: s1 (apex) builds first */
.strata-anim.built .stratum { width: max(var(--w), 300px); transition: width 1.1s var(--ease) 0s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim.built .s2 { transition: width 1.1s var(--ease) 0.1s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim.built .s3 { transition: width 1.1s var(--ease) 0.2s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim.built .s4 { transition: width 1.1s var(--ease) 0.3s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim.built .s5 { transition: width 1.1s var(--ease) 0.4s, border-color 0.35s, background 0.35s, transform 0.4s var(--ease); }
.strata-anim.built .stratum .st-tag { opacity: 1; transition: opacity 0.5s 0.5s; }

.strata-note {
  margin-top: 40px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--text-faint);
}

/* ---------- manifest ---------- */
.manifest { margin-top: 80px; border-top: 1px solid var(--line-strong); }

/* the agent registry — tabs split the minds from their skills */
.agent-tabs {
  display: flex; gap: 30px;
  margin-top: 58px;
  border-bottom: 1.5px solid var(--line);
}
.agent-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  position: relative;
  padding: 0 2px 13px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--text-faint);
  transition: color 0.25s;
}
.agent-tab:hover { color: var(--text-dim); }
.agent-tab.on { color: var(--text); }
.agent-tab.on::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2px;
  background: var(--grad);
}
.agent-panel { display: none; }
.agent-panel.on { display: block; animation: agentIn 0.4s var(--ease); }
@keyframes agentIn {
  from { opacity: 0; transform: translateY(8px); }
}
.ag-manifest { margin-top: 0; border-top: 0; }

/* the team composer — describe the operation, meet the team */
.team-lab {
  margin-top: 56px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
  overflow: hidden;
}
.team-body { padding: 20px; }
.team-form { display: flex; gap: 10px; }
.team-input {
  flex: 1; min-width: 0;
  padding: 12px 15px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.25s;
}
.team-input::placeholder { color: var(--text-faint); }
.team-input:focus { border-color: rgba(164, 166, 255, 0.6); }
.team-go {
  appearance: none; cursor: pointer;
  padding: 0 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--text);
  background: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  white-space: nowrap;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.team-go:hover {
  border-color: rgba(164, 166, 255, 0.65);
  box-shadow: 0 0 16px rgba(164, 166, 255, 0.18);
}
.team-egs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.team-eg {
  appearance: none; cursor: pointer;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.25s, border-color 0.25s;
}
.team-eg:hover { color: var(--text-dim); border-color: var(--line-strong); }
.team-status {
  margin-top: 16px; min-height: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--cyan-soft);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.team-card {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  background: rgba(10, 12, 18, 0.92);
  animation: teamSpawn 0.5s var(--ease) backwards;
}
@keyframes teamSpawn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.team-card .team-mission {
  margin: 9px 0 10px;
  font-size: 12px; line-height: 1.5;
  color: var(--text-dim);
}
.team-card .team-skills { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) {
  .team-form { flex-direction: column; }
  .team-go { padding: 11px 18px; }
}
.mrow {
  display: grid;
  grid-template-columns: 64px 0.75fr 1.15fr 150px 100px;
  gap: 28px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s, padding-left 0.4s var(--ease);
}
.mrow:not(.mrow-sealed):hover {
  background: linear-gradient(to right, rgba(164,166,255,0.05), transparent 70%);
  padding-left: 12px;
}
.m-idx {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  color: var(--accent-ink);
}
.mrow-sealed .m-idx { color: var(--text-faint); }
.m-name { font-family: var(--serif); font-size: 22px; letter-spacing: 0.005em; }
.m-desc { color: var(--text-dim); font-size: 14px; }
.m-count {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--steel);
  justify-self: end;
  white-space: nowrap;
}
.m-count .num { font-size: 10.5px; }
.m-dark { color: var(--text-faint); }
.m-state {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--text-faint);
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 4px 9px 3px;
  justify-self: end;
  white-space: nowrap;
}
.m-open {
  color: var(--cyan-soft);
  border-color: rgba(111, 224, 242, 0.28);
}

/* redaction bars */
.redact {
  color: transparent;
  background: repeating-linear-gradient(
    -45deg,
    rgba(214, 218, 240, 0.13) 0 2px,
    rgba(214, 218, 240, 0.05) 2px 5px
  );
  border-radius: 3px;
  user-select: none;
  padding: 0 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mrow-sealed:hover .redact {
  background: repeating-linear-gradient(
    -45deg,
    rgba(214, 218, 240, 0.18) 0 2px,
    rgba(214, 218, 240, 0.07) 2px 5px
  );
}

.manifest-note {
  margin-top: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--text-faint);
}

/* ---------- invitation ---------- */
/* ---------- 03 · the vault: the sealing chamber ---------- */
.vault-scene {
  margin: 64px auto 0;
  width: min(760px, 100%);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}
.vault-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--text-faint);
  white-space: nowrap;
}
.vault-title { overflow: hidden; text-overflow: ellipsis; }
.vault-count { flex-shrink: 0; }
.vault-count .num { font-size: 13px; }
.vault-unit { font-size: 9px; letter-spacing: 0.2em; }

/* act 1: the fact being sealed */
.vault-seal {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
  min-height: 50px;
}
.vs-text {
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vs-stamp {
  flex-shrink: 0;
  font-size: 9px; letter-spacing: 0.18em; white-space: nowrap;
  border: 1.5px solid var(--line-strong); border-radius: 3px;
  padding: 3px 8px 2px;
  opacity: 0; transform: scale(1.5);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.vs-stamp.on { opacity: 1; transform: scale(1); }

/* act 2: the lattice — sealed facts asleep in the dark */
.vault-lattice-wrap { position: relative; padding: 18px 20px; overflow: hidden; }
.vault-lattice {
  display: grid;
  grid-template-columns: repeat(var(--vcols, 20), 1fr);
  gap: 7px;
}
.vcell {
  display: block;
  aspect-ratio: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.055);
  transition: background 0.35s, box-shadow 0.35s, transform 0.35s var(--ease);
}
.vcell.lit {
  background: var(--cell-c);
  box-shadow: 0 0 9px var(--cell-g);
  transform: translateY(-2px);
}
.vcell.denied { background: rgba(255, 140, 140, 0.16); }
.vcell.pulse { animation: vcellPulse 0.8s var(--ease); }
@keyframes vcellPulse {
  0% { transform: scale(1.7); background: #ffd9a3; box-shadow: 0 0 12px rgba(232, 169, 92, 0.6); }
  100% { transform: scale(1); }
}
.vcell.blink { animation: vcellBlink 0.7s var(--ease); }
@keyframes vcellBlink { 50% { background: rgba(255, 255, 255, 0.17); } }
.vcell.lit { cursor: pointer; }

/* rollover card: what a lit cell holds */
.vault-tip {
  position: fixed; z-index: 60; pointer-events: none;
  max-width: 270px; padding: 9px 12px;
  background: rgba(10, 12, 18, 0.97);
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.vault-tip.on { opacity: 1; transform: translateY(0); }
.vault-tip .vt-type {
  display: block;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--text-faint);
}
.vault-tip .vt-name { display: block; margin: 4px 0 5px; font-size: 12.5px; color: var(--text); }
.vault-tip .vt-meta {
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em;
  color: var(--text-dim); white-space: nowrap;
}

/* the recall beam that sweeps the lattice */
.vault-beam {
  position: absolute; top: 8px; bottom: 8px; left: -46px;
  width: 46px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, transparent, rgba(111, 224, 242, 0.14), rgba(111, 224, 242, 0.45), transparent);
}
.vault-beam.sweep { animation: vaultSweep 1.3s linear forwards; }
@keyframes vaultSweep {
  0% { left: -46px; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* act 3: the query line */
.vault-query {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--text-faint);
  min-height: 40px;
  white-space: nowrap;
}
.vq-label { overflow: hidden; text-overflow: ellipsis; }
.vq-label.vq-in { animation: vqIn 0.35s var(--ease); }
@keyframes vqIn { from { opacity: 0; transform: translateX(-8px); } }
.vq-result { flex-shrink: 0; color: var(--text-faint); }

/* guarantees + closing note */
.vault-caps {
  list-style: none;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px 36px;
  margin-top: 36px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--text-faint);
}
.vault-caps li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.vault-caps li::before {
  content: "";
  width: 5px; height: 5px;
  border: 1px solid rgba(164, 166, 255, 0.5);
  transform: rotate(45deg);
}
.vault-note {
  margin-top: 40px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--text-dim);
}
.vault-note em { color: var(--accent-ink); }

@media (max-width: 760px) {
  .vault-seal { font-size: 11px; }
  .vault-top { font-size: 8.5px; }
  .vault-lattice { gap: 5px; }
  .vault-query { font-size: 8.5px; flex-wrap: wrap; }
  .vault-caps { gap: 8px 20px; font-size: 8.5px; }
}

.invite {
  padding-bottom: 200px;
  text-align: center;
}
.invite::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 25%, var(--line) 75%, transparent);
}
.invite-wrap { display: flex; flex-direction: column; align-items: center; }
.invite .h2 { max-width: none; }

.invite-form {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 44px;
  width: min(560px, 100%);
}
.if-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.invite-form .btn { margin-top: 6px; }
.invite-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13.5px;
  padding: 14px 18px;
  transition: border-color 0.3s, background 0.3s;
}
.invite-input::placeholder { color: var(--text-faint); }
.invite-input:focus {
  outline: none;
  border-color: rgba(164, 166, 255, 0.5);
  background: rgba(164, 166, 255, 0.04);
}
.invite-input.err { border-color: rgba(255, 140, 140, 0.55); }

/* honeypot — kept far off-screen, never shown to humans */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.invite-form .btn:disabled { opacity: 0.55; cursor: default; }

.invite-error[hidden] { display: none; }
.invite-error {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: #ffb0b0;
}
.invite-error a { color: var(--accent-ink); }

.invite-done[hidden] { display: none; }
.invite-done {
  margin-top: 44px;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--text);
  display: flex; align-items: center; gap: 14px;
}
.invite-done em { font-style: italic; color: var(--accent-ink); }
.done-mark { width: 30px; height: 30px; flex-shrink: 0; }

.invite-fine {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 30px clamp(24px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.f-mark { width: 20px; height: 20px; color: var(--text-dim); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .dial-stage { display: contents; }
  #dial {
    width: min(440px, 74vw);
    height: auto;
    aspect-ratio: 1;
    margin-bottom: -10px;
  }
  /* instruments stack under the copy: brain gauge, then live activity */
  .hero-instruments { gap: 26px; }
  .hud, .hud-log { width: min(360px, 88vw); }
}
@media (max-width: 1000px) {
  .deck { grid-template-columns: repeat(2, 1fr); }

  /* the showcase reads top-to-bottom as a pipeline:
     LIVE SOURCE streams in ↓ · THE TILE · ↓ REFLEXES fire out */
  .block-showcase {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
  }
  .block-source,
  .neural-block,
  .block-actions { width: 100%; }
  .block-source { text-align: center; }

  /* flow-lines become vertical connectors with a packet falling into
     the next stage, capped by a downward chevron */
  .flow-line {
    display: block;
    position: relative;
    width: 1px;
    height: 38px;
    margin: 16px auto;
    background: linear-gradient(to bottom, var(--cyan), transparent);
  }
  .flow-line::before {
    top: 0; left: -2.5px;
    animation-name: packetV;
  }
  .flow-line::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 3px;
    width: 6px; height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    color: var(--cyan);
    transform: translate(-50%, 0) rotate(45deg);
    opacity: 0.85;
  }

  /* reflexes stack under the tile — the out-connector leads into them */
  .block-actions {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 10px;
  }
  .block-actions .flow-line-out {
    order: -1;
    margin: 16px auto 18px;
    background: linear-gradient(to bottom, rgba(164, 166, 255, 0.5), transparent);
  }
  .block-actions .flow-line-out::after { color: var(--accent-ink); opacity: 0.6; }
  .action-card { text-align: center; }
}
@media (max-width: 900px) {
  .mrow { grid-template-columns: 64px 0.8fr 1.2fr 100px; }
  .m-count { display: none; }
}
@media (max-width: 760px) {
  /* mobile browsers fight anchor jumps (e.g. Access -> #invite) when the page
     snaps — the scroll gets yanked back to a nearby snap point. Turn snapping
     off on phones so links scroll all the way to their target and stay there. */
  html { scroll-snap-type: none; }
  .hero-copy { scroll-snap-align: center; } /* the "AI Brain" heading settles centered on screen */
  .hero { padding-top: 72px; } /* clear air between the fixed bar and the triangle */
  .hero-copy { margin-top: 24px; } /* headline sits right under the triangle — no empty band */
  .section { padding: 120px 0; }
  .deck { grid-template-columns: 1fr; }
  .block-showcase { margin-top: 48px; }
  .block-showcase::before { inset: -18px -12px; }
  .neural-block { padding: 18px; }
  .nb-top { margin: -18px -18px 20px; }
  .nb-value .num { font-size: 3.2rem; }
  .block-note {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.14em;
    line-height: 1.7;
  }
  .stratum { width: 100%; }
  .mrow {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "idx name state"
      "desc desc desc";
    align-items: center;
    gap: 4px 12px;
    padding: 22px 0;
  }
  .m-idx { grid-area: idx; }
  .m-name { grid-area: name; font-size: 18px; }
  .m-state { grid-area: state; }
  .m-desc { grid-area: desc; margin-top: 9px; }
  .hero-foot {
    gap: 4px 12px; font-size: 8.5px; padding: 0 16px;
    white-space: normal; flex-wrap: wrap; text-align: center;
  }
  .foot-line { display: none; }
  .if-grid { grid-template-columns: 1fr; }
  .top-status { display: none; }
  /* keep the lockup and the demo button clear of each other */
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 19px; }
  .btn-demo { display: none; }

  /* ── clean mobile hero ─────────────────────────────────────────────
     one triangle, one readout. the live ingestion log is hidden and the
     instruments no longer float over the triangle's strokes. the brain
     status sits as a single centered card below the headline — the
     growing neuron count is the one hook. */
  #dial { width: 72vw; }
  .dial-stage { margin-bottom: -24px; }

  .hero-instruments {
    position: static;
    margin: 34px auto 0;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    pointer-events: auto;
    text-shadow: none;
  }

  /* hide the live ingestion / contributor activity feed on mobile */
  .hero-instruments .hud-log { display: none; }

  /* the brain status becomes one centered instrument card */
  .hero-instruments .hud-brain {
    width: min(300px, 82vw);
    text-align: center;
    padding: 20px 24px 22px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.015);
  }

  .hero-instruments .hud-title {
    font-size: 8.5px;
    letter-spacing: 0.22em;
    margin-bottom: 14px;
    opacity: 0.7;
    white-space: nowrap;
  }
  .hero-instruments .bar {
    height: 8px;
    max-width: 200px;
    margin: 0 auto;
    opacity: 0.7;
  }
  .hero-instruments .hud-metric { margin-top: 16px; }
  .hero-instruments .hud-metric .num {   /* the star: the brain growing */
    font-size: 30px;
    text-shadow: 0 0 20px rgba(232, 169, 92, 0.4);
  }
  .hero-instruments .hud-metric .unit { font-size: 10px; margin-left: 8px; }
  .hero-instruments .hud-sub,
  .hero-instruments .hud-sub .num { font-size: 9.5px; }
  .hero-instruments .hud-sub { margin-top: 10px; opacity: 0.8; }
}

/* ============================================================
   02 · the dashboard — the command deck
   ============================================================ */
.dash-scene {
  margin-top: 64px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
  overflow: hidden;
}
.dash-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--text-faint);
}
.dash-hint { color: var(--cyan-soft); transition: color 0.3s; }
.dash-hint.hands { color: var(--amber); }

/* fallback: a plain CSS grid (no JS, and the pre-managed first paint) */
.dash-board {
  position: relative;
  margin: 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 96px;
  gap: 10px;
}
.dash-board:not(.managed) .dash-tile {
  grid-column: calc(var(--gc) + 1) / span var(--gw);
  grid-row: calc(var(--gr) + 1) / span var(--gh);
}
/* lego studs — dots at every cell corner (JS feeds --dcw = cell + gap) */
.dash-board::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.5px);
  background-size: var(--dcw, 16.66%) 106px;
  background-position: 0 0;
}
/* managed: JS owns geometry via inline width/height/transform */
.dash-board.managed { display: block; }
.dash-board.managed .dash-tile { position: absolute; left: 0; top: 0; }

.dash-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(10, 12, 18, 0.92);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.dash-tile .tile-num .num { font-size: 22px; }
.dash-spark { width: 100%; flex: 1; min-height: 0; height: auto; }
.tile-metrics {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
}
.tile-metrics .tm { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tile-metrics .tm-k, .tile-metrics .tm-u { color: var(--text-faint); }
.tile-metrics .num { font-size: 11px; }

/* the incidents table — a full-width record tile */
.dash-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.dash-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  line-height: 1.2;
}
.dash-table th {
  text-align: left; font-weight: 500;
  color: var(--text-faint);
  padding: 2px 14px 4px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dash-table td {
  padding: 3px 14px 3px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  white-space: nowrap;
}
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table .sev {
  font-size: 9px; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--line-strong); color: var(--text-dim);
}
.dash-table .sev-1 { color: var(--amber); border-color: rgba(232, 169, 92, 0.55); }
.dash-table .sev-2 { color: var(--violet); border-color: rgba(164, 166, 255, 0.45); }
.dash-table .st-res { color: var(--text-faint); }
.dash-table .st-open { color: var(--cyan); }
.dash-table .st-inv { color: var(--amber); }

/* the analysis tile reads as a report, not a fading feed */
.dash-log.dash-analysis li:nth-child(4),
.dash-log.dash-analysis li:nth-child(5) { opacity: 1; }
.dash-analysis .t { min-width: 44px; display: inline-block; }

/* the lab health dial — one needle for the whole lab */
.dial-wrap {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.dial-meter { width: min(100%, 230px); height: auto; flex: 1; min-height: 0; }
.dm-track { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
.dm-arc {
  fill: none; stroke: url(#dialGrad); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 0.9s var(--ease);
}
.dm-arc.low { stroke: var(--amber); }
.dm-tick { stroke: var(--line-strong); stroke-width: 1.5; }
.dm-needle { transform-origin: 110px 110px; transition: transform 0.9s var(--ease); }
.dm-needle line { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.dm-needle circle { fill: var(--steel); }
.dial-read { display: flex; align-items: baseline; gap: 6px; font-size: 0; }
.dial-read .num { font-size: 24px; }
.dial-read .dial-state {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--text-faint); margin-left: 8px;
}
.dash-log {
  list-style: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-dim);
  display: flex; flex-direction: column; gap: 7px;
  overflow: hidden;
}
.dash-log .t { color: var(--text-faint); margin-right: 7px; }
.dash-log li:nth-child(4) { opacity: 0.6; }
.dash-log li:nth-child(5) { opacity: 0.35; }
.dash-agent {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--cyan-soft);
}

/* motion: transform springs (lego snap), flourishes ride separate props */
.dash-board.managed .dash-tile {
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.3s var(--ease), rotate 0.3s var(--ease),
    translate 0.35s var(--ease), box-shadow 0.3s;
  will-change: transform;
}
.dash-board.managed .dash-tile.drag {
  transition: scale 0.3s var(--ease), rotate 0.3s var(--ease), box-shadow 0.3s;
  cursor: grabbing;
}
.dash-tile.lift {
  scale: 1.045; rotate: 0.6deg;
  z-index: 5;
  border-color: rgba(164, 166, 255, 0.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(164, 166, 255, 0.12);
}
.dash-tile.snap { animation: dashSettle 0.5s var(--ease); }
@keyframes dashSettle {
  0% { scale: 1.03; }
  55% { scale: 0.992; }
  100% { scale: 1; }
}

/* the dashed ghost slot that tracks the snap target */
.dash-slot {
  position: absolute; left: 0; top: 0; z-index: 1;
  border: 1.5px dashed rgba(164, 166, 255, 0.5);
  border-radius: 12px;
  background: rgba(164, 166, 255, 0.05);
  opacity: 0; pointer-events: none;
  transition: transform 0.22s var(--ease), width 0.22s var(--ease),
              height 0.22s var(--ease), opacity 0.2s;
}
.dash-slot.on { opacity: 1; }

/* snap fx: stud pulse + click-ripple, one throwaway element per snap */
.dash-fx {
  position: absolute; left: 0; top: 0; z-index: 4;
  border-radius: 12px; pointer-events: none;
  background-image: radial-gradient(rgba(195, 197, 255, 0.9) 1.2px, transparent 1.8px);
  background-size: 24px 24px;
  animation: dashStuds 0.65s ease-out forwards;
}
@keyframes dashStuds { 0% { opacity: 0.3; } 100% { opacity: 0; } }
.dash-fx::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 14px;
  border: 1px solid rgba(164, 166, 255, 0.6);
  animation: dashRing 0.65s var(--ease) forwards;
}
@keyframes dashRing {
  0% { opacity: 0.8; transform: scale(0.985); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* corner resize grip */
.dash-size {
  position: absolute; right: 5px; bottom: 5px; z-index: 2;
  width: 15px; height: 15px;
  cursor: nwse-resize;
  opacity: 0; transition: opacity 0.25s;
  background: linear-gradient(135deg, transparent 55%, rgba(150, 156, 172, 0.7) 55%);
  border-radius: 0 0 5px 0;
  touch-action: none;
}
.dash-tile:hover .dash-size { opacity: 0.85; }

/* reduced motion / calm mode */
.dash-board.still .dash-tile,
.dash-board.still .dash-slot { transition: none; animation: none; }

@media (max-width: 760px) {
  .dash-board { margin: 12px; grid-template-columns: 1fr; grid-auto-rows: 84px; }
  .dash-board:not(.managed) .dash-tile { grid-column: auto; grid-row: auto; }
  .dash-board::before { background-size: var(--dcw, 25%) 94px; }
  .dash-tile { padding: 10px 12px; gap: 5px; }
  .dash-tile .tile-num .num { font-size: 19px; }
  .dash-size { display: none; }
  .dash-top { padding: 11px 14px; font-size: 9.5px; }
  .dash-log li:nth-child(n + 4) { display: none; }
}

/* ---------- mobile menu (hamburger) — the rail is hidden ≤1100px ---------- */
.menu-btn {
  display: none;
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.menu-btn span {
  position: absolute; left: 11px; right: 11px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.35s var(--ease);
}
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 24px; }
.menu-btn.open span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn.open span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0;
  z-index: 45; /* under .top (50) so the brand and the button stay visible */
  display: none;
  background: rgba(6, 7, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.mnav.open { opacity: 1; pointer-events: auto; }
.mnav-inner {
  height: 100%;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 90px clamp(28px, 8vw, 64px) 40px;
}
.mnav-item {
  display: flex; align-items: baseline; gap: 18px;
  text-decoration: none;
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: clamp(21px, 5.6vw, 27px);
  font-weight: 450;
  letter-spacing: -0.01em;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s var(--ease);
}
.mnav.open .mnav-item { opacity: 1; transform: none; }
.mnav.open .mnav-item:nth-child(1) { transition-delay: 0.05s; }
.mnav.open .mnav-item:nth-child(2) { transition-delay: 0.09s; }
.mnav.open .mnav-item:nth-child(3) { transition-delay: 0.13s; }
.mnav.open .mnav-item:nth-child(4) { transition-delay: 0.17s; }
.mnav.open .mnav-item:nth-child(5) { transition-delay: 0.21s; }
.mnav.open .mnav-item:nth-child(6) { transition-delay: 0.25s; }
.mnav.open .mnav-item:nth-child(7) { transition-delay: 0.29s; }
.mnav.open .mnav-item:nth-child(8) { transition-delay: 0.33s; }
.mnav-item:active, .mnav-item:hover { color: var(--text); }
.mn-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  min-width: 26px;
}
.mnav-hiw { color: var(--accent-ink); }
.mnav-hiw .mn-num { color: var(--accent-ink); }
body.nav-open { overflow: hidden; }
@media (max-width: 1100px) {
  .menu-btn { display: block; }
  .mnav { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav-item, .menu-btn span { transition: none; }
}

/* ---------- vault strata — five clearance layers in the triangle ----------
   structure = violet hairlines, always faintly present · an access event
   washes the layer in the violet→cyan signal gradient and cascades down
   through everything beneath it · the apex (owners) burns amber */
.stratum {
  /* translucency lives in the paint (12% gradient / 16% amber), and only
     composited element opacity animates — a band can never flash solid */
  fill: url(#strataFill);
  opacity: 0;
  pointer-events: all;
  transition: opacity 1s var(--ease);
}
.stratum.lit { opacity: 1; transition-duration: 0.25s; }
.stratum.lit-sub { opacity: 0.32; transition-duration: 0.4s; }
.stratum-apex.lit { fill: rgba(232, 169, 92, 0.16); }
.stratum-line {
  stroke: rgba(164, 166, 255, 0.13);
  stroke-width: 1;
  transition: stroke 0.9s var(--ease);
}
.stratum-line.lit { stroke: rgba(164, 166, 255, 0.45); transition-duration: 0.2s; }
.stratum-line.lit-sub { stroke: rgba(164, 166, 255, 0.22); transition-duration: 0.3s; }
.stratum-lead {
  stroke: rgba(164, 166, 255, 0.4);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.stratum-lead.on { opacity: 1; }
.stratum-label {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  fill: var(--steel);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.stratum-label.on { opacity: 1; }
.stratum-label-apex { fill: var(--amber); }
@media (max-width: 760px) {
  .stratum-label { font-size: 20px; } /* the svg renders at ~44% on phones */
}