/* ============================================================
   BOT FOUNDERS — SITE STYLES v3 (dark)
   Direction: dark neumorphic luxe surfaces (B) on the near-black
   mission-control canvas with OS graphics (A). Minimal, dynamic.
   Brand: Neue Montreal everywhere (Bold = headlines), signal #ED3228.
   ============================================================ */

@font-face { font-family: "Neue Montreal"; font-weight: 400; src: url("fonts/NeueMontreal-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Neue Montreal"; font-weight: 400; font-style: italic; src: url("fonts/NeueMontreal-Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Neue Montreal"; font-weight: 500; src: url("fonts/NeueMontreal-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Neue Montreal"; font-weight: 700; src: url("fonts/NeueMontreal-Bold.otf") format("opentype"); font-display: swap; }

:root {
  --bg: #000000;
  --panel-hi: #19212C;
  --panel-lo: #131A23;
  --well: #0C1118;
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.12);
  --txt: #F2F4F6;
  --txt-2: #9BA3AF;
  --txt-3: #5F6873;
  --signal: #ED3228;
  --signal-h: #FF463C;

  /* one family everywhere: Neue Montreal. Bold carries the headlines. */
  --display: "Neue Montreal", "Inter", -apple-system, sans-serif;
  --body: "Neue Montreal", "Inter", -apple-system, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --ease-out: cubic-bezier(.16, .84, .30, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  --container: 1200px;
  --r: 20px;
  --r-sm: 14px;

  /* full dual-direction neumorphic elevation, light source top-left */
  --soft: 12px 12px 28px rgba(0, 0, 0, 0.55), -10px -10px 24px rgba(255, 255, 255, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --soft-sm: 7px 7px 16px rgba(0, 0, 0, 0.5), -6px -6px 14px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sink: inset 5px 5px 12px rgba(0, 0, 0, 0.55), inset -4px -4px 10px rgba(255, 255, 255, 0.04);
  --sink-sm: inset 3px 3px 8px rgba(0, 0, 0, 0.55), inset -2px -2px 6px rgba(255, 255, 255, 0.045);
  --glow-red: 0 0 32px rgba(237, 50, 40, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--signal); color: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
  text-wrap: balance;
}
.eyebrow {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--txt-3);
  margin: 0 0 18px;
}
.section-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(31px, 3.9vw, 47px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.red { color: var(--signal); }
.mono { font-family: var(--mono); font-size: 15.5px; }
.glowtext { text-shadow: 0 0 36px rgba(237, 50, 40, 0.5); }

/* sacred scribble: one key word per page */
.scribble { position: relative; white-space: nowrap; }
.scribble::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%; bottom: -0.08em;
  height: 0.18em;
  background: url("logos/scribble-underline.svg") no-repeat center / 100% 100%;
  filter: drop-shadow(0 0 8px rgba(237, 50, 40, 0.6));
  pointer-events: none;
}

/* ---------- surfaces ---------- */
.panel {
  background: linear-gradient(145deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--soft);
}
.panel-sm {
  background: linear-gradient(145deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--soft-sm);
}
.well {
  background: var(--well);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-sm);
  box-shadow: var(--sink);
}

/* spotlight: JS sets --mx/--my; .glow div injected by main.js */
.spot { position: relative; overflow: hidden; }
.spot .glow {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(237, 50, 40, 0.14), transparent 45%);
}
.spot:hover .glow { opacity: 1; }
.spot > :not(.glow) { position: relative; z-index: 1; }

/* border beam */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.beam { position: relative; }
.beam::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 0% 72%, rgba(237, 50, 40, 0.95) 84%, transparent 96%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: beam-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes beam-spin { to { --angle: 360deg; } }

/* ---------- buttons ---------- */
.btn-signal {
  /* primary action: white on the dark canvas. Red stays an accent, not a button. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #F2F4F6;
  color: #10161E;
  font-weight: 500;
  font-size: 18.5px;
  padding: 16px 30px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 7px 7px 16px rgba(0, 0, 0, 0.5), -6px -6px 14px rgba(255, 255, 255, 0.05), 0 0 26px rgba(255, 255, 255, 0.07);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn-signal:hover { background: #FFFFFF; box-shadow: 7px 7px 16px rgba(0, 0, 0, 0.5), -6px -6px 14px rgba(255, 255, 255, 0.05), 0 0 36px rgba(255, 255, 255, 0.12); }
.btn-signal:active { transform: scale(0.98); }

.btn-soft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, var(--panel-hi), var(--panel-lo));
  color: var(--txt);
  font-weight: 500;
  font-size: 18.5px;
  padding: 16px 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--soft-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-soft:hover { box-shadow: var(--soft); }
.btn-soft:active { transform: scale(0.98); box-shadow: var(--sink-sm); }

.btn-signal:focus-visible, .btn-soft:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ---------- topbar: centered logo only ---------- */
.topbar {
  position: relative;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 30px 24px 0;
}
.topbar img { height: 37px; width: auto; }

/* floating header: appears on scroll past the hero (desktop only). No
   background, logo left + CTA right. Container ignores pointer events so the
   transparent middle never blocks the page; only the logo + CTA are clickable. */
.float-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.float-header.show { opacity: 1; transform: translateY(0); }
.float-header.show .fh-logo { pointer-events: auto; }
.fh-logo img { height: 26px; width: auto; display: block; }
.fh-cta {
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.float-header.show .fh-cta { pointer-events: auto; }
.fh-cta.hide { opacity: 0; transform: translateY(-8px) scale(0.96); pointer-events: none; }
@media (max-width: 720px) {
  .float-header { display: none; } /* mobile uses the sticky bottom CTA */
}

/* ---------- nav: floating pill (unused since v14) ---------- */
.nav {
  position: sticky;
  top: 16px;
  z-index: 50;
  max-width: 820px;
  margin: 16px auto 0;
  padding: 0 16px;
}
.nav-pill {
  /* iOS glass: translucent, heavy blur, saturation boost, top highlight */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(22, 28, 38, 0.48);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  padding: 10px 12px 10px 22px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 24px; width: auto; }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  text-decoration: none;
  font-size: 17px;
  color: var(--txt-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--txt); }
.nav-cta {
  display: inline-flex;
  background: #F2F4F6;
  color: #10161E;
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.45), -3px -3px 8px rgba(255, 255, 255, 0.05);
  transition: background var(--dur-base) var(--ease-out);
}
.nav-cta:hover { background: #FFFFFF; }
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--txt); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 36px 0 88px;
}
.hero::before {
  /* dot grid, fading out from the top center */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 70%);
  pointer-events: none;
}
.hero-ambient {
  /* cursor-following ambient glow, JS-driven */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(640px circle at var(--mx, 50%) var(--my, 28%), rgba(237, 50, 40, 0.07), transparent 55%);
}
.hero-inner { position: relative; max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* split hero in a framed card: copy left, 3D scene right.
   The card gives the robot a bottom edge that reads intentional. */
.hero-frame { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; }
.hero-card {
  position: relative;
  background: linear-gradient(180deg, #0D1219 0%, #070A0F 100%);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: clip;
  box-shadow: var(--soft);
  min-height: 640px;
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  text-align: left;
  padding-left: 72px;
  position: relative;
}
.hero-split .hero-copy { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 72px; }
.hero-split .hero-sub { margin: 26px 0 36px; }
.hero-split .hero-actions { justify-content: flex-start; }
/* the scene canvas is transparent and spans the full card height, shifted
   right so the robot stands on the card's right side. It is card-sized, so
   the woken camera has room for every pose: nothing ever clips mid-card. */
.hero-3d {
  position: static;
  align-self: stretch;
  min-height: 640px;
  height: 100%;
}
.hero-3d canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}
.hero-3d.loaded canvas { opacity: 1; }
.hero-3d-fallback {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  transition: opacity 600ms var(--ease-out);
}
.hero-3d.loaded .hero-3d-fallback { opacity: 0; pointer-events: none; }
.hero-3d-fallback .robot-stage { margin: 0; }

/* aceternity spotlight sweep, ported to vanilla (clipped by the hero card) */
.spotlight {
  position: absolute;
  top: -40%;
  left: 10%;
  height: 169%;
  width: 138%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: spotlight 2s ease 0.75s 1 forwards;
}
@keyframes spotlight {
  0% { opacity: 0; transform: translate(-72%, -62%) scale(0.5); }
  100% { opacity: 1; transform: translate(-50%, -40%) scale(1); }
}
/* ---------- robot mascot ----------
   Each .visual tries its Higgsfield render first (site/images/*.png).
   If the file is missing, the built-in SVG robot shows instead, so
   dropping renders into images/ upgrades the site with zero code. */
.visual { position: relative; display: grid; place-items: center; }
.visual > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.visual.no-img > img { display: none; }
.visual .robot { display: none; }
.visual.no-img .robot { display: block; }

.robot-stage {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  margin: 0 auto 40px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--panel-hi), var(--panel-lo));
  border: 1px solid var(--line);
  box-shadow: var(--soft);
}
.robot-stage .visual { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; }
.robot-stage .robot { width: 104px; height: 104px; }
.robot-stage .mark { height: 78px; width: auto; filter: drop-shadow(0 0 16px rgba(237, 50, 40, 0.5)); }
.robot-stage--sm { width: 120px; height: 120px; margin-bottom: 32px; }
.robot-stage--sm .visual { width: 92px; height: 92px; }
.robot-stage--sm .robot { width: 76px; height: 76px; }
.robot-stage--sm .mark { height: 68px; width: auto; filter: drop-shadow(0 0 14px rgba(237, 50, 40, 0.5)); }

