/* ============================================================
   BYLDA OS — design system
   The operating system of an AI Sales Agent.
   Polished chrome on paper white. Serif voice, mono machine.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* ground */
  --paper: #fbfbfd;
  --paper-2: #f3f4f8;
  --raise: #ffffff;

  /* ink */
  --ink: #0b0c10;
  --ink-2: #2a2e38;
  --slate: #565c6b;
  --dim: #6b7180;
  --line: rgba(11, 12, 16, 0.075);
  --line-2: rgba(11, 12, 16, 0.14);

  /* accent */
  --blue: #4358d8;
  --blue-soft: #6e80f0;
  --blue-deep: #2f42b8;
  --blue-wash: rgba(76, 99, 230, 0.07);
  --blue-glow: rgba(96, 120, 240, 0.14);

  /* signal */
  --good: #1a7d53;
  --warn: #8f6417;
  --risk: #c64a3c;

  /* elevation — where the premium lives on a light ground */
  --sh-sm: 0 1px 2px rgba(16, 24, 48, 0.05), 0 2px 6px rgba(16, 24, 48, 0.04);
  --sh: 0 1px 2px rgba(16, 24, 48, 0.05), 0 10px 24px -8px rgba(16, 24, 48, 0.12);
  --sh-lg: 0 2px 6px rgba(16, 24, 48, 0.05), 0 26px 60px -16px rgba(16, 24, 48, 0.18);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.9s;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1180px;
  --max-wide: 1360px;
  --nav-h: 68px;
  --r: 18px;
  --r-lg: 26px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  /* clip, never hidden: `overflow-x: hidden` computes overflow-y to `auto`,
     which makes body a scroll container and silently kills every
     `position: sticky` scene on the page. `clip` contains the off-canvas fog
     and ribbon fields without creating one. */
  overflow-x: clip;
  min-height: 100vh;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: rgba(76, 99, 230, 0.16); color: var(--ink); }

/* paper grain — barely there, but it stops the white reading as a blank canvas */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Static. This is a fixed layer twice the viewport in each direction sitting
     above every other layer, so stepping it repaints the whole screen six
     times a loop for grain that is 2% opaque and identical to the eye either
     way. */
}
/* ---------- typography ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.2vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.display em, .h2 em, .h3 em {
  font-style: italic;
  background: linear-gradient(105deg, #1b2030 15%, var(--blue) 55%, #6a7bea 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--ink);
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--slate);
  max-width: 34em;
  text-wrap: pretty;
}
.lede strong { color: var(--ink); font-weight: 500; }
.kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.kicker::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-soft));
}
.kicker--bare::before { display: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--dim); }
.body-l { font-size: 1.125rem; color: var(--slate); line-height: 1.75; }

/* ---------- layout ---------- */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-wide { width: min(var(--max-wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(5rem, 12vh, 9.5rem); }
.section--tight { padding-block: clamp(3rem, 7vh, 5.5rem); }
.section-head { max-width: 46em; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); display: grid; gap: 1.4rem; }
.section-head .lede { margin-top: 0.2rem; }
.center { text-align: center; }
.center .lede, .center .kicker { margin-inline: auto; }
.center .kicker::before { display: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2vw, 1.75rem); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); }
@media (max-width: 980px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.hr {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ---------- atmosphere: light diffusion, aura, ribbons ---------- */
/* Every layer in here animates `transform` on top of a heavy blur. Without an
   explicit compositor layer the browser re-rasterises that blur on the main
   thread every frame, and during page load — fonts swapping, canvas sizing,
   scroll scenes mounting — that is what made the hero visibly stutter and
   snap. `will-change` hands each layer to the GPU; `contain: paint` stops the
   blur from invalidating the rest of the hero when it moves. */
.atmo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  /* The fog blobs start mid-keyframe (negative delays, staggered per layer),
     so the very first painted frame lands on an arbitrary transform — which
     reads as a jump on every refresh. Easing the whole field up from zero
     covers the entry, whatever phase the layers happen to be in. */
  animation: atmo-in 1.5s var(--ease) both;
}
@keyframes atmo-in { from { opacity: 0; } to { opacity: 1; } }

/* Two soft light sweeps travelling across the hero. Container-sized, so they
   stay cheap, and they keep the ground moving even when the fog blobs are
   sitting near the ends of their travel. Heroes only — mid-page .atmo
   sections keep the quieter, blob-only treatment. */
.hero .atmo::before,
.hero .atmo::after,
.page-hero .atmo::before,
.page-hero .atmo::after {
  content: "";
  position: absolute;
  top: -25%; bottom: -25%;
  left: 0;
  width: 55%;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* The gradient axis must be exactly 90deg. These layers carry no blur to hide
   their own boundary any more, so an angled axis leaves the element's left and
   right edges sitting mid-gradient — which paints as two hard vertical seams
   travelling across the hero. Horizontal puts the fully transparent end stops
   exactly on those edges, and the band has no visible boundary at all. */
.hero .atmo::before,
.page-hero .atmo::before {
  background: linear-gradient(90deg,
    rgba(110, 132, 238, 0) 0%,
    rgba(122, 142, 235, 0.045) 26%,
    rgba(110, 132, 238, 0.095) 47%,
    rgba(96, 120, 240, 0.05) 70%,
    rgba(96, 120, 240, 0) 100%);
  animation: atmo-sweep 34s var(--ease-io) infinite;
}
.hero .atmo::after,
.page-hero .atmo::after {
  width: 42%;
  background: linear-gradient(90deg,
    rgba(150, 162, 196, 0) 0%,
    rgba(150, 162, 196, 0.045) 28%,
    rgba(150, 162, 196, 0.095) 50%,
    rgba(150, 162, 196, 0.045) 72%,
    rgba(150, 162, 196, 0) 100%);
  animation: atmo-sweep-back 53s var(--ease-io) -19s infinite;
}
@keyframes atmo-sweep {
  0%   { transform: translate3d(-110%, 0, 0); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(290%, 0, 0); opacity: 0; }
}
@keyframes atmo-sweep-back {
  0%   { transform: translate3d(340%, 0, 0); opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translate3d(-130%, 0, 0); opacity: 0; }
}

/* No `filter: blur()` here, deliberately. A radial gradient is already a
   smooth falloff, so blurring one is visually almost a no-op — but it forces
   an offscreen filter pass on a ~1100px square every frame the layer moves,
   and three of those were most of the hero's frame budget. The extra colour
   stops below reproduce the blurred falloff for free. */
.fog {
  position: absolute;
  width: 68vmax; height: 68vmax;
  border-radius: 50%;
  opacity: 0.85;
  background: radial-gradient(closest-side,
    rgba(96, 120, 240, 0.14),
    rgba(96, 120, 240, 0.10) 34%,
    rgba(96, 120, 240, 0.045) 60%,
    rgba(96, 120, 240, 0.012) 79%,
    transparent 92%);
  will-change: transform;
  backface-visibility: hidden;
  animation: fog-drift 43s var(--ease-io) infinite alternate;
}
/* Each blob gets its own track and a duration that does not divide into the
   others', so the field never re-syncs into one shared pulse. */
.fog--silver {
  background: radial-gradient(closest-side,
    rgba(150, 162, 196, 0.16),
    rgba(150, 162, 196, 0.115) 34%,
    rgba(150, 162, 196, 0.05) 60%,
    rgba(150, 162, 196, 0.014) 79%,
    transparent 92%);
  animation-name: fog-drift-b;
  animation-duration: 57s;
}
.fog--deep {
  background: radial-gradient(closest-side,
    rgba(96, 120, 240, 0.13),
    rgba(96, 120, 240, 0.094) 34%,
    rgba(96, 120, 240, 0.041) 60%,
    rgba(96, 120, 240, 0.011) 79%,
    transparent 92%);
  animation-name: fog-drift-c;
  animation-duration: 68s;
}
@keyframes fog-drift {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1); }
  50%  { transform: translate3d(1%, 5%, 0) scale(1.11); }
  100% { transform: translate3d(6%, -2%, 0) scale(1.18); }
}
@keyframes fog-drift-b {
  0%   { transform: translate3d(5%, 3%, 0) scale(1.14); }
  50%  { transform: translate3d(-2%, -5%, 0) scale(1); }
  100% { transform: translate3d(-7%, 2%, 0) scale(1.09); }
}
@keyframes fog-drift-c {
  0%   { transform: translate3d(0, 6%, 0) scale(1.05); }
  50%  { transform: translate3d(-5%, -1%, 0) scale(1.2); }
  100% { transform: translate3d(4%, -6%, 0) scale(1); }
}
/* Sized explicitly, not by insets: an absolutely positioned <svg> is a replaced
   element, so with width/height auto it takes its intrinsic viewBox size (1440x900)
   and drops the right/bottom insets — leaving a hard edge partway across the hero.
   140%/120% is the same box `inset: -10% -20%` describes. */
