/* ========================================================================
   SYNAPSE — Sovereign AI Protocol
   Design system : palantir-grade institutional / military
   ======================================================================== */

:root {
  /* Palette */
  --black: #050607;
  --graphite: #101214;
  --graphite-2: #16181b;
  --graphite-3: #1c1f23;
  --line: #2A2E33;
  --line-strong: #3a3f47;
  --text-2: #8D949E;
  --text-3: #5e646d;
  --white: #F4F6F8;

  --accent-blue: #6EA8FF;
  --accent-amber: #D6A64F;
  --accent-mil: #5C6F5B;
  --accent-warn: #c97b4a;
  --accent-bad: #b04848;
  --accent-good: #7da77b;

  /* Typography */
  --ff-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-py: clamp(5rem, 9vw, 8rem);
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  font-family: var(--ff-body);
  background: var(--black);
  color: var(--white);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ============== BACKGROUND LAYERS ============== */
.bg-grain,
.bg-grid,
.bg-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}

.bg-vignette {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(110,168,255,0.04), transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(214,166,79,0.025), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, #07080a 50%, var(--black) 100%);
}

.page-3d-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
  filter: saturate(1.05) contrast(1.05);
  mask-image:
    radial-gradient(ellipse 70% 76% at 72% 34%, #000 0%, #000 45%, transparent 78%),
    linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
}

.page-3d-canvas[data-page-scene="dashboard"] {
  opacity: .28;
  mask-image: radial-gradient(ellipse 80% 80% at 82% 12%, #000 0%, transparent 72%);
}

.has-page-3d main,
.has-page-3d .site-footer {
  position: relative;
  z-index: 3;
}

.dashboard-body .page-3d-canvas {
  z-index: 1;
}

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  background:
    radial-gradient(circle, rgba(110,168,255,0.13), rgba(110,168,255,0.035) 34%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .35s var(--ease);
}

.cursor-glow.active {
  opacity: 1;
}

/* ============== TYPOGRAPHY HELPERS ============== */
em {
  font-style: normal;
  color: var(--white);
  font-weight: 500;
  background: linear-gradient(180deg, transparent 60%, rgba(110,168,255,0.18) 60%);
  padding: 0 0.1em;
}

strong {
  color: var(--white);
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease);
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul { list-style: none; }

/* ============== HEADER ============== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: rgba(5,6,7,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--white);
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}

.logo-line {
  width: 18px;
  height: 1px;
  background: var(--white);
}

.logo-dot {
  width: 5px;
  height: 5px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
  animation: pulse-dot 3.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

.logo-text {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  color: var(--white);
}

.site-nav {
  display: flex;
  gap: clamp(.7rem, 1.1vw, 1.55rem);
  font-family: var(--ff-mono);
  font-size: clamp(.62rem, .7vw, .72rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.site-nav a {
  position: relative;
  padding: 0.4rem 0;
}

.site-nav a:hover {
  color: var(--white);
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--text-2);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-good);
  box-shadow: 0 0 8px var(--accent-good);
  animation: pulse-dot 2.2s ease-in-out infinite;
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.btn-primary:hover {
  background: var(--black);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--line-strong);
}

.btn-outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.04);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--line);
  padding: 0.55rem 1rem;
  font-size: 0.66rem;
}

.btn-ghost:hover {
  border-color: var(--white);
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

.btn-arrow {
  transition: transform .3s var(--ease);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ============== HERO ============== */
.hero {
  position: relative;
  z-index: 2;
  padding: calc(var(--section-py) + 4rem) var(--gutter) var(--section-py);
  max-width: var(--container);
  margin: 0 auto;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  color: var(--text-3);
  margin-bottom: 4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.meta-sep { color: var(--line-strong); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  color: var(--text-2);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #b8c0cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 1.4rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.hero-lede {
  color: var(--text-2);
  max-width: 540px;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 3.5rem;
}

.hero-promise {
  position: relative;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}

.promise-text {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--white);
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  line-height: 1.7;
}

.promise-text-fr {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* hero visual */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
}

.hero-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(ellipse at center, rgba(110,168,255,0.04) 0%, transparent 60%),
    linear-gradient(180deg, var(--graphite-2) 0%, var(--black) 100%);
  border-radius: var(--radius);
  overflow: hidden;
}

.hero-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
}

/* corner brackets */
.hero-canvas::after {
  content: "";
  position: absolute;
  inset: 12px;
  background:
    linear-gradient(90deg, var(--white), var(--white)) top left / 18px 1px no-repeat,
    linear-gradient(90deg, var(--white), var(--white)) top right / 18px 1px no-repeat,
    linear-gradient(90deg, var(--white), var(--white)) bottom left / 18px 1px no-repeat,
    linear-gradient(90deg, var(--white), var(--white)) bottom right / 18px 1px no-repeat,
    linear-gradient(180deg, var(--white), var(--white)) top left / 1px 18px no-repeat,
    linear-gradient(180deg, var(--white), var(--white)) top right / 1px 18px no-repeat,
    linear-gradient(180deg, var(--white), var(--white)) bottom left / 1px 18px no-repeat,
    linear-gradient(180deg, var(--white), var(--white)) bottom right / 1px 18px no-repeat;
  opacity: 0.4;
  pointer-events: none;
}

.hero-svg {
  width: 100%;
  height: 100%;
}

.rings circle {
  fill: none;
  stroke: rgba(255,255,255,0.04);
  stroke-width: 1;
}

.rings circle:nth-child(1) {
  stroke: rgba(255,255,255,0.10);
  animation: ring-rotate 40s linear infinite;
  transform-origin: center;
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-grid-lines line {
  stroke: rgba(255,255,255,0.05);
  stroke-width: 1;
}

.cluster-label {
  fill: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 3px;
}

.agent-core {
  fill: var(--white);
}

.agent-halo {
  fill: none;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 1;
  animation: halo-pulse 3s ease-in-out infinite;
  transform-origin: center;
}

.cluster-left .agent-halo { animation-delay: 0s; }
.cluster-right .agent-halo { animation-delay: 1.5s; }

@keyframes halo-pulse {
  0%, 100% { opacity: 0.6; r: 22; }
  50%      { opacity: 0.1; r: 38; }
}

.data-points circle {
  fill: var(--text-2);
  opacity: 0.5;
  animation: data-blink 4s ease-in-out infinite;
}

.data-points circle:nth-child(2) { animation-delay: 0.4s; }
.data-points circle:nth-child(3) { animation-delay: 0.8s; }
.data-points circle:nth-child(4) { animation-delay: 1.2s; }
.data-points circle:nth-child(5) { animation-delay: 1.6s; }

@keyframes data-blink {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.8; }
}

.contract-halo {
  fill: none;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 1;
  animation: contract-pulse 4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes contract-pulse {
  0%, 100% { r: 32; opacity: 0.5; }
  50%      { r: 52; opacity: 0; }
}

.contract-core {
  fill: var(--white);
}

.contract-pulse {
  animation: dot-pulse 2.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.6); }
}

.contract-label {
  fill: var(--white);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 4px;
}

.line-flow {
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 6;
  animation: dash-flow 4s linear infinite;
}

.line-1 { animation-direction: normal; }
.line-2 { animation-direction: reverse; }

@keyframes dash-flow {
  to { stroke-dashoffset: -100; }
}

.packet {
  fill: var(--white);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

.packet-l {
  animation: packet-l 2.6s linear infinite;
}

.packet-r {
  animation: packet-r 2.6s linear infinite;
}

@keyframes packet-l {
  0%   { transform: translateX(-60px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(120px); opacity: 0; }
}

@keyframes packet-r {
  0%   { transform: translateX(60px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(-120px); opacity: 0; }
}

/* HUD on canvas */
.hud {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  padding: 0.5rem 0.75rem;
  background: rgba(5,6,7,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

.hud-tl { top: 24px; left: 24px; }
.hud-tr { top: 24px; right: 24px; }
.hud-bl { bottom: 24px; left: 24px; }
.hud-br { bottom: 24px; right: 24px; }

.hud-key {
  color: var(--text-3);
}

.hud-val {
  color: var(--white);
  font-weight: 500;
}

.hud-val.live {
  color: var(--accent-amber);
  position: relative;
}

.hud-val.live::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-amber);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse-dot 1.4s ease-in-out infinite;
  box-shadow: 0 0 6px var(--accent-amber);
}

/* hero strip */
.hero-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--ff-mono);
}

.strip-item {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}

.strip-num {
  color: var(--white);
  font-weight: 500;
  font-size: 0.85rem;
}

.strip-sep {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ============== SECTIONS — GENERIC ============== */
.section {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.section-rule {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--text-3);
  margin-bottom: 3.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-transform: uppercase;
}

.section-rule span:first-child {
  color: var(--white);
  font-weight: 500;
}

.section-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--text-2);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 1.5rem;
  max-width: 26ch;
}

.section-sub {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.section-lede {
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 64ch;
  margin-bottom: 2rem;
}

.section-lede + .section-lede {
  margin-top: -1rem;
}

.section-pull {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.3;
  color: var(--white);
  text-align: center;
  max-width: 32ch;
  margin: 4rem auto 0;
  padding: 3rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.section-pull::before,
.section-pull::after {
  content: "— • —";
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: var(--text-3);
  margin: 0 0 1.5rem;
}

.section-pull::after {
  margin: 1.5rem 0 0;
}

.section-pull-en + .section-pull-sub {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  text-transform: uppercase;
  margin-top: -3rem;
  padding-bottom: 0;
  border: none;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============== SECTION : PROBLEM ============== */
.problem-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: stretch;
  margin-top: 4rem;
}

.problem-col {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.col-label {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--text-2);
  text-transform: uppercase;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}

.chip-list li {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  color: var(--text-2);
  text-transform: uppercase;
}

.chip-list-noisy li {
  background: rgba(255,255,255,0.015);
  animation: chip-jitter 8s ease-in-out infinite;
}

.chip-list-noisy li:nth-child(odd) { animation-delay: -2s; }
.chip-list-noisy li:nth-child(3n) { animation-delay: -4s; }

@keyframes chip-jitter {
  0%, 100% { transform: translate(0,0); opacity: 0.85; }
  50%      { transform: translate(-1px, 1px); opacity: 1; }
}

.chip-list-clean li {
  background: rgba(255,255,255,0.04);
  color: var(--white);
  border-color: var(--line-strong);
}

.col-meta {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.problem-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 90px;
}

.bridge-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}

.bridge-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem 0.8rem;
  border: 1px solid var(--white);
  background: var(--black);
  white-space: nowrap;
}

.bridge-mark {
  font-family: var(--ff-mono);
  letter-spacing: 0.3em;
  color: var(--white);
}

.bridge-label {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 0.75rem;
  color: var(--white);
}

/* ============== SECTION : AGENTS ============== */
.agents-header {
  max-width: 760px;
  margin-bottom: 4rem;
}

.section-eyebrow + .section-title {
  margin-top: 0;
}

.agents-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: stretch;
  position: relative;
}

.agent-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}

.agent-card:hover {
  border-color: var(--line-strong);
  background: var(--graphite-3);
}

.agent-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
}

.agent-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-bottom: 1px solid var(--white);
  border-right: 1px solid var(--white);
}

.agent-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.agent-id {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
}

.agent-role {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 0.95rem;
  color: var(--white);
}

.agent-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}

.agent-list li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--white);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.agent-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.agent-list li span {
  color: var(--text-3);
  font-family: var(--ff-mono);
}

.agent-card-foot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
  text-transform: uppercase;
}

.dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 6px var(--accent-blue);
  animation: pulse-dot 2s ease-in-out infinite;
}

.contract-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 240px;
}

.pillar-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}

.pillar-card {
  background: var(--black);
  border: 1px solid var(--white);
  padding: 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
  box-shadow: 0 0 60px rgba(110,168,255,0.06);
}

.pillar-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  color: var(--text-2);
  text-transform: uppercase;
}

.pillar-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.pillar-list li {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--white);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pillar-list li:last-child {
  border-bottom: none;
}

.pillar-mark {
  font-family: var(--ff-mono);
  letter-spacing: 0.4em;
  color: var(--text-2);
  margin-top: 0.5rem;
}

/* ============== SECTION : SECURITY ============== */
.security-header {
  max-width: 760px;
  margin-bottom: 4rem;
}

.security-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 2rem;
}

.sec-col {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 2rem;
}

.sec-col-center {
  background:
    linear-gradient(180deg, var(--graphite-2) 0%, #18191c 100%);
  border-color: var(--line-strong);
  position: relative;
}

.sec-col-center::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(110,168,255,0.06), transparent 60%);
  pointer-events: none;
}

.sec-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
  font-family: var(--ff-mono);
}

.sec-col-num {
  color: var(--text-3);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
}

.sec-col-name {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  font-weight: 500;
}

.sec-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sec-list li {
  font-size: 0.92rem;
  color: var(--white);
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sec-list li:last-child { border-bottom: none; }

.sec-list-actions li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.88rem;
}

.action-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  padding: 0.25rem 0.55rem;
  background: rgba(110,168,255,0.1);
  border: 1px solid rgba(110,168,255,0.3);
  color: var(--accent-blue);
  min-width: 96px;
  text-align: center;
}

.action-tag.warn {
  background: rgba(176,72,72,0.1);
  border-color: rgba(176,72,72,0.4);
  color: var(--accent-warn);
}

/* ============== SECTION : FLOW ============== */
.flow-pipeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 1rem;
  margin-top: 4rem;
  align-items: stretch;
}

.flow-step {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  transition: all .35s var(--ease);
}

.flow-step:hover {
  border-color: var(--white);
  background: var(--graphite-3);
  transform: translateY(-2px);
}

.flow-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-mono);
}

.flow-num {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.05em;
}

.flow-tag {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--text-2);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line-strong);
}

.flow-step-title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--white);
  letter-spacing: -0.005em;
}

.flow-step-text {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
  flex: 1;
}

.flow-step-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-3);
}

.flow-arrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-2);
}

.arrow-line {
  width: 18px;
  height: 1px;
  background: var(--line-strong);
}

.arrow-head {
  font-size: 1rem;
  color: var(--white);
}

/* ============== SECTION : DEMO ============== */
.demo-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  margin-top: 4rem;
  align-items: stretch;
}

.terminal {
  background: #08090b;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  font-family: var(--ff-mono);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 30px 80px rgba(0,0,0,0.5);
}

.terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  background: var(--graphite-2);
  border-bottom: 1px solid var(--line);
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2a2e33;
}

.terminal-dots span:first-child { background: #5e646d; }

.terminal-title {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
}

.terminal-status {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--accent-good);
}

.terminal-body {
  padding: 1.5rem 1.5rem 1rem;
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.7;
  min-height: 460px;
}

.t-line {
  margin-bottom: 0.6rem;
  opacity: 0;
  animation: line-in .4s var(--ease) forwards;
}

@keyframes line-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.t-actor {
  display: inline-block;
  letter-spacing: 0.18em;
  font-weight: 500;
  margin-right: 0.6rem;
}

.t-actor.emitter { color: var(--accent-amber); }
.t-actor.receiver { color: var(--accent-blue); }
.t-actor.synapse { color: var(--white); }

.t-body { color: var(--text-2); }
.t-key { color: var(--white); }

.t-line.system {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--text-3);
  border-top: 1px dashed var(--line);
  padding-top: 0.7rem;
  margin-top: 0.7rem;
  text-transform: uppercase;
}

.t-line.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  margin: 0.8rem 0;
  padding: 0;
}

.t-line.final {
  color: var(--accent-good);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.terminal-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--graphite-2);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--white);
}

.prompt {
  color: var(--accent-good);
  font-weight: 500;
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--white);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.terminal-replay {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  border: 1px solid var(--line);
  text-transform: uppercase;
  transition: all .25s var(--ease);
}

.terminal-replay:hover {
  color: var(--white);
  border-color: var(--white);
}

.replay-icon {
  display: inline-block;
  font-size: 1rem;
}

/* result panel */
.demo-result {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

.demo-result::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
}

.demo-result::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-bottom: 1px solid var(--white);
  border-right: 1px solid var(--white);
}

.result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
}

.result-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--white);
  font-weight: 500;
}

.result-id {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-3);
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.result-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.95rem;
  color: var(--white);
}

.result-list li:last-child { border-bottom: none; }

.result-num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--white);
  min-width: 24px;
}

