/* ============================================================
   operioninc.com — shared stylesheet

   Rebuilt 2026-08-29 in the cinematic language of the earlier
   operion-website prototype: near-black ground, gradient orbs,
   floating product cards, a sticky scroll dive. What that
   prototype had and this does not is invented numbers and an
   invented customer; those slots carry real product facts here.

   The site is dark, full stop. The prototype was, the product
   screenshots on it are, and a marketing page that dims itself
   in light mode is not the same page.
   ============================================================ */

/* ============================================================
   Fonts — self-hosted. The site contacts NO third-party host.
   Google Fonts was removed 2026-08-23 on counsel's advice: it
   disclosed every visitor's IP and user-agent to Google, and it
   was the page's only external request. The prototype this
   design comes from loaded Exo 2 from fonts.googleapis.com;
   that is the one thing from it that could not come across.
   All three families are SIL OFL 1.1; the licences ship beside
   the files, which the licence requires.
   ============================================================ */

@font-face {
  font-family: "Exo";
  src: url("fonts/exo-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Tokens

   The accent pair is cyan → violet, as in the prototype, but
   the middle stop of the hero gradient is Operion blue (#518abd,
   the application's own dark-theme --brand). The screenshots on
   this page are blue, green and amber; a cyan-to-pink gradient
   fought every one of them. Pink is gone for the same reason —
   it sat a few degrees from the board's own STAT red.
   ============================================================ */

:root {
  /* grounds */
  --ground:      #0a0a0f;
  --bg-2:        #0e0e16;
  --bg-3:        #14141e;
  --panel:       #111118;
  --card:        rgba(255, 255, 255, .03);

  /* ink */
  --ink:         #f4f7fa;
  --ink-2:       rgba(255, 255, 255, .72);
  --ink-3:       rgba(255, 255, 255, .50);
  /* .46, not the .34 the prototype's faintest tier used. Measured against all
     three grounds (#0a0a0f, #0e0e16, and card-over-ground), .34 gives 3.0:1 —
     and this token carries the legal documents' effective-date stamp and the
     company's city in the footer, neither of which is decoration. .46 clears
     4.5:1 on every one of them. */
  --ink-4:       rgba(255, 255, 255, .46);

  /* rules */
  --line:        rgba(255, 255, 255, .10);
  --line-soft:   rgba(255, 255, 255, .06);

  /* accents */
  --cyan:        #22d3ee;
  --blue:        #518abd;
  --violet:      #8b5cf6;
  --green:       #10b981;
  --amber:       #f59e0b;
  --stat:        #f87171;

  --brand:       var(--cyan);
  --focus:       var(--cyan);
  --on-brand:    #04141a;
  --logo-ink:    #7db9d6;

  --grad:        linear-gradient(135deg, var(--cyan), var(--violet));
  --grad-hero:   linear-gradient(115deg, var(--cyan) 0%, var(--blue) 46%, var(--violet) 100%);

  /* type */
  --f-display: "Exo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* measure */
  --wrap:  1080px;          /* the legal documents' column */
  --shell: 1360px;          /* the marketing page's column */
  --rail:  128px;
  --nav:   68px;

  /* One 4px grid. Before this there were sixteen block-axis values, four
     pairs of them 2px apart — 86 vs 88 for the same structural gap. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px; --s9: 56px; --s10: 80px; --s11: 112px;
  --s12: 160px;

  /* em, not ch. `1ch` is the advance of `0` — 0.600em in Plex Sans against a
     0.4493em average — so every `ch` measure ran ~33% wide. */
  --measure: 34em;
  --measure-tight: 28em;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 30px 60px -18px rgba(0, 0, 0, .75);
}

/* The browser keeps light UA chrome without this: light scrollbars against
   #0a0a0f, and mobile Safari's overscroll flashes white. */
:root { color-scheme: dark; }

/* The nav is fixed, so an in-page anchor must stop short of it or the
   heading it lands on sits underneath the bar. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav) + 24px);
}

/* ============================================================
   Reset — the two declarations this site cannot do without.
   Without border-box, a padded full-width box computes to
   100% + padding and the page scrolls sideways at every narrow
   viewport. Without body margin:0, the UA's 8px does it too.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;          /* the hero orbs are wider than the viewport */
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  text-wrap: balance;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0; }

/* The UA gives <figure> `margin: 1em 40px`. Every screenshot on this page is
   in one — the hero cards, the showcase, the five phones — so that 40px was
   silently eating 80px out of each grid cell. The phones rendered at 128px
   inside 236px columns before this line existed. */
figure { margin: 0; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:where(a, button):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 28px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 28px;
}

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Fixes the clipped descender the prototype papered over with padding: a
   gradient-clipped line still needs room under the baseline, and padding on
   an inline box does not create it. */
.gradient-text { padding-bottom: .06em; }

.section-label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--s5);
}

