:root {
  --navy: #0A1430;
  --navy-2: #101e42;
  --navy-3: #071024;
  --panel: rgba(10, 20, 48, 0.78);
  --panel-2: rgba(18, 36, 78, 0.82);
  --blue: #1261FF;
  --cyan: #7EC8FF;
  --orange: #FF6A00;
  --paper: #F2F4F8;
  --green: #7EC8FF;
  --amber: #FF6A00;
  --gold: #FFB36B;
  --pink: #7EC8FF;
  --ink: #F2F4F8;
  --muted: #a9b8cf;
  --soft: rgba(242, 244, 248, 0.08);
  --line: rgba(126, 200, 255, 0.24);
  --green-line: rgba(255, 106, 0, 0.34);
  --orange-line: rgba(255, 106, 0, 0.34);
  --shadow: 0 24px 80px rgba(0,0,0,0.48);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
  background:
    linear-gradient(110deg, rgba(18,97,255,0.15), transparent 34%),
    linear-gradient(245deg, rgba(255,106,0,0.10), transparent 42%),
    linear-gradient(135deg, #071024 0%, var(--navy) 46%, #08122a 100%);
  min-height: 100vh;
}

/* The fixed 45deg/135deg crosshatch that used to live here was removed
   (founder review: reads as a repeated spiky/"porcupine" texture behind
   every section as you scroll, not reduced-in-opacity — the whole rule is
   gone, not dimmed). Nothing replaces it; the plain gradient body
   background above is the resting surface now. */

a { color: var(--cyan); }

.page {
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
  padding: 24px 0 72px;
  position: relative;
  z-index: 1;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: #05070d;
  padding: 10px 16px;
  border-radius: 8px;
  font: 700 13px var(--mono);
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(242,244,248,0.1);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(10,20,48,0.88), rgba(7,16,36,0.6)),
    radial-gradient(circle at 8% 0%, rgba(126,200,255,0.16), transparent 36%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px);
}

.site-nav::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126,200,255,.34), rgba(255,106,0,.72), transparent);
  transform: translateX(-42%);
  opacity: .54;
  animation: nav-signal-rail 5.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes nav-signal-rail {
  0%, 18% { transform: translateX(-52%); opacity: .22; }
  52% { opacity: .72; }
  86%, 100% { transform: translateX(52%); opacity: .24; }
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--ink);
  font: 900 17px/1 var(--sans);
  letter-spacing: 0;
}

.nav-brand img { height: 40px; width: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 700 13px/1 var(--sans);
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 9px 10px;
  border-radius: 999px;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--ink);
  background: rgba(126,200,255,0.08);
}

.nav-cta {
  border: 1px solid var(--orange-line);
  background: linear-gradient(135deg, rgba(255,106,0,0.22), rgba(255,106,0,0.08));
  color: #fff4ec !important;
  padding: 10px 16px !important;
  border-radius: 999px;
  font-weight: 800 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 10px 28px rgba(255,106,0,0.12);
}

/* Hero */
.hero {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(10,20,48,0.94), rgba(7,16,36,0.82)),
    linear-gradient(115deg, rgba(18,97,255,0.16), transparent 42%),
    linear-gradient(300deg, rgba(255,106,0,0.12), transparent 46%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.hero-inner { padding: clamp(34px, 6vw, 72px); position: relative; }

.kicker {
  color: var(--orange);
  font: 800 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 18px;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 7.4vw, 82px);
  line-height: 1.02;
  letter-spacing: 0;
  max-width: 980px;
  text-shadow: 0 10px 34px rgba(0,0,0,0.36);
}