.result-zero .result-num {
  color: var(--accent-good);
}

.result-zero {
  color: var(--accent-good);
}

.result-confidence {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--black);
  border: 1px solid var(--line);
  font-family: var(--ff-mono);
}

.conf-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
}

.conf-bar {
  height: 4px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.conf-fill {
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--white));
  animation: conf-load 1.4s var(--ease) both;
}

@keyframes conf-load {
  from { width: 0; }
  to { width: var(--w); }
}

.conf-val {
  font-weight: 500;
  color: var(--white);
}

.result-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  text-transform: uppercase;
}

.result-pending {
  color: var(--accent-amber);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.result-pending::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 6px var(--accent-amber);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* ============== ADVANCED SIMULATION LAB ============== */
.syn-lab {
  margin-top: 4rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)),
    rgba(5,6,7,0.76);
  box-shadow: 0 34px 100px rgba(0,0,0,0.55);
  position: relative;
  overflow: hidden;
}

.syn-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.023) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.023) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 52% 20%, #000 25%, transparent 78%);
  pointer-events: none;
}

.lab-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem;
  background: rgba(16,18,20,0.82);
  border-bottom: 1px solid var(--line);
}

.lab-kicker {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--text-2);
}

.lab-head h3 {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--white);
}

.lab-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--black);
}

.seg-btn {
  min-height: 38px;
  padding: 0 0.9rem;
  border-right: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seg-btn:last-child { border-right: 0; }

.seg-btn.active {
  color: var(--white);
  background: rgba(110,168,255,0.12);
  box-shadow: inset 0 -1px 0 var(--accent-blue);
}

.toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toggle-line input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-blue);
}

.lab-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr);
  gap: 1px;
  background: var(--line);
}

.lab-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006)),
    #08090b;
  min-height: 420px;
  padding: 1.2rem;
  position: relative;
}

.lab-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(255,255,255,0.35);
  border-right: 1px solid rgba(255,255,255,0.35);
  pointer-events: none;
}

.lab-panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.panel-count.good { color: var(--accent-good); }
.panel-count.warn { color: var(--accent-amber); }

.template-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.template-row button {
  min-height: 34px;
  padding: 0 0.45rem;
  border: 1px solid var(--line);
  color: var(--text-2);
  background: rgba(255,255,255,0.02);
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}

.template-row button:hover {
  color: var(--white);
  border-color: rgba(244,246,248,0.34);
  background: rgba(110,168,255,0.08);
}

.field-block {
  display: grid;
  gap: 0.55rem;
}

.field-block > span,
.input-grid label > span,
.req-group label > span {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-block textarea,
.input-grid select,
.requirements-panel select,
.requirements-panel input[type="range"] {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.8);
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  outline: none;
}

.field-block textarea {
  min-height: 250px;
  padding: 0.95rem;
  resize: vertical;
  line-height: 1.55;
}

.field-block textarea:focus,
.input-grid select:focus,
.requirements-panel select:focus {
  border-color: rgba(110,168,255,0.58);
  box-shadow: 0 0 0 1px rgba(110,168,255,0.18);
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.input-grid label,
.req-group label {
  display: grid;
  gap: 0.45rem;
  color: var(--text-2);
  font-size: 0.84rem;
}

.input-grid select,
.requirements-panel select {
  height: 42px;
  padding: 0 0.7rem;
}

.policy-mode {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(16,18,20,0.58);
}

.requirements-panel.is-imposed {
  box-shadow: inset 0 0 0 1px rgba(214,166,79,0.24);
}

.requirements-panel.is-imposed .policy-mode {
  border-color: rgba(214,166,79,0.34);
  background: rgba(214,166,79,0.055);
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.req-group {
  display: grid;
  gap: 0.72rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.5);
}

.req-title {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--white);
  text-transform: uppercase;
}

.req-group input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-right: 0.45rem;
  accent-color: var(--accent-blue);
}

.req-group input[disabled],
.req-group select[disabled],
.req-group input[disabled] + span {
  opacity: 0.7;
}

.req-group input[type="range"] {
  accent-color: var(--accent-blue);
}

.req-group b[data-confidence-label] {
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 500;
}

.lab-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.agents-panel,
.result-panel {
  min-height: 520px;
}

.agent-stage {
  position: relative;
  min-height: 190px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px),
    rgba(16,18,20,0.42);
  background-size: 32px 32px;
  overflow: hidden;
}

.agent-node,
.agent-core-node {
  position: absolute;
  top: 50%;
  width: 112px;
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: rgba(5,6,7,0.88);
  transform: translateY(-50%);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--text-2);
}

.emitter-node { left: 6%; }
.receiver-node { right: 6%; }

.agent-core-node {
  left: 50%;
  width: 124px;
  border-color: rgba(110,168,255,0.44);
  color: var(--white);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 28px rgba(110,168,255,0.08);
}

.agent-beam {
  position: absolute;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,168,255,0.82), transparent);
  animation: beam-negotiate 2.2s linear infinite;
}

.beam-left { left: 24%; width: 23%; }
.beam-right { right: 24%; width: 23%; animation-delay: .45s; }

.agent-log {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 250px;
  max-height: 340px;
  overflow: auto;
  padding: 0.9rem;
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.72);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  line-height: 1.55;
}

.agent-log.masked {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-3);
}

.agent-log p {
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255,255,255,0.055);
  background: rgba(16,18,20,0.48);
  animation: line-in .35s var(--ease) both;
}

.agent-log .emitter { color: var(--accent-amber); }
.agent-log .receiver { color: var(--accent-blue); }
.agent-log .synapse { color: var(--white); }
.agent-log .warning { color: var(--accent-warn); }
.agent-log .accepted { color: var(--accent-good); }
.agent-log .muted-line {
  color: var(--text-3);
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}

.result-metrics div {
  min-height: 92px;
  padding: 0.85rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.55);
}

.result-metrics span {
  display: block;
  margin-bottom: 0.65rem;
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  color: var(--text-3);
  text-transform: uppercase;
}

.result-metrics b {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--white);
}

.contract-preview,
.authorized-preview {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(16,18,20,0.5);
}

.contract-preview dl {
  margin-top: 0.85rem;
  display: grid;
}

.contract-preview div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--ff-mono);
  font-size: 0.76rem;
}

.contract-preview div:last-child { border-bottom: none; }

.contract-preview dt {
  color: var(--text-2);
}

.contract-preview dd {
  color: var(--white);
}

.authorized-preview ul {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.55rem;
}

.authorized-preview li {
  position: relative;
  padding-left: 1rem;
  color: var(--text-2);
  font-size: 0.88rem;
}

.authorized-preview li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  background: var(--accent-good);
}

@keyframes beam-negotiate {
  0% { opacity: 0.18; transform: scaleX(0.74); }
  50% { opacity: 1; transform: scaleX(1.05); }
  100% { opacity: 0.18; transform: scaleX(0.74); }
}

/* ============== SECTION : OUTPUTS ============== */
.outputs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 4rem;
}

.out-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem 1.2rem;
  background: var(--graphite-2);
  border: 1px solid var(--line);
  transition: all .3s var(--ease);
}

.out-card:hover {
  background: var(--graphite-3);
  border-color: var(--white);
  transform: translateY(-2px);
}

.out-num {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
}

.out-name {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.005em;
}

/* ============== SECTION : ARCH ============== */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 4rem;
}

.arch-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

.arch-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--text-2);
  border-right: 1px solid var(--text-2);
}

.arch-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.arch-num {
  font-family: var(--ff-mono);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--accent-blue);
  font-weight: 500;
}

.arch-name {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--white);
}

.arch-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.arch-list li {
  font-size: 0.9rem;
  color: var(--text-2);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.arch-list li:last-child { border-bottom: none; }

/* ============== SECTION : CONTRACT ============== */
.contract-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 2rem;
}

.contract-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2rem;
  border: 1px solid var(--line);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  border-bottom: 1px solid var(--line);
}

.meta-row:last-child { border-bottom: none; }

.meta-row span:first-child { color: var(--text-2); }
.meta-row span:last-child { color: var(--white); font-weight: 500; }

.contract-doc {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  position: relative;
  font-family: var(--ff-mono);
}

.contract-doc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255,255,255,0.015) 28px, rgba(255,255,255,0.015) 29px);
}

.doc-head {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: var(--graphite-3);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
}

.doc-id { color: var(--text-2); }
.doc-state { color: var(--accent-good); font-weight: 500; }

.doc-fields {
  padding: 0.5rem 0;
}

.doc-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
}

.doc-row dt {
  color: var(--text-2);
  letter-spacing: 0.06em;
}

.doc-row dd {
  color: var(--white);
}

.doc-row-final {
  background: rgba(214,166,79,0.05);
}

.doc-row-final dd {
  color: var(--accent-amber);
  font-weight: 500;
}

/* ============== SECTION : USE CASES ============== */
.uc-list {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.uc-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 2rem;
  padding: 2rem 1rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background .3s var(--ease);
}

.uc-row:hover {
  background: rgba(255,255,255,0.015);
}

.uc-num {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 2.4rem;
  color: var(--text-3);
  letter-spacing: 0.02em;
  transition: color .3s var(--ease);
}

.uc-row:hover .uc-num { color: var(--white); }

.uc-content { display: flex; flex-direction: column; gap: 0.4rem; }

.uc-title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--white);
}

.uc-text {
  font-size: 0.95rem;
  color: var(--text-2);
  max-width: 60ch;
}

.uc-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.uc-tags span {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--text-2);
}

/* ============== SECTION : INTERFACE ============== */
.iface-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 4rem;
}

.iface-card {
  background: #08090b;
  border: 1px solid var(--line);
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--ff-mono);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.iface-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: var(--graphite-2);
  border-bottom: 1px solid var(--line);
}

.iface-tag {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
}

.iface-name {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--white);
  font-weight: 500;
}

.iface-list {
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.iface-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
}

.iface-list li:last-child { border-bottom: none; }

.iface-list li span:first-child { color: var(--text-2); }
.iface-list li span:last-child {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.iface-list .good { color: var(--accent-good); }
.iface-list .warn { color: var(--accent-amber); }
.iface-list .bad { color: var(--accent-bad); }

.iface-bar {
  height: 3px;
  background: var(--line);
  position: relative;
}

.bar-segment {
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--white));
  animation: conf-load 1.6s var(--ease) both;
}

/* ============== SECTION : FINAL / CONTACT ============== */
.section-final {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.final-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 2rem;
}

.final-title {
  max-width: 32ch;
}

.final-promise {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
  text-align: left;
}

.logo-mark-final {
  height: 22px;
  margin-bottom: 1.2rem;
}

.logo-mark-final .logo-line {
  width: 32px;
  height: 1.5px;
}

.logo-mark-final .logo-dot {
  width: 8px;
  height: 8px;
}

.final-brand {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  letter-spacing: 0.32em;
  color: var(--white);
  margin-bottom: 1rem;
}

.final-claim {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--white);
}

.final-claim-fr {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  margin-top: 0.5rem;
  text-transform: uppercase;
}

.final-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

.final-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--white), var(--accent-amber));
  opacity: 0.4;
}

.final-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
}

.final-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--white);
  font-weight: 500;
}

.final-id {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-3);
}

.final-intro {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
}

.final-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.final-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
  text-transform: uppercase;
}

.final-form input,
.final-form textarea {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--white);
  padding: 0.85rem 1rem;
  letter-spacing: 0;
  text-transform: none;
  resize: vertical;
  transition: border-color .25s var(--ease);
}

.final-form input::placeholder,
.final-form textarea::placeholder {
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}

.final-form input:focus,
.final-form textarea:focus {
  outline: none;
  border-color: var(--white);
}

.form-status {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.8rem 1rem;
  background: rgba(125,167,123,0.06);
  border: 1px solid rgba(125,167,123,0.3);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent-good);
}

.form-status.show {
  display: flex;
}

/* ============== FOOTER ============== */
.site-footer {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-tag {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  text-transform: uppercase;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}

.footer-col-title {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: var(--text-3);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col li,
.footer-col a {
  color: var(--text-2);
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: var(--white);
}

.footer-meta li {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  padding: 0.3rem 0;
}

.footer-meta li span:first-child { color: var(--text-3); }
.footer-meta li span:last-child { color: var(--white); }
.footer-meta .ok { color: var(--accent-good) !important; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
}

.footer-promise {
  letter-spacing: 0.32em;
  color: var(--text-2);
}

/* ============== ANIMATIONS ON SCROLL ============== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============== NAV TOGGLE (mobile) ============== */
.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  margin-left: 0.6rem;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}

.nav-toggle:hover { border-color: var(--white); }

.nav-toggle span {
  width: 16px;
  height: 1px;
  background: var(--white);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav .active {
  color: var(--white);
}
.site-nav .active::after {
  transform: scaleX(1);
}

/* ============== SECTION : SECTORS / MISSION SWITCHBOARD ============== */
.section-sectors {
  position: relative;
  overflow: hidden;
}

.section-sectors::before {
  content: "";
  position: absolute;
  inset: 8% -12% auto;
  height: 420px;
  background:
    radial-gradient(circle at 20% 45%, rgba(110,168,255,0.08), transparent 28%),
    radial-gradient(circle at 74% 36%, rgba(214,166,79,0.06), transparent 30%);
  pointer-events: none;
}

.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3.5rem;
}

.sector-card {
  position: relative;
  min-height: 280px;
  padding: 1.5rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    var(--graphite-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}

.sector-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}

.sector-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244,246,248,0.34);
  background: var(--graphite-3);
}

.sector-card:hover::before {
  transform: translateX(120%);
}

.sector-index {
  display: inline-flex;
  margin-bottom: 2rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--accent-blue);
}

.sector-card h3 {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 1rem;
}

.sector-card p {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
}

.sector-tags {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sector-tags span {
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
}

.mission-switchboard {
  display: grid;
  grid-template-columns: 280px minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 1rem;
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.62);
  box-shadow: 0 30px 90px rgba(0,0,0,0.42);
}

.scenario-rail {
  display: grid;
  background: var(--graphite-2);
  border-right: 1px solid var(--line);
}

.scenario-btn {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "num title"
    "num detail";
  gap: 0 0.75rem;
  padding: 1.15rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--text-2);
  transition: color .25s var(--ease), background .25s var(--ease);
}

.scenario-btn:last-child { border-bottom: none; }

.scenario-btn span {
  grid-area: num;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--text-3);
}

.scenario-btn strong {
  grid-area: title;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 500;
}

.scenario-btn small {
  grid-area: detail;
  color: var(--text-3);
  font-size: 0.78rem;
}

.scenario-btn:hover,
.scenario-btn.active {
  color: var(--white);
  background: rgba(110,168,255,0.07);
}

.scenario-btn.active {
  box-shadow: inset 2px 0 0 var(--accent-blue);
}

.mission-console {
  min-height: 520px;
  padding: 1rem;
  background: #07080a;
  position: relative;
  overflow: hidden;
}

.mission-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 38%, #000 35%, transparent 78%);
  pointer-events: none;
}

.mission-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  background: rgba(16,18,20,0.82);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-2);
}

.mission-head b {
  color: var(--accent-good);
  font-weight: 500;
}

.mission-map {
  position: relative;
  z-index: 1;
  min-height: 335px;
  margin: 1rem 0;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at 50% 50%, rgba(110,168,255,0.14), transparent 30%),
    radial-gradient(circle at 22% 28%, rgba(214,166,79,0.08), transparent 20%),
    rgba(16,18,20,0.4);
  overflow: hidden;
}

.map-node {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--white);
  background: var(--black);
  box-shadow: 0 0 22px rgba(244,246,248,0.28);
  animation: node-pulse 2.6s ease-in-out infinite;
}

.map-node::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
}

.n1 { left: 18%; top: 28%; }
.n2 { left: 48%; top: 48%; animation-delay: .4s; }
.n3 { right: 18%; top: 24%; animation-delay: .8s; }
.n4 { right: 28%; bottom: 18%; animation-delay: 1.2s; }

.map-link {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,168,255,0.82), transparent);
  transform-origin: left center;
  animation: link-flow 2.8s linear infinite;
}

.l1 { left: 20%; top: 31%; width: 34%; transform: rotate(27deg); }
.l2 { left: 50%; top: 50%; width: 34%; transform: rotate(-24deg); }
.l3 { left: 51%; top: 52%; width: 25%; transform: rotate(36deg); }

