/* ===================================================================
   Meridian — design study rebuilt from a measured teardown.
   Tokens below are the values read off the target's live runtime
   (see ../TEARDOWN.md §2), not eyeballed.
   =================================================================== */

:root {
  /* colour — 11 values, one accent */
  --sun:          #FF8B3E;
  --night:        #0B0907;
  --dusk:         #0F0C0B;
  --dusk-line:    #191614;
  --night-2:      #27221F;
  --dusk-border:  #3F3630;
  --ink:          #1B1613;
  --stroke-1:     #DFD8D3;
  --stroke-2:     #B1ACA6;
  --stroke-3:     #54504E;
  --dust:         #FBF6EC;
  --white:        #FFFFFF;

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* rhythm */
  --header-height: 5.375rem;   /* 86px */
  --container: 1440px;
  --gutter: 48px;

  /* the one easing the target uses almost everywhere */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* the HTML `hidden` attribute must beat any display we set below */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Horizontal entrances (slide-left / slide-right) park their element 72px off
   to one side until it reveals, which on a narrow screen pushes the document
   wider than the viewport.
   Two traps here. First, this must NOT go on <body>: when <html> is
   overflow:visible the body's overflow value is propagated to the viewport
   instead of clipping the body, so the rule silently does nothing. Second, it
   must be `clip` and not `hidden` — `hidden` creates a scroll container, which
   would kill the sticky reel stage and the sticky feature stage inside. */
main { overflow-x: clip; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, video { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--dust); color: var(--ink); padding: 12px 20px;
}
.skip:focus { left: 16px; top: 16px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── type tokens ─────────────────────────────────────────────────── */

.h-56 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 54.88px;      /* 0.98 — tighter than the size, on purpose */
  letter-spacing: -1.68px;
  text-wrap: pretty;
}
.h-48 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.44px;
  text-wrap: pretty;
}
.h-32 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 32px;
  line-height: 36.8px;
  letter-spacing: -0.96px;
  text-wrap: pretty;
}
.body-18-light { font-size: 18px; line-height: 27px; font-weight: 300; }
.body-20       { font-size: 20px; line-height: 26px; font-weight: 400; }
.mono-s {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* ── buttons ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 20px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn-light { background: var(--dust); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-dark  { background: var(--dusk); color: var(--white); }
.btn-dark:hover { background: var(--night-2); }

/* ── header ──────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: var(--dusk);
  color: var(--white);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 48px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 22px; height: 22px; }
.brand-word { font-family: var(--serif); font-size: 24px; font-weight: 300; letter-spacing: -0.4px; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav-link {
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  padding: 4px 0;
  overflow: hidden;
}
/* underline wipe — the target animates transform on an inner span, .25s */
.nav-link span {
  display: block;
  position: relative;
  transition: transform .25s var(--ease);
}
.nav-link span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover span::after { transform: scaleX(1); }

.header-cta { margin-left: auto; height: 38px; }

.burger { display: none; }

.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 auto 0;
  z-index: 90;
  background: var(--dusk);
  border-top: 1px solid var(--dusk-line);
  padding: 24px var(--gutter) 32px;
  display: grid;
  gap: 20px;
  color: var(--white);
}
.mobile-nav a:not(.btn) { font-size: 20px; }
.mobile-nav .btn { justify-self: start; }

/* ── magnet hero: cursor-reactive tile grid ──────────────────────── */

/* Replaces the old video reel. No canvas, no WebGL, no new dependency — a
   plain CSS grid of tiles that lean toward the pointer. The lean reuses the
   exact translateZ + custom-property technique already proven on .iso-plane
   further down this file, so the codebase has one 3D-tilt idiom, not two. */

.magnet {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--night);
  perspective: 1400px;
  /* pulls the section up under the sticky header, same trick the reel used,
     so the grid starts at the true top of the viewport */
  margin-top: calc(-1 * var(--header-height));
}