.gradient-text {
  background: linear-gradient(90deg, #fff 0%, var(--cyan) 45%, var(--orange) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero spine: the canonical three-line tagline. Each line is a block so
   the H1's own font-size/line-height clamp keeps doing the sizing work
   unchanged — this only adds stacking and the stamp treatment. */
.spine-line { display: block; }
.spine-line-build {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}

/* The "Not Complexity." stamp: a contrast mark associated with "Build
   Capability.", not a fourth headline line. Small, monospace, bordered,
   faintly rotated — reads as an annotation stamped beside the line, not
   as body text continuing the sentence. Kept out of the gradient and out
   of the H1's own type scale on purpose. */
.spine-stamp {
  display: inline-block;
  font: 800 13px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid rgba(255,106,0,0.55);
  border-radius: 4px;
  padding: 6px 10px;
  transform: rotate(-3deg);
  white-space: nowrap;
  text-shadow: none;
}
@media (max-width: 560px) {
  .spine-stamp { font-size: 11px; padding: 5px 8px; transform: rotate(-2deg); }
}

.hero-sub {
  margin: 22px 0 0;
  max-width: 780px;
  color: #d9e8f9;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  text-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 8px;
  font: 800 14px/1 var(--sans);
  text-decoration: none;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}

/* Touch Tap Pulse: button-contained pressed feedback, the mobile equivalent
   of desktop hover. Governed by the same transition, so prefers-reduced-motion
   collapses it to an instant state change via the global override below. */
.btn:active { transform: scale(0.97); filter: brightness(0.95); }

.btn-primary {
  background: var(--orange);
  color: #160900;
  box-shadow: 0 12px 30px rgba(255,106,0,0.24);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-secondary {
  border-color: rgba(234,244,255,0.22);
  color: var(--ink);
  background: rgba(255,255,255,0.04);
}
.btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* Sections */
.section {
  margin-top: 28px;
  border: 1px solid rgba(234,244,255,0.14);
  background: rgba(9, 19, 44, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 42px rgba(0,0,0,0.22);
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.section-header {
  padding: 24px 28px 0;
}

.eyebrow {
  color: var(--cyan);
  font: 800 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}

h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.01em; color: #fff; }

p { margin: 0 0 14px; color: #c9d8ea; }

.body { padding: 20px 28px 28px; }

.lead {
  font-size: 18px;
  line-height: 1.55;
  color: #dceaff;
  max-width: 820px;
}

.quote-card {
  border-left: 4px solid var(--orange);
  background: rgba(255,106,0,0.08);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 20px 0;
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.01em;
}

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

.card {
  border: 1px solid rgba(234,244,255,0.14);
  border-radius: var(--radius-md);
  padding: 20px;
  background: rgba(7,16,36,0.62);
  min-height: 100%;
}

.card.accent-cyan { border-color: rgba(53,217,255,0.26); background: rgba(53,217,255,0.055); }
.card.accent-green { border-color: rgba(18,97,255,0.28); background: rgba(18,97,255,0.065); }
.card.accent-amber { border-color: rgba(248,161,58,0.30); background: rgba(248,161,58,0.06); }

.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.list li { position: relative; padding-left: 26px; color: #cbd9eb; }
.list li::before {
  content: "//";
  position: absolute;
  left: 0;
  color: var(--orange);
  font: 900 12px/1.6 var(--mono);
}

.signal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.signal {
  border: 1px solid rgba(126,200,255,0.24);
  background: rgba(7,16,36,0.58);
  border-radius: 8px;
  padding: 13px 14px;
  color: #eef6ff;
  font-weight: 700;
}

.method-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  font: 800 13px/1 var(--mono);
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.method-flow .step {
  border: 1px solid rgba(53,217,255,0.28);
  background: rgba(53,217,255,0.07);
  border-radius: 999px;
  padding: 9px 14px;
  color: #eaf9ff;
}

.method-flow .arrow { color: var(--orange); opacity: 0.86; }

.proof-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }

/* Trust/Proof: VIP Systems leads as a larger featured card with a
   media-ready slot for the future real orientation/action-loop capture;
   Rock Roofing sits secondary beside it. */
.proof-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
.proof-lead { display: flex; flex-direction: column; }
.proof-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  margin: 0 0 16px;
  border: 1px solid rgba(53,217,255,0.22);
  background:
    radial-gradient(circle at 30% 30%, rgba(53,217,255,0.14), transparent 60%),
    linear-gradient(135deg, rgba(7,16,36,0.9), rgba(10,20,48,0.7));
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  overflow: hidden;
}
.proof-media-glyph {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(126,200,255,0.4);
  color: var(--cyan);
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(126,200,255,0.08);
}
.proof-media-caption {
  max-width: 82%;
  font: 700 11px/1.4 var(--mono);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 850px) {
  .proof-feature { grid-template-columns: 1fr; }
}

/* Mobile trailer-cut recomposition. Reuses native <details>/<summary> —
   both ship WITHOUT the `open` attribute, so mobile gets a real, native
   collapse/expand by default. Desktop is forced open by the matchMedia
   sync in index.html's script (a closed <details>'s content is
   suppressed at the paint level in Chromium, not just via `display`, so
   a CSS-only override does not actually paint). This block only styles
   the toggle chrome; it does not attempt to force content visibility. */
.proof-more { margin-top: 14px; }

/* Fifth, honestly-inactive proof slot reserved for a real environment
   John will supply later. Dashed border, muted text, no accent color so
   it never reads as a completed claim next to the real environments. */
.proof-pending {
  grid-column: 1 / -1;
  border-style: dashed;
  border-color: rgba(234,244,255,0.2);
  background: transparent;
  opacity: 0.75;
}
.proof-pending h3 { color: var(--muted); }
.proof-grid .proof-pending::before { display: none; }
.proof-grid .proof-pending:hover,
.proof-grid .proof-pending:focus-within,
.proof-grid .proof-pending:active {
  transform: none;
  border-color: rgba(234,244,255,0.2);
  box-shadow: none;
}
.mobile-collapsible summary {
  list-style: none;
  cursor: default;
}
.mobile-collapsible summary::-webkit-details-marker { display: none; }
.mobile-collapsible summary::marker { content: ""; }
.mobile-collapsible summary h3 { display: inline; margin: 0; }

@media (min-width: 851px) {
  /* Desktop: no toggle affordance — the JS sync above keeps this open. */
  .mobile-collapsible summary { pointer-events: none; }
}

@media (max-width: 850px) {
  /* Mobile: a real, visible toggle so a visitor can collapse the
     secondary half of Offer/Proof instead of scrolling past a wall
     of cards. Nothing here removes content — only what's already
     open by default can be closed, and it reopens on tap. */
  .mobile-collapsible summary {
    cursor: pointer;
    padding: 4px 0 4px 20px;
    position: relative;
  }
  .mobile-collapsible summary::before {
    content: "▾";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-size: 13px;
    transition: transform .18s ease;
  }
  .mobile-collapsible:not([open]) summary::before { transform: rotate(-90deg); }
  .proof-more summary {
    font: 800 12px/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cyan);
    padding-left: 20px;
  }
  .proof-more[open] .proof-grid { margin-top: 12px; }
}

.footer {
  margin-top: 30px;
  padding: 28px;
  border: 1px solid rgba(255,106,0,0.22);
  border-radius: var(--radius-lg);
  background: rgba(255,106,0,0.055);
  color: var(--muted);
  font-size: 13px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(234,244,255,0.10);
}

.footer strong { color: var(--orange); }
.footer-brand { display: grid; gap: 5px; }
.footer-tagline {
  color: rgba(126,200,255,.72);
  font: 800 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* Forms */
.field { margin-bottom: 18px; display: grid; gap: 6px; }
.field label { font: 700 13px/1.2 var(--sans); color: var(--ink); }
.field .hint { font-size: 12px; color: var(--muted); }

.field input,
.field select,
.field textarea {
  font: 15px/1.4 var(--sans);
  color: var(--ink);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(234,244,255,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.field textarea { min-height: 100px; resize: vertical; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: rgba(255,79,79,0.6);
  outline-color: rgba(255,79,79,0.6);
}

.field-error {
  display: none;
  color: #ffb3b3;
  font: 700 12px/1.4 var(--sans);
}
.field-error.visible { display: block; }

.btn[disabled] { opacity: 0.65; cursor: progress; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }

.form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font: 700 13px/1.4 var(--sans);
  display: none;
}
.form-status.visible { display: block; }
.form-status.ok { background: rgba(126,200,255,0.12); border: 1px solid rgba(126,200,255,0.34); color: #eef8ff; }
.form-status.err { background: rgba(255,79,79,0.12); border: 1px solid rgba(255,79,79,0.4); color: #ffe6e6; }

/* Simple content pages (privacy/terms) */
.doc-body h2 { margin-top: 26px; }
.doc-body p, .doc-body li { color: #cdddef; }
.doc-body ul { padding-left: 22px; }

@media (max-width: 850px) {
  .grid-2, .grid-3, .proof-grid, .form-grid, .signal-list { grid-template-columns: 1fr; }
  .footer-top, .footer-bottom { display: block; }
  .footer-links { margin-top: 12px; }
  .nav-links { gap: 14px; }
  .nav-links .nav-label { display: none; }
}

@media (max-width: 560px) {
  .nav-links { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 3px; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- */
/* Signal Fox — interactive artifact component                      */
/* ---------------------------------------------------------------- */

.hero-inner.has-fox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 56px);
}

.hero-copy {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.hero#hero .hero-copy::before {
  content: "";
  position: absolute;
  inset: -18px -20px -20px;
  z-index: -1;
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 10%, rgba(18,97,255,0.16), transparent 42%),
    linear-gradient(135deg, rgba(7,16,36,0.68), rgba(7,16,36,0.26));
  border: 1px solid rgba(242,244,248,0.08);
  box-shadow: 0 18px 54px rgba(0,0,0,0.26);
}

.signal-fox-system {
  --fox-size: 300px;
  --relay-blue: #7EC8FF;
  --signal-orange: #FF6A00;
  --blueprint-blue: #1261FF;
  --deep-navy: #0A1430;
  position: relative;
  width: var(--fox-size);
  height: var(--fox-size);
  flex: none;
  display: grid;
  place-items: center;
  pointer-events: none;
  isolation: isolate;
}

.signal-fox-system.size-echo { --fox-size: 220px; }
.signal-fox-system.size-mini {
  --fox-size: 118px;
  position: fixed;
  right: max(22px, calc((100vw - 1120px) / 2 + 18px));
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease;
}

@media (max-width: 1180px) {
  .signal-fox-system.size-mini { display: none; }
}
.signal-fox-system.size-mini.is-visible { opacity: 1; visibility: visible; }

/* Mobile Signal checkpoints: anchored, in-flow markers that give mobile the
   same narrative state confirmation the desktop-only floating HUD provides
   above 1180px. Never fixed/floating — explicitly ruled out for mobile. */
.signal-fox-system.size-checkpoint {
  --fox-size: 84px;
  display: none;
  margin: 0 0 14px;
}
@media (max-width: 1180px) {
  .signal-fox-system.size-checkpoint { display: grid; }
}
@media (max-width: 560px) {
  .signal-fox-system.size-checkpoint { --fox-size: 68px; }
}

/* Restraint pass: the small in-flow checkpoints and the persistent desktop
   HUD are the instances an operator sees repeatedly while scrolling, so
   they're the ones most at risk of reading as a spinning toy rather than a
   quiet guide. Slowed here, not on the hero or final-echo bookends, which
   are seen once each and can afford to feel more alive. This is a static
   per-element duration (set once, never changed after load), not a
   per-state override — see the "duration overrides removed" note further
   down for why a live per-state duration change is avoided instead. */
.signal-fox-system.size-checkpoint .signal-orbit,
.signal-fox-system.size-mini .signal-orbit { animation-duration: 34s; }
.signal-fox-system.size-checkpoint .signal-orbit-secondary,
.signal-fox-system.size-mini .signal-orbit-secondary { animation-duration: 26s; }
.signal-fox-system.size-checkpoint .signal-sweep,
.signal-fox-system.size-mini .signal-sweep { animation-duration: 9s; }

.signal-orbit,
.signal-orbit-secondary {
  position: absolute;
  inset: 0;
  /* Verified concentric: .signal-fox-system is a square (width/height both
     var(--fox-size)) at every breakpoint, so inset:0 centers this circle
     exactly. transform-origin is explicit rather than relying on the
     50% 50% default, since state rules below rotate/translate this layer. */
  transform-origin: 50% 50%;
  border-radius: 50%;
  border: 2px solid var(--relay-blue);
  color: var(--relay-blue);
  opacity: 0.35;
  transition: opacity .6s ease, transform .8s ease, border-color .6s ease;
}

.signal-orbit::before,
.signal-orbit-secondary::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    conic-gradient(from 40deg, transparent 0 48deg, currentColor 54deg 66deg, transparent 72deg 360deg);
  opacity: 0.34;
  mask: radial-gradient(circle, transparent 66%, #000 67% 72%, transparent 73%);
}

.signal-orbit { animation: fox-orbit-spin 22s linear infinite; }

.signal-orbit-secondary {
  inset: 9%;
  border-color: var(--signal-orange);
  color: var(--signal-orange);
  border-style: dashed;
  opacity: 0.28;
  animation: fox-orbit-spin-rev 16s linear infinite;
}

.signal-sweep {
  position: absolute;
  inset: -6%;
  transform-origin: 50% 50%;
  border-radius: 50%;
  /* Widened + eased from the prior 0-42deg hard-edged spike (which read as
     a once-per-rotation flash) to a ~130deg gradual rise/peak/decay, with
     a long transparent rest arc. Peak alpha trimmed slightly (0.46 -> 0.40)
     to stay restrained rather than a bright strobe. */
  background: conic-gradient(from 0deg,
    rgba(255,106,0,0) 0deg,
    rgba(255,106,0,0.22) 30deg,
    rgba(255,106,0,0.40) 55deg,
    rgba(126,200,255,0.16) 78deg,
    rgba(255,106,0,0.16) 100deg,
    rgba(255,106,0,0) 130deg,
    transparent 360deg
  );
  animation: fox-sweep-spin 5.5s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.8;
  transition: opacity .6s ease;
}

.signal-core {
  position: relative;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #142451, #0A1430 72%);
  box-shadow: 0 0 0 1px rgba(126,200,255,0.26), 0 20px 60px rgba(0,0,0,0.5);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: fox-breathe 6s ease-in-out infinite;
  transition: box-shadow .6s ease, transform .5s ease;
  transform: perspective(700px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.signal-core::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(126,200,255,0.18);
  border-radius: 50%;
  opacity: 0.65;
}

.signal-core::after {
  content: "";
  position: absolute;
  width: 115%;
  height: 1px;
  left: -8%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(126,200,255,0.44), rgba(255,106,0,0.7), transparent);
  opacity: 0.38;
  transform: rotate(-8deg);
  transition: opacity .45s ease, transform .45s ease;
}

/* The Signal Fox marks are wrapped in <picture> for WebP-with-PNG-fallback.
   display:contents keeps the wrapper out of the box tree entirely, so the
   <img> remains the direct flex/grid child it was before and every existing
   selector (.nav-brand img, img.signal-fox) applies unchanged. */
picture {
  display: contents;
}

img.signal-fox {
  width: 78%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  position: relative;
  z-index: 1;
}

.signal-points {
  position: absolute;
  inset: -14%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.signal-points i {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: var(--relay-blue);
  box-shadow: 0 0 8px rgba(126,200,255,0.8);
}
.signal-points i:nth-child(1) { top: 2%; left: 50%; }
.signal-points i:nth-child(2) { top: 50%; left: 98%; }
.signal-points i:nth-child(3) { top: 98%; left: 50%; }
.signal-points i:nth-child(4) { top: 50%; left: 2%; }

.signal-status {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font: 800 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--relay-blue);
  opacity: 0.7;
  white-space: nowrap;
}
.signal-fox-system.size-mini .signal-status,
.signal-fox-system.size-echo .signal-status,
.signal-fox-system[data-fox-role="hero"] .signal-status { display: none; }

@keyframes fox-orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fox-orbit-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes fox-sweep-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fox-breathe {
  0%, 100% { transform: perspective(700px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) scale(1); }
  50% { transform: perspective(700px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) scale(1.02); }
}

/* State: hero / signal detected — defaults above already express this state */

/* State: problem / fragmented
   animation-duration overrides removed (were: orbit 30s, orbit-secondary
   21s, sweep 8s) — changing duration on a running infinite animation snaps
   its angular position; opacity/transform/filter differences alone convey
   the state change without disturbing rotation. */
[data-fox-state="problem"] .signal-orbit { transform: rotate(9deg); opacity: 0.22; }
[data-fox-state="problem"] .signal-orbit-secondary { transform: translate(3%, -3%) rotate(-16deg); opacity: 0.16; }
[data-fox-state="problem"] .signal-sweep { opacity: 0.3; filter: blur(1px); }
[data-fox-state="problem"] .signal-core::after { opacity: 0.16; transform: rotate(-21deg) translateX(5%); }

/* State: what CE does / connected (animation-duration 18s override removed) */
[data-fox-state="connected"] .signal-orbit,
[data-fox-state="connected"] .signal-orbit-secondary { opacity: 0.5; transform: none; }
[data-fox-state="connected"] .signal-sweep { opacity: 0.6; }
[data-fox-state="connected"] .signal-core::after { opacity: 0.48; transform: rotate(-8deg); }

/* State: offer / activated (animation-duration 3.2s override removed) */
[data-fox-state="activated"] .signal-core { box-shadow: 0 0 0 1px rgba(255,106,0,0.55), 0 0 46px rgba(255,106,0,0.3), 0 20px 60px rgba(0,0,0,0.5); }
[data-fox-state="activated"] .signal-sweep { opacity: 1; }
[data-fox-state="activated"] .signal-orbit-secondary { border-color: var(--signal-orange); opacity: 0.55; }
[data-fox-state="activated"] .signal-core::after { opacity: 0.78; background: linear-gradient(90deg, transparent, rgba(255,106,0,0.85), transparent); }

/* State: method / operating loop (see also data-method-step)
   animation-duration 2.4s override removed from method-step-3. */
[data-fox-state="method"] .signal-sweep { opacity: 0.5; }
[data-fox-state="method"][data-method-step="0"] .signal-sweep { opacity: 0.75; }
[data-fox-state="method"][data-method-step="1"] .signal-orbit,
[data-fox-state="method"][data-method-step="1"] .signal-orbit-secondary { opacity: 0.55; transform: none; }
[data-fox-state="method"][data-method-step="2"] .signal-core { box-shadow: 0 0 0 1px rgba(126,200,255,0.6), 0 0 30px rgba(126,200,255,0.3); }
[data-fox-state="method"][data-method-step="3"] .signal-sweep { opacity: 0.9; }
[data-fox-state="method"][data-method-step="4"] .signal-orbit-secondary { border-color: var(--signal-orange); opacity: 0.6; }
[data-fox-state="method"][data-method-step="5"] .signal-orbit,
[data-fox-state="method"][data-method-step="5"] .signal-orbit-secondary { animation-play-state: paused; opacity: 0.4; }
[data-fox-state="method"][data-method-step="5"] .signal-core::after { opacity: 0.55; transform: rotate(0deg); }

/* State: trust / controlled */
[data-fox-state="controlled"] .signal-orbit,
[data-fox-state="controlled"] .signal-orbit-secondary,
[data-fox-state="controlled"] .signal-sweep { animation-play-state: paused; opacity: 0.28; }
[data-fox-state="controlled"] .signal-core { animation-play-state: paused; box-shadow: 0 0 0 2px rgba(126,200,255,0.5), 0 20px 60px rgba(0,0,0,0.5); }
[data-fox-state="controlled"] .signal-core::after { opacity: 0.18; transform: rotate(0deg); }

/* State: anti-theater / stripped down */
[data-fox-state="stripped"] .signal-orbit-secondary,
[data-fox-state="stripped"] .signal-sweep,
[data-fox-state="stripped"] .signal-points { opacity: 0 !important; }
[data-fox-state="stripped"] .signal-orbit { opacity: 0.16; animation-play-state: paused; }
[data-fox-state="stripped"] .signal-core { animation-play-state: paused; }
[data-fox-state="stripped"] .signal-core::before,
[data-fox-state="stripped"] .signal-core::after { opacity: 0; }

/* State: proof environments / active signals */
[data-fox-state="proof"] .signal-points { opacity: 1; }
[data-fox-state="proof"] .signal-sweep { opacity: 0.3; }
[data-fox-state="proof"] .signal-points i:nth-child(1) { background: var(--signal-orange); box-shadow: 0 0 10px rgba(255,106,0,0.82); }
[data-fox-state="proof"] .signal-points i:nth-child(2) { background: var(--relay-blue); }
[data-fox-state="proof"] .signal-points i:nth-child(3) { background: var(--blueprint-blue); box-shadow: 0 0 10px rgba(18,97,255,0.8); }
[data-fox-state="proof"] .signal-points i:nth-child(4) { background: var(--signal-orange); box-shadow: 0 0 10px rgba(255,106,0,0.82); }

/* State: final CTA / ready — defaults above already express a calm, complete
   state. animation-duration overrides removed (were: orbit/secondary 20s,
   sweep 4s). */
[data-fox-state="ready"] .signal-orbit,
[data-fox-state="ready"] .signal-orbit-secondary { opacity: 0.45; }
[data-fox-state="ready"] .signal-sweep { opacity: 0.7; }
[data-fox-state="ready"] .signal-core::after { opacity: 0.64; transform: rotate(-3deg); }

@media (max-width: 900px) {
  .hero-inner.has-fox { flex-direction: column; align-items: flex-start; }
  .hero-inner.has-fox .signal-fox-system { align-self: center; margin-top: 8px; }
  .signal-fox-system { --fox-size: 190px; }
  .signal-fox-system.size-echo { --fox-size: 160px; }
  .signal-fox-system.size-mini { display: none; }
}

@media (max-width: 850px) {
  .site-nav { align-items: flex-start; flex-direction: column; }
  .nav-links { width: 100%; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
}

@media (max-width: 560px) {
  .page { width: min(100% - 24px, 1120px); padding-top: 14px; }
  .hero-inner { padding: 28px 18px 34px; }
  .section-header { padding: 22px 18px 0; }
  .body { padding: 18px; }
  .cta-row { flex-direction: column; }
  .btn { width: 100%; justify-content: center; text-align: center; line-height: 1.15; }
  .nav-brand img { height: 30px; }
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 12px; }
  .nav-cta { padding: 8px 12px; }
  .signal-fox-system { --fox-size: min(178px, 68vw); }
}

@media (max-width: 430px) {
  .page { width: min(100% - 20px, 1120px); padding-top: 10px; }
  .site-nav { gap: 9px; padding: 10px 12px; margin-bottom: 10px; border-radius: 16px; }
  .nav-brand { gap: 10px; }
  .nav-brand img { height: 34px; }
  .nav-label { font-size: 18px; }
  /* De-crowd the tab bar at phone width: keep the brand and the one CTA,
     drop the in-page jump links — the site is one scroll away regardless. */
  .nav-links li:not(:last-child) { display: none; }
  .nav-links {
    gap: 6px;
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
  }
  .nav-links a {
    padding: 8px 9px;
    background: rgba(126,200,255,0.06);
    border: 1px solid rgba(126,200,255,0.1);
  }
  .nav-links .nav-cta {
    flex-basis: 100%;
    text-align: center;
    margin-top: 2px;
    justify-content: center;
  }
  .hero-inner { padding: 24px 16px 30px; }
  .hero-inner.has-fox {
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }
  .hero-inner.has-fox .signal-fox-system[data-fox-role="hero"] {
    --fox-size: min(226px, 64vw);
    position: absolute;
    right: -62px;
    bottom: -92px;
    margin: 0;
    opacity: 0.38;
    z-index: 0;
  }
  .hero#hero .hero-copy::before { inset: -12px -12px -14px; border-radius: 12px; }
  .kicker { margin-bottom: 14px; letter-spacing: 0.16em; }
  h1 { font-size: clamp(48px, 13.6vw, 60px); line-height: .98; }
  .hero-sub { margin-top: 18px; font-size: 19px; line-height: 1.42; }
  .cta-row { margin-top: 24px; gap: 10px; }
  .signal-status { bottom: -20px; font-size: 9px; }
  .signal-engine { opacity: 0.96; }
  .se-orbital-field {
    right: -62px;
    top: 180px;
    width: 260px;
    opacity: 0.34;
  }
}

@media (max-width: 360px) {
  .nav-label { font-size: 14px; }
  .nav-links a { font-size: 11px; }
  .hero-sub, .lead { font-size: 16px; }
  .method-flow .step { padding: 8px 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav::after { animation: none !important; opacity: .28; }
  .signal-orbit, .signal-orbit-secondary, .signal-sweep, .signal-core {
    animation: none !important;
  }
  .signal-sweep { opacity: 0.16 !important; }
  .signal-core { transform: none !important; }
  .signal-fox-system.size-mini { transition: none !important; }
  .signal-core::after { opacity: 0.12 !important; }
  .section, .section::before, .section::after { animation: none !important; transform: none !important; }
}

/* ---------------------------------------------------------------- */
/* Signal Engine hero prototype (v2) — noise -> signal -> structure  */
/* Scoped entirely to #hero; isolated from the rest of the site.     */
/* Progressive enhancement: pure CSS/SVG, no JS required to render.  */
/* ---------------------------------------------------------------- */

.hero#hero { isolation: isolate; }

.signal-engine {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero#hero .hero-inner.has-fox { position: relative; z-index: 1; }

.se-lattice {
  position: absolute;
  inset: -14%;
  background-image:
    linear-gradient(45deg, rgba(126,200,255,0.10) 1px, transparent 1px),
    linear-gradient(135deg, rgba(18,97,255,0.09) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,106,0,0.13) 0 2px, transparent 2.5px);
  background-size: 68px 68px, 68px 68px, 136px 118px;
  background-position: 0 0, 0 0, 34px 28px;
  opacity: 0;
  transform: rotate(-8deg) scale(1.04);
  mask-image: radial-gradient(122% 96% at 76% 40%, black, transparent 74%);
  -webkit-mask-image: radial-gradient(122% 96% at 76% 40%, black, transparent 74%);
  animation: se-lattice-in 1.8s ease-out 0.1s forwards;
}

@keyframes se-lattice-in {
  from { opacity: 0; transform: rotate(-8deg) scale(1.07); }
  to { opacity: 0.5; transform: rotate(-8deg) scale(1); }
}

.se-atmosphere { position: absolute; inset: 0; }

.se-orbital-field {
  position: absolute;
  right: clamp(24px, 8vw, 110px);
  top: clamp(90px, 16vw, 150px);
  width: min(46vw, 420px);
  aspect-ratio: 1;
  opacity: 0.52;
  filter: drop-shadow(0 0 22px rgba(126,200,255,0.18));
}
.se-orbital-field span {
  position: absolute;
  inset: calc(var(--ring, 0) * 11%);
  border-radius: 36% 64% 58% 42% / 42% 46% 54% 58%;
  border: 1px solid rgba(126,200,255,0.22);
  transform: rotate(var(--angle, 0deg));
  animation: se-orbital-drift var(--speed, 18s) linear infinite;
}
.se-orbital-field span::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: 14%;
  top: 8%;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 16px rgba(255,106,0,0.72);
}
.se-orbital-field span:nth-child(1) { --ring: 0; --angle: -16deg; --speed: 28s; }
.se-orbital-field span:nth-child(2) { --ring: 1; --angle: 18deg; --speed: 22s; border-color: rgba(18,97,255,0.28); }
.se-orbital-field span:nth-child(3) { --ring: 2; --angle: 48deg; --speed: 34s; border-color: rgba(255,106,0,0.22); }

@keyframes se-orbital-drift {
  to { transform: rotate(calc(var(--angle, 0deg) + 360deg)); }
}

/* Scattered cyan signal converging on the fox, timed to arrive right as the
   structure-resolve moment (62%, see se-cycle-structure) fires — signal in,
   structure out. Three dots, staggered, each silently resets to invisible
   before its next slow pass. The fox itself is never touched by this. */
.se-signal-drift {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.se-drift-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--relay-blue, #7EC8FF);
  box-shadow: 0 0 8px rgba(126,200,255,.7);
  opacity: 0;
  animation: se-drift-converge 18s ease-in-out infinite;
}
.se-drift-1 { left: 8%;  top: 20%; --dx: 62%; --dy: 24%;  animation-delay: 2s; }
.se-drift-2 { left: 14%; top: 72%; --dx: 58%; --dy: -22%; animation-delay: 2.6s; }
.se-drift-3 { left: 4%;  top: 46%; --dx: 68%; --dy: 0%;   animation-delay: 3.2s; }
@keyframes se-drift-converge {
  0%   { opacity: 0; transform: translate(0, 0) scale(.8); }
  10%  { opacity: .65; }
  55%  { opacity: .8; transform: translate(calc(var(--dx) * .92), calc(var(--dy) * .92)) scale(1); }
  64%  { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); }
  100% { opacity: 0; transform: translate(0, 0) scale(.8); }
}

.se-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.22;
  mix-blend-mode: screen;
  will-change: transform;
}

.se-blob-1 {
  width: 46%; height: 70%;
  right: -8%; top: -18%;
  background: radial-gradient(circle, rgba(126,200,255,0.55), transparent 70%);
  animation: se-drift-1 26s ease-in-out infinite;
}

.se-blob-2 {
  width: 34%; height: 54%;
  left: 4%; bottom: -20%;
  background: radial-gradient(circle, rgba(18,97,255,0.40), transparent 72%);
  animation: se-drift-2 32s ease-in-out infinite;
}

/* Faint Signal Orange presence in the atmosphere — weak, not yet a signal,
   the one hint of the Action color that will later resolve into the CTA
   and action-line. Kept deliberately the dimmest of the three blobs. */
.se-blob-3 {
  width: 22%; height: 30%;
  left: 30%; top: 8%;
  opacity: 0.14;
  background: radial-gradient(circle, rgba(255,106,0,0.4), transparent 74%);
  animation: se-drift-3 38s ease-in-out infinite;
}

@keyframes se-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-4%, 5%); }
}
@keyframes se-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5%, -4%); }
}
@keyframes se-drift-3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3%, 4%); }
}