.map-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(110,168,255,0.12), transparent);
  transform: translateY(-100%);
  animation: mission-scan 4s linear infinite;
}

.mission-feed {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.45rem;
  min-height: 92px;
  padding: 0.85rem;
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.72);
  font-family: var(--ff-mono);
  font-size: 0.76rem;
  color: var(--text-2);
}

.mission-feed p {
  animation: line-in .35s var(--ease) both;
}

.mission-feed strong {
  color: var(--white);
}

.mission-panel {
  padding: 1.35rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    var(--graphite-2);
  border-left: 1px solid var(--line);
}

.mission-panel h3 {
  margin: 1.4rem 0 0.85rem;
  font-family: var(--ff-display);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--white);
}

.mission-panel p {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
}

.mission-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin: 1.4rem 0;
}

.mission-kpis div {
  padding: 0.9rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.48);
}

.mission-kpis span {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  color: var(--text-3);
}

.mission-kpis b {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--white);
}

.mission-rules {
  display: grid;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.mission-rules li {
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.55;
  position: relative;
  padding-left: 1rem;
}

.mission-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  background: var(--accent-blue);
}

.uc-detail.is-hidden {
  display: none;
}

@keyframes node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.28); opacity: 1; }
}

@keyframes link-flow {
  0% { opacity: 0.18; filter: brightness(0.8); }
  50% { opacity: 1; filter: brightness(1.35); }
  100% { opacity: 0.18; filter: brightness(0.8); }
}

@keyframes mission-scan {
  to { transform: translateY(100%); }
}

/* ============== SUBHERO (sub-pages) ============== */
.subhero {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--section-py) + 4rem) var(--gutter) var(--section-py);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-transform: uppercase;
}

.crumbs a {
  color: var(--text-2);
  transition: color .25s var(--ease);
}

.crumbs a:hover { color: var(--white); }

.crumbs span:last-child { color: var(--white); font-weight: 500; }

.subhero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: end;
}

.subhero-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: 1rem 0 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #b8c0cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subhero-sub {
  color: var(--text-2);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 56ch;
}

.subhero-meta {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 0;
}

.subhero-meta .meta-row {
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.subhero-meta .meta-row:last-child { border-bottom: none; }

.meta-ok { color: var(--accent-good) !important; }

/* ============== ANATOMY (protocol) ============== */
.anatomy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.anatomy-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all .3s var(--ease);
}

.anatomy-card:hover {
  border-color: var(--white);
  background: var(--graphite-3);
  transform: translateY(-2px);
}

.anatomy-num {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--accent-blue);
}

.anatomy-card h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: 0.01em;
}

.anatomy-card p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* ============== LIFECYCLE ============== */
.lifecycle-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 3rem;
  position: relative;
}

.lifecycle-list::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.lc-step {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  transition: all .3s var(--ease);
}

.lc-step:hover {
  border-color: var(--white);
  background: var(--graphite-3);
}

.lc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-mono);
}

.lc-num {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.05em;
}

.lc-tag {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--accent-blue);
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(110,168,255,0.3);
  background: rgba(110,168,255,0.06);
}

.lc-step h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--white);
}

.lc-step p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
}

.lc-marker {
  position: absolute;
  top: 30px;
  right: 100%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--graphite-2);
  border: 1px solid var(--line-strong);
  transform: translateX(50%);
}

.lc-step:first-child .lc-marker { display: none; }

/* ============== CODE CARD ============== */
.code-card {
  background: #08090b;
  border: 1px solid var(--line);
  margin-top: 3rem;
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--ff-mono);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}

.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.2rem;
  background: var(--graphite-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}

.code-id { color: var(--text-2); }
.code-state { color: var(--accent-good); font-weight: 500; }

.code-body {
  padding: 1.5rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-2);
  overflow-x: auto;
  white-space: pre;
}

.code-body code {
  font-family: var(--ff-mono);
}

.ck { color: var(--white); }
.cs { color: var(--accent-blue); }
.cn { color: var(--accent-amber); }
.cm { color: var(--text-3); }

/* ============== SPECS GRID ============== */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

/* ============== USE CASE DETAIL ============== */
.uc-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
}

.uc-detail-grid-rev .uc-detail-text { order: 2; }
.uc-detail-grid-rev .uc-detail-flow { order: 1; }

.uc-detail-text { display: flex; flex-direction: column; gap: 1rem; }

.uc-detail-flow {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 0;
}

.flow-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 0.85rem;
}

.flow-row:last-child { border-bottom: none; }

.flow-label {
  color: var(--text-3);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

.flow-val { color: var(--white); }
.flow-val.warn { color: var(--accent-amber); }
.flow-val.good { color: var(--accent-good); }

.flow-final {
  background: rgba(125,167,123,0.06);
}

/* ============== FILTER BAR ============== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.filter-chip {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  transition: all .25s var(--ease);
  text-transform: uppercase;
}

.filter-chip:hover {
  color: var(--white);
  border-color: var(--line-strong);
}

.filter-chip.active {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* ============== THREAT GRID ============== */
.threat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.threat-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: all .3s var(--ease);
}

.threat-card:hover {
  border-color: var(--white);
  background: var(--graphite-3);
}

.threat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-mono);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.threat-num {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent-warn);
  letter-spacing: 0.1em;
}

.threat-tag {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line-strong);
}

.threat-card h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--white);
}

.threat-text {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}

.threat-resp {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--white);
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.threat-resp span {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--accent-good);
}

/* ============== LEVEL MATRIX ============== */
.level-matrix {
  margin-top: 3rem;
  border: 1px solid var(--line);
  background: var(--graphite-2);
}

.level-row {
  display: grid;
  grid-template-columns: 100px 200px 1fr 200px;
  gap: 1.5rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 0.92rem;
  color: var(--white);
}

.level-row:last-child { border-bottom: none; }

.level-head {
  background: var(--graphite-3);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
}

.level-tag {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  border: 1px solid;
  text-align: center;
  width: fit-content;
}

.level-tag.l1 { color: var(--text-2); border-color: var(--line-strong); }
.level-tag.l2 { color: var(--accent-good); border-color: rgba(125,167,123,0.4); background: rgba(125,167,123,0.06); }
.level-tag.l3 { color: var(--accent-blue); border-color: rgba(110,168,255,0.4); background: rgba(110,168,255,0.06); }
.level-tag.l4 { color: var(--accent-amber); border-color: rgba(214,166,79,0.4); background: rgba(214,166,79,0.08); }

.level-val {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  text-transform: uppercase;
}

/* ============== COMPLIANCE GRID ============== */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.comp-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all .3s var(--ease);
}

.comp-card:hover { border-color: var(--white); background: var(--graphite-3); }

.comp-num {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--accent-blue);
}

.comp-card h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--white);
}

.comp-card p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ============== ARCHITECTURE - STACK ============== */
.stack-diagram {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 3rem;
}

.stack-layer {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1rem;
  align-items: stretch;
}

.stack-bar {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  transition: all .3s var(--ease);
}

.stack-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-blue);
  opacity: 0.6;
}

.stack-layer:nth-child(1) .stack-bar::before { background: var(--accent-amber); }
.stack-layer:nth-child(2) .stack-bar::before { background: var(--accent-blue); }
.stack-layer:nth-child(3) .stack-bar::before { background: var(--accent-good); }
.stack-layer:nth-child(4) .stack-bar::before { background: var(--text-2); }

.stack-bar:hover {
  border-color: var(--white);
  background: var(--graphite-3);
}

.stack-tag {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--white);
  font-weight: 500;
}

.stack-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.stack-meta span {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--text-2);
  text-transform: uppercase;
}

.stack-spec {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: center;
}

.stack-spec p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ============== AGENT ROLES ============== */
.agent-roles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.role-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: all .3s var(--ease);
}

.role-card:hover {
  border-color: var(--white);
  background: var(--graphite-3);
  transform: translateY(-2px);
}

.role-num {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--accent-blue);
}

.role-card h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.role-card p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ============== DEPLOY ============== */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.deploy-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: all .3s var(--ease);
}

.deploy-card:hover { border-color: var(--white); background: var(--graphite-3); }

.deploy-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
}

.deploy-num {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-amber);
}

.deploy-tag {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--white);
  font-weight: 500;
}

.deploy-card h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--white);
}

.deploy-card p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.6;
}

.deploy-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.deploy-list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--white);
}

.deploy-list li span {
  color: var(--text-3);
  font-family: var(--ff-mono);
}

/* ============== CONNECTOR GRID ============== */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.conn-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all .3s var(--ease);
}

.conn-card:hover { border-color: var(--white); background: var(--graphite-3); }

.conn-num {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--accent-good);
}

.conn-card h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--white);
}

.conn-card p {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-2);
  text-transform: uppercase;
}

/* ============== INTERFACE TABS ============== */
.iface-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  background: var(--graphite-2);
}

.iface-tab {
  flex: 1;
  padding: 1rem 1.2rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: all .25s var(--ease);
  text-transform: uppercase;
  text-align: left;
  position: relative;
}

.iface-tab:last-child { border-right: none; }

.iface-tab:hover { color: var(--white); background: rgba(255,255,255,0.02); }

.iface-tab.active {
  color: var(--white);
  background: var(--graphite-3);
}

.iface-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--white);
}

.iface-screen {
  display: none;
  background: #08090b;
  border: 1px solid var(--line);
  font-family: var(--ff-mono);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.iface-screen.active {
  display: block;
}

.iface-screen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  background: var(--graphite-2);
  border-bottom: 1px solid var(--line);
}

.iface-screen-head .iface-tag {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
  margin-right: 0.7rem;
}

.iface-screen-head .iface-name {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--white);
  font-weight: 500;
}

.screen-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-2);
}

.screen-live {
  color: var(--accent-good);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.screen-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-good);
  box-shadow: 0 0 6px var(--accent-good);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.screen-live.live { color: var(--accent-amber); }
.screen-live.live::before { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber); }
.screen-live.good { color: var(--accent-good); }

.screen-body {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.screen-2col { grid-template-columns: 1fr 1fr; }
.screen-3col { grid-template-columns: 1fr 1.2fr 1fr; }

.screen-panel {
  background: #08090b;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 460px;
}

.screen-panel-mediator {
  background: linear-gradient(180deg, #0a0c0f 0%, #08090b 100%);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
}

.panel-count {
  color: var(--white);
  font-weight: 500;
}

.panel-count.warn { color: var(--accent-amber); }
.panel-count.good { color: var(--accent-good); }
.panel-count.live {
  color: var(--accent-amber);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.panel-count.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 6px var(--accent-amber);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

.panel-foot {
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.panel-divider {
  height: 1px;
  background: var(--line);
  margin: 0.4rem 0;
}

.panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.btn-small {
  padding: 0.55rem 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

/* file list */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.82rem;
  flex: 1;
  overflow-y: auto;
}

.file-list li {
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}

.file-list li:last-child { border-bottom: none; }

.ftype {
  color: var(--accent-blue);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.fname { color: var(--white); font-family: var(--ff-mono); font-size: 0.82rem; }
.fsize { color: var(--text-3); font-size: 0.72rem; letter-spacing: 0.05em; }
.fsens {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}
.fsens.warn { color: var(--accent-amber); border-color: rgba(214,166,79,0.4); background: rgba(214,166,79,0.06); }
.fsens.bad { color: var(--accent-bad); border-color: rgba(176,72,72,0.4); background: rgba(176,72,72,0.06); }

/* metric rows */
.metric-row {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  gap: 1rem;
  align-items: center;
  font-size: 0.82rem;
  padding: 0.4rem 0;
}

.metric-row span:first-child { color: var(--text-2); }

.metric-bar {
  height: 4px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.bar-fill {
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--white));
  animation: conf-load 1.4s var(--ease) both;
}

.bar-fill.warn { background: linear-gradient(90deg, var(--accent-amber), var(--accent-warn)); }
.bar-fill.good { background: linear-gradient(90deg, var(--accent-good), var(--white)); }

.metric-val {
  text-align: right;
  color: var(--white);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.recommend {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.recommend-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
  margin-bottom: 0.2rem;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recommend-list li {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--white);
}

.rec-tag {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  padding: 0.2rem 0.5rem;
  border: 1px solid;
  min-width: 80px;
  text-align: center;
}

.rec-tag.good { color: var(--accent-good); border-color: rgba(125,167,123,0.4); background: rgba(125,167,123,0.06); }
.rec-tag.warn { color: var(--accent-amber); border-color: rgba(214,166,79,0.4); background: rgba(214,166,79,0.08); }
.rec-tag.bad { color: var(--accent-bad); border-color: rgba(176,72,72,0.4); background: rgba(176,72,72,0.08); }

/* constraints / mediator */
.constraint-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.85rem;
}

.constraint-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: baseline;
  color: var(--white);
}

.cstate {
  font-size: 0.85rem;
  font-weight: 600;
}
.cstate.good { color: var(--accent-good); }
.cstate.warn { color: var(--accent-amber); }
.cstate.bad { color: var(--accent-bad); }

.mediator-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.med-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto;
  gap: 0.3rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
}

.med-label {
  grid-column: 1;
  grid-row: 1 / 3;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
  align-self: start;
}

.med-detail { color: var(--white); }
.med-resol {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.med-resol.good { color: var(--accent-good); }
.med-resol.bad { color: var(--accent-bad); }

.conflict-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 0;
}

.cbar-label { color: var(--text-2); letter-spacing: 0.18em; font-size: 0.7rem; }

.cbar-track {
  height: 4px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.cbar-fill {
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, var(--accent-amber), var(--accent-good));
  animation: conf-load 1.4s var(--ease) both;
}

.cbar-val { color: var(--white); font-weight: 500; }

/* category list */
.cat-row {
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
}

.cat-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}

.cat-tag.good { color: var(--accent-good); border-color: rgba(125,167,123,0.4); background: rgba(125,167,123,0.06); }
.cat-tag.warn { color: var(--accent-amber); border-color: rgba(214,166,79,0.4); background: rgba(214,166,79,0.06); }
.cat-tag.bad { color: var(--accent-bad); border-color: rgba(176,72,72,0.4); background: rgba(176,72,72,0.06); }

.cat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.cat-list li {
  font-size: 0.82rem;
  color: var(--white);
  padding: 0.3rem 0;
}

/* validation card */
.validation-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.val-row {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
  color: var(--white);
}

.val-row span:first-child {
  color: var(--text-2);
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}

.val-row .warn { color: var(--accent-amber); }
.val-row .good { color: var(--accent-good); }

.val-row-final {
  background: rgba(214,166,79,0.05);
  padding: 0.7rem 0.6rem;
  margin: 0 -0.6rem;
}

.val-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* signatures */
.signatures {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sig-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
  margin-bottom: 0.4rem;
}

.sig-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--white);
}

.sig-row .good { color: var(--accent-good); }
.sig-row .warn { color: var(--accent-amber); }

/* deliverables */
.deliv-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.88rem;
}

.deliv-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: baseline;
  color: var(--white);
}

.dlv-tag.good { color: var(--accent-good); }
.dlv-name { color: var(--white); }
.dlv-meta { color: var(--text-3); font-size: 0.74rem; letter-spacing: 0.05em; }

.footprint {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.footprint span {
  color: var(--text-2);
  letter-spacing: 0.22em;
}

.footprint code {
  font-family: var(--ff-mono);
  color: var(--accent-blue);
  font-size: 0.78rem;
  word-break: break-all;
  letter-spacing: 0.04em;
}

/* brief preview */
.brief-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  flex: 1;
}

.brief-page {
  background: #0d0f12;
  border: 1px solid var(--line);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}

.brief-line {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
}

.brief-line.w-40 { width: 40%; }
.brief-line.w-50 { width: 50%; }
.brief-line.w-60 { width: 60%; }
.brief-line.w-65 { width: 65%; }
.brief-line.w-70 { width: 70%; }
.brief-line.w-80 { width: 80%; }
.brief-line.w-90 { width: 90%; }

.brief-map {
  position: relative;
  height: 80px;
  background: rgba(110,168,255,0.05);
  border: 1px solid rgba(110,168,255,0.15);
  margin: 0.6rem 0;
}

.brief-hex {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--accent-blue);
  opacity: 0.6;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  left: 10%;
  top: 30%;
}

.brief-indicators {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 0.6rem 0;
}

.brief-ind {
  background: rgba(125,167,123,0.08);
  border: 1px solid rgba(125,167,123,0.25);
  padding: 0.4rem 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  text-align: center;
}

