/* ============================================================
   ZAITech — design system
   Concept: "Measured." Precision-instrument register.
   All tokens live here at the top; nothing below hardcodes color.
   ============================================================ */

:root {
  /* Surface */
  --ink:          #0C1220;
  --ink-deep:     #070B14;
  --ink-raised:   #141C2E;
  --ink-hover:    #1B2540;

  /* Accent — reserved for data, numerals, and indexing marks */
  --brass:        #C89B5A;
  --brass-bright: #E4BE81;
  --brass-dim:    rgba(200, 155, 90, 0.16);

  /* Text */
  --text:         #E8EDF5;
  --steel:        #96A4B8;
  --steel-dim:    #64738C;

  /* Inverted band */
  --paper:        #EEF1F6;
  --paper-ink:    #0C1220;
  --paper-steel:  #55637A;
  --paper-line:   rgba(12, 18, 32, 0.12);

  /* Structure */
  --line:         rgba(150, 164, 184, 0.16);
  --line-strong:  rgba(150, 164, 184, 0.30);

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

  /* Rhythm */
  --wrap:    1180px;
  --gutter:  clamp(20px, 5vw, 48px);
  --sect-y:  clamp(72px, 11vw, 132px);

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

/* ---------- Layout primitives ---------- */

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

.section { padding-block: var(--sect-y); position: relative; }

.section--tight { padding-block: clamp(52px, 7vw, 84px); }

.band--raised { background: var(--ink-deep); }

.band--paper {
  background: var(--paper);
  color: var(--paper-ink);
}

.section__head { max-width: 660px; margin-bottom: 52px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brass);
  flex: none;
}

.band--paper .eyebrow { color: #8A6528; }

.section__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 18px;
}

.section__lede {
  color: var(--steel);
  font-size: 17.5px;
  margin: 0;
  max-width: 62ch;
}

.band--paper .section__lede { color: var(--paper-steel); }

/* ---------- Signature: instrument graticule ---------- */

.graticule {
  position: relative;
  height: 26px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background-image:
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12.8px);
  background-size: 100% 11px, 100% 6px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
}

.graticule::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 240px;
  background: linear-gradient(90deg,
    transparent,
    rgba(200, 155, 90, 0.16) 40%,
    rgba(228, 190, 129, 0.42) 50%,
    rgba(200, 155, 90, 0.16) 60%,
    transparent);
  animation: sweep 9s linear infinite;
}

@keyframes sweep {
  0%   { transform: translateX(-200px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}

.band--paper .graticule {
  border-top-color: var(--paper-line);
  background-image:
    repeating-linear-gradient(90deg, var(--paper-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(12,18,32,0.07) 0 1px, transparent 1px 12.8px);
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 18, 32, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}

.nav.is-condensed {
  border-bottom-color: var(--line);
  background: rgba(7, 11, 20, 0.94);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 74px;
  transition: height 0.3s var(--ease);
}

.nav.is-condensed .nav__inner { height: 62px; }

.nav__brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
  display: flex;
  align-items: center;
  /* No flex gap here: the text node and <b> are separate flex items,
     so a gap would split the wordmark into "ZAI Tech". Space the mark instead. */
}

.nav__mark { width: 20px; height: 20px; flex: none; margin-right: 10px; }

.nav__brand b { color: var(--brass); font-weight: 700; }

.nav__links { display: flex; gap: 30px; align-items: center; }

.nav__link {
  font-size: 14.5px;
  color: var(--steel);
  text-decoration: none;
  position: relative;
  padding-block: 6px;
  transition: color 0.2s;
}

.nav__link:hover { color: var(--text); }

.nav__link[aria-current="page"] { color: var(--text); }

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--brass);
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: 3px;
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--brass);
  color: #16110A;
  font-weight: 600;
}

.btn--primary:hover { background: var(--brass-bright); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover { border-color: var(--brass); color: var(--brass-bright); }

.band--paper .btn--ghost { border-color: var(--paper-line); color: var(--paper-ink); }
.band--paper .btn--ghost:hover { border-color: #8A6528; color: #8A6528; }

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

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(84px, 13vw, 156px) clamp(56px, 8vw, 96px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -35%; right: -12%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(200,155,90,0.10), transparent 62%);
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}

.hero__inner { position: relative; max-width: 880px; }

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 7.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}

.hero__title em {
  font-style: normal;
  color: var(--brass);
}

.hero__sub {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--steel);
  max-width: 62ch;
  margin: 0 0 38px;
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Metrics ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.metric { background: var(--ink); padding: 30px 26px; }

.band--raised .metric { background: var(--ink-deep); }

.metric__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brass);
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.metric__unit { font-size: 0.46em; color: var(--steel); letter-spacing: 0.04em; }