/* This one keeps its blur: the strokes underneath are hard-edged SVG, so the
   soft focus is doing real visual work rather than smoothing an already-smooth
   gradient. It stays affordable only while the *contents* hold still — the
   filter result can then be cached and the sway is a plain composited
   transform. Animating the individual paths inside it (opacity, scale, dash —
   anything) invalidates that cache and re-runs a ~3 megapixel blur on every
   frame, which is why there is no per-path animation here. Put the motion on
   the fog and the sweeps instead; they carry no filter.
   `will-change` is deliberately absent for the same reason: pinning this into
   its own layer stops the blurred result being cached and measured markedly
   worse than leaving it alone. */
.ribbon-field {
  position: absolute;
  top: -10%; left: -20%;
  width: 140%; height: 120%;
  max-width: none;              /* beats the `img, svg, canvas, video` reset above */
  opacity: 0.9;
  filter: blur(12px);
}
.ribbon-field path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ribbon-slow { animation: ribbon-sway 46s var(--ease-io) infinite alternate; transform-origin: 50% 50%; }
.ribbon-slower { animation: ribbon-sway 61s var(--ease-io) infinite alternate-reverse; transform-origin: 50% 50%; }
@keyframes ribbon-sway {
  0%   { transform: rotate(-1.6deg) translateY(-1.5%); }
  50%  { transform: rotate(0.2deg) translateY(0.6%); }
  100% { transform: rotate(1.6deg) translateY(1.5%); }
}

/* The canvas is sized from JS. Until it has real dimensions to measure it has
   none, so it fades in once the first frame is drawn rather than popping. */
