/* ============================================================
   WIN TECHNOLOGIES
   A scroll-driven film: two looping films, fixed scene panels
   that fade in and out, and a rail that is both progress and nav.
   Nothing scrolls with the page except the invisible spacers.
   ============================================================ */

:root {
  --blue-900: #001A33;
  --blue-700: #0B4FA0;
  --blue-500: #0B84F3;
  --blue-400: #2E9BFF;
  --cyan-400: #21D4FE;
  --cyan-300: #5FE4FF;

  --bg:      #04070E;
  --surface: rgba(10, 17, 31, 0.60);
  --border:  rgba(46, 71, 110, 0.55);
  --border-2: rgba(70, 102, 150, 0.75);

  --fg:       #E9F1FC;
  --fg-muted: #A6B8D0;
  --fg-dim:   #7C8FA8;

  --font-display: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 260ms;

  --pad: clamp(1.15rem, 3.5vw, 3rem);
  --rail-w: 176px;
}

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

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

/* The rail is the progress indicator, so a second one in the corner of
   the window would just be noise. Content still scrolls every other way. */
html, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  text-transform: uppercase;
}

/* The fill is transparent so the gradient shows through, which means any
   inherited text-shadow would paint straight through the glyph and fill it
   with the shadow colour. The legibility halo has to be a filter instead. */
.grad {
  background: linear-gradient(96deg, var(--cyan-300), var(--blue-400) 55%, var(--blue-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 3px rgba(4, 7, 14, 0.95))
          drop-shadow(0 3px 14px rgba(4, 7, 14, 0.8));
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; left: 50%; top: -80px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--blue-500); color: #fff;
  padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px; font-weight: 600;
  transition: top var(--t) var(--ease);
}
.skip:focus { top: 0; }

/* ============================================================
   THE STAGE
   ============================================================ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}

/* Both films are promoted once and left promoted — toggling will-change
   makes the browser build and bin the video layer repeatedly, which
   flickers. Opacity is driven per frame by the script, not transitioned,
   so the crossfade tracks the scrollbar instead of lagging behind it. */
.film {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* What the page falls back to between the two films: the same palette,
   held deliberately still so the middle scene reads as a pause and not
   as a video that failed to load. */
.stage__neutral {
  position: absolute;
  inset: 0;
  /* Up by default: if the script never runs, the page keeps its palette
     instead of falling back to flat black. */
  opacity: 1;
  background:
    radial-gradient(900px 640px at 50% 42%, rgba(11, 79, 160, 0.30), transparent 66%),
    radial-gradient(700px 520px at 82% 78%, rgba(33, 212, 254, 0.10), transparent 62%),
    var(--bg);
}

/* ---------- the build backdrop ----------
   Covers the filmless middle of the page. A blueprint the page is
   drawing: a fine measured grid, module outlines that fade in and out
   as if being placed, and a plotter line sweeping down the sheet. */
.stage__build {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
}
/* CSS animations keep running at opacity 0, so they are held still until
   the script says this backdrop is actually on screen. */
.stage__build:not(.is-live) * { animation-play-state: paused; }

.build__grid {
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(to right, rgba(33, 212, 254, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33, 212, 254, 0.10) 1px, transparent 1px),
    linear-gradient(to right, rgba(45, 108, 180, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 108, 180, 0.16) 1px, transparent 1px);
  background-size: 136px 136px, 136px 136px, 34px 34px, 34px 34px;
  mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 25%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 25%, transparent 82%);
  animation: build-drift 34s linear infinite;
}
@keyframes build-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-136px, -136px, 0); }
}

.build__modules { position: absolute; inset: 0; }
.build__modules i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1px solid rgba(33, 212, 254, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(11, 132, 243, 0.10), rgba(11, 132, 243, 0.02));
  box-shadow: 0 0 26px -8px rgba(33, 212, 254, 0.55) inset;
  opacity: 0;
  animation: build-place var(--dur) ease-in-out var(--delay) infinite;
}
/* corner ticks, so each one reads as a part being set down rather than
   a floating rectangle */
.build__modules i::before,
.build__modules i::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border: 1px solid rgba(95, 228, 255, 0.75);
}
.build__modules i::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.build__modules i::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

@keyframes build-place {
  0%, 100% { opacity: 0;    transform: translate3d(0, 14px, 0) scale(0.96); }
  14%      { opacity: 0.85; transform: translate3d(0, 0, 0)    scale(1); }
  62%      { opacity: 0.85; transform: translate3d(0, -6px, 0) scale(1); }
  80%      { opacity: 0;    transform: translate3d(0, -16px, 0) scale(1.01); }
}