.se-structure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1.05s ease;
}

.se-structure .se-line {
  fill: none;
  stroke: var(--relay-blue, #7EC8FF);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.5;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: se-line-draw 1.6s ease-out forwards;
}
.se-structure .se-line:nth-of-type(2) { animation-delay: .12s; stroke: var(--blueprint-blue, #1261FF); }
.se-structure .se-line:nth-of-type(3) { animation-delay: .24s; }
.se-structure .se-line:nth-of-type(4) { animation-delay: .36s; stroke: var(--blueprint-blue, #1261FF); }
.se-structure .se-line:nth-of-type(5) { animation-delay: .48s; }
.se-structure .se-action-line {
  /* Action is earned, not scheduled: unlike the other blueprint lines, this
     path does not auto-draw on load. It stays undrawn until a real Action
     event fires (the one-time hero arm, or a genuine CTA hover/focus/lock),
     matching the same events that already drive the CTA signal-lock ring. */
  stroke: var(--signal-orange, #FF6A00);
  stroke-width: 1.7;
  opacity: 0;
  animation: none;
  stroke-dashoffset: 340;
  transition: opacity .4s ease, stroke-width .22s ease, filter .22s ease, stroke-dashoffset .9s ease;
}

.se-structure .se-cell {
  fill: rgba(18,97,255,0.055);
  stroke: rgba(126,200,255,0.24);
  stroke-width: 1;
  opacity: 0;
  transform-origin: center;
  animation: se-cell-in .8s ease-out forwards;
}
.se-structure .se-cell:nth-of-type(1) { animation-delay: .32s; }
.se-structure .se-cell:nth-of-type(2) { animation-delay: .5s; }
.se-structure .se-cell:nth-of-type(3) { animation-delay: .68s; }

@keyframes se-line-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes se-cell-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 0.52; transform: scale(1); }
}

.se-structure .se-node {
  fill: var(--relay-blue, #7EC8FF);
  opacity: 0;
  animation: se-node-in .5s ease-out forwards;
}
.se-structure .se-node:nth-of-type(1) { animation-delay: .55s; }
.se-structure .se-node:nth-of-type(2) {
  fill: var(--signal-orange, #FF6A00);
  animation: se-node-in .5s ease-out .68s forwards, se-node-resolve-pulse 18s ease-in-out 2s infinite;
}
.se-structure .se-node:nth-of-type(3) { animation-delay: .8s; }
.se-structure .se-node:nth-of-type(4) { animation-delay: .92s; }
.se-structure .se-node:nth-of-type(5) { animation-delay: 1.04s; }

@keyframes se-node-in {
  from { opacity: 0; }
  to { opacity: 0.85; }
}

.se-structure-focus {
  opacity: 0;
  mask-image: radial-gradient(circle 200px at var(--se-x, 50%) var(--se-y, 50%), black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 200px at var(--se-x, 50%) var(--se-y, 50%), black 0%, transparent 100%);
  transition: opacity .4s ease;
}
.se-structure-focus .se-line { stroke-width: 1.8; opacity: 0.95; filter: drop-shadow(0 0 5px rgba(126,200,255,0.6)); animation: none; stroke-dashoffset: 0; }
.se-structure-focus .se-cell { opacity: 0.7; animation: none; filter: drop-shadow(0 0 5px rgba(18,97,255,0.38)); }
.se-structure-focus .se-node { opacity: 1; animation: none; filter: drop-shadow(0 0 6px currentColor); }

.signal-engine.is-tracking .se-structure-focus { opacity: 1; }
.signal-engine.is-tracking .se-lattice { opacity: 0.68; }
.signal-engine.is-tracking .se-orbital-field { opacity: 0.68; filter: drop-shadow(0 0 30px rgba(126,200,255,0.28)); }
.signal-engine.is-tracking .se-blob { opacity: 0.28; }
/* Tap-to-progress (touch, no drag JS below can rely on): a real tap briefly
   forces the structure-resolve look, the same peak the ambient loop already
   reaches on its own — tapping advances toward a moment already in the
   loop's vocabulary rather than inventing a new one. !important is required
   here because se-cycle-structure/se-cycle-blueprint/se-node-resolve-pulse
   are running CSS animations, which normal-priority rules cannot override. */
.hero#hero.se-tap-peak .se-building-skeleton {
  opacity: .9 !important;
  filter: drop-shadow(0 0 24px rgba(255,106,0,.36)) !important;
}
.hero#hero.se-tap-peak .se-hex-field { opacity: .2 !important; }
.hero#hero.se-tap-peak .se-structure .se-node:nth-of-type(2) {
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(255,106,0,.85)) !important;
}
/* Armed (once, ~1s after load) draws the action-line in softly — a single
   real "the CTA is ready" event, not a scheduled entrance. Hover/focus/lock
   always take priority over the armed-only softness when both are true,
   by construction: this selector is deliberately less specific than the
   hover/locked rule below it. */
.hero#hero.se-armed .se-action-line {
  opacity: 0.68 !important;
  stroke-width: 1.8;
  stroke-dashoffset: 0 !important;
}
.signal-engine.is-action-locked .se-structure .se-action-line,
.hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .se-structure .se-action-line {
  opacity: 0.98 !important;
  stroke-width: 2.55;
  stroke-dashoffset: 0 !important;
  filter: drop-shadow(0 0 8px rgba(255,106,0,0.72));
}
.signal-engine.is-action-locked .se-orbital-field,
.hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .se-orbital-field {
  opacity: 0.78;
  filter: drop-shadow(0 0 34px rgba(255,106,0,0.2));
}
.signal-engine.is-action-locked .se-structure-focus,
.hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .se-structure-focus {
  opacity: 1;
  mask-image: radial-gradient(circle 260px at var(--se-x, 68%) var(--se-y, 58%), black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 260px at var(--se-x, 68%) var(--se-y, 58%), black 0%, transparent 100%);
}
.hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .signal-fox-system[data-fox-role="hero"] .signal-sweep {
  opacity: 1;
  filter: saturate(1.18) drop-shadow(0 0 10px rgba(255,106,0,0.34));
}


.hero#hero.se-out-of-view .se-blob,
.hero#hero.se-out-of-view .se-lattice { animation-play-state: paused; }

.hero#hero.se-reduced-load .se-blob { display: none; }

/* Foxfire CTA signal-lock: one restrained ring on hover/focus, and once on
   initial page activation via .se-armed (added by JS after first paint). */
.hero-copy .btn-primary {
  position: relative;
  background: linear-gradient(135deg, #ff6a00 0%, #ff7d12 48%, #ff6a00 100%);
  background-size: 180% 100%;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background-position .32s ease;
}
.hero-copy .btn-primary:hover,
.hero-copy .btn-primary:focus-visible {
  background-position: 100% 0;
  box-shadow: 0 16px 38px rgba(255,106,0,0.34), 0 0 0 1px rgba(255,179,107,0.34) inset;
}
.hero-copy .btn-primary::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  border: 1.5px solid var(--orange);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}
.hero-copy .btn-primary:hover::after,
.hero-copy .btn-primary:focus-visible::after {
  animation: se-cta-lock .55s ease-out;
}
.hero#hero.se-armed .hero-copy .btn-primary::after {
  animation: se-cta-lock .7s ease-out;
}
@keyframes se-cta-lock {
  from { opacity: 0.9; transform: scale(0.92); }
  to { opacity: 0; transform: scale(1.18); }
}

@media (max-width: 900px) {
  .se-blob { filter: blur(30px); opacity: 0.16; }
}

@media (max-width: 560px) {
  .se-lattice {
    background-size: 54px 54px, 54px 54px, 108px 92px;
    opacity: 0.34;
  }
  .se-blob-1, .se-blob-2 { animation-duration: 34s; }
  .se-motion-reel { right: -34px; top: 260px; width: 300px; height: 250px; opacity: .36; }
  .se-build-field { right: -18px; bottom: 20px; width: 210px; height: 260px; opacity: .32; }
}

@media (pointer: coarse) {
  .se-structure-focus { display: none; }
}

/* Signal Engine premium pass: angled geometry, build skeletons, and motion-clip surfaces. */
.se-motion-reel {
  position: absolute;
  right: clamp(58px, 11vw, 154px);
  top: clamp(88px, 12vw, 132px);
  width: min(39vw, 470px);
  height: min(29vw, 330px);
  perspective: 900px;
  transform: rotateX(var(--se-tilt-x, 0deg)) rotateY(var(--se-tilt-y, 0deg));
  transform-style: preserve-3d;
  opacity: 0.22;
  transition: transform .18s ease, opacity .4s ease, filter .24s ease;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,0.36));
}
.se-clip {
  position: absolute;
  inset: var(--clip-inset, 0);
  border: 1px solid rgba(126,200,255,0.22);
  border-radius: 12px;
  background:
    linear-gradient(115deg, rgba(10,20,48,0.04), rgba(126,200,255,0.13) 34%, rgba(255,106,0,0.13) 52%, rgba(18,97,255,0.13) 72%, rgba(10,20,48,0.02)),
    repeating-linear-gradient(120deg, transparent 0 14px, rgba(126,200,255,0.13) 15px 16px, transparent 17px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 12px);
  background-size: 240% 100%, 160px 160px, 100% 24px;
  box-shadow: inset 0 0 42px rgba(18,97,255,0.18), 0 0 30px rgba(126,200,255,0.08);
  transform: translate3d(var(--clip-x, 0), var(--clip-y, 0), var(--clip-z, 0)) rotateZ(var(--clip-rot, 0deg)) rotateY(var(--clip-yaw, -14deg));
  animation: se-clip-run var(--clip-speed, 6s) linear infinite;
  overflow: hidden;
}
.se-clip::after {
  content: "";
  position: absolute;
  inset: -30% -12%;
  background: linear-gradient(90deg, transparent 28%, rgba(255,106,0,0.42), transparent 62%);
  transform: translateX(-60%) rotate(14deg);
  animation: se-clip-scan calc(var(--clip-speed, 6s) * .82) ease-in-out infinite;
}
.se-clip-1 { --clip-inset: 8% 2% 12% 34%; --clip-z: 42px; --clip-rot: -10deg; --clip-speed: 4.7s; }
.se-clip-2 { --clip-inset: 25% 14% 9% 48%; --clip-z: 92px; --clip-yaw: -24deg; --clip-rot: 12deg; --clip-speed: 5.4s; opacity: .72; }
.se-clip-3 { --clip-inset: 6% 20% 46% 22%; --clip-z: 18px; --clip-yaw: -4deg; --clip-rot: 38deg; --clip-speed: 6.1s; opacity: .58; }