.section-label.dim { color: var(--ink-3); }

.sec-h {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 800;
  max-width: 16em;
}

.sec-p {
  margin-top: var(--s6);
  font-size: 1.15rem;
  color: var(--ink-2);
  max-width: var(--measure);
  line-height: 1.7;
}

/* ============================================================
   Cursor glow — a soft light that follows the pointer.
   Pointer-driven only: it never appears on touch, where there
   is no cursor to follow and the element would just sit in the
   top-left corner glowing at nothing.
   ============================================================ */
.cursor-glow {
  position: fixed;
  left: 0; top: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  background: radial-gradient(circle, rgba(34, 211, 238, .075) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav);
  z-index: 100;
  transition: border-color .4s ease;
  border-bottom: 1px solid transparent;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, .78);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity .4s ease;
}

.nav.scrolled::before { opacity: 1; }
.nav.scrolled { border-bottom-color: var(--line-soft); }

.nav-in {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}

.brandmark { display: inline-flex; align-items: center; gap: 10px; }
.brandmark svg { display: block; }
.wordmark { fill: var(--ink); }
.brandmark:hover .wordmark { fill: #fff; }

.nav-links { display: flex; gap: var(--s7); }

.nav-links a {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-3);
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--grad);
  transition: width .3s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease, border-color .2s ease, color .2s ease;
}

.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-solid {
  background: var(--grad);
  color: var(--on-brand);
  border: 1px solid transparent;
}
.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(34, 211, 238, .45);
}

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: transparent;
}
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, .28);
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
}

.btn.large { padding: 1.1rem 2.2rem; font-size: 1.05rem; }

/* --on-brand rather than three source-order-dependent rules: the design
   director flagged that pattern as a rule whose correctness depends on line
   order, which is a trap even where it happens to resolve correctly. */
.btn-invert {
  background: var(--ink);
  color: var(--ground);
  border: 1px solid var(--ink);
}
.btn-invert:hover { transform: translateY(-2px); background: #fff; border-color: #fff; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: calc(var(--nav) + var(--s9)) 0 0;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg { position: absolute; inset: 0; z-index: -1; }

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .42;
  will-change: transform;
  animation: drift 22s ease-in-out infinite;
}

.orb-1 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
  top: -18%; left: -12%;
}
.orb-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--violet) 0%, transparent 70%);
  top: 22%; right: -12%;
  animation-delay: -11s;
}
.orb-3 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
  top: 46%; left: 38%;
  opacity: .34;
  animation-delay: -5s;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30px, -28px) scale(1.05); }
  50%      { transform: translate(-22px, 20px) scale(.96); }
  75%      { transform: translate(20px, 28px) scale(1.02); }
}

.noise {
  position: absolute;
  inset: 0;
  opacity: .028;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 72%);
}

.hero-copy { position: relative; text-align: center; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-size: .84rem;
  color: var(--ink-2);
  margin-bottom: var(--s7);
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: ping 2.4s ease-in-out infinite;
  flex: none;
}
.dot.cyan  { background: var(--cyan); }
.dot.amber { background: var(--amber); }

