:root {
  --bg: #020615;
  --bg-deep: #01030b;
  --bg-soft: #07112a;
  --surface: rgba(8, 18, 45, 0.72);
  --surface-strong: rgba(7, 16, 39, 0.94);
  --surface-bright: rgba(14, 35, 78, 0.74);
  --surface-frost: rgba(10, 24, 58, 0.58);
  --line: rgba(113, 205, 255, 0.18);
  --line-medium: rgba(111, 215, 255, 0.3);
  --line-strong: rgba(79, 229, 255, 0.62);
  --text: #f4f8ff;
  --muted: #9eb0ca;
  --muted-strong: #ccd8e8;
  --cyan: #48eaff;
  --cyan-soft: #a1f7ff;
  --blue: #4f86ff;
  --blue-deep: #3154ce;
  --violet: #a76bff;
  --violet-soft: #c9a7ff;
  --green: #4cf2c9;
  --amber: #ffc66d;
  --pink: #ff79c8;
  --shadow-lg: 0 44px 120px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 24px 70px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 0 70px rgba(55, 208, 255, 0.2);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --container: 1280px;
  --header-height: 82px;
  --font-sans: Inter, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Arial Narrow", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --pointer-x: 50vw;
  --pointer-y: 18vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 26px);
  background: var(--bg-deep);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 8%, rgba(43, 109, 230, 0.18), transparent 34rem),
    radial-gradient(circle at 86% 12%, rgba(119, 48, 211, 0.17), transparent 34rem),
    linear-gradient(180deg, #01040e 0%, #04091d 36%, #030719 68%, #01030c 100%);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 6px;
}

::selection {
  color: #00141d;
  background: var(--cyan-soft);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  color: #00131c;
  background: var(--cyan);
  border-radius: 9px;
  font-weight: 900;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.cosmic-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.75;
}

.pointer-aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--pointer-x) var(--pointer-y), rgba(65, 203, 255, 0.085), transparent 64%);
  mix-blend-mode: screen;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.025);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
  box-shadow: 0 0 16px rgba(74, 224, 255, 0.85);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.site-shell {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.container {
  width: min(calc(100% - 44px), var(--container));
  margin-inline: auto;
}

section[id] {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.section {
  position: relative;
  padding: clamp(96px, 10vw, 160px) 0;
}

.section-number {
  position: absolute;
  top: 34px;
  right: max(24px, calc((100vw - var(--container)) / 2));
  z-index: -1;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(7rem, 16vw, 15rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.09em;
  -webkit-text-stroke: 1px rgba(95, 203, 255, 0.085);
  user-select: none;
}

.kicker,
.eyebrow,
.console-kicker {
  margin: 0;
  color: var(--cyan-soft);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.03;
  text-wrap: balance;
}

h1 {
  margin-bottom: 28px;
  font-size: clamp(3.5rem, 5.55vw, 6.15rem);
  letter-spacing: -0.065em;
}

h1 span {
  display: block;
}

h1 .title-gradient {
  color: transparent;
  background: linear-gradient(103deg, #f9ffff 2%, var(--cyan-soft) 38%, #72baff 66%, var(--violet-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(75, 218, 255, 0.18));
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.65rem, 4.75vw, 5.25rem);
  letter-spacing: -0.055em;
}

h3 {
  margin-bottom: 14px;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  letter-spacing: -0.035em;
}

p:last-child {
  margin-bottom: 0;
}

.section-heading {
  max-width: 920px;
  margin-bottom: clamp(52px, 7vw, 86px);
}

.section-heading .kicker,
.split-heading .kicker,
.architecture-intro .kicker,
.audience-heading .kicker,
.development-head .kicker {
  margin-bottom: 18px;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-intro {
  max-width: 800px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.45vw, 1.27rem);
}

.section-intro.align-left {
  margin-left: 0;
}

.large-copy {
  color: var(--text);
  font-size: clamp(1.2rem, 1.65vw, 1.55rem);
  font-weight: 650;
  line-height: 1.48;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
  width: 100%;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(1, 4, 14, 0.93), rgba(1, 4, 14, 0.5) 72%, transparent);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, height 220ms ease;
}

.site-header.is-scrolled {
  border-color: rgba(100, 203, 255, 0.15);
  background: rgba(3, 7, 22, 0.84);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(72, 232, 255, 0.28);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(16, 62, 120, 0.75), rgba(9, 18, 49, 0.88));
  box-shadow: inset 0 0 24px rgba(78, 224, 255, 0.12), 0 0 24px rgba(49, 172, 255, 0.11);
  overflow: hidden;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: -80% -30%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
  transform: translateX(-80%) rotate(15deg);
  animation: brand-shine 7s ease-in-out infinite;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  color: #f6fbff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.brand-company {
  margin-top: 5px;
  color: var(--cyan);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.primary-nav a {
  position: relative;
  color: #c7d3e5;
  font-size: 0.91rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease;
}

.primary-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(72, 234, 255, 0.7);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.2);
  transition: opacity 160ms ease, transform 160ms ease;
}

.primary-nav a:hover,
.primary-nav a[aria-current="location"] {
  color: #fff;
}

.primary-nav > a:hover::after,
.primary-nav > a[aria-current="location"]::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  color: #00151f !important;
  border: 1px solid rgba(154, 247, 255, 0.7);
  border-radius: 13px;
  background: linear-gradient(115deg, #67efff, #83f5ff 54%, #8ab9ff);
  box-shadow: 0 10px 28px rgba(49, 196, 255, 0.22), inset 0 1px rgba(255, 255, 255, 0.5);
  font-weight: 900 !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(49, 196, 255, 0.32), inset 0 1px rgba(255, 255, 255, 0.55);
  filter: brightness(1.05);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--muted-strong);
  border: 1px solid rgba(101, 196, 255, 0.16);
  border-radius: 999px;
  background: rgba(7, 17, 44, 0.66);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.motion-toggle:hover,
.motion-toggle[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(81, 224, 255, 0.38);
  background: rgba(13, 35, 74, 0.8);
}

.motion-icon {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 15px;
}

.motion-icon i {
  display: block;
  width: 2px;
  border-radius: 999px;
  background: var(--cyan);
  animation: equalize 1.2s ease-in-out infinite;
}

.motion-icon i:nth-child(1) { height: 7px; animation-delay: -0.4s; }
.motion-icon i:nth-child(2) { height: 14px; animation-delay: -0.2s; }
.motion-icon i:nth-child(3) { height: 9px; }

.motion-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(101, 196, 255, 0.22);
  border-radius: 13px;
  background: rgba(8, 19, 48, 0.86);
  cursor: pointer;
}

.nav-toggle > span:not(.sr-only) {
  display: block;
  width: 21px;
  height: 2px;
  margin: 4px auto;
  border-radius: 99px;
  background: #ecf9ff;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(4) { transform: translateY(-6px) rotate(-45deg); }

/* Progressive fallback: keep a direct contact path available when JavaScript is disabled. */
html:not(.js) .motion-toggle,
html:not(.js) .nav-toggle {
  display: none;
}

/* Buttons */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 15px;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.28) 50%, transparent 75%);
  transform: translateX(-140%);
  transition: transform 560ms ease;
}

.button:hover::before {
  transform: translateX(140%);
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  color: #00141d;
  background: linear-gradient(110deg, #50eaff, #8bf5ff 52%, #8bb6ff);
  box-shadow: 0 18px 44px rgba(45, 203, 255, 0.24), inset 0 1px rgba(255, 255, 255, 0.65);
}

.button-primary:hover {
  box-shadow: 0 23px 54px rgba(45, 203, 255, 0.34), inset 0 1px rgba(255, 255, 255, 0.72);
}

.button-secondary {
  color: #eaf6ff;
  border-color: rgba(102, 207, 255, 0.32);
  background: rgba(8, 22, 55, 0.64);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.button-secondary:hover {
  border-color: rgba(83, 229, 255, 0.64);
  box-shadow: 0 16px 42px rgba(20, 91, 166, 0.2), inset 0 1px rgba(255, 255, 255, 0.08);
}

/* Hero */
.hero {
  display: flex;
  min-height: max(860px, 100svh);
  align-items: center;
  padding-top: calc(var(--header-height) + clamp(64px, 7vw, 100px));
  padding-bottom: clamp(90px, 9vw, 130px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -6;
  background:
    linear-gradient(90deg, rgba(1, 4, 15, 0.45), transparent 52%),
    radial-gradient(circle at 68% 35%, rgba(54, 111, 230, 0.19), transparent 35rem),
    linear-gradient(180deg, rgba(2, 6, 21, 0.1), #030719 94%);
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: -5;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(85, 207, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 207, 255, 0.08) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 68%, transparent 100%);
}

.hero-grid-lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 0, rgba(1, 4, 14, 0.95) 72%);
}

.aurora {
  position: absolute;
  z-index: -4;
  width: 58vw;
  height: 44vw;
  min-width: 700px;
  min-height: 540px;
  border-radius: 45% 55% 62% 38%;
  filter: blur(70px) saturate(145%);
  opacity: 0.22;
  mix-blend-mode: screen;
  transform-origin: center;
  pointer-events: none;
}

.aurora-one {
  top: -18vw;
  right: -12vw;
  background: conic-gradient(from 210deg, transparent, #4d28cc, #00d8ff, #34ffc8, transparent 72%);
  animation: aurora-drift-one 16s ease-in-out infinite alternate;
}

.aurora-two {
  bottom: -25vw;
  left: -14vw;
  background: conic-gradient(from 40deg, transparent, #00d6ff, #4548ef, #a83cff, transparent 76%);
  animation: aurora-drift-two 19s ease-in-out infinite alternate;
}

.hero-bloom {
  position: absolute;
  z-index: -3;
  top: 20%;
  right: 12%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 227, 255, 0.14), rgba(70, 73, 229, 0.08) 42%, transparent 70%);
  filter: blur(16px);
  animation: bloom-pulse 7s ease-in-out infinite;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(480px, 0.96fr);
  align-items: center;
  gap: clamp(46px, 5.6vw, 86px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-bottom: 30px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 0 13px;
  color: #d9fff5;
  border: 1px solid rgba(78, 243, 206, 0.35);
  border-radius: 999px;
  background: rgba(21, 94, 84, 0.22);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.status-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(78, 243, 206, 0.85);
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(78, 243, 206, 0.4);
  border-radius: 50%;
  animation: status-ring 2.2s ease-out infinite;
}

.hero-statement {
  max-width: 680px;
  margin-bottom: 18px;
  color: #e4edf9;
  font-size: clamp(1.16rem, 1.55vw, 1.42rem);
  font-weight: 700;
  line-height: 1.5;
}

.hero-lead {
  max-width: 670px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
}

.hero-lead strong {
  color: var(--cyan-soft);
  font-weight: 800;
}

.hero-mantra {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
  margin-bottom: 30px;
  color: #f6fbff;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  font-weight: 850;
}

.hero-mantra span:last-child {
  color: #c7d8eb;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.hero-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(113, 205, 255, 0.15);
}

.hero-signals span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9fb1c9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-signals i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(72, 234, 255, 0.65);
}

.hero-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-visual.is-visible[data-tilt] {
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 180ms ease-out;
}

.hero-image-panel {
  position: relative;
  z-index: 2;
  margin: 0;
  border: 1px solid rgba(96, 218, 255, 0.38);
  border-radius: 32px;
  background: #02091d;
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(50, 178, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform: translateZ(28px);
}

.hero-image-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 70px rgba(1, 4, 16, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.hero-image-panel picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.hero-image-panel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.01);
}

.image-hologram {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(103, 229, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 229, 255, 0.13) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}

.image-scan {
  position: absolute;
  z-index: 4;
  left: 0;
  top: -30%;
  width: 100%;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(98, 241, 255, 0.19), transparent);
  mix-blend-mode: screen;
  animation: image-scan 7s linear infinite;
}

.hero-image-panel figcaption {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 0 20px;
  color: #c9d7e8;
  border-top: 1px solid rgba(112, 213, 255, 0.18);
  background: rgba(3, 10, 28, 0.9);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.caption-index {
  color: var(--cyan);
  white-space: nowrap;
}

.visual-orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(91, 204, 255, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.visual-orbit::before,
.visual-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: #05112e;
  box-shadow: 0 0 16px rgba(72, 234, 255, 0.75);
}

.visual-orbit-one {
  width: 112%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(12deg);
  animation: orbit-spin 38s linear infinite;
}

.visual-orbit-one::before { top: 14%; left: 13%; }
.visual-orbit-one::after { right: 8%; bottom: 28%; }

.visual-orbit-two {
  width: 125%;
  aspect-ratio: 1;
  border-style: dashed;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: orbit-spin-reverse 52s linear infinite;
}

.visual-orbit-two::before { top: 4%; right: 29%; }
.visual-orbit-two::after { left: 6%; bottom: 38%; }

.visual-orbit-three {
  width: 92%;
  aspect-ratio: 1;
  border-color: rgba(171, 111, 255, 0.15);
  transform: translate(-50%, -50%) rotate(52deg);
  animation: orbit-spin 31s linear infinite;
}

.visual-orbit-three::before { top: 22%; right: 5%; border-color: var(--violet); box-shadow: 0 0 16px rgba(167, 107, 255, 0.7); }
.visual-orbit-three::after { left: 17%; bottom: 4%; border-color: var(--violet); box-shadow: 0 0 16px rgba(167, 107, 255, 0.7); }

.orbit-chip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  color: #dce8f7;
  border: 1px solid rgba(96, 212, 255, 0.22);
  border-radius: 999px;
  background: rgba(5, 14, 38, 0.8);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transform: translateZ(60px);
}

.orbit-chip span {
  color: var(--cyan);
}

.chip-research { top: -18px; left: 18%; }
.chip-policy { top: 16%; right: -34px; }
.chip-memory { bottom: 15%; left: -38px; }
.chip-tools { right: 10%; bottom: -17px; }

.executive-badge {
  position: absolute;
  z-index: 7;
  right: 28px;
  bottom: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 13px 15px;
  border: 1px solid rgba(93, 228, 255, 0.28);
  border-radius: 15px;
  background: rgba(4, 12, 34, 0.86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 28px rgba(56, 188, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateZ(70px);
}

.executive-pulse {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #d9ffff;
  box-shadow: 0 0 18px rgba(72, 234, 255, 0.95);
}

.executive-pulse::before,
.executive-pulse::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(72, 234, 255, 0.35);
  border-radius: 50%;
  animation: executive-ripple 2.6s ease-out infinite;
}

.executive-pulse::after { animation-delay: 1.3s; }

.executive-badge div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.executive-badge small {
  color: var(--cyan);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.executive-badge strong {
  margin-top: 3px;
  color: #edf8ff;
  font-size: 0.77rem;
  letter-spacing: 0.04em;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8597b0;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  overflow: hidden;
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -2px;
  width: 5px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 10px rgba(72, 234, 255, 0.8);
  animation: scroll-drop 2s ease-in-out infinite;
}

/* Capability rail */
.capability-rail {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  border-block: 1px solid rgba(98, 208, 255, 0.14);
  background: rgba(4, 12, 31, 0.78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.capability-rail::before,
.capability-rail::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 11vw;
  pointer-events: none;
}

.capability-rail::before { left: 0; background: linear-gradient(90deg, #030719, transparent); }
.capability-rail::after { right: 0; background: linear-gradient(-90deg, #030719, transparent); }

.rail-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 22px;
  min-width: max-content;
  padding: 19px 11px;
  animation: rail-scroll 34s linear infinite;
}

.rail-track span {
  color: #b6c8dc;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rail-track i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(72, 234, 255, 0.7);
}

/* Vision / thesis */
.thesis {
  background:
    radial-gradient(circle at 90% 20%, rgba(68, 87, 207, 0.11), transparent 31rem),
    linear-gradient(180deg, rgba(4, 9, 29, 0.22), rgba(4, 10, 29, 0.82));
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

.split-heading h2 {
  max-width: 760px;
  margin-bottom: 0;
}

.prose-stack {
  color: var(--muted);
  font-size: 1.04rem;
}

.prose-stack p {
  margin-bottom: 18px;
}

.contrast-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  margin-top: clamp(62px, 8vw, 105px);
}

.contrast-panel {
  position: relative;
  min-height: 520px;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(101, 199, 255, 0.17);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(10, 22, 52, 0.88), rgba(4, 10, 30, 0.84));
  box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.contrast-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.025) 38%, transparent 70%);
}

.contrast-single {
  filter: saturate(0.76);
}

.contrast-northstar {
  border-color: rgba(81, 224, 255, 0.32);
  background:
    radial-gradient(circle at 50% 35%, rgba(51, 129, 255, 0.14), transparent 42%),
    linear-gradient(150deg, rgba(10, 30, 67, 0.9), rgba(5, 11, 32, 0.92));
  box-shadow: var(--shadow-md), 0 0 65px rgba(44, 177, 255, 0.1), inset 0 1px rgba(255, 255, 255, 0.06);
}

.contrast-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #8093ad;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contrast-topline strong {
  color: var(--cyan-soft);
  font-size: 0.68rem;
}

.contrast-panel h3 {
  margin-top: 24px;
  font-size: clamp(1.55rem, 2.1vw, 2.25rem);
}

.contrast-panel p {
  color: var(--muted);
}

.single-model-visual,
.mini-constellation {
  position: relative;
  height: 230px;
  margin-top: 34px;
  border: 1px solid rgba(99, 190, 255, 0.11);
  border-radius: 20px;
  background:
    linear-gradient(rgba(91, 194, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 194, 255, 0.04) 1px, transparent 1px),
    rgba(3, 8, 24, 0.48);
  background-size: 28px 28px;
  overflow: hidden;
}

.single-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(166, 181, 205, 0.48);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #eef7ff, #7390bd 18%, #20314d 55%, #0a1020 100%);
  box-shadow: 0 0 44px rgba(123, 150, 191, 0.22);
  transform: translate(-50%, -50%);
}

.single-orb::before {
  content: "1";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #0a1526;
  font-size: 1.3rem;
  font-weight: 950;
}

.single-demand {
  position: absolute;
  padding: 7px 10px;
  color: #9eacc0;
  border: 1px solid rgba(151, 168, 195, 0.2);
  border-radius: 8px;
  background: rgba(13, 22, 39, 0.8);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.single-demand::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 1px;
  background: rgba(157, 174, 199, 0.22);
}

.demand-one { top: 22px; left: 22px; }
.demand-one::after { top: 24px; right: -36px; transform: rotate(22deg); }
.demand-two { top: 22px; right: 22px; }
.demand-two::after { top: 24px; left: -36px; transform: rotate(-22deg); }
.demand-three { bottom: 22px; left: 22px; }
.demand-three::after { top: 5px; right: -36px; transform: rotate(-22deg); }
.demand-four { bottom: 22px; right: 22px; }
.demand-four::after { top: 5px; left: -36px; transform: rotate(22deg); }
.demand-five { bottom: 16px; left: 50%; transform: translateX(-50%); }
.demand-five::after { display: none; }

.mini-constellation {
  background:
    radial-gradient(circle at 50% 50%, rgba(43, 151, 255, 0.12), transparent 45%),
    linear-gradient(rgba(91, 194, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 194, 255, 0.05) 1px, transparent 1px),
    rgba(3, 10, 28, 0.62);
  background-size: auto, 28px 28px, 28px 28px, auto;
}

.mini-core,
.mini-node {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
}

.mini-core {
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border: 2px solid var(--cyan-soft);
  background: radial-gradient(circle, #f8ffff 0 10%, #65efff 12% 28%, #176eea 30% 58%, #0b1637 60% 100%);
  box-shadow: 0 0 38px rgba(72, 234, 255, 0.65);
  transform: translate(-50%, -50%);
}

.mini-core::after {
  content: "N";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #00131d;
  font-size: 0.82rem;
  font-weight: 950;
}

.mini-node {
  width: 20px;
  height: 20px;
  border: 1px solid var(--cyan);
  background: #081b43;
  box-shadow: 0 0 18px rgba(72, 234, 255, 0.45);
}

.node-a { top: 18%; left: 50%; transform: translateX(-50%); }
.node-b { top: 34%; right: 16%; }
.node-c { bottom: 18%; right: 28%; }
.node-d { bottom: 18%; left: 28%; }
.node-e { top: 34%; left: 16%; }

.mini-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 33%;
  height: 1px;
  background: linear-gradient(90deg, rgba(72, 234, 255, 0.75), rgba(80, 139, 255, 0.18));
  transform-origin: left center;
}

.line-a { transform: rotate(-90deg); }
.line-b { transform: rotate(-31deg); }
.line-c { transform: rotate(48deg); }
.line-d { transform: rotate(132deg); }
.line-e { transform: rotate(211deg); }

.contrast-shift {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--cyan);
}