#particles { opacity: 0; transition: opacity 1.1s var(--ease); }
#particles.is-live { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .atmo,
  .fog,
  .ribbon-field,
  .hero .atmo::before,
  .hero .atmo::after,
  .page-hero .atmo::before,
  .page-hero .atmo::after { animation: none; }
  #particles { display: none; }
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: transform 0.5s var(--ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(251, 251, 253, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px -8px rgba(16, 24, 48, 0.14);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner {
  width: min(var(--max-wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-logo { display: inline-flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.nav-logo img { width: 30px; height: 30px; }
.nav-logo span {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.nav-links {
  display: flex;
  gap: 1.7rem;
  margin-inline: auto;
  font-size: 0.885rem;
  color: var(--slate);
}
.nav-links a { position: relative; padding: 0.4rem 0; transition: color 0.25s ease; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}
.nav-cta { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s; }
@media (max-width: 1080px) {
  .nav-links, .nav-cta .btn--ghost { display: none; }
  .nav-burger { display: flex; }
  body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}
.menu {
  position: fixed; inset: 0; z-index: 890;
  background: rgba(251, 251, 253, 0.94);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: grid;
  place-content: center;
  gap: 0.4rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
body.menu-open .menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.menu a {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  color: var(--slate);
  padding: 0.35rem 1rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--ink); }
body.menu-open .menu a { opacity: 1; transform: none; }
.menu a:nth-child(1) { transition-delay: 0.05s; } .menu a:nth-child(2) { transition-delay: 0.09s; }
.menu a:nth-child(3) { transition-delay: 0.13s; } .menu a:nth-child(4) { transition-delay: 0.17s; }
.menu a:nth-child(5) { transition-delay: 0.21s; } .menu a:nth-child(6) { transition-delay: 0.25s; }
.menu a:nth-child(7) { transition-delay: 0.29s; } .menu a:nth-child(8) { transition-delay: 0.33s; }
.menu a:nth-child(9) { transition-delay: 0.37s; } .menu a:nth-child(10) { transition-delay: 0.41s; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.9em 1.7em;
  border-radius: 999px;
  font-size: 0.925rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.btn--solid {
  color: #fff;
  background: linear-gradient(170deg, #23262f 0%, #0e1015 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, var(--sh);
}
.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 16px 34px -12px rgba(16, 24, 48, 0.36);
}
.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-sm);
}
.btn--ghost:hover { border-color: rgba(11, 12, 16, 0.26); background: #fff; transform: translateY(-2px); box-shadow: var(--sh); }
.btn--sm { padding: 0.62em 1.25em; font-size: 0.85rem; }
.btn--lg { padding: 1.05em 2.1em; font-size: 1rem; }
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.925rem; font-weight: 500; color: var(--blue);
}
.link-arrow .arr { transition: transform 0.35s var(--ease); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* ---------- glass surfaces ---------- */
.glass {
  position: relative;
  border-radius: var(--r);
  background:
    radial-gradient(120% 140% at var(--gx, 30%) var(--gy, -20%), rgba(76, 99, 230, 0.05), transparent 55%),
    linear-gradient(180deg, #ffffff, #fcfcfe);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.5s var(--ease), border-color 0.4s ease, box-shadow 0.5s ease;
}
.glass:hover { border-color: var(--line-2); box-shadow: var(--sh); }
.glass--pad { padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.card { display: grid; gap: 0.8rem; align-content: start; }
.card .h3 { margin-top: 0.4rem; }
.card p { font-size: 0.965rem; color: var(--slate); line-height: 1.65; }
.card-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, #ffffff, #eef0f6);
  box-shadow: var(--sh-sm);
  color: var(--ink);
}
.card-icon svg { width: 19px; height: 19px; }
[data-tilt] { transform-style: preserve-3d; }

/* ---------- chips / tags ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.95em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  box-shadow: var(--sh-sm);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  white-space: nowrap;
}
.chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.chip--blue { color: var(--blue); border-color: rgba(76, 99, 230, 0.32); background: rgba(76, 99, 230, 0.05); }
.chip--blue .dot { background: var(--blue); box-shadow: 0 0 8px rgba(76, 99, 230, 0.55); }
.chip--good { color: var(--good); border-color: rgba(31, 145, 96, 0.3); background: rgba(31, 145, 96, 0.05); }
.chip--good .dot { background: var(--good); }
.chip--warn { color: var(--warn); border-color: rgba(169, 120, 30, 0.3); background: rgba(169, 120, 30, 0.05); }
.chip--warn .dot { background: var(--warn); }
.chip--risk { color: var(--risk); border-color: rgba(198, 74, 60, 0.3); background: rgba(198, 74, 60, 0.05); }
.chip--risk .dot { background: var(--risk); }

/* ---------- window (cinematic product surface) ---------- */
.window {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(140% 100% at var(--gx, 50%) -10%, rgba(76, 99, 230, 0.05), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-lg);
}
.window::before {
  /* glass reflection sweep */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(76, 99, 230, 0.05) 44%, rgba(255, 255, 255, 0.5) 52%, transparent 62%);
  transform: translateX(-70%);
  transition: transform 1.4s var(--ease-io);
  pointer-events: none;
  z-index: 5;
}
.window:hover::before, .window.is-inview::before { transform: translateX(70%); }
.window-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f7f8fb, #f2f3f7);
}
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11, 12, 16, 0.13); }
.window-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.window-status { margin-left: auto; }
.window-body { padding: clamp(1.1rem, 2.2vw, 1.7rem); display: grid; gap: 0.9rem; }
.window--float { transition: transform 0.6s var(--ease); }

/* window internals */
.w-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.w-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.w-value { color: var(--ink); font-weight: 500; }
.w-value--mono { font-family: var(--mono); font-size: 0.8rem; color: var(--blue); }
.w-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fcfcfe;
  font-size: 0.85rem;
}
.w-row.is-filled { border-color: rgba(76, 99, 230, 0.26); background: rgba(76, 99, 230, 0.045); }
.w-fill { color: var(--ink); min-height: 1.3em; }
.w-fill .caret {
  display: inline-block; width: 1px; height: 1em;
  background: var(--blue);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.w-check {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(31, 145, 96, 0.12);
  color: var(--good);
  flex-shrink: 0;
}
.w-check svg { width: 9px; height: 9px; }

/* waveform */
.wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.wave i {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), rgba(76, 99, 230, 0.28));
  height: 20%;
  animation: wave 1.1s var(--ease-io) infinite alternate;
}
.wave i:nth-child(4n+1) { animation-duration: 0.9s; }
.wave i:nth-child(4n+2) { animation-duration: 1.3s; animation-delay: 0.12s; }
.wave i:nth-child(4n+3) { animation-duration: 0.8s; animation-delay: 0.05s; }
.wave i:nth-child(4n)   { animation-duration: 1.15s; animation-delay: 0.2s; }
@keyframes wave { from { height: 14%; } to { height: 92%; } }

/* transcript / conversation */
.msg { display: grid; gap: 0.3rem; max-width: 92%; }
.msg .who { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.msg .say {
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: #f6f7fa;
}
.msg--them { justify-self: start; }
.msg--us { justify-self: end; text-align: right; }
.msg--us .say { background: rgba(76, 99, 230, 0.07); border-color: rgba(76, 99, 230, 0.2); color: #232a4a; text-align: left; }
.say mark {
  background: rgba(76, 99, 230, 0.15);
  color: var(--blue-deep);
  border-radius: 4px;
  padding: 0 0.25em;
  font-weight: 500;
}

/* meters & bars */
.meter { display: grid; gap: 0.45rem; }
.meter-track { display: block; height: 5px; border-radius: 99px; background: rgba(11, 12, 16, 0.075); overflow: hidden; }
.meter-bar {
  display: block;
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-soft));
  width: var(--w, 60%);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.3s var(--ease);
}
.is-inview .meter-bar, .meter.is-inview .meter-bar { transform: scaleX(1); }
.meter-bar--good { background: linear-gradient(90deg, #17724b, #2fb27b); }
.meter-bar--warn { background: linear-gradient(90deg, #8d6217, #d19b34); }
.meter-bar--risk { background: linear-gradient(90deg, #a03a2e, #dd6553); }

/* ---------- metrics / counters ---------- */
.metric { display: grid; gap: 0.5rem; padding: clamp(1.4rem, 2.5vw, 2rem) 0; }
.metric-num {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 4.6rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.metric-num sub, .metric-num sup { font-size: 0.45em; color: var(--blue); font-family: var(--mono); vertical-align: baseline; }
.metric-cap { font-size: 0.9rem; color: var(--slate); max-width: 22em; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track {
  display: flex;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: marquee 36s linear infinite;
  align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.wordmark {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: rgba(11, 12, 16, 0.34);
  white-space: nowrap;
  transition: color 0.3s;
}
.wordmark:hover { color: rgba(11, 12, 16, 0.7); }

/* ---------- reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].is-inview { opacity: 1; transform: none; filter: none; }
/* On narrow screens a sideways offset pushes past the viewport edge and creates
   a horizontal scrollbar while the element is still waiting to reveal. */
@media (max-width: 900px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(34px); }
}
[data-mask] { overflow: hidden; }
[data-mask] > * {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-mask].is-inview > * { transform: none; }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--line-2); }
.acc-item { border-bottom: 1px solid var(--line-2); }
.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0.2rem;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.25s;
}
.acc-q:hover { color: var(--blue); }
.acc-q .ind { font-family: var(--mono); color: var(--dim); transition: transform 0.4s var(--ease); }
.acc-item.open .acc-q .ind { transform: rotate(45deg); color: var(--blue); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--ease); }
.acc-a p { padding: 0 0.2rem 1.4rem; color: var(--slate); font-size: 0.975rem; max-width: 60ch; }

/* ---------- forms ---------- */
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  appearance: none;
  box-shadow: var(--sh-sm);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7180' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(133, 139, 155, 0.8); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(76, 99, 230, 0.55);
  box-shadow: 0 0 0 4px rgba(76, 99, 230, 0.1);
}
input[type="range"] {
  width: 100%; height: 4px;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(90deg, var(--blue) var(--p, 50%), rgba(11, 12, 16, 0.1) var(--p, 50%));
  border-radius: 99px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(11, 12, 16, 0.1);
  box-shadow: 0 0 0 4px rgba(76, 99, 230, 0.14), 0 3px 8px rgba(16, 24, 48, 0.2);
  transition: transform 0.2s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* ---------- status / system line ---------- */
.sysline {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.sysline .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(31, 145, 96, 0.5);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 145, 96, 0.4); }
  70% { box-shadow: 0 0 0 9px rgba(31, 145, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 145, 96, 0); }
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  margin-top: clamp(3rem, 8vh, 6rem);
  border-top: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  overflow: hidden;
}
.footer-ghost {
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: clamp(280px, 32vw, 520px);
  opacity: 0.05;
  pointer-events: none;
  animation: ghost-hover 9s var(--ease-io) infinite alternate;
}
@keyframes ghost-hover { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-22px) rotate(2deg); } }
.footer-inner { position: relative; padding-block: clamp(3.5rem, 8vh, 5.5rem) 2.5rem; display: grid; gap: 3.5rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(130px, 1fr)); gap: 2.5rem; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-brand { display: grid; gap: 1.1rem; align-content: start; }
.footer-brand .nav-logo span { font-size: 1.5rem; }
.footer-brand p { font-size: 0.92rem; color: var(--slate); max-width: 26em; }
.footer-col { display: grid; gap: 0.65rem; align-content: start; }
.footer-col .footer-h { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.5rem; font-weight: 500; }
.footer-col a { font-size: 0.9rem; color: var(--slate); transition: color 0.25s; width: fit-content; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--dim);
}
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a:hover { color: var(--ink); }

/* ---------- hero scaffold ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-top: var(--nav-h);
  overflow: clip;
}
.hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.6rem;
  padding-block: 4rem 6rem;
  width: min(900px, 100% - 2 * var(--gutter));
}
.hero .display { animation: rise 1.4s var(--ease) 0.5s both; }
.hero .lede { animation: rise 1.4s var(--ease) 0.75s both; margin-inline: auto; }
.hero .cta-row { justify-content: center; animation: rise 1.4s var(--ease) 0.95s both; }
.hero .kicker { animation: rise 1.4s var(--ease) 0.35s both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(38px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: var(--dim);
  animation: rise 1.4s var(--ease) 1.4s both;
}
.scroll-cue i {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, rgba(11, 12, 16, 0.2), transparent);
  overflow: hidden;
  position: relative;
}
.scroll-cue i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--blue), transparent);
  animation: cue 2s var(--ease-io) infinite;
}
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
/* width/height are required here too: <canvas> is replaced, so inset alone
   leaves it at the default 300x150 in the top-left corner. */
#particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.crumbs a { transition: color 0.25s; }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { opacity: 0.5; }
.crumbs [aria-current="page"] { color: var(--slate); }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cmp caption { text-align: left; padding-bottom: 1rem; color: var(--dim); font-size: 0.85rem; }
.cmp th, .cmp td { padding: 0.95rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  border-bottom-color: var(--line-2);
}
.cmp tbody th { font-weight: 500; color: var(--ink); width: 34%; }
.cmp td { color: var(--slate); }
.cmp .col-us { background: rgba(76, 99, 230, 0.04); color: var(--ink); }
.cmp thead .col-us { color: var(--blue); }
.cmp-wrap { overflow-x: auto; border-radius: var(--r); }
.yes { color: var(--good); font-weight: 500; }
.no { color: var(--dim); }

/* page hero (interior pages) */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(4.5rem, 12vh, 8rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: clip;
}
.page-hero .display { font-size: clamp(2.6rem, 5.8vw, 4.8rem); }
.page-hero-inner { position: relative; z-index: 2; display: grid; gap: 1.5rem; max-width: 54em; }
.page-hero-inner .lede { max-width: 40em; }

/* ---------- flow diagram (mono pipeline) ---------- */
.flow { display: grid; gap: 0; justify-items: center; }
.flow-node {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--slate);
  padding: 0.7em 1.4em;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--sh-sm);
  text-transform: uppercase;
}
.flow-node--hot { color: var(--blue); border-color: rgba(76, 99, 230, 0.35); box-shadow: 0 0 24px rgba(76, 99, 230, 0.12), var(--sh-sm); }
.flow-link {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--line-2), rgba(76, 99, 230, 0.5), var(--line-2));
  position: relative;
}
.flow-link::after {
  content: "";
  position: absolute;
  left: -1.5px; top: 0;
  width: 4px; height: 8px;
  border-radius: 4px;
  background: var(--blue);
  animation: flow-pulse 1.8s linear infinite;
}
@keyframes flow-pulse { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(34px); opacity: 0; } }