/* the plotter pass */
.build__scan {
  position: absolute;
  left: 0; right: 0;
  height: 220px;
  background: linear-gradient(180deg,
    transparent, rgba(33, 212, 254, 0.07) 45%, rgba(95, 228, 255, 0.18) 50%,
    rgba(33, 212, 254, 0.07) 55%, transparent);
  animation: build-scan 11s linear infinite;
}
@keyframes build-scan {
  from { transform: translateY(-240px); }
  to   { transform: translateY(100vh); }
}

.stage__tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 760px at 50% 40%, rgba(11, 79, 160, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(4, 7, 14, 0.55), rgba(4, 7, 14, 0.30) 40%, rgba(4, 7, 14, 0.70));
}
.stage__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(45, 108, 180, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 108, 180, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 45%, #000 12%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 12%, transparent 74%);
}
.stage__vig {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(4, 7, 14, 0.86) 100%);
}

/* ============================================================
   BRAND STAMP
   ============================================================ */
.stamp {
  position: fixed;
  top: clamp(14px, 2.2vh, 26px);
  left: clamp(76px, 7vw, 120px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  opacity: 0.72;
  transition: opacity var(--t) var(--ease);
}
.stamp:hover { opacity: 1; }
.stamp img { width: 34px; height: 34px; object-fit: contain; }
.stamp__text { display: grid; line-height: 1; }
.stamp__text strong {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.12em;
}
.stamp__text em {
  font-family: var(--font-mono); font-style: normal;
  font-size: 0.54rem; letter-spacing: 0.26em; color: var(--fg-dim); margin-top: 3px;
}

/* ============================================================
   THE RAIL
   Semi-transparent at rest, full on hover or keyboard focus.
   ============================================================ */
.rail {
  position: fixed;
  left: clamp(12px, 1.8vw, 30px);
  top: 0;
  height: 100vh;
  width: var(--rail-w);
  z-index: 45;
  opacity: 0.42;                     /* semi-invisible at rest, full on approach */
  transition: opacity 300ms var(--ease);
  pointer-events: none;              /* only the dots take clicks */
}
.rail:hover, .rail:focus-within, .rail.is-near { opacity: 1; }

.rail__track {
  position: absolute;
  left: 9px; top: 13vh; bottom: 13vh;
  width: 1px;
  background: rgba(160, 190, 230, 0.20);
  border-radius: 1px;
  overflow: hidden;
}
.rail__track i {
  position: absolute; left: 0; top: 0; width: 100%;
  height: 100%;
  display: block;
  transform-origin: top;
  transform: scaleY(var(--ride, 0));
  background: linear-gradient(180deg, var(--cyan-400), var(--blue-700));
  box-shadow: 0 0 10px rgba(33, 212, 254, 0.6);
}

.rail__dot {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  transform: translateY(-50%);
  pointer-events: auto;
}
.rail__dot i {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  flex: none;
  background: rgba(190, 214, 240, 0.42);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.rail__dot:hover i { background: rgba(255, 255, 255, 0.92); transform: scale(1.35); }
.rail__dot.is-on i {
  background: var(--cyan-400);
  transform: scale(1.65);
  box-shadow: 0 0 12px rgba(33, 212, 254, 0.9);
}
.rail__dot.is-past i { background: rgba(33, 212, 254, 0.55); }

/* The label is a caption, not a hit area — a 176px-wide button per dot
   would quietly hand the rail a whole column of the screen. */
.rail__dot b {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(190, 214, 240, 0.55);
  opacity: 0;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
  pointer-events: none;
}
.rail:hover .rail__dot b,
.rail:focus-within .rail__dot b,
.rail.is-near .rail__dot b { opacity: 1; }
.rail__dot.is-on b { color: var(--cyan-300); }

/* ============================================================
   SCENES
   Fixed layers. The script owns opacity, visibility and --k.
   ============================================================ */
.scene {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  padding: clamp(4.5rem, 9vh, 6.5rem) var(--pad) clamp(3rem, 7vh, 5rem);
  padding-left: max(var(--pad), 64px);
}

/* Every scene is hidden until the script paints it, so the opening one
   is visible in CSS as well — otherwise a failed script leaves a black
   page instead of a readable one. The script overrides this inline. */
.scene[data-first="1"] { opacity: 1; visibility: visible; }

/* A soft well behind the copy so it survives whatever the film is doing.
   Kept thin: most of the legibility comes from the text shadow below,
   which rides on the glyphs and leaves the picture visible everywhere else. */
.scene--pane::before,
.scene--beat::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 66% 58% at 50% 50%,
      rgba(4, 7, 14, 0.80) 0%, rgba(4, 7, 14, 0.72) 22%,
      rgba(4, 7, 14, 0.56) 42%, rgba(4, 7, 14, 0.34) 60%,
      rgba(4, 7, 14, 0.14) 74%, rgba(4, 7, 14, 0) 88%);
}