@keyframes se-clip-run {
  0% { background-position: 0% 0, 0 0, 0 0; }
  100% { background-position: 240% 0, 160px 160px, 0 48px; }
}
@keyframes se-clip-scan {
  0%, 22% { transform: translateX(-80%) rotate(14deg); opacity: 0; }
  45% { opacity: .72; }
  82%, 100% { transform: translateX(86%) rotate(14deg); opacity: 0; }
}

.se-build-field {
  position: absolute;
  right: clamp(96px, 16vw, 230px);
  bottom: clamp(48px, 7vw, 88px);
  width: min(28vw, 320px);
  height: min(31vw, 370px);
  transform-style: preserve-3d;
  transform: perspective(760px) rotateX(calc(62deg + var(--se-tilt-x, 0deg))) rotateZ(-38deg) rotateY(var(--se-tilt-y, 0deg));
  opacity: .4;
  filter: drop-shadow(0 0 24px rgba(126,200,255,.18));
  transition: transform .18s ease, opacity 1.05s ease, filter .24s ease;
}
/* Restrained pointer/drag influence on the dimensional structure — reuses
   the existing --se-x/--se-y (mousemove) and adds --se-drag-lift (mousedown
   drag or touch drag). Neither fights the ambient opacity loop above: both
   live on a dedicated pseudo-element, not on .se-build-field's own opacity. */