/* ---------- integration node tiles ---------- */
.node {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem 1rem 1.3rem;
}
.node-glyph {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, #ffffff, #eceef4);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.node-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.node-kind { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }

/* ---------- quote ---------- */
.quote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.quote .qm { color: var(--blue-soft); }
.attrib { display: flex; align-items: center; gap: 1rem; }
.attrib-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  color: #fff;
  background: linear-gradient(160deg, #2b3040, #0e1015);
  box-shadow: var(--sh-sm);
}
.attrib b { display: block; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.attrib span { font-size: 0.8rem; color: var(--dim); }

/* ---------- tables (pricing compare) ---------- */
.tier-price { font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--ink); }
.tier-price .per { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--dim); }
.tier-feats { display: grid; gap: 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.tier-feats li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.92rem; color: var(--slate); }
.tier-feats li::before { content: "→"; font-family: var(--mono); color: var(--blue); font-size: 0.8rem; }
.tier--hot { border-color: rgba(76, 99, 230, 0.35); box-shadow: 0 0 0 1px rgba(76, 99, 230, 0.12), var(--sh-lg); }

/* ---------- helpers ---------- */
.sticky-vp { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.z2 { position: relative; z-index: 2; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 2001;
  padding: 0.8em 1.2em; background: var(--ink); color: #fff; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ============================================================
   SCENES — scroll-driven set pieces
   ============================================================ */

/* --- task storm (the problem) --- */
.storm { position: relative; height: 340vh; background: linear-gradient(180deg, var(--paper) 0%, #eef0f6 50%, var(--paper) 100%); }
.storm-intro {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(680px, 90vw);
  text-align: center;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}
.storm-chips { position: absolute; inset: 0; z-index: 2; }
.storm-chip {
  position: absolute;
  padding: 0.5em 1.05em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-family: var(--mono);
  font-size: clamp(0.6rem, 1.1vw, 0.78rem);
  letter-spacing: 0.05em;
  color: var(--slate);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 10px 24px -10px rgba(16, 24, 48, 0.28);
  pointer-events: none;
}
.storm-ghost {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 19vw, 250px);
  opacity: 0;
  z-index: 4;
  will-change: transform, opacity;
  filter: drop-shadow(0 20px 44px rgba(28, 38, 74, 0.28));
}
.storm-head {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(760px, 92vw);
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

/* --- horizontal storytelling --- */
.hscroll { position: relative; height: 460vh; }
.hs-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hs-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.hs-scene {
  flex: 0 0 100vw;
  height: 100%;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 5rem;
}
.hs-card {
  width: min(1150px, 100%);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hs-card { grid-template-columns: 1fr; gap: 1.6rem; align-content: center; }
  .hs-card .display { font-size: clamp(1.9rem, 6vw, 2.6rem); }
}
.hs-copy { display: grid; gap: 1.2rem; }
.hs-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--blue);
}
.hs-scene .hs-copy > *, .hs-scene .hs-visual {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.hs-scene .hs-visual { transition-delay: 0.15s; transform: translateY(40px) scale(0.96); }
.hs-scene.is-on .hs-copy > *, .hs-scene.is-on .hs-visual { opacity: 1; transform: none; }
.hs-scene.is-on .hs-copy > *:nth-child(2) { transition-delay: 0.08s; }
.hs-scene.is-on .hs-copy > *:nth-child(3) { transition-delay: 0.16s; }
.hs-scene.is-on .hs-copy > *:nth-child(4) { transition-delay: 0.24s; }
.hs-progress {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}
.hs-progress i {
  width: 26px; height: 2px;
  background: rgba(11, 12, 16, 0.12);
  border-radius: 2px;
  transition: background 0.4s;
}
.hs-progress i.on { background: var(--blue); }

/* --- live replay (product demo) --- */
.replay { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start; }
@media (max-width: 900px) { .replay { grid-template-columns: 1fr; } }
[data-rp] {
  opacity: 0.3;
  transform: translateY(10px);
  filter: saturate(0.2);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease), border-color 0.7s;
}
[data-rp].rp-on { opacity: 1; transform: none; filter: none; }
.rp-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.rp-step.rp-on { border-color: rgba(76, 99, 230, 0.3); background: rgba(76, 99, 230, 0.04); box-shadow: var(--sh-sm); }
.rp-idx {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  padding-top: 0.2em;
}
.rp-step.rp-on .rp-idx { color: var(--blue); }
.rp-body { display: grid; gap: 0.3rem; }
.rp-body b { font-size: 0.94rem; font-weight: 500; color: var(--ink); }
.rp-body p { font-size: 0.86rem; color: var(--slate); line-height: 1.55; }
.rp-type { font-family: var(--mono); font-size: 0.8rem; color: var(--blue); min-height: 1.3em; }
.rp-type::after {
  content: "";
  display: inline-block;
  width: 1px; height: 1em;
  background: var(--blue);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}
.rp-step:not(.rp-on) .rp-type::after { display: none; }

/* --- split feature rows --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split + .split { margin-top: clamp(4rem, 9vh, 7rem); }
.split:nth-child(even) .split-copy { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split:nth-child(even) .split-copy { order: 0; }
}
.split-copy { display: grid; gap: 1.2rem; align-content: start; }
.split-copy .lede { max-width: 32em; }
.feat-list { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.feat-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline; font-size: 0.95rem; color: var(--slate); }
.feat-list li::before { content: "—"; font-family: var(--mono); color: var(--blue); font-size: 0.78rem; }

/* --- orbit (integrations) --- */
.orbit { position: relative; aspect-ratio: 1; max-width: 560px; margin-inline: auto; display: grid; place-items: center; }
.orbit-ring {
  position: absolute;
  inset: var(--i, 0%);
  border-radius: 50%;
  border: 1px solid var(--line-2);
  animation: spin var(--sp, 60s) linear infinite;
}
.orbit-ring::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px rgba(76, 99, 230, 0.6);
}
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-core { position: relative; z-index: 2; width: 34%; filter: drop-shadow(0 16px 34px rgba(28, 38, 74, 0.24)); }
.orbit-chip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
}

