:root {
  color-scheme: dark;
  --ink: #f3f4ef;
  --muted: #969b99;
  --quiet: #5d6261;
  --surface-0: #050606;
  --surface-1: #090a0a;
  --surface-2: #0d0f0f;
  --surface-3: #141616;
  --line: rgba(232, 236, 231, 0.12);
  --line-soft: rgba(232, 236, 231, 0.065);
  --cyan: #2bdde4;
  --cyan-soft: rgba(43, 221, 228, 0.12);
  --blue: #729cff;
  --violet: #bd70f7;
  --magenta: #f064a2;
  --orange: #ff8d35;
  --yellow: #e8dc43;
  --green: #48d37d;
  --radius: 12px;
  --page: min(1480px, calc(100vw - 72px));
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--surface-0);
  scrollbar-color: var(--cyan) #080a0a;
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #080a0a; }
*::-webkit-scrollbar-thumb {
  min-height: 46px;
  border: 3px solid #080a0a;
  border-radius: 999px;
  background: linear-gradient(180deg, #55f5f8, var(--cyan));
  box-shadow: 0 0 14px rgba(43, 221, 228, .24);
}
*::-webkit-scrollbar-thumb:hover { background: #82fbfd; }
*::-webkit-scrollbar-corner { background: #080a0a; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 74% 6%, rgba(43, 221, 228, 0.045), transparent 23rem),
    linear-gradient(180deg, #080909 0%, #050606 38%, #080909 100%);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  z-index: 30;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
}

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

::selection { background: rgba(43, 221, 228, 0.28); color: white; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--surface-0);
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }
.page-shell { width: var(--page); margin-inline: auto; }

.preview-rail {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  color: #9ca3a1;
  background: #030404;
  border-bottom: 1px solid var(--line-soft);
  font: 600 9px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.preview-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(43, 221, 228, 0.7);
}

.preview-separator { width: 28px; height: 1px; background: var(--line); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(36px, calc((100vw - 1480px) / 2));
  background: rgba(7, 8, 8, 0.82);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  transition: background 240ms ease, border-color 240ms ease;
}

.site-header.is-scrolled { background: rgba(5, 6, 6, 0.96); border-color: var(--line); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-transform: uppercase;
}

.brand-company {
  font-size: 18px;
  font-weight: 760;
  letter-spacing: 0.22em;
}

.brand-product { color: var(--muted); font: 500 11px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.18em; }

.brand-mark {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(239, 242, 236, 0.52);
  border-radius: 50%;
}

.brand-mark i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  top: -2px;
  right: 1px;
  background: var(--cyan);
}

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  position: relative;
  padding: 12px 0;
  color: var(--muted);
  font: 600 10px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--cyan);
  transition: right 220ms var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.site-nav .nav-cta { padding: 14px 18px; border: 1px solid var(--line); color: var(--ink); }
.site-nav .nav-cta::after { display: none; }
.site-nav .nav-cta:hover { border-color: rgba(43, 221, 228, 0.55); background: var(--cyan-soft); }
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: clamp(720px, calc(100svh - 106px), 920px);
  padding: clamp(60px, 7vh, 96px) 0 86px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 62% at 76% 48%, rgba(43, 221, 228, 0.075), transparent 62%),
    linear-gradient(90deg, rgba(5, 6, 6, 0.96) 0%, rgba(5, 6, 6, 0.64) 42%, rgba(5, 6, 6, 0.05) 68%, rgba(5, 6, 6, 0.42) 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(470px, 0.72fr) minmax(0, 1.42fr);
  gap: clamp(4px, 1.5vw, 24px);
  align-items: center;
}

.eyebrow, .section-index, .toolbar-label, .meta-label, .launch-kicker {
  font: 650 10px/1.2 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--cyan); margin-bottom: 32px; }
.eyebrow-rule { width: 40px; height: 1px; background: rgba(43, 221, 228, 0.4); }
.eyebrow span:last-child { color: var(--quiet); }

h1, h2, h3, p { margin-top: 0; }
h1, h2 {
  margin-bottom: 28px;
  font-weight: 560;
  line-height: 0.97;
  letter-spacing: -0.055em;
}
h1 { font-size: clamp(62px, 5.45vw, 96px); max-width: 11ch; }
h2 { font-size: clamp(50px, 5.4vw, 88px); }
h3 { font-size: 20px; font-weight: 560; letter-spacing: -0.02em; }

.hero-title-primary,
.hero-title-accent,
.heading-primary,
.heading-accent {
  display: block;
}

.hero-title-primary,
.heading-primary {
  color: var(--ink);
  font-weight: 760;
}

.hero-title-accent,
.heading-accent {
  color: var(--cyan);
  font-weight: 530;
}

.hero-title-accent {
  text-shadow: 0 0 34px rgba(43, 221, 228, 0.1);
}