.scene__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  max-height: 100%;
  text-shadow: 0 0 2px rgba(4, 7, 14, 0.96), 0 1px 3px rgba(4, 7, 14, 0.92),
               0 2px 9px rgba(4, 7, 14, 0.85), 0 6px 22px rgba(4, 7, 14, 0.7);
}
/* Small copy is what genuinely struggles over moving footage — a headline
   has the mass to survive it, a 14px line does not. */
.scene__inner p, .scene__inner h3, .scene__inner label, .scene__inner li {
  text-shadow: 0 0 2px rgba(4, 7, 14, 1), 0 0 4px rgba(4, 7, 14, 0.98),
               0 0 9px rgba(4, 7, 14, 0.9), 0 0 18px rgba(4, 7, 14, 0.78);
}
.scene__inner .btn, .scene__inner .showcase * { text-shadow: none; }

/* ---------- staggered entrance, driven by --k ---------- */
/* Every staggered item owns both halves of its life:
     --kc  0→1 as it arrives, staggered by --th
     --xc  0→1 as it leaves, staggered the same way
   so a row of tiles arrives one at a time AND leaves one at a time,
   rather than the panel dimming as a single block. It enters from
   below and keeps going upward on the way out. */
.st {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * var(--sp, 2.6), 1);
  --xc: clamp(0, (var(--kx, 0) - var(--th, 0)) * var(--sp, 2.6), 1);
  opacity: calc(var(--kc) * (1 - var(--xc)));
  transform: translateY(calc((1 - var(--kc)) * 20px - var(--xc) * 26px));
}

.kicker { color: var(--cyan-400); }
.h2 { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
.lede { color: var(--fg-muted); font-size: clamp(0.95rem, 1.25vw, 1.1rem); }

.pane__head { display: grid; gap: 0.75rem; margin-bottom: clamp(1.5rem, 3.5vh, 2.6rem); max-width: 760px; }
.pane__head--center { margin-inline: auto; text-align: center; }
.pane__head--center .lede { margin-inline: auto; max-width: 58ch; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn--full { width: 100%; }
.btn--primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(11, 132, 243, 0.9);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(33, 212, 254, 0.8); }
.btn--ghost {
  border-color: var(--border-2);
  background: rgba(9, 15, 27, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--cyan-400); background: rgba(33, 212, 254, 0.10); }
.btn__arrow { transition: transform var(--t) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   01 HERO
   ============================================================ */
.hero { display: grid; gap: clamp(0.9rem, 2vh, 1.5rem); max-width: 900px; }
.hero__title { font-size: clamp(2.1rem, 5.6vw, 4.3rem); font-weight: 800; }
.hero .row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.3rem; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 4vw, 3rem);
  margin-top: clamp(0.5rem, 2vh, 1.2rem);
  padding-top: clamp(0.9rem, 2.5vh, 1.6rem);
  border-top: 1px solid var(--border);
}
.facts li { display: grid; gap: 0.2rem; max-width: 15rem; }
.facts b {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
  font-weight: 700;
  color: var(--cyan-300);
  font-variant-numeric: tabular-nums;
}
.facts__word { font-size: clamp(1.05rem, 2vw, 1.4rem) !important; }
.facts span { font-size: 0.82rem; color: var(--fg-dim); }

.cue {
  position: absolute;
  left: 50%; bottom: clamp(16px, 3vh, 30px);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.5rem;
  color: var(--fg-dim);
  opacity: var(--k, 1);
}
.cue i {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--cyan-400), transparent);
  transform-origin: top;
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.3); opacity: 0.35; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   02 WHAT WE DO — the deck
   ============================================================ */
