* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #000000;
  --bg-alt: #0a0c14;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --accent-blue: #1e7dff;
  --accent-cyan: #39e6ff;
  --accent-gradient: linear-gradient(100deg, var(--accent-blue), var(--accent-cyan) 70%);
  --border: rgba(255, 255, 255, 0.1);
  --light-bg: #f5f5f7;
  --light-ink: #1d1d1f;
  --light-muted: #6e6e73;
  --light-border: #e3e0db;
  --radius: 16px;
  --radius-lg: 28px;
  --container: 1080px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  main, .stage-footer {
    opacity: 0;
    transition: opacity 0.7s ease;
  }
  body.revealed main, body.revealed .stage-footer {
    opacity: 1;
  }
}

html, body { overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
img { display: block; max-width: 100%; }

.accent-text, .stage-hero-h1-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: var(--accent-cyan); }

a:focus-visible, button:focus-visible, .stage-btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

/* ---- Intro splash ---- */
#intro-splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#intro-splash.hide { opacity: 0; pointer-events: none; }
#intro-video {
  width: min(60vw, 480px);
  height: auto;
}

/* ---- Nav ---- */
/* ---- Nav: Orbit theme's floating pill on desktop, the site's existing
   full-width sticky bar on mobile (the mobile nav is a separate fixed
   bottom-tab bar, so the top bar there stays plain and in-flow). ---- */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(14, 19, 34, 0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(57, 230, 255, 0.14);
  white-space: nowrap;
}
.nav-brand { display: flex; align-items: center; gap: 0.5rem; margin-right: 0.75rem; }
.nav-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  mix-blend-mode: screen;
  display: block;
  flex-shrink: 0;
}
.brand-word {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-dot { color: var(--accent-cyan); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a:not(.nav-cta) {
  color: #8d97ad;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:not(.nav-cta):hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-cta {
  padding: 0.5rem 1rem;
  background: var(--accent-cyan);
  border-radius: 999px;
  color: #060912 !important;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.2s ease;
}
.nav-cta:hover { background: #7af0ff; color: #060912 !important; }

.nav-links a.nav-signup[data-auth-popup="signup"] {
  color: var(--accent-cyan);
  font-weight: 600;
}
.nav-links a.nav-signup[data-auth-popup="signup"]:hover { color: #7af0ff; }

.auth-toast {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--bg-alt);
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, transparent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 500;
}
.auth-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1024px) {
  .auth-toast {
    /* Clear the fixed 60px bottom-tab bar (see mobile-nav rules) instead of
       sitting underneath it. */
    bottom: calc(60px + env(safe-area-inset-bottom) + 0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-toast {
    transition: opacity 0.25s ease;
  }
  .auth-toast.is-visible {
    transform: translateX(-50%) translateY(0);
  }
}

/* The pill floats over content (position:fixed, out of flow) -- give the
   page's first section enough top clearance so nothing starts underneath it. */
main { padding-top: 76px; }

@media (max-width: 1024px) {
  .nav {
    position: sticky;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: none;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a:not(.nav-cta) { display: none; }
  main { padding-top: 0; }
}

/* ---- Mobile bottom nav (Trading Jay chrome, recolored to this site's own
   cyan accent) ---- */
#biztek-mobile-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1060;
  height: 60px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0a0c14;
  border-top: 1px solid #1e2535;
  align-items: stretch;
  transform: translateZ(0);
  will-change: transform;
}
@media (max-width: 1024px) {
  #biztek-mobile-nav { display: flex; }
  /* The nav bar floats over content unless the page reserves room for it. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
.biztek-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: #718096;
  text-decoration: none;
  font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  transition: color .15s;
}
.biztek-tab svg { width: 1.15rem; height: 1.15rem; }
.biztek-tab:hover { color: color-mix(in srgb, var(--accent-cyan) 70%, transparent); }
.biztek-tab:active { color: var(--accent-cyan); }

/* ---- Buttons ---- */
.stage-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  transition: transform 0.3s var(--ease-out), background 0.2s ease;
}
.stage-btn-primary {
  background: var(--accent-blue);
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(30, 125, 255, 0.3);
}
.stage-btn-primary:hover { background: #3a8dff; color: #fff !important; }
.stage-btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }
.stage-link-arrow { color: var(--accent-cyan); font-weight: 500; }
.stage-link-arrow:hover { color: #7af0ff; }

.stage-kicker {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent-cyan);
  margin-bottom: 1rem;
}
.stage-mono-num, .stage-card-num {
  font-family: 'Geist Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-cyan);
}

/* ---- Reveal-on-scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: calc(var(--reveal-step, 0) * 90ms);
}
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { --reveal-step: 1; }
[data-reveal-delay="2"] { --reveal-step: 2; }
[data-reveal-delay="3"] { --reveal-step: 3; }
[data-reveal-delay="4"] { --reveal-step: 4; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ================= HERO (scroll-pinned zoom reveal) ================= */
.stage-hero {
  position: relative;
  height: 108vh;
}
.stage-hero-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stage-hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 9vh, 100px) 24px 0;
  text-align: center;
  max-width: 980px;
  opacity: calc(1 - var(--p, 0) * 2.4);
  transform: translateY(calc(var(--p, 0) * -140px)) scale(calc(1 - var(--p, 0) * 0.08));
}
.stage-hero-kicker {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  color: var(--accent-cyan);
  margin-bottom: 14px;
}
.stage-hero-h1 {
  text-wrap: balance;
  font-size: clamp(32px, 5.2vw, 68px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
}
/* In normal flow (not bottom-anchored in the 100vh sticky box) so it always
   sits right under the text regardless of viewport height -- a bottom:0
   anchor left a gap that scaled with screen height on tall monitors. The
   zoom-on-scroll effect comes purely from scale growing from the top edge;
   .stage-hero-inner's overflow:hidden clips it as it grows past the frame. */
.stage-hero-visual {
  position: relative;
  width: min(1500px, 92vw);
  margin-top: 6px;
  pointer-events: none;
  z-index: 0;
  flex: 0 0 auto;
  transform: scale(calc(0.86 + var(--p, 0) * 0.3));
  transform-origin: 50% 0%;
}
.stage-hero-visual img { width: 100%; height: auto; }
/* A small status-light flicker on the ops-center screen, fired at random
   intervals from js/motion.js (not a looping CSS animation -- the point is
   it reads as a live system blinking, not a metronome). One light at a time,
   relocated to a different spot (--blink-x/--blink-y) each cycle. Runs from
   page load, independent of scroll. Red to match the screen's own threat/
   alert icons, not the site's cyan accent. */
.stage-hero-blink {
  position: absolute;
  top: var(--blink-y, 21%);
  left: var(--blink-x, 61.5%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff453a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease-out, box-shadow 90ms ease-out;
}
.stage-hero-blink.is-lit {
  opacity: 1;
  box-shadow: 0 0 10px 4px rgba(255, 69, 58, 0.85), 0 0 2px 1px rgba(255, 69, 58, 1);
}
@media (prefers-reduced-motion: reduce) {
  .stage-hero-blink { display: none; }
}
/* A plain element right after the hero section (not inside the pinned,
   clipped 100vh box) -- the image is sized big enough to overflow and get
   clipped by design during the zoom-in scroll, which would've clipped this
   caption too if it stayed inside that box. */
/* Lives at the top of .stage-statement now, not between Hero and
   Capabilities -- centered to match the now-centered statement text
   below it. */
.stage-hero-caption {
  margin-bottom: clamp(28px, 4vh, 48px);
}
.stage-hero-caption-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.9rem;
}
.stage-hero-caption-text {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 32ch;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .stage-hero { height: auto; }
  .stage-hero-inner { position: relative; height: auto; padding-bottom: 32px; }
  .stage-hero-content { opacity: 1; transform: none; padding-top: 64px; }
  .stage-hero-visual { transform: none; width: 100%; margin-top: 1.5rem; }
  .stage-hero-caption { margin-bottom: 1.5rem; }
}

.stage-hero-actions {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 32px;
  font-size: 17px;
}

/* ================= STATEMENT (word-by-word scroll reveal) ================= */
.stage-statement {
  padding: clamp(20px, 3vh, 48px) clamp(24px, 6vw, 80px);
  text-align: center;
}
.stage-statement-text {
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.stage-word {
  opacity: clamp(0.16, calc((var(--p, 0) - 0.12) * var(--wk, 80) - var(--wi, 0)), 1);
}

/* ================= SERVICES (Orbit theme: tilted, scroll-driven photo wall) ================= */
.stage-wall {
  background: var(--bg);
  padding: 60px 0 100px;
  overflow: hidden;
  perspective: 1400px;
  scroll-margin-top: 60px;
}
.stage-wall-tilt {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: rotateX(14deg) rotateZ(-4deg) scale(1.1);
}
.stage-wall-row {
  display: flex;
  gap: 20px;
  width: max-content;
  transform: translateX(calc(var(--p, 0) * -40%));
}
.stage-wall-row-rev {
  transform: translateX(calc(-45% + var(--p, 0) * 40%));
}
.stage-wall-tile {
  position: relative;
  display: block;
  border-radius: 14px;
  transition: transform 0.25s var(--ease-out);
}
.stage-wall-tile:hover { transform: scale(1.03); }
.stage-wall-tile-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 14, 26, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(57, 230, 255, 0.25);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.stage-wall-tile:hover .stage-wall-tile-label,
.stage-wall-tile:focus-visible .stage-wall-tile-label {
  opacity: 1;
  transform: translateY(0);
}
.stage-wall-row img {
  width: clamp(260px, 26vw, 420px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
  border: 1px solid rgba(57, 230, 255, 0.15);
  transition: border-color 0.25s ease;
}
.stage-wall-tile:hover img { border-color: rgba(57, 230, 255, 0.5); }
/* Each row repeats its image set back-to-back so the scroll loop never runs
   out of images -- without this gap, a wide viewport shows the start of the
   repeat sitting right next to the end of the first pass at rest (--p: 0),
   reading as a duplicate. This pushes the repeat off-screen until the user
   actually scrolls into it. */
.stage-wall-spacer {
  flex: none;
  width: 100vw;
}

@media (prefers-reduced-motion: reduce) {
  .stage-wall-row, .stage-wall-row-rev { transform: none; }
}

/* ================= PROCESS (Clarity theme: light, numbered-circle timeline) ================= */
.stage-process-clarity {
  background: #fff;
  color: var(--light-ink);
  border-top: 1px solid var(--light-border);
  border-bottom: 1px solid var(--light-border);
  padding: clamp(80px, 12vh, 130px) max(24px, calc((100% - 1240px) / 2));
  scroll-margin-top: 60px;
}
.stage-process-clarity-kicker {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.stage-process-clarity h2 {
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 56px;
}
.stage-process-clarity-track {
  position: relative;
}
.stage-process-clarity-track::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--light-border);
}
.stage-process-clarity-fill {
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-blue);
  transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--p, 0) * 2.6 - 0.6), 1));
}
.stage-process-clarity-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.stage-process-clarity-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-blue);
  color: var(--accent-blue);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.875rem;
  margin-bottom: 24px;
}
.stage-process-clarity-grid h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.stage-process-clarity-grid p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--light-muted);
}