@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
  55%      { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
}

.hero h1 {
  font-size: clamp(2.9rem, 8.6vw, 5.7rem);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.0;
}
.hero h1 .line { display: block; padding-bottom: .07em; }

.hero-sub {
  margin: var(--s7) auto 0;
  max-width: 34em;
  font-size: clamp(1.02rem, 1.7vw, 1.24rem);
  color: var(--ink-2);
  line-height: 1.72;
}

.hero-actions {
  margin-top: var(--s8);
  display: flex;
  gap: var(--s4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- floating product cards ---------------------------------
   The prototype absolutely positioned three cards inside a fixed
   500px box, which cropped the middle one at every viewport it
   was not designed at. This is a grid: the flanking cards are
   real columns that shrink, and the stage grows with them. */
.hero-stage {
  position: relative;
  margin-top: var(--s9);
  padding-bottom: var(--s10);
  perspective: 1600px;
}

.cards {
  display: grid;
  grid-template-columns: 1fr 2.2fr 1fr;
  align-items: end;
  gap: clamp(8px, 1.6vw, 26px);
  transform-style: preserve-3d;
}

.card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}

.card img { width: 100%; }

.card-l { transform: rotateY(16deg) rotateX(5deg) translateZ(-40px); opacity: .68; }
.card-c { transform: rotateX(5deg); z-index: 3; }
.card-r { transform: rotateY(-16deg) rotateX(5deg) translateZ(-40px); opacity: .68; }

.card-l:hover, .card-r:hover {
  transform: rotateY(0) rotateX(0) scale(1.04);
  opacity: 1;
  z-index: 6;
}
.card-c:hover { transform: rotateX(0) translateY(-8px); }

.card-c::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: var(--grad);
  filter: blur(22px);
  opacity: 0;
  z-index: -1;
  transition: opacity .5s ease;
}
.card-c:hover::after { opacity: .5; }

/* floating readouts over the stage */
.pin {
  position: absolute;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 15, .88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  animation: bob 4.5s ease-in-out infinite;
}
/* Clear of the flanking cards, which bottom-align and are short. */
.pin-1 { top: 6%;    left: 1%;  animation-delay: 0s; }
.pin-2 { top: 30%;   right: 0;  animation-delay: -1.4s; }
.pin-3 { bottom: 4%; left: 9%;  animation-delay: -2.8s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--s6);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  animation: cue 2.2s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { opacity: .45; height: 34px; }
  50%      { opacity: 1;   height: 48px; }
}

/* ============================================================
   Facts bar

   The prototype's numbers here were 99.7% on-time, 2.4M
   specimens and 34% cost reduction, for a product with no
   customers. These four are properties of the system, and
   every one of them is checkable in the code.
   ============================================================ */
.facts {
  border-block: 1px solid var(--line-soft);
  background: var(--bg-2);
}

.facts-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  padding-block: var(--s9);
}

.fact { text-align: center; }

.fact b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.fact b i { font-style: normal; font-size: .46em; opacity: .85; }

/* Child combinator, not descendant: the counter's own <span> lives inside
   <b>, and `.fact span` was setting it to the label's 13px. */
.fact > span {
  display: block;
  margin-top: var(--s3);
  font-size: .84rem;
  color: var(--ink-3);
  line-height: 1.45;
}

/* ============================================================
   Sections
   ============================================================ */
.band { padding-block: var(--s12); position: relative; }
.band.tight { padding-block: var(--s11); }

/* ---- browser-chrome showcase ------------------------------- */
.showcase {
  margin-top: var(--s10);
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.chrome {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: rgba(0, 0, 0, .34);
  border-bottom: 1px solid var(--line-soft);
}

.dots { display: flex; gap: 6px; }
.dots span { width: 11px; height: 11px; border-radius: 50%; }
.dots span:nth-child(1) { background: #ff5f57; }
.dots span:nth-child(2) { background: #febc2e; }
.dots span:nth-child(3) { background: #28c840; }

.chrome b {
  flex: 1;
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-4);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, .32);
  background: rgba(16, 185, 129, .1);
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #6ee7b7;
}

.caption {
  margin-top: var(--s5);
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--ink-3);
}

/* ---- capability cards -------------------------------------- */
.caps {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
}

.cap {
  display: flex;
  flex-direction: column;
  padding: var(--s7);
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--card);
  transition: transform .4s var(--ease), border-color .4s ease, background .4s ease;
}