.hero-lede {
  max-width: 620px;
  margin-bottom: 38px;
  color: #b1b6b4;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.65;
}
.hero-lede strong,
.section-intro p strong,
.step-copy > p strong,
.system-copy p strong,
.launch-copy p strong {
  color: var(--ink);
  font-weight: 720;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 22px;
  border: 1px solid var(--line);
  font: 650 10px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: transform 180ms var(--ease), border-color 180ms ease, background 180ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: #080909; border-color: var(--ink); }
.button-primary:hover, .button-primary:focus-visible { background: var(--cyan); border-color: var(--cyan); }
.button-quiet { color: var(--muted); }
.button-quiet:hover, .button-quiet:focus-visible { color: var(--ink); border-color: rgba(239,242,236,.35); }
.button-arrow { font-size: 16px; }

.hero-meta { display: flex; gap: 0; border-top: 1px solid var(--line-soft); padding-top: 22px; }
.hero-meta > div { padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--line-soft); }
.hero-meta > div:last-child { border: 0; margin: 0; padding: 0; }
.hero-meta span { display: block; color: var(--quiet); margin-bottom: 7px; }
.hero-meta strong { font-size: 12px; font-weight: 540; letter-spacing: 0.03em; }

.hero-copy,
.hero-visual,
.instrument-object,
.view-tabs,
.view-copy,
.view-media {
  min-width: 0;
}

.hero-copy { position: relative; z-index: 3; }

.hero-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 520px;
  display: grid;
  place-items: center;
  isolation: isolate;
  --product-x: 0px;
  --product-y: 0px;
  --light-x: 50%;
  --phase-rx: 0deg;
  --phase-ry: 0deg;
}
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 96%;
  aspect-ratio: 1.45;
  left: -2%;
  top: 2%;
  pointer-events: none;
  background: radial-gradient(circle at var(--light-x) 42%, rgba(43, 221, 228, 0.10), rgba(43, 221, 228, 0.025) 25%, transparent 62%);
  filter: blur(12px);
}
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 82%;
  height: 15%;
  left: 2%;
  bottom: 3%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(24px);
  transform: rotate(-1deg);
}
.instrument-object {
  position: relative;
  width: 112%;
  margin: 0 -2% 0 -10%;
  transform: perspective(1400px) translate3d(var(--product-x), var(--product-y), 0) rotateX(var(--phase-rx)) rotateY(var(--phase-ry));
  transform-origin: 50% 62%;
  transition: transform 620ms var(--ease);
}
.instrument-object img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 42px 34px rgba(0, 0, 0, 0.62))
    drop-shadow(0 12px 12px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 30px rgba(43, 221, 228, 0.05));
  transform: translateY(0);
  transform-origin: 50% 62%;
  transition: transform 520ms var(--ease), filter 520ms var(--ease);
}
.hero-visual:hover .instrument-object img {
  filter:
    drop-shadow(0 38px 32px rgba(0, 0, 0, 0.6))
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 30px rgba(43, 221, 228, 0.05));
}

.hero-visual[data-demo-phase="rotate"] { --phase-rx: .35deg; --phase-ry: -1.15deg; }
.hero-visual[data-demo-phase="parameter"] { --phase-rx: -.3deg; --phase-ry: .65deg; }
.hero-visual[data-demo-phase="grid"] { --phase-rx: .2deg; --phase-ry: -.45deg; }

.hero-product-demo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-screen-demo {
  position: absolute;
  left: 24.55%;
  top: 20.65%;
  width: 39.45%;
  height: 51.15%;
  overflow: hidden;
  clip-path: polygon(3.4% 0, 97.7% .8%, 100% 99%, 0 99%);
  color: #d9ffff;
  background:
    radial-gradient(circle at 50% 48%, rgba(20, 187, 193, .11), transparent 44%),
    linear-gradient(145deg, rgba(12, 23, 25, .985), rgba(3, 8, 9, .99));
  box-shadow: inset 0 0 0 1px rgba(117, 251, 255, .08), inset 0 0 36px rgba(0, 0, 0, .84);
  transform: rotate(.08deg);
}

.hero-screen-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(205, 255, 255, .055) 3px 4px);
  mix-blend-mode: soft-light;
}

.demo-screen-head {
  position: absolute;
  z-index: 7;
  top: 4.3%;
  left: 6.5%;
  right: 5%;
  display: grid;
  grid-template-columns: 1fr auto 18%;
  align-items: center;
  gap: 4%;
  color: rgba(214, 250, 249, .46);
  font: 700 clamp(3px, .48vw, 8px)/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
}