.what { display: grid; gap: clamp(1rem, 3vh, 2rem); }
.what__head { display: grid; gap: 0.55rem; }
.what__body {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* ---------- the model viewport ---------- */
.showcase {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 46vh;
  margin: 0 auto;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, rgba(11, 79, 160, 0.24), transparent 66%),
    rgba(6, 11, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.showcase.is-dragging { cursor: grabbing; }
.showcase canvas { width: 100%; height: 100%; position: relative; }
.showcase__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(to top, rgba(4, 7, 14, 0.88), transparent);
  pointer-events: none;
}
.showcase__label { color: var(--cyan-300); }
.showcase__hint { color: var(--fg-dim); font-size: 0.58rem; }

/* ---------- the deck: cards stacked in place, one shown at a time ---------- */
.deck { position: relative; min-height: clamp(300px, 46vh, 420px); }

.deck__card {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0.75rem;
  align-content: center;
  padding: clamp(1.2rem, 2.5vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 23, 39, 0.72), rgba(6, 11, 20, 0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* --ck is this card's presence, 0 to 1, set by the script */
  opacity: var(--ck, 0);
  transform: translateY(calc((1 - var(--ck, 0)) * 26px)) scale(calc(0.97 + 0.03 * var(--ck, 0)));
  visibility: hidden;
  pointer-events: none;
}
.deck__card.is-shown { visibility: visible; }
.deck__card.is-current { pointer-events: auto; }
.deck__num { color: var(--cyan-400); }
.deck__card h3 { font-size: clamp(1.15rem, 2.2vw, 1.65rem); }
.deck__card > p { color: var(--fg-muted); font-size: 0.95rem; }

.deck__pips {
  position: absolute;
  left: clamp(1.2rem, 2.5vw, 1.9rem);
  bottom: -1.6rem;
  display: flex;
  gap: 7px;
}
.deck__pips li {
  width: 22px; height: 3px;
  border-radius: 3px;
  background: rgba(160, 190, 230, 0.22);
  transition: background var(--t) var(--ease);
}
.deck__pips li.is-on { background: var(--cyan-400); box-shadow: 0 0 10px rgba(33, 212, 254, 0.8); }

.ticks { display: grid; gap: 0.42rem; }
.ticks li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.88rem;
  color: var(--fg-muted);
}
.ticks li::before {
  content: '';
  position: absolute; left: 0; top: 0.42em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--cyan-400);
  border-bottom: 1.5px solid var(--cyan-400);
  transform: rotate(-45deg);
}

/* ============================================================
   GRIDS — services, promises, steps, plans
   ============================================================ */
.grid { display: grid; gap: clamp(0.8rem, 1.6vw, 1.15rem); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 23, 39, 0.68), rgba(6, 11, 20, 0.58));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--border-2); }
.card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--border-2);
  background: rgba(11, 132, 243, 0.12);
  color: var(--cyan-300);
}
.card__icon svg { width: 20px; height: 20px; }
.card h3 { font-size: 1.02rem; }
.card p { color: var(--fg-muted); font-size: 0.86rem; }

/* ---------- promises ---------- */
.promise li { display: grid; gap: 0.45rem; align-content: start; }
.promise__mark {
  width: 26px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan-300), var(--blue-500));
  box-shadow: 0 0 14px rgba(33, 212, 254, 0.6);
  margin-bottom: 0.3rem;
}
.promise h3 { font-size: 1.02rem; }
.promise p { color: var(--fg-muted); font-size: 0.87rem; }

/* ---------- steps ---------- */
.steps { position: relative; }
.steps li { display: grid; gap: 0.45rem; align-content: start; }
.steps__node {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--cyan-400);
  background: rgba(4, 7, 14, 0.8);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--cyan-300);
  margin-bottom: 0.35rem;
  box-shadow: 0 0 18px -4px rgba(33, 212, 254, 0.7);
}
.steps h3 { font-size: 1.02rem; }
.steps p { color: var(--fg-muted); font-size: 0.87rem; }

/* ---------- plans ---------- */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.1rem, 2vw, 1.65rem);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 23, 39, 0.68), rgba(6, 11, 20, 0.58));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.plan--featured {
  border-color: rgba(33, 212, 254, 0.42);
  background: linear-gradient(180deg, rgba(11, 79, 160, 0.32), rgba(6, 11, 20, 0.7));
  box-shadow: 0 30px 80px -50px rgba(33, 212, 254, 0.95);
}
/* Beside the title, not hanging off the card's edge — the panels clip
   their own overflow now for the wipe, which would cut it in half. */
.plan__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 30px;
}
.plan__title h3 { margin-right: auto; }
.plan__tag {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-500), var(--cyan-400));
  color: #04070E;
  font-weight: 500;
  white-space: nowrap;
}
.plan h3 { font-size: 1.25rem; }
.plan__price {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700;
  display: grid; line-height: 1.2;
}
.plan__price span {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-dim); font-weight: 400; margin-top: 0.3rem;
}
/* the floor of the card, so all three line up */
.plan .btn { margin-top: auto; }

/* ============================================================
   07 CONTACT
   ============================================================ */
.form {
  display: grid;
  gap: clamp(0.7rem, 1.6vh, 1rem);
  padding: clamp(1.2rem, 2.5vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 23, 39, 0.72), rgba(6, 11, 20, 0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.5vw, 1rem); }
.field { display: grid; gap: 0.32rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-dim);
}
.field input, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.85rem;
  border-radius: 11px;
  border: 1px solid var(--border-2);
  background: rgba(4, 7, 14, 0.68);
  font-size: 0.94rem;
  resize: vertical;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(33, 212, 254, 0.16);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #F87171; }
