:root {
  color-scheme: light;
  --ink: #21483f;
  --ink-2: #2c574f;
  --paper: #bdd2cc;
  --paper-2: #b2c9c2;
  --line: rgba(33, 72, 63, 0.34);
  --line-dark: #8aaaa2;
  --text: #08180f;
  --muted: #2b4a43;
  --muted-light: #2b4843;
  --green: #1a6a5d;
  --green-deep: #21483f;
  --coral: #d97962;
  --sun: #e0b75c;
  --white: #ffffff;
  --shadow: 0 28px 80px rgba(8, 11, 12, 0.4);
  --nav-bg: rgba(168, 202, 193, 0.94);
  --nav-text: #08180f;
  --nav-link: #224038;
  --hero-bg:
    radial-gradient(
      ellipse at 7% 22%,
      rgba(47, 123, 111, 0.72),
      transparent 50%
    ),
    radial-gradient(
      ellipse at 92% 6%,
      rgba(217, 121, 98, 0.62),
      transparent 46%
    ),
    radial-gradient(
      ellipse at 48% 100%,
      rgba(14, 38, 30, 0.35),
      transparent 55%
    ),
    linear-gradient(162deg, #9dc0b8 0%, #a4c4bc 52%, #99bdb4 100%);
  --hero-text: #08180f;
  --hero-muted: #224038;
  --surface-card: #d6c9bc;
  --input-bg: #daccbf;
  --ghost-bg: rgba(33, 72, 63, 0.16);
  --ghost-hover: rgba(33, 72, 63, 0.3);
  --button-primary-bg: #21483f;
  --button-primary-text: #eef6f3;
  --console-bg: rgba(10, 28, 22, 0.42);
  --console-panel-bg:
    radial-gradient(
      ellipse at 18% 22%,
      rgba(108, 207, 192, 0.18),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 82% 78%,
      rgba(217, 121, 98, 0.18),
      transparent 55%
    ),
    linear-gradient(180deg, rgba(10, 28, 22, 0.18), rgba(10, 28, 22, 0.42));
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1315;
  --paper-2: #11191c;
  --text: #e7efee;
  --muted: #9fb0ae;
  --line: rgba(255, 255, 255, 0.16);
  --line-dark: rgba(231, 239, 238, 0.16);
  --nav-bg: rgba(6, 9, 10, 0.92);
  --nav-text: #f7fbfa;
  --nav-link: #a3b5b2;
  --hero-bg:
    radial-gradient(
      ellipse at 8% 16%,
      rgba(55, 160, 143, 0.38),
      transparent 50%
    ),
    radial-gradient(
      ellipse at 92% 6%,
      rgba(242, 132, 95, 0.3),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 50% 112%,
      rgba(108, 207, 192, 0.18),
      transparent 60%
    ),
    linear-gradient(180deg, #06090a, #0c1214);
  --hero-text: #f7fbfa;
  --hero-muted: #a3b5b2;
  --surface-card: #11191c;
  --input-bg: #0c1416;
  --ghost-bg: rgba(255, 255, 255, 0.05);
  --ghost-hover: rgba(255, 255, 255, 0.14);
  --button-primary-bg: #37a08f;
  --button-primary-text: #07100f;
  --console-bg: rgba(255, 255, 255, 0.045);
  --console-panel-bg:
    linear-gradient(135deg, rgba(242, 132, 95, 0.16), transparent 58%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03)
    );
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Page-level horizontal-overflow guard — a stray wide element can never widen
   the page or push a fixed/right-anchored element off-screen. `clip` keeps
   position:sticky working (it does not create a scroll container). */
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
}

body,
body * {
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

a {
  color: inherit;
}

.page-shell {
  min-height: 100vh;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  background: var(--nav-bg);
  color: var(--nav-text);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Theme-aware logo swap: default/light shows dark-ink variant; dark mode shows light/coloured variant */
.brand-logo.logo-dark {
  display: none;
}
.brand-logo.logo-light {
  display: block;
}

body[data-theme="dark"] .brand-logo.logo-dark {
  display: block;
}
body[data-theme="dark"] .brand-logo.logo-light {
  display: none;
}

.footer .brand-logo,
.footer-logo {
  height: 27px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 1rem;
  color: var(--nav-link);
  font-size: 1rem;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--nav-text);
}

.theme-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ghost-bg);
  color: var(--nav-text);
  font: inherit;
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--ghost-hover);
}

.hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--hero-text);
  min-height: 88vh;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 28% 38%,
      rgba(189, 210, 204, 0.28),
      transparent 58%
    ),
    radial-gradient(
      ellipse at 79% 52%,
      rgba(178, 201, 194, 0.22),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(189, 210, 204, 0.18) 0%,
      rgba(189, 210, 204, 0) 48%
    );
}

body[data-theme="dark"] .hero::before {
  background:
    radial-gradient(
      ellipse at 28% 38%,
      rgba(13, 19, 21, 0.34),
      transparent 60%
    ),
    radial-gradient(ellipse at 79% 52%, rgba(17, 25, 28, 0.3), transparent 54%),
    linear-gradient(180deg, rgba(13, 19, 21, 0.24) 0%, rgba(13, 19, 21, 0) 50%);
}

/* Moving aurora colour layer for the hero — brand-coloured blobs drifting like
   the dashboard's aurora background (the patterns canvas above is untouched).
   Sits behind the patterns canvas and the content. */
.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}
.hero-orb.o1 {
  width: 48vw;
  height: 48vw;
  left: -10vw;
  top: -14vw;
  background: radial-gradient(
    closest-side,
    rgba(55, 160, 143, 0.6),
    transparent
  );
  animation: heroDrift1 32s ease-in-out infinite alternate;
}
.hero-orb.o2 {
  width: 42vw;
  height: 42vw;
  right: -12vw;
  top: -6vw;
  background: radial-gradient(
    closest-side,
    rgba(242, 132, 95, 0.52),
    transparent
  );
  animation: heroDrift2 38s ease-in-out infinite alternate;
}
.hero-orb.o3 {
  width: 52vw;
  height: 52vw;
  left: 16vw;
  bottom: -28vw;
  background: radial-gradient(
    closest-side,
    rgba(239, 133, 168, 0.42),
    transparent
  );
  animation: heroDrift3 44s ease-in-out infinite alternate;
}
body[data-theme="dark"] .hero-orb {
  opacity: 0.42;
}
@keyframes heroDrift1 {
  to {
    transform: translate3d(8vw, 10vh, 0) scale(1.12);
  }
}
@keyframes heroDrift2 {
  to {
    transform: translate3d(-9vw, 8vh, 0) scale(1.08);
  }
}
@keyframes heroDrift3 {
  to {
    transform: translate3d(6vw, -8vh, 0) scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb {
    animation: none !important;
  }
}

.industry-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.9;
  transition: opacity 220ms ease;
}

body[data-theme="dark"] .industry-canvas {
  mix-blend-mode: screen;
  opacity: 0.78;
}

/* Mobile browsers temporarily drop mix-blend-mode while scroll-compositing the
   canvas onto its own GPU layer — that is what makes the hero look brighter and
   softer mid-scroll (first section only, since it is the only canvas that uses a
   blend mode). On phone/tablet widths, render the hero canvas with normal blend
   — the same mode every other section already uses — so the look stays identical
   whether idle or scrolling. (The mobile hero canvas already gets its own
   compositor layer from its translateY/scale transform; will-change keeps that
   layer stable so the browser never re-blends it against the page mid-scroll.)
   Desktop keeps the richer multiply/screen blend, where the bug does not occur. */
@media (max-width: 900px) {
  #industryCanvas {
    mix-blend-mode: normal !important;
    will-change: transform;
  }
}

