/* ============================================================
   Argus — Product Page · Light Theme
   ============================================================ */

:root {
  --argus-paper:       #FFFFFF;
  --argus-paper-2:     #FAFAF8;
  --argus-paper-3:     #F2F2EE;
  --argus-ink:         #0A1428;
  --argus-ink-2:       #1A2540;
  --argus-ink-mute:    #5A627A;
  --argus-ink-faint:   #9CA3AF;
  --argus-line:        rgba(10, 20, 40, 0.08);
  --argus-line-strong: rgba(10, 20, 40, 0.16);
  --argus-cyan:        #0891B2;       /* desaturated for white bg */
  --argus-cyan-soft:   #67E8F9;
  --argus-cyan-glow:   rgba(34, 211, 238, 0.10);
  --argus-gold:        #B8860B;       /* deeper for white bg */
  --argus-gold-soft:   #D4AF37;

  --sev-critical:      #B91C1C;
  --sev-high:          #C2410C;
  --sev-medium:        #B8860B;

  --font-display: "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Menlo", monospace;

  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--argus-paper);
  color: var(--argus-ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body { font-size: 17px; line-height: 1.55; letter-spacing: -0.005em; }

a { color: var(--argus-ink); text-decoration: none; }
a:hover { color: var(--argus-cyan); }

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

.mono { font-family: var(--font-mono); letter-spacing: 0.01em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--argus-cyan);
}
.muted { color: var(--argus-ink-mute); }
.faint { color: var(--argus-ink-faint); }
.gold { color: var(--argus-gold); }
.cyan { color: var(--argus-cyan); }

/* ============================================================
   Top nav (sticky, glass-blur)
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--easing), background .25s var(--easing);
}

.nav.scrolled {
  border-bottom-color: var(--argus-line);
  background: rgba(255, 255, 255, 0.88);
}

.nav .brand {
  display: flex; align-items: center; gap: 10px;
}

.nav .brand img {
  width: 28px; height: 28px;
}

.nav .brand .word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--argus-ink);
}

.nav .links {
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav .links a:not(.btn) {
  font-size: 14px;
  font-weight: 500;
  color: var(--argus-ink-mute);
  letter-spacing: 0.005em;
  transition: color .2s var(--easing);
}
.nav .links a:not(.btn):hover { color: var(--argus-ink); }

@media (max-width: 720px) {
  .nav { padding: 14px 20px; }
  .nav .links { gap: 14px; }
}
@media (max-width: 460px) {
  .nav .links { gap: 12px; }
}

/* ============================================================
   Section primitives
   ============================================================ */

section {
  position: relative;
  padding: 110px 40px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

.section-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--argus-ink);
  margin: 0 0 22px;
  max-width: 18ch;
}

.section-lead {
  font-size: 1.18rem;
  color: var(--argus-ink-mute);
  max-width: 56ch;
  margin: 0 0 40px;
  line-height: 1.55;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid var(--argus-line-strong);
  background: transparent;
  color: var(--argus-ink);
  cursor: pointer;
  transition: transform .2s var(--easing), background .2s var(--easing), border-color .2s var(--easing);
}

.btn .arrow { transition: transform .2s var(--easing); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--argus-ink);
  color: var(--argus-paper);
  border-color: var(--argus-ink);
}
.btn-primary:hover { background: var(--argus-ink-2); color: var(--argus-paper); transform: translateY(-1px); }

.btn-ghost:hover { border-color: var(--argus-ink); }

.btn-sm {
  padding: 9px 16px;
  font-size: 13.5px;
  gap: 7px;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 140px 40px 80px;
  overflow: hidden;
  background: var(--argus-paper);
}