.field__err { font-size: 0.75rem; color: #FCA5A5; min-height: 1em; }

/* Stacked, not side by side: a wide button next to a line of small grey
   text never balanced — one is a target, the other is a footnote. */
.form__send {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  margin-top: 0.35rem;
}
.form__send .btn { width: 100%; max-width: 340px; }
.form__alt { font-size: 0.8rem; color: var(--fg-dim); text-align: center; }
.form__alt a { color: var(--cyan-300); border-bottom: 1px solid rgba(95, 228, 255, 0.35); }
.form__status { font-size: 0.85rem; color: var(--cyan-300); }

/* ============================================================
   07 TELL US + END — one scene, the ask on top, the end below
   ============================================================ */
.close {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(0.8rem, 2.2vh, 1.6rem);
  max-width: 860px;
  height: 100%;
  align-content: center;
  /* This scene carries the most in one viewport — the ask and the end
     together. A field error appearing must never push the footer out of
     reach, so it scrolls inside itself as a last resort at any size. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Short viewports: shed the lede and tighten the form rather than
   letting the closing scene start scrolling. */
@media (max-height: 780px) {
  .close .lede { display: none; }
  .close .form { padding: clamp(0.9rem, 2vw, 1.3rem); gap: 0.55rem; }
  .close__foot { padding-top: 0.7rem; }
  .close .foot__motto { display: none; }
}
.close__top { display: grid; align-content: center; gap: clamp(0.7rem, 1.6vh, 1.1rem); }
.close .pane__head { margin-bottom: 0; gap: 0.5rem; }
.close .lede { font-size: 0.92rem; max-width: 52ch; }
.close .form { gap: 0.6rem; }

.close__foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-top: clamp(0.9rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--border);
}
.foot__mid { display: grid; gap: 0.3rem; }
.foot__end { display: grid; justify-items: end; gap: 0.5rem; text-align: right; }

/* The artwork is transparent and stays that way. Note its wordmark measures
   1.2:1 against this background, so the words underneath it are carrying the
   name — the image is here as the mark, not as the label. */
.foot__plate {
  display: block;
  opacity: 0.95;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.foot__plate:hover { opacity: 1; transform: translateY(-2px); }
.foot__plate img {
  width: clamp(115px, 13vw, 150px);
  height: auto;
  /* the artwork carries generous empty margins */
  margin: -6% 0;
}

.foot__logo { display: flex; align-items: center; gap: 0.7rem; }
.foot__logo img { width: 40px; height: 40px; object-fit: contain; }
.foot__logo span { display: grid; line-height: 1; }
/* The supplied logo PNG sets its wordmark and motto in near-black, which
   disappears here — so the lockup is typeset instead of using that image. */
.foot__logo strong {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800; letter-spacing: 0.14em;
  /* Solid, not a clipped gradient: a transparent fill lets the inherited
     text-shadow paint through the glyph, which is what made this
     unreadable. Matches the stamp top-left. */
  color: var(--fg);
}
.foot__logo em {
  font-family: var(--font-mono); font-style: normal;
  font-size: 0.55rem; letter-spacing: 0.28em; color: var(--fg-dim); margin-top: 5px;
}
.foot__motto { color: var(--fg-muted); font-size: 0.9rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.foot__links a {
  font-size: 0.88rem; color: var(--fg-muted);
  border-bottom: 1px solid rgba(160, 190, 230, 0.25);
  padding-bottom: 2px;
  transition: color var(--t) var(--ease);
}
.foot__links a:hover { color: var(--cyan-300); }
.foot__fine { color: var(--fg-dim); font-size: 0.6rem; }

/* ============================================================
   04 OUR PRODUCTS — the shelf
   A ring of cards. The ring never turns; each card is placed at
   its own offset from the front, and the offset wraps.
   ============================================================ */
.shelf {
  position: relative;
  height: var(--shelfh, 340px);
  perspective: 1800px;
  touch-action: pan-y;
  outline: none;
}
.ring { position: absolute; inset: 0; transform-style: preserve-3d; }

.cap {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--capw, 280px);
  height: var(--caph, 240px);
  margin-left: calc(var(--capw, 280px) / -2);
  margin-top: calc(var(--caph, 240px) / -2);
  transform: rotateY(var(--ang, 0deg)) translateZ(var(--radius, 400px));
  opacity: var(--cop, 1);
  z-index: var(--czi, 1);
  backface-visibility: hidden;
  transition: transform 620ms var(--ease), opacity 620ms var(--ease),
              border-color 300ms var(--ease), box-shadow 300ms var(--ease);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  cursor: pointer;
  background: #0C1424;
  display: grid;
  grid-template-rows: 1fr auto;
  border: 1px solid var(--border);
  box-shadow: 0 26px 46px -24px rgba(0, 0, 0, 0.85);
}
.cap[data-front="1"] {
  border-color: rgba(33, 212, 254, 0.55);
  box-shadow: 0 34px 58px -26px rgba(0, 0, 0, 0.9),
              0 0 40px -14px rgba(33, 212, 254, 0.6);
}
.cap[data-off="1"] { pointer-events: none; }

/* A capsule: the preview fills the top, the meta sits in a solid band
   under it. The art was previously buried under a full-height scrim,
   which defeated the point of having a preview at all. */
.cap__shot {
  position: relative;
  overflow: hidden;
  background: #070C16;
}
.cap__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 620ms var(--ease);
}
.cap[data-front="1"]:hover .cap__shot img { transform: scale(1.04); }

/* just enough of a fade to seat the art on the band below it */
.cap__shot::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(10, 18, 32, 0.98), rgba(10, 18, 32, 0));
  pointer-events: none;
}