.brief-ind span:first-child { color: var(--text-2); letter-spacing: 0.05em; }
.brief-ind span:last-child { color: var(--accent-good); font-weight: 500; }

/* ============== CONTACT PAGE ============== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  margin-top: 2rem;
  align-items: start;
}

.contact-help {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.help-title {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--text-2);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.help-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.help-list li {
  display: flex;
  gap: 0.8rem;
  font-size: 0.95rem;
  color: var(--white);
}

.help-list li span {
  color: var(--text-3);
  font-family: var(--ff-mono);
}

.process-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  list-style: none;
}

.process-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--white);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.process-num {
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-strong);
  color: var(--accent-blue);
  min-width: 38px;
  text-align: center;
}

.final-card-large {
  padding: 2.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.final-form select {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--white);
  padding: 0.85rem 1rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238D949E' d='M6 9L1 4h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.final-form select:focus {
  outline: none;
  border-color: var(--white);
}

.final-form .form-error {
  display: none;
  color: var(--accent-bad);
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  margin-top: 0.3rem;
  text-transform: uppercase;
  text-align: right;
  padding-right: 0.2rem;
}

.final-form label.invalid input,
.final-form label.invalid select,
.final-form label.invalid textarea {
  border-color: var(--accent-bad);
}

.final-form label.invalid .form-error {
  display: block;
}

.checkbox-label {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  gap: 0.7rem !important;
  align-items: start !important;
  flex-direction: row !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--black);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  margin: 0;
  position: relative;
  flex: none;
  padding: 0;
  transition: all .25s var(--ease);
}

.checkbox-label input[type="checkbox"]:checked {
  background: var(--white);
  border-color: var(--white);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--black);
  font-weight: 600;
}

.checkbox-text {
  font-family: var(--ff-body) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0 !important;
  color: var(--text-2) !important;
  line-height: 1.5;
  text-transform: none !important;
}

.form-error-summary {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.8rem 1rem;
  background: rgba(176,72,72,0.06);
  border: 1px solid rgba(176,72,72,0.3);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent-bad);
}

.form-error-summary.show { display: flex; }

/* channels */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.channel-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: all .3s var(--ease);
}

.channel-card:hover { border-color: var(--white); background: var(--graphite-3); }

.channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
}

.channel-num {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-blue);
}

.channel-tag {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
}

.channel-card h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--white);
}

.channel-card p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.6;
}

.channel-target {
  font-family: var(--ff-mono) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  color: var(--accent-blue) !important;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

/* legal */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.legal-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.legal-title {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--text-2);
  text-transform: uppercase;
}

.legal-block p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ============== FUNCTIONAL DEMO PAGE ============== */
.demo-subhero {
  padding-bottom: 4rem;
}

.mvp-section {
  padding-top: 2rem;
}

.state-machine {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 2.5rem 0;
  background: var(--line);
  border: 1px solid var(--line);
  overflow: hidden;
}

.state-machine span {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 0.7rem;
  background: #08090b;
  color: var(--text-3);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  text-align: center;
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}

.state-machine span.done {
  color: var(--accent-good);
  background: rgba(125,167,123,0.08);
}

.state-machine span.active {
  color: var(--white);
  background: rgba(110,168,255,0.11);
  box-shadow: inset 0 -2px 0 var(--accent-blue);
}

.mvp-layout,
.negotiation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.negotiation-layout {
  margin-top: 1rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
}

.mvp-panel {
  position: relative;
  z-index: 2;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008)),
    #08090b;
  box-shadow: 0 24px 80px rgba(0,0,0,0.38);
}

.mvp-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  border-top: 1px solid rgba(255,255,255,0.34);
  border-right: 1px solid rgba(255,255,255,0.34);
  pointer-events: none;
}

.mvp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(16,18,20,0.74);
}

.mvp-panel-head span,
.doc-database header span,
.contract-box header span,
.trace-title {
  display: block;
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mvp-panel-head h2 {
  margin-top: 0.35rem;
  color: var(--white);
  font-family: var(--ff-display);
  font-size: 1.18rem;
  font-weight: 400;
}

.mvp-panel-head b {
  flex: 0 0 auto;
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.emitter-space,
.receiver-space,
.negotiation-space,
.final-space,
.trace-space {
  padding: 0 1.1rem 1.1rem;
}

.emitter-space > *:not(.mvp-panel-head),
.receiver-space > *:not(.mvp-panel-head),
.negotiation-space > *:not(.mvp-panel-head),
.final-space > *:not(.mvp-panel-head),
.trace-space > *:not(.mvp-panel-head) {
  margin-top: 1rem;
}

.drop-zone {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 110px;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  background:
    radial-gradient(circle at 8% 50%, rgba(110,168,255,0.13), transparent 24%),
    rgba(5,6,7,0.62);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}

.drop-zone.dragging {
  border-color: var(--accent-blue);
  background: rgba(110,168,255,0.08);
  transform: translateY(-2px);
}

.drop-zone input {
  display: none;
}

.drop-zone::before {
  content: "TXT";
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  background: var(--graphite-2);
}

.drop-zone strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
}

.drop-zone span {
  color: var(--text-2);
  font-size: 0.86rem;
}

.quick-doc,
.mvp-actions,
.final-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.mvp-field {
  display: grid;
  gap: 0.5rem;
}

.mvp-field span,
.rule-controls label span,
.receiver-options label span {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mvp-field textarea,
.rule-controls input[type="number"],
.receiver-options select {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.82);
  color: var(--white);
  outline: none;
}

.mvp-field textarea {
  padding: 0.9rem;
  resize: vertical;
  min-height: 130px;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  line-height: 1.55;
}

.mvp-field textarea:focus,
.rule-controls input[type="number"]:focus,
.receiver-options select:focus {
  border-color: rgba(110,168,255,0.56);
  box-shadow: 0 0 0 1px rgba(110,168,255,0.14);
}

.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.rule-controls,
.receiver-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(16,18,20,0.48);
}

.rule-controls label,
.receiver-options label,
.visibility-line label {
  display: grid;
  gap: 0.45rem;
  color: var(--text-2);
  font-size: 0.84rem;
}

.rule-controls label:has(input[type="checkbox"]),
.receiver-options label:has(input[type="checkbox"]),
.visibility-line label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.rule-controls input[type="number"],
.receiver-options select {
  height: 40px;
  padding: 0 0.75rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
}

.rule-controls input[type="checkbox"],
.receiver-options input[type="checkbox"],
.visibility-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-blue);
}

.doc-database {
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.56);
}

.doc-database header,
.contract-box header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}

.doc-database header b {
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 500;
}

.document-list {
  max-height: 245px;
  overflow: auto;
}

.doc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.doc-item:last-child { border-bottom: none; }

.doc-item strong {
  display: block;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
}

.doc-item span {
  display: block;
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
}

.doc-badge {
  align-self: start;
  padding: 0.25rem 0.45rem;
  border: 1px solid rgba(110,168,255,0.34);
  color: var(--accent-blue) !important;
}

.visibility-line {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.5);
}

.agent-circuit {
  position: relative;
  min-height: 120px;
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  align-items: center;
  gap: 0;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px),
    rgba(5,6,7,0.56);
  background-size: 30px 30px;
}

.circuit-agent,
.circuit-core {
  min-height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: rgba(8,9,11,0.88);
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  text-align: center;
}

.circuit-core {
  color: var(--white);
  border-color: rgba(110,168,255,0.48);
  box-shadow: inset 0 0 30px rgba(110,168,255,0.09);
}

.agent-circuit i {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,168,255,0.88), transparent);
  animation: beam-negotiate 2s linear infinite;
}

.agent-conversation {
  min-height: 520px;
  max-height: 640px;
  overflow: auto;
  padding: 0.9rem;
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.68);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.conversation-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(16,18,20,0.62);
  animation: line-in .35s var(--ease) both;
}

.conversation-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--text-2);
}

.conversation-card.emitter header b { color: var(--accent-amber); }
.conversation-card.receiver header b { color: var(--accent-blue); }
.conversation-card.accepted header b { color: var(--accent-good); }

.conversation-card p {
  padding: 0.75rem 0.8rem 0;
  color: var(--text-2);
  font-size: 0.88rem;
}

.conversation-card pre {
  margin: 0.75rem;
  padding: 0.85rem;
  overflow: auto;
  background: var(--black);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(244,246,248,0.88);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  line-height: 1.55;
}

.conversation-card.hide-json pre {
  display: none;
}

.conversation-masked,
.empty-state {
  margin: auto;
  color: var(--text-3);
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.82rem;
}

.contract-box,
.final-answer {
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.64);
}

.contract-box header button {
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
}

.contract-box pre {
  min-height: 300px;
  max-height: 420px;
  overflow: auto;
  padding: 1rem;
  color: rgba(244,246,248,0.88);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  line-height: 1.55;
}

.final-answer {
  padding: 1rem;
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.75;
}

.final-answer ul {
  display: grid;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.final-answer li {
  position: relative;
  padding-left: 1rem;
  color: var(--text-2);
}

.final-answer li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  background: var(--accent-good);
}

.trace-space {
  margin-top: 1rem;
}

.trace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
  gap: 1rem;
}

.retrieved-passages,
.trace-log {
  min-height: 240px;
  max-height: 360px;
  overflow: auto;
  padding: 0.9rem;
  border: 1px solid var(--line);
  background: rgba(5,6,7,0.58);
}

.passage-card {
  padding: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.passage-card:last-child { border-bottom: none; }

.passage-card strong {
  color: var(--white);
  font-size: 0.88rem;
}

.passage-card p {
  margin-top: 0.35rem;
  color: var(--text-2);
  font-size: 0.84rem;
}

.trace-log {
  display: grid;
  gap: 0.5rem;
  list-style-position: inside;
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
}

.trace-log li {
  padding: 0.55rem;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(16,18,20,0.42);
}

/* ============== SIMPLE DEMO REDESIGN ============== */
.demo-landing {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: 4rem;
  align-items: center;
  padding: calc(var(--section-py) + 3rem) var(--gutter) 4rem;
}

.demo-landing-copy h1 {
  font-family: var(--ff-display);
  font-size: clamp(4rem, 8vw, 7.4rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 1rem 0 1.4rem;
}

.demo-landing-copy p {
  color: var(--text-2);
  font-size: 1.08rem;
  max-width: 54ch;
}

.demo-landing-visual {
  min-height: 520px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 50% 50%, rgba(110,168,255,0.12), transparent 34%),
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px),
    rgba(5,6,7,0.64);
  background-size: auto, 38px 38px, 38px 38px, auto;
  overflow: hidden;
  position: relative;
}

.demo-orbit {
  position: absolute;
  inset: 10%;
}

.orbit-agent,
.orbit-core {
  position: absolute;
  top: 50%;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: rgba(5,6,7,0.85);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  box-shadow: 0 0 42px rgba(110,168,255,0.08);
}

.orbit-left { left: 4%; transform: translateY(-50%); }
.orbit-right { right: 4%; transform: translateY(-50%); }

.orbit-core {
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(110,168,255,0.45);
  box-shadow: inset 0 0 38px rgba(110,168,255,0.12), 0 0 70px rgba(110,168,255,0.08);
}

.orbit-line {
  position: absolute;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,168,255,0.9), transparent);
  animation: beam-negotiate 2.4s linear infinite;
}

.orbit-line.left { left: 24%; width: 23%; }
.orbit-line.right { right: 24%; width: 23%; animation-delay: .35s; }

.orbit-packet {
  position: absolute;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--accent-blue);
  animation: packet-travel 3s var(--ease) infinite;
}

.orbit-packet.p1 { left: 24%; }
.orbit-packet.p2 { right: 24%; animation-delay: 1.1s; animation-direction: reverse; }

.simple-demo {
  padding-top: 3rem;
}

.simple-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.simple-state {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.simple-state span {
  min-height: 48px;
  display: grid;
  place-items: center;
  background: rgba(8,9,11,0.92);
  color: var(--text-3);
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.simple-state span.done {
  color: var(--accent-good);
  background: rgba(125,167,123,0.08);
}

.simple-state span.active {
  color: var(--white);
  background: rgba(110,168,255,0.12);
  box-shadow: inset 0 -2px 0 var(--accent-blue);
}

.simple-meta {
  display: flex;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.simple-meta span {
  min-width: 104px;
  display: grid;
  place-items: center;
  padding: 0.55rem 0.8rem;
  background: rgba(8,9,11,0.92);
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.simple-meta b {
  display: block;
  margin-top: 0.2rem;
  color: var(--white);
  font-weight: 500;
}

.simple-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.simple-card,
.simple-negotiate,
.simple-final,
.trace-collapsed {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)),
    rgba(8,9,11,0.9);
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}

.simple-card {
  min-height: 520px;
  padding: 1.1rem;
}

.simple-card header,
.negotiate-header,
.simple-final header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.simple-card header > span,
.negotiate-header > div > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(110,168,255,0.4);
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: 0.75rem;
}

.simple-card h2,
.negotiate-header h2,
.simple-final h2 {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--white);
}

.simple-card p,
.simple-card small {
  color: var(--text-2);
  font-size: 0.86rem;
}

.simple-drop {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  min-height: 144px;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed rgba(110,168,255,0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(110,168,255,0.14), transparent 50%),
    rgba(5,6,7,0.6);
  text-align: center;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.simple-drop.dragging {
  transform: translateY(-3px);
  border-color: var(--accent-blue);
  background: rgba(110,168,255,0.1);
}

.simple-drop input { display: none; }
.simple-drop strong { color: var(--white); font-family: var(--ff-display); font-size: 1.15rem; font-weight: 400; }
.simple-drop small { color: var(--text-2); }

.simple-textarea,
.simple-details textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(5,6,7,0.72);
  color: var(--white);
  outline: none;
  resize: vertical;
  padding: 0.9rem;
  margin-top: 0.9rem;
  font-family: var(--ff-body);
  font-size: 0.92rem;
  line-height: 1.55;
}

.simple-textarea.compact { min-height: 132px; }

.simple-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.simple-actions.large .btn {
  flex: 1;
  justify-content: center;
}

.mini-db {
  margin-top: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.48);
}

.mini-db > span {
  display: block;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.simple-doc-list {
  max-height: 128px;
}

.simple-rule-focus {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(110,168,255,0.22);
  background: rgba(110,168,255,0.06);
}

.simple-rule-focus label,
.simple-select-grid label {
  display: grid;
  gap: 0.5rem;
}

.simple-rule-focus small,
.simple-select-grid small {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.simple-rule-focus input,
.simple-select-grid select {
  width: 100%;
  height: 46px;
  padding: 0 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5,6,7,0.86);
  color: var(--white);
  font-family: var(--ff-mono);
}

.simple-switches {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.simple-switches label,
.negotiate-controls label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 42px;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.48);
  color: var(--text-2);
  font-size: 0.9rem;
}

.simple-switches input,
.negotiate-controls input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-blue);
}

.simple-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.simple-details {
  margin-top: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.48);
}

.simple-details summary {
  padding: 0.85rem 1rem;
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  cursor: pointer;
}

.simple-details pre {
  max-height: 260px;
  overflow: auto;
  padding: 1rem;
  color: rgba(244,246,248,0.85);
  background: var(--black);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  line-height: 1.55;
}

.simple-negotiate {
  margin-top: 1rem;
  padding: 1.1rem;
}

.negotiate-header {
  align-items: center;
}

.negotiate-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.negotiate-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.simple-agent-stage {
  position: relative;
  min-height: 240px;
  margin-top: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 50% 50%, rgba(110,168,255,0.14), transparent 34%),
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px),
    rgba(5,6,7,0.58);
  background-size: auto, 34px 34px, 34px 34px, auto;
  overflow: hidden;
}

.simple-agent,
.simple-contract-core {
  position: absolute;
  top: 50%;
  width: 180px;
  min-height: 86px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5,6,7,0.88);
  transform: translateY(-50%);
}

.simple-agent b,
.simple-contract-core b {
  color: var(--white);
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 400;
}

.simple-agent small,
.simple-contract-core small {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
}

.simple-agent.emitter { left: 5%; }
.simple-agent.receiver { right: 5%; }

.simple-contract-core {
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(110,168,255,0.5);
  box-shadow: inset 0 0 38px rgba(110,168,255,0.12);
}