.se-build-field::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle 140px at var(--se-x, 50%) var(--se-y, 50%), rgba(255,255,255,.16), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.signal-engine.is-tracking .se-build-field::after { opacity: 1; }
.se-build-field::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(255,106,0,.28), transparent 70%);
  opacity: var(--se-drag-lift, 0);
  transition: opacity .5s ease;
  pointer-events: none;
}
.se-floor,
.se-spine {
  position: absolute;
  border: 1px solid rgba(126,200,255,.34);
  box-shadow: 0 0 16px rgba(18,97,255,.12), inset 0 0 18px rgba(126,200,255,.07);
}
.se-floor {
  left: 10%;
  right: 8%;
  height: 28%;
  transform: translateZ(var(--z, 0));
  background: linear-gradient(135deg, rgba(18,97,255,.08), rgba(255,106,0,.035));
  animation: se-floor-rise 1.25s cubic-bezier(.2,.8,.2,1) forwards, se-cycle-light 18s ease-in-out 2s infinite;
}
.se-floor-1 { bottom: 0; --z: 0px; animation-delay: .2s, 2s; }
.se-floor-2 { bottom: 15%; --z: 28px; animation-delay: .32s, 2.1s; }
.se-floor-3 { bottom: 30%; --z: 56px; animation-delay: .44s, 2.2s; }
.se-floor-4 { bottom: 45%; --z: 84px; animation-delay: .56s, 2.3s; }
.se-floor-5 { bottom: 60%; --z: 112px; animation-delay: .68s, 2.4s; border-color: rgba(255,106,0,.36); }
.se-spine { width: 1px; top: 12%; bottom: 4%; opacity: .72; animation: se-cycle-light 18s ease-in-out 2s infinite; }
.se-spine-1 { left: 12%; }
.se-spine-2 { left: 38%; animation-delay: 2.1s; }
.se-spine-3 { left: 64%; animation-delay: 2.2s; }
.se-spine-4 { left: 90%; border-color: rgba(255,106,0,.42); animation-delay: 2.3s; }
@keyframes se-floor-rise {
  from { opacity: 0; transform: translateZ(calc(var(--z, 0) - 46px)) scale(.92); }
  to { opacity: .9; transform: translateZ(var(--z, 0)) scale(1); }
}