.hero-grid,
.footer {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

/* Sections are full-width so their canvas can fill the viewport.
   Inner content is re-centred via the child selector below. */
.section {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Keep section content centred at the same width as before */
.section > :not(.industry-canvas) {
  width: min(1180px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

.hero-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4.5rem, 10vw, 8rem) 0 3rem;
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--green);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 1rem;
  max-width: 880px;
  font-size: clamp(2rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.subhead {
  max-width: 620px;
  color: var(--hero-muted);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.48;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

/* Hero entrance — a one-time, staggered rise on load. Mirrors the live
   dashboard preview's reveal feel (SPEC-17 D11): active but seamless and
   stable — each block eases up in turn, the headline lands phrase by phrase,
   then everything settles. Above the fold, so it plays on first paint with
   no observer needed. Reduced motion gets the final resting state instantly. */
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-enter .eyebrow,
.hero-enter .subhead,
.hero-enter .hero-actions,
.hero-enter h1 .hl {
  opacity: 0;
  animation: heroRise 760ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-enter h1 .hl {
  display: inline-block;
  will-change: transform, opacity;
}

.hero-enter .eyebrow {
  animation-delay: 90ms;
}
.hero-enter h1 .hl:nth-child(1) {
  animation-delay: 220ms;
}
.hero-enter h1 .hl:nth-child(2) {
  animation-delay: 360ms;
}
.hero-enter h1 .hl:nth-child(3) {
  animation-delay: 500ms;
}
.hero-enter .subhead {
  animation-delay: 660ms;
}
.hero-enter .hero-actions {
  animation-delay: 820ms;
}

/* Top nav entrance — brand + each nav item drop in on first paint, matching
   the hero's "active but seamless" feel. Above the fold, so no observer
   needed; reduced motion pins them to rest. */
@keyframes navDrop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.site-nav .brand-mark,
.site-nav .nav-links > * {
  animation: navDrop 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.site-nav .brand-mark {
  animation-delay: 40ms;
}
.site-nav .nav-links > *:nth-child(1) {
  animation-delay: 140ms;
}
.site-nav .nav-links > *:nth-child(2) {
  animation-delay: 200ms;
}
.site-nav .nav-links > *:nth-child(3) {
  animation-delay: 260ms;
}
.site-nav .nav-links > *:nth-child(4) {
  animation-delay: 320ms;
}
.site-nav .nav-links > *:nth-child(5) {
  animation-delay: 380ms;
}
.site-nav .nav-links > *:nth-child(6) {
  animation-delay: 440ms;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.78rem 1.15rem;
  color: inherit;
  text-decoration: none;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.button-ghost {
  border-color: var(--line);
  color: var(--hero-text);
  background: var(--ghost-bg);
}

.signal-console {
  /* Scoped token overrides so console text stays readable on its dark background
     in both light and dark page modes. --muted-light here is lighter than the
     page-level value because the console bg is always dark-tinted. */
  --muted-light: #a8c8c2;
  --line: rgba(168, 210, 204, 0.18);
  --green: #6ccfc0;
  border: 1px solid rgba(168, 210, 204, 0.14);
  border-radius: 24px;
  background: rgba(10, 28, 22, 0.16);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: var(--shadow);
  padding: 1rem;
  transform: translateY(10px);
}

body[data-theme="dark"] .signal-console {
  background: rgba(17, 25, 28, 0.16);
}

/* Live preview card (landing hero) is genuinely theme-reactive, unlike the
   base .signal-console above (thank-you.html's card), which stays a fixed
   dark glass card by original design. Founder direction 2026-07-06: this
   card should read as a real light-mode card on the light page, not a
   permanently-dark card sitting on top of it. */
.signal-console.dash-preview {
  --muted-light: var(--muted);
  --green: #1a6a5d;
  --dp-text: var(--text);
  --dp-accent-a: #2f7b6f;
  --dp-track: rgba(33, 72, 63, 0.16);
  --dp-avatar-bg: rgba(33, 72, 63, 0.12);
  --dp-avatar-border: rgba(33, 72, 63, 0.22);
  --dp-inner-bg: rgba(255, 255, 255, 0.55);
  --dp-orange: #d9683f;
  --dp-orange-line: rgba(217, 104, 63, 0.45);
  --dp-orange-soft: rgba(217, 104, 63, 0.12);
  --dp-blocker-bg: rgba(217, 104, 63, 0.09);
  --dp-blocker-border: rgba(217, 104, 63, 0.22);
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(33, 72, 63, 0.16);
}
body[data-theme="dark"] .signal-console.dash-preview {
  --muted-light: #a8c8c2;
  --green: #6ccfc0;
  --dp-text: var(--white);
  --dp-accent-a: #37a08f;
  --dp-track: rgba(168, 210, 204, 0.18);
  --dp-avatar-bg: rgba(168, 210, 204, 0.18);
  --dp-avatar-border: rgba(168, 210, 204, 0.25);
  --dp-inner-bg: rgba(10, 28, 22, 0.55);
  --dp-orange: #f2895e;
  --dp-orange-line: rgba(242, 137, 94, 0.5);
  --dp-orange-soft: rgba(242, 137, 94, 0.16);
  --dp-blocker-bg: rgba(242, 137, 94, 0.1);
  --dp-blocker-border: rgba(242, 137, 94, 0.24);
  background: rgba(10, 28, 22, 0.16);
  border-color: rgba(168, 210, 204, 0.14);
}
.dash-preview .console-topline strong,
.dash-preview .console-metrics strong {
  color: var(--dp-text);
}

.console-topline,
.console-metrics {
  display: grid;
  gap: 0.7rem;
}

.console-topline {
  grid-template-columns: 1fr auto;
  align-items: center;
  color: var(--muted-light);
  font-size: 0.96rem;
}

.console-topline strong {
  color: var(--white);
}

/* Live founder identity row (populated from /showcase). */
.console-founder {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.console-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--white);
  background: rgba(168, 210, 204, 0.18);
  border: 1px solid rgba(168, 210, 204, 0.25);
}
.console-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.console-id {
  display: grid;
}
.console-id strong {
  color: var(--white);
  font-size: 1rem;
  line-height: 1.15;
}
.console-id span {
  color: var(--muted-light);
  font-size: 0.85rem;
}

/* Dashboard-style live preview (mirrors the workspace Signal card). */
.dp-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.7rem;
}
.dp-avatar {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--dp-text);
  background: var(--dp-avatar-bg);
  border: 1px solid var(--dp-avatar-border);
}
.dp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dp-id {
  display: grid;
}
.dp-id strong {
  color: var(--dp-text);
  font-size: 0.98rem;
  line-height: 1.15;
}
.dp-id span {
  color: var(--muted-light);
  font-size: 0.82rem;
}
.dp-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.9rem 0;
}
.dp-gauge {
  --pct: 0;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Gradient stroke — parity with the workspace gauge (SPEC-17 D5/D11):
     the filled arc ramps teal → light teal → coral and ends at --pct. */
  background: conic-gradient(
    var(--dp-accent-a) 0,
    var(--green) calc(var(--pct) * 0.6%),
    #d97962 calc(var(--pct) * 1%),
    var(--dp-track) 0
  );
}
.dp-gauge-in {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--dp-inner-bg);
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
}
.dp-gauge-in b {
  color: var(--dp-text);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}
.dp-tier {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-light);
  margin-top: 0.15rem;
}
.dp-dims {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.34rem;
}
.dp-dim {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dp-dim .dl {
  flex: 0 0 80px;
  font-size: 0.66rem;
  color: var(--muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Gradient sweep + glassy depth — parity with .dp-gauge/.sig-bar (SPEC-17
   D5-extension). The uncovered/"off" area uses --dp-track — the EXACT same
   token .dp-gauge uses for its own unfilled arc — so bars and gauge read as
   one consistent system. Each "on" segment is its own sampled colour (not a
   shared parent gradient), so nothing vivid sits behind the "off" cells. */
.dp-bar {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
}
.dp-bar i {
  height: 7px;
  flex: 1 1 auto;
  border-radius: 2px;
  background: var(--dp-track);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  transition: background 240ms ease; /* lets the reveal light segments in turn */
}
.dp-bar i.on {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.12);
}
.dp-bar i:nth-child(1).on {
  background: var(--dp-accent-a);
}
.dp-bar i:nth-child(2).on {
  background: color-mix(in srgb, var(--dp-accent-a) 60%, var(--green) 40%);
}
.dp-bar i:nth-child(3).on {
  background: var(--green);
}
.dp-bar i:nth-child(4).on {
  background: color-mix(in srgb, var(--green) 45%, #d97962 55%);
}
.dp-bar i:nth-child(5).on {
  background: #d97962;
}
.dp-blocker {
  position: relative;
  margin: 0.4rem 0 0.95rem;
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem 0.8rem;
  border-radius: 14px;
  border: 1px solid var(--dp-blocker-border);
  background: var(--dp-blocker-bg);
}
/* "Current blocker" reads as a brand-orange label heading the card. */
.dp-blocker .tag {
  align-self: start;
  margin: 0;
  color: var(--dp-orange);
  border-color: var(--dp-orange-line);
  background: var(--dp-orange-soft);
}
.dp-blocker p {
  position: relative;
  margin: 0;
  padding-left: 1.4rem;
  color: var(--dp-text);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
}
/* Elbow connector: a brand-orange line dropping from the label and turning in
   to point at the blocker statement — makes the label→statement link explicit
   instead of two loose rows. */
.dp-blocker p::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: -0.55rem;
  bottom: 0.32rem;
  width: 0.62rem;
  border-left: 2px solid var(--dp-orange-line);
  border-bottom: 2px solid var(--dp-orange-line);
  border-bottom-left-radius: 7px;
}

/* Milestones / Stage / Sector: each metric box now carries a value + a small
   context line (and Sector a brand icon), and the three reveal in sequence. */
.dp-metric {
  display: grid;
  gap: 0.12rem;
  align-content: start;
}
.dp-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}
.dp-metric-ic {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.9;
  color: var(--dp-accent-a);
}
.console-metrics .dp-metric-hint {
  display: block;
  margin-top: 0.15rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted-light);
}

.console-panel {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  margin: 1rem 0;
  border-radius: 20px;
  padding: 1.2rem;
  background: linear-gradient(
    180deg,
    rgba(10, 28, 22, 0.06),
    rgba(10, 28, 22, 0.22)
  );
  background-size:
    220% 220%,
    220% 220%,
    100% 100%;
  background-position:
    0% 50%,
    100% 50%,
    0 0;
  animation: cloudDrift 22s ease-in-out infinite alternate;
  border: 1px solid rgba(168, 210, 204, 0.14);
  backdrop-filter: blur(10px) saturate(135%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.console-panel::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(108, 207, 192, 0.18),
      transparent 45%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(217, 121, 98, 0.18),
      transparent 45%
    );
  filter: blur(40px);
  animation: cloudFloat 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.console-panel > * {
  position: relative;
  z-index: 1;
}

.console-panel p {
  color: #d8eae6;
}

@keyframes cloudDrift {
  0% {
    background-position:
      0% 30%,
      100% 70%,
      0 0;
  }
  50% {
    background-position:
      50% 80%,
      50% 20%,
      0 0;
  }
  100% {
    background-position:
      100% 50%,
      0% 50%,
      0 0;
  }
}

@keyframes cloudFloat {
  0% {
    transform: translate(-4%, -3%) rotate(0deg);
  }
  50% {
    transform: translate(3%, 4%) rotate(8deg);
  }
  100% {
    transform: translate(-2%, 2%) rotate(-6deg);
  }
}

.tag {
  align-self: flex-start;
  margin-bottom: auto;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.35rem 0.6rem;
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 800;
}

.console-panel h2 {
  margin: 2.4rem 0 0.7rem;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  color: #eef8f5;
}

.console-panel p,
.video-card p,
.feature-card p,
.form-intro p {
  color: var(--muted-light);
  line-height: 1.55;
}

.console-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.console-metrics div {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.8rem;
  background: rgba(33, 72, 63, 0.08);
}

.console-metrics span,
.index {
  display: block;
  color: var(--muted-light);
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
}

.console-metrics strong {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.1rem;
  line-height: 1.1;
  color: #eaf6f3;
}

.ticker {
  overflow: hidden;
  border-top: 1px solid rgba(33, 72, 63, 0.5);
  border-bottom: 1px solid rgba(33, 72, 63, 0.5);
  height: 54px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink-2) 100%);
}