.stage-flow {
  position: absolute;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,168,255,0.9), transparent);
  animation: beam-negotiate 2.2s linear infinite;
}

.stage-flow.flow-a { left: 22%; width: 24%; }
.stage-flow.flow-b { right: 22%; width: 24%; animation-delay: .45s; }

.moving-packet {
  position: absolute;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 16px var(--accent-blue);
  animation: packet-travel 2.8s var(--ease) infinite;
}

.moving-packet.one { left: 24%; }
.moving-packet.two { right: 24%; animation-direction: reverse; animation-delay: 1s; }

.simple-conversation {
  min-height: 280px;
  max-height: 520px;
  overflow: auto;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,6,7,0.56);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.simple-conversation .conversation-card {
  width: min(88%, 720px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  overflow: hidden;
}

.simple-conversation .conversation-card.emitter {
  align-self: flex-start;
  background: rgba(214,166,79,0.07);
}

.simple-conversation .conversation-card.receiver {
  align-self: flex-end;
  background: rgba(110,168,255,0.08);
}

.simple-conversation .conversation-card.accepted {
  align-self: center;
  background: rgba(125,167,123,0.09);
}

.simple-conversation .conversation-card header {
  padding: 0.75rem 1rem;
}

.simple-conversation .conversation-card p {
  padding: 0.9rem 1rem 1rem;
  color: rgba(244,246,248,0.9);
  font-size: 0.94rem;
}

.simple-output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.simple-final {
  padding: 1rem;
}

.simple-final header {
  align-items: center;
}

.simple-final header span {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.simple-final header b,
.simple-final header button {
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
}

.simple-answer {
  min-height: 260px;
  margin-top: 1rem;
}

.simple-passages {
  min-height: 260px;
  max-height: 360px;
  margin-top: 1rem;
}

.trace-collapsed {
  margin-top: 1rem;
}

@keyframes packet-travel {
  0% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(220px); opacity: 0; }
}

/* ============== REAL DASHBOARD APP ============== */
.dashboard-body {
  overflow-x: hidden;
  overflow-y: auto;
}

[hidden] {
  display: none !important;
}

.dash-root {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.auth-logo {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 4;
}

.auth-card {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: 0 40px 120px rgba(0,0,0,0.5);
}

.auth-copy,
.auth-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    rgba(8,9,11,0.92);
  padding: 2rem;
}

.auth-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
}

.auth-copy h1 {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 5.4rem);
  font-weight: 300;
  line-height: .94;
  color: var(--white);
  margin: 1rem 0;
}

.auth-copy p {
  color: var(--text-2);
  max-width: 48ch;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 1.25rem;
}

.auth-tabs button {
  min-height: 46px;
  background: var(--black);
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: .7rem;
  text-transform: uppercase;
}

.auth-tabs button.active {
  color: var(--white);
  background: rgba(110,168,255,0.12);
}

.auth-form {
  display: none;
  flex-direction: column;
  gap: .9rem;
}

.auth-form.active {
  display: flex;
}

.auth-form label,
.dash-card label {
  display: grid;
  gap: .45rem;
  color: var(--text-2);
  font-size: .84rem;
}

.auth-form span,
.dash-card label span {
  font-family: var(--ff-mono);
  font-size: .66rem;
  text-transform: uppercase;
  color: var(--text-3);
}

.auth-form input,
.dash-card input,
.dash-card select,
.dash-card textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(5,6,7,.78);
  color: var(--white);
  min-height: 42px;
  padding: 0 .75rem;
  outline: none;
}

.dash-card textarea {
  padding: .75rem;
  resize: vertical;
  line-height: 1.5;
}

.auth-form input:focus,
.dash-card input:focus,
.dash-card select:focus,
.dash-card textarea:focus {
  border-color: rgba(110,168,255,.55);
  box-shadow: 0 0 0 1px rgba(110,168,255,.14);
}

.auth-message {
  min-height: 22px;
  margin-top: 1rem;
  color: var(--accent-good);
  font-family: var(--ff-mono);
  font-size: .72rem;
}

.auth-demo-button {
  margin-top: 1rem;
  justify-content: center;
}

.auth-message.error {
  color: var(--accent-bad);
}

/* ============== PAGE : POURQUOI SYNAPSE / PRESENTATION ============== */
.why-body {
  min-height: 100vh;
  background: #030405;
}

.why-page {
  --why-index: 0;
  --mx: .5;
  --my: .5;
  position: relative;
  min-height: 100vh;
  overflow: clip;
  isolation: isolate;
}

.why-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .95;
}

.why-page::before,
.why-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.why-page::before {
  background:
    radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(110,168,255,.11), transparent 28rem),
    linear-gradient(90deg, rgba(5,6,7,.96) 0%, rgba(5,6,7,.62) 44%, rgba(5,6,7,.24) 100%);
}

.why-page::after {
  background:
    linear-gradient(to right, rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse at 62% 45%, #000 0%, transparent 74%);
  opacity: .8;
}

.why-rail {
  position: fixed;
  z-index: 20;
  right: clamp(1rem, 2.4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .7rem;
}

.why-rail-dot {
  width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(5,6,7,.54);
  color: var(--text-3);
  font-family: var(--ff-mono);
  font-size: .62rem;
  backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}

.why-rail-dot:hover,
.why-rail-dot.active {
  color: var(--white);
  border-color: rgba(244,246,248,.5);
  background: rgba(244,246,248,.08);
  transform: translateX(-5px);
}

.why-stage {
  position: fixed;
  z-index: 4;
  top: 0;
  right: 0;
  width: min(58vw, 880px);
  height: 100vh;
  pointer-events: none;
  transform:
    translate3d(calc((var(--mx) - .5) * -24px), calc((var(--my) - .5) * -18px), 0)
    scale(calc(1 + var(--why-index) * .006));
  transition: transform 1.2s var(--ease), opacity .8s var(--ease);
}

.why-stage-grid {
  position: absolute;
  inset: 12vh 6vw 10vh 0;
  border: 1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(110,168,255,.08), transparent 48%);
  background-size: 58px 58px, 58px 58px, 100% 100%;
  clip-path: polygon(10% 0, 100% 0, 100% 82%, 86% 100%, 0 100%, 0 12%);
  opacity: .62;
}

.why-stage-orbit {
  position: absolute;
  inset: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
}

.why-stage-orbit span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244,246,248,.08);
  border-radius: 50%;
  transform: rotate(calc(var(--r, 0deg))) scale(var(--s, 1));
  animation: why-orbit 14s linear infinite;
}

.why-stage-orbit span:nth-child(2) { --s: .72; --r: 36deg; animation-duration: 9s; border-color: rgba(110,168,255,.14); }
.why-stage-orbit span:nth-child(3) { --s: 1.28; --r: 82deg; animation-duration: 19s; border-color: rgba(214,166,79,.12); }

.why-agent,
.why-core {
  position: absolute;
  display: grid;
  align-content: center;
  gap: .25rem;
  border: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(5,6,7,.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}

.why-agent {
  width: 170px;
  height: 104px;
  padding: 1rem;
  color: var(--text-2);
  transition: transform 1s var(--ease), border-color 1s var(--ease);
}

.why-agent small,
.why-core small {
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  color: var(--text-3);
}

.why-agent strong {
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 400;
}

.why-agent i {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.why-agent i::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
  animation: why-scan 1.8s var(--ease) infinite;
}

.why-agent-left {
  left: 9%;
  top: 42%;
  border-color: rgba(214,166,79,.18);
}

.why-agent-right {
  right: 13%;
  top: 42%;
  border-color: rgba(110,168,255,.2);
}

.why-core {
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  justify-items: center;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(244,246,248,.09), rgba(244,246,248,.02) 46%, rgba(5,6,7,.72) 70%),
    rgba(5,6,7,.7);
  animation: why-core-breathe 4s var(--ease) infinite;
}

.why-core b {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  letter-spacing: .34em;
  font-weight: 400;
  margin-left: .34em;
}

.why-core .logo-mark {
  transform: scale(1.2);
}

.why-beam {
  position: absolute;
  top: calc(50% + 2px);
  height: 1px;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(244,246,248,.7), transparent);
  filter: drop-shadow(0 0 10px rgba(110,168,255,.45));
  opacity: .65;
}

.why-beam-a {
  left: 25%;
  animation: why-beam-a 2.8s var(--ease) infinite;
}

.why-beam-b {
  right: 29%;
  animation: why-beam-b 2.8s var(--ease) infinite .7s;
}

.why-packets span {
  position: absolute;
  top: calc(50% - 4px);
  left: 20%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(244,246,248,.8);
  background: rgba(110,168,255,.25);
  animation: why-packet 3.4s linear infinite;
  animation-delay: calc(var(--i) * -.55s);
}

.why-slide {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 48rem) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(7rem, 11vw, 9rem) clamp(1.2rem, 5vw, 6.5rem) clamp(4rem, 8vw, 6rem);
}

.why-copy {
  max-width: 760px;
  transform: translateY(34px);
  opacity: .28;
  transition: transform .9s var(--ease), opacity .9s var(--ease);
}

.why-slide.is-active .why-copy {
  transform: translateY(0);
  opacity: 1;
}

.why-kicker {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 1.25rem;
}

.why-copy h1,
.why-copy h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  line-height: .92;
  letter-spacing: 0;
  color: var(--white);
}

.why-copy h1 {
  font-size: clamp(4.3rem, 10.6vw, 10.8rem);
  max-width: 11ch;
}

.why-copy h2 {
  font-size: clamp(3.2rem, 7.4vw, 7.4rem);
  max-width: 12ch;
}

.why-lede {
  max-width: 54ch;
  margin-top: 1.5rem;
  color: var(--text-2);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.75;
}

.why-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.why-actions .btn.active {
  border-color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px rgba(110,168,255,.28), 0 0 34px rgba(110,168,255,.16);
}

.why-proof {
  align-self: end;
  justify-self: start;
  display: grid;
  gap: .55rem;
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: var(--white);
  opacity: .8;
}

.why-proof span {
  display: inline-flex;
  border-left: 1px solid rgba(244,246,248,.28);
  padding-left: 1rem;
  animation: why-proof-in 1.1s var(--ease) both;
}

.why-proof span:nth-child(2) {
  animation-delay: .18s;
  color: var(--text-2);
}

.why-chaos,
.why-dialog,
.why-gates,
.why-contract,
.why-impact,
.why-timeline,
.why-final-mark {
  position: relative;
  z-index: 11;
  justify-self: stretch;
  align-self: center;
  min-height: 420px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(5,6,7,.48);
  backdrop-filter: blur(20px);
  box-shadow: 0 34px 120px rgba(0,0,0,.34);
  overflow: hidden;
  opacity: .35;
  transform: translateY(28px) scale(.98);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.why-slide.is-active .why-chaos,
.why-slide.is-active .why-dialog,
.why-slide.is-active .why-gates,
.why-slide.is-active .why-contract,
.why-slide.is-active .why-impact,
.why-slide.is-active .why-timeline,
.why-slide.is-active .why-final-mark {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.why-chaos {
  display: grid;
  grid-template-columns: 1fr 118px 1fr;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
}

.chaos-stack,
.chaos-output {
  display: grid;
  gap: .7rem;
}

.chaos-stack span,
.chaos-output span {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.08);
  padding: 0 1rem;
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--text-2);
  background: rgba(255,255,255,.025);
}

.chaos-stack span {
  transform: translateX(calc((3 - var(--n, 0)) * 4px)) rotate(calc((var(--n, 0) - 2) * .6deg));
  animation: chaos-drift 3.8s var(--ease) infinite;
}

.chaos-stack span:nth-child(1) { --n: 1; }
.chaos-stack span:nth-child(2) { --n: 2; animation-delay: -.4s; }
.chaos-stack span:nth-child(3) { --n: 3; animation-delay: -.8s; }
.chaos-stack span:nth-child(4) { --n: 4; animation-delay: -1.2s; }
.chaos-stack span:nth-child(5) { --n: 5; animation-delay: -1.6s; }
.chaos-stack span:nth-child(6) { --n: 6; animation-delay: -2s; }

.chaos-output span {
  color: var(--white);
  border-color: rgba(110,168,255,.22);
  background: rgba(110,168,255,.055);
}

.chaos-filter {
  height: 76%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244,246,248,.18);
  background:
    linear-gradient(180deg, transparent, rgba(110,168,255,.08), transparent),
    rgba(255,255,255,.035);
  font-family: var(--ff-display);
  letter-spacing: .28em;
  writing-mode: vertical-rl;
  font-size: .8rem;
  color: var(--white);
}

.chaos-filter::before,
.chaos-filter::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,246,248,.7), transparent);
  top: 50%;
  animation: why-scan 2.2s var(--ease) infinite;
}

.chaos-filter::before { left: 28%; }
.chaos-filter::after { right: 28%; animation-delay: .4s; }

.why-dialog {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.dialog-line {
  max-width: 82%;
  border: 1px solid rgba(255,255,255,.1);
  padding: 1rem;
  color: var(--text-2);
  background: rgba(255,255,255,.035);
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
}

.dialog-line.emitter {
  justify-self: start;
  border-color: rgba(214,166,79,.25);
}

.dialog-line.receiver {
  justify-self: end;
  border-color: rgba(110,168,255,.26);
}

.dialog-line.synapse {
  justify-self: center;
  color: var(--white);
  border-color: rgba(244,246,248,.3);
  background: rgba(244,246,248,.06);
}

.why-gates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.why-gates article {
  min-height: 420px;
  display: grid;
  align-content: end;
  gap: .6rem;
  padding: 1.2rem;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.04)),
    radial-gradient(circle at 50% 24%, rgba(110,168,255,.08), transparent 34%);
  transition: background .4s var(--ease), transform .4s var(--ease);
}

.why-gates article:last-child {
  border-right: 0;
}

.why-gates article:hover {
  transform: translateY(-8px);
  background:
    linear-gradient(180deg, rgba(110,168,255,.08), rgba(255,255,255,.04)),
    radial-gradient(circle at 50% 24%, rgba(214,166,79,.12), transparent 38%);
}

.why-gates b {
  font-family: var(--ff-mono);
  color: var(--text-3);
}

.why-gates span {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.35vw, 1.45rem);
  color: var(--white);
}

.why-gates small {
  color: var(--text-2);
  line-height: 1.5;
}

.why-contract {
  display: grid;
  align-content: center;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.why-contract div {
  min-height: 66px;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .8rem 0;
}

.why-contract div:last-child {
  border-bottom: 0;
}

.why-contract span,
.why-impact span,
.why-timeline span {
  font-family: var(--ff-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  color: var(--text-3);
}

.why-contract b {
  color: var(--white);
  font-weight: 400;
}

.why-contract .good {
  color: var(--accent-good);
}

.why-impact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.why-impact article {
  display: grid;
  align-content: center;
  gap: .85rem;
  padding: 1.4rem;
  border-right: 1px solid rgba(255,255,255,.08);
}

.why-impact article:last-child {
  border-right: 0;
}

.why-impact b {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: .9;
  font-weight: 300;
  color: var(--white);
}

.why-impact small {
  color: var(--text-2);
  max-width: 18ch;
}

.why-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  padding: 1rem;
}

.why-timeline article {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .85rem;
  min-height: 380px;
  border: 1px solid rgba(255,255,255,.08);
  margin-left: -1px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}

.why-timeline article::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: linear-gradient(180deg, rgba(110,168,255,.16), rgba(244,246,248,.03));
  animation: timeline-fill 3s var(--ease) infinite;
  animation-delay: calc(var(--delay, 0) * .28s);
}

.why-timeline article:nth-child(1) { --delay: 1; }
.why-timeline article:nth-child(2) { --delay: 2; }
.why-timeline article:nth-child(3) { --delay: 3; }
.why-timeline article:nth-child(4) { --delay: 4; }

.why-timeline b {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 400;
}

.why-timeline span {
  position: relative;
  z-index: 1;
}

.why-slide-final {
  grid-template-columns: minmax(0, 52rem) minmax(300px, .8fr);
}

.why-final-mark {
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.4rem;
  text-align: center;
}

.why-final-mark .logo-mark {
  transform: scale(1.6);
}

.why-final-mark strong {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 6vw, 6rem);
  letter-spacing: .36em;
  font-weight: 300;
  margin-left: .36em;
}