.hero-eye {
  position: absolute;
  inset: 0;
  background-image: url("../assets/hero-art.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.30;
  filter: grayscale(0.35);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 960px) {
  .hero-eye { background-position: center; opacity: 0.18; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 50%, var(--argus-cyan-glow), transparent 65%),
    radial-gradient(ellipse 30% 40% at 75% 50%, rgba(184, 134, 11, 0.06), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

.hero .container { z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.hero-copy .eyebrow { display: block; margin-bottom: 28px; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--argus-ink);
  margin: 0 0 8px;
}

.hero h1 .asi {
  display: block;
  color: var(--argus-cyan);
  font-weight: 500;
  font-size: 0.42em;
  letter-spacing: -0.005em;
  margin-top: 12px;
}

.hero .tagline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 400;
  color: var(--argus-ink-mute);
  margin: 24px 0 36px;
  max-width: 30ch;
  line-height: 1.35;
}

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

/* ============================================================
   Swarm — robots on a manufacturing line
   ============================================================ */

.swarm {
  background: var(--argus-paper);
  border-top: 1px solid var(--argus-line);
  text-align: center;
}

.swarm .eyebrow { display: block; margin-bottom: 20px; }
.swarm .section-h,
.swarm .section-lead { margin-left: auto; margin-right: auto; }

.swarm-stage {
  position: relative;
  width: 100%;
  max-width: 1120px;
  aspect-ratio: 1000 / 600;   /* JS keeps this in sync with the belt viewBox */
  margin: 16px auto 0;
  /* Floating on the page: no panel, no border, no boxed background. */
  background: transparent;
  overflow: visible;
}

/* ---- Conveyor belt (SVG, viewBox 0 0 1000 460) ---- */
.belt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.belt .belt-track {          /* dark steel edge */
  fill: none;
  stroke: #8295ab;
  stroke-width: 70;
  stroke-linejoin: round;
}
.belt .belt-rail {           /* belt surface */
  fill: none;
  stroke: #c9dcec;
  stroke-width: 60;
  stroke-linejoin: round;
}
.belt .belt-slats {          /* moving modular slats */
  fill: none;
  stroke: rgba(20, 44, 78, 0.22);
  stroke-width: 60;
  stroke-dasharray: 10 16;
  stroke-linecap: butt;
  animation: belt-move 5.5s linear infinite;
}
@keyframes belt-move { to { stroke-dashoffset: -260; } }

/* ---- Circulating code / binary data tiles ---- */
.belt-data {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.data-tile {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(9px, 1.1vw, 12px);
  line-height: 1;
  color: var(--argus-cyan-soft);
  background: var(--argus-ink);
  border: 1px solid rgba(103, 232, 249, 0.6);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(10, 20, 40, 0.25), 0 0 10px rgba(34, 211, 238, 0.25);
  white-space: nowrap;
  will-change: transform, top, left;
}
.data-tile.is-bin { color: var(--argus-gold-soft); border-color: rgba(212, 175, 55, 0.6); box-shadow: 0 2px 8px rgba(10, 20, 40, 0.25), 0 0 10px rgba(212, 175, 55, 0.25); }

/* ---- Robot stations around the belt ---- */
.swarm-bots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.robot {
  --accent: var(--argus-cyan);
  --ring: var(--argus-cyan);
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(82px, 12.5%, 140px);
  margin: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Default (horizontal) station positions; JS overrides per layout mode. */
.robot[data-name="Armin"] { --x: 28%; --y: 4%; }
.robot[data-name="Iris"]  { --x: 44%; --y: 1%; }
.robot[data-name="Vera"]  { --x: 56%; --y: 1%; }
.robot[data-name="Rex"]   { --x: 72%; --y: 4%; }
.robot[data-name="Tessa"] { --x: 28%; --y: 66%; }
.robot[data-name="Nyx"]   { --x: 44%; --y: 69%; }
.robot[data-name="Otto"]  { --x: 56%; --y: 69%; }
.robot[data-name="Zane"]  { --x: 72%; --y: 66%; }

.bot {
  width: 100%;
  animation: bot-bob 4.2s var(--easing) infinite;
  transition: transform .3s var(--easing), filter .3s var(--easing);
}
.robot:nth-child(2n) .bot { animation-delay: -1.1s; }
.robot:nth-child(3n) .bot { animation-delay: -2.2s; }
.robot:nth-child(4n) .bot { animation-delay: -3.1s; }

@keyframes bot-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Head */
.bot-head {
  position: relative;
  width: 70%;
  aspect-ratio: 1 / 0.92;
  margin: 0 auto -7%;
  background: linear-gradient(157deg, #ffffff 0%, #f3f6fa 55%, #e6ecf3 100%);
  border: 2px solid var(--argus-ink);
  border-radius: 50% 50% 44% 44% / 56% 56% 46% 46%;
  box-shadow:
    inset 0 6px 10px rgba(255, 255, 255, 0.9),
    inset 0 -6px 10px rgba(10, 20, 40, 0.07),
    0 8px 16px rgba(10, 20, 40, 0.12);
  z-index: 2;
}
/* Glossy top highlight */
.bot-head::before {
  content: "";
  position: absolute;
  top: 7%; left: 16%;
  width: 50%; height: 34%;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Side audio/ear pods */
.bot-head .ear {
  position: absolute;
  top: 34%;
  width: 9%; height: 30%;
  background: linear-gradient(#f4f7fb, #d8e1ec);
  border: 2px solid var(--argus-ink);
  border-radius: 40%;
  z-index: 1;
}
.bot-head .ear::after {
  content: "";
  position: absolute;
  inset: 28% 0;
  margin: auto;
  width: 46%; height: 30%;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 5px var(--accent);
  opacity: 0.85;
}
.bot-head .ear.l { left: -6%; }
.bot-head .ear.r { right: -6%; }
.bot-head .antenna {
  position: absolute;
  top: -16%;
  left: 50%;
  width: 5px; height: 5px;
  transform: translateX(-50%);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
  animation: antenna-pulse 2.4s ease-in-out infinite;
}
.bot-head .antenna::before {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 2px; height: 9px;
  transform: translateX(-50%);
  background: var(--argus-ink-2);
}
@keyframes antenna-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.bot-head .eye {
  position: absolute;
  top: 36%;
  width: 24%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 36% 30%, #3b4f7f 0%, #18244a 38%, #070d1f 72%);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--ring), inset 0 0 4px rgba(0, 0, 0, 0.6);
  transition: box-shadow .3s var(--easing);
  animation: blink 5.2s steps(1, end) infinite;
}
.bot-head .eye.l { left: 20%; }
.bot-head .eye.r { right: 20%; }
.bot-head .eye::before {             /* accent iris ring */
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 72%);
  opacity: 0.55;
}
.bot-head .eye::after {              /* catch-light */
  content: "";
  position: absolute;
  top: 16%; left: 22%;
  width: 30%; height: 30%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
}
.robot:nth-child(2n) .eye { animation-delay: -1.6s; }
.robot:nth-child(3n) .eye { animation-delay: -3.3s; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

.bot-head .mouth {
  position: absolute;
  bottom: 18%; left: 50%;
  width: 26%; height: 6%;
  transform: translateX(-50%);
  background: #0b1430;
  border-radius: 6px;
}

/* Body + chest screen (the "computer") */
.bot-body {
  position: relative;
  width: 100%;
  padding: 16% 8% 9%;
  background: linear-gradient(160deg, #ffffff, #e7edf4);
  border: 2px solid var(--argus-ink);
  border-radius: 24% 24% 30% 30% / 34% 34% 24% 24%;
  box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.7), 0 10px 18px rgba(10, 20, 40, 0.12);
  z-index: 1;
}
/* Neck between head and body */
.bot-body::before {
  content: "";
  position: absolute;
  top: -9%; left: 50%;
  width: 22%; height: 12%;
  transform: translateX(-50%);
  background: linear-gradient(#eef2f7, #d6dfe9);
  border: 2px solid var(--argus-ink);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  z-index: -1;
}
.screen {
  position: relative;
  height: 0;
  padding-bottom: 64%;
  background: #07101f;
  border: 1.5px solid #1d2c45;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
  transition: box-shadow .3s var(--easing), border-color .3s var(--easing);
}
/* Status LEDs at the top of the screen */
.screen::before {
  content: "";
  position: absolute;
  top: 7%; left: 9%;
  width: 5px; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 8px 0 0 rgba(255, 255, 255, 0.25), 16px 0 0 rgba(255, 255, 255, 0.15);
  z-index: 2;
}
.screen-code {
  position: absolute;
  inset: 18% 8% 26%;
  font-family: var(--font-mono);
  font-size: 6px;
  line-height: 1.5;
  text-align: left;
  color: rgba(103, 232, 249, 0.82);
  white-space: nowrap;
  overflow: hidden;
}
.screen-code span { display: block; overflow: hidden; text-overflow: clip; }
.screen-code .cursor { color: var(--argus-cyan-soft); animation: cursor-blink 1s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }

.screen-bar {
  position: absolute;
  left: 8%; right: 8%; bottom: 16%;
  height: 3px;
  background: rgba(103, 232, 249, 0.18);
  border-radius: 3px;
  overflow: hidden;
}
.screen-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 35%;
  background: var(--accent);
  border-radius: 3px;
  animation: scan-bar 2.6s var(--easing) infinite;
}
@keyframes scan-bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}
.screen-label {
  position: absolute;
  left: 0; right: 0; bottom: 5%;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 6.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Active station: data is passing, the robot "works" on it */
.robot.is-active .bot { transform: translateY(-6px); filter: drop-shadow(0 6px 10px rgba(8, 145, 178, 0.35)); }
.robot.is-active .screen {
  border-color: var(--accent);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5), 0 0 14px var(--accent);
}
.robot.is-active .eye { box-shadow: 0 0 0 3px var(--ring), 0 0 8px var(--ring); }

/* Caption: name + role */
.robot figcaption {
  margin-top: 8px;
  line-height: 1.25;
}
.bot-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: -0.01em;
  color: var(--argus-ink);
}
.bot-role {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(8px, 0.95vw, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Distinct faces per task ---- */
.robot[data-task="threat-modeling"] { --accent: var(--argus-gold); --ring: var(--argus-gold); }
.robot[data-task="threat-modeling"] .eye { top: 34%; border-radius: 46% 46% 50% 50%; }
.robot[data-task="threat-modeling"] .mouth { width: 30%; height: 4%; border-radius: 2px; }

.robot[data-task="vuln-research"] { --accent: var(--argus-cyan); --ring: var(--argus-cyan); }
.robot[data-task="vuln-research"] .eye.l { width: 28%; top: 32%; }   /* magnifier eye */
.robot[data-task="vuln-research"] .mouth { width: 12%; height: 12%; border-radius: 50%; bottom: 16%; }

.robot[data-task="verifying"] { --accent: #16A34A; --ring: #16A34A; }
.robot[data-task="verifying"] .mouth {
  width: 30%; height: 14%;
  background: transparent;
  border-bottom: 3px solid #0b1430;
  border-radius: 0 0 60% 60%;
}

.robot[data-task="reporting"] { --accent: #2563EB; --ring: #2563EB; }
.robot[data-task="reporting"] .eye { border-radius: 4px; }
.robot[data-task="reporting"] .mouth { width: 22%; border-radius: 2px; }

.robot[data-task="teaching"] { --accent: var(--argus-gold-soft); --ring: var(--argus-gold-soft); }
.robot[data-task="teaching"] .eye { width: 26%; top: 33%; }
.robot[data-task="teaching"] .mouth {
  width: 34%; height: 16%;
  background: transparent;
  border-bottom: 3px solid #0b1430;
  border-radius: 0 0 70% 70%;
}

/* Unknown agents: visor over eyes, glitchy redacted screen */
.robot[data-task="unknown"] { --accent: #8A93A6; --ring: #8A93A6; }
.robot[data-task="unknown"] .bot-head::after {
  content: "";
  position: absolute;
  top: 32%; left: 14%; right: 14%;
  height: 24%;
  background: #0b1430;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(138, 147, 166, 0.5);
  z-index: 3;
}
.robot[data-task="unknown"] .eye { opacity: 0; }
.robot[data-task="unknown"] .mouth { width: 18%; }
.robot[data-task="unknown"] .screen-code { color: rgba(138, 147, 166, 0.85); }
.robot[data-task="unknown"] .screen { animation: glitch 2.8s steps(2, end) infinite; }
.robot[data-task="unknown"] .screen-bar::after { background: #8A93A6; }
@keyframes glitch {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-1.5px); }
  94% { transform: translateX(1.5px); }
}

/* ---- Responsive ----
   <=720px JS switches to a VERTICAL belt with robots flanking the
   sides. Robots are made compact so four fit comfortably per side. */
@media (max-width: 980px) {
  .screen-code { font-size: 5px; }
  .screen-label { font-size: 5.5px; }
}
@media (max-width: 720px) {
  .robot { width: clamp(76px, 30%, 120px); }
  .bot-role { display: none; }
  .screen-code { display: none; }
  .screen-label { font-size: 5px; bottom: 22%; }
  .bot-name { font-size: 11px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .belt-slats, .bot, .eye, .antenna, .screen-bar::after,
  .screen-code .cursor, .robot[data-task="unknown"] .screen { animation: none !important; }
}

/* ============================================================
   Swarm lab — dark section with 3D agent art
   ============================================================ */

.swarm-lab {
  --lab-ink: #e8f4ff;
  --lab-ink-mute: rgba(200, 220, 240, 0.72);
  --lab-surface: #070f1f;
  --lab-surface-2: #0c1830;
  --lab-line: rgba(103, 232, 249, 0.14);
  --lab-glow: rgba(34, 211, 238, 0.35);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(8, 145, 178, 0.18), transparent 65%),
    linear-gradient(180deg, var(--lab-surface-2) 0%, var(--lab-surface) 42%, #050a14 100%);
  border-top: 1px solid var(--lab-line);
  padding: 100px 0 88px;
  color: var(--lab-ink);
  overflow: hidden;
}

.swarm-lab__header {
  text-align: center;
  margin-bottom: 36px;
}

.swarm-lab .eyebrow { color: var(--argus-cyan-soft); }
.swarm-lab .section-h {
  color: var(--lab-ink);
  margin-left: auto;
  margin-right: auto;
  max-width: 20ch;
}
.swarm-lab .section-lead {
  color: var(--lab-ink-mute);
  margin-left: auto;
  margin-right: auto;
}
.swarm-lab .section-lead .gold {
  color: var(--argus-gold-soft);
  font-weight: 600;
}

/* ---- 3D conveyor belt scene ---- */
.swarm-lab__belt-scene {
  perspective: 1100px;
  perspective-origin: 50% 38%;
  width: min(1120px, 94vw);
  margin: 0 auto;
  padding: 0 0 24px;
}

.swarm-lab .swarm-stage {
  position: relative;
  width: 100%;
  max-width: 1120px;
  aspect-ratio: 1000 / 600;
  margin: 0 auto;
  transform: rotateX(24deg);
  transform-style: preserve-3d;
  background: transparent;
  overflow: visible;
}

/* Floor shadow beneath the belt loop */
.belt-floor {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 72%;
  height: 28%;
  transform: translateX(-50%) rotateX(78deg);
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.12) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 72%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}

/* Dark 3D belt styling */
.swarm-lab .belt .belt-track {
  stroke: url(#beltEdgeGrad);
  stroke-width: 74;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
}
.swarm-lab .belt .belt-rail {
  stroke: url(#beltSurfGrad);
  stroke-width: 62;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.swarm-lab .belt .belt-slats {
  stroke: rgba(103, 232, 249, 0.22);
  stroke-width: 62;
  stroke-dasharray: 8 14;
  animation: belt-move 4.8s linear infinite;
}
.swarm-lab .belt .belt-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 62;
  stroke-dasharray: 40 200;
  animation: belt-shine 6s linear infinite;
}
@keyframes belt-shine { to { stroke-dashoffset: -240; } }

.swarm-lab .data-tile {
  background: rgba(7, 15, 31, 0.92);
  border-color: rgba(103, 232, 249, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 14px rgba(34, 211, 238, 0.3);
  z-index: 4;
}

/* Image-based robots around the belt */
.swarm-lab .robot--art {
  width: clamp(88px, 13%, 150px);
  z-index: 5;
}

.swarm-lab .robot-art {
  display: block;
  width: 100%;
  height: auto;
  animation: bot-bob 4.2s var(--easing) infinite;
  transition: transform .3s var(--easing), filter .3s var(--easing);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}
.swarm-lab .robot:nth-child(2n) .robot-art { animation-delay: -1.1s; }
.swarm-lab .robot:nth-child(3n) .robot-art { animation-delay: -2.2s; }
.swarm-lab .robot:nth-child(4n) .robot-art { animation-delay: -3.1s; }

.swarm-lab .robot.is-active .robot-art {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px var(--accent));
}

.swarm-lab .robot figcaption { margin-top: 6px; }
.swarm-lab .bot-name { color: var(--lab-ink); }
.swarm-lab .bot-role { color: var(--accent); }

@media (max-width: 720px) {
  .swarm-lab__belt-scene { perspective: 800px; }
  .swarm-lab .swarm-stage { transform: rotateX(18deg); }
  .swarm-lab .robot--art { width: clamp(76px, 30%, 120px); }
  .swarm-lab .bot-role { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .swarm-lab .belt-slats,
  .swarm-lab .belt-shine,
  .swarm-lab .robot-art { animation: none !important; }
}

/* ============================================================
   Product blurb
   ============================================================ */

.blurb {
  background: var(--argus-paper-2);
  border-top: 1px solid var(--argus-line);
  border-bottom: 1px solid var(--argus-line);
  padding: 90px 40px;
  text-align: center;
}

.blurb .container { max-width: 820px; }

.blurb .lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--argus-ink);
  margin: 0;
}
.blurb .lede strong { font-weight: 600; color: var(--argus-ink); }

.blurb-points {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 14px;
}

.blurb-points li {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--argus-ink-mute);
  padding-left: 1.1em;
  position: relative;
}

.blurb-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--argus-cyan);
}

.blurb-points strong {
  font-weight: 600;
  color: var(--argus-ink);
}

/* ============================================================
   Feed sections (POP + Drift)
   ============================================================ */

.feed {
  background: var(--argus-paper);
}
.feed-alt {
  background: var(--argus-paper-2);
  border-top: 1px solid var(--argus-line);
  border-bottom: 1px solid var(--argus-line);
}

.feed .eyebrow { display: block; margin-bottom: 20px; }

.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.feed-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 920px) { .feed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .feed-grid,
  .feed-grid-2 { grid-template-columns: 1fr; }
}

.feed-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--argus-line);
  border-radius: 18px;
  padding: 24px 24px 22px;
  background: var(--argus-paper);
  transition: border-color .25s var(--easing), transform .25s var(--easing), box-shadow .25s var(--easing);
}
.feed-card:hover {
  border-color: var(--argus-cyan);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.07);
}

.feed-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.feed-date {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--argus-ink-faint);
}

.sev {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--argus-paper);
}
.sev-critical { background: var(--sev-critical); }
.sev-high     { background: var(--sev-high); }
.sev-medium   { background: var(--sev-medium); }

.feed-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--argus-ink);
  margin: 0 0 10px;
}
.feed-card:hover h3 { color: var(--argus-cyan); }