.cap__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px 11px;
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.98), rgba(6, 11, 20, 0.99));
  border-top: 1px solid rgba(46, 71, 110, 0.5);
  color: var(--fg);
  z-index: 2;
}
.cap__tag { color: var(--cyan-300); font-size: 0.58rem; }
.cap__title { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; line-height: 1.15; }
.cap__short {
  font-size: 0.74rem;
  color: var(--fg-muted);
  line-height: 1.35;
  /* two lines maximum, so one long line cannot push the art out of the card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "View detail" is a hover cue, not a permanent label — it says what the
   pointer will do, so it belongs to the pointer. Height is reserved either
   way so the meta block does not jump when it appears. */
.cap__more {
  margin-top: 3px;
  font-size: 0.55rem;
  color: var(--cyan-300);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
              letter-spacing var(--t) var(--ease);
}
.cap[data-front="1"]:hover .cap__more,
.cap[data-front="1"]:focus-visible .cap__more {
  opacity: 1;
  transform: none;
  letter-spacing: 0.2em;
}

/* the same corner brackets and sheen the rest of the page uses */
.cap::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  background:
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 0 / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 0 / 1px 13px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 0 / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 0 / 1px 13px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 100% / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 100% / 1px 13px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 100% / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 100% / 1px 13px no-repeat;
}
.cap[data-front="1"]:hover::before,
.cap[data-front="1"]:focus-visible::before { opacity: 0.9; }

.cap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(120, 220, 255, 0.16), transparent);
  transform: translateX(-200%) skewX(-18deg);
  transition: transform 760ms var(--ease);
}
.cap[data-front="1"]:hover::after { transform: translateX(340%) skewX(-18deg); }