.contrast-shift span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(74, 229, 255, 0.34);
  border-radius: 50%;
  background: rgba(9, 26, 57, 0.86);
  box-shadow: 0 0 30px rgba(45, 192, 255, 0.13);
  font-size: 1.4rem;
}

.contrast-shift small {
  color: #8fa2bb;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  writing-mode: vertical-rl;
}

.northstar-question {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 34px;
  margin-top: 34px;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid rgba(91, 220, 255, 0.23);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, rgba(13, 44, 86, 0.8), rgba(8, 20, 54, 0.84) 50%, rgba(38, 21, 83, 0.72)),
    rgba(5, 14, 35, 0.92);
  box-shadow: var(--shadow-md), 0 0 60px rgba(47, 174, 255, 0.08);
  overflow: hidden;
}

.northstar-question::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.035), transparent 68%);
  pointer-events: none;
}

.question-label {
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.northstar-question blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #f3f9ff;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.45vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.question-mark {
  position: absolute;
  right: 22px;
  bottom: -42px;
  color: rgba(124, 221, 255, 0.075);
  font-family: var(--font-display);
  font-size: 10rem;
  font-weight: 900;
  line-height: 1;
}

/* Cognition definition cards */
.cognition {
  background:
    radial-gradient(circle at 15% 40%, rgba(42, 133, 255, 0.1), transparent 34rem),
    radial-gradient(circle at 88% 60%, rgba(159, 68, 255, 0.09), transparent 34rem),
    rgba(2, 6, 20, 0.68);
}

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

.definition-card {
  position: relative;
  min-height: 650px;
  padding: clamp(28px, 3vw, 38px);
  border: 1px solid rgba(101, 203, 255, 0.18);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(12, 28, 65, 0.82), rgba(5, 12, 34, 0.92));
  box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, 0.045);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.definition-card.is-visible[data-tilt] {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 180ms ease-out, border-color 220ms ease, box-shadow 220ms ease;
}

.definition-card:hover {
  border-color: rgba(80, 228, 255, 0.42);
  box-shadow: var(--shadow-md), 0 0 55px rgba(53, 184, 255, 0.11), inset 0 1px rgba(255, 255, 255, 0.065);
}

.card-glow {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 201, 255, 0.16), transparent 65%);
  pointer-events: none;
}

.definition-card:nth-child(2) .card-glow { background: radial-gradient(circle, rgba(103, 115, 255, 0.18), transparent 65%); }
.definition-card:nth-child(3) .card-glow { background: radial-gradient(circle, rgba(173, 86, 255, 0.16), transparent 65%); }

.definition-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.definition-index {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.definition-word {
  color: #7f92ad;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.definition-visual {
  position: relative;
  height: 260px;
  margin: 26px 0 34px;
  border: 1px solid rgba(98, 195, 255, 0.12);
  border-radius: 21px;
  background:
    linear-gradient(rgba(88, 194, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 194, 255, 0.045) 1px, transparent 1px),
    rgba(2, 8, 25, 0.62);
  background-size: 30px 30px;
  overflow: hidden;
}

.definition-card h3 {
  font-size: clamp(1.5rem, 2vw, 2rem);
}

.definition-card > p {
  color: var(--muted);
}

.card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 26px;
}

.card-foot span {
  padding: 6px 8px;
  color: #9db0c8;
  border: 1px solid rgba(99, 193, 255, 0.13);
  border-radius: 7px;
  background: rgba(4, 12, 33, 0.5);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visual-distributed .dv-core,
.visual-distributed .dv-node {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
}

.dv-core {
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  border: 1px solid var(--cyan-soft);
  background: radial-gradient(circle, #f7ffff 0 10%, #55eaff 12% 28%, #286fe9 30% 60%, #071534 62% 100%);
  box-shadow: 0 0 35px rgba(72, 234, 255, 0.58);
  transform: translate(-50%, -50%);
}

.dv-node {
  width: 18px;
  height: 18px;
  border: 1px solid var(--cyan);
  background: #071a40;
  box-shadow: 0 0 14px rgba(72, 234, 255, 0.4);
}

.dv-one { top: 17%; left: 50%; transform: translateX(-50%); }
.dv-two { top: 34%; right: 15%; }
.dv-three { bottom: 18%; right: 25%; }
.dv-four { bottom: 18%; left: 25%; }
.dv-five { top: 34%; left: 15%; }

.dv-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 37%;
  height: 1px;
  background: linear-gradient(90deg, rgba(70, 232, 255, 0.78), rgba(79, 117, 255, 0.14));
  transform-origin: left center;
}

.dl-one { transform: rotate(-90deg); }
.dl-two { transform: rotate(-30deg); }
.dl-three { transform: rotate(48deg); }
.dl-four { transform: rotate(132deg); }
.dl-five { transform: rotate(210deg); }

.visual-distributed::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 49.5%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--cyan);
  animation: network-ping 3.2s ease-in-out infinite;
}

.visual-inference {
  display: grid;
  grid-template-columns: 70px 1fr 90px;
  align-items: center;
  gap: 16px;
  padding: 28px;
}

.route-source {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(99, 229, 255, 0.5);
  border-radius: 50%;
  color: #00131d;
  background: radial-gradient(circle at 34% 30%, #fff, #78efff 38%, #3a7cff 72%, #15234b 100%);
  box-shadow: 0 0 32px rgba(64, 211, 255, 0.38);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.route-lanes {
  display: grid;
  gap: 20px;
}

.route-lanes i {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(72, 234, 255, 0.12), var(--cyan), rgba(90, 120, 255, 0.18));
  overflow: hidden;
}

.route-lanes i::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -12px;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--cyan);
  animation: lane-pulse 2.7s linear infinite;
}

.route-lanes i:nth-child(2)::after { animation-delay: -0.7s; }
.route-lanes i:nth-child(3)::after { animation-delay: -1.4s; }
.route-lanes i:nth-child(4)::after { animation-delay: -2.1s; }

.route-target {
  display: grid;
  gap: 18px;
}

.route-target span {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid rgba(100, 212, 255, 0.44);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 75, 133, 0.75), rgba(21, 25, 79, 0.82));
  box-shadow: 0 0 20px rgba(65, 177, 255, 0.16);
}

.route-target span:nth-child(2) {
  border-color: rgba(166, 107, 255, 0.42);
  transform: translateX(-16px);
}

.route-target span::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
}

.visual-cognition {
  display: grid;
  place-items: center;
}

.cog-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(109, 207, 255, 0.22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-a { width: 190px; height: 190px; border-style: dashed; animation: orbit-spin 16s linear infinite; }
.ring-b { width: 136px; height: 136px; border-color: rgba(173, 104, 255, 0.35); animation: orbit-spin-reverse 12s linear infinite; }
.ring-c { width: 84px; height: 84px; border-color: rgba(72, 234, 255, 0.62); box-shadow: 0 0 24px rgba(72, 234, 255, 0.14); }

.cog-core {
  position: relative;
  z-index: 3;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #00131d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8af5ff 35%, #4d79ff 72%, #1b1746 100%);
  box-shadow: 0 0 38px rgba(72, 234, 255, 0.48);
  font-weight: 950;
}

.cog-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 89px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform-origin: left center;
  animation: cognition-sweep 6s linear infinite;
}

.cog-pointer::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px var(--cyan);
}

/* Architecture explorer */
.architecture {
  background:
    radial-gradient(circle at 50% 48%, rgba(40, 121, 237, 0.13), transparent 35rem),
    linear-gradient(180deg, rgba(3, 8, 25, 0.7), rgba(4, 9, 27, 0.95));
  overflow: hidden;
}

.architecture-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.55fr);
  align-items: end;
  gap: clamp(46px, 7vw, 100px);
  margin-bottom: clamp(58px, 7vw, 92px);
}

.architecture-intro h2 {
  margin-bottom: 0;
}

.architecture-intro > p {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 1.06rem;
}

.constellation-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: stretch;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(97, 209, 255, 0.18);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(140deg, rgba(10, 25, 59, 0.82), rgba(3, 9, 28, 0.92)),
    rgba(3, 8, 23, 0.9);
  box-shadow: var(--shadow-lg), 0 0 90px rgba(35, 144, 235, 0.08), inset 0 1px rgba(255, 255, 255, 0.04);
}

.constellation-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  border: 1px solid rgba(90, 196, 255, 0.12);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 50%, rgba(27, 109, 220, 0.13), transparent 43%),
    rgba(1, 6, 20, 0.6);
  overflow: hidden;
}

.constellation-grid {
  position: absolute;
  inset: 0;
  opacity: 0.65;
  background-image:
    linear-gradient(rgba(79, 180, 239, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 180, 239, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, #000 25%, rgba(0, 0, 0, 0.5) 58%, transparent 82%);
}

.constellation-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.constellation-links > path {
  fill: none;
  stroke: rgba(94, 202, 255, 0.19);
  stroke-width: 2;
  stroke-dasharray: 6 10;
  transition: stroke 240ms ease, stroke-width 240ms ease, filter 240ms ease;
  animation: route-dashes 20s linear infinite;
}

.constellation-links > path.is-active {
  stroke: url(#routeGradient);
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(72, 234, 255, 0.88));
  animation-duration: 4s;
}

.map-orbit {
  fill: none;
  stroke-width: 1.4;
  transform-origin: 500px 500px;
}

.map-orbit-outer {
  stroke: rgba(106, 190, 255, 0.12);
  stroke-dasharray: 8 18;
  animation: spin-plain 55s linear infinite;
}

.map-orbit-inner {
  stroke: rgba(161, 103, 255, 0.13);
  stroke-dasharray: 3 14;
  animation: spin-plain-reverse 43s linear infinite;
}

.core-aura {
  opacity: 0.68;
  animation: core-breathe 4.8s ease-in-out infinite;
}

.core-system {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  border: 1px solid rgba(130, 242, 255, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 255, 255, 0.95) 0 5%, rgba(91, 237, 255, 0.82) 7% 16%, rgba(41, 104, 230, 0.76) 18% 50%, rgba(5, 16, 47, 0.96) 52% 100%);
  box-shadow: 0 0 42px rgba(72, 234, 255, 0.65), 0 0 100px rgba(50, 118, 255, 0.32), inset 0 0 22px rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -50%);
}

.core-system::before,
.core-system::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(78, 225, 255, 0.25);
  border-radius: 50%;
  animation: executive-ripple 3.4s ease-out infinite;
}

.core-system::after { animation-delay: 1.7s; }

.core-shell {
  position: absolute;
  border: 1px solid rgba(132, 239, 255, 0.35);
  border-radius: 50%;
}

.shell-one { inset: 14px; border-style: dashed; animation: spin-plain 14s linear infinite; }
.shell-two { inset: 27px; border-color: rgba(190, 137, 255, 0.42); animation: spin-plain-reverse 10s linear infinite; }
.shell-three { inset: 40px; border-color: rgba(255, 255, 255, 0.5); }

.core-star {
  position: absolute;
  top: 22px;
  color: #fff;
  font-size: 1.15rem;
  text-shadow: 0 0 16px var(--cyan);
}

.core-system strong,
.core-system small {
  position: absolute;
  z-index: 4;
  width: 100%;
  text-align: center;
  letter-spacing: 0.12em;
}

.core-system strong {
  top: 67px;
  color: #eaffff;
  font-size: 0.57rem;
}

.core-system small {
  top: 84px;
  color: var(--cyan);
  font-size: 0.48rem;
  font-weight: 900;
}

.region-node {
  --x: 50%;
  --y: 50%;
  position: absolute;
  z-index: 7;
  top: var(--y);
  left: var(--x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.region-node[data-region="research"] { --x: 50%; --y: 10%; }
.region-node[data-region="policy"] { --x: 78%; --y: 22%; }
.region-node[data-region="tools"] { --x: 90%; --y: 50%; }
.region-node[data-region="multimodal"] { --x: 78%; --y: 78%; }
.region-node[data-region="memory"] { --x: 50%; --y: 90%; }
.region-node[data-region="critic"] { --x: 22%; --y: 78%; }
.region-node[data-region="planning"] { --x: 10%; --y: 50%; }
.region-node[data-region="external"] { --x: 22%; --y: 22%; }

.region-dot {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(98, 210, 255, 0.52);
  border-radius: 50%;
  background: radial-gradient(circle, #77ecff 0 9%, #1b69c7 11% 28%, #071735 30% 100%);
  box-shadow: 0 0 20px rgba(62, 197, 255, 0.22), inset 0 0 12px rgba(93, 215, 255, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.region-dot::before,
.region-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(90, 215, 255, 0.14);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.region-dot::after {
  inset: -14px;
  border-style: dashed;
}

.region-label {
  color: #aabbd0;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 180ms ease;
}

.region-node:hover .region-dot,
.region-node:focus-visible .region-dot,
.region-node.is-active .region-dot {
  border-color: var(--cyan-soft);
  box-shadow: 0 0 26px rgba(72, 234, 255, 0.6), 0 0 54px rgba(76, 114, 255, 0.22), inset 0 0 16px rgba(255, 255, 255, 0.12);
  transform: scale(1.13);
}

.region-node:hover .region-dot::before,
.region-node:focus-visible .region-dot::before,
.region-node.is-active .region-dot::before,
.region-node.is-active .region-dot::after {
  opacity: 1;
  transform: scale(1.05);
}

.region-node.is-active .region-dot::after {
  animation: spin-plain 8s linear infinite;
}

.region-node:hover .region-label,
.region-node:focus-visible .region-label,
.region-node.is-active .region-label {
  color: #f4feff;
}

.region-readout {
  position: relative;
  align-self: center;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(102, 210, 255, 0.18);
  border-radius: 26px;
  background:
    linear-gradient(155deg, rgba(13, 33, 73, 0.88), rgba(5, 12, 33, 0.94)),
    rgba(4, 10, 29, 0.9);
  box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.region-readout::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 198, 255, 0.17), transparent 66%);
}

.readout-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8194ad;
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.readout-topline span:first-child {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 1rem;
}

.region-readout h3 {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  font-size: clamp(1.75rem, 2.6vw, 2.65rem);
}

.region-readout > p {
  position: relative;
  z-index: 1;
  color: var(--muted);
}

.region-readout dl {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  margin: 30px 0 0;
  overflow: hidden;
  border: 1px solid rgba(97, 197, 255, 0.12);
  border-radius: 15px;
  background: rgba(87, 186, 255, 0.08);
}

.region-readout dl div {
  padding: 15px;
  background: rgba(3, 10, 29, 0.82);
}

.region-readout dt {
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.region-readout dd {
  margin: 0;
  color: #d5e2f0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.readout-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: #8396af !important;
  font-size: 0.7rem;
}

.readout-note span {
  color: var(--cyan);
}

.architecture-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
}

.architecture-rule p {
  margin: 0;
  color: #d5e2f2;
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  text-align: center;
}

.architecture-rule strong {
  color: #fff;
}

.rule-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(70, 224, 255, 0.4));
}

.rule-line:last-child {
  background: linear-gradient(90deg, rgba(70, 224, 255, 0.4), transparent);
}

/* Governance console */
.governance {
  background:
    radial-gradient(circle at 80% 20%, rgba(126, 70, 230, 0.1), transparent 34rem),
    linear-gradient(180deg, rgba(3, 8, 25, 0.92), rgba(2, 6, 18, 0.72));
}

.operator-console {
  border: 1px solid rgba(102, 212, 255, 0.25);
  border-radius: 28px;
  background: #050d22;
  box-shadow: var(--shadow-lg), 0 0 90px rgba(41, 159, 255, 0.11), inset 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.console-topbar {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(102, 203, 255, 0.14);
  background: linear-gradient(180deg, rgba(16, 34, 68, 0.9), rgba(7, 17, 42, 0.92));
}

.console-lights {
  display: flex;
  gap: 7px;
}

.console-lights span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #41516a;
}

.console-lights span:nth-child(1) { background: #ff768f; box-shadow: 0 0 10px rgba(255, 118, 143, 0.45); }
.console-lights span:nth-child(2) { background: #ffc86c; box-shadow: 0 0 10px rgba(255, 200, 108, 0.4); }
.console-lights span:nth-child(3) { background: var(--green); box-shadow: 0 0 10px rgba(76, 242, 201, 0.4); }

.console-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.console-title strong {
  color: #e9f6ff;
  font-size: 0.69rem;
  letter-spacing: 0.14em;
}

.console-title span {
  color: #72849f;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.console-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #aeeedd;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.console-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(76, 242, 201, 0.65);
}

.console-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  min-height: 640px;
}

.console-sidebar,
.console-ledger {
  padding: 22px;
  background: rgba(3, 9, 26, 0.78);
}

.console-sidebar {
  border-right: 1px solid rgba(102, 203, 255, 0.11);
}

.console-ledger {
  border-left: 1px solid rgba(102, 203, 255, 0.11);
}

.objective-card {
  padding: 17px;
  border: 1px solid rgba(93, 201, 255, 0.15);
  border-radius: 13px;
  background: rgba(11, 29, 62, 0.54);
}

.objective-card p {
  margin: 10px 0 0;
  color: #c6d4e6;
  font-size: 0.76rem;
  line-height: 1.55;
}

.constraint-stack {
  display: grid;
  gap: 8px;
  margin: 17px 0 26px;
}

.constraint-stack span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8699b2;
  font-size: 0.66rem;
}

.constraint-stack i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(76, 242, 201, 0.5);
}