.why-final-mark em {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@keyframes why-orbit {
  to { transform: rotate(calc(var(--r, 0deg) + 360deg)) scale(var(--s, 1)); }
}

@keyframes why-scan {
  0% { transform: translateX(-80%); opacity: 0; }
  35%, 70% { opacity: 1; }
  100% { transform: translateX(180%); opacity: 0; }
}

@keyframes why-core-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244,246,248,.02), 0 0 70px rgba(110,168,255,.08); }
  50% { box-shadow: 0 0 0 1px rgba(244,246,248,.16), 0 0 110px rgba(110,168,255,.18); }
}

@keyframes why-beam-a {
  0%, 100% { transform: scaleX(.65); opacity: .25; }
  50% { transform: scaleX(1.15); opacity: .8; }
}

@keyframes why-beam-b {
  0%, 100% { transform: scaleX(.7); opacity: .25; }
  50% { transform: scaleX(1.25); opacity: .86; }
}

@keyframes why-packet {
  0% { transform: translateX(0) scale(.6); opacity: 0; }
  18% { opacity: 1; }
  50% { transform: translateX(290px) scale(1); opacity: .9; }
  82% { opacity: 1; }
  100% { transform: translateX(590px) scale(.6); opacity: 0; }
}

@keyframes why-proof-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chaos-drift {
  0%, 100% { transform: translateY(0) translateX(calc((3 - var(--n, 0)) * 4px)) rotate(calc((var(--n, 0) - 2) * .6deg)); }
  50% { transform: translateY(-8px) translateX(calc((3 - var(--n, 0)) * -3px)) rotate(calc((var(--n, 0) - 2) * -.55deg)); }
}

@keyframes dialog-rise {
  from { opacity: 0; transform: translateY(22px) scale(.98); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes timeline-fill {
  0%, 12% { height: 0; opacity: 0; }
  50% { opacity: 1; }
  100% { height: 100%; opacity: .08; }
}

@keyframes compress-raw {
  0%, 100% { transform: translateY(0) scale(.96); opacity: .58; }
  50% { transform: translateY(-5px) scale(.86); opacity: .32; }
}

/* ============== PAGE : PRESENTATION APPLE-LIKE 3D ============== */
.apple-body {
  background:
    radial-gradient(ellipse at 72% 38%, rgba(110,168,255,.075), transparent 34rem),
    radial-gradient(ellipse at 28% 72%, rgba(214,166,79,.035), transparent 38rem),
    linear-gradient(135deg, #020304 0%, #07090b 46%, #030405 100%);
}

.apple-body .bg-vignette {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(244,246,248,.065), transparent 42%),
    radial-gradient(ellipse at 78% 52%, rgba(110,168,255,.045), transparent 38%),
    linear-gradient(180deg, rgba(2,3,4,.15), #030405 84%);
}

.apple-header {
  background: rgba(3,4,5,.48);
  border-bottom-color: rgba(255,255,255,.035);
  backdrop-filter: blur(28px) saturate(150%);
}

.apple-header .site-nav {
  gap: clamp(.8rem, 1.4vw, 1.8rem);
}

.apple-header .btn-ghost {
  border-radius: 999px;
  padding-inline: 1.2rem;
  background: rgba(244,246,248,.08);
}

.apple-presentation {
  --scene-shift: 0;
  --transmit-width: 82%;
  --understand-width: 24%;
  --mx: .5;
  --my: .48;
  min-height: 100vh;
  overflow: clip;
  scroll-snap-type: y proximity;
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 18%, transparent 82%, rgba(255,255,255,.014));
}

.apple-presentation::before {
  z-index: 4;
  background:
    radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(244,246,248,.034), transparent 20rem),
    linear-gradient(90deg, rgba(3,4,5,.985) 0%, rgba(3,4,5,.92) 37%, rgba(3,4,5,.5) 66%, rgba(3,4,5,.94) 100%),
    linear-gradient(180deg, rgba(255,255,255,.024), transparent 18%, rgba(0,0,0,.5) 100%);
}

.apple-presentation::after {
  z-index: 5;
  opacity: .22;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(110,168,255,.055) 49%, transparent 51% 100%);
  background-size: 128px 128px, 128px 128px, 520px 520px;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
    radial-gradient(ellipse at 64% 48%, #000 0%, transparent 70%);
  mask-composite: intersect;
}

.apple-noise-canvas {
  z-index: 2;
  opacity: .18;
  filter: grayscale(1) contrast(.9);
}

.why-3d-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .66;
  filter: saturate(.82) contrast(.96) brightness(.82);
}

.apple-presentation[data-three="fallback"] .why-3d-canvas {
  display: none;
}

.apple-rail {
  z-index: 30;
  right: 1.5rem;
  gap: .5rem;
}

.apple-rail .why-rail-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  padding: 0;
  border-color: rgba(244,246,248,.18);
  background: rgba(244,246,248,.12);
}

.apple-rail .why-rail-dot span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.apple-rail .why-rail-dot:hover,
.apple-rail .why-rail-dot.active {
  width: 34px;
  background: rgba(244,246,248,.8);
  border-color: rgba(244,246,248,.8);
  transform: translateX(-4px);
}

.slogan-meter {
  position: fixed;
  left: auto;
  right: clamp(1.2rem, 5vw, 5rem);
  bottom: clamp(1.1rem, 4vh, 3rem);
  z-index: 32;
  width: min(340px, calc(100vw - 7rem));
  display: grid;
  gap: .7rem;
  padding: .85rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: rgba(7,8,10,.5);
  backdrop-filter: blur(26px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 80px rgba(0,0,0,.28);
  transform: translateY(calc(var(--scene-shift) * -6px));
  transition: transform .8s var(--ease);
}

.slogan-meter-row {
  display: grid;
  grid-template-columns: 82px 1fr 42px;
  align-items: center;
  gap: .7rem;
}

.slogan-meter-row span,
.slogan-meter-row strong {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,246,248,.58);
}

.slogan-meter-row strong {
  text-align: right;
  color: rgba(244,246,248,.82);
}

.slogan-meter-row i {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(244,246,248,.08);
}

.slogan-meter-row b {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: var(--transmit-width);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(214,166,79,.28), rgba(214,166,79,.8));
  transition: width .8s var(--ease), background .8s var(--ease);
}

.slogan-meter-row.understand b {
  width: var(--understand-width);
  background: linear-gradient(90deg, rgba(110,168,255,.2), rgba(244,246,248,.9));
}

.apple-slide {
  position: relative;
  z-index: 12;
  min-height: min(72vh, 680px);
  display: grid;
  grid-template-columns: minmax(0, 48rem) minmax(260px, 1fr);
  align-items: center;
  gap: clamp(2rem, 9vw, 9rem);
  padding: clamp(5rem, 8vw, 7rem) clamp(1.5rem, 6vw, 7rem);
  scroll-snap-align: start;
}

.apple-copy {
  max-width: 720px;
  opacity: .18;
  transform: translateY(42px) scale(.985);
  filter: blur(7px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}

.apple-slide.is-active .apple-copy {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.apple-kicker {
  display: inline-flex;
  margin-bottom: 1.35rem;
  color: rgba(244,246,248,.72);
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.apple-copy h1,
.apple-copy h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  letter-spacing: 0;
  line-height: .94;
  color: var(--white);
  text-wrap: balance;
}

.apple-copy h1 {
  max-width: 12ch;
  font-size: clamp(4.2rem, 7.8vw, 8.5rem);
}

.apple-copy h2 {
  max-width: 12ch;
  font-size: clamp(3.4rem, 6.6vw, 7rem);
}

.apple-copy p:not(.apple-kicker) {
  max-width: 42rem;
  margin-top: 1.45rem;
  color: rgba(244,246,248,.62);
  font-size: clamp(1.05rem, 1.45vw, 1.36rem);
  line-height: 1.78;
}

.apple-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.apple-actions .btn {
  border-radius: 999px;
  padding-inline: 1.35rem;
}

.apple-actions .btn-outline {
  background: rgba(244,246,248,.045);
}

.apple-actions .btn.active {
  border-color: rgba(244,246,248,.5);
  background: rgba(244,246,248,.1);
  box-shadow: 0 0 44px rgba(244,246,248,.08);
}

.apple-caption,
.apple-compression,
.apple-mini-panel,
.apple-chat,
.apple-output,
.apple-signature {
  position: relative;
  z-index: 13;
  justify-self: start;
  width: min(100%, 520px);
  opacity: 0;
  transform: translateY(32px) scale(.97);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.apple-slide.is-active .apple-caption,
.apple-slide.is-active .apple-compression,
.apple-slide.is-active .apple-mini-panel,
.apple-slide.is-active .apple-chat,
.apple-slide.is-active .apple-output,
.apple-slide.is-active .apple-signature {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.apple-caption {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: clamp(2rem, 7vw, 5rem);
}

.apple-caption span,
.apple-mini-panel span,
.apple-mini-panel strong,
.apple-compression span,
.apple-compression strong {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 .95rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(244,246,248,.055);
  color: rgba(244,246,248,.68);
  font-family: var(--ff-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(22px);
}

.apple-mini-panel,
.apple-compression,
.apple-chat,
.apple-output,
.apple-signature {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    rgba(244,246,248,.035);
  backdrop-filter: blur(30px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 38px 120px rgba(0,0,0,.32);
}

.apple-mini-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  padding: 1.2rem;
}

.apple-compression {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .58rem;
  padding: 1.15rem;
}

.apple-compression .raw {
  color: rgba(244,246,248,.48);
  background: rgba(244,246,248,.038);
  transform: scale(.96);
  opacity: .58;
}

.apple-slide.is-active .apple-compression .raw {
  animation: compress-raw 3.6s var(--ease) infinite;
}

.apple-compression .raw:nth-child(2) { animation-delay: -.45s; }
.apple-compression .raw:nth-child(3) { animation-delay: -.9s; }
.apple-compression .raw:nth-child(4) { animation-delay: -1.35s; }
.apple-compression .raw:nth-child(5) { animation-delay: -1.8s; }
.apple-compression .raw:nth-child(6) { animation-delay: -2.25s; }

.apple-compression i {
  grid-column: 1 / -1;
  height: 1px;
  margin: .35rem 0;
  background: linear-gradient(90deg, transparent, rgba(244,246,248,.24), rgba(110,168,255,.46), transparent);
}

.apple-compression strong {
  grid-column: span 2;
  color: var(--white);
  border-color: rgba(110,168,255,.28);
  background: rgba(110,168,255,.075);
  box-shadow: 0 0 30px rgba(110,168,255,.08);
}

.apple-mini-panel i {
  grid-column: 1 / -1;
  height: 1px;
  margin: .35rem 0;
  background: linear-gradient(90deg, transparent, rgba(244,246,248,.42), transparent);
}

.apple-mini-panel strong {
  color: var(--white);
  border-color: rgba(110,168,255,.22);
  background: rgba(110,168,255,.075);
}

.apple-chat {
  display: grid;
  gap: .8rem;
  padding: 1rem;
}

.apple-chat p {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(5,6,7,.38);
  border: 1px solid rgba(255,255,255,.075);
}

.apple-chat p:nth-child(2) {
  margin-left: 2rem;
  background: rgba(110,168,255,.06);
}

.apple-chat p:nth-child(3) {
  margin-inline: 1rem;
  text-align: center;
  background: rgba(244,246,248,.1);
}

.apple-chat b {
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 500;
}

.apple-chat span {
  color: rgba(244,246,248,.62);
  line-height: 1.55;
}

.apple-output {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}

.apple-output article {
  display: grid;
  align-content: center;
  gap: .65rem;
  min-height: 210px;
  padding: 1rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
}

.apple-output article:last-child {
  border-right: 0;
}

.apple-output span {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 5vw, 5.6rem);
  font-weight: 300;
  line-height: .9;
  color: var(--white);
}

.apple-output small {
  max-width: 11rem;
  margin: 0 auto;
  color: rgba(244,246,248,.58);
  line-height: 1.45;
}

.apple-signature {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.1rem;
  text-align: center;
}

.apple-signature .logo-mark {
  transform: scale(1.42);
}

.apple-signature strong {
  margin-left: .34em;
  color: var(--white);
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 300;
  letter-spacing: .34em;
}

.dash-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
}

.dash-sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: rgba(5,6,7,.92);
  backdrop-filter: blur(18px);
}

.dash-brand {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--line);
}

.dash-brand strong {
  font-family: var(--ff-display);
  letter-spacing: .28em;
  font-weight: 400;
}

.dash-nav {
  display: grid;
  gap: .25rem;
  padding: 1rem;
}

.dash-nav button {
  min-height: 44px;
  padding: 0 .9rem;
  text-align: left;
  border: 1px solid transparent;
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: .72rem;
  text-transform: uppercase;
}

.dash-nav button:hover,
.dash-nav button.active {
  color: var(--white);
  border-color: rgba(255,255,255,.1);
  background: rgba(110,168,255,.08);
}

.dash-side-footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .6rem;
}

.dash-side-footer span {
  color: var(--text-2);
  font-size: .82rem;
}

.dash-side-footer button {
  color: var(--accent-amber);
  text-align: left;
  font-family: var(--ff-mono);
  font-size: .72rem;
  text-transform: uppercase;
}

.dash-main {
  height: 100vh;
  overflow: auto;
  padding: 1.4rem;
}

.dash-topbar {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dash-topbar h1 {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--white);
}

.dash-user {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: .72rem;
  text-transform: uppercase;
}

.dash-user a {
  padding: .55rem .7rem;
  border: 1px solid var(--line);
}

.storage-pill {
  min-width: 74px;
  padding: .48rem .68rem;
  border: 1px solid rgba(255,255,255,.22);
  color: var(--white);
  background: rgba(255,255,255,.05);
  text-align: center;
  letter-spacing: .08em;
}

.storage-pill[data-state="cloud"] {
  background: rgba(255,255,255,.13);
}

.storage-pill[data-state="pending"] {
  border-style: dashed;
  color: var(--text-2);
}

.dash-view {
  display: none;
}

.dash-view.active {
  display: block;
  animation: fadeUp .35s var(--ease) both;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.dash-stats article,
.dash-card {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)),
    rgba(8,9,11,.88);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.dash-stats article {
  min-height: 126px;
  padding: 1rem;
}

.dash-stats span {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: .68rem;
  text-transform: uppercase;
}

.dash-stats b {
  display: block;
  margin-top: 1rem;
  color: var(--white);
  font-family: var(--ff-display);
  font-size: 3rem;
  font-weight: 300;
}

.dash-two {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 1rem;
}

.overview-hero {
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 78% 35%, rgba(244,246,248,.12), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.014)),
    #050607;
  box-shadow: 0 34px 120px rgba(0,0,0,.38);
  overflow: hidden;
}

.overview-hero > div:first-child {
  padding: clamp(1.3rem, 2vw, 2rem);
  display: grid;
  align-content: center;
  gap: .85rem;
}

.overview-hero h2 {
  max-width: 12ch;
  color: var(--white);
  font-family: var(--ff-display);
  font-size: clamp(3rem, 5.8vw, 6.8rem);
  line-height: .88;
  font-weight: 300;
  letter-spacing: 0;
}

.overview-hero p:not(.hero-eyebrow) {
  max-width: 52ch;
  color: rgba(244,246,248,.62);
  line-height: 1.65;
}

.overview-signal {
  position: relative;
  min-height: 220px;
  display: grid;
  grid-template-columns: 1fr 90px 1fr 90px 1fr;
  align-items: center;
  padding: 1.25rem;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 100%);
}

.overview-signal span,
.overview-signal strong {
  min-height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--white);
  background: rgba(5,6,7,.56);
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: inset 0 0 38px rgba(255,255,255,.026);
}

.overview-signal strong {
  border-color: rgba(244,246,248,.42);
  animation: overview-core-pulse 3s var(--ease) infinite;
}

.overview-signal i {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,246,248,.9), transparent);
  filter: drop-shadow(0 0 10px rgba(244,246,248,.32));
  animation: beam-negotiate 1.4s linear infinite;
}

.overview-command {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(380px, 1fr);
  grid-template-areas:
    "compose docs"
    "rules docs";
  gap: 1rem;
  align-items: stretch;
}

.transfer-command-card { grid-area: compose; }
.transfer-doc-card { grid-area: docs; }
.transfer-rules-card { grid-area: rules; }
.transfer-preview-card { grid-area: preview; }

.overview-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: 1rem;
  margin-top: 1rem;
}

