:root {
  color-scheme: dark;
  --ink: #f5f5f5;
  --muted: #a8a8a8;
  --faint: #707070;
  --bg: #000000;
  --panel: #0a0a0a;
  --panel-strong: #151515;
  --line: rgba(255, 255, 255, 0.14);
  --cyan: #f2f2f2;
  --cyan-deep: #a7a7a7;
  --amber: #bdbdbd;
  --max-width: 1380px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

.signal-grid {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black 0, transparent 72%);
}

a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--cyan); color: var(--bg); }

.page-glow {
  position: fixed;
  z-index: 0;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  opacity: 0.095;
  pointer-events: none;
}
.page-glow-one {
  top: -20rem;
  right: -15rem;
  background: radial-gradient(circle, rgba(255, 255, 255, .66), rgba(255, 255, 255, .14) 38%, transparent 72%);
  opacity: .075;
}
.page-glow-two {
  top: 55rem;
  left: -30rem;
  background: radial-gradient(circle, rgba(150, 150, 150, .56), rgba(110, 110, 110, .1) 40%, transparent 72%);
  opacity: .055;
}

.site-header,
footer {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 64px), var(--max-width));
  margin-inline: auto;
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
}

.scene-inner {
  width: min(calc(100% - 64px), var(--max-width));
  margin-inline: auto;
}

.focus-scene {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  scroll-snap-align: start;
  scroll-margin-top: 88px;
  padding-block: 118px 84px;
  border-bottom: 1px solid var(--line);
}

.motion-ready .focus-scene .scene-inner {
  opacity: .1;
  filter: blur(7px);
  transform: translate3d(0, 9vh, 0) scale(.94);
  transition:
    opacity 900ms cubic-bezier(.2, .65, .25, 1),
    transform 1000ms cubic-bezier(.2, .65, .25, 1),
    filter 800ms ease;
  will-change: auto;
}

.motion-ready .focus-scene.is-focused .scene-inner {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  will-change: opacity, transform;
}

.motion-ready .focus-scene.is-past .scene-inner {
  transform: translate3d(0, -7vh, 0) scale(.96);
}

.site-swarm-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 50%;
  width: min(calc(100% - 64px), var(--max-width));
  min-height: 72px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* Keep the same motion language while avoiding work for sections outside the viewport. */
.motion-ready .focus-scene:not(.is-focused) *,
.motion-ready .focus-scene:not(.is-focused) *::before,
.motion-ready .focus-scene:not(.is-focused) *::after {
  animation-play-state: paused !important;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 4px;
  color: var(--cyan);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}