.shelf__nav {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
  z-index: 30;
  pointer-events: none;
  /* pulled inside so the left arrow never sits over the rail */
  padding: 0 clamp(0px, 1vw, 14px);
}
.shelf__arrow {
  pointer-events: auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: rgba(6, 11, 20, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.shelf__arrow:hover { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.shelf__arrow svg { width: 20px; height: 20px; }

.shelf__hint { color: var(--fg-dim); text-align: center; margin-top: 1rem; font-size: 0.58rem; }

/* ============================================================
   PRODUCT DETAIL SHEET
   ============================================================ */
/* `display` here overrides the browser's own [hidden] { display: none },
   so the closed dialog would otherwise sit over the whole page and swallow
   every click on it. This rule is load-bearing, not tidiness. */
.sheet[hidden] { display: none; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.sheet.is-open { opacity: 1; }
.sheet__veil { position: absolute; inset: 0; background: rgba(2, 4, 9, 0.82); backdrop-filter: blur(6px); }

.sheet__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  width: min(940px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(14, 23, 39, 0.97), rgba(6, 11, 20, 0.97));
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  transform: translateY(14px) scale(0.985);
  transition: transform 340ms var(--ease);
}

/* The panel arrives the way every other panel on the page does: a wipe
   up behind a lit edge, then corner brackets. Same vocabulary, so the
   popup does not read as a different piece of software. */
.sheet.is-open .sheet__box {
  transform: none;
  animation: sheet-in 560ms var(--ease) both;
}
@keyframes sheet-in {
  0%   { clip-path: inset(0 0 100% 0 round 20px); transform: translateY(16px) scale(0.985); }
  100% { clip-path: inset(0 0 0% 0 round 20px);   transform: none; }
}

/* the lit edge riding the reveal */
.sheet.is-open .sheet__box::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan-300), transparent);
  box-shadow: 0 0 18px rgba(33, 212, 254, 0.95);
  animation: sheet-edge 560ms var(--ease) both;
}
@keyframes sheet-edge {
  0%   { top: 0;    opacity: 1; }
  85%  { top: 100%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* corner brackets, always on — this panel has the focus */
.sheet__box::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.6;
  background:
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 0 / 16px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 0 / 16px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 0 / 1px 16px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 100% / 16px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 100% / 1px 16px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 100% / 1px 16px no-repeat;
}

.sheet__close {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(4, 7, 14, 0.7);
  color: var(--fg);
  z-index: 4;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.sheet__close:hover { border-color: var(--cyan-400); background: rgba(33, 212, 254, 0.12); }
.sheet__close svg { width: 17px; height: 17px; }

.sheet__media {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #070C16;
}
.sheet__media img { width: 100%; height: auto; display: block; }

/* contents arrive after the panel has opened, staggered like a scene */
.sheet.is-open .sheet__media { animation: sheet-part 620ms var(--ease) 180ms both; }
.sheet.is-open .sheet__body > * { animation: sheet-part 520ms var(--ease) both; }
.sheet.is-open .sheet__body > *:nth-child(1) { animation-delay: 230ms; }
.sheet.is-open .sheet__body > *:nth-child(2) { animation-delay: 290ms; }
.sheet.is-open .sheet__body > *:nth-child(3) { animation-delay: 350ms; }
.sheet.is-open .sheet__body > *:nth-child(4) { animation-delay: 410ms; }
.sheet.is-open .sheet__body > *:nth-child(5) { animation-delay: 470ms; }
@keyframes sheet-part {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

.sheet__body { display: grid; gap: 0.7rem; align-content: center; }
.sheet__tag { color: var(--cyan-300); }
.sheet__title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.85rem); }
.sheet__desc { color: var(--fg-muted); font-size: 0.92rem; }
.sheet__body .btn { justify-self: start; margin-top: 0.3rem; }

body.sheet-open { overflow: hidden; }

/* ============================================================
   MOTION LANGUAGE
   ------------------------------------------------------------
   One vocabulary, used everywhere, so the page reads as a system
   rather than a pile of separate effects:

     things WIPE in behind a lit edge, they do not simply fade
     lists DRAW themselves one item at a time
     panels wear CORNER BRACKETS when you point at them
     anything you can press catches a SHEEN

   All of it hangs off --kc, the same per-item entrance progress the
   stagger already computes, so it is tied to the scrollbar rather
   than firing on a timer. Transforms, opacity and clip-path only —
   nothing here forces a layout or a filter pass per frame.
   ============================================================ */

/* Deck cards carry their own presence value; alias it so everything
   below can read one name. */
.deck__card { --kc: var(--ck, 1); }

/* ---------- kickers: a rule draws itself in before the label ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
}
.pane__head--center .kicker, .close .kicker { justify-self: center; }
.kicker::before {
  content: '';
  flex: none;
  width: 1.15rem;
  height: 1px;
  background: var(--cyan-400);
  box-shadow: 0 0 8px rgba(33, 212, 254, 0.9);
  transform: scaleX(calc(var(--kc, 1) * (1 - var(--xc, 0))));
  transform-origin: left;
}

/* ---------- headings wipe in from the left ---------- */
.h2, .hero__title {
  clip-path: inset(0 calc((1 - var(--kc, 1)) * 100%) 0 calc(var(--xc, 0) * 100%));
}

/* ---------- panels: wipe open, wipe away, lit edge riding the boundary ----------
   One expression covers both halves. The hidden fraction is whichever is
   larger: what has not arrived yet, or what has already left. So the
   panel opens downward and later closes back upward. */
.card, .plan, .promise li, .steps li {
  --hidden: max(calc(1 - var(--kc, 1)), var(--xc, 0));
}
.card, .plan {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 calc(var(--hidden) * 100%) 0 round 16px);
}
.promise li, .steps li {
  clip-path: inset(0 0 calc(var(--hidden) * 100%) 0);
}

/* The edge sits on the moving boundary and lights up whenever the panel
   is in motion — arriving or leaving — and is gone while it holds. */
.card::after, .plan::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  top: calc((1 - var(--hidden)) * 100%);
  background: linear-gradient(90deg, transparent, var(--cyan-300), transparent);
  box-shadow: 0 0 16px rgba(33, 212, 254, 0.9);
  opacity: calc(var(--hidden) * 1.5);
  pointer-events: none;
}

/* corner brackets, on approach only */
.card::before, .plan::before {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  background:
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 0 / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 0 / 1px 13px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 0 / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 0 / 1px 13px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 100% / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 0 100% / 1px 13px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 100% / 13px 1px no-repeat,
    linear-gradient(var(--cyan-400), var(--cyan-400)) 100% 100% / 1px 13px no-repeat;
}
.card:hover::before, .plan:hover::before { opacity: 0.85; }