.ticker-track {
  width: max-content;
  display: flex;
  gap: 0;
  animation: ticker 24s linear infinite;
}

.ticker-track span {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 1.4rem;
  color: rgba(220, 242, 236, 0.9);
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ticker-track span::after {
  content: "//";
  margin-left: 1.4rem;
  color: var(--coral);
  opacity: 0.9;
}

.section {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

/* Lift section content above canvas. Exclude canvas to preserve its absolute positioning. */
.section > :not(.industry-canvas) {
  position: relative;
  z-index: 1;
}

/* Override the global blend-mode for non-hero section canvases.
   Use normal blend so text is never affected by the animation. */
.section .industry-canvas {
  mix-blend-mode: normal !important;
  opacity: 0.58;
}

body[data-theme="dark"] .section .industry-canvas {
  opacity: 0.58;
}

/* Dark-band has a dark bg — screen blend makes the animation visible */
.dark-band .industry-canvas {
  mix-blend-mode: screen !important;
  opacity: 0.7;
}

body[data-theme="dark"] .dark-band .industry-canvas {
  opacity: 0.74;
}

#signals .industry-canvas {
  opacity: 0.7;
}

body[data-theme="dark"] #signals .industry-canvas {
  opacity: 0.72;
}

#survey .industry-canvas {
  opacity: 0.68;
}

