/* ============================================================
   AXION N1 — stage-first landing page
   Type plays a supporting role: it annotates the object, sits in the
   negative space the camera leaves, and never fights it for attention.
   ============================================================ */

:root {
  --bg:        #08090b;
  --ink:       #eef1f5;
  --ink-mid:   #a4acb8;
  --ink-dim:   #6d7581;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.055);
  --accent:    #7cc4ff;
  --accent-dim:#3d6f9c;
  --copper:    #e08a5f;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  /* Copy is capped at ~36% of the viewport so it stays in the margin the
     camera leaves empty. Wider than this and the text runs across the
     object at the shots where it sits centre-frame. */
  --panel-w: min(26rem, 36vw);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
dd { margin-inline-start: 0; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.1rem; font-weight: 600; border-radius: 0 0 .4rem 0;
}
.skip-link:focus { left: 0; }

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

/* ══════════════════ NAV ══════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(to bottom, rgba(8,9,11,.82), rgba(8,9,11,.34) 70%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav__in {
  max-width: 90rem; margin: 0 auto;
  padding: .85rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand__mark { width: 22px; height: 22px; }
.brand__word {
  font-weight: 600; letter-spacing: .17em; font-size: .82rem;
}
.nav__links {
  margin-left: auto; display: flex; gap: 1.6rem;
  font-size: .82rem; color: var(--ink-mid);
}
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--ink); }

/* ══════════════════ BUTTONS ══════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .78rem 1.4rem;
  background: var(--ink); color: #0a0b0d;
  font-size: .86rem; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  font-family: inherit;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: #fff; transform: translateY(-1px);
             box-shadow: 0 6px 22px -8px rgba(255,255,255,.4); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .5rem 1rem; font-size: .8rem; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: rgba(255,255,255,.06); box-shadow: none; }

/* ══════════════════ STAGE ══════════════════ */
.stage {
  position: fixed; inset: 0; z-index: 0;
  background: #08090b;
}
.stage__gl { display: block; width: 100%; height: 100%; }

/* poster: shown only when the canvas cannot run */
.stage__poster { display: none; }
[data-stage="fallback"] .stage__poster {
  display: grid; place-items: center;
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 38% 30%, #23272f 0%, #101216 45%, #08090b 100%);
}
/* A static product illustration for visitors with no WebGL. It is built
   to match the rendered module — same three-quarter view, same milled
   lid with its vent array, same lit-from-upper-left key — so these
   visitors get the object, not an apology. */
.poster__object {
  position: relative;
  width: min(52vw, 34rem); aspect-ratio: 1.55;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 46px 52px rgba(0,0,0,.72));
}
/* the lid: a parallelogram-shaded slab reading as a three-quarter view */
.poster__shell {
  position: absolute; left: 4%; right: 4%; top: 16%; height: 54%;
  border-radius: 12px / 16px;
  background:
    linear-gradient(163deg,
      #cfd6de 0%, #aeb6c0 14%, #868e99 38%,
      #5d646e 62%, #767e89 82%, #9aa2ad 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -2px 3px rgba(0,0,0,.55),
    inset 3px 0 6px rgba(255,255,255,.14);
}
/* the vent array milled into the lid */
.poster__shell::after {
  content: '';
  position: absolute; left: 16%; right: 22%; top: 24%; height: 44%;
  background: repeating-linear-gradient(97deg,
    rgba(28,32,38,.85) 0 2px, transparent 2px 13px);
  border-radius: 3px;
  transform: skewX(-14deg);
  opacity: .78;
}
/* the tray + exposed board edge peeking below the lid */
.poster__fins {
  position: absolute; left: 7%; right: 7%; top: 66%; height: 15%;
  border-radius: 4px / 6px;
  background: linear-gradient(180deg,
    #2f7a5c 0 22%, #3c434d 22% 46%, #262c34 46% 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.5);
}
/* I/O ports along the front face */
.poster__fins::after {
  content: '';
  position: absolute; left: 14%; right: 20%; top: 44%; height: 46%;
  background: repeating-linear-gradient(90deg,
    #12161b 0 26px, transparent 26px 44px);
  border-radius: 2px;
}
/* the key-light bloom off the lid's top-left chamfer */
.poster__glow {
  position: absolute; left: 6%; top: 12%; width: 46%; height: 34%;
  background: radial-gradient(ellipse at 30% 30%,
    rgba(255,255,255,.34), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}

/* HUD — a quiet shot readout, like a camera's viewfinder tag */
.stage__hud {
  position: absolute; left: var(--pad); bottom: 1.6rem;
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.hud__shot { transition: color .3s; }
.hud__rest {
  color: var(--accent); opacity: 0;
  transform: translateX(-4px);
  transition: opacity .5s, transform .5s;
}
.stage.is-resting .hud__rest { opacity: .85; transform: none; }
.stage.is-resting .hud__shot { color: var(--ink-mid); }

.stage__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line-soft);
}
.stage__progress i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ══════════════════ ANNOTATIONS ══════════════════ */
.anno {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.anno__line {
  fill: none;
  stroke: rgba(255,255,255,.75);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  /* the object behind is bright metal — without a dark halo the leader
     lines vanish wherever they cross a specular highlight */
  filter: drop-shadow(0 0 3px rgba(0,0,0,.9));
}
.anno__dot {
  fill: var(--accent);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.95));
}
.anno__labels {
  position: absolute; inset: 0; pointer-events: none;
}
.anno__label {
  position: absolute; top: 0; left: 0;
  width: max-content; max-width: 15rem;
  opacity: 0; visibility: hidden;
  will-change: transform, opacity;
}
/* Callouts sit directly on a lit metal object, so they carry their own
   contrast rather than relying on whatever is behind them. */
.anno__title {
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .04em; color: #fff;
  margin-bottom: .12rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.8);
}
.anno__body {
  font-size: .74rem; line-height: 1.4; color: rgba(232,238,246,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.75);
}

/* ══════════════════ SCROLL TRACK ══════════════════ */
.track { position: relative; z-index: 10; }

.panel {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  /* top padding clears the fixed nav; the copy is vertically centred
     within what remains, so a short viewport crops the empty margin
     rather than the headline */
  padding: 7rem var(--pad) 5rem;
  pointer-events: none;
}
/* A viewport too short to centre tall hero copy scrolls it instead of
   clipping it under the nav. */
@media (max-height: 760px) {
  .panel { align-items: flex-start; padding-top: 6rem; }
  .panel--still { align-items: center; }
}
.panel__in {
  pointer-events: auto; width: var(--panel-w);
  position: relative;
}
/* A soft directional scrim behind each copy block. The object is lit and
   in motion, so type over it needs a guaranteed contrast floor — without
   it the body copy dissolves against the aluminium at some scroll
   positions. The panel's own box would clip a plain gradient into a
   visible slab, so the scrim is painted on the full-bleed panel instead
   and feathered on every side; it must never read as a rectangle. */
.panel:not(.panel--still)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(8,9,11,.92) 0%, rgba(8,9,11,.86) 22%,
    rgba(8,9,11,.55) 40%, rgba(8,9,11,0) 58%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.panel--right::before,
.panel--cta::before {
  background: linear-gradient(to left,
    rgba(8,9,11,.92) 0%, rgba(8,9,11,.86) 22%,
    rgba(8,9,11,.55) 40%, rgba(8,9,11,0) 58%);
}
.panel { position: relative; }
.panel__in { z-index: 1; }
.panel--left  { justify-content: flex-start; }
.panel--right { justify-content: flex-end; }
.panel--center, .panel--cta, .panel--hero { justify-content: flex-start; }
.panel--cta .panel__in, .panel--hero .panel__in { width: min(34rem, 46vw); }
.panel--center .panel__in { width: min(32rem, 44vw); }

/* the rest beat: nothing but a whisper, so the object holds the frame */
.panel--still { justify-content: center; }
.panel--still .panel__in { width: auto; }
.still-note {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-dim); opacity: .5;
}