.card__icon {
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.card:hover .card__icon {
  transform: translateY(-2px);
  border-color: var(--cyan-400);
  box-shadow: 0 0 22px -5px rgba(33, 212, 254, 0.85);
}

/* ---------- lists draw in, one item at a time ---------- */
/* The last item's threshold and the multiplier are a pair: (1 - --lt) *
   mult must clear 1, or that item never finishes opening and sits at
   partial opacity forever. At --lt 0.51 the slowest reaches full at
   --kc 0.90, with room to spare. */
.ticks li {
  --lk: clamp(0, (var(--kc, 1) - var(--lt, 0)) * 2.6, 1);
  opacity: calc(var(--lk) * (1 - var(--xc, 0)));
  transform: translateX(calc((1 - var(--lk)) * -12px + var(--xc, 0) * 14px));
}
.ticks li::before {
  transform: rotate(-45deg) scale(var(--lk, 1));
  transition: none;
}
.ticks li:nth-child(1) { --lt: 0.15; }
.ticks li:nth-child(2) { --lt: 0.24; }
.ticks li:nth-child(3) { --lt: 0.33; }
.ticks li:nth-child(4) { --lt: 0.42; }
.ticks li:nth-child(5) { --lt: 0.51; }

/* ---------- the small marks scale in with their block ---------- */
.promise__mark { transform: scaleX(calc(var(--kc, 1) * (1 - var(--xc, 0)))); transform-origin: left; }
.steps__node {
  transform: scale(calc(0.72 + 0.28 * var(--kc, 1) - 0.28 * var(--xc, 0)));
  transition: box-shadow var(--t) var(--ease);
}
.steps li:hover .steps__node { box-shadow: 0 0 26px -3px rgba(33, 212, 254, 0.95); }

/* ---------- anything pressable catches a sheen ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-200%) skewX(-18deg);
  transition: transform 720ms var(--ease);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(340%) skewX(-18deg); }

/* ---------- the deck pips fill rather than just switching ---------- */
.deck__pips li { position: relative; overflow: hidden; }
.deck__pips li.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan-400);
  box-shadow: 0 0 10px rgba(33, 212, 254, 0.9);
  animation: pip-fill 520ms var(--ease) forwards;
  transform-origin: left;
}
@keyframes pip-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================
   THE SCROLL TRACK
   ============================================================ */
.spacer { position: relative; pointer-events: none; height: 165vh; }
.spacer--long  { height: 320vh; }  /* three cards to get through */
/* The scrubbed film is spread across these plus the closing scene: more
   height here is a slower, smoother scrub, less is a faster one. */
.spacer--scrub { height: 200vh; }
.spacer--close { height: 230vh; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
  .rail { width: 44px; }
  .rail__dot b { display: none; }
}

@media (max-width: 1024px) {
  .what__body { grid-template-columns: 1fr; gap: 1.2rem; }
  .showcase { max-height: 26vh; max-width: 260px; }
  .deck { min-height: clamp(260px, 40vh, 360px); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .stamp { left: clamp(52px, 12vw, 76px); }
  .stamp__text { display: none; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .close__foot {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
  }
  .foot__mid { justify-items: center; }
  .foot__links { justify-content: center; }
  .foot__end { justify-items: center; text-align: center; }
  .scene { padding-left: max(var(--pad), 52px); }
  /* Enough cards to overflow a phone screen — let the panel scroll
     rather than clipping the last one off the bottom. */
  .scene--pane .scene__inner { overflow-y: auto; overscroll-behavior: contain; }
  .showcase { max-height: 20vh; max-width: 190px; }
}

@media (max-height: 620px) {
  .rail { display: none; }
  .cue { display: none; }
  .scene { padding-block: 3.5rem 2.5rem; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .st { opacity: 1 !important; transform: none !important; }
  .cue { display: none; }

  /* The whole motion language resolves to its finished state. */
  .h2, .hero__title, .card, .plan, .promise li, .steps li { clip-path: none !important; }
  .card::after, .plan::after, .btn::after { display: none; }
  .ticks li { opacity: 1 !important; transform: none !important; }
  .ticks li::before { transform: rotate(-45deg) scale(1) !important; }
  .kicker::before { transform: scaleX(1) !important; }
  .promise__mark { transform: scaleX(1) !important; }
  .steps__node { transform: scale(1) !important; }
  .deck__pips li.is-on::after { animation: none; transform: scaleX(1); }

  /* the popup resolves straight to its open state */
  .sheet.is-open .sheet__box,
  .sheet.is-open .sheet__media,
  .sheet.is-open .sheet__body > * { animation: none !important; clip-path: none !important; }
  .sheet.is-open .sheet__box::after { display: none; }
  .cap::after { display: none; }
  .cap__more { opacity: 1 !important; transform: none !important; }
}

/* Nothing keeps animating behind a hidden tab. */
body.is-paused *, body.is-paused *::before, body.is-paused *::after {
  animation-play-state: paused !important;
}