.feed-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--argus-ink-mute);
  margin: 0 0 16px;
}

.feed-tags {
  margin-top: auto;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--argus-ink-faint);
}

.feed-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--argus-ink);
}
.feed-all .arrow { transition: transform .2s var(--easing); }
.feed-all:hover { color: var(--argus-cyan); }
.feed-all:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Booking CTA band
   ============================================================ */

.byteray {
  background: var(--argus-paper);
  border-top: 1px solid var(--argus-line);
  padding: 96px 40px;
}

.byteray-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.byteray .eyebrow { display: block; margin-bottom: 20px; }
.byteray .section-h,
.byteray .section-lead {
  margin-left: auto;
  margin-right: auto;
}

.byteray-free {
  color: var(--argus-gold);
  font-weight: 600;
}

.byteray .btn { margin-top: 12px; }

@media (max-width: 720px) {
  .byteray { padding: 72px 22px; }
}

/* ============================================================
   Footer
   ============================================================ */

footer.foot {
  background: var(--argus-paper);
  border-top: 1px solid var(--argus-line);
  padding: 36px 40px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--argus-ink-mute);
}

.foot-row {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.foot-tagline {
  font-style: italic;
  color: var(--argus-ink-mute);
}

.foot-meta {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--argus-ink-faint);
}

.foot-by {
  color: var(--argus-ink-mute);
  transition: color .2s var(--easing);
}
.foot-by:hover { color: var(--argus-cyan); }

.foot-sep { color: var(--argus-ink-faint); }

/* ============================================================
   Reveal-on-scroll helpers
   ============================================================ */

.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--easing), transform .9s var(--easing);
  will-change: opacity, transform;
}

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

/* Per-word scroll-paced reveal (used by reveal-words elements). */
.reveal-words .word {
  display: inline-block;
  opacity: 0.08;
  transform: translateY(8px);
  will-change: opacity, transform;
}
.reveal-words .word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal-up { opacity: 1; transform: none; }
}