.demo-screen-head strong { color: var(--cyan); font-weight: 700; }
.demo-screen-head i { height: 2px; background: linear-gradient(90deg, rgba(202, 241, 239, .14) 0 44%, #ecf8f4 44% 58%, rgba(202, 241, 239, .14) 58%); }

.demo-orbital-view,
.demo-parameter-view,
.demo-grid-view {
  position: absolute;
  inset: 12% 4.2% 4.5%;
  transition: opacity 420ms var(--ease), transform 540ms var(--ease), filter 420ms ease;
}

.demo-orbital-view { opacity: 1; transform: scale(1); }
.demo-orbit-axis { position: absolute; background: rgba(196, 238, 236, .07); }
.demo-orbit-axis.axis-x { left: 7%; right: 7%; top: 50%; height: 1px; }
.demo-orbit-axis.axis-y { top: 2%; bottom: 2%; left: 50%; width: 1px; }

.demo-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.demo-orbit-ring.ring-outer {
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(43, 221, 228, .74);
  box-shadow: 0 0 8px rgba(43, 221, 228, .14), inset 0 0 18px rgba(43, 221, 228, .035);
}
.demo-orbit-ring.ring-inner { width: 45%; aspect-ratio: 1; border: 1px solid rgba(113, 156, 255, .14); }
.demo-orbit-nodes { position: absolute; inset: 0; border-radius: 50%; transition: transform 780ms cubic-bezier(.16,.8,.24,1); }
.demo-orbit-node { position: absolute; inset: -1px; border-radius: 50%; transform: rotate(var(--node-angle)); }
.demo-orbit-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #263638;
  border: 1px solid rgba(183, 239, 239, .3);
  transform: translateX(-50%);
}
.demo-orbit-node.is-hit::before { background: #83ffff; border-color: #d9ffff; box-shadow: 0 0 8px rgba(43, 221, 228, .85); }

.demo-orbit-playhead {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: heroPlayhead 3.2s steps(16, end) infinite;
}
.demo-orbit-playhead::before { content: ""; position: absolute; left: 50%; top: -7%; width: 1px; height: 57%; background: linear-gradient(#f6ffff 0 9%, rgba(43,221,228,.56) 9% 58%, transparent); }
.demo-orbit-playhead i { position: absolute; left: calc(50% - 4px); top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #f1ffff; box-shadow: 0 0 0 5px rgba(43,221,228,.3), 0 0 18px rgba(43,221,228,.9); }

.demo-orbit-hub {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 25%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #172123, #070b0c 70%);
  border: 1px solid rgba(169, 244, 243, .12);
  box-shadow: 0 0 20px rgba(0,0,0,.6);
  text-align: center;
}
.demo-orbit-hub span,
.demo-orbit-hub small { color: rgba(214,245,243,.42); font: 700 clamp(2px,.37vw,6px)/1 monospace; letter-spacing: .13em; }
.demo-orbit-hub strong { margin: 7% 0; color: #eefcf8; font: 500 clamp(8px,1.45vw,23px)/1 monospace; }

.demo-parameter-view {
  opacity: 0;
  transform: scale(.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.demo-parameter-kicker,
.demo-parameter-detail { color: rgba(215,245,243,.48); font: 700 clamp(3px,.48vw,8px)/1 monospace; letter-spacing: .14em; }
.demo-parameter-value { display: flex; align-items: baseline; gap: 9%; margin: 7% 0; }
.demo-parameter-value small { color: var(--cyan); font: 700 clamp(5px,.7vw,11px)/1 monospace; letter-spacing: .16em; }
.demo-parameter-value strong,
.demo-parameter-value b { color: rgba(226,245,241,.28); font: 450 clamp(20px,4.2vw,66px)/.8 monospace; }
.demo-parameter-value b { color: #effffa; text-shadow: 0 0 18px rgba(43,221,228,.3); }
.demo-parameter-value i { color: var(--cyan); font: 400 clamp(7px,1.1vw,17px)/1 monospace; }
.demo-length-meter { width: 72%; display: grid; grid-template-columns: repeat(16, 1fr); gap: 1.2%; margin-bottom: 6%; }
.demo-length-meter i { height: clamp(4px,.7vw,11px); background: rgba(43,221,228,.76); box-shadow: 0 0 6px rgba(43,221,228,.2); }
.demo-length-meter i:last-child { background: rgba(221,243,239,.07); box-shadow: none; animation: removedStep 3.6s ease infinite; }

.demo-grid-view { opacity: 0; transform: translateY(5%) scale(.96); padding: 4% 1.5% 1%; }
.demo-grid-head { display: flex; justify-content: space-between; margin-bottom: 5%; color: rgba(217,246,244,.48); font: 700 clamp(3px,.45vw,7px)/1 monospace; letter-spacing: .12em; }
.demo-grid-head strong { color: var(--cyan); }
.demo-grid-rows { display: grid; gap: clamp(1px,.22vw,4px); }
.demo-grid-row { display: grid; grid-template-columns: 12% repeat(16, 1fr); gap: 1%; align-items: center; }
.demo-grid-row > span { color: rgba(220,246,244,.38); font: 700 clamp(2px,.35vw,6px)/1 monospace; letter-spacing: .08em; }
.demo-grid-row > i { height: clamp(3px,.68vw,11px); border: 1px solid rgba(207,244,241,.12); background: rgba(229,255,252,.025); }
.demo-grid-row > i.is-hit { background: rgba(43,221,228,.7); border-color: #6ffcff; box-shadow: 0 0 5px rgba(43,221,228,.35); }
.demo-grid-row:nth-child(2) > i.is-hit { background: rgba(114,156,255,.75); border-color: #9bb8ff; }
.demo-grid-row:nth-child(3) > i.is-hit { background: rgba(189,112,247,.75); border-color: #d4a2fa; }
.demo-grid-row:nth-child(4) > i.is-hit { background: rgba(240,100,162,.75); border-color: #fa9ac5; }
.demo-grid-row:nth-child(5) > i.is-hit { background: rgba(255,141,53,.78); border-color: #ffb16f; }
.demo-grid-row:nth-child(6) > i.is-hit { background: rgba(232,220,67,.76); border-color: #fff48b; }
.demo-grid-row:nth-child(7) > i.is-hit { background: rgba(72,211,125,.76); border-color: #86efa9; }
.demo-grid-row:nth-child(8) > i.is-hit { background: rgba(43,221,228,.62); border-color: #72fbff; }
.demo-grid-cursor { position: absolute; top: 14%; bottom: 3%; left: 15%; width: 1px; opacity: .8; background: linear-gradient(transparent, #eeffff 12% 88%, transparent); box-shadow: 0 0 7px var(--cyan); animation: gridCursor 3.2s steps(16, end) infinite; }

.hero-visual[data-demo-phase="rotate"] .demo-orbit-nodes { transform: rotate(67.5deg); }
.hero-visual[data-demo-phase="rotate"] .demo-orbit-ring.ring-outer { box-shadow: 0 0 14px rgba(43,221,228,.27), inset 0 0 22px rgba(43,221,228,.06); }
.hero-visual[data-demo-phase="parameter"] .demo-orbital-view { opacity: .1; transform: scale(1.08); filter: blur(1px); }
.hero-visual[data-demo-phase="parameter"] .demo-parameter-view { opacity: 1; transform: scale(1); }
.hero-visual[data-demo-phase="grid"] .demo-orbital-view { opacity: 0; transform: scale(.9); }
.hero-visual[data-demo-phase="grid"] .demo-grid-view { opacity: 1; transform: translateY(0) scale(1); }

.demo-control-pulse {
  position: absolute;
  width: 8.4%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65);
  border: 1px solid rgba(117,255,255,.9);
  background: radial-gradient(circle, rgba(43,221,228,.14), transparent 68%);
  box-shadow: 0 0 0 5px rgba(43,221,228,.06), 0 0 22px rgba(43,221,228,.35);
  transition: opacity 260ms ease, transform 480ms var(--ease);
}
.demo-control-pulse span { color: rgba(221,255,252,.72); font: 700 clamp(3px,.4vw,7px)/1 monospace; letter-spacing: .1em; }
.demo-control-pulse strong { margin-top: 5%; color: white; font: 700 clamp(5px,.75vw,12px)/1 monospace; }
.control-rotate { left: 83%; top: 26.8%; }
.control-length { left: 68.3%; top: 26.8%; }
.control-grid { left: 79%; top: 17.5%; width: 6.2%; border-radius: 12%; }
.hero-visual[data-demo-phase="rotate"] .control-rotate,
.hero-visual[data-demo-phase="parameter"] .control-length,
.hero-visual[data-demo-phase="grid"] .control-grid { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: controlHalo 1.1s ease-in-out infinite; }

.demo-pad-sequence {
  position: absolute;
  left: 8.7%;
  top: 73.15%;
  width: 82.6%;
  height: 7.8%;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: .45%;
  opacity: 0;
  transition: opacity 220ms ease;
}
.demo-pad-light { position: relative; border-radius: 4%; }
.demo-pad-light::after { content: ""; position: absolute; inset: 2%; opacity: 0; border: 1px solid #bbffff; background: rgba(43,221,228,.13); box-shadow: inset 0 0 9px rgba(43,221,228,.35), 0 0 12px rgba(43,221,228,.55); animation: padRunner 3.2s steps(1, end) infinite; animation-delay: var(--pad-delay); }
.demo-pad-light.is-hit { box-shadow: inset 0 2px 0 rgba(99,255,255,.8), 0 -5px 12px rgba(43,221,228,.12); }
.hero-visual[data-demo-phase="pulse"] .demo-pad-sequence,
.hero-visual[data-demo-phase="grid"] .demo-pad-sequence { opacity: 1; }

.hero-demo-console {
  position: absolute;
  z-index: 5;
  left: 2%;
  right: 0;
  bottom: 2.5%;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(280px, 1.45fr) 42px;
  align-items: stretch;
  background: rgba(6, 9, 9, .91);
  border: 1px solid rgba(210,238,235,.12);
  box-shadow: 0 18px 34px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px);
}
.hero-demo-status { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 12px 16px; border-right: 1px solid var(--line-soft); }
.demo-live { margin-bottom: 7px; color: var(--cyan); font: 700 7px/1 monospace; letter-spacing: .14em; text-transform: uppercase; }
.demo-live i { display: inline-block; width: 4px; height: 4px; margin-right: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: liveBlink 1.2s ease-in-out infinite; }
.hero-demo-status strong { overflow: hidden; color: #edf5f1; font-size: 12px; line-height: 1.2; font-weight: 690; white-space: nowrap; text-overflow: ellipsis; }
.hero-demo-status small { overflow: hidden; margin-top: 4px; color: #6d7472; font-size: 9px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.hero-demo-steps { display: grid; grid-template-columns: repeat(4,1fr); }
.hero-demo-steps button { position: relative; min-width: 0; padding: 10px; border: 0; border-right: 1px solid var(--line-soft); background: transparent; color: #5d6462; cursor: pointer; text-align: left; transition: color 180ms ease, background 180ms ease; }
.hero-demo-steps button::before { content: ""; position: absolute; left: 0; right: 100%; top: 0; height: 1px; background: var(--cyan); transition: right 220ms ease; }
.hero-demo-steps button[aria-current="step"] { color: #eafff9; background: rgba(43,221,228,.045); }
.hero-demo-steps button[aria-current="step"]::before { right: 0; }
.hero-demo-steps span { display: block; margin-bottom: 6px; color: inherit; font: 700 7px/1 monospace; }
.hero-demo-steps strong { display: block; overflow: hidden; color: inherit; font: 700 8px/1 monospace; letter-spacing: .08em; text-transform: uppercase; text-overflow: ellipsis; }
.hero-demo-toggle { position: relative; border: 0; background: #0a0d0d; cursor: pointer; }
.hero-demo-toggle:hover { background: rgba(43,221,228,.08); }
.demo-pause-icon::before,
.demo-pause-icon::after { content: ""; position: absolute; top: 28px; width: 2px; height: 15px; background: #d6e2de; }
.demo-pause-icon::before { left: 17px; }
.demo-pause-icon::after { right: 17px; }
.hero-demo-toggle[aria-pressed="false"] .demo-pause-icon::before { left: 17px; top: 28px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #d6e2de; background: transparent; }
.hero-demo-toggle[aria-pressed="false"] .demo-pause-icon::after { display: none; }

@keyframes heroPlayhead { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gridCursor { from { left: 15%; } to { left: 98%; } }
@keyframes controlHalo { 50% { box-shadow: 0 0 0 9px rgba(43,221,228,.025), 0 0 30px rgba(43,221,228,.48); } }
@keyframes removedStep { 0%, 26% { background: rgba(43,221,228,.7); box-shadow: 0 0 8px rgba(43,221,228,.4); } 60%,100% { background: rgba(221,243,239,.07); box-shadow: none; } }
@keyframes padRunner { 0%, 6.2% { opacity: 1; } 6.21%, 100% { opacity: 0; } }
@keyframes liveBlink { 50% { opacity: .35; box-shadow: 0 0 3px var(--cyan); } }

.scroll-cue { position: absolute; bottom: 30px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--quiet); font: 600 8px/1 monospace; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 24px; background: linear-gradient(var(--cyan), transparent); }

.proof-strip { border-bottom: 1px solid var(--line-soft); background: rgba(10,11,11,.72); }
.proof-grid { min-height: 118px; display: grid; grid-template-columns: repeat(5, 1fr); }
.proof-item { display: flex; flex-direction: column; justify-content: center; padding: 24px 26px; border-left: 1px solid var(--line-soft); }
.proof-item:last-child { border-right: 1px solid var(--line-soft); }
.proof-item strong { color: var(--ink); font-size: 23px; font-weight: 720; margin-bottom: 5px; }
.proof-item:nth-child(odd) strong { color: var(--cyan); }
.proof-item span { color: var(--quiet); font: 600 9px/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }

.section { padding-block: clamp(110px, 12vw, 190px); }
.section-index { color: var(--cyan); margin-bottom: 32px; }
.section-intro { max-width: 720px; }
.section-intro p, .step-copy > p, .system-copy p, .launch-copy p {
  max-width: 620px;
  color: #a9afad;
  font-size: 18px;
  line-height: 1.72;
}

.orbital-demo,
.view-media,
.knob-feedback,
.system-card,
.trust-card,
.launch-panel {
  position: relative;
}

.orbital-demo::after,
.view-media::after,
.system-card::after,
.trust-card::after,
.launch-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  border-left: 1px solid rgba(255, 255, 255, 0.025);
}

.movement { display: grid; grid-template-columns: .72fr 1.1fr; gap: clamp(70px, 10vw, 180px); align-items: center; }
.orbital-demo { border: 1px solid var(--line); background: linear-gradient(145deg, #0e1010, #070808 72%); padding: 22px; box-shadow: 0 36px 80px rgba(0,0,0,.28); }
.orbital-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 4px 18px; border-bottom: 1px solid var(--line-soft); }
.orbital-toolbar > div { display: flex; flex-direction: column; gap: 8px; }
.toolbar-label { color: var(--quiet); }
.orbital-toolbar strong { font: 500 12px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.run-toggle { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); background: #111313; font: 650 9px/1 monospace; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; }
.run-toggle:hover, .run-toggle:focus-visible { border-color: rgba(43,221,228,.42); }
.run-icon { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 10px rgba(43,221,228,.55); }
.run-toggle[aria-pressed="false"] .run-icon { clip-path: polygon(0 0, 100% 50%, 0 100%); }

.orbit-canvas { position: relative; width: min(100%, 610px); aspect-ratio: 1; margin: 26px auto; border-radius: 50%; background: radial-gradient(circle, #080a0a 0 18%, #050707 63%, #020303 100%); border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 80px rgba(0,0,0,.9); overflow: hidden; }
.orbit-canvas::before { content: ""; position: absolute; inset: 3.5%; border-radius: 50%; background: repeating-conic-gradient(from -90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 11.25deg); mask: radial-gradient(circle, transparent 0 95%, #000 95%); opacity: .45; }
.orbit-axis { position: absolute; background: rgba(255,255,255,.05); }
.orbit-axis-x { width: 86%; height: 1px; left: 7%; top: 50%; }
.orbit-axis-y { width: 1px; height: 86%; top: 7%; left: 50%; }
.orbit-ring { position: absolute; width: var(--ring-size); height: var(--ring-size); left: calc((100% - var(--ring-size)) / 2); top: calc((100% - var(--ring-size)) / 2); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ring-color) 40%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--ring-color) 5%, transparent); }
.orbit-ring::before { content: ""; position: absolute; width: 9px; height: 9px; left: 50%; top: -5px; margin-left: -4px; border-radius: 50%; background: var(--ring-color); box-shadow: 0 0 17px color-mix(in srgb, var(--ring-color) 68%, transparent); }
.orbit-ring::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 12%; background: linear-gradient(var(--ring-color), transparent); opacity: .7; }
.orbit-canvas.is-running .orbit-ring { animation: orbit-spin var(--duration) linear infinite; }
.ring-15 { animation-direction: reverse !important; }
.ring-value { position: absolute; right: 6%; top: 17%; color: var(--ring-color); font: 600 9px/1 monospace; }
.orbit-hub { position: absolute; width: 25%; aspect-ratio: 1; left: 37.5%; top: 37.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #070909; border: 1px solid rgba(43,221,228,.19); box-shadow: 0 0 34px rgba(43,221,228,.05); text-align: center; }
.orbit-hub span, .orbit-hub small { color: var(--quiet); font: 600 clamp(7px,.6vw,9px)/1.2 monospace; text-transform: uppercase; letter-spacing: .1em; }
.orbit-hub strong { margin: 7px 0; font-size: clamp(16px,1.5vw,24px); font-weight: 530; }
.orbital-legend { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 18px; border-top: 1px solid var(--line-soft); }
.orbital-legend span { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--quiet); font: 600 9px/1 monospace; }
.orbital-legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--legend-color); box-shadow: 0 0 8px var(--legend-color); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.views { border-block: 1px solid var(--line-soft); background: #070808; }
.section-intro-wide { display: grid; grid-template-columns: 1fr .7fr; column-gap: 100px; max-width: none; align-items: end; margin-bottom: 70px; }
.section-intro-wide .section-index { grid-column: 1 / -1; }
.section-intro-wide h2, .section-intro-wide p { margin-bottom: 0; }
.view-switcher { display: grid; grid-template-columns: 180px 270px 1fr; border-top: 1px solid var(--line); padding-top: 26px; gap: 44px; }
.view-tabs { display: flex; flex-direction: column; align-items: stretch; }
.view-tabs button { padding: 17px 0; color: var(--quiet); background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; font: 650 10px/1 monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.view-tabs button[aria-selected="true"] { color: var(--cyan); }
.view-tabs button[aria-selected="true"]::before { content: "●"; margin-right: 10px; font-size: 7px; }
.view-copy span { color: var(--cyan); font: 650 9px/1 monospace; letter-spacing: .13em; text-transform: uppercase; }
.view-copy p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 14px; }
.view-media { position: relative; width: 100%; max-width: 100%; align-self: start; margin: 0; padding: 9px; background: #020303; border: 1px solid var(--line); overflow: hidden; }
.view-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1500 / 920;
  object-fit: contain;
  object-position: center;
  transition: opacity 180ms ease, transform 420ms var(--ease);
}
.view-media.is-changing img { opacity: .18; transform: scale(.995); }
.screen-scan { position: absolute; z-index: 2; inset: 9px; pointer-events: none; background: linear-gradient(105deg, transparent 0 39%, rgba(255,255,255,.035) 47%, transparent 56%); }

.step-edit { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(80px, 11vw, 180px); align-items: center; }
.parameter-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; max-width: 600px; }
.parameter-cloud span { padding: 10px 13px; border: 1px solid var(--line); color: var(--muted); font: 600 9px/1 monospace; letter-spacing: .1em; text-transform: uppercase; }
.knob-feedback { position: relative; min-height: 360px; padding: 36px; background: #061011; border: 1px solid rgba(43,221,228,.5); box-shadow: 0 0 50px rgba(43,221,228,.06), inset 0 0 90px rgba(0,0,0,.55); overflow: hidden; }
.knob-feedback::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; border: 1px solid rgba(43,221,228,.14); left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 72px rgba(43,221,228,.015), 0 0 0 144px rgba(43,221,228,.01); }
.feedback-head, .feedback-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.feedback-head span, .feedback-foot { color: var(--cyan); font: 650 10px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.feedback-head strong { font-size: 34px; font-weight: 540; }
.length-cells { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; margin: 95px 0 100px; }
.length-cells i { height: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.length-cells i.on { background: rgba(43,221,228,.45); border-color: rgba(43,221,228,.35); }
.length-cells i.on:first-child { background: var(--cyan); box-shadow: 0 0 12px rgba(43,221,228,.25); }
.feedback-foot { color: var(--quiet); font-size: 8px; }
.feedback-rule { position: absolute; top: 78px; right: 47px; bottom: 50px; width: 1px; background: rgba(238,242,236,.65); }
.feedback-rule i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); left: -3px; top: 35%; box-shadow: 0 0 16px rgba(43,221,228,.5); }

.workflow { background: #0a0b0b; border-block: 1px solid var(--line-soft); }
.workflow .section-intro { margin-bottom: 70px; }
.workflow-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.workflow-list li { display: grid; grid-template-columns: 80px 1fr 130px; gap: 30px; align-items: center; min-height: 150px; padding: 26px 8px; border-bottom: 1px solid var(--line-soft); }
.workflow-number { color: var(--cyan); font: 650 10px/1 monospace; }
.workflow-list h3 { margin-bottom: 9px; }
.workflow-list p { color: var(--muted); max-width: 690px; margin-bottom: 0; }
.workflow-code { justify-self: end; color: var(--quiet); font: 600 11px/1 monospace; letter-spacing: .08em; }

.system-card { display: grid; grid-template-columns: .8fr 1fr; gap: 80px; min-height: 510px; align-items: center; padding: clamp(42px, 6vw, 86px); border: 1px solid var(--line); background: radial-gradient(circle at 82% 44%, rgba(43,221,228,.055), transparent 28%), #0c0e0e; }
.routing-map { display: grid; grid-template-columns: 80px 1fr 150px; min-height: 320px; align-items: stretch; }
.route-source, .route-target { display: flex; flex-direction: column; justify-content: space-around; }
.route-source span { width: 52px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font: 600 9px/1 monospace; }
.route-source span:nth-child(1), .route-source span:nth-child(5), .route-source span:nth-child(6) { color: var(--ink); border-color: rgba(43,221,228,.35); box-shadow: inset 2px 0 var(--cyan); }
.route-lines { position: relative; background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.025) 39px 40px); }
.route-lines i { position: absolute; left: 0; right: 0; height: 1px; transform-origin: left; background: linear-gradient(90deg, rgba(43,221,228,.62), rgba(43,221,228,.13)); }
.line-a { top: 22%; transform: rotate(8deg); }
.line-b { top: 53%; transform: rotate(-8deg); }
.line-c { top: 76%; transform: rotate(-18deg); }
.route-target span { min-height: 62px; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; border: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.route-target small { color: var(--cyan); font: 600 8px/1 monospace; margin-bottom: 7px; letter-spacing: .1em; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.trust-card { min-height: 250px; padding: 34px; border: 1px solid var(--line-soft); background: #090b0b; transition: border-color 220ms ease, background 220ms ease, transform 220ms var(--ease); }
.trust-card:hover { transform: translateY(-3px); border-color: rgba(43,221,228,.24); background: #0b0e0e; }
.trust-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 54px; border: 1px solid var(--line); color: var(--cyan); }
.trust-card h3 { margin-bottom: 12px; }
.trust-card p { color: var(--muted); margin: 0; font-size: 14px; }

.specifications { background: #080909; border-top: 1px solid var(--line-soft); }
.specs-layout { display: grid; grid-template-columns: .72fr 1fr; gap: 110px; }
.spec-heading { position: sticky; top: 130px; align-self: start; }
.spec-list { margin: 0; border-top: 1px solid var(--line); }
.spec-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding: 28px 0; border-bottom: 1px solid var(--line-soft); }
.spec-list dt { color: var(--quiet); font: 650 9px/1.5 monospace; letter-spacing: .12em; text-transform: uppercase; }
.spec-list dd { margin: 0; color: #b8bdbb; }

.launch { padding-top: 80px; }
.launch-panel { position: relative; display: grid; grid-template-columns: 1fr .38fr; gap: 50px 80px; padding: clamp(48px, 7vw, 100px); background: #0a0c0c; border: 1px solid rgba(43,221,228,.24); overflow: hidden; }
.launch-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(43,221,228,.035), transparent 40%); pointer-events: none; }
.launch-orbit { position: absolute; width: 580px; height: 580px; border-radius: 50%; right: -210px; top: -220px; border: 1px solid rgba(43,221,228,.12); box-shadow: 0 0 0 80px rgba(43,221,228,.012), 0 0 0 160px rgba(43,221,228,.008); }
.launch-copy, .launch-price, .waitlist-form, .launch-caveat { position: relative; z-index: 1; }
.launch-kicker { display: block; color: var(--cyan); margin-bottom: 26px; }
.launch-price { align-self: center; padding-left: 30px; border-left: 1px solid var(--line); }
.launch-price span, .launch-price small { display: block; color: var(--quiet); font: 650 9px/1.3 monospace; letter-spacing: .1em; text-transform: uppercase; }
.launch-price strong { display: block; margin: 14px 0; font-size: clamp(70px, 7vw, 110px); font-weight: 480; line-height: .9; letter-spacing: -.06em; }
.launch-price sup { font-size: .28em; vertical-align: top; position: relative; top: .18em; margin-right: 3px; }
.waitlist-form { grid-column: 1 / -1; max-width: 820px; }
.waitlist-form label { display: block; margin-bottom: 11px; color: var(--quiet); font: 650 9px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.field-row { display: grid; grid-template-columns: 1fr auto; }
.field-row input { min-width: 0; height: 62px; padding: 0 20px; color: var(--ink); background: #050606; border: 1px solid var(--line); border-right: 0; outline: none; }
.field-row input:focus { border-color: rgba(43,221,228,.5); box-shadow: inset 3px 0 var(--cyan); }
.field-row input::placeholder { color: #555a59; }
.field-row button { min-width: 185px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 20px; color: #050606; background: var(--ink); border: 1px solid var(--ink); cursor: pointer; font: 650 10px/1 monospace; letter-spacing: .1em; text-transform: uppercase; }
.field-row button:hover, .field-row button:focus-visible { background: var(--cyan); border-color: var(--cyan); }
.form-note, .launch-caveat { color: var(--quiet); font-size: 12px; }
.form-note { margin: 10px 0 0; }
.form-note.is-success { color: var(--cyan); }
.form-note.is-error { color: #ff8d7c; }
.launch-caveat { grid-column: 1 / -1; margin: 0; padding-top: 26px; border-top: 1px solid var(--line-soft); }

.site-footer { padding-top: 90px; background: #030404; border-top: 1px solid var(--line-soft); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-bottom: 80px; }
.footer-brand > span { font-size: 24px; font-weight: 720; letter-spacing: .22em; }
.footer-brand p { margin-top: 24px; color: var(--quiet); max-width: 380px; }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.footer-links > div { display: flex; flex-direction: column; gap: 12px; }
.footer-links span { color: var(--quiet); font: 650 9px/1 monospace; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 7px; }
.footer-links a { color: var(--muted); font-size: 14px; }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { min-height: 70px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-soft); color: #555a59; font: 600 9px/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.footer-bottom a:hover { color: var(--cyan); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); transition-delay: calc(var(--reveal-delay, 0) * 90ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
[data-delay="1"] { --reveal-delay: 1; }
[data-delay="2"] { --reveal-delay: 2; }
[data-delay="3"] { --reveal-delay: 3; }

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

@media (max-width: 1180px) {
  :root { --page: min(100% - 44px, 1080px); }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 820px; }
  .hero-visual { order: -1; min-height: 0; max-width: 1020px; margin: 0 auto 28px; padding-bottom: 72px; }
  .instrument-object { width: 108%; margin-inline: -4%; }
  .hero-demo-console { left: 4%; right: 4%; bottom: 2px; }
  .movement, .step-edit { grid-template-columns: 1fr; }
  .movement .section-intro, .step-copy { max-width: 760px; }
  .orbital-demo { max-width: 780px; width: 100%; margin-left: auto; }
  .view-switcher { grid-template-columns: 160px 1fr; }
  .view-media { grid-column: 1 / -1; }
  .system-card { grid-template-columns: 1fr; }
  .routing-map { max-width: 680px; width: 100%; justify-self: end; }
}

@media (max-width: 860px) {
  :root { --page: calc(100% - 32px); --header-h: 66px; }
  .preview-rail { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
  .preview-separator, .preview-rail span + * { display: none; }
  .site-header { padding-inline: 16px; }
  .menu-toggle { position: relative; display: block; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); background: #0b0d0d; cursor: pointer; }
  .menu-toggle > span:not(.sr-only) { position: absolute; width: 16px; height: 1px; left: 13px; background: var(--ink); transition: transform 200ms ease, top 200ms ease; }
  .menu-toggle > span:first-child { top: 17px; }
  .menu-toggle > span:nth-child(2) { top: 24px; }
  .menu-toggle[aria-expanded="true"] > span:first-child { top: 21px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
  .site-nav { position: absolute; display: none; top: 66px; left: 0; right: 0; padding: 18px 16px 24px; flex-direction: column; align-items: stretch; gap: 0; background: rgba(5,6,6,.98); border-bottom: 1px solid var(--line); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 17px 4px; border-bottom: 1px solid var(--line-soft); }
  .site-nav .nav-cta { margin-top: 14px; text-align: center; }
  .hero { min-height: auto; padding-top: 72px; }
  h1 { font-size: clamp(52px, 14vw, 76px); }
  h2 { font-size: clamp(46px, 12vw, 68px); }
  .hero-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hero-meta > div { border: 0; padding: 0; margin: 0; }
  .instrument-object { width: 110%; margin-inline: -5%; }
  .hero-demo-console { grid-template-columns: minmax(140px, 1fr) minmax(240px, 1.35fr) 42px; }
  .hero-demo-status small { display: none; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-item { min-height: 96px; border-bottom: 1px solid var(--line-soft); }
  .proof-item:last-child { grid-column: 1 / -1; }
  .section-intro-wide { grid-template-columns: 1fr; gap: 22px; }
  .section-intro-wide h2 { margin-bottom: 18px; }
  .view-switcher { grid-template-columns: 1fr; gap: 26px; }
  .view-tabs { flex-direction: row; overflow-x: auto; }
  .view-tabs button { flex: 1 0 auto; padding-right: 22px; }
  .view-media { grid-column: 1; }
  .workflow-list li { grid-template-columns: 46px 1fr; padding-block: 32px; }
  .workflow-code { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-card { min-height: 190px; }
  .trust-icon { margin-bottom: 30px; }
  .specs-layout { grid-template-columns: 1fr; gap: 50px; }
  .spec-heading { position: static; }
  .launch-panel { grid-template-columns: 1fr; }
  .launch-price { border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; }
  .waitlist-form, .launch-caveat { grid-column: 1; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand-product, .brand-mark { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-visual { padding-bottom: 116px; }
  .instrument-object { width: 118%; margin-inline: -9%; }
  .hero-demo-console { left: 0; right: 0; bottom: 8px; grid-template-columns: 1fr 40px; min-height: 96px; }
  .hero-demo-status { border-right: 1px solid var(--line-soft); padding-inline: 12px; }
  .hero-demo-status strong { font-size: 11px; }
  .hero-demo-steps { grid-column: 1 / -1; grid-row: 2; min-height: 38px; border-top: 1px solid var(--line-soft); }
  .hero-demo-steps button { padding: 7px 8px; }
  .hero-demo-steps span { display: none; }
  .hero-demo-toggle { grid-column: 2; grid-row: 1; }
  .demo-pause-icon::before, .demo-pause-icon::after { top: 24px; }
  .hero-demo-toggle[aria-pressed="false"] .demo-pause-icon::before { top: 23px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-item { padding-inline: 14px; }
  .orbital-demo { padding: 12px; }
  .orbital-toolbar { align-items: flex-start; gap: 14px; }
  .run-toggle { padding-inline: 10px; }
  .orbital-legend { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .knob-feedback { padding: 24px 18px; min-height: 320px; }
  .length-cells { gap: 2px; margin-block: 86px; }
  .length-cells i { height: 20px; }
  .routing-map { grid-template-columns: 55px 1fr 110px; }
  .route-target span { font-size: 10px; padding-inline: 8px; }
  .system-card { padding: 32px 20px; }
  .spec-list > div { grid-template-columns: 1fr; gap: 10px; }
  .field-row { grid-template-columns: 1fr; }
  .field-row input { border-right: 1px solid var(--line); border-bottom: 0; }
  .field-row button { min-height: 56px; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .demo-orbit-playhead { transform: translate(-50%, -50%) rotate(45deg); }
}