/* --- timeline --- */
.timeline { position: relative; display: grid; gap: 0; padding-left: 2.2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 10%, var(--line-2) 90%, transparent);
}
.tl-item { position: relative; padding-bottom: 2.4rem; display: grid; gap: 0.5rem; }
.tl-item::before {
  content: "";
  position: absolute;
  left: calc(-2.2rem + 3px);
  top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--dim);
}
.tl-item.is-inview::before { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 3px rgba(76, 99, 230, 0.14); }
.tl-time { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.tl-item b { color: var(--ink); font-weight: 500; }
.tl-item p { font-size: 0.95rem; color: var(--slate); max-width: 46ch; }

/* --- ROI calculator --- */
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 900px) { .roi-grid { grid-template-columns: 1fr; } }
.roi-inputs { display: grid; gap: 1.6rem; }
.roi-input { display: grid; gap: 0.6rem; }
.roi-input-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.roi-input-top label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.roi-input-top output { font-family: var(--mono); font-size: 0.95rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.roi-out { display: grid; gap: 1.4rem; }
.roi-out-item { display: grid; gap: 0.3rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.roi-out-item:last-child { border-bottom: 0; padding-bottom: 0; }
.roi-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.roi-out-item span { font-size: 0.85rem; color: var(--slate); }

/* --- pricing toggle --- */
.toggle-row { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.9rem; color: var(--slate); }
.toggle {
  position: relative;
  width: 52px; height: 28px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: #eceef4;
  transition: background 0.3s, border-color 0.3s;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 48, 0.25);
  transition: transform 0.4s var(--ease);
}
.toggle.on { background: var(--blue); border-color: var(--blue); }
.toggle.on::after { transform: translateX(24px); }
.billing-note { opacity: 0; transition: opacity 0.3s; font-family: var(--mono); font-size: 0.7rem; color: var(--good); letter-spacing: 0.1em; }
.billing-note.on { opacity: 1; }

/* --- blog cards --- */
.post {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s ease;
}
.post:hover { transform: translateY(-4px); }
.post-meta { display: flex; gap: 0.9rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.post h3 { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; color: var(--ink); font-weight: 400; }
.post p { font-size: 0.92rem; color: var(--slate); line-height: 1.6; }

/* --- article body --- */
.prose { max-width: 42em; display: grid; gap: 1.4rem; }
.prose p { font-size: 1.075rem; line-height: 1.8; color: var(--ink-2); }
.prose h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 400; color: var(--ink); margin-top: 1.6rem; line-height: 1.2; }
.prose h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--ink); margin-top: 1rem; }
.prose ul { display: grid; gap: 0.7rem; }
.prose li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: baseline; font-size: 1.03rem; line-height: 1.7; color: var(--ink-2); }
.prose li::before { content: "—"; font-family: var(--mono); color: var(--blue); font-size: 0.8rem; }
.prose blockquote {
  border-left: 2px solid rgba(76, 99, 230, 0.45);
  padding-left: 1.5rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--ink);
}
.prose strong { color: var(--ink); font-weight: 500; }