.trace-tabs {
  display: grid;
  gap: 5px;
}

.trace-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: #879ab4;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.trace-tabs button::after {
  content: "";
  position: absolute;
  left: -23px;
  width: 2px;
  height: 24px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(72, 234, 255, 0.65);
  opacity: 0;
  transition: opacity 160ms ease;
}

.trace-tabs button span {
  color: #53677f;
  font-family: var(--font-display);
  font-size: 0.66rem;
}

.trace-tabs button:hover,
.trace-tabs button[aria-selected="true"] {
  color: #eef9ff;
  border-color: rgba(92, 208, 255, 0.17);
  background: rgba(13, 39, 78, 0.54);
}

.trace-tabs button[aria-selected="true"]::after {
  opacity: 1;
}

.trace-tabs button[aria-selected="true"] span {
  color: var(--cyan);
}

.console-workspace {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(28px, 4vw, 52px);
  background:
    linear-gradient(rgba(74, 177, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 177, 235, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(31, 100, 213, 0.1), transparent 35rem),
    #050e24;
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.trace-panel {
  flex: 1;
  animation: trace-in 320ms ease both;
}

.trace-panel[hidden] {
  display: none;
}

.trace-heading span {
  display: block;
  margin-bottom: 14px;
  color: var(--cyan);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.trace-heading strong {
  display: block;
  color: #f0f8ff;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.trace-panel > p {
  max-width: 760px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.trace-visual {
  position: relative;
  min-height: 280px;
  margin-top: 34px;
  border: 1px solid rgba(96, 205, 255, 0.13);
  border-radius: 18px;
  background: rgba(2, 8, 24, 0.58);
  overflow: hidden;
}

.trace-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(81, 183, 239, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 183, 239, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

.trace-goal {
  display: grid;
  place-items: center;
}

.goal-ring {
  position: relative;
  z-index: 2;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: radial-gradient(circle, #dfffff 0 4%, #59dff3 6% 13%, #1b60c5 15% 42%, #071632 44% 100%);
  box-shadow: 0 0 45px rgba(72, 234, 255, 0.42), 0 0 90px rgba(55, 104, 255, 0.22);
}

.goal-ring::before,
.goal-ring::after {
  content: "";
  position: absolute;
  inset: -26px;
  border: 1px solid rgba(83, 221, 255, 0.18);
  border-radius: 50%;
}

.goal-ring::after {
  inset: -52px;
  border-style: dashed;
  animation: spin-plain 20s linear infinite;
}

.goal-ring span {
  color: #eaffff;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.15em;
}

.goal-signal {
  position: absolute;
  z-index: 3;
  display: flex;
  min-width: 116px;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid rgba(92, 203, 255, 0.18);
  border-radius: 10px;
  background: rgba(6, 17, 43, 0.9);
}

.goal-signal small {
  color: #8396af;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.goal-signal strong {
  margin-top: 2px;
  color: var(--green);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.signal-one { top: 32px; left: 42px; }
.signal-two { top: 32px; right: 42px; }
.signal-three { right: 50%; bottom: 26px; transform: translateX(50%); }

.plan-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  padding: 30px;
}

.plan-board > div {
  position: relative;
  z-index: 2;
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(97, 205, 255, 0.16);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(12, 40, 78, 0.72), rgba(5, 14, 37, 0.92));
}

.plan-board > div::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  width: 13px;
  height: 1px;
  background: var(--cyan);
  opacity: 0.5;
}

.plan-board > div:last-child::after { display: none; }

.plan-board span,
.plan-board strong {
  display: block;
}

.plan-board span {
  color: var(--cyan);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.plan-board strong {
  margin-top: 8px;
  color: #e7f4ff;
  font-size: 0.82rem;
}

.plan-board i {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 4px;
  border-radius: 999px;
  background: rgba(81, 183, 239, 0.12);
}

.plan-board i::after {
  content: "";
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 12px rgba(72, 234, 255, 0.36);
}

.route-board {
  display: grid;
  grid-template-columns: 100px 1fr 180px;
  align-items: center;
  padding: 34px;
}

.route-goal {
  position: relative;
  z-index: 3;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: radial-gradient(circle, #edffff 0 6%, #70eaf8 8% 18%, #1b66cd 20% 48%, #071632 50% 100%);
  box-shadow: 0 0 35px rgba(72, 234, 255, 0.35);
  color: #e9ffff;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.route-beam {
  position: absolute;
  z-index: 1;
  left: 120px;
  width: calc(100% - 330px);
  height: 1px;
  background: linear-gradient(90deg, rgba(72, 234, 255, 0.12), var(--cyan), rgba(85, 120, 255, 0.24));
  transform-origin: left center;
}

.route-beam::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 13px var(--cyan);
  animation: lane-pulse 2.5s linear infinite;
}

.beam-one { top: 30%; transform: rotate(-10deg); }
.beam-two { top: 50%; }
.beam-three { top: 70%; transform: rotate(10deg); }
.beam-two::after { animation-delay: -0.8s; }
.beam-three::after { animation-delay: -1.6s; }

.route-choice {
  position: absolute;
  z-index: 3;
  right: 32px;
  display: flex;
  width: 158px;
  flex-direction: column;
  padding: 11px 13px;
  border: 1px solid rgba(93, 209, 255, 0.22);
  border-radius: 10px;
  background: rgba(7, 22, 52, 0.92);
}

.choice-one { top: 18%; }
.choice-two { top: 43%; }
.choice-three { top: 68%; }

.route-choice small {
  color: #879ab2;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.route-choice strong {
  margin-top: 2px;
  color: var(--green);
  font-size: 0.61rem;
  letter-spacing: 0.09em;
}

.arbitrate-board {
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  align-items: center;
  gap: 22px;
  padding: 36px;
}

.position-card {
  position: relative;
  z-index: 2;
  min-height: 136px;
  padding: 18px;
  border: 1px solid rgba(94, 203, 255, 0.17);
  border-radius: 13px;
  background: rgba(8, 26, 59, 0.84);
}

.position-card span,
.position-card strong,
.position-card small {
  display: block;
}

.position-card span {
  color: #8295ad;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.position-card strong {
  margin-top: 14px;
  color: var(--green);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.position-b strong { color: var(--amber); }

.position-card small {
  margin-top: 28px;
  color: #9cafc5;
  font-size: 0.64rem;
}

.decision-core {
  position: relative;
  z-index: 3;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: radial-gradient(circle, #f3ffff 0 5%, #6be7f6 7% 15%, #245fc9 17% 45%, #07152f 47% 100%);
  box-shadow: 0 0 42px rgba(72, 234, 255, 0.36);
  text-align: center;
}

.decision-core span,
.decision-core strong {
  position: absolute;
  width: 100%;
}

.decision-core span { top: 44px; color: #dfffff; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.12em; }
.decision-core strong { top: 60px; color: var(--cyan-soft); font-size: 0.45rem; letter-spacing: 0.1em; }

.prove-board {
  display: grid;
  grid-template-columns: 130px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  padding: 36px;
}

.proof-seal {
  position: relative;
  z-index: 2;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  color: #001b1a;
  border: 1px solid #aaffeb;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, #82f5d8 38%, #18a98c 74%, #07544d 100%);
  box-shadow: 0 0 38px rgba(76, 242, 201, 0.35);
  font-size: 2.3rem;
  font-weight: 950;
}

.prove-board > div:not(.proof-seal) {
  position: relative;
  z-index: 2;
  min-height: 106px;
  padding: 18px;
  border: 1px solid rgba(101, 209, 255, 0.15);
  border-radius: 12px;
  background: rgba(7, 23, 52, 0.84);
}

.prove-board span,
.prove-board strong {
  display: block;
}

.prove-board span { color: #8295ad; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.11em; }
.prove-board strong { margin-top: 14px; color: var(--green); font-size: 0.7rem; letter-spacing: 0.08em; }

.console-statusline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(96, 201, 255, 0.1);
}

.console-statusline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #71849d;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.console-statusline i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(72, 234, 255, 0.55);
}

.ledger-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  color: #d8e7f4;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ledger-heading small {
  color: #63768f;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ledger-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 47px;
  border-bottom: 1px solid rgba(97, 198, 255, 0.08);
}

.ledger-item span {
  color: #8497b0;
  font-size: 0.64rem;
}

.ledger-item strong {
  font-size: 0.53rem;
  letter-spacing: 0.09em;
}

.status-good { color: var(--green); }
.status-warn { color: var(--amber); }
.status-neutral { color: #8fa3bd; }

.ledger-note {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding: 13px;
  border: 1px solid rgba(255, 198, 109, 0.15);
  border-radius: 10px;
  background: rgba(107, 72, 25, 0.12);
}

.ledger-note > span {
  display: grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #3c2705;
  border-radius: 50%;
  background: var(--amber);
  font-size: 0.65rem;
  font-weight: 950;
}

.ledger-note p {
  margin: 0;
  color: #a79579;
  font-size: 0.6rem;
  line-height: 1.5;
}

.proof-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.6fr) minmax(0, 1.4fr);
  align-items: start;
  gap: clamp(40px, 6vw, 88px);
  margin-top: clamp(80px, 9vw, 130px);
}

.proof-heading h3 {
  margin-top: 16px;
  font-size: clamp(2rem, 3.25vw, 3.65rem);
}

.proof-heading > p:last-child {
  color: var(--muted);
}

.proof-ladder {
  position: relative;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(97, 205, 255, 0.16);
  border-radius: 19px;
  background: rgba(85, 185, 255, 0.08);
  box-shadow: var(--shadow-md);
  list-style: none;
  overflow: hidden;
}

.proof-ladder li {
  position: relative;
  display: grid;
  grid-template-columns: 48px 190px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 0 22px;
  background: linear-gradient(90deg, rgba(8, 25, 55, 0.94), rgba(5, 13, 34, 0.94));
  transition: background 180ms ease, transform 180ms ease;
}

.proof-ladder li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(var(--cyan), var(--blue));
  opacity: calc(0.22 + (var(--level, 1) * 0.1));
}

.proof-ladder li:hover {
  background: linear-gradient(90deg, rgba(11, 38, 77, 0.98), rgba(7, 18, 44, 0.98));
  transform: translateX(4px);
}

.proof-ladder li:nth-child(1) { --level: 1; }
.proof-ladder li:nth-child(2) { --level: 2; }
.proof-ladder li:nth-child(3) { --level: 3; }
.proof-ladder li:nth-child(4) { --level: 4; }
.proof-ladder li:nth-child(5) { --level: 5; }
.proof-ladder li:nth-child(6) { --level: 6; }

.proof-ladder span {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.proof-ladder strong {
  color: #e8f4ff;
  font-size: 0.86rem;
}

.proof-ladder small {
  color: #8093ab;
  font-size: 0.72rem;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(70px, 8vw, 110px);
}

.control-card {
  position: relative;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(99, 202, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(11, 27, 61, 0.76), rgba(5, 12, 33, 0.9));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.035);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.control-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 194, 255, 0.12), transparent 66%);
}

.control-card:hover {
  border-color: rgba(78, 225, 255, 0.38);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), 0 0 36px rgba(47, 181, 255, 0.09);
  transform: translateY(-6px);
}

.control-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--cyan-soft);
  border: 1px solid rgba(80, 223, 255, 0.32);
  border-radius: 12px;
  background: rgba(12, 48, 86, 0.6);
  box-shadow: 0 0 22px rgba(50, 191, 255, 0.12);
  font-size: 1.2rem;
}

.control-card h3 {
  margin-top: 26px;
  font-size: 1.42rem;
}

.control-card p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Audience */
.audience {
  background:
    radial-gradient(circle at 15% 55%, rgba(50, 131, 244, 0.1), transparent 30rem),
    linear-gradient(180deg, rgba(3, 7, 21, 0.5), rgba(5, 11, 31, 0.86));
}

.audience-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.55fr);
  align-items: end;
  gap: clamp(44px, 7vw, 100px);
}

.audience-heading h2 {
  margin-bottom: 0;
}

.audience-heading > p {
  margin-bottom: 6px;
  color: var(--muted);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(52px, 7vw, 88px);
}

.audience-card {
  position: relative;
  min-height: 380px;
  padding: 34px;
  border: 1px solid rgba(97, 201, 255, 0.17);
  border-radius: 26px;
  background:
    linear-gradient(150deg, rgba(12, 33, 70, 0.82), rgba(5, 13, 35, 0.92));
  box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}

.audience-card::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 196, 255, 0.16), transparent 66%);
}

.audience-card:nth-child(2)::before { background: radial-gradient(circle, rgba(102, 115, 255, 0.18), transparent 66%); }
.audience-card:nth-child(3)::before { background: radial-gradient(circle, rgba(165, 100, 255, 0.16), transparent 66%); }

.audience-card:hover {
  border-color: rgba(79, 229, 255, 0.4);
  transform: translateY(-7px);
}

.audience-index {
  position: absolute;
  top: 28px;
  right: 28px;
  color: #6f829d;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.audience-card svg {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  fill: none;
  stroke: var(--cyan-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(72, 234, 255, 0.26));
}

.audience-card h3 {
  position: relative;
  z-index: 2;
  margin-top: 64px;
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
}

.audience-card p {
  position: relative;
  z-index: 2;
  color: var(--muted);
}

/* Product family */
.ecosystem {
  background:
    radial-gradient(circle at 50% 48%, rgba(53, 124, 239, 0.14), transparent 38rem),
    radial-gradient(circle at 82% 76%, rgba(161, 83, 255, 0.09), transparent 28rem),
    rgba(2, 6, 18, 0.82);
  overflow: hidden;
}

.family-stage {
  position: relative;
  min-height: 760px;
  border: 1px solid rgba(99, 207, 255, 0.15);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(rgba(78, 177, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 177, 235, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(29, 118, 229, 0.11), transparent 42%),
    rgba(3, 9, 26, 0.78);
  background-size: 46px 46px, 46px 46px, auto, auto;
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.family-stage::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(92, 203, 255, 0.09);
  border-radius: 50%;
  animation: spin-plain 70s linear infinite;
}

.family-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.family-links path {
  fill: none;
  stroke: rgba(79, 216, 255, 0.25);
  stroke-width: 2;
  stroke-dasharray: 7 10;
  animation: route-dashes 18s linear infinite;
}

.family-links .standalone-link {
  stroke: rgba(255, 198, 109, 0.28);
  stroke-dasharray: 3 14;
}

.family-core,
.family-node {
  position: absolute;
  border: 1px solid rgba(96, 207, 255, 0.2);
  background: linear-gradient(150deg, rgba(11, 32, 69, 0.94), rgba(4, 12, 33, 0.96));
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.045);
}

.family-core {
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 360px;
  min-height: 330px;
  padding: 34px;
  border-color: rgba(81, 226, 255, 0.46);
  border-radius: 30px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.family-core::before,
.family-core::after {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border: 1px solid rgba(81, 226, 255, 0.12);
  border-radius: 38px;
}

.family-core::after {
  inset: -31px;
  border-style: dashed;
  border-color: rgba(158, 103, 255, 0.12);
  animation: spin-plain 38s linear infinite;
}

.family-core img {
  width: 88px;
  height: 88px;
  margin: 22px auto 18px;
  border: 1px solid rgba(92, 220, 255, 0.3);
  border-radius: 22px;
  box-shadow: 0 0 34px rgba(54, 186, 255, 0.25);
}

.family-tag {
  color: var(--cyan);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.family-core h3 {
  font-size: 2rem;
}

.family-core p,
.family-node p {
  color: var(--muted);
  font-size: 0.82rem;
}

.family-node {
  z-index: 3;
  width: 250px;
  min-height: 180px;
  padding: 22px;
  border-radius: 20px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.family-node:hover {
  border-color: rgba(80, 226, 255, 0.43);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 36px rgba(55, 185, 255, 0.1);
  transform: translateY(-5px);
}

.family-sasquatch { top: 36px; left: 50%; transform: translateX(-50%); }
.family-sasquatch:hover { transform: translateX(-50%) translateY(-5px); }
.family-buildroom { top: 166px; right: 38px; }
.family-orbweaver { right: 102px; bottom: 34px; }
.family-fabric { left: 38px; top: 166px; border-style: dashed; border-color: rgba(255, 198, 109, 0.28); }

.family-index {
  position: absolute;
  top: 18px;
  right: 18px;
  color: #657991;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
}

.family-node small {
  color: var(--cyan);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.family-fabric small { color: var(--amber); }

.family-node h3 {
  margin-top: 28px;
  font-size: 1.45rem;
}

.family-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  color: #8da0b8;
  font-size: 0.78rem;
  text-align: center;
}

.family-note span {
  color: var(--amber);
}

/* Claim boundary */
.development {
  background:
    radial-gradient(circle at 14% 30%, rgba(53, 138, 248, 0.1), transparent 30rem),
    linear-gradient(180deg, rgba(3, 8, 25, 0.78), rgba(3, 7, 20, 0.96));
}

.development-panel {
  padding: clamp(36px, 6vw, 76px);
  border: 1px solid rgba(100, 207, 255, 0.19);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, rgba(11, 30, 67, 0.86), rgba(4, 11, 31, 0.94));
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.045);
}

.development-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.45fr);
  gap: 50px;
  align-items: end;
}

.development-head h2 {
  grid-column: 1;
  margin-bottom: 0;
}

.development-head > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  color: var(--muted);
  font-size: 1.05rem;
}

.claim-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(52px, 6vw, 80px);
}

.claim-card {
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(99, 204, 255, 0.16);
  border-radius: 22px;
  background: rgba(4, 13, 35, 0.7);
}

.claim-building {
  border-color: rgba(76, 242, 201, 0.22);
  background: linear-gradient(145deg, rgba(17, 68, 68, 0.18), rgba(4, 13, 35, 0.75));
}

.claim-not {
  border-color: rgba(255, 198, 109, 0.19);
  background: linear-gradient(145deg, rgba(105, 68, 26, 0.13), rgba(4, 13, 35, 0.75));
}