/* robot anatomy (SVG). Head fill comes from each SVG's own gradient. */
.robot .head { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.robot .strip { fill: #07090C; }
.robot .eye {
  fill: var(--signal);
  filter: drop-shadow(0 0 6px rgba(237, 50, 40, 0.9));
  animation: scan 3.2s var(--ease-out) infinite alternate;
}
@keyframes scan {
  from { transform: translateX(0); }
  to { transform: translateX(46px); }
}
.robot .eye-glow {
  fill: rgba(237, 50, 40, 0.22);
  animation: scan 3.2s var(--ease-out) infinite alternate;
}
.hero-h1 { font-size: clamp(45px, 6.6vw, 95px); }
.hero-sub {
  color: var(--txt-2);
  font-size: 20.5px;
  line-height: 1.65;
  max-width: 540px;
  margin: 26px auto 36px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 44px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--txt-3);
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--well);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--sink);
}
.hero-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- OS visual ---------- */
.os { max-width: 980px; margin: 0 auto; padding: 0 24px 24px; display: grid; gap: 16px; position: relative; }
.console { padding: 0; overflow: hidden; }
.console-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.console-bar .d {
  width: 11px; height: 11px; border-radius: 50%;
  border: none;
}
.console-bar .d:nth-of-type(1) { background: #FF5F57; }
.console-bar .d:nth-of-type(2) { background: #FEBC2E; }
.console-bar .d:nth-of-type(3) { background: #28C840; }
.console-bar .title {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--txt-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-bar .pill {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 13.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(237, 50, 40, 0.5);
  color: var(--signal);
}
.console-body {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 2.2;
  padding: 18px 22px;
  min-height: 150px;
  color: var(--txt-2);
  text-align: left;
}
.console-body .ok { color: #C9CED6; }
.console-body .accent { color: var(--signal); }
.console-body .dim { color: var(--txt-3); }
.caret {
  display: inline-block;
  width: 7px; height: 15px;
  background: var(--signal);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.agent { padding: 18px 20px; text-align: left; }
.agent .nm { font-family: var(--mono); font-size: 15.5px; color: var(--txt); }
.agent .st { font-family: var(--mono); font-size: 14px; color: var(--txt-3); margin-top: 7px; }
.agent .st b { color: var(--signal); font-weight: 400; }

/* ---------- ticker: high-visibility band ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  margin-top: 110px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: mq 40s linear infinite;
  font-family: var(--body);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: #C9CED6;
}
.ticker-set {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
  flex: none;
  white-space: nowrap;
}
.ticker-track .plus {
  color: var(--signal);
  font-weight: 400;
  text-shadow: 0 0 14px rgba(237, 50, 40, 0.5);
}

/* live status pill atop the OS section */
.os-status { display: flex; justify-content: center; padding-top: 110px; margin-bottom: 30px; }
.os-status .hero-status { margin-top: 0; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- sections ----------
   Each section gets the room to land as its own moment on scroll. */
.section { padding: clamp(150px, 20vh, 230px) 0; }
.section-head { max-width: 640px; margin: 0 auto 80px; text-align: center; }

/* stats: count-up */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { padding: 8px 36px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 72px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat .n.red { text-shadow: 0 0 30px rgba(237, 50, 40, 0.4); }
.stat .lbl { font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-3); margin: 14px 0 8px; }
.stat p { color: var(--txt-2); font-size: 17.5px; line-height: 1.6; margin: 0; max-width: 280px; }

/* what you get: bento access grid */
.access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.access-card { padding: 30px 28px; transition: transform var(--dur-base) var(--ease-out); }
.access-card:hover { transform: translateY(-3px); }
.access-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 44px 40px;
}
.access-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--well);
  box-shadow: var(--sink);
  margin-bottom: 18px;
}
.access-title { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.015em; }
.access-title.sm { font-size: 20px; margin-top: 18px; }
.access-body { color: var(--txt-2); font-size: 18px; line-height: 1.65; margin: 12px 0 0; }
.access-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--well);
  box-shadow: var(--sink);
  color: var(--signal);
}
.access-ico svg { width: 21px; height: 21px; }
.access-os {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 2.1;
  padding: 24px 26px;
  color: var(--txt-2);
}
.access-os .dim { color: var(--txt-3); }
.access-os .accent { color: var(--signal); }

/* audience: two separate boxes */
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.audience-box { padding: 36px; }
.audience-box .col-label { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0 0 20px; }
.audience-box .col-label.muted { color: var(--txt-3); }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.list li { display: flex; gap: 12px; align-items: flex-start; color: var(--txt-2); font-size: 18px; line-height: 1.55; }
.list .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.list .ico svg { width: 18px; height: 18px; stroke-width: 2; }
.list .yes svg { stroke: var(--signal); }
.list .no svg { stroke: var(--txt-3); }

/* case study */
.case { padding: 38px 36px; max-width: 880px; margin: 0 auto; }
.case-head { font-family: var(--mono); font-size: 14.5px; color: var(--txt-3); margin-bottom: 26px; letter-spacing: 0.04em; }
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.case-stat {
  background: var(--well);
  box-shadow: var(--sink);
  border-radius: var(--r-sm);
  padding: 22px 14px;
  text-align: center;
}
.case-stat .v { font-weight: 700; font-size: 34px; letter-spacing: -0.02em; line-height: 1; }
.case-stat .v.red { color: var(--signal); text-shadow: 0 0 22px rgba(237, 50, 40, 0.4); }
.case-stat .k { font-size: 15px; color: var(--txt-3); margin-top: 9px; line-height: 1.4; }
.case-line { color: var(--txt-2); font-size: 19px; line-height: 1.7; margin: 0; }
.proof-note { text-align: center; font-family: var(--mono); font-size: 15px; color: var(--txt-3); margin-top: 32px; }

/* founder video below the hero */
.video-block {
  max-width: 880px;
  margin: 72px auto 0;
  padding: 0 24px;
}

/* founder portrait: circular slot, image swaps in when uploaded */
.portrait-wrap { display: grid; place-items: center; }
.portrait {
  position: relative;
  width: min(360px, 82%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, var(--panel-hi), var(--panel-lo));
  border: 1px solid var(--line);
  box-shadow: var(--soft);
  display: grid;
  place-items: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait.no-img img { display: none; }
.portrait-placeholder { display: none; text-align: center; color: var(--txt-3); }
.portrait.no-img .portrait-placeholder { display: block; }
.portrait-placeholder svg { width: 64px; height: 64px; margin: 0 auto 14px; opacity: 0.6; }
.portrait-placeholder p { font-family: var(--mono); font-size: 13px; margin: 0; }

/* founder */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.founder .copy p { color: var(--txt-2); font-size: 19px; line-height: 1.7; margin: 0 0 16px; }
.founder .sig { font-family: var(--display); font-weight: 700; font-size: 19px; margin-top: 24px; }
.founder .sig .role { display: block; font-family: var(--mono); font-weight: 400; font-size: 14.5px; color: var(--txt-3); margin-top: 6px; }
.video-frame { padding: 12px; }
.video-inner {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  background: var(--well);
  box-shadow: var(--sink);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.video-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { text-align: center; padding: 24px; }
.video-placeholder .play {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--signal);
  display: grid; place-items: center;
  margin: 0 auto 14px;
  box-shadow: var(--glow-red);
}
.video-placeholder .play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.video-placeholder p { margin: 0; font-family: var(--mono); font-size: 14.5px; color: var(--txt-3); }

/* pricing */
.pricing { max-width: 560px; margin: 0 auto; }
.price-card { padding: 44px 40px; text-align: center; border-radius: var(--r); }
.price-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--well);
  box-shadow: var(--sink);
  margin-bottom: 26px;
}
.price-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-num .per { font-size: 20px; font-weight: 400; font-family: var(--body); color: var(--txt-3); letter-spacing: 0; }
.price-note { color: var(--txt-3); font-size: 16.5px; margin: 14px 0 30px; }
.price-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 22px 24px;
  border-radius: var(--r-sm);
  background: var(--well);
  box-shadow: var(--sink);
  display: grid;
  gap: 13px;
  text-align: left;
}
.price-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17.5px; color: var(--txt-2); line-height: 1.55; }
.price-list svg { flex: none; width: 15px; height: 15px; stroke: var(--signal); stroke-width: 2.2; margin-top: 3px; }
.price-terms { font-size: 15.5px; color: var(--txt-3); margin-top: 18px; line-height: 1.65; }
.price-nontech {
  font-size: 17px;
  font-weight: 500;
  color: #C9CED6;
  margin: -8px 0 28px;
  line-height: 1.55;
}