body[data-theme="dark"] #survey .industry-canvas {
  opacity: 0.72;
}

.section-heading {
  max-width: 880px;
  margin-bottom: 2rem;
}

.section-heading h2 {
  color: var(--text);
}

.cards,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(138, 170, 162, 0.24);
  border: 1px solid rgba(138, 170, 162, 0.38);
}

body[data-theme="dark"] .cards,
body[data-theme="dark"] .feature-grid {
  background: rgba(231, 239, 238, 0.08);
  border-color: rgba(231, 239, 238, 0.16);
}

.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 1.3rem;
  background: rgba(214, 201, 188, 0.08); /* --surface-card light at 8% */
  backdrop-filter: blur(0.5px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition:
    transform 360ms ease,
    background 360ms ease;
}

body[data-theme="dark"] .feature-card {
  background: rgba(17, 25, 28, 0.24); /* --surface-card dark at 24% */
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: -50% -50% auto auto;
  width: 220%;
  height: 220%;
  background: radial-gradient(
    circle,
    rgba(217, 121, 98, 0.22),
    transparent 45%
  );
  opacity: 0;
  transform: translate(20%, -20%);
  transition:
    opacity 500ms ease,
    transform 700ms ease;
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card:hover::before {
  opacity: 1;
  transform: translate(0%, 0%);
}

.feature-card > * {
  position: relative;
  z-index: 1;
}

.feature-card .index {
  margin-bottom: 0.65rem;
  color: var(--green-deep);
}

.feature-card p {
  margin-top: auto;
  color: var(--muted);
}

.dark-band {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background:
    linear-gradient(135deg, rgba(217, 121, 98, 0.14), transparent 42%),
    linear-gradient(180deg, var(--ink), var(--ink-2));
  color: var(--white);
}

.dark-band::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(108, 207, 192, 0.18),
      transparent 40%
    ),
    radial-gradient(circle at 80% 70%, rgba(217, 121, 98, 0.2), transparent 40%);
  filter: blur(60px);
  animation: cloudFloat 26s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.dark-band > :not(.industry-canvas) {
  position: relative;
  z-index: 1;
}