.cap:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, .28);
  background: rgba(255, 255, 255, .05);
}

.cap-icon {
  display: block;
  width: 42px; height: 42px;
  color: var(--cyan);
  margin-bottom: var(--s6);
}
.cap-icon svg { width: 100%; height: 100%; }

.cap h3 { font-size: 1.28rem; font-weight: 700; }
.cap p { margin-top: var(--s3); font-size: .95rem; color: var(--ink-2); line-height: 1.65; }

.cap-viz {
  margin-top: var(--s7);
  height: 46px;
  display: flex;
  align-items: center;
}

/* route line */
.viz-route { display: flex; align-items: center; width: 100%; }
.viz-route i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); flex: none; }
.viz-route s {
  flex: 1; height: 2px; background: rgba(255,255,255,.12); position: relative; overflow: hidden;
}
.viz-route s::after {
  content: ""; position: absolute; inset: 0;
  background: var(--grad);
  transform: translateX(-100%);
  animation: trace 2.8s var(--ease) infinite;
}
.viz-route s:nth-of-type(2)::after { animation-delay: .5s; }
@keyframes trace {
  0%       { transform: translateX(-100%); }
  55%, 100%{ transform: translateX(100%); }
}

/* STAT */
.viz-stat { display: flex; align-items: center; gap: 12px; }
.viz-stat b {
  padding: .25rem .6rem;
  border-radius: 6px;
  background: rgba(248, 113, 113, .16);
  border: 1px solid rgba(248, 113, 113, .4);
  color: var(--stat);
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  animation: throb 2s ease-in-out infinite;
}
@keyframes throb { 0%,100%{opacity:1} 50%{opacity:.55} }
.viz-stat span { font-family: var(--f-mono); font-size: .84rem; color: var(--ink-3); }

/* live dots */
.viz-ops { display: flex; gap: 8px; }
.viz-ops i {
  width: 26px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.12);
}
.viz-ops i.on { background: var(--green); animation: ping2 2.6s ease-in-out infinite; }
.viz-ops i.on:nth-child(3) { animation-delay: -.9s; }
.viz-ops i.on:nth-child(5) { animation-delay: -1.8s; }
@keyframes ping2 { 0%,100%{opacity:1} 50%{opacity:.45} }

/* custody stack */
.viz-stack { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.viz-stack i {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform-origin: left;
  animation: stack 3s var(--ease) infinite;
}
.viz-stack i:nth-child(2) { animation-delay: .28s; opacity: .72; }
.viz-stack i:nth-child(3) { animation-delay: .56s; opacity: .48; }
@keyframes stack {
  0%       { transform: scaleX(.15); }
  50%, 100%{ transform: scaleX(1); }
}

/* ============================================================
   Deep dive — a sticky screen, four steps of copy beside it.

   The prototype swapped one <img>'s src on a timer and hid the
   reload behind an 800ms fade. Here all four are in the DOM and
   cross-fade on opacity: nothing decodes mid-scroll, and there
   is no `new Image()` preloader to smuggle a network call past
   what the privacy policy says this script does.
   ============================================================ */
.dive { position: relative; }

.dive-sticky::before {
  content: "";
  position: absolute;
  right: -4%;
  top: 50%;
  width: 78%;
  height: 90%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(81, 138, 189, .20) 0%, transparent 66%);
  pointer-events: none;
}

.dive-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--s8) 28px;
  pointer-events: none;
}

.dive-screen {
  position: relative;
  width: min(60%, 960px);
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  pointer-events: auto;
}