/* FAQ: animated accordion */
.faq-list { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.faq-item { overflow: hidden; }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--txt);
  text-align: left;
}
.faq-q:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: var(--r-sm); }
.faq-plus {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--well);
  box-shadow: var(--sink);
  display: grid;
  place-items: center;
  font-family: var(--body);
  font-weight: 400;
  font-size: 20px;
  color: var(--txt-3);
  transition: transform 320ms var(--ease-out), color 320ms var(--ease-out);
}
.faq-item.open .faq-plus { transform: rotate(45deg); color: var(--signal); }
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 340ms var(--ease-out), opacity 300ms var(--ease-out);
}
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; opacity: 1; }
.faq-a-inner { overflow: hidden; min-height: 0; }
.faq-a {
  padding: 0 24px 22px;
  color: var(--txt-2);
  font-size: 17.5px;
  line-height: 1.65;
  max-width: 640px;
  transform: translateY(-6px);
  transition: transform 340ms var(--ease-out);
}
.faq-item.open .faq-a { transform: translateY(0); }

/* final cta */
.final {
  text-align: center;
  padding: clamp(180px, 26vh, 280px) 0;
  position: relative;
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(237, 50, 40, 0.12), transparent 70%);
  pointer-events: none;
}
.final .inner { position: relative; }
.final p { color: var(--txt-2); max-width: 460px; margin: 22px auto 36px; font-size: 19.5px; line-height: 1.65; }
.final .small-note { display: block; font-family: var(--mono); font-size: 14.5px; color: var(--txt-3); margin-top: 20px; }