.dark-band .split {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}

.video-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.2rem;
  background: rgba(33, 72, 63, 0.08);
  backdrop-filter: blur(2px);
}

.dark-band .eyebrow {
  color: rgba(247, 251, 250, 0.92);
}

.dark-band .video-card p {
  color: rgba(240, 248, 246, 0.9);
}

.prompt {
  color: var(--white) !important;
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 900;
  line-height: 1.12;
}

.form-section {
  padding-bottom: 5rem;
}

.form-shell {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr);
  gap: 1px;
  background: rgba(138, 170, 162, 0.24);
  border: 1px solid rgba(138, 170, 162, 0.38);
}

body[data-theme="dark"] .form-shell {
  background: rgba(231, 239, 238, 0.08);
  border-color: rgba(231, 239, 238, 0.16);
}

.form-intro,
.survey-form {
  background: rgba(214, 201, 188, 0.08); /* --surface-card light at 8% */
  backdrop-filter: blur(1px);
}

body[data-theme="dark"] .form-intro,
body[data-theme="dark"] .survey-form {
  background: rgba(17, 25, 28, 0.22); /* --surface-card dark at 22% */
}

.form-intro {
  padding: clamp(1.2rem, 3vw, 2rem);
}

.form-intro h2 {
  margin-bottom: 1rem;
}

.form-intro p {
  color: var(--muted);
}