.claim-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.claim-title > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(76, 242, 201, 0.32);
  border-radius: 10px;
  color: var(--green);
  background: rgba(18, 89, 76, 0.2);
  font-size: 1.2rem;
}

.claim-not .claim-title > span {
  color: var(--amber);
  border-color: rgba(255, 198, 109, 0.28);
  background: rgba(93, 60, 17, 0.18);
}

.claim-title h3 {
  margin: 0;
}

.claim-card ul {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.claim-card li {
  position: relative;
  padding-left: 23px;
  color: #a8bad0;
  font-size: 0.9rem;
}

.claim-card li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--green);
  box-shadow: 0 0 8px rgba(76, 242, 201, 0.5);
}

.claim-not li::before {
  background: var(--amber);
  box-shadow: 0 0 8px rgba(255, 198, 109, 0.4);
}

.claim-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgba(96, 200, 255, 0.11);
  border-radius: 15px;
  background: rgba(2, 8, 24, 0.56);
}

.claim-rule span {
  color: #a7b9cf;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.claim-rule i {
  color: var(--cyan);
  font-style: normal;
  font-weight: 900;
}

/* Final CTA */
.final-cta {
  position: relative;
  min-height: 820px;
  display: flex;
  align-items: center;
  padding: 120px 0;
  overflow: hidden;
}

.cta-background {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(180deg, #020615 0%, rgba(2, 6, 21, 0.22) 22%, rgba(2, 6, 21, 0.38) 68%, #01030c 100%),
    linear-gradient(90deg, rgba(1, 4, 14, 0.68), rgba(1, 4, 14, 0.12) 52%, rgba(1, 4, 14, 0.64)),
    url("../images/project-northstar-hero-1600.webp") center / cover no-repeat;
  filter: saturate(1.15) contrast(1.05);
  transform: scale(1.05);
}

.cta-aurora {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 20%, rgba(72, 234, 255, 0.2), transparent 28rem),
    radial-gradient(circle at 78% 48%, rgba(159, 79, 255, 0.18), transparent 30rem);
  mix-blend-mode: screen;
  animation: bloom-pulse 7s ease-in-out infinite;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #030719 0%, transparent 18%, transparent 74%, #01030c 100%);
}

.cta-panel {
  max-width: 980px;
  padding: clamp(42px, 6vw, 76px);
  border: 1px solid rgba(105, 225, 255, 0.32);
  border-radius: var(--radius-xl);
  background: rgba(3, 9, 27, 0.7);
  box-shadow: 0 48px 130px rgba(0, 0, 0, 0.62), 0 0 100px rgba(48, 176, 255, 0.16), inset 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  text-align: center;
}

.cta-star {
  margin-bottom: 8px;
  color: #fff;
  font-size: 3.4rem;
  line-height: 1;
  text-shadow: 0 0 18px var(--cyan), 0 0 46px var(--blue);
  animation: star-pulse 3.4s ease-in-out infinite;
}

.cta-panel h2 {
  margin-top: 18px;
  font-size: clamp(3rem, 6.2vw, 6.4rem);
}

.cta-panel h2 span {
  color: transparent;
  background: linear-gradient(100deg, var(--cyan-soft), #87b8ff, var(--violet-soft));
  -webkit-background-clip: text;
  background-clip: text;
}

.cta-panel > p:not(.kicker) {
  max-width: 760px;
  margin: 0 auto;
  color: #c2d1e4;
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
}

.cta-actions {
  justify-content: center;
  margin-top: 32px;
}

.cta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid rgba(103, 213, 255, 0.15);
}

.cta-meta span {
  color: #8698b0;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.cta-meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(72, 234, 255, 0.6);
}

/* Footer */
.site-footer {
  position: relative;
  border-top: 1px solid rgba(98, 204, 255, 0.13);
  background: #01030c;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 42px 0 30px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.footer-brand img {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(84, 215, 255, 0.22);
  border-radius: 13px;
}

.footer-brand div {
  display: flex;
  flex-direction: column;
}

.footer-brand strong {
  color: #edf7ff;
  font-size: 0.73rem;
  letter-spacing: 0.14em;
}

.footer-brand span {
  margin-top: 4px;
  color: var(--cyan);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.footer-grid > p {
  margin: 0;
  color: #7f91aa;
  font-size: 0.76rem;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}

.footer-links a {
  color: #a6b6ca;
  font-size: 0.72rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--cyan-soft);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(97, 190, 242, 0.08);
}

.footer-bottom p {
  margin: 0;
  color: #5f718a;
  font-size: 0.64rem;
}

/* Subpages */
.subpage {
  min-height: calc(100svh - 140px);
  padding: calc(var(--header-height) + 76px) 0 100px;
  background:
    radial-gradient(circle at 50% 10%, rgba(51, 119, 231, 0.16), transparent 32rem),
    linear-gradient(180deg, rgba(3, 8, 25, 0.6), rgba(2, 6, 18, 0.9));
}

.subpage-inner {
  max-width: 900px;
}

.subpage-card {
  position: relative;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(102, 207, 255, 0.2);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(12, 30, 67, 0.88), rgba(4, 11, 31, 0.94));
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.subpage-card::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -140px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 201, 255, 0.17), transparent 66%);
}

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

.subpage-card h1 {
  margin: 16px 0 32px;
  font-size: clamp(3rem, 7vw, 6rem);
}

.subpage-card h2 {
  margin-top: 38px;
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
}

.subpage-card p {
  color: #afbed1;
}

.subpage-card a:not(.button) {
  color: var(--cyan-soft);
}

.subpage-actions {
  margin-top: 38px;
}

.error-code {
  position: absolute;
  top: 10px;
  right: 22px;
  z-index: 0 !important;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(7rem, 18vw, 13rem);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(93, 210, 255, 0.12);
}

.subpage-nav {
  margin-left: auto;
}

/* Reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.js .definition-grid .reveal:nth-child(2),
.js .audience-grid .reveal:nth-child(2),
.js .control-grid .reveal:nth-child(2),
.js .control-grid .reveal:nth-child(5) {
  transition-delay: 90ms;
}

.js .definition-grid .reveal:nth-child(3),
.js .audience-grid .reveal:nth-child(3),
.js .control-grid .reveal:nth-child(3),
.js .control-grid .reveal:nth-child(6) {
  transition-delay: 180ms;
}

.js .control-grid .reveal:nth-child(4) {
  transition-delay: 0ms;
}


/* v2.2.0 — unmistakably reactive Northstar constellations */
.hero-visual,
.constellation-viewport {
  --interaction-x: 50%;
  --interaction-y: 50%;
}

.hero-image-panel {
  --hero-map-x: 50%;
  --hero-map-y: 31%;
  --hero-image-x: 0px;
  --hero-image-y: 0px;
  --hero-route-x: 0px;
  --hero-route-y: 0px;
  --hero-route-glow: 0;
}

.hero-image-panel img {
  transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0) scale(1.045);
  transition: transform 220ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 220ms ease;
  will-change: transform;
}

.hero-visual.is-pointer-active .hero-image-panel img {
  filter: saturate(1.16) contrast(1.08) brightness(1.025);
}

.hero-constellation-layer {
  position: absolute;
  z-index: 6;
  inset: 0 0 58px;
  overflow: hidden;
  border-radius: 31px 31px 0 0;
  pointer-events: none;
  background:
    radial-gradient(180px circle at var(--hero-map-x) var(--hero-map-y), rgba(101, 239, 255, 0.19), transparent 63%),
    radial-gradient(340px circle at 50% 31%, rgba(67, 131, 255, 0.11), transparent 70%);
  opacity: 0.96;
}

.hero-constellation-layer::before,
.hero-constellation-layer::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero-constellation-layer::before {
  left: var(--hero-map-x);
  top: var(--hero-map-y);
  width: 122px;
  height: 122px;
  border: 1px solid rgba(124, 244, 255, 0.24);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 180ms ease, transform 220ms ease;
  box-shadow: 0 0 48px rgba(74, 222, 255, 0.15), inset 0 0 28px rgba(87, 230, 255, 0.08);
}

.hero-constellation-layer::after {
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(83, 225, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 225, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 31%, #000 0 12%, rgba(0, 0, 0, 0.55) 38%, transparent 75%);
}

.hero-visual.is-pointer-active .hero-constellation-layer::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hero-constellation-routes {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(78, 221, 255, 0.2));
  transform: translate3d(var(--hero-route-x), var(--hero-route-y), 0);
  transition: transform 220ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.hero-constellation-routes path {
  fill: none;
  stroke: rgba(132, 229, 255, 0.28);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 8 13;
  vector-effect: non-scaling-stroke;
  opacity: 0.34;
  transition: opacity 180ms ease, stroke-width 180ms ease, filter 180ms ease;
}

.hero-constellation-routes path.is-active {
  stroke: url(#heroRouteGradient);
  stroke-width: 4.5;
  stroke-dasharray: 13 8;
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(85, 239, 255, 0.98));
  animation: hero-route-flow 1.25s linear infinite;
}

.hero-core-halo {
  fill: rgba(76, 218, 255, 0.08);
  stroke: rgba(125, 247, 255, 0.52);
  stroke-width: 1.6;
  transform-origin: 500px 176px;
  animation: hero-core-breathe 3.6s ease-in-out infinite;
}

.hero-core-point {
  fill: #ecffff;
  stroke: #5deeff;
  stroke-width: 3;
  filter: drop-shadow(0 0 13px rgba(80, 239, 255, 1));
}

.hero-route-pulse,
.map-route-pulse {
  opacity: 0;
  fill: #f4ffff;
  stroke: rgba(114, 241, 255, 0.92);
  stroke-width: 2;
  filter: drop-shadow(0 0 12px rgba(83, 239, 255, 1)) drop-shadow(0 0 24px rgba(87, 121, 255, 0.85));
  pointer-events: none;
}

.hero-map-node {
  --node-x: 50%;
  --node-y: 31%;
  position: absolute;
  z-index: 8;
  left: var(--node-x);
  top: var(--node-y);
  display: grid;
  min-width: 74px;
  padding: 12px 8px;
  place-items: center;
  border: 0;
  color: #d9e9f7;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: transform 170ms ease, color 170ms ease;
}

.hero-map-node[data-hero-region="research"] { --node-x: 31.5%; --node-y: 26.6%; }
.hero-map-node[data-hero-region="policy"] { --node-x: 68.5%; --node-y: 26.6%; }
.hero-map-node[data-hero-region="memory"] { --node-x: 42.5%; --node-y: 51.5%; }
.hero-map-node[data-hero-region="tools"] { --node-x: 57.5%; --node-y: 51.5%; }

.hero-map-node > span {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(127, 232, 255, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle, #f2ffff 0 12%, #5ce8ff 15% 38%, #0b2c68 42% 100%);
  box-shadow: 0 0 13px rgba(71, 224, 255, 0.65), 0 0 0 6px rgba(62, 196, 255, 0.05);
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.hero-map-node > span::before,
.hero-map-node > span::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(102, 233, 255, 0.22);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 170ms ease, transform 170ms ease;
}

.hero-map-node > span::after {
  inset: -15px;
  border-style: dashed;
}

.hero-map-node small {
  display: block;
  margin-top: 7px;
  padding: 3px 7px;
  color: #b8cadc;
  border: 1px solid rgba(96, 220, 255, 0.12);
  border-radius: 999px;
  background: rgba(2, 9, 28, 0.72);
  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.74;
  transition: color 170ms ease, border-color 170ms ease, opacity 170ms ease, box-shadow 170ms ease;
}

.hero-map-node:hover,
.hero-map-node:focus-visible,
.hero-map-node.is-active {
  z-index: 9;
  color: #fff;
  transform: translate(-50%, -50%) scale(1.12);
}

.hero-map-node:hover > span,
.hero-map-node:focus-visible > span,
.hero-map-node.is-active > span {
  border-color: #d8ffff;
  box-shadow: 0 0 18px rgba(87, 239, 255, 0.95), 0 0 36px rgba(76, 116, 255, 0.52), 0 0 0 8px rgba(69, 221, 255, 0.08);
  transform: scale(1.14);
}

.hero-map-node:hover > span::before,
.hero-map-node:focus-visible > span::before,
.hero-map-node.is-active > span::before,
.hero-map-node.is-active > span::after {
  opacity: 1;
  transform: scale(1);
}

.hero-map-node.is-active > span::after {
  animation: spin-plain 5s linear infinite;
}

.hero-map-node:hover small,
.hero-map-node:focus-visible small,
.hero-map-node.is-active small {
  color: #efffff;
  border-color: rgba(103, 235, 255, 0.45);
  box-shadow: 0 0 18px rgba(59, 208, 255, 0.18);
  opacity: 1;
}

.hero-map-cursor,
.map-pointer-reticle {
  position: absolute;
  z-index: 7;
  left: var(--hero-map-x);
  top: var(--hero-map-y);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(143, 244, 255, 0.38);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.74);
  transition: opacity 150ms ease, transform 160ms ease;
  box-shadow: 0 0 26px rgba(61, 224, 255, 0.18), inset 0 0 16px rgba(68, 218, 255, 0.08);
}

.hero-map-cursor::before,
.hero-map-cursor::after,
.map-pointer-reticle::before,
.map-pointer-reticle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(148, 248, 255, 0.62);
  transform: translate(-50%, -50%);
}

.hero-map-cursor::before,
.map-pointer-reticle::before { width: 72px; height: 1px; }
.hero-map-cursor::after,
.map-pointer-reticle::after { width: 1px; height: 72px; }

.hero-map-cursor span,
.map-pointer-reticle span {
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(220, 255, 255, 0.82);
  border-radius: 50%;
  background: rgba(101, 237, 255, 0.12);
  box-shadow: 0 0 12px rgba(85, 239, 255, 0.52);
}

.hero-visual.is-pointer-active .hero-map-cursor {
  opacity: 0.86;
  transform: translate(-50%, -50%) scale(1);
}

.hero-map-instruction,
.map-interaction-instruction {
  position: absolute;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(214, 237, 249, 0.72);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.hero-map-instruction {
  left: 16px;
  bottom: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(91, 220, 255, 0.14);
  border-radius: 999px;
  background: rgba(2, 9, 27, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-map-instruction span,
.map-interaction-instruction span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(72, 234, 255, 0.9);
  animation: interaction-beacon 1.6s ease-in-out infinite;
}

.orbit-chip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, transform 170ms ease;
}

.orbit-chip:hover,
.orbit-chip:focus-visible,
.orbit-chip.is-active {
  color: #fff;
  border-color: rgba(113, 239, 255, 0.72);
  background: rgba(6, 24, 56, 0.94);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42), 0 0 30px rgba(60, 219, 255, 0.28), inset 0 1px rgba(255, 255, 255, 0.09);
  transform: translateZ(82px) scale(1.055);
}