.se-hex-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .32;
  filter: drop-shadow(0 0 16px rgba(18,97,255,.12));
  transition: opacity 1.05s ease;
  animation: se-cycle-blueprint 18s ease-in-out 2s infinite;
}
.se-hex,
.se-diamond {
  fill: rgba(18,97,255,.045);
  stroke: rgba(126,200,255,.25);
  stroke-width: 1;
  transform-origin: center;
  animation: se-geo-resolve 1.1s ease-out forwards;
  opacity: 0;
}
.se-diamond { stroke: rgba(255,106,0,.22); fill: rgba(255,106,0,.035); }
.se-hex:nth-child(2) { animation-delay: .16s; }
.se-hex:nth-child(3) { animation-delay: .28s; }
.se-diamond:nth-child(4) { animation-delay: .38s; }
.se-diamond:nth-child(5) { animation-delay: .48s; }
@keyframes se-geo-resolve {
  from { opacity: 0; transform: scale(.86) rotate(-8deg); }
  to { opacity: .72; transform: scale(1) rotate(0deg); }
}

.se-building-skeleton {
  fill: none;
  stroke: rgba(126,200,255,.26);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
  filter: drop-shadow(0 0 10px rgba(18,97,255,.16));
  transition: opacity 1.05s ease;
  animation: se-cycle-structure 18s ease-in-out 2s infinite;
}
.se-building-skeleton polyline,
.se-building-skeleton line {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: se-line-draw 1.25s ease-out .34s forwards;
}

/* Continuous ambient loop: Blueprint -> 3D Structure -> Blueprint. Starts at
   2s (right as the one-time Signal->Blueprint->Structure reveal settles) and
   repeats slowly and indefinitely. Blueprint and Structure intensity move in
   opposition — one rises as the other recedes — and briefly meet at a single
   Signal-Orange "resolve" moment (62%) marking structure coming online, then
   ease back to the shared resting composite. No property is ever snapped;
   every stage is reached via ease-in-out over many seconds. */
@keyframes se-cycle-structure {
  0%, 100% { opacity: .72; filter: drop-shadow(0 0 10px rgba(18,97,255,.16)); }
  40%      { opacity: .22; filter: drop-shadow(0 0 6px rgba(18,97,255,.1)); }
  62%      { opacity: .9;  filter: drop-shadow(0 0 24px rgba(255,106,0,.36)); }
  78%      { opacity: .72; filter: drop-shadow(0 0 10px rgba(18,97,255,.16)); }
}
@keyframes se-cycle-blueprint {
  0%, 100% { opacity: .32; }
  40%      { opacity: .66; }
  62%      { opacity: .2; }
  78%      { opacity: .32; }
}
@keyframes se-cycle-light {
  0%, 100% { box-shadow: 0 0 16px rgba(18,97,255,.12), inset 0 0 18px rgba(126,200,255,.07); border-color: rgba(126,200,255,.34); }
  40%      { box-shadow: 0 0 10px rgba(18,97,255,.08), inset 0 0 12px rgba(126,200,255,.05); border-color: rgba(126,200,255,.2); }
  62%      { box-shadow: 0 0 26px rgba(255,106,0,.28), inset 0 0 22px rgba(255,106,0,.12); border-color: rgba(255,106,0,.42); }
  78%      { box-shadow: 0 0 16px rgba(18,97,255,.12), inset 0 0 18px rgba(126,200,255,.07); border-color: rgba(126,200,255,.34); }
}
@keyframes se-node-resolve-pulse {
  0%, 100% { opacity: .85; filter: none; }
  62%      { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,106,0,.85)); }
}