.metric__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin-top: 12px;
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* auto-fit only collapses fully empty tracks, not a partial final row.
   Six cards in a 4-column track leaves two visible dead cells, so grids
   with a multiple of three are pinned to three columns. */
@media (min-width: 900px) {
  .cards--tri { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--ink);
  padding: 34px 30px 36px;
  position: relative;
  transition: background 0.25s;
}

.band--raised .card { background: var(--ink-deep); }

.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.card:hover { background: var(--ink-raised); }
.card:hover::before { transform: scaleX(1); }

.card__idx {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--brass);
  display: block;
  margin-bottom: 16px;
}

.card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
}

.card__body { color: var(--steel); font-size: 15.5px; margin: 0; }

.card__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--steel-dim);
  line-height: 2;
}

.card__list li { display: flex; gap: 9px; }
.card__list li::before { content: "—"; color: var(--brass); flex: none; }

/* ---------- Throughput bars ---------- */

.bars { display: grid; gap: 22px; margin-top: 8px; }

.bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 9px;
}

.bar__name { font-family: var(--display); font-weight: 600; font-size: 17px; }

.bar__meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel-dim);
  letter-spacing: 0.05em;
}

.bar__track {
  height: 10px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.bar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(200,155,90,0.5), var(--brass));
  transition: width 1.5s var(--ease);
}

.bar__value {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--brass);
  margin-top: 7px;
  letter-spacing: 0.05em;
}

/* ---------- Steps ---------- */

.steps { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }

.step {
  background: var(--ink);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  padding: 34px 8px;
  align-items: start;
}

.band--paper .step { background: var(--paper); }
.band--paper .steps { background: var(--paper-line); border-color: var(--paper-line); }

.step__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--brass);
  padding-top: 5px;
}

.band--paper .step__num { color: #8A6528; }

.step__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0 0 10px;
}

.step__body { color: var(--steel); margin: 0; max-width: 66ch; font-size: 15.5px; }

.band--paper .step__body { color: var(--paper-steel); }

/* ---------- Spec table ---------- */

.spec { border: 1px solid var(--line); }

.spec__row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.spec__row:last-child { border-bottom: 0; }

.spec__key {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steel-dim);
  padding-top: 3px;
}

.spec__val { color: var(--text); }
.spec__val b { color: var(--brass); font-weight: 600; }

/* ---------- Model table ---------- */

.mtable-wrap { overflow-x: auto; border: 1px solid var(--line); }

.mtable {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.mtable thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steel-dim);
  text-align: left;
  font-weight: 500;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--ink-deep);
  white-space: nowrap;
}

.mtable tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.mtable tbody tr:last-child td { border-bottom: 0; }
.mtable tbody tr:hover { background: var(--ink-raised); }

.mtable .m-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mtable .m-note { color: var(--steel-dim); font-size: 13px; display: block; margin-top: 3px; }
.mtable .m-num  { font-family: var(--mono); font-size: 13px; color: var(--steel); white-space: nowrap; }
.mtable .m-rate { font-family: var(--mono); font-size: 13.5px; color: var(--brass); white-space: nowrap; }
.mtable .m-est  { font-family: var(--mono); font-size: 13.5px; color: var(--steel-dim); white-space: nowrap; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--steel-dim);
  white-space: nowrap;
}

.tag--measured { border-color: rgba(200,155,90,0.5); color: var(--brass); }

/* ---------- Service icons ---------- */

.card__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  display: block;
  color: var(--brass);
}

.card__icon path, .card__icon circle, .card__icon rect, .card__icon line, .card__icon polyline {
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Figures / diagrams ---------- */

/* Figures read as RAISED panels — always a step lighter than the band behind
   them. Using --ink-deep here made the panel darker than the page and the
   diagram looked like a hole punched in the layout. */
.figure {
  border: 1px solid var(--line-strong);
  background: var(--ink-raised);
  padding: clamp(20px, 3vw, 38px);
}

.band--raised .figure { background: var(--ink-raised); }

.figure svg { width: 100%; height: auto; display: block; }

.figure__cap {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--steel-dim);
  margin: 20px 0 0;
  text-align: center;
}

/* Flowing dash animation for diagram links */
.flow { stroke-dasharray: 5 7; animation: flow 2.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }

/* ---------- Diagram primitives (SVG uses fill, not color) ---------- */

.dlabel { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; fill: var(--steel); }
.dname  { font-family: var(--display); font-weight: 600; font-size: 15px; fill: #F3F7FC; }
.dsub   { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; fill: var(--steel); }
.drate  { font-family: var(--mono); font-size: 14px; fill: var(--brass-bright); }
.dnum   { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--brass-bright); }