.orbit-chip.is-active span { color: #e7ffff; text-shadow: 0 0 12px var(--cyan); }

.hero-visual.is-routing .executive-badge {
  border-color: rgba(114, 242, 255, 0.62);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 42px rgba(56, 216, 255, 0.28);
}

.hero-visual.is-routing .executive-pulse {
  animation: executive-hit 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.executive-badge small,
.executive-badge strong {
  transition: color 170ms ease, text-shadow 170ms ease;
}

.hero-visual.is-routing .executive-badge strong {
  color: #f2ffff;
  text-shadow: 0 0 13px rgba(85, 239, 255, 0.42);
}

/* Full architecture map reacts to pointer proximity and route selection. */
.constellation-viewport {
  --map-x: 50%;
  --map-y: 50%;
  --map-core-x: 0px;
  --map-core-y: 0px;
  --map-grid-x: 0px;
  --map-grid-y: 0px;
  cursor: crosshair;
  isolation: isolate;
}

.constellation-viewport::before,
.constellation-viewport::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.constellation-viewport::before {
  z-index: 1;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(190px circle at var(--map-x) var(--map-y), rgba(76, 227, 255, 0.22), transparent 66%),
    radial-gradient(380px circle at var(--map-x) var(--map-y), rgba(91, 105, 255, 0.08), transparent 74%);
  transition: opacity 170ms ease;
}

.constellation-viewport::after {
  z-index: 1;
  left: var(--map-x);
  top: var(--map-y);
  width: 156px;
  height: 156px;
  border: 1px solid rgba(92, 232, 255, 0.14);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.64);
  transition: opacity 160ms ease, transform 210ms ease;
  box-shadow: 0 0 54px rgba(60, 220, 255, 0.13), inset 0 0 30px rgba(66, 213, 255, 0.07);
}

.constellation-viewport.is-pointer-active::before,
.constellation-viewport.is-pointer-active::after { opacity: 1; }
.constellation-viewport.is-pointer-active::after { transform: translate(-50%, -50%) scale(1); }

.constellation-grid {
  z-index: 0;
  transform: translate3d(var(--map-grid-x), var(--map-grid-y), 0) scale(1.025);
  transition: transform 180ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.constellation-links {
  z-index: 2;
}

.constellation-links > path {
  stroke-width: 2.1;
  opacity: 0.42;
  transition: stroke 180ms ease, stroke-width 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.constellation-links > path.is-active {
  stroke-width: 7.5;
  stroke-dasharray: 19 7;
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(72, 234, 255, 1)) drop-shadow(0 0 16px rgba(89, 110, 255, 0.68));
  animation: route-dashes 1.4s linear infinite;
}

.core-system {
  transform: translate(-50%, -50%) translate3d(var(--map-core-x), var(--map-core-y), 0);
  transition: transform 190ms cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}

.constellation-viewport.is-pointer-active .core-system {
  border-color: rgba(160, 249, 255, 0.96);
  box-shadow: 0 0 50px rgba(72, 234, 255, 0.78), 0 0 118px rgba(50, 118, 255, 0.42), inset 0 0 25px rgba(255, 255, 255, 0.18);
}

.constellation-viewport.is-routing .core-system {
  animation: map-core-kick 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.map-pointer-reticle {
  left: var(--map-x);
  top: var(--map-y);
  z-index: 8;
  width: 64px;
  height: 64px;
}

.constellation-viewport.is-pointer-active .map-pointer-reticle {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1);
}

.map-interaction-instruction {
  z-index: 10;
  left: 18px;
  bottom: 18px;
  padding: 9px 11px;
  border: 1px solid rgba(92, 224, 255, 0.14);
  border-radius: 999px;
  background: rgba(2, 8, 25, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.region-node {
  min-height: 78px;
  padding: 10px 8px;
  border-radius: 18px;
  transition: transform 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.region-node:hover,
.region-node:focus-visible,
.region-node.is-active {
  background: radial-gradient(circle, rgba(69, 215, 255, 0.12), transparent 68%);
  box-shadow: 0 0 35px rgba(54, 202, 255, 0.08);
  transform: translate(-50%, -50%) scale(1.12);
}

.region-node:active { transform: translate(-50%, -50%) scale(1.02); }

.region-node.is-active .region-dot {
  animation: region-node-hit 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.region-node.is-active .region-label {
  padding: 4px 8px;
  border: 1px solid rgba(91, 225, 255, 0.22);
  border-radius: 999px;
  background: rgba(2, 11, 31, 0.7);
  box-shadow: 0 0 20px rgba(63, 213, 255, 0.12);
}

.region-readout {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.region-readout.is-updating {
  border-color: rgba(103, 230, 255, 0.48);
  box-shadow: var(--shadow-md), 0 0 42px rgba(63, 214, 255, 0.18), inset 0 1px rgba(255, 255, 255, 0.06);
  animation: readout-hit 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.readout-route-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 18px;
  padding: 7px 10px;
  color: #a8c8dc;
  border: 1px solid rgba(91, 222, 255, 0.16);
  border-radius: 999px;
  background: rgba(2, 10, 29, 0.64);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.readout-route-status i {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(72, 234, 255, 0.9);
}

.readout-route-status i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(72, 234, 255, 0.32);
  border-radius: 50%;
  animation: executive-ripple 1.8s ease-out infinite;
}

@keyframes hero-route-flow {
  to { stroke-dashoffset: -84; }
}

@keyframes hero-core-breathe {
  0%, 100% { opacity: 0.58; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes interaction-beacon {
  0%, 100% { opacity: 0.45; transform: scale(0.78); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes executive-hit {
  0% { transform: scale(0.72); }
  48% { transform: scale(1.42); }
  100% { transform: scale(1); }
}

@keyframes map-core-kick {
  0% { transform: translate(-50%, -50%) translate3d(var(--map-core-x), var(--map-core-y), 0) scale(0.9); }
  52% { transform: translate(-50%, -50%) translate3d(var(--map-core-x), var(--map-core-y), 0) scale(1.11); }
  100% { transform: translate(-50%, -50%) translate3d(var(--map-core-x), var(--map-core-y), 0) scale(1); }
}

@keyframes region-node-hit {
  0% { transform: scale(0.78); }
  55% { transform: scale(1.28); }
  100% { transform: scale(1.13); }
}

@keyframes readout-hit {
  0% { transform: translateY(5px) scale(0.987); }
  100% { transform: translateY(0) scale(1); }
}

/* Motion paused */
html[data-motion="paused"] *,
html[data-motion="paused"] *::before,
html[data-motion="paused"] *::after {
  animation-play-state: paused !important;
}

html[data-motion="paused"] .cosmic-canvas {
  opacity: 0.62;
}

/* Keyframes */
@keyframes brand-shine {
  0%, 58% { transform: translateX(-90%) rotate(15deg); }
  76%, 100% { transform: translateX(110%) rotate(15deg); }
}

@keyframes equalize {
  0%, 100% { transform: scaleY(0.55); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes aurora-drift-one {
  from { transform: translate3d(0, 0, 0) rotate(-8deg) scale(0.95); }
  to { transform: translate3d(-7vw, 5vw, 0) rotate(12deg) scale(1.12); }
}

@keyframes aurora-drift-two {
  from { transform: translate3d(0, 0, 0) rotate(10deg) scale(1); }
  to { transform: translate3d(8vw, -4vw, 0) rotate(-13deg) scale(1.12); }
}

@keyframes bloom-pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes status-ring {
  0% { opacity: 0.75; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes image-scan {
  0% { transform: translateY(-120%); }
  70%, 100% { transform: translateY(560%); }
}

@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-spin-reverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes spin-plain {
  to { transform: rotate(360deg); }
}

@keyframes spin-plain-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes executive-ripple {
  0% { opacity: 0.65; transform: scale(0.78); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes scroll-drop {
  0% { opacity: 0; transform: translateY(-4px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(38px); }
}

@keyframes rail-scroll {
  to { transform: translateX(-100%); }
}

@keyframes network-ping {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(110px, -82px); opacity: 1; }
  100% { transform: translate(160px, -110px); opacity: 0; }
}

@keyframes lane-pulse {
  0% { left: -12px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% + 5px); opacity: 0; }
}

@keyframes cognition-sweep {
  to { transform: rotate(360deg); }
}

@keyframes route-dashes {
  to { stroke-dashoffset: -160; }
}

@keyframes core-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.94); transform-origin: center; }
  50% { opacity: 0.82; transform: scale(1.05); transform-origin: center; }
}

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

@keyframes star-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.82; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* Responsive */
@media (max-width: 1180px) {
  :root { --container: 1120px; }

  .primary-nav { gap: 20px; }
  .motion-label { display: none; }
  .motion-toggle { width: 38px; padding: 0; justify-content: center; }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
    gap: 44px;
  }

  h1 { font-size: clamp(3.35rem, 5.7vw, 5.35rem); }

  .definition-card { min-height: 680px; }

  .console-body {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .console-ledger {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
    border-top: 1px solid rgba(102, 203, 255, 0.11);
    border-left: 0;
  }

  .ledger-heading,
  .ledger-note {
    grid-column: 1 / -1;
  }

  .family-buildroom { right: 24px; }
  .family-orbweaver { right: 70px; }
  .family-fabric { left: 24px; }
}

@media (max-width: 1020px) {
  :root { --header-height: 76px; }

  .container { width: min(calc(100% - 36px), var(--container)); }

  .primary-nav { gap: 16px; }
  .primary-nav a { font-size: 0.82rem; }
  .nav-cta { min-height: 40px; padding: 0 16px; }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 82px);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .hero-copy {
    max-width: 800px;
  }

  h1 { max-width: 780px; font-size: clamp(3.7rem, 9vw, 6.6rem); }

  .hero-visual {
    width: min(92%, 780px);
    margin-inline: auto;
  }

  .contrast-stage {
    grid-template-columns: 1fr;
  }

  .contrast-shift {
    flex-direction: row;
    min-height: 60px;
  }

  .contrast-shift small {
    writing-mode: initial;
  }

  .contrast-shift span {
    transform: rotate(90deg);
  }

  .definition-grid {
    grid-template-columns: 1fr;
  }

  .definition-card {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 0 38px;
    min-height: 0;
  }

  .definition-top { grid-column: 1 / -1; }
  .definition-visual { grid-column: 1; grid-row: 2 / span 3; margin-bottom: 0; }
  .definition-card h3 { grid-column: 2; grid-row: 2; align-self: end; }
  .definition-card > p { grid-column: 2; grid-row: 3; }
  .definition-card .card-foot { grid-column: 2; grid-row: 4; align-self: start; }

  .architecture-intro,
  .audience-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .architecture-intro > p,
  .audience-heading > p {
    max-width: 760px;
  }

  .constellation-explorer {
    grid-template-columns: 1fr;
  }

  .constellation-viewport {
    max-width: 760px;
    margin-inline: auto;
  }

  .region-readout {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .proof-section {
    grid-template-columns: 1fr;
  }

  .proof-heading { max-width: 720px; }

  .control-grid,
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience-grid article:last-child {
    grid-column: 1 / -1;
    min-height: 320px;
  }

  .family-stage {
    min-height: 990px;
  }

  .family-links { display: none; }
  .family-stage::before { display: none; }

  .family-core {
    top: 210px;
  }

  .family-sasquatch { top: 28px; }
  .family-buildroom { top: 440px; right: 8%; }
  .family-orbweaver { right: 8%; bottom: 42px; }
  .family-fabric { top: 440px; left: 8%; }

  .development-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .development-head > p:last-child {
    grid-column: 1;
    grid-row: auto;
    max-width: 760px;
  }
}

@media (max-width: 860px) {
  html:not(.js) .primary-nav {
    position: static;
    display: flex;
    width: auto;
    max-height: none;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: none;
  }

  html:not(.js) .primary-nav a:not(.nav-cta) { display: none; }
  html:not(.js) .primary-nav .nav-cta { min-height: 40px; margin: 0; padding: 0 15px; font-size: 0.8rem; }

  .site-header {
    height: var(--header-height);
  }

  .brand-name { font-size: 0.7rem; }
  .brand-company { font-size: 0.55rem; }

  .nav-toggle { display: block; }

  .primary-nav {
    position: fixed;
    top: var(--header-height);
    left: 18px;
    right: 18px;
    display: grid;
    gap: 4px;
    max-height: calc(100svh - var(--header-height) - 22px);
    padding: 16px;
    border: 1px solid rgba(96, 210, 255, 0.24);
    border-radius: 20px;
    background: rgba(4, 11, 31, 0.97);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
    transform: translateY(-12px) scale(0.98);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .primary-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .primary-nav a {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 0.95rem;
  }

  .primary-nav > a:not(.nav-cta)::after { display: none; }
  .primary-nav > a:not(.nav-cta):hover { background: rgba(17, 46, 88, 0.72); }
  .nav-cta { margin-top: 8px; }

  .subpage-nav {
    position: static;
    display: flex;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: none;
  }

  .subpage-nav a:not(.nav-cta) { display: none; }
  .subpage-nav .nav-cta { min-height: 40px; margin: 0; padding: 0 15px; font-size: 0.8rem; }

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

  .console-title {
    justify-content: flex-start;
  }

  .console-title span,
  .console-state {
    display: none;
  }

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

  .console-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(102, 203, 255, 0.11);
  }

  .objective-card,
  .constraint-stack {
    display: none;
  }

  .trace-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .trace-tabs button {
    display: flex;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    text-align: center;
  }

  .trace-tabs button::after { display: none; }

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

  .plan-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-board > div:nth-child(2)::after { display: none; }

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

  .proof-seal {
    grid-column: 1 / -1;
    margin: 0 auto 10px;
  }

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

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

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 700px) {
  :root { --header-height: 70px; }

  body { font-size: 15px; }
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 90px 0; }
  .section-number { top: 22px; right: 16px; font-size: 7.2rem; }

  .brand-mark { width: 44px; height: 44px; border-radius: 12px; }
  .brand-name { font-size: 0.62rem; letter-spacing: 0.14em; }
  .brand-company { font-size: 0.49rem; letter-spacing: 0.2em; }
  .motion-toggle { display: none; }

  .hero {
    padding-top: calc(var(--header-height) + 68px);
    padding-bottom: 100px;
  }

  .hero-grid { gap: 62px; }
  .eyebrow-row { margin-bottom: 24px; }
  .eyebrow { width: 100%; font-size: 0.63rem; }
  h1 { font-size: clamp(3.15rem, 15vw, 5rem); }
  h2 { font-size: clamp(2.45rem, 11vw, 4rem); }

  .hero-statement { font-size: 1.08rem; }
  .hero-lead { font-size: 0.98rem; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-visual { width: 100%; }
  .hero-image-panel { border-radius: 22px; }
  .hero-image-panel figcaption {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 76px;
    padding: 12px 15px;
    font-size: 0.61rem;
  }
  .visual-orbit { display: none; }
  .orbit-chip { display: none; }
  .executive-badge {
    right: 14px;
    bottom: 88px;
    min-width: 0;
    max-width: calc(100% - 28px);
  }
  .executive-badge strong { font-size: 0.68rem; }
  .scroll-cue { display: none; }

  .rail-track { padding-block: 16px; }

  .split-heading {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .contrast-panel {
    min-height: 500px;
    padding: 24px;
  }

  .single-model-visual,
  .mini-constellation {
    height: 220px;
  }

  .single-demand { font-size: 0.53rem; }
  .demand-one { left: 10px; }
  .demand-two { right: 10px; }
  .demand-three { left: 10px; }
  .demand-four { right: 10px; }

  .northstar-question {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px;
  }

  .question-mark { font-size: 7rem; }

  .definition-card {
    display: block;
    padding: 24px;
  }

  .definition-visual {
    height: 250px;
    margin: 24px 0 30px;
  }

  .visual-inference { grid-template-columns: 58px 1fr 58px; padding: 18px; }
  .route-source { width: 54px; height: 54px; }
  .route-target span { width: 34px; height: 34px; }

  .constellation-explorer {
    padding: 12px;
    border-radius: 28px;
  }

  .constellation-viewport { border-radius: 22px; }
  .core-system { width: 88px; height: 88px; }
  .core-system strong { top: 45px; font-size: 0.4rem; }
  .core-system small { top: 58px; font-size: 0.35rem; }
  .core-star { top: 12px; font-size: 0.8rem; }
  .region-node { min-width: 48px; }
  .region-dot { width: 32px; height: 32px; }
  .region-label { display: none; }
  .region-readout { padding: 24px; }
  .architecture-rule { grid-template-columns: 1fr; }
  .rule-line { display: none; }

  .operator-console { border-radius: 20px; }
  .console-topbar { min-height: 56px; padding: 0 14px; }
  .console-lights { display: none; }
  .console-title strong { font-size: 0.58rem; }
  .console-sidebar { padding: 10px; }
  .trace-tabs button { min-height: 54px; font-size: 0.56rem; }
  .trace-tabs button span { font-size: 0.55rem; }
  .console-workspace { padding: 24px 18px; }
  .trace-visual { min-height: 250px; }
  .signal-one { top: 18px; left: 12px; }
  .signal-two { top: 18px; right: 12px; }
  .signal-three { bottom: 14px; }
  .goal-signal { min-width: 94px; padding: 8px; }
  .goal-ring { width: 94px; height: 94px; }

  .plan-board { padding: 18px; gap: 8px; }
  .plan-board > div { min-height: 118px; padding: 13px; }

  .route-board { grid-template-columns: 70px 1fr 120px; padding: 18px; }
  .route-goal { width: 62px; height: 62px; }
  .route-beam { left: 80px; width: calc(100% - 205px); }
  .route-choice { right: 12px; width: 110px; padding: 8px; }

  .arbitrate-board { grid-template-columns: 1fr; padding: 18px; }
  .decision-core { width: 92px; height: 92px; margin: 0 auto; }
  .decision-core span { top: 34px; }
  .decision-core strong { top: 50px; }

  .prove-board { grid-template-columns: 1fr; padding: 18px; }
  .prove-board > div:not(.proof-seal) { min-height: 82px; }

  .console-ledger { display: block; padding: 18px; }

  .proof-ladder li {
    grid-template-columns: 38px 1fr;
    gap: 10px;
    min-height: 86px;
    padding: 12px 16px;
  }

  .proof-ladder small {
    grid-column: 2;
  }

  .control-grid,
  .audience-grid,
  .claim-columns {
    grid-template-columns: 1fr;
  }

  .audience-grid article:last-child { grid-column: auto; }
  .audience-card { min-height: 340px; padding: 28px; }
  .audience-card h3 { margin-top: 46px; }

  .family-stage {
    display: grid;
    gap: 14px;
    min-height: 0;
    padding: 14px;
  }

  .family-core,
  .family-node {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .family-core {
    padding: 28px;
  }

  .family-core::before,
  .family-core::after { display: none; }
  .family-sasquatch:hover { transform: translateY(-5px); }

  .development-panel { padding: 28px 20px; }
  .claim-rule { gap: 10px; }
  .claim-rule span { font-size: 0.53rem; }

  .final-cta { min-height: 760px; padding: 92px 0; }
  .cta-panel { padding: 36px 22px; border-radius: 28px; }
  .cta-panel h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .cta-meta { display: grid; }
  .cta-meta i { display: none; }

  .footer-grid { gap: 24px; }
  .footer-links { display: grid; gap: 10px; }

  .subpage { padding-top: calc(var(--header-height) + 50px); }
  .subpage-card { border-radius: 28px; }
  .subpage-card h1 { font-size: 3.2rem; }
}

@media (max-width: 430px) {
  .brand-copy { max-width: 170px; }
  .brand-name { font-size: 0.58rem; }
  .hero-signals { grid-template-columns: 1fr; }
  .status-pill { font-size: 0.6rem; }
  h1 { font-size: clamp(2.95rem, 15.2vw, 4.25rem); }
  .caption-index { display: none; }
  .executive-badge { position: relative; right: auto; bottom: auto; margin: 10px 0 0; }
  .trace-tabs button { font-size: 0; }
  .trace-tabs button span { font-size: 0.62rem; }
  .console-statusline { display: grid; }
  .family-note { align-items: flex-start; text-align: left; }
}

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

  html:not([data-motion="active"]) *,
  html:not([data-motion="active"]) *::before,
  html:not([data-motion="active"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .cosmic-canvas { opacity: 0.58; }
  .pointer-aura { display: none; }
}

/* v2.2.0 reactive constellation responsive safeguards */
@media (max-width: 900px) {
  .hero-map-node small { font-size: 0.43rem; }
  .hero-map-instruction { font-size: 0.46rem; }
}

@media (max-width: 700px) {
  .hero-constellation-layer {
    bottom: 76px;
    border-radius: 21px 21px 0 0;
  }

  .hero-map-node {
    min-width: 46px;
    padding: 10px 4px;
  }

  .hero-map-node > span { width: 14px; height: 14px; }
  .hero-map-node small { display: none; }
  .hero-map-instruction { left: 10px; bottom: 9px; padding: 7px 8px; font-size: 0.42rem; }
  .hero-map-cursor { width: 42px; height: 42px; }

  .map-interaction-instruction {
    left: 10px;
    bottom: 10px;
    padding: 7px 8px;
    font-size: 0.42rem;
  }

  .region-node { min-height: 56px; padding: 6px; }
  .readout-route-status { font-size: 0.48rem; }
}

@media (max-width: 430px) {
  .hero-map-instruction { max-width: calc(100% - 20px); }
  .map-interaction-instruction { letter-spacing: 0.07em; }
  .hero-constellation-routes path { stroke-width: 1.7; }
  .hero-constellation-routes path.is-active { stroke-width: 3.5; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="active"]) .hero-constellation-routes path.is-active,
  html:not([data-motion="active"]) .hero-core-halo,
  html:not([data-motion="active"]) .hero-map-node.is-active > span::after,
  html:not([data-motion="active"]) .hero-map-instruction span,
  html:not([data-motion="active"]) .map-interaction-instruction span,
  html:not([data-motion="active"]) .constellation-links > path.is-active,
  html:not([data-motion="active"]) .constellation-viewport.is-routing .core-system,
  html:not([data-motion="active"]) .region-node.is-active .region-dot,
  html:not([data-motion="active"]) .region-readout.is-updating,
  html:not([data-motion="active"]) .readout-route-status i::after,
  html:not([data-motion="active"]) .hero-visual.is-routing .executive-pulse {
    animation: none !important;
  }
}

/* ========================================================================== 
   v2.2.0 — Cinematic interaction and motion system
   ========================================================================== */

:root {
  --page-progress: 0;
  --scroll-velocity: 0;
  --viewport-tilt-x: 0;
  --viewport-tilt-y: 0;
}

.cinematic-field {
  position: fixed;
  inset: -20vh -15vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.52;
  mix-blend-mode: screen;
  filter: saturate(1.25);
}

.cinematic-field span {
  position: absolute;
  left: -18vw;
  width: 136vw;
  height: 24vw;
  min-height: 190px;
  border-radius: 50%;
  filter: blur(62px);
  opacity: 0.34;
  transform-origin: center;
  will-change: transform, opacity;
}

.cinematic-field span:nth-child(1) {
  top: 4vh;
  background: linear-gradient(90deg, transparent 2%, rgba(36, 232, 255, 0.08) 18%, rgba(82, 102, 255, 0.24) 46%, rgba(174, 63, 255, 0.18) 73%, transparent 96%);
  animation: cinematic-ribbon-one 24s ease-in-out infinite alternate;
}

.cinematic-field span:nth-child(2) {
  top: 43vh;
  left: -28vw;
  background: linear-gradient(100deg, transparent 3%, rgba(32, 151, 255, 0.15) 20%, rgba(65, 248, 228, 0.12) 46%, rgba(91, 80, 255, 0.2) 74%, transparent 97%);
  animation: cinematic-ribbon-two 31s ease-in-out infinite alternate;
}

.cinematic-field span:nth-child(3) {
  top: 78vh;
  background: linear-gradient(86deg, transparent 0%, rgba(122, 54, 255, 0.15) 22%, rgba(52, 210, 255, 0.12) 54%, rgba(70, 95, 255, 0.16) 78%, transparent 100%);
  animation: cinematic-ribbon-three 27s ease-in-out infinite alternate;
}

.pointer-aura {
  transition: opacity 240ms ease;
}

body.pointer-engaged .pointer-aura {
  background:
    radial-gradient(130px circle at var(--pointer-x) var(--pointer-y), rgba(196, 251, 255, 0.11), transparent 66%),
    radial-gradient(560px circle at var(--pointer-x) var(--pointer-y), rgba(65, 203, 255, 0.115), transparent 64%);
}

.section {
  --scene-progress: 0;
  --scene-shift: 0px;
  isolation: isolate;
}

.scene-atmosphere {
  position: absolute;
  inset: -14% -8%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}

.section.is-scene-active .scene-atmosphere {
  opacity: 1;
}

.scene-atmosphere span {
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(48px);
  transform: translate3d(0, calc(var(--scene-shift) * var(--scene-depth, 0.2)), 0) scale(0.88);
  transition: transform 180ms linear;
  will-change: transform;
}

.scene-atmosphere span:nth-child(1) {
  --scene-depth: -0.32;
  top: 4%;
  left: -8%;
  width: min(48vw, 720px);
  aspect-ratio: 1.6;
  background: radial-gradient(ellipse, rgba(38, 209, 255, 0.2), transparent 68%);
  animation: scene-bloom-one 12s ease-in-out infinite alternate;
}

.scene-atmosphere span:nth-child(2) {
  --scene-depth: 0.24;
  right: -6%;
  top: 28%;
  width: min(44vw, 680px);
  aspect-ratio: 1.35;
  background: radial-gradient(ellipse, rgba(111, 75, 255, 0.22), transparent 68%);
  animation: scene-bloom-two 15s ease-in-out infinite alternate;
}

.scene-atmosphere span:nth-child(3) {
  --scene-depth: -0.16;
  left: 28%;
  bottom: -12%;
  width: min(38vw, 560px);
  aspect-ratio: 1.5;
  background: radial-gradient(ellipse, rgba(67, 243, 211, 0.11), transparent 70%);
  animation: scene-bloom-three 18s ease-in-out infinite alternate;
}

.section-number {
  transform: translate3d(0, calc(var(--scene-shift) * -0.18), 0);
  transition: -webkit-text-stroke-color 520ms ease, filter 520ms ease, transform 120ms linear;
  will-change: transform;
}

.section.is-scene-active .section-number {
  -webkit-text-stroke-color: rgba(95, 217, 255, 0.14);
  filter: drop-shadow(0 0 28px rgba(55, 184, 255, 0.08));
}

.js .reveal {
  filter: blur(8px);
  transform: translate3d(0, 34px, 0) scale(0.985);
  transition:
    opacity 840ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 840ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 840ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.reactive-surface {
  --surface-x: 50%;
  --surface-y: 50%;
  --surface-strength: 0;
  isolation: isolate;
}

.reactive-surface > :not(.surface-light) {
  position: relative;
  z-index: 1;
}

.surface-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(0.14 + var(--surface-strength) * 0.86);
  background:
    radial-gradient(250px circle at var(--surface-x) var(--surface-y), rgba(140, 246, 255, 0.16), transparent 62%),
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.035) 45%, transparent 69%);
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

.surface-light::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -22%;
  width: 32%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(155, 248, 255, 0.12), transparent);
  transform: translateX(-160%) rotate(14deg);
  animation: surface-scan 8.5s ease-in-out infinite;
}

.magnetic {
  --magnet-x: 0px;
  --magnet-y: 0px;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform 180ms cubic-bezier(0.2, 0.85, 0.2, 1), box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}

/* Cinematic hero entrance and continuous energy. */
.hero-copy h1 > span {
  display: block;
  transform-origin: left center;
  animation: hero-line-arrive 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-copy h1 > span:nth-child(1) { animation-delay: 80ms; }
.hero-copy h1 > span:nth-child(2) { animation-delay: 170ms; }
.hero-copy h1 > span:nth-child(3) { animation-delay: 260ms; }

.title-gradient,
.cta-panel h2 span {
  background-size: 220% 100%;
  animation: spectral-text 7s ease-in-out infinite alternate;
}

.hero-visual {
  animation: hero-visual-arrive 1200ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

.hero-grid-lines {
  animation: grid-drift 24s linear infinite;
}

.hero-bloom {
  animation: bloom-pulse 6.5s ease-in-out infinite, bloom-drift 15s ease-in-out infinite alternate;
}

.hero-image-panel,
.constellation-viewport {
  touch-action: pan-y;
}

.hero-constellation-layer {
  pointer-events: auto;
  cursor: crosshair;
}

.hero-constellation-layer,
.constellation-viewport {
  -webkit-user-select: none;
  user-select: none;
}

.hero-constellation-routes path.is-active {
  stroke-dasharray: 16 7;
  animation: hero-route-flow 720ms linear infinite;
}

.hero-return-pulse,
.map-return-pulse,
.family-route-pulse {
  opacity: 0;
  fill: #d8baff;
  stroke: rgba(222, 198, 255, 0.95);
  stroke-width: 2;
  filter: drop-shadow(0 0 11px rgba(197, 126, 255, 1)) drop-shadow(0 0 22px rgba(76, 170, 255, 0.75));
  pointer-events: none;
}

.hero-map-node > span {
  animation: node-idle-breathe 3.4s ease-in-out infinite;
}

.hero-map-node:nth-of-type(2) > span { animation-delay: -0.8s; }
.hero-map-node:nth-of-type(3) > span { animation-delay: -1.6s; }
.hero-map-node:nth-of-type(4) > span { animation-delay: -2.4s; }

.hero-map-node.is-active > span {
  animation: selected-node-breathe 1.15s ease-in-out infinite;
}

.hero-map-node:active {
  transform: translate(-50%, -50%) scale(1.02);
}

.hero-visual.is-dragging .hero-map-cursor,
.constellation-viewport.is-dragging .map-pointer-reticle {
  opacity: 1;
  border-color: rgba(227, 255, 255, 0.9);
  box-shadow: 0 0 36px rgba(66, 226, 255, 0.58), inset 0 0 24px rgba(80, 223, 255, 0.14);
}

.hero-visual.is-routing .hero-image-panel {
  box-shadow: var(--shadow-lg), 0 0 95px rgba(65, 223, 255, 0.3), inset 0 0 48px rgba(75, 212, 255, 0.08);
}

.hero-visual.is-routing .hero-core-point {
  animation: core-flash 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.orbit-chip {
  animation: chip-float 5.5s ease-in-out infinite;
}

.orbit-chip:nth-of-type(2) { animation-delay: -1.2s; }
.orbit-chip:nth-of-type(3) { animation-delay: -2.4s; }
.orbit-chip:nth-of-type(4) { animation-delay: -3.6s; }

/* Thesis: show the contrast as a living system. */
.thesis.is-scene-active .single-orb {
  animation: single-overload 3.2s ease-in-out infinite;
}

.thesis.is-scene-active .single-demand {
  animation: demand-pressure 3.8s ease-in-out infinite;
}

.thesis.is-scene-active .single-demand:nth-of-type(2) { animation-delay: -0.7s; }
.thesis.is-scene-active .single-demand:nth-of-type(3) { animation-delay: -1.4s; }
.thesis.is-scene-active .single-demand:nth-of-type(4) { animation-delay: -2.1s; }
.thesis.is-scene-active .single-demand:nth-of-type(5) { animation-delay: -2.8s; }

.thesis.is-scene-active .mini-core {
  animation: mini-core-pulse 2.8s ease-in-out infinite;
}

.thesis.is-scene-active .mini-node {
  animation: mini-node-pulse 2.4s ease-in-out infinite;
}

.thesis.is-scene-active .mini-node:nth-of-type(2) { animation-delay: -0.45s; }
.thesis.is-scene-active .mini-node:nth-of-type(3) { animation-delay: -0.9s; }
.thesis.is-scene-active .mini-node:nth-of-type(4) { animation-delay: -1.35s; }
.thesis.is-scene-active .mini-node:nth-of-type(5) { animation-delay: -1.8s; }

.thesis.is-scene-active .mini-line {
  background-size: 220% 100%;
  animation: mini-route-energy 2.2s linear infinite;
}

.contrast-shift span {
  animation: orchestrate-beacon 2.6s ease-in-out infinite;
}

.northstar-question::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(114, 242, 255, 0.1) 48%, transparent 76%);
  transform: translateX(-120%);
}

.thesis.is-scene-active .northstar-question::after {
  animation: question-sweep 7s ease-in-out infinite;
}

/* Definition cards become active diagrams rather than static ornaments. */
.cognition.is-scene-active .dv-core {
  animation: definition-core-pulse 2.6s ease-in-out infinite;
}

.cognition.is-scene-active .dv-node {
  animation: definition-node-pulse 2.3s ease-in-out infinite;
}

.cognition.is-scene-active .dv-node:nth-of-type(2) { animation-delay: -0.4s; }
.cognition.is-scene-active .dv-node:nth-of-type(3) { animation-delay: -0.8s; }
.cognition.is-scene-active .dv-node:nth-of-type(4) { animation-delay: -1.2s; }
.cognition.is-scene-active .dv-node:nth-of-type(5) { animation-delay: -1.6s; }

.cognition.is-scene-active .dv-line {
  animation-duration: 1.8s;
}

.cognition.is-scene-active .route-lanes i::after {
  animation-duration: 1.45s;
}

.cognition.is-scene-active .cog-ring {
  animation-duration: 8s;
}

.definition-card.is-surface-active .definition-visual,
.definition-card:hover .definition-visual {
  border-color: rgba(105, 230, 255, 0.32);
  box-shadow: inset 0 0 42px rgba(53, 183, 255, 0.08), 0 0 38px rgba(48, 176, 255, 0.08);
}

/* The main topology must visibly route on pointer, touch, and automatic cycles. */
.constellation-viewport {
  cursor: crosshair;
}

.constellation-links > path.is-active {
  stroke-width: 5;
  stroke-dasharray: 18 8;
  animation: route-dashes 760ms linear infinite;
}

.region-node .region-dot {
  animation: node-idle-breathe 3.8s ease-in-out infinite;
}

.region-node:nth-of-type(2) .region-dot { animation-delay: -0.45s; }
.region-node:nth-of-type(3) .region-dot { animation-delay: -0.9s; }
.region-node:nth-of-type(4) .region-dot { animation-delay: -1.35s; }
.region-node:nth-of-type(5) .region-dot { animation-delay: -1.8s; }
.region-node:nth-of-type(6) .region-dot { animation-delay: -2.25s; }
.region-node:nth-of-type(7) .region-dot { animation-delay: -2.7s; }
.region-node:nth-of-type(8) .region-dot { animation-delay: -3.15s; }

.region-node.is-active .region-dot {
  animation: selected-node-breathe 1.15s ease-in-out infinite;
}

.constellation-viewport.is-routing .core-star {
  animation: core-star-hit 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.constellation-viewport.is-pointer-active .constellation-grid {
  opacity: 0.82;
  transform: translate3d(var(--map-grid-x), var(--map-grid-y), 0) scale(1.015);
}

/* Operator console and evidence ladder. */
.operator-console {
  position: relative;
  overflow: hidden;
}

.operator-console::after {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  top: -20%;
  width: 100%;
  height: 18%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(85, 232, 255, 0.1), transparent);
  mix-blend-mode: screen;
}

.governance.is-scene-active .operator-console::after {
  animation: console-scan 7.5s ease-in-out infinite;
}

.trace-tabs button[aria-selected="true"] {
  box-shadow: 0 0 28px rgba(52, 202, 255, 0.15), inset 0 0 28px rgba(62, 209, 255, 0.06);
}

.trace-tabs button[aria-selected="true"]::after {
  animation-duration: 1.8s;
}

.proof-ladder li {
  --evidence-delay: 0s;
}

.proof-ladder li:nth-child(1) { --evidence-delay: 0s; }
.proof-ladder li:nth-child(2) { --evidence-delay: 0.5s; }
.proof-ladder li:nth-child(3) { --evidence-delay: 1s; }
.proof-ladder li:nth-child(4) { --evidence-delay: 1.5s; }
.proof-ladder li:nth-child(5) { --evidence-delay: 2s; }
.proof-ladder li:nth-child(6) { --evidence-delay: 2.5s; }

.governance.is-scene-active .proof-ladder li {
  animation: evidence-climb 7.2s ease-in-out infinite;
  animation-delay: var(--evidence-delay);
}

.governance.is-scene-active .proof-ladder li::after {
  animation: evidence-line 7.2s ease-in-out infinite;
  animation-delay: var(--evidence-delay);
}

.control-card > span {
  animation: control-icon-breathe 4.2s ease-in-out infinite;
}

.control-card:nth-child(2) > span { animation-delay: -0.7s; }
.control-card:nth-child(3) > span { animation-delay: -1.4s; }
.control-card:nth-child(4) > span { animation-delay: -2.1s; }
.control-card:nth-child(5) > span { animation-delay: -2.8s; }
.control-card:nth-child(6) > span { animation-delay: -3.5s; }

/* Institutional cards draw their own icon paths when they enter view. */
.audience-card svg path {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
}

.audience.is-scene-active .audience-card svg path {
  animation: icon-draw 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.audience-card:nth-child(2) svg path { animation-delay: 180ms; }
.audience-card:nth-child(3) svg path { animation-delay: 360ms; }

/* Product family constellation is animated and operator-reactive. */
.family-stage {
  --family-x: 50%;
  --family-y: 50%;
  touch-action: pan-y;
}

.family-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(250px circle at var(--family-x) var(--family-y), rgba(95, 235, 255, 0.16), transparent 66%);
  transition: opacity 180ms ease;
}

.family-stage.is-pointer-active::after {
  opacity: 1;
}

.family-links path {
  transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.family-links path.is-active {
  stroke: rgba(80, 232, 255, 0.95);
  stroke-width: 4;
  stroke-dasharray: 16 7;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(77, 225, 255, 0.9));
  animation: route-dashes 760ms linear infinite;
}

.family-links path.standalone-link.is-active {
  stroke: rgba(255, 202, 112, 0.92);
  filter: drop-shadow(0 0 8px rgba(255, 188, 80, 0.65));
}

.family-node {
  cursor: pointer;
}

.family-node:focus-visible,
.family-node.is-active {
  border-color: rgba(109, 237, 255, 0.68);
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.45), 0 0 56px rgba(59, 210, 255, 0.2), inset 0 0 30px rgba(65, 208, 255, 0.06);
  transform: translateY(-7px) scale(1.025);
}

.family-sasquatch.is-active,
.family-sasquatch:focus-visible {
  transform: translateX(-50%) translateY(-7px) scale(1.025);
}

.family-fabric.is-active,
.family-fabric:focus-visible {
  border-color: rgba(255, 201, 111, 0.65);
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.45), 0 0 56px rgba(255, 188, 82, 0.13), inset 0 0 30px rgba(255, 188, 82, 0.045);
}

.family-core.is-routing {
  animation: family-core-route 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.family-core img {
  animation: family-icon-float 4.8s ease-in-out infinite;
}

.family-route-pulse {
  z-index: 4;
}

/* Claim progression and final launch moment. */
.development.is-scene-active .claim-card li::before {
  animation: claim-tick 2.8s ease-in-out infinite;
}

.development.is-scene-active .claim-card li:nth-child(2)::before { animation-delay: -0.45s; }
.development.is-scene-active .claim-card li:nth-child(3)::before { animation-delay: -0.9s; }
.development.is-scene-active .claim-card li:nth-child(4)::before { animation-delay: -1.35s; }
.development.is-scene-active .claim-card li:nth-child(5)::before { animation-delay: -1.8s; }

.claim-rule span {
  animation: claim-state-sequence 8s ease-in-out infinite;
}

.claim-rule span:nth-of-type(2) { animation-delay: -6s; }
.claim-rule span:nth-of-type(3) { animation-delay: -4s; }
.claim-rule span:nth-of-type(4) { animation-delay: -2s; }

.final-cta.is-scene-active .cta-background {
  transform: translate3d(0, calc(var(--scene-shift) * -0.16), 0) scale(1.1);
}

.cta-background {
  transition: transform 140ms linear;
  will-change: transform;
}

.cta-panel {
  position: relative;
  overflow: hidden;
}

.cta-panel::before,
.cta-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.cta-panel::before {
  inset: 8% 20%;
  border: 1px solid rgba(103, 228, 255, 0.09);
  animation: spin-plain 34s linear infinite;
}

.cta-panel::after {
  top: -50%;
  left: -10%;
  width: 38%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(140, 243, 255, 0.1), transparent);
  transform: translateX(-170%) rotate(15deg);
  animation: cta-sweep 8s ease-in-out infinite;
}

.cta-star {
  position: relative;
}

.cta-star::before,
.cta-star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(120, 237, 255, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cta-star-ring 3.4s ease-out infinite;
}

.cta-star::after {
  animation-delay: 1.7s;
}

/* Keyframes for the cinematic layer. */
@keyframes cinematic-ribbon-one {
  0% { transform: translate3d(-4vw, -3vh, 0) rotate(-6deg) scale(0.92); opacity: 0.18; }
  100% { transform: translate3d(9vw, 6vh, 0) rotate(8deg) scale(1.12); opacity: 0.44; }
}

@keyframes cinematic-ribbon-two {
  0% { transform: translate3d(8vw, -2vh, 0) rotate(7deg) scale(1.04); opacity: 0.2; }
  100% { transform: translate3d(-7vw, 5vh, 0) rotate(-9deg) scale(0.92); opacity: 0.42; }
}

@keyframes cinematic-ribbon-three {
  0% { transform: translate3d(-5vw, 5vh, 0) rotate(-4deg) scale(0.95); opacity: 0.16; }
  100% { transform: translate3d(7vw, -3vh, 0) rotate(7deg) scale(1.1); opacity: 0.38; }
}

@keyframes scene-bloom-one {
  from { opacity: 0.12; scale: 0.86; translate: -3% 0; }
  to { opacity: 0.3; scale: 1.1; translate: 8% 6%; }
}

@keyframes scene-bloom-two {
  from { opacity: 0.13; scale: 1.08; translate: 5% -3%; }
  to { opacity: 0.29; scale: 0.9; translate: -7% 7%; }
}

@keyframes scene-bloom-three {
  from { opacity: 0.08; scale: 0.9; translate: -4% 2%; }
  to { opacity: 0.22; scale: 1.12; translate: 7% -5%; }
}

@keyframes surface-scan {
  0%, 62% { transform: translateX(-180%) rotate(14deg); opacity: 0; }
  70% { opacity: 1; }
  88%, 100% { transform: translateX(470%) rotate(14deg); opacity: 0; }
}

@keyframes hero-line-arrive {
  from { opacity: 0; transform: translate3d(-42px, 26px, 0) skewX(-5deg); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skewX(0); filter: blur(0); }
}

@keyframes hero-visual-arrive {
  from { opacity: 0; transform: translate3d(48px, 24px, 0) scale(0.94); filter: blur(12px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes spectral-text {
  from { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(83, 231, 255, 0)); }
  to { background-position: 100% 50%; filter: drop-shadow(0 0 16px rgba(83, 231, 255, 0.16)); }
}

@keyframes grid-drift {
  to { background-position: 64px 64px, 64px 64px; }
}

@keyframes bloom-drift {
  from { translate: -3% -2%; }
  to { translate: 5% 4%; }
}

@keyframes node-idle-breathe {
  0%, 100% { box-shadow: 0 0 12px rgba(71, 224, 255, 0.5), 0 0 0 5px rgba(62, 196, 255, 0.04); }
  50% { box-shadow: 0 0 23px rgba(71, 224, 255, 0.82), 0 0 0 9px rgba(62, 196, 255, 0.075); }
}

@keyframes selected-node-breathe {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 20px rgba(87, 239, 255, 0.95), 0 0 40px rgba(76, 116, 255, 0.48), 0 0 0 8px rgba(69, 221, 255, 0.08); }
  50% { filter: brightness(1.4); box-shadow: 0 0 34px rgba(199, 255, 255, 1), 0 0 70px rgba(91, 119, 255, 0.7), 0 0 0 13px rgba(69, 221, 255, 0.12); }
}

@keyframes core-flash {
  0% { transform: scale(0.7); filter: drop-shadow(0 0 5px rgba(80, 239, 255, 0.7)); }
  48% { transform: scale(2.25); filter: drop-shadow(0 0 24px rgba(255, 255, 255, 1)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 13px rgba(80, 239, 255, 1)); }
}

@keyframes chip-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes single-overload {
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); filter: saturate(0.75); }
  45% { transform: translate(-50%, -50%) scale(1.08); filter: saturate(1.15); }
  52% { transform: translate(-50%, -50%) scale(1.02) translateX(-2px); }
  58% { transform: translate(-50%, -50%) scale(1.04) translateX(2px); }
}

@keyframes demand-pressure {
  0%, 100% { opacity: 0.55; filter: brightness(0.85); }
  50% { opacity: 1; filter: brightness(1.25); }
}

@keyframes mini-core-pulse {
  0%, 100% { box-shadow: 0 0 34px rgba(72, 234, 255, 0.58); transform: translate(-50%, -50%) scale(0.94); }
  50% { box-shadow: 0 0 58px rgba(72, 234, 255, 0.9), 0 0 96px rgba(75, 98, 255, 0.32); transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes mini-node-pulse {
  0%, 100% { opacity: 0.64; box-shadow: 0 0 12px rgba(72, 234, 255, 0.35); }
  50% { opacity: 1; box-shadow: 0 0 26px rgba(72, 234, 255, 0.8); }
}

@keyframes mini-route-energy {
  from { background-position: 0 0; opacity: 0.4; }
  to { background-position: 220% 0; opacity: 1; }
}

@keyframes orchestrate-beacon {
  0%, 100% { box-shadow: 0 0 22px rgba(45, 192, 255, 0.12); transform: scale(0.94); }
  50% { box-shadow: 0 0 48px rgba(45, 192, 255, 0.36); transform: scale(1.07); }
}

@keyframes question-sweep {
  0%, 54% { transform: translateX(-130%); opacity: 0; }
  63% { opacity: 1; }
  86%, 100% { transform: translateX(130%); opacity: 0; }
}

@keyframes definition-core-pulse {
  0%, 100% { filter: brightness(0.94); }
  50% { filter: brightness(1.45) drop-shadow(0 0 14px rgba(78, 233, 255, 0.72)); }
}

@keyframes definition-node-pulse {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 1; filter: brightness(1.35); }
}

@keyframes core-star-hit {
  0% { transform: scale(0.65) rotate(-22deg); filter: brightness(1); }
  52% { transform: scale(1.65) rotate(18deg); filter: brightness(2); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes console-scan {
  0%, 52% { top: -24%; opacity: 0; }
  60% { opacity: 0.85; }
  88%, 100% { top: 108%; opacity: 0; }
}

@keyframes evidence-climb {
  0%, 72%, 100% { transform: translateY(0); border-color: rgba(96, 204, 255, 0.12); box-shadow: none; }
  8%, 22% { transform: translateY(-7px); border-color: rgba(99, 232, 255, 0.5); box-shadow: 0 0 36px rgba(52, 205, 255, 0.14), inset 0 0 22px rgba(52, 205, 255, 0.05); }
}

@keyframes evidence-line {
  0%, 72%, 100% { opacity: 0.12; filter: none; }
  8%, 22% { opacity: 1; filter: drop-shadow(0 0 8px rgba(83, 226, 255, 0.8)); }
}

@keyframes control-icon-breathe {
  0%, 100% { transform: translateY(0) scale(0.96); box-shadow: 0 0 20px rgba(50, 191, 255, 0.1); }
  50% { transform: translateY(-4px) scale(1.05); box-shadow: 0 0 34px rgba(50, 191, 255, 0.24); }
}

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

@keyframes family-core-route {
  0% { transform: translate(-50%, -50%) scale(0.94); }
  52% { transform: translate(-50%, -50%) scale(1.055); box-shadow: 0 0 82px rgba(64, 220, 255, 0.24); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes family-icon-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes claim-tick {
  0%, 100% { width: 8px; opacity: 0.55; }
  50% { width: 16px; opacity: 1; }
}

@keyframes claim-state-sequence {
  0%, 18% { color: #d9fbff; text-shadow: 0 0 18px rgba(72, 234, 255, 0.72); transform: translateY(-2px); }
  28%, 100% { color: #a7b9cf; text-shadow: none; transform: translateY(0); }
}

@keyframes cta-sweep {
  0%, 54% { transform: translateX(-190%) rotate(15deg); opacity: 0; }
  64% { opacity: 1; }
  90%, 100% { transform: translateX(430%) rotate(15deg); opacity: 0; }
}

@keyframes cta-star-ring {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.48); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

@media (hover: hover) and (pointer: fine) {
  .reactive-surface:hover .surface-light {
    --surface-strength: 1;
  }
}

@media (max-width: 860px) {
  .cinematic-field { opacity: 0.4; }
  .cinematic-field span { filter: blur(44px); }
  .scene-atmosphere { inset: -8% -18%; }
  .scene-atmosphere span { filter: blur(36px); }
  .surface-light::after { animation-duration: 10s; }
  .hero-visual { animation-delay: 80ms; }
  .hero-map-node > span,
  .region-node .region-dot { animation-duration: 3s; }
  .proof-ladder li { animation-duration: 8.2s !important; }
  .family-node:focus-visible,
  .family-node.is-active { transform: scale(1.018); }
  .family-sasquatch.is-active,
  .family-sasquatch:focus-visible { transform: scale(1.018); }
}

@media (max-width: 560px) {
  .cinematic-field { opacity: 0.32; }
  .pointer-aura { opacity: 0.62; }
  .hero-copy h1 > span { animation-duration: 760ms; }
  .hero-constellation-layer { cursor: default; }
  .constellation-viewport { cursor: default; }
  .scene-atmosphere span:nth-child(1) { width: 92vw; }
  .scene-atmosphere span:nth-child(2) { width: 88vw; }
  .scene-atmosphere span:nth-child(3) { width: 80vw; }
  .surface-light { opacity: calc(0.08 + var(--surface-strength) * 0.68); }
  .cta-panel::before { inset: 12% 2%; }
}

html[data-motion="paused"] .cinematic-field,
html[data-motion="paused"] .scene-atmosphere,
html[data-motion="paused"] .surface-light::after {
  opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="active"]) .cinematic-field { opacity: 0.18; }
  html:not([data-motion="active"]) .scene-atmosphere { opacity: 0.34 !important; }
  html:not([data-motion="active"]) .surface-light::after,
  html:not([data-motion="active"]) .operator-console::after,
  html:not([data-motion="active"]) .cta-panel::after,
  html:not([data-motion="active"]) .cta-star::before,
  html:not([data-motion="active"]) .cta-star::after { display: none; }
  html:not([data-motion="active"]) .hero-copy h1 > span,
  html:not([data-motion="active"]) .hero-visual { opacity: 1; transform: none; filter: none; }
  html:not([data-motion="active"]) .audience-card svg path { stroke-dashoffset: 0; }
}

/* v2.2.0 release hardening: keep cinematic layers and marquee clones inside the viewport. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

@keyframes family-core-route-mobile {
  0% { transform: scale(0.965); }
  52% { transform: scale(1.035); box-shadow: 0 0 58px rgba(64, 220, 255, 0.2); }
  100% { transform: scale(1); }
}

@media (max-width: 560px) {
  .family-core.is-routing {
    animation-name: family-core-route-mobile;
  }
}

/* Mobile keeps the cinematic system controllable and its constellations legible. */
@media (max-width: 700px) {
  .motion-toggle {
    display: inline-flex;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }

  .motion-toggle .motion-label {
    display: none;
  }

  .region-node.is-active .region-label,
  .region-node:focus-visible .region-label {
    position: absolute;
    top: calc(100% - 3px);
    left: 50%;
    display: block;
    max-width: 84px;
    padding: 3px 6px;
    overflow: hidden;
    color: #eaffff;
    border: 1px solid rgba(91, 226, 255, 0.24);
    border-radius: 999px;
    background: rgba(2, 9, 27, 0.88);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.38), 0 0 16px rgba(66, 215, 255, 0.12);
    font-size: 0.43rem;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    transform: translateX(-50%);
  }

  .family-stage {
    padding-left: 30px;
  }

  .family-stage::before {
    display: block;
    inset: 28px auto 28px 17px;
    z-index: 2;
    width: 2px;
    height: auto;
    border: 0;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, rgba(87, 233, 255, 0.92) 0 12px, rgba(91, 110, 255, 0.24) 12px 24px, transparent 24px 34px);
    background-size: 100% 68px;
    box-shadow: 0 0 18px rgba(60, 218, 255, 0.28);
    opacity: 0.72;
    animation: mobile-family-route 4.2s linear infinite;
  }

  .family-core::before,
  .family-node::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;
    z-index: 5;
    display: block;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(153, 248, 255, 0.78);
    border-radius: 50%;
    background: #08284e;
    box-shadow: 0 0 0 5px rgba(60, 214, 255, 0.055), 0 0 18px rgba(69, 226, 255, 0.5);
    transform: translateY(-50%);
    animation: mobile-family-node 3.4s ease-in-out infinite;
  }

  .family-core::after {
    display: none;
  }

  .family-node.is-active::before,
  .family-node:focus-visible::before,
  .family-core.is-routing::before {
    background: #eaffff;
    box-shadow: 0 0 0 7px rgba(63, 221, 255, 0.1), 0 0 30px rgba(75, 235, 255, 0.95);
  }

  .family-fabric::before {
    border-color: rgba(255, 208, 126, 0.82);
    box-shadow: 0 0 0 5px rgba(255, 194, 93, 0.05), 0 0 18px rgba(255, 190, 82, 0.45);
  }
}

@media (max-width: 430px) {
  .header-inner {
    gap: 8px;
  }

  .header-actions {
    gap: 6px;
  }

  .motion-toggle {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }
}

@keyframes mobile-family-route {
  to { background-position: 0 68px; }
}

@keyframes mobile-family-node {
  0%, 100% { filter: brightness(0.82); transform: translateY(-50%) scale(0.9); }
  50% { filter: brightness(1.45); transform: translateY(-50%) scale(1.08); }
}
/* v2.3 operating fabric, trust surfaces, and release polish */
.operating-fabric{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 15%,rgba(31,218,255,.09),transparent 34%),radial-gradient(circle at 85% 70%,rgba(131,82,255,.1),transparent 34%),#030817}.operating-fabric:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(102,225,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(102,225,255,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);pointer-events:none}.fabric-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(2rem,7vw,8rem);align-items:end;margin-bottom:clamp(3rem,7vw,6rem)}.fabric-heading h2{max-width:820px}.fabric-heading>p{color:var(--muted);font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.75;margin:0}.fabric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.fabric-card{position:relative;min-height:400px;padding:clamp(1.5rem,3vw,3rem);border:1px solid rgba(123,226,255,.15);background:linear-gradient(145deg,rgba(10,23,47,.94),rgba(4,10,29,.88));box-shadow:inset 0 1px rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.22);overflow:hidden;isolation:isolate}.fabric-card:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-150px;top:-150px;background:radial-gradient(circle,rgba(75,226,255,.12),transparent 67%);transition:transform .7s ease;z-index:-1}.fabric-card:hover:before{transform:scale(1.45)}.fabric-card-top{display:flex;justify-content:space-between;gap:1rem;color:#77e9ff;font:700 .72rem/1.2 var(--mono);letter-spacing:.14em}.fabric-card-top strong{color:#d4c7ff}.fabric-card h3{max-width:560px;margin:clamp(2.2rem,5vw,4.5rem) 0 1rem;font-size:clamp(1.7rem,3vw,3.1rem);line-height:1.02}.fabric-card p{color:var(--muted);line-height:1.75}.provider-cloud{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.5rem 0}.provider-cloud span{padding:.55rem .72rem;border:1px solid rgba(111,231,255,.18);background:rgba(56,198,255,.045);color:#b9f7ff;font:700 .68rem/1 var(--mono);letter-spacing:.1em}.text-link{display:inline-flex;gap:.55rem;align-items:center;margin-top:1.15rem;color:#93efff;text-decoration:none;font-weight:700}.text-link:hover{text-decoration:underline;text-underline-offset:.35em}.worker-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:2rem}.worker-zones div{display:grid;gap:.35rem;min-height:110px;padding:1rem;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025)}.worker-zones i{width:.6rem;height:.6rem;border-radius:50%;background:#5ff6c7;box-shadow:0 0 20px #5ff6c7}.worker-zones strong{font:700 .8rem/1 var(--mono);letter-spacing:.1em}.worker-zones small{color:var(--muted)}.cloud-route{display:flex;align-items:center;gap:.6rem;margin:2rem 0;font:700 .65rem/1 var(--mono);letter-spacing:.08em}.cloud-route span,.cloud-route strong{padding:.7rem;border:1px solid rgba(111,231,255,.2)}.cloud-route i{height:1px;flex:1;background:linear-gradient(90deg,#44dffa,#856cff);position:relative}.cloud-route i:after{content:"";position:absolute;right:-1px;top:-2px;width:5px;height:5px;border-radius:50%;background:#9f8aff}.fabric-note{font-size:.88rem;border-left:2px solid #8c7aff;padding-left:1rem}.vault-visual{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:2rem 0}.vault-visual span{padding:.75rem .85rem;border:1px solid rgba(255,255,255,.12);font:700 .68rem/1 var(--mono);letter-spacing:.07em}.vault-input{color:#c8d1e4}.vault-seal{color:#5ff6c7;background:rgba(95,246,199,.05)}.vault-ref{color:#9defff;background:rgba(72,216,255,.05)}.vault-visual i{color:#7c8bab}.enrollment-chain{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:1rem;padding:1.25rem;border:1px solid rgba(123,226,255,.14);background:rgba(3,8,23,.82)}.enrollment-chain span{display:flex;align-items:center;gap:.55rem;color:#d8e5f6;font:700 .72rem/1 var(--mono);letter-spacing:.05em}.enrollment-chain small{color:#6be9ff}.enrollment-chain i{height:1px;min-width:16px;flex:1;background:linear-gradient(90deg,rgba(76,230,255,.2),rgba(139,100,255,.8))}.status-pill{box-shadow:0 0 30px rgba(78,229,255,.08)}.button-primary{box-shadow:0 14px 50px rgba(70,219,255,.13)}.site-header{transition:background .25s ease,border-color .25s ease,transform .25s ease}.site-footer{background:linear-gradient(to bottom,transparent,rgba(17,30,65,.26))}.release-proof-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.1)}.release-proof-strip div{padding:1.5rem;background:#060c20}.release-proof-strip strong{display:block;color:#78ecff;font-size:clamp(1.5rem,3vw,2.5rem)}.release-proof-strip span{color:var(--muted);font-size:.8rem}.interior-hero{min-height:58vh;display:grid;align-items:end;padding:clamp(10rem,18vw,16rem) 0 clamp(4rem,9vw,8rem);position:relative}.interior-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 35%,rgba(50,218,255,.13),transparent 28%),radial-gradient(circle at 28% 65%,rgba(124,77,255,.12),transparent 30%);pointer-events:none}.interior-hero h1{max-width:1000px;margin:.5rem 0 1.5rem;font-size:clamp(3.4rem,8vw,7.4rem);line-height:.9;letter-spacing:-.055em}.interior-hero .section-intro{max-width:760px;margin:0}.interior-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.interior-card{padding:2rem;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(12,24,48,.9),rgba(4,9,25,.82))}.interior-card h2,.interior-card h3{margin:1rem 0}.interior-card p,.interior-card li{color:var(--muted);line-height:1.7}.interior-card ul{padding-left:1.2rem}.interior-card.wide{grid-column:span 2}.proof-table{width:100%;border-collapse:collapse}.proof-table th,.proof-table td{text-align:left;padding:1rem;border-bottom:1px solid rgba(255,255,255,.1)}.proof-table th{color:#79eaff;font:700 .7rem/1 var(--mono);letter-spacing:.1em}.proof-table td{color:var(--muted)}.proof-table td:first-child{color:#fff;font-weight:700}.page-main{padding-bottom:7rem}
@media(max-width:900px){.fabric-heading{grid-template-columns:1fr}.fabric-grid{grid-template-columns:1fr}.enrollment-chain{overflow-x:auto;justify-content:flex-start}.enrollment-chain span{white-space:nowrap}.enrollment-chain i{min-width:26px}.interior-grid{grid-template-columns:1fr}.interior-card.wide{grid-column:auto}.release-proof-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.worker-zones{grid-template-columns:1fr}.worker-zones div{min-height:auto}.fabric-card{min-height:auto}.release-proof-strip{grid-template-columns:1fr}.proof-table{display:block;overflow-x:auto}.cloud-route{flex-wrap:wrap}.cloud-route i{min-width:24px}.interior-hero h1{font-size:3.3rem}}

/* ========================================================================== 
   v2.4.0 — Flagship experience, resilient motion, and cinematic command deck
   ========================================================================== */

body {
  background:
    radial-gradient(circle at 72% 6%, rgba(34, 131, 255, 0.12), transparent 28rem),
    radial-gradient(circle at 14% 24%, rgba(115, 56, 255, 0.08), transparent 34rem),
    #020510;
}

.site-header {
  background: linear-gradient(180deg, rgba(2, 6, 19, 0.9), rgba(2, 7, 22, 0.68));
  border-bottom-color: rgba(119, 231, 255, 0.09);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(22px) saturate(138%);
}

.hero {
  min-height: max(820px, 100svh);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 8% -12% auto 38%;
  z-index: -1;
  height: 74%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(29, 195, 255, 0.13), rgba(82, 66, 255, 0.07) 38%, transparent 70%);
  filter: blur(42px);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(3, 16, 44, 0.62));
  mask-image: linear-gradient(to bottom, transparent, #000 42%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  align-items: center;
  gap: clamp(3rem, 5.2vw, 7rem);
}

.hero-copy {
  position: relative;
  z-index: 4;
}

.hero-copy h1 {
  max-width: 12ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.35rem);
  text-wrap: balance;
  text-shadow: 0 0 42px rgba(87, 224, 255, 0.1);
}

.hero-copy h1 > span {
  opacity: 1;
}

.hero-copy .title-gradient {
  background-image: linear-gradient(105deg, #ffffff 0%, #79efff 33%, #9b8cff 62%, #d8c8ff 82%, #ffffff 100%);
  background-size: 240% 100%;
  filter: drop-shadow(0 0 18px rgba(87, 222, 255, 0.16));
}

.status-pill {
  border-color: rgba(96, 243, 200, 0.3);
  background: linear-gradient(90deg, rgba(34, 205, 160, 0.08), rgba(25, 112, 164, 0.06));
  box-shadow: inset 0 0 26px rgba(59, 235, 198, 0.035), 0 0 34px rgba(46, 218, 195, 0.06);
}

.hero-statement {
  max-width: 37rem;
  color: #eef7ff;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
}

.hero-lead {
  max-width: 39rem;
}

.hero-actions .button {
  min-height: 54px;
  border-radius: 14px;
}

.button-primary {
  background: linear-gradient(105deg, #74f1ff, #7cbcff 54%, #a992ff);
  box-shadow: 0 18px 62px rgba(55, 203, 255, 0.21), inset 0 1px rgba(255, 255, 255, 0.68);
}

.button-primary:hover {
  box-shadow: 0 22px 82px rgba(55, 203, 255, 0.32), 0 0 0 1px rgba(183, 248, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.78);
}

.hero-signals {
  padding-top: 0.4rem;
}

.hero-signals span {
  border: 1px solid rgba(127, 222, 255, 0.1);
  background: rgba(10, 27, 56, 0.35);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.hero-visual {
  position: relative;
  z-index: 3;
  padding: 42px 18px 48px;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(22, 51, 91, 0.24), rgba(4, 11, 32, 0.08) 42%, rgba(79, 50, 153, 0.12)),
    radial-gradient(circle at 50% 45%, rgba(80, 217, 255, 0.08), transparent 62%);
  box-shadow: 0 56px 140px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(133, 232, 255, 0.06);
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 2% -8%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40, 209, 255, 0.12), rgba(90, 65, 255, 0.08) 42%, transparent 71%);
  filter: blur(28px);
  pointer-events: none;
}

.hero-image-panel {
  border-color: rgba(148, 237, 255, 0.26);
  border-radius: 25px;
  background: #030918;
  box-shadow:
    0 42px 90px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(125, 226, 255, 0.04),
    0 0 72px rgba(48, 189, 255, 0.13),
    inset 0 0 42px rgba(50, 166, 255, 0.06);
}

.hero-image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 74%, rgba(125, 87, 255, 0.08)),
    radial-gradient(circle at 50% 35%, transparent 42%, rgba(0, 4, 18, 0.32));
  pointer-events: none;
}

.hero-command-bar {
  position: absolute;
  top: 12px;
  left: 30px;
  right: 30px;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: rgba(196, 237, 255, 0.64);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.hero-command-state {
  display: inline-flex;
  align-items: center;
  color: #bdfaff;
}

.hero-command-state i,
.hero-telemetry i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.48rem;
  border-radius: 50%;
  background: #62f4c8;
  box-shadow: 0 0 0 4px rgba(98, 244, 200, 0.08), 0 0 18px rgba(98, 244, 200, 0.78);
  animation: flagship-status-pulse 2.4s ease-in-out infinite;
}

.hero-frame-corners {
  position: absolute;
  inset: 31px 7px 36px;
  z-index: 15;
  pointer-events: none;
}

.hero-frame-corners i {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgba(135, 237, 255, 0.55);
  filter: drop-shadow(0 0 8px rgba(68, 221, 255, 0.35));
}

.hero-frame-corners i:nth-child(1) { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.hero-frame-corners i:nth-child(2) { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.hero-frame-corners i:nth-child(3) { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
.hero-frame-corners i:nth-child(4) { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }

.hero-telemetry {
  position: absolute;
  right: 28px;
  bottom: 14px;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  color: rgba(184, 221, 238, 0.64);
  font: 600 0.5rem/1 var(--mono);
  letter-spacing: 0.1em;
}

.hero-telemetry span {
  display: inline-flex;
  align-items: center;
}

.hero-telemetry i {
  width: 5px;
  height: 5px;
  margin-right: 0.36rem;
  animation-delay: -1.1s;
}

.hero-telemetry b {
  margin-right: 0.38rem;
  color: #b8f5ff;
  font-weight: 800;
}

.motion-toggle {
  min-width: 112px;
  border-color: rgba(101, 232, 255, 0.2);
  background: linear-gradient(135deg, rgba(13, 46, 83, 0.78), rgba(17, 25, 66, 0.66));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.055), 0 12px 34px rgba(0, 0, 0, 0.18);
}

.motion-toggle[aria-pressed="false"] {
  color: #bdfaff;
  border-color: rgba(90, 239, 211, 0.28);
}

/* A paused entrance animation must resolve to its final, readable frame. */
html[data-motion="paused"] .hero-copy h1 > span,
html[data-motion="paused"] .hero-visual {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

html[data-motion="paused"] .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="active"]) .hero-copy h1 > span,
  html:not([data-motion="active"]) .hero-visual {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hero-visual:hover .hero-image-panel {
    border-color: rgba(158, 243, 255, 0.42);
    box-shadow:
      0 52px 110px rgba(0, 0, 0, 0.58),
      0 0 0 1px rgba(125, 226, 255, 0.08),
      0 0 96px rgba(48, 189, 255, 0.19),
      inset 0 0 48px rgba(50, 166, 255, 0.08);
  }
}

@keyframes flagship-status-pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.18); }
}

@media (max-width: 1500px) {
  .hero-command-bar span:last-child { display: none; }
}

@media (max-width: 1180px) {
  .hero-command-bar span:nth-child(2),
  .hero-telemetry span:nth-child(2) { display: none; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-visual { padding: 38px 12px 44px; }
  .hero-command-bar { left: 22px; right: 22px; }
  .hero-frame-corners { inset-inline: 2px; }
}

@media (max-width: 600px) {
  .hero-copy h1 { max-width: none; font-size: clamp(3.05rem, 13vw, 4.2rem); line-height: 0.96; }
  .hero-copy h1 > span { white-space: nowrap; }
  .hero-copy h1 > span:last-child { white-space: normal; }
  .hero-command-bar { left: 18px; right: 18px; font-size: 0.44rem; letter-spacing: 0.08em; }
  .hero-command-bar span:last-child { display: none; }
  .hero-telemetry { left: 18px; right: auto; font-size: 0.43rem; }
  .hero-telemetry span:nth-child(3) { display: none; }
  .hero-frame-corners { inset: 31px 0 34px; }
  .motion-toggle { min-width: 40px; }
}

/* v2.4.1 — Founder voice leads the flagship hero. */
.hero-copy .founder-title {
  max-width: none;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.6rem);
  font-size: clamp(2.65rem, 4.25vw, 4.95rem);
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-wrap: pretty;
}

.founder-title > span {
  display: block;
  max-width: 14.5ch;
  white-space: normal;
}

.founder-title > span:first-child {
  color: #f4f8ff;
}

.founder-title strong {
  color: #83f3ff;
  font: inherit;
  text-shadow: 0 0 28px rgba(75, 227, 255, 0.22);
}

.founder-title .title-gradient {
  max-width: 15.5ch;
  margin-top: 0.08em;
  background-image: linear-gradient(102deg, #94f6ff 0%, #72dfff 28%, #9c8aff 63%, #d9caff 86%, #ffffff 100%);
}

.hero-thesis {
  max-width: 41rem;
  margin-bottom: 1.6rem;
  color: #b7c6da;
  font-size: clamp(1.02rem, 1.22vw, 1.16rem);
  line-height: 1.72;
}

.hero-thesis strong {
  color: #a5f5ff;
  text-decoration: underline;
  text-decoration-color: rgba(112, 230, 255, 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.hero-mantra {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0.12rem 0.42em;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 2rem;
  color: #f2f8ff;
  font-size: clamp(1.06rem, 1.42vw, 1.28rem);
  line-height: 1.45;
}

.hero-mantra span:last-child {
  grid-column: 1 / -1;
  color: #b9cce1;
}

@media (max-width: 1180px) {
  .hero-copy .founder-title { font-size: clamp(2.7rem, 4.6vw, 4.35rem); }
  .founder-title > span,
  .founder-title .title-gradient { max-width: 16ch; }
}

@media (max-width: 700px) {
  .hero-copy .founder-title {
    margin-top: 1.3rem;
    font-size: clamp(2.65rem, 12.2vw, 3.75rem);
    line-height: 0.97;
  }

  .founder-title > span,
  .founder-title .title-gradient {
    max-width: none;
    white-space: normal;
  }

  .hero-mantra {
    grid-template-columns: 1fr;
    gap: 0.08rem;
  }

  .hero-mantra span:last-child { grid-column: auto; margin-top: 0.25rem; }
}

/* ========================================================================== 
   v3.1.0 — Mobile-first refactor and safe-area hardening
   ========================================================================== */

html {
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

img,
svg,
canvas,
video { max-width: 100%; }

button,
a,
input,
select,
summary { -webkit-tap-highlight-color: transparent; }

:where(button, a, input, select, summary):focus-visible {
  outline: 3px solid #8df5ff;
  outline-offset: 3px;
}

.site-header {
  padding-right: max(0px, env(safe-area-inset-right));
  padding-left: max(0px, env(safe-area-inset-left));
}

.site-footer {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

@media (max-width: 860px) {
  body.nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .primary-nav {
    top: calc(var(--header-height) + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: max(12px, env(safe-area-inset-left));
    max-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    overscroll-behavior: contain;
  }

  .primary-nav a,
  .nav-toggle,
  .nav-cta,
  .button,
  .text-link { min-height: 48px; }

  .nav-toggle { min-width: 48px; }

  .section,
  .hero,
  .final-cta,
  .subpage,
  .interior-hero { scroll-margin-top: calc(var(--header-height) + 16px); }
}

@media (max-width: 700px) {
  :root { --header-height: 68px; }

  .container { width: min(calc(100% - 32px), var(--container)); }

  .site-header {
    height: calc(var(--header-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .header-inner { min-width: 0; gap: 8px; }
  .brand { min-width: 0; }
  .brand-copy { min-width: 0; max-width: min(48vw, 178px); }
  .brand-name,
  .brand-company { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .hero {
    min-height: 0;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 52px);
    padding-bottom: 72px;
  }

  .hero-grid { gap: 46px; }
  .hero-copy { min-width: 0; }
  .hero-copy .founder-title {
    max-width: 100%;
    margin-top: 1rem;
    font-size: clamp(2.32rem, 10.7vw, 3.45rem);
    line-height: 1;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
  }

  .hero-copy .founder-title > span,
  .hero-copy .founder-title .title-gradient {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .hero-statement,
  .hero-lead,
  .section-intro,
  .fabric-card p,
  .interior-card p,
  .interior-card li { font-size: 1rem; line-height: 1.68; }

  .hero-actions { gap: 10px; }
  .hero-actions .button { justify-content: center; padding-inline: 18px; }
  .hero-signals { gap: 8px; }
  .hero-signals > * { min-width: 0; }

  .hero-visual,
  .hero-image-panel { min-width: 0; }
  .hero-image-panel img { width: 100%; height: auto; }
  .hero-image-panel figcaption { position: relative; }

  .section { padding: 74px 0; }
  .section-number { top: 10px; right: 10px; font-size: 5.3rem; opacity: 0.18; }
  h2 { overflow-wrap: anywhere; }

  .contrast-panel,
  .northstar-question,
  .definition-card,
  .region-readout,
  .control-card,
  .audience-card,
  .development-panel,
  .cta-panel,
  .fabric-card,
  .interior-card,
  .subpage-card { min-width: 0; padding: 22px; border-radius: 20px; }

  .contrast-panel,
  .audience-card,
  .final-cta { min-height: 0; }

  .constellation-explorer { margin-inline: 12px; padding: 8px; }
  .constellation-viewport { aspect-ratio: 1 / 1.08; min-height: 0; }
  .region-node { min-width: 52px; min-height: 52px; }
  .region-dot { width: 34px; height: 34px; }
  .map-interaction-instruction { max-width: calc(100% - 20px); white-space: normal; }

  .trace-tabs {
    display: flex;
    gap: 6px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .trace-tabs button {
    flex: 0 0 88px;
    min-width: 88px;
    scroll-snap-align: start;
  }

  .console-body,
  .console-workspace,
  .trace-visual,
  .plan-board,
  .route-board,
  .arbitrate-board,
  .prove-board { min-width: 0; }

  .route-board {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }

  .route-beam { display: none; }
  .route-choice { position: static; width: auto; grid-column: 1 / -1; }

  .proof-ladder li { min-width: 0; }
  .proof-ladder p,
  .proof-ladder small { overflow-wrap: anywhere; }

  .fabric-grid,
  .worker-zones,
  .interior-grid,
  .release-proof-strip { grid-template-columns: 1fr; }
  .interior-card.wide { grid-column: auto; }

  .fabric-card { min-height: 0; }
  .fabric-card h3 { margin-top: 2rem; font-size: clamp(1.65rem, 8vw, 2.35rem); }
  .fabric-card-top { align-items: flex-start; flex-direction: column; }
  .provider-cloud span { flex: 1 1 calc(50% - 0.45rem); text-align: center; }

  .enrollment-chain {
    justify-content: flex-start;
    padding: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
  }
  .enrollment-chain span { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; }
  .enrollment-chain i { flex: 0 0 26px; }

  .vault-visual { display: grid; grid-template-columns: 1fr; }
  .vault-visual i { transform: rotate(90deg); text-align: center; }
  .vault-visual span { min-width: 0; overflow-wrap: anywhere; text-align: center; }

  .final-cta { padding: 74px 0; }
  .cta-panel h2 { font-size: clamp(2.45rem, 12vw, 3.6rem); }

  .interior-hero {
    min-height: 0;
    padding: calc(var(--header-height) + env(safe-area-inset-top) + 64px) 0 56px;
  }
  .interior-hero h1 { font-size: clamp(2.65rem, 12vw, 4.2rem); overflow-wrap: anywhere; }
  .page-main { padding-bottom: 4rem; }

  .proof-table { min-width: 640px; }
  .interior-card:has(.proof-table) { overflow-x: auto; overscroll-behavior-inline: contain; }
}

@media (max-width: 390px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .brand-copy { max-width: 134px; }
  .brand-name { font-size: 0.52rem; }
  .brand-company { display: none; }
  .hero-copy .founder-title { font-size: clamp(2.12rem, 10.8vw, 2.75rem); }
  .hero-statement,
  .hero-lead { font-size: 0.96rem; }
  .status-pill { max-width: 100%; white-space: normal; }
  .console-workspace { padding-inline: 12px; }
  .northstar-question blockquote { font-size: 1.35rem; }
}

@media (max-width: 700px) {
  .site-header .motion-toggle { display: none !important; }
  .subpage-nav .nav-cta,
  .subpage-actions .button { min-height: 48px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root { --header-height: 60px; }
  .hero { padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 28px); }
  .primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-nav a { min-height: 44px; }
  .primary-nav .nav-cta { margin-top: 0; }
  .hero-grid { gap: 32px; }
  .hero-copy .founder-title { font-size: clamp(2.15rem, 7vw, 3.25rem); }
}

@media (hover: none), (pointer: coarse) {
  button,
  select,
  summary,
  a.button,
  a.nav-cta,
  .primary-nav a { min-height: 48px !important; }
  .primary-nav a { min-width: 44px; justify-content: center; }
  .motion-toggle,
  .experience-settings-toggle,
  .nav-toggle { min-width: 48px !important; min-height: 48px !important; }
  .region-node { min-width: 52px !important; min-height: 52px !important; }
  [data-tilt],
  .reactive-surface { transform: none !important; }
  .pointer-aura,
  .semantic-lens,
  .map-pointer-reticle { display: none !important; }
  .button:hover,
  .fabric-card:hover::before,
  .family-sasquatch:hover { transform: none; }
}

@media (prefers-reduced-data: reduce) {
  .cinematic-field,
  .scene-atmosphere,
  .cosmic-canvas { display: none; }
}