nav { display: flex; align-items: center; gap: 30px; }
nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 180ms ease;
}
nav a:hover, nav a:focus-visible { color: var(--ink); }
.nav-contact {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.hero {
  padding-top: 104px;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: clamp(64px, 8vw, 120px);
  align-items: center;
}
.eyebrow,
.section-index {
  margin: 0 0 24px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; }
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
  animation: signal-pulse 2.4s ease-out infinite;
}
h1, h2, h3 { font-family: "Manrope", sans-serif; letter-spacing: -0.045em; }
h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(3rem, 4.55vw, 5.25rem);
  font-weight: 600;
  line-height: 1.01;
}
h1 em {
  color: var(--cyan);
  font-style: normal;
  text-shadow: 0 0 34px rgba(255, 255, 255, .1);
}
.hero-vision {
  display: block;
  margin-top: .18em;
  color: var(--muted);
  font-size: .58em;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: #050505; }
.button-primary:hover { background: #cfcfcf; }
.button-quiet { border: 1px solid var(--line); color: var(--muted); }
.button-quiet:hover { border-color: rgba(255, 255, 255, .44); color: var(--ink); }
.hero-portrait {
  min-height: 560px;
  display: grid;
  place-items: center;
  margin: 0;
}
.portrait-orbit {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: .84;
  display: grid;
  place-items: center;
}
.portrait-orbit::before,
.portrait-orbit::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.portrait-orbit::before {
  z-index: 2;
  inset: 1% 0 3% 2%;
  background:
    linear-gradient(#f2f2f2, #f2f2f2) left top / 104px 1px no-repeat,
    linear-gradient(#f2f2f2, #f2f2f2) left top / 1px 104px no-repeat,
    linear-gradient(#777777, #777777) right bottom / 128px 1px no-repeat,
    linear-gradient(#777777, #777777) right bottom / 1px 128px no-repeat;
  opacity: .4;
}
.portrait-orbit::after {
  z-index: 0;
  inset: 8% -2% 0 10%;
  background: radial-gradient(circle at 58% 42%, rgba(255, 255, 255, .11), transparent 58%);
  filter: none;
}
.portrait-disc {
  position: relative;
  z-index: 1;
  width: 90%;
  height: 91%;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(11% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 15%);
  background: #111111;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .78);
}
.portrait-disc::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, transparent 23%),
    linear-gradient(180deg, transparent 56%, rgba(0, 0, 0, .72) 100%);
  pointer-events: none;
}
.portrait-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 45%;
  filter: grayscale(1) contrast(1.13) brightness(.72);
  transform: scale(1.035);
}
.portrait-caption {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 2%;
  display: grid;
  gap: 3px;
  padding: 8px 0;
  text-align: right;
  text-shadow: 0 2px 16px #000;
}
.portrait-caption span { color: var(--cyan); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.portrait-caption strong { color: var(--ink); font-family: "Manrope", sans-serif; font-size: 1.08rem; }
.orbit-node {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .07), 0 0 22px rgba(255, 255, 255, .52);
  animation: signal-pulse 2.8s ease-out infinite;
}
.orbit-node-one { top: 10%; right: 1%; }
.orbit-node-two { bottom: 13%; left: 1%; animation-delay: -1.4s; }

.collaboration-story {
  background:
    radial-gradient(circle at 18% 48%, rgba(255, 255, 255, .055), transparent 34%),
    rgba(5, 5, 5, .86);
}
.collaboration-inner {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(460px, 1.12fr);
  gap: clamp(70px, 9vw, 150px);
  align-items: center;
}
.collaboration-heading h2 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(3rem, 4.8vw, 5.6rem);
  font-weight: 600;
  line-height: 1;
}
.collaboration-points {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.collaboration-point {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 82px;
  gap: 20px;
  align-items: center;
  padding: 28px clamp(14px, 1.3vw, 20px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 220ms ease;
}
.collaboration-point:hover,
.collaboration-point.is-active {
  background: rgba(255, 255, 255, .045);
}
.collaboration-point:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.point-number {
  justify-self: center;
  align-self: start;
  padding-top: 5px;
  color: var(--faint);
  font-family: "Manrope", sans-serif;
  font-size: .7rem;
  letter-spacing: .14em;
  transition: color 220ms ease;
}
.collaboration-point:hover .point-number,
.collaboration-point.is-active .point-number {
  color: var(--ink);
}
.collaboration-point-copy {
  display: block;
  min-width: 0;
}
.collaboration-point-title {
  display: block;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
}
.point-signal {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
}
.point-signal::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 14px rgba(255, 255, 255, .72);
  animation: point-travel 2.8s ease-in-out infinite;
  animation-play-state: paused;
}
.collaboration-points > li:nth-child(2) .point-signal::after { animation-delay: -.9s; }
.collaboration-points > li:nth-child(3) .point-signal::after { animation-delay: -1.8s; }
.collaboration-point.is-active .point-signal::after { animation-play-state: running; }
.motion-ready .collaboration-point {
  opacity: .12;
  transform: translate3d(34px, 0, 0);
  transition: opacity 700ms ease, transform 850ms cubic-bezier(.2, .65, .25, 1);
}
.motion-ready .collaboration-story.is-focused .collaboration-point {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.motion-ready .collaboration-story.is-focused .collaboration-points > li:nth-child(2) .collaboration-point { transition-delay: 130ms; }
.motion-ready .collaboration-story.is-focused .collaboration-points > li:nth-child(3) .collaboration-point { transition-delay: 260ms; }

.applications-showcase {
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-margin-top: 88px;
  padding-block: 88px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 72% 48%, rgba(255, 255, 255, .05), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    rgba(0, 0, 0, .82);
  background-size: auto, 88px 88px, 88px 88px, auto;
}
.applications-showcase-inner {
  width: min(calc(100% - 48px), 1680px);
  display: grid;
  gap: clamp(24px, 3.5vh, 42px);
}
.applications-title {
  margin: 0;
  font-size: clamp(2.9rem, 4.4vw, 5.4rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.045em;
}
.application-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.35vw, 22px);
}
.applications-showcase .application-panel {
  min-height: 0;
  display: block;
  min-width: 0;
  padding: 17px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  scroll-snap-align: none;
  scroll-margin-top: 0;
  transition: border-color 360ms ease;
}
.application-interactive .applications-showcase .application-panel.is-active {
  border-top-color: rgba(255, 255, 255, .58);
}
.application-panel .application-panel-inner {
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}
.application-copy {
  min-height: 0;
  margin-bottom: 16px;
}
.application-copy h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.75vw, 1.75rem);
  font-weight: 600;
  line-height: 1.08;
}
.application-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.application-trigger:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 7px;
}
.application-toggle {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.application-toggle::before,
.application-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1px;
  background: var(--muted);
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease, transform 300ms ease;
}
.application-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.application-panel.is-active .application-toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}
.application-benefit-reveal { margin-top: 12px; }
.application-benefit {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.48;
}
.application-benefit p { margin: 0; }
.application-benefit p + p { margin-top: .72em; }
.application-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 12px;
}
.application-source {
  position: relative;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.application-source::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: var(--ink);
  opacity: .26;
  transform: scaleX(.28);
  transform-origin: left;
  transition: opacity 220ms ease, transform 220ms ease;
}
.application-source:hover::after,
.application-source:focus-visible::after {
  opacity: .85;
  transform: scaleX(1);
}
.application-interactive .application-benefit-reveal {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-7px);
  transition:
    grid-template-rows 420ms cubic-bezier(.2, .65, .25, 1),
    margin-top 420ms cubic-bezier(.2, .65, .25, 1),
    opacity 260ms ease,
    transform 420ms cubic-bezier(.2, .65, .25, 1);
}
.application-interactive .application-benefit-reveal > .application-benefit {
  min-height: 0;
  overflow: hidden;
}
.application-interactive .application-panel.is-active .application-benefit-reveal {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  transform: translateY(0);
}
.diagram-shell {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 0 0;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.diagram-shell::before,
.diagram-shell::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 1px;
  background: var(--ink);
  opacity: .72;
}
.diagram-shell::before { top: -1px; left: 0; }
.diagram-shell::after { right: 0; bottom: -1px; }
.application-diagram {
  display: block;
  width: 112%;
  height: auto;
  margin-left: -6%;
  aspect-ratio: 720 / 520;
  overflow: hidden;
}