.transfer-card,
.transfer-doc-card,
.transfer-rules-card,
.transfer-preview-card,
.sent-card,
.live-card {
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
    rgba(6,7,8,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 100px rgba(0,0,0,.35);
}

.dash-card {
  padding: 1rem;
}

.dash-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.dash-card header span {
  color: var(--text-2);
  font-family: var(--ff-mono);
  font-size: .68rem;
  text-transform: uppercase;
}

.dash-card header b {
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: .68rem;
  font-weight: 500;
}

.transfer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

.transfer-grid label:has(textarea),
.transfer-grid .wide {
  grid-column: 1 / -1;
}

.transfer-grid.compact {
  margin-top: .8rem;
}

.transfer-options {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .85rem 0;
}

.transfer-options-modern {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.transfer-options label,
.dash-item label {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-2);
  font-size: .84rem;
}

.transfer-options-modern label {
  min-height: 54px;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.transfer-options-modern label:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
}

.transfer-options-modern .max-exchange-control {
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
}

.transfer-options-modern .max-exchange-control select {
  width: 120px;
}

.selected-docs {
  padding: .8rem;
  margin: .8rem 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,6,7,.48);
  color: var(--text-2);
  border-radius: 16px;
}

.transfer-upload {
  min-height: 118px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 48%),
    rgba(255,255,255,.035);
}

.transfer-helper {
  margin: 0 0 .9rem;
  color: rgba(244,246,248,.58);
  line-height: 1.55;
  font-size: .9rem;
}

.transfer-documents {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
  max-height: 420px;
  overflow: auto;
}

.transfer-doc-option {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem !important;
  min-height: 76px;
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.032);
  cursor: pointer;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}

.transfer-doc-option:hover,
.transfer-doc-option.selected {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.075);
}

.transfer-doc-option strong {
  color: var(--white);
  font-weight: 500;
}

.transfer-doc-option small {
  display: block;
  margin-top: .2rem;
  color: rgba(244,246,248,.48);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.transfer-doc-option b {
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .66rem;
}

.send-transfer-btn {
  min-height: 56px;
  border-radius: 999px;
}

.transfer-preview-card {
  position: relative;
  overflow: hidden;
}

.transfer-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .68;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.14), transparent 26%),
    linear-gradient(to right, rgba(255,255,255,.036) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: auto, 38px 38px, 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.transfer-preview-card > * {
  position: relative;
  z-index: 1;
}

.preview-topline {
  min-height: 150px;
  display: grid;
  align-content: end;
  gap: .55rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 35%, rgba(244,246,248,.12), transparent 45%),
    rgba(255,255,255,.035);
}

.preview-topline span,
.preview-metrics span {
  color: rgba(244,246,248,.48);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.preview-topline strong {
  color: var(--white);
  font-family: var(--ff-display);
  font-size: clamp(1.45rem, 2.2vw, 2.35rem);
  font-weight: 300;
  line-height: 1.02;
}

.transfer-preview-card p {
  margin: 1rem 0;
  color: rgba(244,246,248,.72);
  line-height: 1.65;
}

.preview-metrics {
  display: grid;
  gap: .55rem;
}

.preview-metrics span {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: var(--white);
  background: rgba(255,255,255,.035);
}

.preview-flow {
  height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.1rem;
  padding: 0 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
}

.preview-flow i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 20px rgba(255,255,255,.18);
  animation: preview-dot 1.8s var(--ease) infinite;
}

.preview-flow i:nth-child(2) { animation-delay: -.25s; opacity: .76; }
.preview-flow i:nth-child(3) { animation-delay: -.5s; opacity: .6; }
.preview-flow i:nth-child(4) { animation-delay: -.75s; opacity: .45; }
.preview-flow i:nth-child(5) { animation-delay: -1s; opacity: .3; }

.sent-card {
  margin-top: 1rem;
}

.sent-request-list {
  display: grid;
  gap: .7rem;
}

.sent-request {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, .9fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .85rem;
  border: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(5,6,7,.62);
  transition: transform .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
}

.sent-request:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.06);
}

.sent-request[data-status="negotiating"],
.sent-request[data-status="accepted"] {
  animation: inbound-pulse 1.8s var(--ease) infinite;
}

.sent-request span,
.sent-request p,
.sent-request-meta b {
  color: rgba(244,246,248,.56);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sent-request strong {
  display: block;
  margin: .28rem 0;
  color: var(--white);
  font-size: .98rem;
  font-weight: 500;
}

.sent-request p {
  margin: 0;
  color: rgba(244,246,248,.48);
}

.sent-request-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}

.sent-request-meta b {
  padding: .48rem .55rem;
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  color: var(--white);
}

.sent-request-actions {
  display: flex;
  gap: .45rem;
  justify-content: flex-end;
}

.sent-request-actions button {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.055);
  color: var(--white);
  padding: .52rem .65rem;
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sent-request-actions button:hover {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.12);
}

.live-card {
  position: relative;
  overflow: hidden;
}

.live-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at 50% 17%, rgba(255,255,255,.14), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.live-card > * {
  position: relative;
  z-index: 1;
}

.live-card-actions {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.live-fullscreen-btn,
.live-close-btn {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .52rem .72rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.live-fullscreen-btn:hover,
.live-close-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.1);
}

.live-close-btn {
  display: none;
}

.live-fullscreen-open {
  overflow: hidden;
}

.live-card.is-fullscreen {
  position: fixed;
  inset: 18px;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto auto auto auto;
  padding: 1.1rem;
  border-radius: 26px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background:
    radial-gradient(circle at 48% 8%, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    #030405;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 40px 120px rgba(0,0,0,.9);
}

.live-card.is-fullscreen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,.76);
  backdrop-filter: blur(10px);
}

.live-card.is-fullscreen .live-fullscreen-btn {
  display: none;
}

.live-card.is-fullscreen .live-close-btn {
  display: inline-flex;
}

.dash-agent-stage {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 50px 1fr;
  align-items: center;
  min-height: 92px;
  margin-bottom: 1rem;
}

.dash-agent-stage span,
.dash-agent-stage strong {
  min-height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--white);
  background: rgba(5,6,7,.58);
  font-family: var(--ff-mono);
  font-size: .68rem;
  text-transform: uppercase;
  box-shadow: inset 0 0 28px rgba(255,255,255,.025);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.dash-agent-stage strong {
  border-color: rgba(110,168,255,.45);
}

.dash-agent-stage .is-active,
.dash-agent-stage[data-speaker="system"] strong {
  border-color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 28px rgba(255,255,255,.11), inset 0 0 34px rgba(255,255,255,.05);
  transform: translateY(-1px);
}

.dash-agent-stage i {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,168,255,.9), transparent);
  animation: beam-negotiate 2s linear infinite;
  opacity: .5;
  transform-origin: center;
}

.dash-agent-stage i.is-active {
  opacity: 1;
  animation-duration: .85s;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.8));
}

.dash-live-feed {
  min-height: 350px;
  max-height: 460px;
  overflow: auto;
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,6,7,.55);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.live-card.is-fullscreen .dash-live-feed {
  min-height: min(740px, calc(100vh - 260px));
  max-height: none;
  height: auto;
  overflow: visible;
  padding: 1rem;
  gap: .9rem;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.11), transparent 28%),
    rgba(5,6,7,.72);
}

.dash-live-bubble {
  position: relative;
  flex: 0 0 auto;
  width: min(88%, 720px);
  padding: .9rem .95rem .95rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(16,18,20,.72);
  color: var(--text-2);
  animation: line-in .35s var(--ease) both, live-float 7s ease-in-out infinite;
  overflow: hidden;
  isolation: isolate;
}

.dash-live-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 62%);
  transform: translateX(-120%);
  animation: live-scan 4.8s ease-in-out infinite;
}

.dash-live-bubble header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 0;
  margin-bottom: .45rem;
  border-bottom: 0;
}

.dash-live-identity {
  display: grid;
  gap: .12rem;
}

.dash-live-role {
  color: rgba(244,246,248,.48);
  font-family: var(--ff-mono);
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dash-live-bubble.role-emitter {
  align-self: flex-start;
  border-color: rgba(255,255,255,.16);
  border-left-color: rgba(255,255,255,.58);
  border-left-width: 2px;
  border-top-left-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(8,9,10,.82);
}

.dash-live-bubble.role-receiver {
  align-self: flex-end;
  border-color: rgba(255,255,255,.24);
  border-right-color: rgba(255,255,255,.72);
  border-right-width: 2px;
  border-top-right-radius: 4px;
  background:
    linear-gradient(225deg, rgba(255,255,255,.11), rgba(255,255,255,.025)),
    rgba(255,255,255,.07);
}

.dash-live-bubble.role-system {
  align-self: center;
  width: min(94%, 820px);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.055);
}

.dash-live-bubble.is-agreement {
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 0 40px rgba(255,255,255,.08);
}

.dash-live-bubble.is-streaming {
  border-color: rgba(255,255,255,.36);
  box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 34px rgba(255,255,255,.075);
}

.dash-live-bubble.is-streaming .dash-live-text::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1.15em;
  margin-left: .25rem;
  vertical-align: -.18em;
  background: rgba(244,246,248,.82);
  animation: live-caret .8s steps(1, end) infinite;
}

.dash-live-text,
.dash-live-note,
.dash-live-feed > p {
  flex: 0 0 auto;
  padding: .85rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(16,18,20,.62);
  color: var(--text-2);
  animation: line-in .35s var(--ease) both;
}

.dash-live-bubble .dash-live-text {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: rgba(244,246,248,.86);
  line-height: 1.65;
  white-space: pre-wrap;
}

.dash-live-bubble .dash-live-note {
  margin-top: .7rem;
  font-size: .78rem;
}

.dash-live-feed strong,
.dash-live-bubble strong {
  color: var(--white);
  display: block;
  margin-bottom: .25rem;
}

.dash-live-tag {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: .28rem .45rem;
  color: rgba(244,246,248,.72);
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .08em;
}

.dash-live-pulse {
  position: absolute;
  width: 7px;
  height: 7px;
  right: .72rem;
  bottom: .72rem;
  border-radius: 50%;
  background: var(--white);
  opacity: .72;
  box-shadow: 0 0 20px rgba(255,255,255,.75);
  animation: live-pulse 1.4s ease-in-out infinite;
}

.dash-final-package {
  align-self: stretch;
  position: relative;
  flex: 0 0 auto;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(3,4,5,.9);
  box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  animation: line-in .38s var(--ease) both;
  overflow: hidden;
}

.dash-final-package::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.dash-final-package > * {
  position: relative;
  z-index: 1;
}

.dash-final-package header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .85rem;
}

.dash-final-brief {
  margin: -.35rem 0 .9rem;
  color: rgba(244,246,248,.62);
  font-size: .86rem;
  line-height: 1.5;
}

.dash-final-package header span {
  display: block;
  margin-bottom: .25rem;
  color: rgba(244,246,248,.58);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dash-final-package header strong {
  color: var(--white);
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 500;
}

.dash-final-package header b {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .38rem .62rem;
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .08em;
}

.dash-final-progress {
  height: 2px;
  margin-bottom: 1rem;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}

.dash-final-progress i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.35), var(--white));
  box-shadow: 0 0 18px rgba(255,255,255,.85);
  transition: width .35s var(--ease);
}

.dash-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.dash-final-section {
  min-height: 158px;
  padding: .82rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  animation: dialog-rise .42s var(--ease) both;
}

.dash-final-section span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: .55rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: rgba(244,246,248,.72);
  font-family: var(--ff-mono);
  font-size: .62rem;
}

.dash-final-section h4 {
  margin: 0 0 .35rem;
  color: var(--white);
  font-size: .83rem;
  font-weight: 500;
}

.dash-final-section p {
  margin: 0;
  color: rgba(244,246,248,.76);
  font-size: .84rem;
  line-height: 1.62;
  white-space: pre-wrap;
}

.dash-final-contract {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin-top: .8rem;
}

.dash-final-contract span {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: .62rem;
  color: rgba(244,246,248,.62);
  font-size: .72rem;
  text-transform: uppercase;
}

.dash-final-contract b {
  display: block;
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .82rem;
  margin-bottom: .15rem;
}

.dash-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}

.dash-final-actions button {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--white);
  padding: .62rem .78rem;
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.dash-final-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.12);
}

.dash-final-package.is-ready header b {
  background: rgba(255,255,255,.12);
}

@keyframes live-scan {
  0%, 48% { transform: translateX(-120%); opacity: 0; }
  62% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes live-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes live-pulse {
  0%, 100% { transform: scale(.86); opacity: .38; }
  50% { transform: scale(1.22); opacity: .9; }
}

@keyframes live-caret {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

.dash-upload {
  min-height: 120px;
  display: grid !important;
  place-items: center;
  padding: 1rem;
  border: 1px dashed rgba(110,168,255,.34);
  background: rgba(110,168,255,.06);
  text-align: center;
}

.dash-upload input {
  display: none;
}

.dash-upload strong {
  color: var(--white);
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
}

.dash-upload small {
  color: var(--text-2);
}

.dash-list {
  display: grid;
  gap: .75rem;
  max-height: calc(100vh - 250px);
  overflow: auto;
}

.dash-item {
  padding: .9rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,6,7,.48);
}

.dash-item strong {
  color: var(--white);
  font-weight: 500;
}

.dash-item span,
.dash-item p {
  display: block;
  margin-top: .35rem;
  color: var(--text-2);
  font-size: .84rem;
}

.dash-item button {
  margin-top: .6rem;
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: .68rem;
  text-transform: uppercase;
}

.dash-empty {
  color: var(--text-3);
  padding: 1rem;
  text-align: center;
}

.inbound-layout {
  display: grid;
  grid-template-columns: minmax(270px, .75fr) minmax(520px, 1.35fr);
  grid-template-areas:
    "compose board"
    "detail detail";
  gap: 1rem;
}

.inbound-compose { grid-area: compose; }
.inbound-board-card { grid-area: board; }
.inbound-detail { grid-area: detail; }

.receiver-setup-card {
  border-radius: 24px;
}

.receiver-setup-copy {
  color: rgba(244,246,248,.64);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.inbound-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.inbound-form-grid label:has(textarea),
.inbound-form-grid label:nth-child(3) {
  grid-column: 1 / -1;
}

.inbound-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: .75rem;
  min-height: 420px;
}

.inbound-lane {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.2);
  min-height: 390px;
  padding: .75rem;
  display: grid;
  align-content: start;
  gap: .7rem;
}

.inbound-lane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-bottom: .55rem;
}

.inbound-lane header span,
.inbound-detail-block > span,
.inbound-detail-grid span {
  font-family: var(--ff-mono);
  font-size: .62rem;
  text-transform: uppercase;
  color: var(--text-3);
  letter-spacing: .12em;
}

.inbound-lane header b {
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .72rem;
}

.inbound-lane [data-inbound-lane-items] {
  display: grid;
  gap: .65rem;
}

.inbound-lane-empty,
.inbound-empty {
  color: var(--text-3);
  border: 1px dashed rgba(255,255,255,.1);
  padding: .9rem;
  font-size: .82rem;
}

.inbound-card {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(9,10,12,.74);
  padding: .75rem;
  transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}

.inbound-card:hover,
.inbound-card.active {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.32);
  background: rgba(18,20,23,.86);
}

.inbound-card[data-status="ready"] { border-color: rgba(255,255,255,.34); }
.inbound-card[data-status="negotiating"] {
  animation: inbound-pulse 1.8s var(--ease) infinite;
}
.inbound-card[data-status="blocked"],
.inbound-card[data-status="stopped"] { border-style: dashed; }

.inbound-card-main {
  width: 100%;
  text-align: left;
}

.inbound-card-main span,
.inbound-card-main small,
.inbound-card-main em,
.inbound-card-meta span {
  display: block;
  color: var(--text-3);
  font-family: var(--ff-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.inbound-card-main strong {
  display: block;
  color: var(--white);
  font-size: .95rem;
  margin: .35rem 0;
  line-height: 1.25;
}

.inbound-card-main em {
  margin-top: .45rem;
  color: var(--white);
  font-style: normal;
}

.inbound-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  margin: .65rem 0;
}

.inbound-card-meta span {
  border: 1px solid rgba(255,255,255,.08);
  padding: .35rem;
  text-align: center;
}

.inbound-card p {
  color: var(--text-2);
  font-size: .8rem;
  line-height: 1.45;
}

.inbound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .7rem;
}