/* The first image is in flow and sets the box height; the rest are stacked
   on top of it. Heights differ between screens, so the box takes the tallest
   and shorter ones centre inside it. */
.dive-screen img { width: 100%; transition: opacity .7s ease; }
.dive-screen img + img {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
}
.dive-screen img.on { opacity: 1; }
.dive-screen img.off { opacity: 0; }

.dive-steps {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  width: min(36%, 420px);
}

.dive-step {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .26;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.dive-step.active { opacity: 1; transform: none; }

.dive-step b {
  font-family: var(--f-display);
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: .38;
  margin-bottom: var(--s4);
}

.dive-step h3 { font-size: 1.85rem; font-weight: 700; }
.dive-step p { margin-top: var(--s4); font-size: 1.04rem; color: var(--ink-2); line-height: 1.75; }
.dive-tail { height: 60vh; }

/* ============================================================
   The phones
   ============================================================ */
.phones {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: clamp(10px, 1.8vw, 30px);
}

.phone { text-align: center; }

.phone img {
  width: 100%;
  border-radius: 7%/3.3%;
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .85);
  transition: transform .45s var(--ease);
}
.phone:hover img { transform: translateY(-10px); }

/* The two flanking pairs sit lower and quieter, so the middle screen reads
   as the one being shown and the others as context. */
.phone.step { padding-top: var(--s7); opacity: .84; }
.phone.step.far { padding-top: var(--s10); opacity: .66; }
.phone:hover { opacity: 1; }

.phone figcaption {
  margin-top: var(--s5);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ============================================================
   Where it stands — the slot the prototype filled with invented
   percentages. A three-state build status instead: the bar is
   an indicator of stage, and the pill says which stage in words
   so the bar is never the only thing carrying the claim.
   ============================================================ */
.stands {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

.stand {
  padding: var(--s8);
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--card);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pill.shipped { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.34); color: #6ee7b7; }
.pill.build   { background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.34); color: #67e8f9; }
.pill.next    { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-3); }

.stand h3 { margin-top: var(--s5); font-size: 1.35rem; font-weight: 700; }
.stand p  { margin-top: var(--s3); color: var(--ink-2); font-size: .97rem; line-height: 1.7; }

.meter {
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.meter i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); }
.meter i.f { background: var(--grad); }

/* ============================================================
   Quote band
   ============================================================ */
.quote {
  position: relative;
  padding-block: var(--s12);
  background: var(--bg-2);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}

.quote::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background: radial-gradient(ellipse at 50% 40%, rgba(81, 138, 189, .22) 0%, transparent 62%);
  z-index: -1;
}

.quote blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.018em;
  max-width: 20em;
}

.quote cite {
  display: block;
  margin-top: var(--s7);
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--ink-2);
}

/* ============================================================
   Company
   ============================================================ */
.story { margin-top: var(--s7); display: grid; gap: var(--s5); max-width: var(--measure); }
.story p { color: var(--ink-2); font-size: 1.06rem; line-height: 1.75; }

.values {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s7);
}

.value-icon { display: block; width: 30px; height: 30px; color: var(--cyan); margin-bottom: var(--s5); }
.value-icon svg { width: 100%; height: 100%; }
.value h4 { font-size: 1.1rem; font-weight: 700; }
.value p { margin-top: var(--s2); color: var(--ink-2); font-size: .95rem; line-height: 1.65; }

/* ============================================================
   Closing call
   ============================================================ */
.close {
  position: relative;
  padding-block: var(--s12);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(139, 92, 246, .22) 0%, transparent 65%);
  z-index: -1;
}
.close h2 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); font-weight: 800; margin-inline: auto; max-width: 14em; }
.close p  { margin: var(--s6) auto 0; max-width: 32em; color: var(--ink-2); font-size: 1.08rem; }
.close .btn { margin-top: var(--s8); }

/* ============================================================
   Footer
   ============================================================ */
footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding-block: var(--s9);
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  font-size: .88rem;
  color: var(--ink-3);
}