/* three layered radial-gradient dust fields at different sizes/positions —
   a starfield with zero canvas and zero JS. The animation just drifts the
   background-position very slowly; reduced-motion freezes it below. */
.magnet-sky {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 65% 12%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 82% 68%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 40% 82%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 8% 68%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 92% 38%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 55% 55%, rgba(255,139,62,.5), transparent);
  background-repeat: repeat;
  background-size: 340px 340px, 260px 260px, 400px 400px, 300px 300px, 220px 220px, 360px 360px, 480px 480px;
  animation: sky-drift 90s linear infinite;
}
@keyframes sky-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: -340px -170px, 260px -130px, -200px 400px, 300px 150px, -220px -220px, 180px -360px, -240px 240px; }
}

.magnet-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  grid-auto-rows: 88px;
  transform-style: preserve-3d;
}

.magnet-cell {
  position: relative;
  border: 1px solid var(--dusk-line);
  transform: translateZ(calc(var(--near, 0) * 34px)) scale(calc(1 + var(--near, 0) * 0.08));
  background: rgba(255, 139, 62, calc(var(--near, 0) * 0.16));
  border-color: color-mix(in srgb, var(--dusk-line) calc(100% - var(--near, 0) * 100%), var(--sun) calc(var(--near, 0) * 100%));
  transition: border-color .2s linear;
  will-change: transform;
}
/* labelled cells are real <button>s (click + keyboard for free). Reset only
   the UA button quirks that actually differ from a div — border/background
   stay untouched so the rule above keeps governing them at equal specificity
   per-property, not per-rule. */
button.magnet-cell {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
/* the pointer loop writes --near every frame; only the fallback state (no
   pointer support / reduced motion) needs an actual CSS transition */
.magnet.is-static .magnet-cell {
  transition: transform .4s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease);
}

.magnet-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: .3px;
  color: var(--white);
  opacity: var(--near, 0);
  pointer-events: none;
}
.magnet-cell[data-has-label] { cursor: pointer; }

.magnet-overlay {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: 14vh;
  max-width: 620px;
  color: var(--white);
  pointer-events: none;
}
.magnet-overlay .mono-s { color: var(--sun); }
.magnet-overlay .h-32 { margin-top: 20px; color: var(--white); }
.magnet-overlay .btn { margin-top: 32px; pointer-events: auto; }

/* clicking a labelled cell opens a card beside that cell rather than
   rewriting the overlay at the bottom of the screen. The answer appears
   where the question was asked, so the eye never has to travel. */
.magnet-pop {
  position: absolute;
  z-index: 4;
  width: 240px;
  padding: 14px 16px;
  background: var(--night-2);
  border: 1px solid var(--dusk-border);
  border-radius: 4px;
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease-out);
}
.magnet-pop.is-on { opacity: 1; transform: none; }
.magnet-pop .mono-s { color: var(--sun); }
.magnet-pop p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255,255,255,.85);
}
.magnet-pop-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  transition: color .25s var(--ease);
}
.magnet-pop-link:hover { color: var(--sun); }

/* a 12px leader line back to the cell that opened it. It sits on the left
   edge normally, and swaps to the right edge when the card had to flip to
   stay inside the viewport. */
.magnet-pop::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 100%;
  width: 12px;
  height: 1px;
  background: var(--sun);
}
.magnet-pop.is-flipped::before { right: auto; left: 100%; }
.magnet-pop.is-below::before { display: none; }

.magnet-scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 46vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(11, 9, 7, 0.9) 0%,
    rgba(11, 9, 7, 0.5) 40%,
    rgba(11, 9, 7, 0) 100%);
}

/* header rides transparent over the grid and lands solid past it */
.site-header.is-over-hero { background: transparent; }

/* ── hero ────────────────────────────────────────────────────────── */

.hero {
  background: var(--night);
  color: var(--white);
  padding-block: 0 72px;
  overflow: clip;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 546px;
  gap: 24px;
  align-items: stretch;
  padding-top: 8px;
}