.micro-list {
  display: grid;
  gap: 0.45rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.micro-list li {
  border-top: 1px solid var(--line-dark);
  padding-top: 0.45rem;
  color: var(--muted);
}

.survey-form {
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

label {
  display: grid;
  gap: 0.42rem;
  color: var(--text);
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  padding: 0.82rem 0.85rem;
  background: rgba(218, 204, 191, 0.22);
  color: var(--text);
  font: inherit;
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  background: rgba(12, 20, 22, 0.45);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.full {
  grid-column: 1 / -1;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.45;
}

.check input {
  width: auto;
  margin-top: 0.18rem;
}

.survey-form .button-primary {
  justify-self: start;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--line-dark);
  color: var(--muted);
}

.footer p {
  margin: 0;
}

.footer a {
  color: var(--text);
}

/* FE-QB-04: contact + privacy summary + risk-language disclaimer, not just
   logo + email — an investment-adjacent product needs more than that.
   Laid out as three equal-width columns filling the space beside the logo,
   evenly spaced edge to edge, every column's text centered. */
.footer-info {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-weight: 600;
}

.footer-fine {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Legal/reference pages (privacy.html): the shared h1/h2 scale is tuned for
   the hero headline, not body content — h2 at hero scale reads absurdly
   oversized on a text-heavy page. Scope a sane, readable rhythm instead. */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
.legal-page .subhead {
  max-width: none;
}
.legal-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-top: 1.8rem;
}
body[data-theme="dark"] .legal-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
}
.legal-card h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--hero-text);
}
.legal-card section + section {
  margin-top: 1.6rem;
}
.legal-card section:first-child h2 {
  margin-top: 0;
}
.legal-card p {
  margin-top: 0.5rem;
  color: var(--muted);
  line-height: 1.55;
}
.legal-card code {
  font-size: 0.88em;
  background: rgba(33, 72, 63, 0.12);
  padding: 0.1em 0.4em;
  border-radius: 5px;
}
body[data-theme="dark"] .legal-card code {
  background: rgba(255, 255, 255, 0.08);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll-driven staggered reveal — a container marked .reveal-stagger reveals
   its DIRECT children in sequence as it scrolls into view. Same "active but
   seamless" rise as the hero entrance, but IntersectionObserver-triggered
   (script.js), so nothing below the fold animates until it is actually on
   screen — section-to-section transitions stay seamless. The per-child stagger
   index (--i) is stamped by script.js so any child count works. Applied to all
   section components (cards, split halves, intro lines), not just headings. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(90ms + var(--i, 0) * 120ms);
  will-change: opacity, transform;
}

.reveal-stagger.is-visible > *,
.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Easter egg toast */
.egg-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 999;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(100deg, #21483f, #d97962);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 280ms ease,
    transform 280ms ease;
}

.egg-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .console-panel,
  .console-panel::before,
  .dark-band::before {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker-track {
    animation: none;
  }

  .button,
  .reveal,
  body,
  body * {
    transition: none;
  }

  .hero-enter .eyebrow,
  .hero-enter .subhead,
  .hero-enter .hero-actions,
  .hero-enter h1 .hl {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav .brand-mark,
  .site-nav .nav-links > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .hero-grid,
  .split,
  .form-shell {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    align-items: start;
    padding-top: clamp(3.8rem, 12vw, 5.8rem);
  }

  .hero::before {
    background:
      radial-gradient(
        ellipse at 50% 26%,
        rgba(189, 210, 204, 0.34),
        transparent 62%
      ),
      radial-gradient(
        ellipse at 50% 58%,
        rgba(178, 201, 194, 0.2),
        transparent 56%
      ),
      linear-gradient(
        180deg,
        rgba(189, 210, 204, 0.22) 0%,
        rgba(189, 210, 204, 0) 52%
      );
  }

  body[data-theme="dark"] .hero::before {
    background:
      radial-gradient(
        ellipse at 50% 26%,
        rgba(13, 19, 21, 0.42),
        transparent 62%
      ),
      radial-gradient(
        ellipse at 50% 58%,
        rgba(17, 25, 28, 0.26),
        transparent 56%
      ),
      linear-gradient(180deg, rgba(13, 19, 21, 0.3) 0%, rgba(13, 19, 21, 0) 56%);
  }

  .industry-canvas {
    opacity: 0.72;
    transform: translateY(-9%) scale(1.04);
    transform-origin: top center;
  }

  body[data-theme="dark"] .industry-canvas {
    opacity: 0.64;
  }

  .signal-console {
    transform: none;
  }

  .feature-grid,
  .survey-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  /* Compact single-row bar: logo left, links swipe horizontally — keeps the
     mobile nav short instead of a tall stacked column. */
  .site-nav {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
  }

  .brand-logo {
    height: 28px;
  }

  .nav-links {
    flex: 1 1 auto;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0 1rem;
    font-size: 0.98rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  .nav-links a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .theme-toggle {
    flex: 0 0 auto;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    gap: 1.5rem;
    padding-top: 3.2rem;
    padding-bottom: 2.2rem;
  }

  h1 {
    font-size: clamp(2.55rem, 10vw, 4rem);
    line-height: 0.96;
  }

  .industry-canvas {
    opacity: 0.62;
    transform: translateY(-16%) scale(1.08);
  }

  body[data-theme="dark"] .industry-canvas {
    opacity: 0.56;
  }

  .console-metrics {
    grid-template-columns: 1fr;
  }

  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-info {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}