/* --- form success --- */
.form-done { display: none; }
.form-done.on { display: grid; gap: 1rem; justify-items: center; text-align: center; }
/* !important because the waitlist form carries an inline display:grid, which
   would otherwise outrank this and leave the form sitting under the
   confirmation panel after a successful send. */
form.is-sent { display: none !important; }

/* --- form error --- */
.form-error {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--risk);
}
.form-error[hidden] { display: none; }

/* --- floating window collage --- */
.collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: start; }
.collage .window { grid-column: span 12; }
@media (min-width: 981px) {
  .collage .c-a { grid-column: 1 / 8; }
  .collage .c-b { grid-column: 8 / 13; margin-top: 5rem; }
  .collage .c-c { grid-column: 2 / 7; margin-top: -2rem; }
  .collage .c-d { grid-column: 7 / 12; margin-top: 2.5rem; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-mask] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  body::after { display: none; }
}

/* ============================================================
   HERO — product-led (index)
   Announcement pill → type → CTA pair → proof strip → the product
   itself, sitting in the fold. Bylda chrome throughout: serif
   display, mono machine labels, paper white, real window surface.
   Scoped to .hero--os so /404 keeps the original centred scaffold.
   ============================================================ */
.hero--os {
  min-height: 0;
  display: block;
  place-items: initial;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4.5vh, 3.25rem));
  padding-bottom: 0;
}
.hero--os .hero-inner {
  width: min(920px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: 0;
  gap: 1.25rem;
}
.hero--os .display {
  font-size: clamp(2.7rem, 6.6vw, 5.6rem);
  animation: rise 1.3s var(--ease) 0.4s both;
}
.hero--os .lede {
  max-width: 31em;
  animation: rise 1.3s var(--ease) 0.58s both;
}
.hero--os .cta-row {
  margin-top: 0.25rem;
  animation: rise 1.3s var(--ease) 0.76s both;
}

/* announcement pill */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.34em 1.05em 0.34em 0.38em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  font-size: 0.82rem;
  color: var(--slate);
  animation: rise 1.3s var(--ease) 0.2s both;
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.hero-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(76, 99, 230, 0.34);
  background: #fff;
  box-shadow: var(--sh);
}
.hero-badge-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(170deg, var(--blue-soft), var(--blue));
  padding: 0.5em 0.85em;
  border-radius: 999px;
  white-space: nowrap;
}
.hero-badge-text { color: var(--ink-2); }
.hero-badge .arr { color: var(--blue); transition: transform 0.35s var(--ease); }
.hero-badge:hover .arr { transform: translateX(3px); }