/* the bracket frame: hairline on the top and bottom edge only, inset */
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 0 120px;
  max-width: 680px;
}
.bracket-frame::before,
.bracket-frame::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: var(--dusk-line);
}
.bracket-frame::before { top: 0; }
.bracket-frame::after  { bottom: 0; }

.hero-copy .h-56 { color: var(--white); }
.hero-sub { margin-top: 24px; max-width: 600px; color: rgba(255,255,255,.78); }
.hero-copy .btn { margin-top: 48px; align-self: flex-start; }

.hero-panels {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding-block: 8px;
}

.panel {
  border: 1px solid var(--dusk-line);
  border-radius: 4px;
  background: rgba(255,255,255,.012);
}
.panel-meter {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
}
.panel-meter .mono-s { color: rgba(255,255,255,.6); white-space: nowrap; }
.meter {
  flex: 1;
  height: 4px;
  border-radius: 1px;
  background: var(--night-2);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sun);
  transition: width 1.6s var(--ease-out);
}

.panel-media { position: relative; padding: 0; }
.media-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
}
.media-head .mono-s {
  color: rgba(255,255,255,.85);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
/* the label swaps with the frame behind it, so it lifts out and drops back in
   rather than snapping to new text mid-crossfade */
.media-head .mono-s.is-swapping { opacity: 0; transform: translateY(-6px); }
.dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--sun); flex: none;
}
.media-stage {
  position: relative;
  aspect-ratio: 546 / 362;
  border-top: 1px solid var(--dusk-line);
  overflow: hidden;
}
.media-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.media-canvas.is-active { opacity: 1; }

.panel-stat { padding: 20px; }
.stat-head { display: flex; align-items: center; gap: 12px; }
.stat-head .mono-s { color: rgba(255,255,255,.6); }
.chip {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--sun);
  border: 1px solid rgba(255,139,62,.4);
  border-radius: 2px;
  padding: 4px 6px;
}
.stat-number {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin-top: 20px;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 16px; line-height: 24px; margin-top: 4px; color: rgba(255,255,255,.85); }

.logo-row {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-top: 64px;
}
.logo-row-label { color: rgba(255,255,255,.6); white-space: nowrap; }
.logo-list {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.logo-list li {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.logo-list li.is-in { opacity: 1; transform: none; }

/* ── corner ticks — the target's signature detail ────────────────── */
/* L-shaped 1px marks at the corners instead of a closed border */

.corner-ticks { position: relative; }
.corner-ticks > .tick,
.corner-ticks::before,
.corner-ticks::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-color: var(--stroke-3);
  border-style: solid;
  border-width: 0;
}
.corner-ticks::before {
  top: -5px; left: -5px;
  border-top-width: 1px; border-left-width: 1px;
}
.corner-ticks::after {
  bottom: -5px; right: -5px;
  border-bottom-width: 1px; border-right-width: 1px;
}

/* ── orbit showcase ──────────────────────────────────────────────── */

.orbit {
  position: relative;
  background: var(--night);
  color: var(--white);
  padding-block: 96px 0;
  overflow: clip;
}
/* the dark-to-white handoff at the bottom of the section */
.orbit-sky {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(11,9,7,0) 0%, #14161f 34%, #6f727f 62%, #ffffff 100%);
  pointer-events: none;
}
.orbit-inner { position: relative; z-index: 1; }
.orbit-eyebrow { text-align: center; color: rgba(255,255,255,.6); }

.orbit-stage {
  position: relative;
  height: 280px;
  margin-top: 40px;
  color: var(--stroke-3);
}
.orbit-arc {
  position: absolute;
  inset-inline: 0;
  width: 100%;
  height: 200px;
  fill: currentColor;
  opacity: .55;
}
.orbit-arc-top { top: 0; }
.orbit-arc-bottom { bottom: 0; }

.orbit-tether {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 1px;
  height: 96px;
  background: var(--stroke-3);
  opacity: .55;
}
.orbit-tether-down { top: auto; bottom: 34px; }

.orbit-card {
  position: absolute;
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  width: 296px;
  padding: 14px;
  border: 1px solid var(--dusk-border);
  border-radius: 4px;
  background: var(--night-2);
}
.orbit-stage-lower { margin-top: 0; }
.orbit-stage-lower .orbit-card { top: 12px; }

.file-glyph {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.85);
  flex: none;
}
.file-glyph.mail { font-family: var(--serif); font-size: 18px; }
.file-meta { display: grid; gap: 4px; min-width: 0; }
.file-meta strong {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 15px; font-weight: 400; color: var(--white);
}
.file-meta em { font-style: normal; font-size: 13px; color: rgba(255,255,255,.55); }
.file-meta .ago { font-size: 11px; }