/* Process on tablet and phone: the steps stack in one column, so the
   horizontal bar cannot connect the circles. Turn it into a vertical
   timeline instead. Each step draws the segment from its own circle down to
   the next circle (grey track plus a blue fill that scrubs with scroll, the
   same --p the desktop bar uses), and the last step draws none. */
@media (max-width: 1024px) {
  .stage-process-clarity-track {
    /* 0 to 1 across the whole timeline, same curve as the desktop fill. */
    --t: clamp(0, calc(var(--p, 0) * 2.6 - 0.6), 1);
    --seg-gap: 40px;
  }
  .stage-process-clarity-track::before,
  .stage-process-clarity-fill { display: none; }
  .stage-process-clarity-grid {
    grid-template-columns: 1fr;
    gap: var(--seg-gap);
    max-width: 680px;
  }
  .stage-process-clarity-grid > div {
    position: relative;
    padding-left: 72px;
  }
  .stage-process-clarity-grid > div:nth-child(1) { --i: 0; }
  .stage-process-clarity-grid > div:nth-child(2) { --i: 1; }
  .stage-process-clarity-grid > div:nth-child(3) { --i: 2; }
  .stage-process-clarity-badge {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
    z-index: 1;
  }
  /* Circle centre (22px down, 22px in) to the next circle's centre. */
  .stage-process-clarity-grid > div:not(:last-child)::before,
  .stage-process-clarity-grid > div:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 22px;
    bottom: calc(-1 * (var(--seg-gap) + 22px));
    width: 2px;
  }
  .stage-process-clarity-grid > div:not(:last-child)::before {
    background: var(--light-border);
  }
  .stage-process-clarity-grid > div:not(:last-child)::after {
    background: var(--accent-blue);
    transform-origin: top;
    transform: scaleY(clamp(0, calc(var(--t) * 3 - var(--i)), 1));
  }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  /* No scroll scrub for these users, so show the finished timeline. */
  .stage-process-clarity-track { --t: 1; }
}