/* microcopy under the CTAs */
.hero-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
  animation: rise 1.3s var(--ease) 0.9s both;
}

/* proof strip — the site's own numbers, not badges */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 3vw, 2.5rem);
  margin-top: 0.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  width: min(620px, 100%);
  animation: rise 1.3s var(--ease) 1s both;
}
.proof-item { display: flex; align-items: center; gap: 0.7em; }
.proof-num {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.proof-num sub {
  font-size: 0.46em;
  margin-left: 0.1em;
  color: var(--blue);
  font-family: var(--mono);
  vertical-align: baseline;
}
.proof-cap {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--dim);
  text-align: left;
}
.proof-sep { width: 1px; height: 2rem; background: var(--line-2); }

/* ---------- the stage: product surface in the fold ---------- */
.hero-stage {
  --stage-pad: clamp(1.75rem, 5vh, 3.25rem);
  position: relative;
  z-index: 3;
  width: min(var(--max-wide), 100% - 2 * var(--gutter));
  margin: clamp(2.25rem, 5.5vh, 4rem) auto 0;
  padding-bottom: var(--stage-pad);
  animation: rise 1.5s var(--ease) 1.12s both;
}
/* Blur dropped for the same reason as .fog — the stops carry the falloff. */
.stage-glow {
  position: absolute;
  inset: -12% -6% -16%;
  background: radial-gradient(58% 55% at 50% 42%,
    rgba(96, 120, 240, 0.2),
    rgba(96, 120, 240, 0.13) 34%,
    rgba(96, 120, 240, 0.055) 56%,
    rgba(96, 120, 240, 0.015) 76%,
    transparent 90%);
  pointer-events: none;
}
.app { position: relative; }
.app-grid {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr) 258px;
  align-items: stretch;
}

/* rail */
.app-rail {
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #fafbfd, #f5f6fa);
  padding: 1.1rem 0.85rem;
  display: grid;
  align-content: start;
  gap: 0.15rem;
}
.rail-head {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0.15rem 0.7rem 1.15rem;
}
.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65em;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  color: var(--slate);
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.rail-item:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink); }
.rail-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rail-label { position: relative; z-index: 2; }

/* autoplay countdown, drawn under the active tab */
.rail-timer {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  opacity: 0;
}
.rail-item.is-counting .rail-timer {
  opacity: 1;
  animation: rail-count var(--dwell, 7s) linear both;
}
@keyframes rail-count { to { transform: scaleX(1); } }

.rail-foot {
  margin-top: 0.9rem;
  padding: 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 12, 16, 0.3);
  line-height: 1.6;
}
.rail-item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  background: rgba(11, 12, 16, 0.16);
  flex-shrink: 0;
}
.rail-item.is-on {
  background: #fff;
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--sh-sm);
}
.rail-item.is-on::before { background: var(--blue); box-shadow: 0 0 8px rgba(76, 99, 230, 0.5); }

/* panels — all stacked in one grid cell so switching costs no layout shift */
.app-panels { display: grid; }
/* inactive panels keep their grid cell so the app never resizes between
   surfaces; [hidden] is retained for assistive tech, and deliberately
   overridden here (an author rule beats the UA's [hidden]{display:none}) */
.app-panel[hidden] { display: grid; }
.app-panel {
  grid-area: 1 / 1;
  padding: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  align-content: start;
  gap: 0.65rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.45s;
}
.app-panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease) 0.06s, transform 0.6s var(--ease) 0.06s, visibility 0s;
}

/* every panel child marked .pop enters on activation */
.app-panel .pop { opacity: 0; }
.app-panel.is-on .pop { animation: pop 0.6s var(--ease) var(--d, 0s) both; }
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* meters fill on activation, not on scroll */
.app-panel .meter-bar { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.app-panel.is-on .meter-bar { transform: scaleX(1); transition-delay: 0.3s; }

.app-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--dim);
}
.transcript { display: grid; gap: 0.7rem; }
.transcript .msg { opacity: 0; transition: opacity 0.4s var(--ease); }
.transcript .msg.is-on { opacity: 1; }
.transcript .say { min-height: 1.55em; }
.transcript .say.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--blue);
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.signal-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.signal-row .chip { opacity: 0; transform: translateY(8px) scale(0.94); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.signal-row .chip.is-on { opacity: 1; transform: none; }
.app-panel .app-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
}
.app-panel .app-title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.22;
  color: var(--ink);
  margin-top: 0.25rem;
}
.deal {
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 0.85rem 0.95rem;
  display: grid;
  gap: 0.55rem;
  box-shadow: var(--sh-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, border-color 0.3s ease;
}
.deal:hover, .deal:focus-visible { transform: translateY(-2px); border-color: rgba(76, 99, 230, 0.32); box-shadow: var(--sh); }
.deal:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.deal:active { transform: translateY(0); }
.deal-top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.8rem; }
.deal-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.deal-say { display: block; font-size: 0.83rem; line-height: 1.55; color: var(--slate); }
.deal-say mark {
  background: rgba(76, 99, 230, 0.11);
  color: var(--ink);
  padding: 0 0.2em;
  border-radius: 3px;
}
.deal-foot {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
}
.deal-meta {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  color: var(--dim);
}
.deal-act { font-size: 0.78rem; font-weight: 500; color: var(--blue); white-space: nowrap; }
.deal:hover .deal-act .arr { transform: translateX(3px); }
.deal-act .arr { display: inline-block; transition: transform 0.35s var(--ease); }