.float-card {
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out);
}
.float-card.is-in { opacity: 1; transform: translate(-50%, 0); }

.reveal-text {
  position: relative;
  z-index: 2;
  max-width: 888px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: 40px;
  padding-block: 56px;
}
/* letter reveal — one span per character, IO-driven, staggered by index */
.letter-reveal-char {
  display: inline;
  /* pre-wrap keeps the split spaces visible but still lets the line break */
  white-space: pre-wrap;
  color: rgba(255,255,255,.28);
  transition: color .45s var(--ease);
}
.letter-reveal-char.is-lit { color: var(--white); }

/* ── statement + product mockup ──────────────────────────────────── */

.statement {
  position: relative;
  background: var(--white);
  color: var(--ink);
  padding-block: 120px 160px;
}
.statement-inner { max-width: 888px; margin-inline: auto; text-align: center; }
.statement-mark { width: 28px; height: 28px; margin: 0 auto 32px; color: var(--ink); }
.statement-sub { margin-top: 24px; color: #4a423d; }

.product-frame {
  position: relative;
  margin-top: 96px;
}
.product-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border-radius: 4px;
  overflow: hidden;
  background: var(--dusk);
  color: var(--white);
  max-width: 1164px;
  margin-inline: auto;
  min-height: 560px;
  /* the wash eats the bottom of the mockup */
  -webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 46%, transparent 92%);
}
.product-side {
  border-right: 1px solid var(--dusk-line);
  padding: 20px 16px;
  display: grid;
  gap: 16px;
  align-content: start;
  background: var(--night);
}
.product-brand { display: flex; align-items: center; gap: 8px; padding: 4px; }
.product-brand svg { width: 18px; height: 18px; }
.product-brand span { font-family: var(--serif); font-size: 19px; font-weight: 300; }
.product-search {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--dusk-border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.product-search kbd {
  font-family: var(--mono); font-size: 11px;
  background: var(--night-2); border-radius: 2px; padding: 2px 6px; color: rgba(255,255,255,.7);
}
.product-menu { display: grid; gap: 2px; }
.product-menu li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 4px;
  color: rgba(255,255,255,.72);
}
.product-menu li.is-active { background: var(--night-2); color: var(--white); }
.mi { width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 2px; flex: none; opacity: .7; }
.product-menu li.is-active .mi { border-color: var(--sun); background: rgba(255,139,62,.25); opacity: 1; }
.caret {
  width: 5px; height: 5px; margin-left: auto;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); opacity: .5;
}
.product-main { display: grid; grid-template-rows: auto 1fr; }
.product-bar {
  border-bottom: 1px solid var(--dusk-line);
  padding: 14px 24px;
  font-size: 14px;
}
.product-body { padding: 32px 48px; display: grid; gap: 16px; align-content: start; }
.product-title { font-family: var(--serif); font-size: 28px; font-weight: 300; letter-spacing: -0.7px; }
.prompt-box {
  border: 1px solid var(--dusk-border);
  border-radius: 4px;
  padding: 14px;
  display: grid;
  gap: 24px;
}
.prompt-box > p { font-size: 14px; color: rgba(255,255,255,.45); }
.prompt-tools { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,.6); }
.prompt-tools .plus { font-size: 15px; }
.prompt-tools .sep { width: 1px; height: 14px; background: var(--dusk-border); }
.prompt-tools .tool { display: inline-flex; align-items: center; gap: 6px; }
.prompt-tools .mic {
  margin-left: auto; width: 9px; height: 14px; border-radius: 999px;
  border: 1px solid currentColor;
}
.product-section { color: rgba(255,255,255,.5); margin-top: 8px; }
.agent-card {
  border: 1px solid var(--dusk-border);
  border-radius: 4px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.agent-head { display: flex; align-items: center; gap: 10px; }
.agent-head strong { font-size: 16px; font-weight: 400; }
.dot-quiet { background: var(--stroke-3); }
.agent-review {
  margin-left: auto;
  font-size: 12px;
  border: 1px solid var(--dusk-border);
  border-radius: 2px;
  padding: 4px 8px;
}
.agent-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.agent-alert {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  border: 1px solid var(--dusk-border);
  border-radius: 4px;
  padding: 10px 12px;
}
.product-wash {
  position: absolute;
  left: 50%;
  bottom: -120px;
  transform: translateX(-50%);
  width: min(1164px, 100%);
  height: 663px;
  z-index: 1;
}

/* ── command centre ──────────────────────────────────────────────── */

.command { background: var(--white); padding-block: 120px; }
.command-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
}
.command-inner .h-48 { max-width: 760px; }