.terrain-line,
.sector-line,
.structure-line,
.structure-heavy,
.route-line,
.swarm-link,
.drone-arm,
.drone-rotor,
.scan-beam,
.anomaly-ring,
.defect-line,
.hazard-path,
.warning-mark {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.terrain-line { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.sector-line { stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 4 8; }
.route-line { stroke: rgba(255, 255, 255, .52); stroke-width: 1.2; stroke-dasharray: 3 11; }
.swarm-link { stroke: rgba(255, 255, 255, .32); stroke-width: 1; stroke-dasharray: 2 8; }
.drone-core { fill: #f2f2f2; stroke: #000; stroke-width: 3; }
.drone-arm { stroke: #f2f2f2; stroke-width: 1.4; }
.drone-rotor { stroke: rgba(255, 255, 255, .72); stroke-width: 1; }
.anomaly-core { fill: #f2f2f2; }
.anomaly-ring { stroke: rgba(255, 255, 255, .46); stroke-width: 1; }
.diagram-label,
.diagram-note {
  fill: #a8a8a8;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.6px;
}
.diagram-note { fill: #707070; font-size: 14px; letter-spacing: 1.4px; }
.structure-heavy { stroke: rgba(255, 255, 255, .62); stroke-width: 1.8; }
.structure-line { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.structure-line.fine { stroke: rgba(255, 255, 255, .13); }
.scan-beam { stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; stroke-dasharray: 4 7; }
.defect-line { stroke: #f2f2f2; stroke-width: 2; }
.slope-fill { opacity: .8; }
.slope-contour { stroke: rgba(255, 255, 255, .17); }
.hazard-path { stroke: rgba(255, 255, 255, .68); stroke-width: 2; stroke-dasharray: 4 8; }
.debris { fill: #bdbdbd; }
.warning-mark { stroke: #f2f2f2; stroke-width: 1.5; }

.diagram-motion { animation-play-state: paused !important; }
.is-focused .diagram-motion { animation-play-state: running !important; }
.route-flow { animation: dash-flow 4s linear infinite; }
.link-flow { animation: dash-flow 2.4s linear infinite reverse; }
.ag-scan { animation: field-scan 5.2s ease-in-out infinite; }
.drone-route-one { animation: agriculture-route-one 7s ease-in-out infinite; }
.drone-route-two { animation: agriculture-route-two 7.8s ease-in-out infinite; }
.drone-route-three { animation: agriculture-route-three 6.6s ease-in-out infinite; }
.ring-pulse { transform-box: fill-box; transform-origin: center; animation: ring-signal 2.6s ease-out infinite; }
.ring-delay { animation-delay: -1.3s; }
.inspect-one { animation: inspect-one 5.8s ease-in-out infinite; }
.inspect-two { animation: inspect-two 6.5s ease-in-out infinite; }
.inspect-three { animation: inspect-three 5.2s ease-in-out infinite; }
.beam-sweep { transform-box: view-box; transform-origin: 452px 355px; animation: beam-sweep 3.8s ease-in-out infinite; }
.terrain-scan { animation: dash-flow 2.2s linear infinite; }
.monitor-one { animation: monitor-one 5.8s ease-in-out infinite; }
.monitor-two { animation: monitor-two 6.4s ease-in-out infinite; }
.monitor-three { animation: monitor-three 5.4s ease-in-out infinite; }
.hazard-flow { animation: dash-flow 1.8s linear infinite; }
.debris-one { animation: debris-slide-one 3.2s ease-in infinite; }
.debris-two { animation: debris-slide-two 3.2s ease-in infinite .7s; }
.debris-three { animation: debris-slide-three 3.2s ease-in infinite 1.4s; }
.warning-pulse { transform-box: fill-box; transform-origin: center; animation: warning-signal 2.2s ease-out infinite; }

.manifesto {
  width: 100%;
  background:
    radial-gradient(circle at 78% 45%, rgba(255, 255, 255, .075), transparent 28%),
    linear-gradient(120deg, rgba(255, 255, 255, .025), transparent 46%),
    rgba(3, 3, 3, .88);
  backdrop-filter: blur(6px);
}
.manifesto-inner { display: grid; gap: 30px; }
.manifesto-label {
  margin: 0;
  color: var(--faint);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.manifesto-statement {
  max-width: 1180px;
  margin: 0;
  color: var(--muted);
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 5.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.052em;
}
.manifesto-statement strong { color: var(--ink); font-weight: 600; }

.system-focus {
  background:
    radial-gradient(circle at 72% 38%, rgba(255, 255, 255, .065), transparent 34%),
    linear-gradient(115deg, rgba(255, 255, 255, .022), transparent 48%),
    rgba(2, 2, 2, .88);
}
.dual-bet {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .07), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, .018), transparent 35%, rgba(255, 255, 255, .018)),
    rgba(0, 0, 0, .91);
}
.vision-focus {
  background:
    radial-gradient(circle at 70% 46%, rgba(255, 255, 255, .058), transparent 38%),
    linear-gradient(115deg, rgba(255, 255, 255, .018), transparent 55%),
    rgba(3, 3, 3, .9);
}
.hardware-focus {
  background:
    radial-gradient(circle at 25% 50%, rgba(255, 255, 255, .052), transparent 34%),
    linear-gradient(65deg, rgba(255, 255, 255, .02), transparent 52%),
    rgba(5, 5, 5, .9);
}
.system-focus-inner,
.vision-focus-inner,
.hardware-focus-inner {
  display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(520px, 1.28fr);
  gap: clamp(60px, 7vw, 124px);
  align-items: center;
}
.dual-bet-inner {
  display: grid;
  gap: clamp(22px, 3.6vh, 42px);
}
.dual-bet-heading {
  display: block;
}
.dual-bet-heading .section-index { margin-bottom: 15px; }
.dual-bet-heading h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.2rem, 5.35vw, 6.4rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.055em;
}
.bet-panel {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(0, 0, 0, .42);
}
.bet-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(72px, 9vw, 140px) minmax(0, 1fr);
  align-items: center;
}
.bet-item {
  appearance: none;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
  padding: clamp(25px, 3vw, 42px) clamp(18px, 2.5vw, 34px);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 240ms ease, box-shadow 240ms ease;
}
.bet-item:hover,
.bet-item.is-active {
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .72);
}
.bet-number {
  color: var(--faint);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bet-copy,
.bet-title,
.bet-contrast,
.bet-summary { display: block; }
.bet-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.9rem, 3vw, 3.45rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
}
.bet-contrast {
  width: fit-content;
  margin-top: 12px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--faint);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.bet-summary {
  max-width: 430px;
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(.94rem, 1.08vw, 1.05rem);
  line-height: 1.5;
}
.bet-item .node-inline-detail {
  max-width: 470px;
  text-align: left;
}
.bet-research-link {
  width: fit-content;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
  text-decoration-color: rgba(255, 255, 255, .28);
  text-underline-offset: 5px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.bet-research-link:hover,
.bet-research-link:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
.bet-connector {
  position: relative;
  display: block;
  width: calc(100% - 22px);
  height: 1px;
  margin-inline: auto;
  background: var(--line);
}
.bet-connector span {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 14px rgba(255, 255, 255, .65);
  animation: bet-signal 2.8s ease-in-out infinite;
  animation-play-state: paused;
}
.dual-bet.is-focused .bet-connector span { animation-play-state: running; }
.story-copy { min-width: 0; }
.story-copy h2,
.contact h2 {
  margin: 0;
  font-size: clamp(3rem, 4.7vw, 5.2rem);
  line-height: 1.02;
  font-weight: 600;
}
.vision-copy h2,
.hardware-copy h2 {
  font-size: clamp(2.75rem, 4vw, 4.6rem);
  line-height: 1;
}
.hardware-copy h2 { font-size: clamp(2.35rem, 3.25vw, 3.8rem); }
.story-lead {
  max-width: 580px;
  margin: 30px 0 0;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.12rem, 1.5vw, 1.42rem);
  line-height: 1.48;
}
.research-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
  text-decoration-color: rgba(255, 255, 255, .28);
  text-underline-offset: 5px;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}
.research-source:hover,
.research-source:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
.interactive-diagram {
  width: 100%;
  min-width: 0;
  justify-self: end;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(0, 0, 0, .56);
}
.diagram-guide {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vision-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) 24px) minmax(0, 1fr);
  align-items: center;
  padding: clamp(22px, 3vw, 34px) 18px 18px;
}
.diagram-node {
  appearance: none;
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(8, 8, 8, .92);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    min-height 340ms cubic-bezier(.2, .65, .25, 1),
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}
.diagram-node::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--ink);
  opacity: 0;
  transform: scaleX(.15);
  transform-origin: left;
  transition: opacity 260ms ease, transform 360ms ease;
}
.diagram-node:hover,
.diagram-node.is-active {
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .065);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transform: translateY(-3px);
}
.diagram-node:hover::after,
.diagram-node.is-active::after {
  opacity: .9;
  transform: scaleX(1);
}
.diagram-node:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.diagram-node > span {
  color: var(--faint);
  font-size: .65rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.diagram-node strong {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 600;
  line-height: 1.18;
}
.diagram-node small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}
.diagram-node > .node-inline-detail,
.process-node > .node-inline-detail,
.bet-item .node-inline-detail,
.collaboration-point .node-inline-detail,
.hardware-reason .node-inline-detail {
  display: block;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    max-height 360ms cubic-bezier(.2, .65, .25, 1),
    margin-top 280ms ease,
    padding-top 280ms ease,
    border-color 240ms ease,
    opacity 240ms ease,
    transform 320ms ease;
}
.diagram-node.is-active .node-inline-detail,
.process-node.is-active .node-inline-detail,
.bet-item.is-active .node-inline-detail,
.collaboration-point.is-active .node-inline-detail,
.hardware-reason.is-active .node-inline-detail {
  max-height: 7.5rem;
  margin-top: 7px;
  padding-top: 9px;
  border-top-color: rgba(255, 255, 255, .14);
  opacity: 1;
  transform: translateY(0);
}
.collaboration-point .node-inline-detail {
  max-width: 590px;
  font-size: .9rem;
}
.flow-connector {
  position: relative;
  align-self: center;
  width: 100%;
  height: 1px;
  background: var(--line);
}
.flow-connector::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 10px rgba(255, 255, 255, .55);
  animation: diagram-flow-horizontal 2s linear infinite;
  animation-play-state: paused;
}
.is-focused .flow-connector::after { animation-play-state: running; }
.team-exchange {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.team-dot {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 50%;
}
.team-dot:nth-child(2) { background: var(--ink); }
.team-exchange p {
  margin: 0 0 0 7px;
  color: var(--faint);
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .04em;
}
.hardware-reasons {
  max-width: 600px;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}
.hardware-reason {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 14px clamp(14px, 1.3vw, 20px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 220ms ease;
}
.hardware-reason:hover,
.hardware-reason.is-active {
  background: rgba(255, 255, 255, .045);
}
.hardware-reason:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.hardware-reason-index {
  justify-self: center;
  color: var(--faint);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  transition: color 220ms ease;
}
.hardware-reason:hover .hardware-reason-index,
.hardware-reason.is-active .hardware-reason-index {
  color: var(--ink);
}
.hardware-reason-copy {
  display: block;
  min-width: 0;
}
.hardware-reason strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}
.compute-flow {
  display: grid;
  grid-template-columns: minmax(105px, .46fr) 28px minmax(320px, 1.6fr) 28px minmax(105px, .46fr);
  align-items: center;
  padding: clamp(24px, 3vw, 38px) 18px;
}
.compute-edge-node { min-height: 124px; }
.soc-shell {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .018);
}
.soc-shell-title {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.soc-components {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, .62fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.soc-components .diagram-node { min-height: 128px; }
.soc-link-node {
  background:
    linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, .11) 50%, transparent 51%),
    rgba(8, 8, 8, .92);
}
.focus-one-visual {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0;
}
.swarm-selection {
  width: 100%;
  margin: 0;
}
.swarm-selection svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.swarm-flight-path,
.swarm-network,
.swarm-terrain,
.focus-drone-arm,
.focus-drone-rotor,
.selected-drone-ring,
.selection-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.swarm-flight-path { stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; stroke-dasharray: 5 12; }
.swarm-network { stroke: rgba(255, 255, 255, .25); stroke-width: 1; stroke-dasharray: 3 10; }
.swarm-terrain { stroke: rgba(255, 255, 255, .055); stroke-width: 1; }
.focus-drone-core { fill: var(--ink); stroke: #000; stroke-width: 3; }
.focus-drone-arm { stroke: var(--ink); stroke-width: 1.4; }
.focus-drone-rotor { stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.focus-agent { animation: focus-agent-float 4.6s ease-in-out infinite; }
.focus-agent-two { animation-delay: -.8s; }
.focus-agent-three { animation-delay: -1.6s; }
.focus-agent-four { animation-delay: -2.4s; }
.focus-agent-five { animation-delay: -3.2s; }
.focus-agent-six { animation-delay: -4s; }
.swarm-path-flow { animation: dash-flow 4s linear infinite; }
.swarm-link-flow { animation: dash-flow 2.6s linear infinite reverse; }
.selected-drone-ring {
  stroke: rgba(255, 255, 255, .62);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.selected-drone-pulse { animation: selected-drone-signal 2.8s ease-out infinite; }
.selected-drone-delay { animation-delay: -1.4s; }
.selection-line { stroke: rgba(255, 255, 255, .48); stroke-width: 1; stroke-dasharray: 3 9; }
.selection-flow { animation: dash-flow 2s linear infinite; }

.robot-process {
  width: min(100%, 620px);
  display: grid;
  justify-items: center;
  margin: 0;
}
.process-kicker {
  margin: 0 0 13px;
  color: var(--faint);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.process-node {
  appearance: none;
  position: relative;
  width: min(100%, 340px);
  min-height: 54px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 9px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(7, 7, 7, .92);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    min-height 340ms cubic-bezier(.2, .65, .25, 1),
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
}
.process-node:hover,
.process-node.is-active {
  border-color: rgba(255, 255, 255, .62);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.process-node span,
.process-node small {
  color: var(--faint);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.process-node strong,
.process-node > span {
  font-family: "Manrope", sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.2;
}
.process-input { width: 180px; }
.process-current {
  background: var(--ink);
  color: var(--bg);
}
.process-current small { color: #555; }
.process-current .node-inline-detail { color: #333; }
.process-current::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0, 0, 0, .34);
  animation: current-stage-signal 2.6s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.system-focus.is-focused .process-current::after { animation-play-state: running; }
.parallel-process {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  padding-top: 34px;
}
.parallel-process::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--line);
}
.parallel-process::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 26px;
  background: var(--line);
}
.parallel-process > .process-node { width: 100%; }
.parallel-process > .process-node::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 1px;
  height: 9px;
  background: var(--line);
}
.parallel-label {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: var(--faint);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
  padding-inline: 8px;
  background: #020202;
}
.process-output { width: min(100%, 340px); }
.process-flow {
  width: 1px;
  height: 22px;
  background: var(--line);
}
.process-flow span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.process-flow span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
  animation: process-data-flow 1.8s linear infinite;
  animation-play-state: paused;
}
.system-focus.is-focused .process-flow span::after { animation-play-state: running; }

.story-figure {
  width: 100%;
  min-width: 0;
  max-width: 920px;
  justify-self: end;
  margin: 0;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(0, 0, 0, .58);
}
.story-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.story-caption { display: none; }
.diagram-frame,
.soc-frame,
.soc-region,
.sensor-lens,
.output-ring,
.data-stream,
.processor-lines,
.config-path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.story-svg-label,
.story-svg-note,
.soc-label {
  fill: var(--muted);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.story-svg-note { fill: var(--faint); font-size: 15px; letter-spacing: 1.1px; }
.diagram-frame { stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.pose-marker { fill: var(--ink); stroke: #000; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pose-core { fill: #000; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }

.hardware-figure { max-width: 860px; }
.soc-frame { stroke: rgba(255, 255, 255, .58); stroke-width: 1.4; }
.soc-region { stroke: rgba(255, 255, 255, .2); stroke-width: 1; fill: rgba(255, 255, 255, .018); }
.logic-region { fill: rgba(255, 255, 255, .035); }
.soc-label { fill: var(--ink); font-size: 12px; letter-spacing: .7px; }
.processor-lines { stroke: rgba(255, 255, 255, .42); stroke-width: 1.2; }
.logic-dot { fill: var(--ink); }
.logic-tile {
  fill: rgba(255, 255, 255, .035);
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.logic-tile-active { animation: logic-reconfigure 3.6s ease-in-out infinite; }
.tile-two { animation-delay: -.6s; }
.tile-three { animation-delay: -1.2s; }
.tile-four { animation-delay: -1.8s; }
.tile-five { animation-delay: -2.4s; }
.tile-six { animation-delay: -3s; }
.sensor-lens { stroke: rgba(255, 255, 255, .62); stroke-width: 1.4; }
.sensor-core { fill: var(--ink); }
.data-stream,
.config-path {
  stroke: rgba(255, 255, 255, .6);
  stroke-width: 1.5;
  stroke-dasharray: 4 10;
}
.data-stream-flow { animation: dash-flow 1.8s linear infinite; }
.config-flow { animation: dash-flow 2.1s linear infinite reverse; }
.output-ring { stroke: rgba(255, 255, 255, .52); stroke-width: 1; }
.output-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: output-signal 2.6s ease-out infinite;
}

.contact { padding-block: 124px; }
.contact-row { display: grid; grid-template-columns: 1.15fr .65fr; gap: clamp(70px, 9vw, 150px); align-items: end; }
.contact-copy { padding-bottom: 5px; }
.contact-copy p { margin: 0 0 28px; color: var(--muted); font-size: 1.05rem; }
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .88rem;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.profile-links a:hover,
.profile-links a:focus-visible {
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .055);
}

footer { min-height: 150px; display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 30px; align-items: center; border-top: 1px solid var(--line); color: var(--faint); font-size: .82rem; }
.footer-brand { font-size: .9rem; }
footer p { margin: 0; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

@keyframes signal-pulse {
  0%, 26% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .34); }
  72%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

@keyframes point-travel {
  0%, 100% { transform: translateX(0); opacity: .2; }
  50% { transform: translateX(77px); opacity: 1; }
}

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

@keyframes field-scan {
  0%, 8% { transform: translateY(-62px); opacity: 0; }
  20%, 78% { opacity: 1; }
  92%, 100% { transform: translateY(300px); opacity: 0; }
}

@keyframes agriculture-route-one {
  0%, 100% { transform: translate(145px, 122px); }
  50% { transform: translate(145px, 384px); }
}
@keyframes agriculture-route-two {
  0%, 100% { transform: translate(360px, 378px); }
  50% { transform: translate(360px, 132px); }
}
@keyframes agriculture-route-three {
  0%, 100% { transform: translate(575px, 118px); }
  50% { transform: translate(575px, 382px); }
}

@keyframes ring-signal {
  0% { opacity: 0; transform: scale(.62); }
  24% { opacity: .76; }
  100% { opacity: 0; transform: scale(1.34); }
}

@keyframes inspect-one {
  0%, 100% { transform: translate(160px, 180px); }
  50% { transform: translate(184px, 154px); }
}
@keyframes inspect-two {
  0%, 100% { transform: translate(350px, 108px); }
  50% { transform: translate(378px, 92px); }
}
@keyframes inspect-three {
  0%, 100% { transform: translate(590px, 206px); }
  50% { transform: translate(566px, 176px); }
}
@keyframes beam-sweep {
  0%, 100% { transform: rotate(-13deg); opacity: .28; }
  50% { transform: rotate(13deg); opacity: .86; }
}

@keyframes monitor-one {
  0%, 100% { transform: translate(150px, 142px); }
  50% { transform: translate(172px, 126px); }
}
@keyframes monitor-two {
  0%, 100% { transform: translate(358px, 92px); }
  50% { transform: translate(382px, 106px); }
}
@keyframes monitor-three {
  0%, 100% { transform: translate(572px, 164px); }
  50% { transform: translate(548px, 142px); }
}
@keyframes debris-slide-one {
  0% { transform: translate(-18px, -26px); opacity: 0; }
  22% { opacity: .9; }
  100% { transform: translate(70px, 110px); opacity: 0; }
}
@keyframes debris-slide-two {
  0% { transform: translate(-14px, -22px); opacity: 0; }
  22% { opacity: .78; }
  100% { transform: translate(62px, 92px); opacity: 0; }
}
@keyframes debris-slide-three {
  0% { transform: translate(-10px, -18px); opacity: 0; }
  22% { opacity: .68; }
  100% { transform: translate(46px, 74px); opacity: 0; }
}
@keyframes warning-signal {
  0% { opacity: .72; transform: scale(.68); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes focus-agent-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(9px, -8px, 0) rotate(3deg); }
}

@keyframes selected-drone-signal {
  0% { opacity: .8; transform: scale(.58); }
  78%, 100% { opacity: 0; transform: scale(1.42); }
}

@keyframes current-stage-signal {
  0%, 100% { opacity: .18; transform: scale(.985); }
  50% { opacity: .72; transform: scale(1); }
}

@keyframes process-data-flow {
  0% { transform: translateY(0); opacity: 0; }
  18%, 82% { opacity: 1; }
  100% { transform: translateY(17px); opacity: 0; }
}

@keyframes bet-signal {
  0%, 100% { left: 0; opacity: .3; }
  50% { left: calc(100% - 7px); opacity: 1; }
}

@keyframes bet-signal-vertical {
  0%, 100% { top: 0; opacity: .3; }
  50% { top: calc(100% - 7px); opacity: 1; }
}

@keyframes diagram-flow-horizontal {
  0% { left: 0; opacity: 0; }
  18%, 78% { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}

@keyframes diagram-flow-vertical {
  0% { top: 0; opacity: 0; }
  18%, 78% { opacity: 1; }
  100% { top: calc(100% - 5px); opacity: 0; }
}

@keyframes logic-reconfigure {
  0%, 100% { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .18); }
  42%, 64% { fill: rgba(255, 255, 255, .82); stroke: rgba(255, 255, 255, .92); }
}

@keyframes output-signal {
  0% { opacity: .85; transform: scale(.65); }
  82%, 100% { opacity: 0; transform: scale(1.38); }
}

@media (min-width: 1081px) {
  .hero-copy { align-self: center; padding-left: clamp(0px, 1vw, 18px); }
  .hero-portrait { justify-self: end; width: 100%; }
}

@media (min-width: 901px) {
  .dual-bet-heading h2 { white-space: nowrap; }
}

@media (max-width: 1080px) {
  .site-header, footer, .scene-inner { width: min(calc(100% - 48px), var(--max-width)); }
  nav { gap: 18px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 850px; padding-top: 24px; }
  .hero-portrait { min-height: 520px; }
  .portrait-orbit { width: min(100%, 470px); }
  .collaboration-inner { grid-template-columns: 1fr; gap: 48px; }
  .collaboration-heading { max-width: 820px; }
  .collaboration-points { max-width: 860px; }
  .system-focus-inner,
  .vision-focus-inner,
  .hardware-focus-inner { grid-template-columns: 1fr; gap: 48px; }
  .story-copy { max-width: 820px; }
  .focus-one-visual,
  .hardware-figure,
  .interactive-diagram { width: min(100%, 900px); justify-self: start; }
}

@media (max-width: 900px) {
  .applications-showcase {
    min-height: 0;
    display: block;
    overflow: hidden;
    padding: 96px 0 72px;
    border-bottom: 1px solid var(--line);
    scroll-snap-align: start;
  }
  .application-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(48px, 8vw, 72px);
  }
  .applications-showcase-inner {
    width: min(calc(100% - 48px), var(--max-width));
    display: grid;
    gap: clamp(34px, 6vw, 48px);
  }
  .applications-title {
    position: static;
    font-size: clamp(3rem, 9vw, 4.6rem);
  }
  .applications-showcase .application-panel {
    min-height: 0;
    display: block;
    padding: 16px 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    scroll-snap-align: none;
    scroll-margin-top: 0;
  }
  .application-copy { margin-bottom: 16px; }
  .application-copy h3 { font-size: clamp(1.7rem, 4.8vw, 2.2rem); }
  .diagram-shell {
    width: 100%;
    margin-left: 0;
  }
  .application-diagram {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 72px; }
  .site-header, footer, .scene-inner { width: min(calc(100% - 32px), var(--max-width)); }
  .site-header {
    min-height: 72px;
    background: rgba(0, 0, 0, .94);
    backdrop-filter: none;
  }
  .brand > span:last-child { display: none; }
  nav { gap: 16px; }
  nav a { display: none; }
  nav .nav-contact { display: inline-flex; }
  .focus-scene { padding-block: 96px 64px; scroll-margin-top: 72px; }
  .motion-ready .focus-scene .scene-inner {
    filter: none;
    transition:
      opacity 700ms cubic-bezier(.2, .65, .25, 1),
      transform 760ms cubic-bezier(.2, .65, .25, 1);
  }
  .hero { padding-top: 96px; }
  .hero-inner { gap: 52px; }
  h1 { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .hero-portrait { min-height: 430px; }
  .portrait-orbit { width: min(100%, 390px); }
  .portrait-disc { width: 94%; height: 90%; }
  .portrait-orbit::before { inset-inline: 0; }
  .collaboration-inner { gap: 38px; }
  .collaboration-heading h2 { font-size: clamp(2.65rem, 11vw, 4rem); }
  .collaboration-point { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 22px 14px; }
  .collaboration-point-title { font-size: 1.28rem; }
  .point-signal { grid-column: 2; width: 82px; margin-top: 2px; }
  .applications-showcase { padding: 88px 0 64px; scroll-margin-top: 72px; }
  .applications-showcase-inner {
    width: min(calc(100% - 32px), var(--max-width));
    gap: 34px;
  }
  .applications-title {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }
  .application-grid { gap: 48px; }
  .application-copy h3 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .diagram-label { font-size: 18px; letter-spacing: 1.2px; }
  .diagram-note { font-size: 15px; letter-spacing: 1px; }
  .manifesto-statement { font-size: clamp(2.15rem, 10.5vw, 3.4rem); }
  .story-copy h2, .contact h2 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .system-focus-inner,
  .vision-focus-inner,
  .hardware-focus-inner { gap: 36px; }
  .dual-bet-inner { gap: 34px; }
  .bet-axis {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .bet-item {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 28px 18px;
  }
  .bet-connector {
    width: 1px;
    height: 46px;
  }
  .bet-connector span {
    top: 0;
    left: -3px;
    animation-name: bet-signal-vertical;
  }
  .story-lead { margin-top: 24px; font-size: 1.06rem; }
  .research-source { margin-top: 22px; }
  .vision-flow,
  .compute-flow {
    grid-template-columns: 1fr;
    padding: 22px 16px;
  }
  .vision-flow .flow-connector,
  .compute-flow > .flow-connector {
    width: 1px;
    height: 24px;
    justify-self: center;
  }
  .vision-flow .flow-connector::after,
  .compute-flow > .flow-connector::after {
    top: 0;
    left: -2px;
    animation-name: diagram-flow-vertical;
  }
  .diagram-node,
  .compute-edge-node { min-height: 104px; }
  .team-exchange {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-inline: 16px;
  }
  .team-exchange p {
    flex: 1 0 100%;
    margin: 2px 0 0;
  }
  .diagram-node.is-active,
  .process-node.is-active,
  .bet-item.is-active,
  .collaboration-point.is-active,
  .hardware-reason.is-active { transform: none; }
  .diagram-node > .node-inline-detail,
  .process-node > .node-inline-detail,
  .bet-item .node-inline-detail,
  .hardware-reason .node-inline-detail { font-size: .76rem; }
  .hardware-reasons { margin-top: 28px; }
  .soc-shell { padding: 14px; }
  .soc-components {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .soc-components .diagram-node { min-height: 104px; }
  .swarm-selection { margin-bottom: 4px; }
  .robot-process { width: 100%; }
  .process-node { min-height: 50px; padding-inline: 10px; }
  .process-node strong,
  .process-node > span { font-size: .86rem; }
  .process-node small { font-size: .6rem; }
  .parallel-process { gap: 8px; }
  .story-svg-label,
  .story-svg-note,
  .soc-label { display: none; }
  .story-caption {
    display: block;
    margin: 0;
    padding: 12px 4px 2px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
  }
  .contact-row { grid-template-columns: 1fr; gap: 42px; }
  .profile-links { display: grid; grid-template-columns: 1fr; }
  .profile-links a { justify-content: space-between; }
  footer { grid-template-columns: 1fr auto; padding-block: 40px; }
  footer > p:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .motion-ready .focus-scene .scene-inner {
    opacity: 1;
    filter: none;
    transform: none;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .diagram-motion { animation: none !important; }
  .point-signal::after { animation: none !important; }
}