.experts rect { fill: rgba(150, 164, 184, 0.16); stroke: var(--line-strong); stroke-width: 1; }
.experts rect.on {
  fill: rgba(200, 155, 90, 0.42);
  stroke: rgba(228, 190, 129, 0.85);
  animation: expertPulse 3.2s ease-in-out infinite;
}
.experts rect.on:nth-of-type(3n+2) { animation-delay: 0.5s; }
.experts rect.on:nth-of-type(3n+3) { animation-delay: 1.1s; }
@keyframes expertPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.link path { fill: none; stroke: rgba(160, 176, 198, 0.62); stroke-width: 1.3; }
/* One step lighter than .figure's background so the blocks read as objects
   sitting on the panel rather than cut-outs in it. */
.unit rect { fill: #202C48; stroke: rgba(160, 176, 198, 0.45); stroke-width: 1; }
.rule      { stroke: var(--line-strong); stroke-width: 1; }

.win   { fill: #202C48; stroke: rgba(160, 176, 198, 0.45); stroke-width: 1; }
.dot   { fill: rgba(160, 176, 198, 0.55); }
.panes rect { fill: rgba(160, 176, 198, 0.16); stroke: rgba(160, 176, 198, 0.32); stroke-width: 1; }
.accent     { fill: rgba(200, 155, 90, 0.30); stroke: rgba(200, 155, 90, 0.6); stroke-width: 1; }
.accentline { fill: none; stroke: rgba(200, 155, 90, 0.55); stroke-width: 1; }
.progress   { stroke: var(--brass); stroke-width: 2; }

.wave rect { fill: var(--brass); animation: wv 1.7s ease-in-out infinite; }
.wave rect:nth-child(3n+2) { animation-delay: 0.22s; }
.wave rect:nth-child(3n+3) { animation-delay: 0.44s; }
@keyframes wv { 0%, 100% { opacity: 0.32; } 50% { opacity: 1; } }

/* ---------- Hero with visual ---------- */

.hero__split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.hero__art { position: relative; }
.hero__art svg { width: 100%; height: auto; display: block; }

@media (max-width: 980px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero__art { display: none; }
}

/* ---------- Feature split (boutique software) ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }

.feature__list { margin: 26px 0 0; padding: 0; list-style: none; }

.feature__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-size: 15.5px;
}

.feature__list li::before {
  content: "→";
  color: var(--brass);
  font-family: var(--mono);
  font-size: 13px;
  padding-top: 2px;
}

/* ---------- Screenshot / demo preview ---------- */

.shot-link {
  display: block;
  position: relative;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--ink-deep);
  transition: border-color 0.25s, transform 0.3s var(--ease);
}

.shot-link:hover { border-color: var(--brass); transform: translateY(-3px); }

.shot { display: block; width: 100%; height: auto; }

/* Play affordance — a brass scrim that lifts on hover */
.shot-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(12, 18, 32, 0.55));
  opacity: 0.9;
  transition: opacity 0.3s;
  pointer-events: none;
}

.shot-link:hover::after { opacity: 0.45; }

.shot-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.shot-note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--steel-dim);
}

/* ---------- Callout ---------- */

.callout {
  border-left: 2px solid var(--brass);
  background: var(--ink-raised);
  padding: 26px 30px;
  margin-top: 40px;
}

.callout p { margin: 0; color: var(--steel); font-size: 15.5px; }
.callout strong { color: var(--text); }

/* ---------- CTA strip ---------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.cta__sub { color: var(--steel); margin: 0; max-width: 46ch; }

.band--paper .cta__sub { color: var(--paper-steel); }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 46px 40px;
  background: var(--ink-deep);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
}

.footer__brand b { color: var(--brass); }

.footer__note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--steel-dim);
  letter-spacing: 0.05em;
  line-height: 2;
  margin: 8px 0 0;
}

.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }

.footer__links a {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.footer__links a:hover { color: var(--brass); }

/* ---------- Reveal animation ----------
   Content is visible by default and only hidden once the inline head script
   confirms JS is running. If JS fails or is blocked, the page still renders
   fully rather than showing a blank document. */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .nav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--ink-deep);
    border-block: 1px solid var(--line);
    padding: 8px var(--gutter) 18px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links .nav__link { padding-block: 13px; width: 100%; }
  .nav__links .btn { margin-top: 12px; }
  .nav__toggle { display: block; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .spec__row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Reduced motion ---------- */

@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;
  }
  /* Must match .js .reveal specificity or the hiding rule wins — media
     queries add no specificity of their own. */
  .js .reveal { opacity: 1; transform: none; }
  .graticule::after { display: none; }
}