/* ── feature asset swap ──────────────────────────────────────────── */

/* The bottom padding is scroll runway, not whitespace. The stage is sticky, so
   the section's height minus one viewport is the entire budget the 5-item swap
   has to play out in. At 160px of padding that budget was 320px total, about
   64px per feature — the stack flicked through all five before you could read
   one. */
.features { background: var(--night); color: var(--white); padding-block: 40px min(50vh, 460px); }
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1.65fr 1fr;
  gap: 0;
  align-items: start;
}
.feature-col { display: grid; }

.feature {
  border-top: 1px solid var(--dusk-border);
  padding: 24px 0;
  cursor: pointer;
  /* tall rows give the sticky centre stage its scroll runway — the swap needs
     room to read, the target's equivalent section is 4084px tall */
  min-height: 420px;
  transition: color .25s var(--ease), border-color .35s var(--ease);
}
.feature.is-active { border-top-color: var(--sun); }
.feature-title {
  transition: transform .35s var(--ease-out), color .25s var(--ease);
}
/* the active title steps toward the stack it is describing */
.feature-col-left .feature.is-active .feature-title { transform: translateX(10px); }
.feature-col-right .feature.is-active .feature-title { transform: translateX(-10px); }
/* the two side columns are offset against each other, so a left item and a
   right item never sit on the same baseline */
.feature-col-right { margin-top: 170px; }
.feature-col-left .feature { padding-right: 48px; }
.feature-col-right .feature { padding-left: 48px; }
.feature:last-child { border-bottom: 1px solid var(--dusk-border); }
.feature-title { font-size: 18px; line-height: 27px; font-weight: 400; }
.feature-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s var(--ease-out), opacity .25s var(--ease);
}
.feature-panel > p {
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255,255,255,.7);
  padding-top: 4px;
}
/* two independent triggers reach the same expanded state: is-active (driving
   the black hole right now) and is-revealed (scrolled into view at least
   once, stays open per revealOnce() — see main.js). A feature you've already
   read does not collapse just because a later one became active. */
.feature.is-active .feature-panel,
.feature.is-revealed .feature-panel { grid-template-rows: 1fr; opacity: 1; }

.feature-stage {
  position: sticky;
  align-self: start;
  top: calc(var(--header-height) + 64px);
  height: 640px;
  margin-inline: 24px;
}