/* Hero choreography: Signal -> Blueprint -> Structure. One-time sequence,
   added by JS shortly after load (see the inline script). Each phase is a
   deliberate dip/reveal of the SAME layers below — nothing is duplicated or
   deleted, only sequenced, so blueprint geometry and the building skeleton
   never render at full intensity simultaneously with everything else.
   Action is intentionally left interaction-driven (CTA hover/focus/arm,
   already implemented above) rather than timer-driven — Action is a real
   event, not a scheduled state, per the Signal Fox doctrine's "truthful
   readout" requirement. Without JS, or under reduced motion, no phase class
   is ever added and every layer simply renders at its resting opacity set
   above — the same composite the sequence settles into. */
.hero#hero.se-phase-signal .se-hex-field,
.hero#hero.se-phase-signal .se-structure,
.hero#hero.se-phase-signal .se-building-skeleton,
.hero#hero.se-phase-signal .se-build-field {
  opacity: 0;
}
.hero#hero.se-phase-blueprint .se-building-skeleton,
.hero#hero.se-phase-blueprint .se-build-field {
  opacity: 0;
}
.signal-engine.is-tracking .se-motion-reel,
.signal-engine.is-action-locked .se-motion-reel,
.hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .se-motion-reel {
  opacity: .95;
  filter: drop-shadow(0 34px 64px rgba(0,0,0,0.4)) drop-shadow(0 0 30px rgba(255,106,0,.12));
}
.signal-engine.is-tracking .se-build-field,
.signal-engine.is-action-locked .se-build-field,
.hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .se-build-field {
  opacity: .82;
  filter: drop-shadow(0 0 32px rgba(255,106,0,.16));
}
.signal-engine.is-action-locked .se-clip,
.hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .se-clip {
  animation-duration: 2.8s;
  border-color: rgba(255,106,0,.32);
}
@media (max-width: 900px) {
  .se-motion-reel {
    right: -38px;
    top: 238px;
    width: 330px;
    height: 270px;
    opacity: .34;
    transform: rotate(-8deg) scale(.92);
  }
  .se-build-field {
    right: -28px;
    bottom: 16px;
    width: 235px;
    height: 280px;
    opacity: .3;
  }
}

@media (max-width: 560px) {
  .hero-inner { padding: 22px 14px 28px; }
  .hero#hero .hero-copy::before {
    background: linear-gradient(135deg, rgba(5, 12, 30, 0.94), rgba(8, 24, 55, 0.82));
    border-color: rgba(126,200,255,.18);
  }
  .se-motion-reel {
    right: -84px;
    top: 248px;
    width: 305px;
    height: 245px;
    opacity: .28;
  }
  .se-build-field {
    right: -46px;
    bottom: 18px;
    width: 210px;
    height: 255px;
    opacity: .28;
  }
  .se-hex-field { opacity: .52; }
}

/* Single reduced-motion authority for the Signal Engine hero. Previously
   split across two blocks (one before the premium pass, one after) which
   both hid .se-motion-reel/.se-build-field. Consolidated here, after every
   Signal Engine definition, so these overrides win on cascade order and not
   only on !important. */
@media (prefers-reduced-motion: reduce) {
  .signal-engine.is-action-locked .se-structure .se-action-line,
  .hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .se-structure .se-action-line,
  .hero#hero:has(.hero-copy .btn-primary:is(:hover, :focus-visible)) .signal-fox-system[data-fox-role="hero"] .signal-sweep {
    filter: none !important;
  }
  .se-structure-focus { display: none; }
  .se-motion-reel,
  .se-build-field {
    display: none !important;
  }
  .se-lattice, .se-structure .se-line, .se-structure .se-node, .se-structure .se-cell, .se-hex-field *,
  .se-hex-field, .se-building-skeleton, .se-signal-drift,
  .se-clip,
  .se-clip::after,
  .se-floor,
  .se-building-skeleton polyline,
  .se-building-skeleton line,
  .se-hex,
  .se-diamond {
    animation: none !important;
  }
  .se-lattice { opacity: 0.42; transform: rotate(-8deg) scale(1); }
  .se-structure .se-line { stroke-dashoffset: 0; }
  .se-structure .se-node { opacity: 0.72; }
  .se-structure .se-cell { opacity: 0.42; transform: none; }
  .se-hex,
  .se-diamond { opacity: .42; transform: none; }
  /* Present the settled Action state immediately, not a second later —
     reduced motion must never depend on a JS timer to look finished. */
  .se-action-line { opacity: 0.68 !important; }
  /* A stable blueprint + structure composition, held — no continuous
     Blueprint <-> Structure cycling and no drift dots (JS also never adds
     .se-tap-peak under reduced motion, so no override is needed for it). */
  .se-signal-drift { display: none; }
}
/* Alternating section activation surfaces: the hero language now answers section hover/focus. */
.section {
  position: relative;
  isolation: isolate;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}
/* .section::before used to carry a tiled 92px diagonal-stripe "Resolve"
   texture. Removed entirely (founder review: the same repeated pattern
   across Reality/Noise, Capability/Offer, and Trust/Proof read as a
   "porcupine" middle of the page) — the hover lift below (transform,
   border-color, box-shadow) still gives every section its resolve cue,
   just without a tiled background image doing it. */
.section::before,
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity .24s ease, transform .32s ease, filter .24s ease;
}
.section::after {
  background: linear-gradient(90deg, transparent, rgba(255,106,0,.52), transparent);
  height: 1px;
  top: auto;
  bottom: 0;
  transform: translateX(-45%);
}
.section:hover,
.section:focus-within,
.section.is-section-active {
  transform: translateY(-2px);
  border-color: rgba(126,200,255,.28);
  box-shadow: 0 22px 58px rgba(0,0,0,.26), 0 0 0 1px rgba(255,106,0,.06) inset;
}
.section:hover::before,
.section:focus-within::before,
.section.is-section-active::before { opacity: 1; transform: translateY(0) scale(1); }
.section:hover::after,
.section:focus-within::after,
.section.is-section-active::after { opacity: .86; transform: translateX(45%); transition-duration: .72s; }
/* fx-plain (Anti-Theater's "effects reduce, mark goes plain" exception) is
   retired as of the five-section compression pass: Anti-Theater is no
   longer a standalone card, only a preserved quote line inside Trust/Proof,
   so there is no section-sized surface left for a whole-card "goes plain"
   treatment to mean anything. See the compression report for the doctrine
   note — the line itself is kept verbatim, only the per-card hover
   behavior around it is gone. */

/* Proof gets its own Reveal cue (signal points, not blueprint lines) since
   its job is "prove," not "organize." Scoped to the .proof-block sub-block
   rather than the whole .section — since the compression pass folded Proof
   into the same card as Trust Doctrine, applying this to the full section
   would wash the dot-pattern "proving" cue across the trust-argument text
   too. It still triggers from the parent card's hover/focus/active state
   (below), so hovering anywhere in the merged card reveals it. */
.proof-block {
  position: relative;
  isolation: isolate;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(234,244,255,0.14);
}
.proof-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity .24s ease;
  background-image: radial-gradient(circle at 22% 28%, rgba(255,106,0,.28) 0 2px, transparent 3px), radial-gradient(circle at 72% 62%, rgba(126,200,255,.28) 0 2px, transparent 3px), linear-gradient(120deg, transparent 0 49%, rgba(126,200,255,.13) 50% 51%, transparent 52%);
  background-size: 120px 120px, 140px 140px, 90px 90px;
}
.section:hover .proof-block::before,
.section:focus-within .proof-block::before,
.section.is-section-active .proof-block::before { opacity: 1; }

/* ===================== Cinematic beats, attached to the real sections =====================
   Beat 01 (Enter the Signal) has no new rule here — the existing Signal ->
   Blueprint -> Structure hero phase system above already is that beat.
   Beats 02/03/05 below are restrained, single-shot re-expressions of the
   prototype's Noise/Structure/Proof beats, built to the same "minimum
   architecture" and reduced-motion/no-autoplay rules as the rest of the
   site. Beat 04 (Action/Foxfire) is not a new rule block — it is the
   existing ".hero-copy .btn-primary" CTA signal-lock ring, below,
   deliberately widened to cover the Sprint offer's own CTA. */