/* ================= CAPABILITIES (Apple-style tile grid) ================= */
.stage-capabilities {
  background: var(--light-bg);
  color: var(--light-ink);
  /* A few px of bottom padding only -- Platform right after already
     carries its own top padding (clamp(90px, 14vh, 150px)), so the
     full clamp() here would double the gap at this seam (same trap
     DESIGN.md notes for Principles meeting Platform), but the tiles
     sitting perfectly flush against it read as a cut-off edge. */
  padding: clamp(80px, 12vh, 130px) max(24px, calc((100% - 1240px) / 2)) 8px;
  scroll-margin-top: 60px;
}
.stage-capabilities-kicker {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.stage-capabilities h2 {
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 56px;
  max-width: 800px;
}
.stage-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.stage-capability-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #d6e5f7;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.stage-capability-tile:hover,
.stage-capability-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
/* The image fills the whole tile -- the copy panel sits on top of it,
   not below it, so this is absolutely positioned rather than flowed.
   contain (not cover) keeps the full mockup render in frame, matching
   the reference: the product art is never cropped, only the plain
   background around it gets letterboxed to fill the tile edges,
   centered on both axes. */
.stage-capability-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.4s var(--ease-out);
}
.stage-capability-tile:hover img,
.stage-capability-tile:focus-visible img {
  transform: scale(1.04);
}
.stage-capability-tile-hero { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
/* Carousel mode (card-flow.js, at 1024px and below): every tile shares one 4:3 frame so the
   row lines up; the hero's 21:9 only makes sense as a full-width band in the 2-up grid. */
.stage-capabilities-grid.is-flow-carousel { --flow-gap: 12px; --flow-card-w: min(84%, 420px); }
.stage-capabilities-grid.is-flow-carousel > .stage-capability-tile { aspect-ratio: 4 / 3; }

/* Caption sits directly on the image, bottom-left -- no glass, no
   blur, no panel behind it at all. The white text-shadow below is what
   keeps it legible, since a centered image can put product-render
   content (not just letterboxed background) right behind the text. */
.stage-capability-tile-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 82%;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) 18px;
}
.stage-capability-tile-copy h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
  color: #111;
  text-shadow: 0 1px 1px #fff, 0 0 10px rgba(255, 255, 255, 0.8);
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
  transition: color 0.3s var(--ease-out);
}
.stage-capability-tile-copy p {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  text-shadow: 0 1px 1px #fff, 0 0 8px rgba(255, 255, 255, 0.8);
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
}
.stage-capability-tile:hover .stage-capability-tile-copy h3,
.stage-capability-tile:focus-visible .stage-capability-tile-copy h3 {
  color: var(--accent-blue);
}
@media (max-width: 1024px) {
  .stage-capabilities-grid { grid-template-columns: 1fr; }
  .stage-capability-tile-hero { grid-column: auto; aspect-ratio: 16 / 9; }
}