/* black hole stage — the one dark panel in the white run of the page, so it
   reads as a window cut into the sheet rather than an illustration sitting on
   it. hole.js renders the hole; this is only the frame and the readout. */
.feature-stage {
  background: var(--night);
  border-radius: 4px;
}
.hole-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

/* instrument readout: index + the service the hole is currently tuned to.
   Same lift-and-drop swap as the hero media card's label. */
.hole-hud {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.82);
  pointer-events: none;
}
.hole-hud #holeIndex { color: var(--sun); }
.hole-hud .mono-s { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.hole-hud.is-swapping .mono-s { opacity: 0; transform: translateY(-6px); }

/* ── marquee ─────────────────────────────────────────────────────── */

/* One oversized line sliding against the scroll. It is the only element on the
   page allowed to break the 1440 container, which is exactly why it registers
   as movement rather than as another block of copy. */
.marquee {
  background: var(--white);
  padding-block: 40px 96px;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  transform: translate3d(var(--slide, 0%), 0, 0);
  will-change: transform;
}
.marquee-track span {
  font-family: var(--serif);
  font-size: 11vw;
  line-height: .92;
  font-weight: 300;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--ink);
}
.marquee-track span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke-2);
}

/* ── integrations ────────────────────────────────────────────────── */

.integrations { position: relative; background: var(--white); padding-block: 0 160px; }
.int-tick {
  position: absolute;
  left: var(--gutter);
  top: 0;
  width: 10px; height: 6px;
  background: var(--sun);
}
.int-panel {
  background: var(--dust);
  border-radius: 4px;
  padding: 96px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
}
.int-copy .h-48 { max-width: 480px; }
.int-copy .body-18-light { margin-top: 24px; max-width: 440px; color: #5b534e; }
.int-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--stroke-1);
  border: 1px solid var(--stroke-1);
  border-radius: 4px;
  overflow: hidden;
}
.int-grid li {
  background: var(--white);
  display: grid;
  place-items: center;
  aspect-ratio: 224 / 86;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 300;
  color: #4a423d;
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out), color .25s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.int-grid li.is-in { opacity: 1; transform: none; }
.int-grid li:hover { color: var(--sun); }

/* ── closing CTA ─────────────────────────────────────────────────── */

.cta { background: var(--night); padding-block: 120px 96px; }
.cta-band {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  min-height: 430px;
  display: grid;
  align-items: stretch;
  background: #150e08;
}
.cta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-content {
  position: relative;
  z-index: 1;
  padding: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  color: var(--white);
}
.cta-content .h-56 { max-width: 560px; color: var(--white); }
.cta-content .btn { align-self: flex-start; }

/* ── footer ──────────────────────────────────────────────────────── */

.site-footer { background: var(--night); color: var(--white); padding-block: 96px 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.footer-grid h3 { color: rgba(255,255,255,.45); margin-bottom: 32px; }
.footer-grid ul { display: grid; gap: 14px; }
.footer-grid a { font-size: 16px; line-height: 24px; transition: color .25s var(--ease); }
.footer-grid a:hover { color: var(--sun); }
.footer-base {
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--dusk-line);
  color: rgba(255,255,255,.4);
}

/* ── scroll reveal ───────────────────────────────────────────────── */

/* Entrances are declared in markup with data-anim. Each variant only sets its
   own start state; .is-in clears all of them the same way. Adding a variant is
   a block here, never a branch in JS. */

[data-anim] {
  opacity: 0;
  transition:
    opacity .8s var(--ease),
    transform .9s var(--ease-out),
    clip-path .9s var(--ease-out),
    filter .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: transform, opacity;
}
[data-anim].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: none;
}