/* footer */
.footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 40px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-inner img { height: 26px; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; font-size: 16.5px; color: var(--txt-3); }
.footer-links a:hover { color: var(--txt-2); }
.footer-meta { font-family: var(--mono); font-size: 14.5px; color: var(--txt-3); }
.footer-meta a { color: var(--txt-3); text-decoration: none; }
.footer-meta a:hover { color: var(--txt-2); }
.footer-disclaimer {
  width: 100%;
  margin: 26px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--txt-3);
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- apply page ---------- */
.page-head { text-align: center; padding: 84px 0 0; position: relative; }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 25%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 25%, transparent 70%);
  pointer-events: none;
}
.page-head .inner { position: relative; }
.page-head .display { font-size: clamp(43px, 6.2vw, 87px); }
.page-head .lede { font-size: 20px; color: var(--txt-2); line-height: 1.65; max-width: 520px; margin: 24px auto 0; }

.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: start;
  margin-top: 72px;
}
/* sticky price card on desktop only; iOS Safari mishandles it stacked */
@media (min-width: 981px) {
  .apply-grid .price-card { position: sticky; top: 96px; }
}

/* application form: light surface so it stands out on the dark page */
.form-card {
  padding: 38px 34px;
  background: linear-gradient(180deg, #F7F8FA 0%, #E9ECF0 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.form-card .eyebrow { color: #6A727F; }
.form-card .section-h { color: #10161E; }
.form-card p { color: #3D4654 !important; }
.form-card .form-row label { color: #1A222D; }
.form-card .form-row .hint { color: #6A727F; }
.form-card .field {
  background: #FFFFFF;
  border: 1px solid #D8DCE2;
  box-shadow: inset 0 2px 5px rgba(17, 24, 32, 0.06);
  color: #10161E;
}
.form-card .field:focus { border-color: var(--signal); }
.form-card .field::placeholder { color: #9BA3AF; }
.form-card .fieldset { border: 1px solid #D8DCE2; }
.form-card .fieldset legend { color: #3D4654; }
.form-card .form-footnote { color: #6A727F; }
/* 3-step form */
.step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.step-count { font-family: var(--mono); font-size: 13px; color: #6A727F; }
.step-dots { display: inline-flex; gap: 7px; }
.sdot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #D8DCE2;
  transition: background 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.sdot.on { background: var(--signal); transform: scale(1.15); }
.form-step { display: none; }
.form-step.active {
  display: grid;
  gap: 20px;
  animation: step-in 360ms var(--ease-out);
}
@keyframes step-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
.step-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}
.step-back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 500;
  color: #6A727F;
  padding: 12px 16px;
}
.step-back:hover { color: #10161E; text-decoration: underline; text-underline-offset: 4px; }

select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236A727F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.form-grid { display: grid; gap: 20px; }
.form-row { display: grid; gap: 8px; }
.form-row label { font-size: 16.5px; font-weight: 500; }
.form-row .hint { font-size: 15px; color: var(--txt-3); }
.field {
  width: 100%;
  background: var(--well);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-sm);
  box-shadow: var(--sink);
  font-family: var(--body);
  font-size: 18px;
  color: var(--txt);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out);
}
.field:focus { border-color: var(--signal); }
.field::placeholder { color: var(--txt-3); }
textarea.field { resize: vertical; min-height: 100px; }
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin: 0;
  padding: 20px;
  display: grid;
  gap: 14px;
}
.fieldset legend { font-size: 16px; font-weight: 500; color: var(--txt-2); padding: 0 8px; }
.form-error { color: var(--signal); font-size: 16px; display: none; }
.form-error.show { display: block; }
.form-footnote { font-size: 15.5px; color: var(--txt-3); margin: 16px 0 0; line-height: 1.6; }

/* ---------- liquid metal button (text variant) ----------
   Vanilla port of the @paper-design liquid-metal shader button.
   The shader ring loads from CDN at runtime; the conic gradient
   below is the no-WebGL fallback so the button always looks metal. */
.lm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 30px;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--body);
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.3),
    0px 36px 14px 0px rgba(0, 0, 0, 0.02),
    0px 20px 12px 0px rgba(0, 0, 0, 0.08),
    0px 9px 9px 0px rgba(0, 0, 0, 0.12),
    0px 2px 5px 0px rgba(0, 0, 0, 0.15);
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: clip;
}
.lm-btn:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.4),
    0px 12px 6px 0px rgba(0, 0, 0, 0.05),
    0px 8px 5px 0px rgba(0, 0, 0, 0.1),
    0px 4px 4px 0px rgba(0, 0, 0, 0.15),
    0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}
.lm-btn:active { transform: translateY(1px) scale(0.98); }
.lm-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.lm-shader {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  overflow: hidden;
  background: conic-gradient(from 200deg, #6E767F, #DDE2E8, #4A5158, #C8CED6, #5A626B, #E8ECF1, #6E767F);
}
.lm-shader canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 100px !important;
}
.lm-core {
  /* white glass: the liquid metal ring frosts through it */
  position: absolute;
  inset: 2px;
  border-radius: 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 100%);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  z-index: 2;
}
.lm-btn:active .lm-core {
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.18), inset 0px 1px 2px rgba(0, 0, 0, 0.12);
}
.lm-label {
  position: relative;
  z-index: 3;
  font-size: 17px;
  font-weight: 500;
  color: #10161E;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.lm-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 3;
  animation: lm-ripple 0.6s ease-out;
}
@keyframes lm-ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* ---------- gradient apply button ----------
   From Uiverse.io by dexter-st, recolored to the Bot Founders palette
   (signal red core, ink layer, white border) and sized to our scale. */