.foot-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.foot-in nav { display: flex; flex-wrap: wrap; gap: var(--s6); }
.foot-in nav a { color: var(--ink-3); transition: color .2s ease; }
.foot-in nav a:hover { color: var(--ink); }

/* ============================================================
   The document pages — privacy, terms, support, 404.

   They keep the header and footer markup they already had, so
   this block restyles rather than rebuilds them. `.top` is the
   documents' header; `.nav` is the marketing page's.
   ============================================================ */
.top {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10, 10, 15, .8);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-in {
  height: var(--nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--s6);
}

.lead { color: var(--ink-2); font-size: 1.08rem; }

.stamp {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-4);
}

/* Warranty and liability have to be legible as the exceptional terms they
   are; check-legal.sh fails if this class stops appearing on them. */
.conspicuous {
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  background: rgba(245, 158, 11, .05);
  padding: var(--s6);
}

.links { display: flex; flex-wrap: wrap; gap: var(--s6); }

/* ============================================================
   Reveal on scroll

   Nothing is hidden until the script has proven it can un-hide
   it: .will-reveal is added by JS, never by the document, so a
   no-JS, reduced-motion, zero-viewport or script-error page is
   fully visible. The page cannot end up blank.
   ============================================================ */
.will-reveal { opacity: 0; transform: translateY(24px); }
.reveal { transition: opacity .6s ease, transform .6s var(--ease); }
.is-in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .caps   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .phones { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .phone.far { display: none; }         /* three screens, not five, on a tablet */
}

@media (max-width: 900px) {
  /* The dive stops being a dive. A sticky screen with copy beside it needs
     two columns; at one column the copy would sit on top of the image. */
  /* The sticky screen goes away entirely rather than becoming a fifth copy of
     screen one at the top: below this width each step carries its own figure. */
  .dive-sticky { display: none; }
  .dive-steps  { margin-top: 0; width: 100%; }
  .dive-step   { min-height: 0; opacity: 1; transform: none; padding-block: var(--s8); }
  .dive-step b { font-size: 2.6rem; }
  .dive-tail   { display: none; }
  .dive-screen img + img { display: none; }   /* each step carries its own below */
  .dive-step figure { margin: var(--s6) 0 0; }
  .dive-step figure img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
  }
}

@media (min-width: 901px) {
  .dive-step figure { display: none; }         /* the sticky screen has it */
}

@media (max-width: 860px) {
  :root { --s12: 96px; --s11: 72px; }
  .nav-links { display: none; }
  .facts-in { grid-template-columns: repeat(2, 1fr); gap: var(--s8); }
  .caps   { grid-template-columns: minmax(0, 1fr); }
  .stands { grid-template-columns: minmax(0, 1fr); }
  /* All five, stacked. A phone screenshot at 300px on a phone is the most
     legible thing on this page; there is no reason to show one of them. */
  .phones {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
    margin-inline: auto;
    gap: var(--s10);
  }
  .phone.step, .phone.step.far { padding-top: 0; opacity: 1; }
  .phone.far { display: block; }        /* undoes the tablet rule above */
  .hero { padding-top: calc(var(--nav) + var(--s9)); }
  .hero-stage { margin-top: var(--s9); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card-l, .card-r { display: none; }          /* one card, uncropped, legible */
  .card-c { transform: none; }
  .pin-1, .pin-3 { display: none; }
  .pin-2 { top: -14px; right: 0; }
  .scroll-cue { display: none; }
  .quote blockquote { font-size: 1.4rem; }
}

/* ============================================================
   Reduced motion — everything decorative stops. The page still
   says exactly the same things.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .will-reveal { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .orb, .dot, .pin, .scroll-cue i,
  .viz-route s::after, .viz-stat b, .viz-ops i.on, .viz-stack i { animation: none; }
  .viz-stack i { transform: scaleX(1); }
  .cursor-glow { display: none; }
  .card, .cap, .phone img, .btn { transition: none; }
  .dive-screen img { transition: none; }
}