.inbound-actions button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--white);
  padding: .48rem .58rem;
  font-family: var(--ff-mono);
  font-size: .62rem;
  text-transform: uppercase;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}

.inbound-actions button:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
}

.inbound-detail-grid,
.inbound-split,
.inbound-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: .9rem;
}

.inbound-detail-grid article,
.inbound-detail-block,
.inbound-metrics span {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.2);
  padding: .85rem;
}

.inbound-detail-grid b {
  display: block;
  color: var(--white);
  margin-top: .35rem;
  font-weight: 500;
}

.inbound-detail-block {
  margin-top: .75rem;
}

.inbound-detail-block p,
.inbound-detail-block li,
.inbound-audit p,
.inbound-thread p {
  color: var(--text-2);
  font-size: .86rem;
  line-height: 1.55;
}

.inbound-thread {
  display: grid;
  gap: .55rem;
  margin-top: .75rem;
}

.inbound-visibility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .7rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.inbound-visibility span {
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.inbound-visibility small {
  color: var(--text-3);
  font-size: .75rem;
  text-align: right;
}

.inbound-thread p {
  border-left: 1px solid rgba(255,255,255,.22);
  padding: .65rem .75rem;
  background: rgba(255,255,255,.035);
}

.inbound-thread strong,
.inbound-audit b,
.inbound-detail-block li b {
  color: var(--white);
  display: block;
  margin-bottom: .2rem;
}

.inbound-split {
  grid-template-columns: 1fr 1fr;
}

.inbound-metrics {
  grid-template-columns: repeat(3, 1fr);
}

.inbound-metrics span {
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .72rem;
  text-transform: uppercase;
}

.inbound-audit {
  display: grid;
  gap: .45rem;
  margin-top: .7rem;
}

.inbound-audit small {
  color: var(--text-3);
  display: block;
  margin-top: .15rem;
}

.inbound-detail-actions {
  justify-content: flex-end;
}

@keyframes inbound-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 24px rgba(255,255,255,.06); }
}

@keyframes overview-core-pulse {
  0%, 100% { box-shadow: inset 0 0 30px rgba(255,255,255,.03), 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: inset 0 0 46px rgba(255,255,255,.08), 0 0 36px rgba(255,255,255,.08); }
}

@keyframes preview-dot {
  0%, 100% { transform: scale(.72); opacity: .34; }
  45% { transform: scale(1.3); opacity: 1; }
}

.api-toggle {
  min-height: 46px;
  display: flex !important;
  align-items: center;
  gap: .65rem !important;
  padding: .75rem;
  border: 1px solid rgba(110,168,255,.22);
  background: rgba(110,168,255,.06);
}

.api-toggle input,
.transfer-options input,
.dash-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-blue);
}

.api-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem;
}

.api-note {
  margin-top: 1rem;
  color: var(--text-2);
  font-size: .88rem;
  line-height: 1.6;
}

.api-command,
.api-status-box {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,6,7,.55);
  padding: 1rem;
}

.api-command p {
  color: var(--text-2);
  margin-bottom: .7rem;
}

.api-command pre {
  overflow: auto;
  color: rgba(244,246,248,.9);
  font-family: var(--ff-mono);
  font-size: .76rem;
  line-height: 1.6;
}

.api-status-box {
  margin-top: 1rem;
  color: var(--accent-blue);
  font-family: var(--ff-mono);
  font-size: .8rem;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .dashboard-body { overflow: auto; }
  .auth-card,
  .dash-shell,
  .dash-two,
  .overview-hero,
  .overview-command,
  .overview-live-grid { grid-template-columns: 1fr; }
  .overview-command {
    grid-template-areas:
      "compose"
      "docs"
      "rules"
      "preview";
  }
  .overview-signal {
    min-height: 150px;
    grid-template-columns: 1fr 52px 1fr 52px 1fr;
  }
  .dash-sidebar {
    position: static;
    height: auto;
  }
  .dash-nav {
    grid-template-columns: repeat(3, 1fr);
  }
  .dash-main {
    height: auto;
  }
  .dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .inbound-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "compose"
      "board"
      "detail";
  }
  .inbound-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inbound-detail-grid,
  .inbound-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .auth-screen { padding: 1rem; }
  .auth-copy { min-height: auto; }
  .dash-main { padding: 1rem; }
  .live-card.is-fullscreen {
    inset: 8px;
    border-radius: 18px;
    padding: .75rem;
    max-height: calc(100vh - 16px);
  }
  .live-card-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .dash-live-bubble,
  .dash-live-bubble.role-system {
    width: 100%;
  }
  .dash-final-grid,
  .dash-final-contract {
    grid-template-columns: 1fr;
  }
  .dash-final-actions button {
    flex: 1 1 calc(50% - .5rem);
  }
  .dash-nav,
  .dash-stats,
  .sent-request,
  .transfer-grid,
  .inbound-form-grid,
  .inbound-board,
  .inbound-detail-grid,
  .inbound-split,
  .inbound-metrics {
    grid-template-columns: 1fr;
  }
  .transfer-options-modern {
    grid-template-columns: 1fr;
  }
  .sent-request-meta {
    grid-template-columns: 1fr;
  }
  .sent-request-actions {
    justify-content: stretch;
  }
  .sent-request-actions button {
    flex: 1;
  }
  .dash-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .dash-agent-stage {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .dash-agent-stage i {
    width: 1px;
    height: 28px;
    margin: 0 auto;
  }
}

/* ============== 404 ============== */
.not-found {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--section-py) + 6rem) var(--gutter) var(--section-py);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  min-height: 80vh;
  justify-content: center;
}

.nf-meta {
  display: flex;
  gap: 1.5rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--accent-bad);
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(176,72,72,0.3);
  background: rgba(176,72,72,0.04);
}

.nf-code {
  font-family: var(--ff-display);
  font-weight: 200;
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #5e646d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nf-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--white);
}

.nf-text {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 56ch;
  line-height: 1.7;
}

.nf-cta {
  display: flex;
  gap: 0.9rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.open {
    display: flex;
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 68px;
    flex-direction: column;
    gap: 0;
    padding: 0.6rem;
    background: rgba(5,6,7,0.96);
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  }
  .site-nav.open a {
    padding: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .site-nav.open a:last-child { border-bottom: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .demo-landing { grid-template-columns: 1fr; min-height: auto; }
  .demo-landing-visual { min-height: 360px; }
  .simple-topbar { grid-template-columns: 1fr; }
  .simple-state { grid-template-columns: repeat(4, 1fr); }
  .simple-meta { width: 100%; }
  .simple-grid,
  .simple-output { grid-template-columns: 1fr; }
  .simple-card { min-height: auto; }
  .simple-agent-stage { min-height: 360px; }
  .simple-agent.emitter { left: 50%; top: 18%; transform: translateX(-50%); }
  .simple-contract-core { top: 50%; }
  .simple-agent.receiver { left: 50%; right: auto; top: 82%; transform: translate(-50%, -50%); }
  .stage-flow.flow-a,
  .stage-flow.flow-b {
    left: 50%;
    width: 1px;
    height: 78px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(110,168,255,0.9), transparent);
  }
  .stage-flow.flow-a { top: 28%; }
  .stage-flow.flow-b { top: 59%; }
  .moving-packet { display: none; }
  .hero-visual { aspect-ratio: 1.2 / 1; }
  .hero-strip { grid-template-columns: 1fr; gap: 0.6rem; }
  .strip-sep { display: none; }
  .agents-diagram { grid-template-columns: 1fr; }
  .contract-pillar { width: 100%; flex-direction: column; }
  .pillar-line { width: 100%; height: 1px; flex: 0 0 40px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
  .security-grid { grid-template-columns: 1fr; }
  .flow-pipeline { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); margin: 0 auto; }
  .demo-grid { grid-template-columns: 1fr; }
  .lab-head { align-items: flex-start; flex-direction: column; }
  .lab-controls { justify-content: flex-start; }
  .lab-grid { grid-template-columns: 1fr; }
  .mvp-layout,
  .negotiation-layout,
  .trace-grid { grid-template-columns: 1fr; }
  .state-machine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-grid,
  .rule-controls,
  .receiver-options { grid-template-columns: 1fr; }
  .requirements-grid { grid-template-columns: 1fr; }
  .policy-mode { grid-template-columns: 1fr; }
  .outputs-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-switchboard { grid-template-columns: 1fr; }
  .scenario-rail { border-right: none; border-bottom: 1px solid var(--line); }
  .mission-panel { border-left: none; border-top: 1px solid var(--line); }
  .arch-grid { grid-template-columns: repeat(2, 1fr); }
  .contract-wrapper { grid-template-columns: 1fr; gap: 2rem; }
  .iface-grid { grid-template-columns: 1fr; }
  .final-grid { grid-template-columns: 1fr; gap: 2rem; }
  .uc-row { grid-template-columns: 60px 1fr; }
  .uc-tags { grid-column: 1 / -1; }
  .problem-flow { grid-template-columns: 1fr; }
  .problem-bridge { width: 100%; flex-direction: row; height: 60px; }
  .problem-bridge .bridge-line { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
  .why-stage {
    width: 100%;
    opacity: .42;
  }
  .why-slide,
  .why-slide-final {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem;
    padding-right: 5.2rem;
  }
  .why-copy h1 { max-width: 10ch; }
  .why-copy h2 { max-width: 11ch; }
  .why-chaos,
  .why-dialog,
  .why-gates,
  .why-contract,
  .why-impact,
  .why-timeline,
  .why-final-mark {
    min-height: 320px;
    max-width: 760px;
  }
  .why-gates,
  .why-impact,
  .why-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-gates article,
  .why-impact article {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-top, .footer-bottom { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .header-actions .status-pill { display: none; }
  .apple-slide {
    min-height: min(68vh, 600px);
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem;
    padding-right: 4.5rem;
  }
  .apple-copy h1,
  .apple-copy h2 {
    max-width: 12ch;
  }
  .apple-caption,
  .apple-compression,
  .apple-mini-panel,
  .apple-chat,
  .apple-output,
  .apple-signature {
    width: min(100%, 620px);
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .site-header { padding: 0.9rem 1rem; }
  .page-3d-canvas {
    opacity: .34;
    transform: translateY(-7vh) scale(1.12);
    mask-image: radial-gradient(ellipse 84% 64% at 50% 18%, #000 0%, transparent 72%);
  }
  .demo-landing { padding: 7rem 1rem 2rem; gap: 2rem; }
  .demo-landing-copy h1 { font-size: 3.2rem; }
  .demo-landing-visual { min-height: 280px; }
  .orbit-agent, .orbit-core { width: 92px; height: 92px; font-size: 0.58rem; }
  .simple-state { grid-template-columns: repeat(2, 1fr); }
  .simple-meta { flex-direction: column; }
  .simple-meta span { min-width: 0; }
  .simple-select-grid { grid-template-columns: 1fr; }
  .negotiate-header { align-items: flex-start; flex-direction: column; }
  .simple-conversation .conversation-card { width: 100%; }
  .simple-agent, .simple-contract-core { width: 144px; }
  .outputs-grid { grid-template-columns: 1fr; }
  .template-row { grid-template-columns: repeat(2, 1fr); }
  .input-grid { grid-template-columns: 1fr; }
  .result-metrics { grid-template-columns: repeat(2, 1fr); }
  .contract-preview div { grid-template-columns: 1fr; gap: 0.25rem; }
  .agent-node, .agent-core-node { width: 92px; font-size: 0.58rem; }
  .emitter-node { left: 3%; }
  .receiver-node { right: 3%; }
  .drop-zone { grid-template-columns: 1fr; }
  .drop-zone::before { display: none; }
  .agent-circuit { grid-template-columns: 1fr; gap: 0.8rem; }
  .agent-circuit i { height: 36px; width: 1px; margin: 0 auto; }
  .state-machine { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: 1fr; }
  .mission-kpis { grid-template-columns: 1fr; }
  .mission-console { min-height: auto; }
  .mission-map { min-height: 260px; }
  .scenario-btn { grid-template-columns: 32px 1fr; padding: 0.95rem; }
  .arch-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .hero-meta { font-size: 0.55rem; gap: 0.5rem; }
  .hero { padding-top: 7rem; }
  .section { padding: 4rem 1rem; }
  .why-rail {
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: .9rem;
    transform: none;
    display: flex;
    justify-content: center;
    gap: .35rem;
  }
  .why-rail-dot {
    width: 32px;
    height: 28px;
    font-size: .54rem;
  }
  .why-stage {
    opacity: .28;
    transform: none;
  }
  .why-stage-grid {
    inset: 16vh 0 18vh 0;
  }
  .why-stage-orbit,
  .why-core {
    transform: translate(-50%, -50%) scale(.72);
  }
  .why-agent {
    width: 128px;
    height: 84px;
    padding: .75rem;
    font-size: .72rem;
  }
  .why-agent-left { left: 3%; }
  .why-agent-right { right: 3%; }
  .why-slide,
  .why-slide-final {
    min-height: 100svh;
    padding: 6.5rem 1rem 5.5rem;
  }
  .why-copy h1 {
    font-size: clamp(3.2rem, 18vw, 4.8rem);
  }
  .why-copy h2 {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }
  .why-lede {
    font-size: .98rem;
  }
  .why-actions {
    flex-direction: column;
  }
  .why-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .why-chaos {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .chaos-filter {
    height: 58px;
    writing-mode: horizontal-tb;
  }
  .why-gates,
  .why-impact,
  .why-timeline {
    grid-template-columns: 1fr;
  }
  .why-gates article,
  .why-timeline article {
    min-height: 150px;
  }
  .why-contract div {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
  .why-final-mark {
    min-height: 300px;
  }
  .why-final-mark strong {
    font-size: 2.6rem;
  }
  .apple-header .header-actions {
    display: none;
  }
  .apple-presentation::before {
    background:
      radial-gradient(circle at 50% 35%, rgba(244,246,248,.036), transparent 18rem),
      linear-gradient(180deg, rgba(3,4,5,.82), rgba(3,4,5,.48) 42%, rgba(3,4,5,.96) 100%);
  }
  .why-3d-canvas {
    opacity: .44;
    transform: translateY(-5vh) scale(1.22);
  }
  .apple-rail {
    left: 50%;
    right: auto;
    bottom: 1rem;
    top: auto;
    transform: translateX(-50%);
    flex-direction: row;
  }
  .apple-rail .why-rail-dot:hover,
  .apple-rail .why-rail-dot.active {
    width: 28px;
    transform: translateY(-2px);
  }
  .apple-slide {
    min-height: min(72svh, 580px);
    padding: 7rem 1.05rem 4rem;
    align-content: start;
  }
  .apple-copy {
    max-width: 100%;
  }
  .apple-copy h1 {
    font-size: clamp(2.78rem, 10.6vw, 3.28rem);
    line-height: 1.02;
    max-width: 100%;
  }
  .apple-copy h2 {
    font-size: clamp(2.48rem, 10.2vw, 3.08rem);
    line-height: 1.02;
    max-width: 100%;
  }
  .apple-copy p:not(.apple-kicker) {
    font-size: .98rem;
    line-height: 1.62;
  }
  .apple-actions {
    flex-direction: column;
  }
  .apple-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .apple-caption {
    display: none;
  }
  .slogan-meter {
    top: 5.55rem;
    bottom: auto;
    left: 1rem;
    right: 1rem;
    width: auto;
    padding: .62rem;
    border-radius: 16px;
  }
  .slogan-meter-row {
    grid-template-columns: 68px 1fr 34px;
    gap: .5rem;
  }
  .slogan-meter-row span,
  .slogan-meter-row strong {
    font-size: .5rem;
  }
  .slogan-meter-row i {
    height: 4px;
  }
  .apple-compression {
    grid-template-columns: repeat(3, 1fr);
    border-radius: 22px;
  }
  .apple-compression strong {
    grid-column: span 1;
  }
  .apple-mini-panel {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 22px;
  }
  .apple-chat {
    border-radius: 22px;
  }
  .apple-chat p:nth-child(2),
  .apple-chat p:nth-child(3) {
    margin-inline: 0;
  }
  .apple-output {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .apple-output article {
    min-height: 116px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .apple-output article:last-child {
    border-bottom: 0;
  }
  .apple-signature {
    min-height: 220px;
    border-radius: 22px;
  }
  .apple-signature strong {
    font-size: 2.7rem;
  }
}

/* prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}