.btn-wrapper {
  --rad: 32px;
  --color-wrapper-border: rgba(255, 255, 255, 0.9);
  --color-btn-bg: #ED3228;
  --color-btn-text: #000;
  --color-btn-text-shadow: #fff;
  --color-btn-inset-shadow: #3A4556;
  --color-layer-a: #fff;
  --color-layer-b: #1A2230;
  --color-overlay-text: #000;
  --color-overlay-glow: #fff;
  --color-overlay-shadow: rgba(0, 0, 0, 0.27);
  --color-overlay-highlight: rgba(255, 255, 255, 0.33);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  overflow-clip-margin: 4px;
  border: 2px solid var(--color-wrapper-border);
  border-radius: var(--rad);
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 600;
  /* blend base: color-dodge needs a non-black backdrop to produce the glow */
  background-color: #10161E;
  filter: saturate(0.65) brightness(1.8);
  cursor: pointer;
  text-decoration: none;
}
.gradient-btn {
  position: relative;
  z-index: -1;
  display: inline-block;
  padding: 14px 34px;
  border: none;
  border-radius: var(--rad);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0.08em;
  color: var(--color-btn-text);
  background-color: var(--color-btn-bg);
  background-size: 200% 200%;
  box-shadow: inset 0 0 10px 9px var(--color-btn-inset-shadow);
  text-shadow: 0 1px 3px var(--color-btn-text-shadow);
  cursor: pointer;
  mix-blend-mode: color-dodge;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.gradient-btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--rad);
  background-size: 200% 200%;
  mix-blend-mode: difference;
  z-index: 1;
}
.gradient-layer {
  position: absolute;
  pointer-events: none;
  left: -160px;
  width: 500%;
  aspect-ratio: 1;
  background: radial-gradient(
    ellipse at 65% 180%,
    var(--color-layer-a), var(--color-layer-b),
    var(--color-layer-a), var(--color-layer-b),
    var(--color-layer-a), var(--color-layer-b),
    var(--color-layer-a), var(--color-layer-b),
    var(--color-layer-a), var(--color-layer-b),
    var(--color-layer-a)
  );
  mix-blend-mode: difference;
  animation: btn-rotate 8s linear infinite;
}
.gradient-layer:last-of-type { mix-blend-mode: color-dodge; }
@keyframes btn-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.text-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  padding: 14px 34px;
  border-radius: var(--rad);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0.08em;
  color: var(--color-overlay-text);
  text-shadow: 0 0 4px var(--color-overlay-glow);
  box-shadow:
    inset 0 -4px 4px 0 var(--color-overlay-shadow),
    inset 0 4px 4px 0 var(--color-overlay-highlight);
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
  animation: btn-opacity-pulse 5s ease infinite;
}
.btn-wrapper:hover .text-overlay { transform: scale(1.1); }
.btn-wrapper:hover .gradient-btn { color: #0000; text-shadow: 0 0 0 #0000; }
.btn-wrapper:active .text-overlay { transform: scale(0.95); }
.btn-wrapper:active .gradient-btn { color: #0000; text-shadow: 0 0 0 #0000; }
.btn-wrapper:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.light {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 50px;
  width: 80%;
  height: 1.9rem;
  aspect-ratio: 1;
  background-color: #fff5;
  filter: blur(5px);
  animation: btn-pulse 3s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}
@keyframes btn-opacity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* mobile-only hero passage: hidden on desktop */
.hero-sub-mobile { display: none; }

/* tilt pre-prompt chip (iOS only, injected by main.js) */
.tilt-ask {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  background: rgba(22, 28, 38, 0.6);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: tilt-ask-in 500ms var(--ease-out) 1.2s both;
}
@keyframes tilt-ask-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tilt-ask-txt { font-size: 14.5px; color: #C9CED6; }
.tilt-yes {
  border: none;
  cursor: pointer;
  background: #F2F4F6;
  color: #10161E;
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
}
.tilt-no {
  border: none;
  cursor: pointer;
  background: none;
  color: #5F6873;
  font-size: 14px;
  padding: 8px 10px;
}

/* ---------- mobile sticky CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(96px);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms var(--ease-out), opacity 360ms var(--ease-out);
}
.sticky-cta.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta .lm-btn {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.35),
    0px 18px 36px rgba(0, 0, 0, 0.6),
    0px 4px 10px rgba(0, 0, 0, 0.4);
}

/* ---------- scroll effects ---------- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--signal);
  box-shadow: 0 0 12px rgba(237, 50, 40, 0.6);
  z-index: 90;
  pointer-events: none;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 100ms; }
.reveal-d2 { transition-delay: 200ms; }
.reveal-d3 { transition-delay: 300ms; }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }

/* word-by-word heading reveal: spans injected by main.js */
.wordfx .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(8px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out), filter 560ms var(--ease-out);
  transition-delay: calc(var(--i) * 70ms);
}
.wordfx.in .w { opacity: 1; transform: none; filter: blur(0); }

/* scroll-driven 3D settle on the console (21st container-scroll pattern) */
.tilt-wrap { perspective: 1100px; }
.tilt { transform: rotateX(var(--tilt, 0deg)); transform-origin: center top; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .beam::before { animation: none; }
  .hero-status .dot, .caret { animation: none; }
  .robot .eye, .robot .eye-glow { animation: none; transform: translateX(23px); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .wordfx .w { opacity: 1; transform: none; filter: none; transition: none; }
  .tilt { transform: none; }
  .gradient-layer, .light, .text-overlay { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .section { padding: 120px 0; }
  .section-head { margin-bottom: 56px; }
  .hero-split { display: flex; flex-direction: column; text-align: center; padding: 44px 28px 0; }
  .hero-split .hero-copy { padding: 0; max-width: none; }
  .hero-split .hero-actions { justify-content: center; }
  .hero-split .hero-sub { margin: 26px auto 36px; }
  .hero-card { min-height: 0; }
  /* mobile robot: head to waist under the copy, clipped by the card bottom */
  .hero-3d { position: relative; height: 400px; min-height: 0; margin-top: 12px; }
  .hero-3d canvas { display: block; position: absolute; inset: 0; left: 0; width: 100%; height: 100%; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .stat { border-left: 0; padding: 0; }
  .agents { grid-template-columns: minmax(0, 1fr); }
  .audience-grid { grid-template-columns: minmax(0, 1fr); }
  .access-grid { grid-template-columns: minmax(0, 1fr); }
  .access-featured { grid-template-columns: minmax(0, 1fr); padding: 32px 28px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .reveal-left, .reveal-right { transform: translateY(24px); }
  .founder, .apply-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 720px) {
  .nav { top: 12px; padding: 0 12px; }
  .nav-pill { padding: 8px 10px 8px 16px; }
  .nav-logo img { height: 20px; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 12px;
    right: 12px;
    background: rgba(17, 23, 31, 0.97);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--soft-sm);
    flex-direction: column;
    gap: 0;
    padding: 10px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; }
  .nav-burger { display: flex; }
  .nav-cta { padding: 9px 16px; font-size: 16px; }
  .hero { padding: 24px 0 0; }
  .hero-h1 { font-size: clamp(38px, 11.2vw, 54px); }
  .lm-btn { height: 56px; padding: 0 40px; }
  .lm-label { font-size: 19px; }
  /* hero copy stays tight so the robot is visible above the fold;
     the long passage moves below the card (.hero-sub-mobile) */
  .hero-split { padding-top: 30px; }
  .hero-split .hero-sub { display: none; }
  .hero-split .hero-actions { margin-top: 22px; }
  /* negative margin eats the scene's built-in headroom above the robot */
  .hero-3d { height: 350px; margin-top: -52px; }
  /* scale the robot up ~25%; the card clips the overflow cleanly */
  .hero-3d canvas { transform: scale(1.25); transform-origin: 50% 14%; }
  .hero-sub-mobile {
    display: block;
    max-width: 560px;
    margin: 0 auto;
    padding: 44px 28px 56px;
    text-align: center;
    color: var(--txt-2);
    font-size: 18px;
    line-height: 1.7;
  }
  .spotlight { display: none; }
  .sticky-cta { display: block; }
  .stat .n { font-size: 56px; }
  .price-card, .form-card { padding: 32px 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}