/* ============================================================
   AMADEUS AI — landing page
   Cold governs (midnight). Warm signs (copper), sparingly.
   Dark → light → dark. Three type voices. Honeycomb mesh.
   ============================================================ */

:root {
  --midnight: #272757;
  --midnight-2: #2f2f66;
  --midnight-3: #353574;
  --copper: #F38846;
  --copper-dark: #CE4F01;

  --paper: #f2f3f7;
  --white: #ffffff;
  --warm-white: #f4f2ec;
  --ink-dark: #f4f2ec;
  --ink-light: #272757;
  --muted-dark: #a6a4c6;
  --muted-light: #65657f;

  --rule-dark: rgba(244, 242, 236, 0.16);
  --rule-light: rgba(39, 39, 87, 0.14);

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Fustat", "Segoe UI", system-ui, sans-serif;
  --mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1140px;
  --readw: 62ch;
  --gutter: clamp(22px, 5.5vw, 84px);
  --section-y: clamp(142px, 18.5vh, 252px);

  --mesh-opacity: 0.06;
}

.theme-dark {
  --bg: var(--midnight);
  --surface: var(--midnight-2);
  --surface-2: var(--midnight-3);
  --ink: var(--ink-dark);
  --muted: var(--muted-dark);
  --rule: var(--rule-dark);
  --accent: var(--copper);
  color: var(--ink);
  background: var(--bg);
}
.theme-light {
  --bg: var(--paper);
  --surface: var(--white);
  --surface-2: #e9eaf1;
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --rule: var(--rule-light);
  --accent: var(--copper-dark);
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 17px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--midnight);
  color: var(--ink-dark);
  font-size: 1.05rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- register stacking ---------- */
.reg { position: relative; }
.reg--dark {
  --mesh-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='34.64'%20viewBox='0%200%2060%2034.64'%3E%3Cpath%20fill='none'%20stroke='%239a99c4'%20stroke-width='1'%20d='M20,0L10,17.32,-10,17.32,-20,0,-10,-17.32,10,-17.32Z M80,0L70,17.32,50,17.32,40,0,50,-17.32,70,-17.32Z M50,17.32L40,34.64,20,34.64,10,17.32,20,0,40,0Z M20,34.64L10,51.96,-10,51.96,-20,34.64,-10,17.32,10,17.32Z M80,34.64L70,51.96,50,51.96,40,34.64,50,17.32,70,17.32Z M50,-17.32L40,0,20,0,10,-17.32,20,-34.64,40,-34.64Z M50,51.96L40,69.28,20,69.28,10,51.96,20,34.64,40,34.64Z'/%3E%3C/svg%3E");
}
.reg--light {
  --mesh-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='34.64'%20viewBox='0%200%2060%2034.64'%3E%3Cpath%20fill='none'%20stroke='%23272757'%20stroke-width='1'%20d='M20,0L10,17.32,-10,17.32,-20,0,-10,-17.32,10,-17.32Z M80,0L70,17.32,50,17.32,40,0,50,-17.32,70,-17.32Z M50,17.32L40,34.64,20,34.64,10,17.32,20,0,40,0Z M20,34.64L10,51.96,-10,51.96,-20,34.64,-10,17.32,10,17.32Z M80,34.64L70,51.96,50,51.96,40,34.64,50,17.32,70,17.32Z M50,-17.32L40,0,20,0,10,-17.32,20,-34.64,40,-34.64Z M50,51.96L40,69.28,20,69.28,10,51.96,20,34.64,40,34.64Z'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section-pad { padding-block: var(--section-y); }
section { position: relative; }

/* ---------- type primitives ---------- */
.display {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.h-section {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.92rem, 3.7vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
.display em, .h-section em, .statement em, .reinforce em {
  font-style: italic;
  color: var(--accent);
}
.lede {
  font-size: clamp(1.06rem, 1.4vw, 1.26rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}
.body {
  color: var(--ink);
  max-width: var(--readw);
  text-wrap: pretty;
  margin: 0;
}
.body + .body { margin-top: 1.15em; }
.muted { color: var(--muted); }

.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.85em;
  margin: 0 0 26px;
}
.kicker .idx { color: var(--accent); }
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--accent); opacity: 0.7; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, padding 0.3s ease;
  border-bottom: 1px solid transparent;
  color: var(--warm-white);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-light);
  color: var(--ink-light);
  padding-block: 14px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 440;
  font-size: 1.28rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-left: 0.2em;
}
.wordmark .ai { color: var(--copper); }
.nav.is-stuck .wordmark .ai { color: var(--copper-dark); }
.nav-cta {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 9px 18px;
  opacity: 0.92;
  transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s;
}
.nav-cta:hover { color: var(--copper); border-color: var(--copper); opacity: 1; }
.nav.is-stuck .nav-cta:hover { color: var(--copper-dark); border-color: var(--copper-dark); }