/* Final revision pass — Section 2 scale/hierarchy. The heading now runs
   noticeably larger than the sitewide h2 default (still well under the
   hero's h1, so hero stays the single largest moment on the page), and the
   new copy/source-chips give the section a second and third layer of
   content instead of one short paragraph next to a question grid. */

/* Match Reality/Noise's chrome to the final section's — same warm
   gradient card, same larger radius/shadow, no backdrop-filter — while
   keeping the .section class itself (untouched) so the JS hover-glow and
   HUD state wiring, both keyed to .section, are unaffected. Only the
   visual surface changes, not the element's role in the page. */
.noise-section {
  background:
    linear-gradient(135deg, rgba(10,20,48,0.94), rgba(7,16,36,0.82)),
    linear-gradient(115deg, rgba(18,97,255,0.16), transparent 42%),
    linear-gradient(300deg, rgba(255,106,0,0.12), transparent 46%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}
.noise-section .section-header {
  padding: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) 0;
}
.noise-section .body {
  padding: 20px clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px);
}

.noise-heading { font-size: clamp(32px, 4.4vw, 52px); max-width: 820px; }
.noise-lead { font-size: clamp(18px, 2vw, 22px); max-width: 640px; }
.noise-copy { max-width: 680px; margin-top: 14px; color: var(--muted); }
.noise-sub-lead { margin: 26px 0 10px; font-weight: 700; color: #fff; }
.signal-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.signal-sources span {
  font: 700 12px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--cyan);
  border: 1px solid rgba(126,200,255,0.28);
  background: rgba(126,200,255,0.06);
  border-radius: 999px;
  padding: 7px 13px;
}

/* The spatial-transition canvas lives inside #noise itself (see rationale
   in the pass report — a true cross-section 3D camera was judged not
   honestly buildable with this static repo's architecture tonight). Its
   motion is driven purely by scroll position across the hero-exit ->
   noise-entry range, never by a running clock, matching every other
   motion system already on this page. It fades in as the section is
   approached and fades out again before the signal-list resolve moment,
   so it reads as one bounded transition, not a persistent background. */
.spatial-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.noise-section .section-header,
.noise-section .body { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .spatial-canvas { display: none; }
}

/* Beat 02 — Reality/Noise, revised: the noise IS the real content. The
   seven diagnostic questions start visibly scattered — small rotation and
   offset per card, like signal that hasn't been sorted yet — and settle
   into their normal grid position the first time the section is seen.
   Deliberately not a decorative particle layer: this dramatizes the
   section's own words ("fragmented... across people, tools, inboxes"),
   so removing it would remove the point being made, not just an effect. */
#signal-resolve.signal-list .signal {
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}
#signal-resolve.signal-list:not(.is-settled) .signal {
  opacity: .55;
}
#signal-resolve.signal-list:not(.is-settled) .signal:nth-child(1) { transform: rotate(-3deg) translate(-4px, 3px); }
#signal-resolve.signal-list:not(.is-settled) .signal:nth-child(2) { transform: rotate(2deg) translate(5px, -3px); }
#signal-resolve.signal-list:not(.is-settled) .signal:nth-child(3) { transform: rotate(-2deg) translate(3px, 4px); }
#signal-resolve.signal-list:not(.is-settled) .signal:nth-child(4) { transform: rotate(3deg) translate(-5px, -2px); }
#signal-resolve.signal-list:not(.is-settled) .signal:nth-child(5) { transform: rotate(-2deg) translate(-3px, -4px); }
#signal-resolve.signal-list:not(.is-settled) .signal:nth-child(6) { transform: rotate(2deg) translate(4px, 3px); }
#signal-resolve.signal-list:not(.is-settled) .signal:nth-child(7) { transform: rotate(-1deg) translate(2px, -3px); }
#signal-resolve.signal-list.is-settled .signal { transform: none; opacity: 1; }
#signal-resolve.signal-list.is-settled .signal:nth-child(1) { transition-delay: 0s; }
#signal-resolve.signal-list.is-settled .signal:nth-child(2) { transition-delay: .05s; }
#signal-resolve.signal-list.is-settled .signal:nth-child(3) { transition-delay: .1s; }
#signal-resolve.signal-list.is-settled .signal:nth-child(4) { transition-delay: .15s; }
#signal-resolve.signal-list.is-settled .signal:nth-child(5) { transition-delay: .2s; }
#signal-resolve.signal-list.is-settled .signal:nth-child(6) { transition-delay: .25s; }
#signal-resolve.signal-list.is-settled .signal:nth-child(7) { transition-delay: .3s; }

/* Beat 03 — Intelligence/Structure: a small blueprint-cell accent that
   resolves in once, the first time Capability/Offer scrolls into view —
   echoing the hero's own hex/cell language at a much smaller scale rather
   than inventing new geometry. */
.structure-resolve {
  position: absolute;
  top: 0; right: 0;
  width: min(38%, 320px);
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1s ease;
}
.section.is-resolved .structure-resolve { opacity: .5; }
.sr-cell {
  fill: rgba(18,97,255,.08);
  stroke: var(--blue);
  stroke-width: 1;
  opacity: 0;
  transform-origin: center;
  transform: scale(.9);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.section.is-resolved .sr-cell { opacity: 1; transform: scale(1); }
.sr-cell:nth-of-type(2) { transition-delay: .12s; }
.sr-cell:nth-of-type(3) { transition-delay: .24s; }
.sr-line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.2;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  opacity: .7;
  transition: stroke-dashoffset 1s ease .3s;
}
.section.is-resolved .sr-line { stroke-dashoffset: 0; }
#capability .section-header,
#capability .body { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .structure-resolve { display: none; }
}

/* Capability/Offer polish: a plain divider for How We Work, but the Sprint
   offer gets its own lightly tinted panel so it reads as the one concrete
   commitment on the page rather than another paragraph in the narrative.
   Spacing tightened and unified (was mixed 18/22/26/30px ad hoc values). */
.capability-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(234,244,255,0.12);
}
.capability-block-note { margin: 14px 0 0; }
.capability-offer {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255,106,0,0.045);
  border: 1px solid rgba(255,106,0,0.16);
}
.capability-offer .lead { margin-top: 8px; }
.capability-offer .grid-2 { margin-top: 16px; gap: 12px; }
.capability-offer .cta-row { margin-top: 18px; }
@media (max-width: 560px) {
  .capability-offer { padding: 18px; }
}

/* Beat 05 — Confidence/Proof: the four proof cards stagger in once, the
   first time the Trust/Proof card scrolls into view. Reuses the cards'
   existing accent styling; only opacity/transform are new. */
.proof-grid .card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.proof-block.is-revealed .proof-grid .card { opacity: 1; transform: none; }
.proof-grid .card:nth-child(1) { transition-delay: .05s; }
.proof-grid .card:nth-child(2) { transition-delay: .15s; }
.proof-grid .card:nth-child(3) { transition-delay: .25s; }
.proof-grid .card:nth-child(4) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  #signal-resolve.signal-list .signal { transform: none !important; opacity: 1 !important; transition: none !important; }
  .structure-resolve { opacity: .5; }
  .sr-cell, .sr-line { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .proof-grid .card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Beat 04 — Action/Foxfire: the existing hero/final-CTA signal-lock ring
   (defined further down under "Foxfire CTA signal-lock"), widened to the
   Sprint offer's own primary CTA — the other real point of commitment on
   the page, not just the two bookend heroes. */
#offer .btn-primary { position: relative; }
#offer .btn-primary::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  border: 1.5px solid var(--orange);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}
#offer .btn-primary:hover::after,
#offer .btn-primary:focus-visible::after { animation: se-cta-lock .55s ease-out; }

/* Reveal pattern: proof/project cards surface one extra layer of detail on
   hover or focus — a drawn-in top accent using the card's own existing
   accent color, plus a small lift. No new copy is introduced; this only
   reveals visual structure that was already implied by the accent classes. */
.proof-grid .card {
  position: relative;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.proof-grid .card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--signal-orange, #FF6A00), var(--relay-blue, #7EC8FF));
  transition: width .32s ease;
}
.proof-grid .card:hover,
.proof-grid .card:focus-within,
.proof-grid .card:active {
  transform: translateY(-3px);
  border-color: rgba(126,200,255,.34);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}
.proof-grid .card:hover::before,
.proof-grid .card:focus-within::before,
.proof-grid .card:active::before { width: 100%; }