/* side column */
.app-side {
  border-left: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.4rem);
  display: grid;
  align-content: start;
  gap: 0.85rem;
  background: linear-gradient(180deg, #fcfcfe, #f7f8fc);
}
.brief-list { display: grid; gap: 0.6rem; }
.brief-list li {
  display: flex;
  gap: 0.55em;
  align-items: baseline;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--slate);
}
.tick { color: var(--good); flex-shrink: 0; }
.sysline .pulse--rec { background: var(--risk); animation-name: pulse-rec; }
@keyframes pulse-rec {
  0% { box-shadow: 0 0 0 0 rgba(198, 74, 60, 0.4); }
  70% { box-shadow: 0 0 0 9px rgba(198, 74, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 74, 60, 0); }
}
.side-stat {
  margin-top: 0.25rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  display: grid;
  gap: 0.3rem;
}
.side-stat strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink);
}
.side-stat span { font-size: 0.74rem; line-height: 1.45; color: var(--dim); }

/* floating status chips */
.hero-float {
  position: absolute;
  z-index: 6;
  box-shadow: var(--sh);
  animation: float-y 7s var(--ease-io) infinite alternate;
}
/* straddle the bottom edge of the app — clear of every column's content */
.hero-float--a { bottom: calc(var(--stage-pad) - 1rem); left: 7%; }
.hero-float--b { bottom: calc(var(--stage-pad) - 0.55rem); right: 9%; animation-delay: -3.5s; }
@keyframes float-y {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}

/* trust strip tucks up under the stage */
.hero--os + .hero-trust { padding-top: clamp(1.5rem, 4vh, 2.75rem); }

@media (max-width: 1100px) {
  .app-grid { grid-template-columns: 168px minmax(0, 1fr); }
  .app-side { display: none; }
}
@media (max-width: 800px) {
  .app-grid { grid-template-columns: 1fr; }
  /* the rail becomes a scrollable tab strip — never hidden, or the
     panels below would have no control surface on a phone */
  .app-rail {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0.7rem;
  }
  .app-rail::-webkit-scrollbar { display: none; }
  .rail-head, .rail-foot { display: none; }
  .rail-item { width: auto; white-space: nowrap; flex: 0 0 auto; }
  .hero-float { display: none; }
  .proof-sep { display: none; }
  .hero-badge-text { font-size: 0.78rem; }
  .app-main-head .chip { display: none; }

  /* stat over caption, three abreast — reads cleanly at phone width */
  .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 0.9rem;
    padding-top: 1.25rem;
  }
  .proof-item { flex-direction: column; align-items: center; gap: 0.3rem; }
  .proof-num { font-size: 1.6rem; }
  .proof-cap { text-align: center; font-size: 0.7rem; }
  .proof-cap br { display: none; }
}
@media (max-width: 560px) {
  .app-path { display: none; }
  .deal-foot { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}
@media (max-width: 520px) {
  .hero-badge { padding-right: 0.85em; gap: 0.6em; }
  .hero-badge .arr { display: none; }
  .hero-note { font-size: 0.62rem; letter-spacing: 0.1em; }
  /* grid, not flex: `justify-content: center` on the base .cta-row sizes
     tracks to content, so the columns must be declared to stretch */
  .hero--os .cta-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    width: 100%;
    gap: 0.7rem;
  }
  .hero--os .cta-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-float { animation: none; }
}

/* ---------- hero copy motion ---------- */
.hero--os .display em {
  background-size: 220% 100%;
  animation: rise 1.3s var(--ease) 0.4s both, shimmer 9s var(--ease-io) 2s infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-badge-tag { position: relative; overflow: hidden; }
.hero-badge-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: tag-sweep 5.5s var(--ease-io) 3s infinite;
}
@keyframes tag-sweep {
  0% { transform: translateX(-120%); }
  22%, 100% { transform: translateX(120%); }
}
.proof-item { transition: transform 0.4s var(--ease); }
.proof-item:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .hero--os .display em,
  .hero-badge-tag::after,
  .rail-item.is-counting .rail-timer { animation: none; }
  .app-panel { transition: opacity 0.2s linear; transform: none; }
  .app-panel .pop { opacity: 1; animation: none; }
  .app-panel .meter-bar { transition: none; transform: scaleX(1); }
  .transcript .msg { opacity: 1; }
  .signal-row .chip { opacity: 1; transform: none; }
}

/* committee + coaching moments — the detail that makes the surfaces read real */
.committee { display: grid; gap: 0.4rem; }
.person {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8rem;
  color: var(--slate);
}
.person-ini {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(76, 99, 230, 0.09);
  border: 1px solid rgba(76, 99, 230, 0.2);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  color: var(--blue);
  flex-shrink: 0;
}
.person--new { color: var(--good); }
.person--new .person-ini {
  background: rgba(31, 145, 96, 0.08);
  border-color: rgba(31, 145, 96, 0.28);
  color: var(--good);
}
.moments { display: grid; gap: 0.4rem; }
.moment {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-size: 0.8rem;
  color: var(--slate);
}
.moment-t {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--blue);
  flex-shrink: 0;
}