/* ================= PLATFORM (radial glow, parallax satellite) ================= */
.stage-platform {
  background: radial-gradient(ellipse 70% 60% at 70% 55%, #06204a 0%, #000 70%);
  /* Bottom trimmed below the usual clamp() -- this section sits directly
     against .stage-principles below it, and the two paddings were stacking
     into one oversized gap at the seam. */
  padding: clamp(90px, 14vh, 150px) max(24px, calc((100% - 1080px) / 2)) clamp(50px, 7vh, 90px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
  scroll-margin-top: 60px;
}
.stage-platform-copy h2 {
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 20px;
}
.stage-platform-copy p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 480px;
}
.stage-platform-visual {
  transform: translateY(calc((0.5 - var(--p, 0)) * 180px)) rotate(calc((var(--p, 0) - 0.5) * 10deg));
}
.stage-platform-visual img { max-width: 560px; margin: 0 auto; }

/* ================= PRINCIPLES (light chapter) ================= */
.stage-principles {
  background: var(--light-bg);
  color: var(--light-ink);
  /* Top trimmed to match the reduced bottom padding on .stage-platform above
     -- see that rule's comment. */
  padding: clamp(50px, 7vh, 90px) max(24px, calc((100% - 1080px) / 2)) clamp(90px, 14vh, 150px);
}
.stage-principles h2 {
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 48px;
  text-align: center;
}
.stage-principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.stage-principle-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.stage-principle-card .stage-card-num { color: var(--light-muted); }
.stage-principle-card h3 {
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: auto 0 12px;
}
.stage-principle-card p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--light-muted);
}