[data-anim="fade-up"]     { transform: translateY(34px); }
[data-anim="slide-left"]  { transform: translateX(-72px); }
[data-anim="slide-right"] { transform: translateX(72px); }
[data-anim="scale-up"]    { transform: scale(.9); }
[data-anim="rotate-in"]   { transform: translateY(44px) rotate(2.2deg); }
[data-anim="clip-up"]     { clip-path: inset(100% 0 0 0); transform: translateY(24px); }
[data-anim="blur-in"]     { filter: blur(16px); transform: translateY(20px) scale(1.03); }

/* a container that only orchestrates its children does not move itself */
[data-anim="stagger"] { opacity: 1; transform: none; }

/* stagger: the container reveals, the children ride in behind it */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* scroll drift, driven by --shift from the shared rAF loop */
[data-parallax] { transform: translate3d(0, var(--shift, 0px), 0); }

/* The orbit cards are both revealed AND drifted, and transform is a single
   property — whichever rule came last would silently erase the other. They get
   one combined declaration instead, placed after both. The -50% is their
   centring offset and has to survive in every state. */
.float-card[data-anim] { transform: translate(-50%, 22px) scale(.96); }
.float-card[data-anim].is-in {
  transform: translate(-50%, var(--shift, 0px)) scale(1);
}

/* ── responsive ──────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panels { max-width: 546px; }
  .command-inner { grid-template-columns: 1fr; }
  .int-panel { grid-template-columns: 1fr; padding: 64px 48px; margin-left: 0; }
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .nav, .header-cta { display: none; }
  .burger {
    display: grid; gap: 5px; margin-left: auto;
    background: none; border: 0; padding: 8px; cursor: pointer;
  }
  .burger span { display: block; width: 22px; height: 1px; background: var(--white); }
  .h-56 { font-size: 40px; line-height: 39.2px; letter-spacing: -1.2px; }
  .h-48 { font-size: 34px; line-height: 35.7px; letter-spacing: -1.02px; }
  .h-32 { font-size: 24px; line-height: 27.6px; letter-spacing: -0.72px; }

  .features-grid { grid-template-columns: 1fr; }
  .feature-stage { position: relative; top: 0; height: 420px; order: -1; margin: 0 0 40px; }
  .feature-col-left .feature, .feature-col-right .feature { padding-inline: 0; }
  .feature-col-right { margin-top: 0; }
  .feature { min-height: 0; }
  .hole-hud { top: 14px; left: 14px; }
  .feature-col-right .feature:first-child { border-top: 0; }

  .magnet-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: 64px; }
  .magnet-cell { transform: translateZ(calc(var(--near, 0) * 22px)) scale(calc(1 + var(--near, 0) * 0.06)); }
  .magnet-overlay { bottom: 22vh; max-width: 100%; padding-right: var(--gutter); }
  .magnet-scrim { height: 60vh; }

  .logo-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .logo-list { flex-wrap: wrap; justify-content: flex-start; gap: 24px 32px; }
  .product-shell { grid-template-columns: 1fr; }
  .product-side { display: none; }
  .cta-content { padding: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .magnet-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); grid-auto-rows: 52px; }
  .magnet-label { font-size: 8px; }
  .h-56 { font-size: 32px; line-height: 31.4px; letter-spacing: -0.96px; }
  .orbit-card { width: min(296px, calc(100vw - 48px)); }
  .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-panel { padding: 48px 24px; }
  .feature-stage { height: 340px; }
  .marquee-track span { font-size: 18vw; }
  .marquee { padding-block: 24px 64px; }
  .magnet-pop { width: 200px; padding: 12px 14px; }
  .statement { padding-block: 72px 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim], [data-stagger] > *, .float-card, .int-grid li, .logo-list li {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
  .letter-reveal-char { color: inherit; }
  [data-parallax], .marquee-track { transform: none; }
  .magnet-pop { transform: none; }
  /* CSS backstop: even if the pointer loop somehow still ran, no cell moves */
  .magnet-cell { transform: none !important; }
  .magnet-sky { animation: none; }
}