/* ══════════════════ TYPE ══════════════════ */
.eyebrow {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1rem;
}
.display {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 600;
  margin-bottom: 1.4rem;
}
.display--sm { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.display__accent { color: var(--ink-mid); }
.h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.12; letter-spacing: -.028em; font-weight: 600;
  margin-bottom: 1rem;
}
.lede {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.55; color: var(--ink-mid); margin-bottom: 2rem;
  max-width: 32ch;
}
.body {
  font-size: .96rem; line-height: 1.62; color: var(--ink-mid);
  max-width: 38ch;
}
.micro {
  margin-top: 1.2rem; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .04em; color: var(--ink-dim);
}

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 3rem; }

.scroll-cue {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
}
.scroll-cue span {
  width: 1px; height: 26px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* ══════════════════ STAT ROWS ══════════════════ */
.stat-row {
  display: flex; flex-wrap: wrap; gap: 2.2rem;
  margin-top: 2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.stat-row dt {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: .3rem;
}
.stat-row dd {
  font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat-row--wide { gap: 1.7rem; }

/* ══════════════════ ORDER FORM ══════════════════ */
.order { margin-top: .5rem; }
.order__label {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: .55rem;
}
.order__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.order__input {
  flex: 1 1 15rem; min-width: 0;
  padding: .78rem 1rem;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 2px; color: var(--ink);
  font-family: inherit; font-size: .9rem;
  transition: border-color .2s, background .2s;
}
.order__input::placeholder { color: var(--ink-dim); }
.order__input:focus {
  outline: none; border-color: var(--accent);
  background: rgba(124,196,255,.06);
}
.order__note {
  margin-top: .85rem; font-size: .78rem; color: var(--ink-dim);
}

/* ══════════════════ SPECS ══════════════════ */
.specs {
  position: relative; z-index: 10;
  background: #0b0c0f;
  border-top: 1px solid var(--line);
  padding: clamp(4rem, 9vw, 8rem) var(--pad);
}
.specs__in { max-width: 76rem; margin: 0 auto; }
.specs__head { margin-bottom: 3.5rem; }
.specs__grid {
  display: grid; gap: 2.5rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.spec-block h3 {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.spec-block dl > div {
  display: flex; justify-content: space-between; gap: 1.2rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
}
.spec-block dt { font-size: .84rem; color: var(--ink-dim); flex: none; }
.spec-block dd {
  font-size: .84rem; text-align: right; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════ FOOTER ══════════════════ */
.foot {
  position: relative; z-index: 10;
  background: #0b0c0f; border-top: 1px solid var(--line);
  padding: 3rem var(--pad);
}
.foot__in {
  max-width: 76rem; margin: 0 auto;
  display: flex; gap: 2rem; flex-wrap: wrap; align-items: baseline;
}
.foot__brand {
  font-weight: 600; letter-spacing: .17em; font-size: .82rem;
}
.foot__note {
  font-size: .76rem; color: var(--ink-dim);
  max-width: 52ch; margin-left: auto;
}

/* ══════════════════ RESPONSIVE ══════════════════
   Mobile gets a different edit, not a squeeze: panels sit low in the
   frame so the object owns the upper two-thirds, callouts shrink, and
   the annotation reach tightens to stay on-screen. */
@media (max-width: 860px) {
  :root { --panel-w: 100%; }

  .nav__links { display: none; }

  .panel {
    align-items: flex-end;
    padding: 6rem var(--pad) 4.5rem;
    min-height: 100vh; min-height: 100svh;
  }
  .panel__in,
  .panel--cta .panel__in,
  .panel--hero .panel__in,
  .panel--center .panel__in { width: 100%; }

  .panel--hero { align-items: flex-end; }
  .panel--still { align-items: center; }

  /* Portrait stacks object over copy, so the scrim runs bottom-up
     instead of side-to-side: the object owns the upper frame and the
     text sits in a darkened band beneath it. */
  .panel:not(.panel--still)::before {
    background: linear-gradient(to top,
      rgba(8,9,11,.96) 0%, rgba(8,9,11,.94) 34%,
      rgba(8,9,11,.72) 55%, rgba(8,9,11,0) 78%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .panel--right::before,
  .panel--cta::before {
    background: linear-gradient(to top,
      rgba(8,9,11,.96) 0%, rgba(8,9,11,.94) 34%,
      rgba(8,9,11,.72) 55%, rgba(8,9,11,0) 78%);
  }

  .lede, .body { max-width: none; }
  .stat-row { gap: 1.5rem; }
  .stat-row dd { font-size: 1.1rem; }

  .anno__label { max-width: 9.5rem; }
  .anno__title { font-size: .68rem; }
  .anno__body  { font-size: .66rem; }

  .stage__hud { left: var(--pad); bottom: .9rem; font-size: .6rem; gap: .6rem; }

  .foot__note { margin-left: 0; }
}

@media (max-width: 460px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .anno__label { max-width: 8rem; }
}

/* ══════════════════ REDUCED MOTION ══════════════════
   The stage still renders — it simply stops scrubbing and snaps
   between the key beats. Nothing is hidden, nothing is blank. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-cue span { animation: none; opacity: .6; }
  .anno__label { transition: none; }
}

/* Fallback mode hides the annotation chrome that has nothing to anchor to */
[data-stage="fallback"] .anno,
[data-stage="fallback"] .anno__labels,
[data-stage="fallback"] .stage__hud { display: none; }

@media print {
  .stage, .nav { display: none; }
  body { background: #fff; color: #000; }
}