/* ================= FINAL CTA ================= */
.stage-final-cta {
  position: relative;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  text-align: center;
  /* #05060b is the exact colour of the photo's own top and bottom edges, so
     any extra height (narrow screens, where the panel is taller than the
     image) reads as more of the picture, not a seam. */
  background: #05060b;
  /* The image is 960x600 (8:5). The section keeps that ratio, so the picture
     shrinks with the viewport and is never cropped. Content taller than the
     ratio just makes the section grow; the picture stays centred. */
  aspect-ratio: 8 / 5;
  max-height: 1000px;
}
.stage-final-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 1600px);
  aspect-ratio: 8 / 5;
  transform: translate(-50%, -50%);
  background: url('../assets/card_biz_automation.jpg') center / 100% 100% no-repeat;
  pointer-events: none;
}
/* Past 1600px the picture stops growing (it is only 960px wide) and the
   section's own dark ground takes over, so its side edges fade out. */
@media (min-width: 1601px) {
  .stage-final-cta::before {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}
/* Liquid-glass panel: opaque fallback first (older browsers / no backdrop-filter
   support just get a solid dark card), blur layered on top only where supported,
   contrast solved against the lightest thing that can show through the frost. */
.stage-final-cta-glass {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
  border-radius: 32px;
  background: rgba(10, 14, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}
/* A more pronounced rise than the site's default 36px reveal -- this panel
   is the page's last beat, so it earns a slightly bigger entrance. */
.stage-final-cta-glass[data-reveal] { transform: translateY(70px); }
.stage-final-cta-glass[data-reveal].is-in { transform: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (prefers-reduced-transparency: no-preference) {
    .stage-final-cta-glass {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(18px) saturate(105%);
      -webkit-backdrop-filter: blur(18px) saturate(105%);
    }
  }
}
/* Chrome/Chromium renders backdrop-filter blur+saturate over this photo with a
   heavy blue bloom that Safari doesn't produce (browser-level blur/compositing
   difference, not a bug in the shared rule) -- dimmed for Chromium only via a
   JS browser-sniff class (see js/motion.js) so Safari's already-correct look
   is untouched. */
.is-chromium .stage-final-cta-glass {
  background: rgba(10, 14, 26, 0.42);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (prefers-reduced-transparency: no-preference) {
    .is-chromium .stage-final-cta-glass {
      backdrop-filter: blur(20px) saturate(90%) brightness(0.7);
      -webkit-backdrop-filter: blur(20px) saturate(90%) brightness(0.7);
    }
  }
}
.stage-final-cta h2 {
  font-size: clamp(36px, 6.4vw, 76px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 900px;
  margin: 0 auto 20px;
}
.stage-final-cta p {
  font-size: 21px;
  color: var(--muted);
  margin-bottom: 36px;
}

/* ================= FOOTER ================= */
.stage-footer {
  border-top: 1px solid var(--border);
  padding: 28px max(24px, calc((100% - 1080px) / 2)) calc(110px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #86868b;
}
.stage-footer a { color: var(--muted); }
.stage-footer a:hover { color: var(--accent-cyan); }
.stage-powered { flex-basis: 100%; margin: 0; text-align: center; font-size: 14px; opacity: 0.7; }

@media (max-width: 1024px) {
  .stage-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 28px); }
}

/* ---- Restructure 2026-10-22: hero subline + software section intro ---- */
.stage-hero-sub {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 720px;
  margin: 20px auto 28px;
}
.stage-wall-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 72px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.stage-wall-intro h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 8px 0 16px;
}
.stage-wall-intro p:last-child { font-size: 20px; line-height: 1.55; color: var(--muted); }

/* ---- AI integration (bring your own AI) ---- */
.stage-ai {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(30,125,255,0.16), transparent 70%), var(--bg);
  padding: clamp(80px, 12vh, 130px) max(24px, calc((100% - 1160px) / 2)) clamp(60px, 9vh, 100px);
  scroll-margin-top: 60px;
}
.stage-ai-head { max-width: 800px; margin: 0 auto 56px; text-align: center; }
.stage-ai-head h2 { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -0.03em; line-height: 1.08; margin: 8px 0 18px; }
.stage-ai-head p:last-child { font-size: 20px; line-height: 1.55; color: var(--muted); }
.stage-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.stage-ai-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.stage-ai-card h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 12px; }
.stage-ai-card p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.stage-ai-support {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  background: linear-gradient(135deg, rgba(30,125,255,0.22), rgba(57,230,255,0.08));
  border: 1px solid rgba(57,230,255,0.25);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}
.stage-ai-support > div:first-child { flex: 1 1 420px; }
.stage-ai-support h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; margin-bottom: 10px; }
.stage-ai-support p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.stage-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Hero caption: rebus icons stand in for host / watch / phone */
.stage-hero-caption-text .cap-icon {
  height: 1.6em; width: auto;
  vertical-align: middle;
  margin: 0 0.45em;
  color: var(--accent-cyan);
}