/* ============================================================
   HERO (fixed; content deck slides over it)
   ============================================================ */
.hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 96px 0 44px;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(243,136,70,0.10), transparent 56%),
    radial-gradient(125% 90% at 18% 12%, var(--midnight-2) 0%, var(--midnight) 60%);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 78% 18%, rgba(243,136,70,0.05), transparent 60%);
  pointer-events: none;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--gutter);
  will-change: transform, opacity;
}
.hero-trace {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--copper);
  opacity: 0.62;
  margin: 0 0 30px;
}
.hero-over {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted-dark);
  display: block;
  margin-bottom: 22px;
}
.hero-h {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  max-width: 17ch;
}
.hero-sub {
  margin-top: 28px;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--paper);
  max-width: 52ch;
  text-wrap: pretty;
}
.hero-cta { margin-top: 40px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

.btn-primary {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight);
  background: var(--copper);
  padding: 15px 26px;
  border: 1px solid var(--copper);
  transition: background 0.25s ease, transform 0.25s ease;
}
.btn-primary:hover { background: #d6985e; transform: translateY(-1px); }
.btn-outline {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-white);
  padding: 15px 24px;
  border: 1px solid var(--rule-dark);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.btn-outline:hover { border-color: var(--copper); color: var(--copper); }

/* copper pulse edges — the law briefly made visible */
.hero-pulse { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-pulse line { stroke: var(--copper); stroke-width: 1.2; opacity: 0.2; }
@media (prefers-reduced-motion: no-preference) {
  .hero-pulse line { animation: edgePulse 6s ease-in-out infinite; }
  .hero-pulse line:nth-child(2) { animation-delay: 1.4s; }
  .hero-pulse line:nth-child(3) { animation-delay: 2.8s; }
  .hero-pulse line:nth-child(4) { animation-delay: 4.1s; }
  .hero-pulse line:nth-child(5) { animation-delay: 0.7s; }
}
@keyframes edgePulse { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.55; } }

/* ============================================================
   CONTENT DECK (slides up over the fixed hero)
   ============================================================ */
.deck-light {
  position: relative;
  z-index: 2;
  margin-top: 100svh;
  background: var(--white);
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  box-shadow: 0 -34px 80px -30px rgba(12, 12, 36, 0.6);
}
.deck-dark { position: relative; z-index: 2; }
.deck-dark .block { background: transparent; }

.block { padding-block: var(--section-y); background: #eceef4; --card: var(--white); }
.block-tight { padding-block: clamp(82px, 11vh, 150px); }
.block.tone-white { background: var(--white); --card: #eceef4; }
.modes, .moat, .engine-grid { box-shadow: 0 24px 56px -38px rgba(18, 18, 46, 0.42); }

/* ---------- generic section head ---------- */
.lede-line { margin-top: 22px; }

/* ---------- section header with a small conceptual mark ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(24px, 4vw, 64px); margin-bottom: clamp(10px, 2.2vh, 30px); }
.sec-mark { flex: 0 0 auto; color: var(--ink); margin-top: 6px; }
.sec-mark svg { display: block; width: clamp(52px, 5.5vw, 74px); height: auto; }
@media (max-width: 640px) { .sec-mark { display: none; } }

/* ============================================================
   PROPERTY STRIP (claim asserts · property proves)
   ============================================================ */
.prop-strip {
  margin-top: clamp(34px, 5vh, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 4vw, 56px);
  max-width: 920px;
}
.prop-strip--bare { border-top: none; padding-top: 0; }
.prop-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.prop-value { margin: 0; color: var(--ink); max-width: 52ch; text-wrap: pretty; }

/* ============================================================
   STATEMENT island
   ============================================================ */
.statement-block { text-align: center; padding-block: clamp(120px, 17vh, 224px); background-color: #e1e3ed; background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.statement {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin: 0 auto;
  text-wrap: balance;
}
.statement em { font-style: italic; font-weight: 560; color: var(--accent); }
.statement { max-width: none; }
.stmt-line2 { white-space: normal; }
@media (min-width: 600px) { .stmt-line2 { white-space: nowrap; } }
/* optional dark register for the statement island */
body[data-statement="dark"] .statement-block {
  background: var(--midnight);
  color: var(--warm-white);
  --accent: var(--copper);
  border-radius: 22px;
  margin-inline: var(--gutter);
  margin-block: clamp(40px, 6vh, 80px);
  padding-inline: 24px;
}

/* ============================================================
   SECTION 4 — two modes (cards)
   ============================================================ */
.modes {
  margin-top: clamp(40px, 6vh, 68px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.mode-card {
  background: var(--card);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mode-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.mode-title {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.5rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
}
.mode-desc { margin: 0; color: var(--muted); font-size: 0.99rem; line-height: 1.55; }
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION 5 — the moat (two columns)
   ============================================================ */
.moat {
  margin-top: clamp(44px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.moat-col {
  background: var(--card);
  padding: clamp(30px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.moat-col--hot { background: var(--card); }
.moat-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.moat-col--hot .moat-label { color: var(--accent); }
.moat-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.moat-col--hot .moat-num { color: var(--accent); }
.moat-body { margin: 0; color: var(--muted); font-size: 0.99rem; line-height: 1.55; }
.moat-close { margin: clamp(34px, 5vh, 52px) 0 0; max-width: 78ch; color: var(--ink); font-size: 1.06rem; text-wrap: pretty; }
@media (max-width: 760px) { .moat { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION 7 — verticals (stacked, iconed register)
   ============================================================ */
.verticals { margin-top: clamp(40px, 5.5vh, 66px); }
.vert {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.6vw, 32px);
  padding: clamp(22px, 3vh, 36px) 0;
  border-top: 1px solid var(--rule);
}
.vert:last-child { border-bottom: 1px solid var(--rule); }
.vert-ico { width: 34px; height: 34px; color: var(--ink); transition: color 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.vert-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vert-main { min-width: 0; }
.vert-name {
  font-family: var(--serif);
  font-weight: 440;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
  transition: color 0.3s ease;
}
.vert-sub { display: block; margin-top: 12px; color: var(--muted); font-size: 1.02rem; line-height: 1.5; max-width: 58ch; text-wrap: pretty; }
.vert-num { font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.2em; color: var(--muted); align-self: start; padding-top: 6px; }
.vert-group { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin: clamp(22px, 3.4vh, 34px) 0 0; }

.vert--anchor { align-items: start; }
.vert--anchor .vert-ico { color: var(--accent); margin-top: 4px; }
.vert--anchor .vert-name { color: var(--accent); }
.vert--anchor .vert-num { color: var(--accent); }

.vert:hover .vert-name { color: var(--accent); }
.vert:hover .vert-ico { color: var(--accent); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .vert:hover .vert-ico { transform: none; } }
@media (max-width: 560px) {
  .vert { grid-template-columns: 38px 1fr auto; gap: 15px; }
  .vert-ico { width: 28px; height: 28px; }
}

/* ============================================================
   ENGINES (kept)
   ============================================================ */
.engines-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.engines-head .h-section { margin-top: 18px; max-width: 16ch; }
.engines-note { max-width: 34ch; color: var(--muted); font-size: 0.96rem; }
@media (min-width: 760px) { .engines-note { margin-top: calc(1.2em + 27px); } }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: 0.8; }

.engine-grid {
  margin-top: clamp(46px, 6vh, 80px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.engine {
  background: var(--card);
  padding: clamp(30px, 3.2vw, 48px);
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: clamp(20px, 2.4vw, 38px);
  align-items: start;
  transition: background 0.3s ease;
}
.engine:hover { background: var(--surface-2); }
.engine-lattice { width: 124px; height: 124px; color: var(--ink-light); }
.engine-lattice svg { width: 100%; height: 100%; overflow: visible; }
.engine-node { fill: var(--copper-dark); }
.engine-node--hot { fill: var(--copper-dark); }
.engine-edge { stroke: var(--copper-dark); stroke-width: 1.4; opacity: 0.62; fill: none; }
.engine-body { padding-top: 4px; }
.engine-name { font-family: var(--mono); font-size: 1.16rem; font-weight: 600; letter-spacing: 0.26em; color: var(--ink-light); margin: 0; }
.engine-prop { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-dark); margin: 12px 0 16px; }
.engine-desc { color: var(--muted-light); font-size: 0.99rem; line-height: 1.56; max-width: 42ch; }
.engine-tag { margin-top: 18px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted-light); display: flex; gap: 10px; align-items: center; }
.engine-tag .dot { width: 5px; height: 5px; background: var(--copper-dark); border-radius: 50%; }
@media (max-width: 880px) { .engine-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .engine { grid-template-columns: 1fr; } .engine-lattice { width: 104px; height: 104px; } }

/* ---------- COCKPIT — the single plane over all of it ---------- */
.cockpit {
  margin-top: 16px;
  background: var(--midnight);
  color: var(--warm-white);
  border: 1px solid var(--midnight);
  padding: clamp(30px, 3.2vw, 48px);
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  box-shadow: 0 24px 56px -34px rgba(18, 18, 46, 0.5);
}
.cockpit-icon { width: 124px; height: 124px; }
.cockpit-icon svg { width: 100%; height: 100%; overflow: visible; }
#lat-cockpit .engine-edge { stroke: #cfd0e6; opacity: 0.7; }
#lat-cockpit .engine-node { fill: #e7e8f4; }
#lat-cockpit .engine-node--hot { fill: var(--copper); }
.cockpit-name { color: var(--warm-white); }
.cockpit-prop { color: var(--copper); }
.cockpit-desc { color: var(--muted-dark); font-size: 0.99rem; line-height: 1.56; max-width: 64ch; margin: 0; }
@media (max-width: 480px) { .cockpit { grid-template-columns: 1fr; } .cockpit-icon { width: 104px; height: 104px; } }

/* ============================================================
   SECTION 8 — closing (dark, centered)
   ============================================================ */
.closing { text-align: center; }
.closing .display { max-width: 20ch; margin: 0 auto; }
.closing .lede { margin: clamp(48px, 7vh, 80px) auto 0; text-align: center; max-width: 64ch; }
.reinforce {
  margin: 30px auto 0;
  max-width: 48ch;
  color: var(--copper);
  font-size: 1.12rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.closing .hero-cta { justify-content: center; margin-top: 42px; }

/* ============================================================
   FOOTER (dark, shares surface with closing)
   ============================================================ */
.footer { padding: 80px var(--gutter) 32px; border-top: 1px solid var(--rule-dark); }
.footer-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer .wordmark { font-size: 1.18rem; }
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.footer-social { display: inline-flex; align-items: center; gap: 8px; }
.footer-social svg { flex-shrink: 0; }
.footer-loc {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-loc .flag { font-size: 0.95rem; line-height: 1; }
.footer-trace-row {
  max-width: var(--maxw);
  margin: 80px auto 0;
  text-align: center;
}
.footer-trace { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted-dark); }
.footer-link { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--copper); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }
.footer-link:hover { border-color: var(--copper); }

/* ============================================================
   REVEAL (robust against render-throttled iframes — base is visible)
   ============================================================ */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}
html.reveal-armed [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-inner { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .nav-cta { display: none; }
  .prop-strip { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   AMBIENT MOTION
   ============================================================ */
@keyframes amaPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.34); opacity: 0.6; } }
@keyframes amaSpin { to { transform: rotate(360deg); } }
@keyframes amaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes amaBlink { 0%, 49% { opacity: 0.62; } 50%, 100% { opacity: 0; } }

/* section marks: gentle float + pulsing copper points + slow spin */
.sec-mark { animation: amaFloat 7s ease-in-out infinite; }
.sec-head:nth-of-type(2n) .sec-mark { animation-duration: 8.6s; animation-delay: -2.4s; }
.sec-mark g[fill="#CE4F01"] circle {
  transform-box: fill-box; transform-origin: center;
  animation: amaPulse 3s ease-in-out infinite;
}
.sec-mark .amaspin { transform-box: fill-box; transform-origin: center; animation: amaSpin 26s linear infinite; }
.sec-mark .amaspin-slow { transform-box: fill-box; transform-origin: center; animation: amaSpin 46s linear infinite; }

/* sovereignty mark — the intelligence travels, but never crosses the perimeter */
@keyframes amaTraverse { 0%, 100% { transform: translateX(-16px); } 50% { transform: translateX(16px); } }
.sec-mark g[fill="#CE4F01"] circle.perimeter-dot { animation: amaTraverse 4.6s ease-in-out infinite; }

/* engine + cockpit focal nodes breathe */
.engine-node--hot { transform-box: fill-box; transform-origin: center; animation: amaPulse 3.4s ease-in-out infinite; }

/* hero overline: blinking cursor */
.hero-over::after { content: "▋"; margin-left: 5px; color: var(--muted-dark); animation: amaBlink 1.1s steps(1, end) infinite; }

/* card lift on hover */
.mode-card, .moat-col, .engine {
  transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-card:hover, .moat-col:hover, .engine:hover { transform: translateY(-3px); }

/* ---------- structure assembles (driven by motion.js) ---------- */
/* while a lattice or mark draws itself in, hold the ambient animations
   so the JS pop/scale isn't overridden mid-assembly */
.motion-armed .engine-node,
.motion-armed .engine-node--hot,
.motion-armed g[fill="#CE4F01"] circle { animation: none !important; }

/* ---------- emphasis underlines itself ---------- */
.hero-h em, .closing .display em, .statement em { position: relative; }
.hero-h em::after,
.closing .display em::after,
.statement em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.04em;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.45s;
}
.statement em::after { transform-origin: center; bottom: 0.04em; }
.hero-h.is-in em::after,
.closing .display.is-in em::after,
.statement.is-in em::after { transform: scaleX(1); }

/* ---------- nav settles in on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .nav { animation: navDrop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .sec-mark, .sec-mark *, .engine-node--hot, .hero-over::after { animation: none !important; }
  .mode-card:hover, .moat-col:hover, .engine:hover { transform: none; }
  .nav { animation: none !important; }
  .hero-h em::after, .closing .display em::after, .statement em::after { transition: none; transform: scaleX(1); }
}

/* ============================================================
   MAESTRO PATTERN — radial-hex motif, subtle texture on a surface
   ============================================================ */
.pattern-maestro {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%3E%3Cg%20fill='none'%20stroke='rgba(39,39,87,0.10)'%20stroke-width='1'%3E%3Cpath%20d='M69,44L56.5,65.65%2031.5,65.65%2019,44%2031.5,22.35%2056.5,22.35Z'/%3E%3Cpath%20d='M44,44L69,44M44,44L56.5,65.65M44,44L31.5,65.65M44,44L19,44M44,44L31.5,22.35M44,44L56.5,22.35'/%3E%3C/g%3E%3Ccircle%20cx='44'%20cy='44'%20r='1.7'%20fill='rgba(168,102,46,0.26)'/%3E%3C/svg%3E");
  background-size: 88px 88px;
  background-position: center;
}