/* ==========================================================================
   MVRK Systems (mvrk.systems)
   Built to the MVRK Systems Brand Guidelines v1.0 (2026).

   Colour is an accent, never load-bearing. Every layout here survives
   one-colour reproduction: hierarchy comes from type, rule and space.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01: Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand field */
  --navy:        #0B1E3A;  /* PMS 2767 · primary field */
  --navy-deep:   #071527;  /* deeper field, section alternation */
  --ink:         #14161C;
  --paper:       #F2F4F7;
  --white:       #FFFFFF;

  /* Signal */
  --signal-deep: #0D47A1;
  --signal:      #1B74E8;  /* accent */
  --cyan:        #56C8F5;
  --steel-light: #8FA8CC;  /* route differentiation only */
  --steel:       #5F7BA8;

  /* LED status system: reserved for state. Never decorative. */
  --led-done:    #33C552;
  --led-ingest:  #F0A01E;
  --led-uplink:  #2F7CE0;
  --led-error:   #E0342F;

  /* Derived surfaces on the navy field */
  --surface:     rgba(255, 255, 255, .028);
  --surface-2:   rgba(255, 255, 255, .052);
  --hairline:    rgba(255, 255, 255, .10);
  --hairline-2:  rgba(255, 255, 255, .18);

  /* Type on the navy field */
  --fg:          #EEF2F8;
  --fg-muted:    #9FB0C8;
  --fg-dim:      #64789A;

  /* Type */
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, 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, Consolas, monospace;

  /* Measure */
  --gutter: 32px;
  --max:    1240px;
  --radius: 4px;   /* machined, not rounded-friendly */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   02: Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` rather than `hidden`: both stop sideways overflow, but `hidden`
     makes body a scroll container, which silently breaks every
     position:sticky descendant. */
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--signal); color: #fff; }

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

/* --------------------------------------------------------------------------
   03: Type scale
   -------------------------------------------------------------------------- */

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

.h-display {
  font-size: clamp(2.35rem, 5vw, 4rem);
  letter-spacing: -.035em;
  line-height: 1;
}
.h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 700; letter-spacing: -.018em; }
.h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 62ch;
}

.body-muted { color: var(--fg-muted); }

/* The mono label: the brand's connective tissue */
.label {
  font-family: var(--f-mono);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
}
.label--signal { color: var(--signal); }
.label--cyan   { color: var(--cyan); }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   04: Layout
   -------------------------------------------------------------------------- */

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

.section { padding-block: clamp(72px, 10vw, 132px); position: relative; }

/* The header is fixed and 72px tall, so an in-page jump would otherwise put
   the target heading underneath it. Applies to anything with an id, because
   every one of them is a link target somewhere. */
[id] { scroll-margin-top: 96px; }
.section--tight { padding-block: clamp(56px, 7vw, 88px); }

/* Field alternation: navy → deeper navy → ink. No gradient washes. */
.field-deep { background: var(--navy-deep); }
.field-ink  { background: var(--ink); }

.field-paper {
  background: var(--paper);
  color: var(--ink);
  --fg: var(--ink);
  --fg-muted: #4A5262;
  --fg-dim: #6B7280;
  --hairline: rgba(11, 30, 58, .12);
  --hairline-2: rgba(11, 30, 58, .22);
  --surface: rgba(11, 30, 58, .025);
  --surface-2: rgba(11, 30, 58, .045);
}

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Section heading block: wide enough that display type sets on its own
   terms; the paragraph inside keeps its own measure. */
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 62rem; }
.sec-head .label { margin-bottom: 18px; }
.sec-head p { margin-top: 20px; }

/* --------------------------------------------------------------------------
   05: Nav
   -------------------------------------------------------------------------- */

.scrollbar {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--cyan);
  z-index: 200;
}

.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
.nav.is-stuck {
  background: rgba(7, 21, 39, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--hairline);
}

.nav__in {
  height: 72px;
  display: flex; align-items: center; gap: 32px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark {
  width: 34px; height: 34px;
  border-radius: 3px;
  background: var(--navy);
  object-fit: cover;
}
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--f-display);
  font-weight: 800; font-size: 1.06rem;
  letter-spacing: -.02em;
  color: #fff;
}
.brand__name i { font-style: normal; color: var(--cyan); }
.brand__sub {
  font-family: var(--f-display);
  font-weight: 600; font-size: .5rem;
  letter-spacing: .38em;
  color: var(--fg-dim);
  margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  font-family: var(--f-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 9px 14px;
  border-radius: 3px;
  transition: color .2s, background .2s;
}
.nav__link:hover { color: #fff; background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--cyan); }

/* The nav call-to-action carries a long label. Between the mobile drawer
   breakpoint and full width there is not room for it beside five links, so it
   falls back to the short form rather than wrapping or pushing the brand. */
.nav__cta-short { display: none; }

@media (max-width: 1180px) and (min-width: 861px) {
  .nav__in { gap: 18px; }
  .nav__link { padding: 9px 9px; letter-spacing: .07em; }
  .nav__cta { padding-left: 16px; padding-right: 16px; }
  .nav__cta-long  { display: none; }
  .nav__cta-short { display: inline; }
}

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--hairline);
  border-radius: 3px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--fg);
  position: relative; transition: background .2s;
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: var(--fg); transition: transform .28s var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after  { top:  5.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   06: Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .12s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: #2b83f2; }

.btn--ghost { border-color: var(--hairline-2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.btn--solid-dark { background: var(--navy); color: #fff; }
.btn--solid-dark:hover { background: #12294b; }

.btn__arrow { transition: transform .22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Inline text link with rule */
.tlink {
  font-family: var(--f-mono);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(86, 200, 245, .3);
  padding-bottom: 3px;
  transition: border-color .2s, gap .2s var(--ease);
}
.tlink:hover { border-bottom-color: var(--cyan); gap: 12px; }

/* --------------------------------------------------------------------------
   07: Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(128px, 17vw, 190px);
  padding-bottom: clamp(72px, 9vw, 112px);
  overflow: hidden;
}

/* Constellation motif: brand pattern, drawn live, always subtle */
.hero__net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .5;
  pointer-events: none;
}

.hero__in {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(40px, 4.5vw, 64px);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  margin-bottom: 28px;
}
.hero__eyebrow .label { color: var(--fg-muted); }

.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--cyan); }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 38px;
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--hairline);
}
.hero__meta div {
  padding: 18px 26px 0 0;
  margin-right: 26px;
  border-right: 1px solid var(--hairline);
  padding-right: 26px;
}
.hero__meta div:last-child { border-right: 0; }
.hero__meta strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 1.18rem; font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.hero__meta .label { margin-top: 5px; font-size: .625rem; }

/* --------------------------------------------------------------------------
   08: Device console (the Zero-UI face, made live)
   -------------------------------------------------------------------------- */

.console {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow: hidden;
}

.console__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(0, 0, 0, .18);
}
.console__bar .label { font-size: .625rem; }
.console__id { margin-left: auto; color: var(--fg-dim); font-size: .625rem; }

/* The five-LED status plate */
.leds {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 22px 22px;
}
.led {
  --c: var(--fg-dim);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c);
  opacity: .2;
  flex-shrink: 0;
  transition: opacity .35s var(--ease), box-shadow .35s var(--ease);
}
.led.is-on {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent),
              0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
}
.led--power  { --c: var(--led-done); }
.led--ingest { --c: var(--led-ingest); }
.led--uplink { --c: var(--led-uplink); }
.led--cloud  { --c: var(--cyan); }
.led--done   { --c: var(--led-done); }

.leds__state {
  margin-left: auto; text-align: right;
}
.leds__state b {
  display: block;
  font-family: var(--f-mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}

/* Throughput bar */
.meter { padding: 0 22px 20px; }
.meter__track {
  height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden;
}
.meter__fill {
  height: 100%; width: 0%;
  background: var(--cyan);
  transition: width .4s linear;
}
.meter__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 9px;
}
.meter__row .label { font-size: .625rem; }
.meter__val {
  font-family: var(--f-mono); font-size: .82rem; font-weight: 600;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}

/* Storage meter. Sits directly under the activity meter with no gap of its
   own, so the two read as one instrument block rather than two widgets. */
.meter--store { padding-top: 0; }
.meter--store .meter__row { margin-bottom: 7px; }
/* Amber from about three quarters, red once the lamp would be blinking. The
   colour is the warning; the number stays a duration. */
.meter--store .meter__fill.is-warn { background: var(--led-ingest); }
.meter--store .meter__fill.is-low  { background: var(--led-error); }
.meter--store .meter__val.is-low   { color: var(--led-error); }

/* Bonded path readout */
.paths { border-top: 1px solid var(--hairline); }
.path {
  display: grid;
  grid-template-columns: 74px 1fr 68px;
  align-items: center; gap: 14px;
  padding: 11px 22px;
  border-bottom: 1px solid var(--hairline);
}
.path:last-child { border-bottom: 0; }
.path__name {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; color: var(--fg-muted);
}
.path__track { height: 2px; background: var(--surface-2); position: relative; overflow: hidden; }
.path__bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--signal); transition: width .5s var(--ease); }
.path--eth .path__bar { background: var(--cyan); }
.path--sat .path__bar { background: var(--fg-dim); }
.path__rate {
  font-family: var(--f-mono); font-size: .68rem;
  color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums;
}

.console__foot {
  padding: 13px 22px;
  border-top: 1px solid var(--hairline);
  background: rgba(0, 0, 0, .18);
  display: flex; justify-content: space-between; gap: 16px;
}
.console__foot .label { font-size: .6rem; }

/* --------------------------------------------------------------------------
   09: Cards
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 30px 28px;
  background: var(--surface);
  position: relative;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.card:hover { border-color: var(--hairline-2); background: var(--surface-2); }

.card--accent { border-top: 2px solid var(--signal); }
.card--accent-cyan { border-top: 2px solid var(--cyan); }
.card--accent-deep { border-top: 2px solid var(--signal-deep); }

.card .label { margin-bottom: 14px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--fg-muted); font-size: .945rem; }

.card--link:hover { transform: translateY(-3px); }
.card__go {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan);
}

/* Numbered step card */
.step { position: relative; padding-top: 26px; }
.step__n {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  color: var(--cyan); letter-spacing: .1em;
  display: block; margin-bottom: 12px;
}
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--hairline);
}
.step.is-lit::before { background: var(--cyan); }

/* --------------------------------------------------------------------------
   10: Spec table (per brand: mono, tabular, doc-stamped)
   -------------------------------------------------------------------------- */

.spec {
  border: 1px solid var(--hairline);
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface);
}
.spec__head {
  background: var(--ink);
  color: #fff;
  padding: 18px 24px;
  display: flex; align-items: center; gap: 16px;
}
.spec__head h3 { font-size: 1.02rem; }
.spec__head img { width: 26px; height: 26px; margin-left: auto; border-radius: 2px; }

.spec__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.spec__row:last-child { border-bottom: 0; }
.spec__row dt {
  font-family: var(--f-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-dim);
}
.spec__row dd {
  margin: 0;
  font-family: var(--f-mono); font-size: .875rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
/* Status-plate variant: swatch, term, meaning */
.spec__row--led { grid-template-columns: 34px 170px 1fr; gap: 16px; align-items: center; }
.spec__row--led .led {
  width: 16px; height: 16px;
  opacity: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 15%, transparent);
}

.spec__foot {
  padding: 13px 24px;
  background: rgba(0, 0, 0, .16);
  border-top: 1px solid var(--hairline);
}
.field-paper .spec__foot { background: rgba(11, 30, 58, .04); }
.spec__foot .label { font-size: .6rem; }

/* --------------------------------------------------------------------------
   11: Stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
/* Three-up stats row; the two- and one-column breakpoints below still apply. */
.stats--three { grid-template-columns: repeat(3, 1fr); }

.stat {
  padding: 34px 28px;
  border-right: 1px solid var(--hairline);
}
.stat:last-child { border-right: 0; }
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  /* Not flex: these figures mix prose prefixes ("Up to 3") with unit suffixes,
     and flex would collapse the whitespace between them. */
  display: block;
}
.stat__n small {
  font-size: .42em; font-weight: 600; letter-spacing: -.01em;
  color: var(--cyan);
  margin-left: 5px;
}
.stat .label { margin-top: 12px; }
.stat p { margin-top: 10px; font-size: .875rem; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   12: Pipeline diagram
   -------------------------------------------------------------------------- */

.pipe {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: rgba(0, 0, 0, .16);
  padding: 8px;
}
.pipe svg { width: 100%; height: auto; display: block; }

.pipe-legend {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.pipe-legend span {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: .688rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted);
}
.pipe-legend i {
  width: 14px; height: 2px; background: currentColor; display: block;
}
.pipe-legend .lg-eth { color: var(--cyan); }
.pipe-legend .lg-a   { color: var(--signal); }
.pipe-legend .lg-b   { color: var(--steel-light); }
.pipe-legend .lg-c   { color: var(--steel); }

/* --------------------------------------------------------------------------
   13: Voice / quote block
   -------------------------------------------------------------------------- */

.say {
  border-radius: 5px;
  padding: 30px 32px;
  font-family: var(--f-mono);
  font-size: clamp(1rem, 1.6vw, 1.24rem);
  line-height: 1.55;
  color: #fff;
  background: var(--navy-deep);
  border: 1px solid var(--hairline);
}
.field-paper .say { background: var(--navy); border-color: transparent; }
.say .label { margin-bottom: 16px; color: var(--cyan); }

/* Product banner (per brand: "MVRK SYSTEMS PRESENTS [Product]™") */
.presents {
  border-radius: 6px;
  background: var(--navy);
  border: 1px solid var(--hairline);
  padding: clamp(28px, 4vw, 42px) clamp(28px, 4vw, 44px);
  display: flex; align-items: center; gap: clamp(22px, 3vw, 38px);
  position: relative; overflow: hidden;
}
.field-paper .presents { border-color: transparent; color: var(--white); }
.field-paper .presents .presents__tag { color: #7E93B4; }
.presents__mark { width: clamp(64px, 8vw, 92px); height: auto; flex-shrink: 0; border-radius: 3px; }
.presents__tag { font-family: var(--f-mono); font-size: .688rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); display: block; margin-bottom: 8px; }
.presents__name {
  display: block;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -.03em; line-height: 1;
  color: #fff;
}
.presents__name sup { font-size: .34em; vertical-align: super; font-weight: 600; }
.presents__line {
  display: block;
  font-family: var(--f-mono); font-size: .8rem; color: var(--cyan);
  margin-top: 12px; letter-spacing: .04em;
}
.presents__leds { margin-left: auto; display: flex; gap: 10px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   14: Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field .label { color: var(--fg-muted); }
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: .95rem;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); background: var(--surface-2);
}
.field select { appearance: none; cursor: pointer; }
.field-paper .field select option { background: #fff; color: var(--ink); }

.form__note {
  font-family: var(--f-mono); font-size: .688rem;
  color: var(--fg-dim); letter-spacing: .04em; line-height: 1.7;
}

/* --------------------------------------------------------------------------
   15: Footer
   -------------------------------------------------------------------------- */

.foot {
  background: var(--ink);
  padding-block: clamp(56px, 7vw, 80px) 34px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 48px;
}
.foot h4 {
  font-family: var(--f-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 18px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot a { color: var(--fg-muted); font-size: .92rem; transition: color .2s; }
.foot a:hover { color: var(--cyan); }
.foot__tag { color: var(--fg-muted); font-size: .92rem; margin-top: 20px; max-width: 34ch; }

.foot__bar {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.foot__bar .label { font-size: .625rem; }

/* --------------------------------------------------------------------------
   16: CTA band
   -------------------------------------------------------------------------- */

.cta {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: clamp(36px, 5.5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px; align-items: center;
  background: var(--surface);
}
.cta h2 { margin-bottom: 14px; }
.cta p { color: var(--fg-muted); max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   17: Product tiers: Field / Pro / Fleet
   -------------------------------------------------------------------------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Two-tier layout: same card width as the three-up, centred rather than stretched. */
.tiers--two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }

.tier {
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 30px 26px;
  display: flex; flex-direction: column;
  background: var(--surface);
  transition: border-color .25s, background .25s;
}
.tier:hover { border-color: var(--hairline-2); }
.tier--featured { border-color: rgba(86, 200, 245, .5); background: var(--surface-2); }

.tier__top {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.tier__name {
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.025em; color: #fff;
}
.tier__badge {
  font-family: var(--f-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(86, 200, 245, .4);
  border-radius: 999px; padding: 3px 9px;
  margin-left: auto;
}
.tier__use { color: var(--fg-muted); font-size: .9rem; margin-bottom: 24px; }

.tier__price {
  font-family: var(--f-display); font-weight: 800;
  font-size: 2.5rem; letter-spacing: -.035em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.tier__price small {
  font-family: var(--f-mono); font-size: .3em; font-weight: 500;
  letter-spacing: .12em; color: var(--fg-dim); margin-left: 8px;
  vertical-align: middle;
}
/* Euro leads; the dollar figure sits under it as reference. */
.tier__alt {
  display: block;
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--fg-dim);
  margin-top: 7px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.tier__sub {
  display: block;
  font-family: var(--f-mono); font-size: .8rem;
  color: var(--cyan); margin-top: 16px; font-variant-numeric: tabular-nums;
}
.tier__sub span { color: var(--fg-dim); letter-spacing: .1em; font-size: .82em; }
.tier__sub b { font-weight: 500; }

/* Capacity strip. Protected reads first and in full colour; raw is the
   supporting figure and must never be the one that leads. */
.tier__cap {
  display: block; margin-top: 16px; padding: 11px 13px;
  border: 1px solid var(--hairline); border-radius: 4px;
  font-family: var(--f-mono); font-size: .78rem;
  color: var(--fg-dim); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.tier__cap b { color: var(--fg); font-weight: 500; }
.tier__cap i { color: var(--fg-dim); font-style: normal; margin: 0 7px; }

.tier__list {
  list-style: none; margin: 24px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid; gap: 11px;
}
.tier__list li {
  display: grid; grid-template-columns: 15px 1fr; gap: 10px;
  font-size: .9rem; color: var(--fg-muted); line-height: 1.5;
}
.tier__list li::before {
  content: '';
  width: 7px; height: 1.5px; background: var(--cyan);
  margin-top: .68em;
}
.tier__list li.is-off { color: var(--fg-dim); }
.tier__list li.is-off::before { background: var(--fg-dim); opacity: .5; }

.tier__go { margin-top: auto; padding-top: 26px; }
.tier__go .btn { width: 100%; justify-content: center; }

/* Comparison table */
.ptable-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 5px; }
.ptable { width: 100%; border-collapse: collapse; min-width: 660px; }
.ptable th, .ptable td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--f-mono); font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ptable thead th {
  background: var(--ink);
  color: #fff;
  font-size: .688rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.ptable tbody th {
  font-size: .688rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-dim);
}
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable td { color: var(--fg); }
.ptable .is-off { color: var(--fg-dim); }
.ptable__alt {
  display: block;
  font-size: .72rem; color: var(--fg-dim);
  margin-top: 4px; letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   18: Status plate: LED behaviour and live-route indicator
   -------------------------------------------------------------------------- */

/* Behaviour is part of the language: solid, pulsing, or blinking. */
@keyframes led-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes led-blink { 0%, 46% { opacity: 1; } 50%, 96% { opacity: .16; } }

.led.is-pulsing  { animation: led-pulse 1.5s ease-in-out infinite; }
.led.is-blinking { animation: led-blink .9s steps(1, end) infinite; }

.led--power   { --c: var(--led-done); }
.led--ingest  { --c: var(--led-ingest); }
.led--network { --c: var(--led-uplink); }
.led--ready   { --c: var(--led-done); }
.led--error   { --c: var(--led-error); }

/* Labelled LED column inside the console */
.plate { padding: 24px 22px 20px; display: grid; gap: 16px; }
.plate__row { display: flex; align-items: center; gap: 0; }
.plate__led {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.plate__led .label { font-size: .55rem; letter-spacing: .12em; }
.plate__led.is-active .label { color: var(--fg); }

/* Live-path dots: 1 to 4 routes up; bright carries data, dim is parked */
.plate__paths {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.pathdots { display: flex; gap: 6px; align-items: center; }
.pathdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); opacity: .14;
  transition: opacity .35s var(--ease);
}
.pathdot.is-parked { opacity: .4; }
.pathdot.is-live   { opacity: 1; }

.mode-tag {
  font-family: var(--f-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(86, 200, 245, .3);
  border-radius: 3px; padding: 3px 9px;
}
.mode-tag.is-idle { color: var(--fg-dim); border-color: var(--hairline); }

/* Per-path state rows (no throughput figures; aggregation is unvalidated) */
.path__state {
  font-family: var(--f-mono); font-size: .65rem;
  letter-spacing: .11em; text-transform: uppercase;
  text-align: right; color: var(--fg-dim);
}
.path__state[data-s="live"]    { color: var(--cyan); }
.path__state[data-s="probing"] { color: var(--led-ingest); }
.path__state[data-s="parked"]  { color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   19: Exploded chassis
   A technical drawing, not an illustration: real dimensions, dimension lines,
   leader callouts. Scroll drives the separation so the reader controls it.
   -------------------------------------------------------------------------- */

.chassis {
  position: relative;
  margin: 8px 0 56px;
  /* Scroll runway for the sync'd explode. Height is the animation's duration. */
  min-height: 210vh;
}

.chassis__stage {
  position: sticky;
  top: 84px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  min-height: 78vh;
}

.chassis__svg {
  width: 100%;
  height: auto;
  max-height: 76vh;
  overflow: visible;
  display: block;
}

.chassis__cap { align-self: center; }
.chassis__cap p {
  color: var(--fg-muted);
  margin: 14px 0 0;
  max-width: 34ch;
}

.chassis__hint {
  display: inline-block;
  margin-top: 22px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  transition: opacity .4s var(--ease);
}
.chassis__hint.is-done { opacity: 0; }

/* Named layers, for when the leader labels are not on the drawing. Hidden by
   default and turned on at the same breakpoint that removes the callouts. */
.chassis__layers { display: none; }

/* --- the drawing itself ------------------------------------------------- */

.cx-layer { transform-box: fill-box; }

.cx-top,
.cx-right,
.cx-left {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cx-top   { fill: rgba(86, 200, 245, .07); stroke: rgba(255, 255, 255, .38); }
.cx-right { fill: rgba(7, 21, 39, .62);    stroke: rgba(255, 255, 255, .22); }
.cx-left  { fill: rgba(0, 0, 0, .34);      stroke: rgba(255, 255, 255, .15); }

.cx-ridge {
  stroke: rgba(255, 255, 255, .17);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cx-chip {
  fill: rgba(27, 116, 232, .20);
  stroke: rgba(86, 200, 245, .45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Antenna patches read warmer than the boards; they are the RF layer. */
.cx-antenna {
  fill: rgba(86, 200, 245, .16);
  stroke: rgba(86, 200, 245, .62);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cx-port {
  fill: rgba(0, 0, 0, .46);
  stroke: rgba(255, 255, 255, .30);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cx-led { filter: drop-shadow(0 0 5px currentColor); }

.cx-lead {
  stroke: rgba(86, 200, 245, .5);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cx-dot { fill: var(--cyan); }
.cx-label {
  font-family: var(--f-mono);
  font-size: 12px;
  fill: var(--fg-muted);
  letter-spacing: .04em;
}

.cx-dim,
.cx-dim-tick {
  stroke: var(--steel);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cx-dim-tick { stroke-dasharray: 2 3; }
.cx-dim-label {
  font-family: var(--f-mono);
  font-size: 11.5px;
  fill: var(--steel-light);
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   19: Reveal
   -------------------------------------------------------------------------- */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rv.is-in { opacity: 1; transform: none; }
.rv-1 { transition-delay: .07s; }
.rv-2 { transition-delay: .14s; }
.rv-3 { transition-delay: .21s; }
.rv-4 { transition-delay: .28s; }
.rv-5 { transition-delay: .35s; }

/* --------------------------------------------------------------------------
   20: Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__in { grid-template-columns: 1fr; gap: 52px; }
  .tiers { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  /* Below the sticky breakpoint the drawing plays once on entry instead of
     being scrubbed, so it needs no runway. */
  .chassis { min-height: 0; }
  .chassis__stage {
    position: static;
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
  }
  .chassis__svg { max-height: none; }
  .chassis__cap p { max-width: none; }

  /* There is no runway to scrub below this width; the drawing plays once on
     entry. Asking for a scroll that does nothing is worse than saying nothing. */
  .chassis__hint { display: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 22px; }

  /* Leader labels are unreadable at handset width, so they come off and the
     named list under the caption carries the layers instead. */
  .cx-callout, .cx-dims { display: none; }

  .chassis__layers {
    display: grid; gap: 7px;
    margin: 20px 0 0; padding: 0; list-style: none;
    counter-reset: cxl;
  }
  .chassis__layers li {
    display: grid; grid-template-columns: 24px 1fr; gap: 10px;
    font-family: var(--f-mono); font-size: .76rem;
    color: var(--fg-muted); line-height: 1.5;
  }
  .chassis__layers li::before {
    counter-increment: cxl;
    content: counter(cxl, decimal-leading-zero);
    color: var(--cyan);
  }

  .nav__links {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch;
    background: rgba(7, 21, 39, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    padding: 14px var(--gutter) 24px;
    gap: 2px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 14px 4px; font-size: .8rem; }
  /* The drawer button carries the full product name; on a 320px handset that
     is wider than the gutter allows, so let it wrap rather than overflow. */
  .nav__links .btn {
    margin-top: 12px; justify-content: center;
    white-space: normal; text-align: center;
  }
  .nav__toggle { display: inline-flex; }
  .nav.is-open { background: rgba(7, 21, 39, .97); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .cta { grid-template-columns: 1fr; }

  .spec__row { grid-template-columns: 1fr; gap: 6px; }
  .spec__row--led { grid-template-columns: 30px 1fr; gap: 14px; }
  .spec__row--led dd { grid-column: 2; }

  .presents { flex-wrap: wrap; }
  .presents__leds { margin-left: 0; width: 100%; }

  .hero__meta div { border-right: 0; padding-right: 0; margin-right: 0; flex: 1 1 44%; }
  .hero__meta strong { font-size: 1rem; }

  .foot__top { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .stat:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .plate__led .label { font-size: .48rem; letter-spacing: .06em; }
  .plate__paths { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --------------------------------------------------------------------------
   21: Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }

  /* The exploded state is the informative one, so hold it there statically
     rather than showing a sealed box that never opens. */
  .chassis { min-height: 0; }
  .chassis__stage { position: static; min-height: 0; }
  .chassis__hint { display: none; }
}