:root {
  --x8-black:#03070c;
  --x8-night:#07111b;
  --x8-ink:#101820;
  --x8-copy:#5d6b77;
  --x8-soft:#f2f5f7;
  --x8-line:#d8e0e6;
  --x8-blue:#1478e8;
  --x8-blue-soft:#8fc8ff;
  --x8-cyan:#66dcff;
}

html { scroll-padding-top:124px; }

.x8-site-shell { background:var(--x8-black); }

.x8-page {
  overflow:hidden;
  color:var(--x8-ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.x8-page *,
.x8-local-nav * { box-sizing:border-box; }

.x8-page img { image-rendering:auto; }

.x8-wide {
  width:min(1320px,calc(100% - 80px));
  margin:0 auto;
}

.x8-page section[id] { scroll-margin-top:124px; }

.x8-eyebrow {
  margin:0;
  color:#2472bd;
  font-size:11px;
  font-weight:760;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.x8-local-nav {
  position:sticky;
  top:64px;
  z-index:28;
  color:#dbe7ef;
  border-bottom:1px solid rgba(128,158,181,.17);
  background:rgba(3,9,18,.91);
  backdrop-filter:blur(18px);
}

.x8-local-inner {
  display:flex;
  min-height:54px;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.x8-local-name {
  flex:none;
  color:#f4f8fb;
  font-size:13px;
  font-weight:650;
}

.x8-local-links {
  display:flex;
  align-items:center;
  gap:28px;
}

.x8-local-links a {
  color:#8fa1af;
  font-size:11px;
  font-weight:620;
  transition:color .18s ease;
}

.x8-local-links a:hover { color:#fff; }

.x8-local-links .x8-local-cta {
  display:inline-flex;
  min-height:34px;
  align-items:center;
  padding:8px 13px;
  color:#06111b;
  background:#edf8ff;
}

.x8-local-links .x8-local-cta:hover { color:#06111b; background:#fff; }

.x8-hero {
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 76% 42%,rgba(36,116,196,.13),transparent 33%),
    linear-gradient(120deg,#02060a 0%,#06101a 58%,#03070c 100%);
}

.x8-hero::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:
    linear-gradient(rgba(104,148,185,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(104,148,185,.11) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(90deg,transparent 18%,#000 58%,#000 100%);
  pointer-events:none;
}

.x8-hero-inner {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(350px,.76fr) minmax(650px,1.24fr);
  min-height:700px;
  align-items:center;
  gap:32px;
  padding:48px 0 42px;
}

.x8-hero-copy { max-width:500px; }
.x8-hero .x8-eyebrow { color:var(--x8-cyan); }

.x8-hero h1 {
  margin:18px 0 0;
  font-size:clamp(58px,4.8vw,74px);
  font-weight:620;
  letter-spacing:-.057em;
  line-height:.98;
}

.x8-hero h1 span { color:var(--x8-blue-soft); }

.x8-hero-lead {
  max-width:470px;
  margin:22px 0 0;
  color:#b6c2cc;
  font-size:15px;
  line-height:1.6;
}

.x8-hero-benefits {
  display:grid;
  gap:10px;
  margin:23px 0 0;
  padding:0;
  color:#e7f1f7;
  list-style:none;
}

.x8-hero-benefits li {
  position:relative;
  padding-left:18px;
  font-size:12px;
  font-weight:620;
  letter-spacing:.01em;
}

.x8-hero-benefits li::before {
  content:"";
  position:absolute;
  top:.46em;
  left:0;
  width:6px;
  height:6px;
  border:1px solid #67dfff;
  border-radius:50%;
  box-shadow:0 0 12px rgba(103,223,255,.4);
}

.x8-hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:27px;
}

.x8-button {
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:13px 20px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:720;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}

.x8-button:hover { transform:translateY(-2px); }
.x8-button-primary { color:#03111d; border-color:var(--x8-cyan); background:var(--x8-cyan); }
.x8-button-primary:hover { border-color:#b8f7ff; background:#b8f7ff; }
.x8-button-secondary { color:#e6f0f6; border-color:#3c5162; background:rgba(5,17,29,.56); }
.x8-button-secondary:hover { color:#fff; border-color:#738797; background:rgba(11,31,48,.8); }

.x8-hero-platforms {
  display:flex;
  align-items:center;
  gap:19px;
  margin-top:24px;
  color:#a9bac7;
}

.x8-hero-platforms > span {
  padding-right:18px;
  color:#718695;
  border-right:1px solid #324454;
  font-size:10px;
  font-weight:680;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.x8-hero-platforms > div { display:flex; align-items:center; gap:8px; }
.x8-hero-platforms svg { width:17px; height:17px; fill:currentColor; }
.x8-hero-platforms b { font-size:11px; font-weight:620; }

.x8-hero-product {
  position:relative;
  width:100%;
  max-width:880px;
  height:auto;
  margin:0;
  justify-self:center;
  aspect-ratio:4/3;
  overflow:hidden;
  isolation:isolate;
}

.x8-hero-product::before {
  content:"";
  position:absolute;
  inset:9% 10% 6%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(28,116,210,.15),transparent 66%);
  filter:blur(24px);
}

.x8-hero-product img {
  position:absolute;
  top:52%;
  left:50%;
  z-index:1;
  display:block;
  width:min(650px,74%);
  max-width:none;
  height:auto;
  transform:translate(-50%,-50%);
}

.x8-callout-lines {
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.x8-callout-lines polyline {
  fill:none;
  stroke:#66dfff;
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
  opacity:.72;
}

.x8-callout-lines circle {
  fill:#06121e;
  stroke:#9decff;
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}

.x8-callout {
  position:absolute;
  z-index:3;
  display:flex;
  width:190px;
  min-height:70px;
  flex-direction:column;
  justify-content:center;
  padding:12px 14px;
  color:#f2f8fb;
  border-left:1px solid #67dfff;
  background:linear-gradient(90deg,rgba(4,16,27,.9),rgba(4,16,27,.42));
  backdrop-filter:blur(8px);
}

.x8-callout span {
  color:#67dfff;
  font-size:8px;
  font-weight:760;
  letter-spacing:.11em;
}

.x8-callout strong {
  margin-top:5px;
  font-size:12px;
  font-weight:650;
}

.x8-callout small {
  margin-top:4px;
  color:#91a8b8;
  font-size:9px;
  line-height:1.35;
}

.x8-callout-can { top:60%; left:0; width:150px; transform:translateY(-50%); }
.x8-callout-serial { top:2%; right:0; width:205px; }
.x8-callout-usb { bottom:0; left:22%; }
.x8-callout-mount { right:0; bottom:7%; }

.x8-key-facts {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(148,177,199,.24);
}

.x8-key-facts > div {
  display:flex;
  min-height:108px;
  flex-direction:column;
  justify-content:center;
  padding:22px 34px;
  border-right:1px solid rgba(148,177,199,.18);
}

.x8-key-facts > div:first-child { padding-left:0; }
.x8-key-facts > div:last-child { border-right:0; }
.x8-key-facts strong { color:#f8fbfd; font-size:28px; font-weight:570; letter-spacing:-.035em; }
.x8-key-facts span { margin-top:7px; color:#758c9c; font-size:11px; }

.x8-hardware { padding:120px 0; background:#fff; }

.x8-hardware-layout {
  display:grid;
  grid-template-columns:minmax(510px,1.06fr) minmax(390px,.94fr);
  align-items:center;
  gap:94px;
}

.x8-board-view {
  position:relative;
  display:flex;
  min-height:720px;
  margin:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid #e0e5e8;
  background:#f3f5f6;
}

.x8-board-view img {
  width:min(560px,86%);
  max-height:660px;
  object-fit:contain;
}

.x8-board-view figcaption {
  position:absolute;
  right:22px;
  bottom:20px;
  left:22px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:14px;
  color:#71808a;
  border-top:1px solid #d5dce1;
}

.x8-board-view figcaption span { font-size:8px; font-weight:760; letter-spacing:.12em; }
.x8-board-view figcaption strong { font-size:10px; font-weight:620; }

.x8-hardware-copy h2,
.x8-performance-copy h2,
.x8-section-heading h2,
.x8-spec-heading h2 {
  margin:17px 0 0;
  font-size:clamp(45px,4.5vw,66px);
  font-weight:570;
  letter-spacing:-.055em;
  line-height:1.01;
}

.x8-hardware-copy > p:not(.x8-eyebrow):not(.x8-config-note),
.x8-performance-copy > p:not(.x8-eyebrow),
.x8-spec-heading > p:not(.x8-eyebrow) {
  max-width:540px;
  margin:24px 0 0;
  color:var(--x8-copy);
  font-size:15px;
  line-height:1.7;
}

.x8-interface-list { margin:39px 0 0; border-top:1px solid #cfd8de; }
.x8-interface-list > div { display:grid; grid-template-columns:118px 1fr; gap:22px; padding:18px 0; border-bottom:1px solid #cfd8de; }
.x8-interface-list dt { color:#7a8791; font-size:9px; font-weight:760; letter-spacing:.07em; }
.x8-interface-list dd { margin:0; }
.x8-interface-list dd strong,.x8-interface-list dd span { display:block; }
.x8-interface-list dd strong { color:#24333d; font-size:13px; font-weight:650; }
.x8-interface-list dd span { margin-top:5px; color:#7b8993; font-size:10px; }
.x8-config-note { margin:24px 0 0; color:#176fbd; font-size:10px; line-height:1.5; }

.x8-installation {
  padding:120px 0 126px;
  border-top:1px solid #d9e0e5;
  background:#eef2f4;
}

.x8-installation-heading {
  display:grid;
  grid-template-columns:minmax(420px,1.05fr) minmax(430px,.95fr);
  align-items:end;
  gap:90px;
}

.x8-installation-heading h2 {
  margin:17px 0 0;
  color:#101820;
  font-size:clamp(48px,5vw,72px);
  font-weight:570;
  letter-spacing:-.058em;
  line-height:.99;
}

.x8-installation-heading h2 span { color:#2472bd; }

.x8-installation-intro > p {
  max-width:610px;
  margin:0;
  color:#5d6b77;
  font-size:14px;
  line-height:1.72;
}

.x8-installation-outcomes {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:29px;
  border:1px solid #cbd5dc;
  background:#cbd5dc;
}

.x8-installation-outcomes > div {
  display:flex;
  min-height:88px;
  flex-direction:column;
  justify-content:center;
  padding:17px 16px;
  background:#f8fafb;
}

.x8-installation-outcomes strong { color:#176fbd; font-size:19px; font-weight:650; }
.x8-installation-outcomes span { margin-top:7px; color:#6a7781; font-size:9px; line-height:1.4; }

.x8-installation-stage {
  margin:56px 0 0;
  overflow:hidden;
  border:1px solid #1d3141;
  background:#07111a;
  box-shadow:0 30px 74px rgba(18,35,48,.18),0 5px 16px rgba(18,35,48,.1);
}

.x8-installation-media {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#06101a;
  isolation:isolate;
}

.x8-installation-media::after {
  position:absolute;
  inset:0;
  z-index:1;
  content:"";
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,8,13,.22),transparent 33%,rgba(2,8,13,.18)),
    linear-gradient(90deg,rgba(2,9,15,.2),transparent 30%,transparent 72%,rgba(2,9,15,.13));
}

.x8-installation-media > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.x8-installation-lines {
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  pointer-events:none;
}

.x8-installation-lines polyline {
  fill:none;
  stroke:#69dcff;
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
  opacity:.9;
}

.x8-installation-lines circle {
  fill:#06121e;
  stroke:#a6efff;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 8px rgba(86,211,255,.95));
}

.x8-install-tag {
  position:absolute;
  z-index:3;
  display:flex;
  width:205px;
  min-height:63px;
  flex-direction:column;
  justify-content:center;
  padding:11px 14px;
  color:#f3f9fc;
  border-left:2px solid #69dcff;
  background:linear-gradient(90deg,rgba(3,14,23,.94),rgba(3,14,23,.68));
  box-shadow:0 12px 30px rgba(1,7,12,.18);
  backdrop-filter:blur(8px);
}

.x8-install-tag span {
  color:#74ddff;
  font-size:8px;
  font-weight:780;
  letter-spacing:.12em;
}

.x8-install-tag strong {
  margin-top:6px;
  font-size:11px;
  font-weight:650;
  line-height:1.35;
}

.x8-install-tag-board { top:8%; left:4%; }
.x8-install-tag-host { top:4%; left:55%; }
.x8-install-tag-db9 { top:8%; right:3.5%; }
.x8-install-tag-terminal { bottom:7%; left:4%; width:225px; }

.x8-installation-stage > figcaption {
  display:grid;
  grid-template-columns:minmax(330px,.75fr) minmax(430px,1.25fr);
  align-items:start;
  gap:70px;
  padding:28px 31px 31px;
  color:#dce7ee;
  border-top:1px solid #223746;
  background:#07111a;
}

.x8-installation-stage figcaption span,
.x8-installation-card figcaption > span {
  color:#69d8ff;
  font-size:8px;
  font-weight:780;
  letter-spacing:.12em;
}

.x8-installation-stage h3 {
  margin:9px 0 0;
  color:#f4f8fb;
  font-size:24px;
  font-weight:580;
  letter-spacing:-.035em;
}

.x8-installation-stage figcaption > p {
  max-width:680px;
  margin:0;
  color:#91a5b3;
  font-size:11px;
  line-height:1.65;
}

.x8-installation-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.x8-installation-card {
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid #ccd6dc;
  background:#fff;
  box-shadow:0 16px 42px rgba(29,48,62,.09);
}

.x8-installation-card .x8-install-tag { width:188px; min-height:56px; padding:9px 12px; }
.x8-installation-card .x8-install-tag strong { font-size:10px; }
.x8-detail-tag-host { top:5%; right:3.5%; }
.x8-detail-tag-can { right:3.5%; bottom:5%; }
.x8-field-tag-can { top:5%; right:3.5%; }
.x8-field-tag-serial { bottom:5%; left:3.5%; }

.x8-installation-card figcaption {
  min-height:175px;
  padding:24px 25px 25px;
  border-top:1px solid #d4dde3;
}

.x8-installation-card h3 {
  margin:11px 0 0;
  color:#1e2d37;
  font-size:22px;
  font-weight:590;
  letter-spacing:-.035em;
}

.x8-installation-card figcaption p {
  max-width:560px;
  margin:11px 0 0;
  color:#6b7882;
  font-size:11px;
  line-height:1.62;
}

.x8-isolation {
  padding:116px 0;
  color:#fff;
  background:
    radial-gradient(circle at 20% 30%,rgba(30,116,193,.14),transparent 33%),
    #06101a;
}

.x8-isolation-layout {
  display:grid;
  grid-template-columns:minmax(520px,1.05fr) minmax(410px,.95fr);
  align-items:center;
  gap:88px;
}

.x8-isolation-visual {
  position:relative;
  margin:0;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#03070c;
}

.x8-isolation-visual img { width:100%; height:100%; object-fit:cover; object-position:center; }
.x8-isolation-visual figcaption { position:absolute; left:22px; bottom:19px; padding:10px 12px; color:#9db0be; border-left:2px solid #59caff; background:rgba(3,9,15,.72); font-size:8px; font-weight:720; letter-spacing:.09em; text-transform:uppercase; }
.x8-isolation .x8-eyebrow { color:#69caff; }
.x8-capabilities h2 { margin:18px 0 0; font-size:clamp(46px,4.3vw,64px); font-weight:560; letter-spacing:-.055em; line-height:1.02; }
.x8-capability-list { margin-top:45px; border-top:1px solid #324859; }
.x8-capability-list article { display:grid; grid-template-columns:42px 1fr; gap:18px; min-height:105px; align-items:center; padding:19px 0; border-bottom:1px solid #273b4b; }
.x8-capability-list article > strong { color:#7192aa; font-size:10px; font-weight:720; }
.x8-capability-list h3 { margin:0; color:#f0f6fa; font-size:19px; font-weight:610; }
.x8-capability-list p { margin:7px 0 0; color:#8fa2b0; font-size:12px; line-height:1.55; }

.x8-performance { padding:122px 0; background:#fff; }

.x8-performance-layout {
  display:grid;
  grid-template-columns:minmax(320px,.68fr) minmax(620px,1.32fr);
  align-items:center;
  gap:84px;
}

.x8-speed-facts { margin:34px 0 0; border-top:1px solid #d4dce2; }
.x8-speed-facts > div { display:grid; grid-template-columns:125px 1fr; gap:20px; padding:14px 0; border-bottom:1px solid #d4dce2; }
.x8-speed-facts dt { color:#7d8a93; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.x8-speed-facts dd { margin:0; color:#22323d; font-size:12px; font-weight:680; }

.x8-timing-window,
.x8-control-window,
.x8-device-manager-shot {
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid #bac6cf;
  background:#fff;
  box-shadow:0 28px 70px rgba(39,61,77,.15),0 4px 14px rgba(39,61,77,.07);
}

.x8-window-label {
  display:flex;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 21px;
  border-bottom:1px solid #d7dfe5;
  background:#f7f9fa;
}

.x8-window-label span { color:#2472bd; font-size:8px; font-weight:780; letter-spacing:.12em; }
.x8-window-label strong { color:#26343e; font-size:11px; font-weight:640; text-align:right; }
.x8-timing-window img { display:block; width:100%; height:auto; }

.x8-software { padding:120px 0 126px; background:var(--x8-soft); }

.x8-section-heading {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  align-items:end;
  gap:90px;
  margin-bottom:52px;
}

.x8-section-heading > p { margin:0; color:var(--x8-copy); font-size:14px; line-height:1.7; }
.x8-section-heading > p a { display:inline-block; margin-top:10px; color:#76c5f1; font-weight:750; }
.x8-section-heading > p a:hover { color:#fff; }

.x8-software-proof {
  display:grid;
  grid-template-columns:minmax(600px,1.25fr) minmax(370px,.75fr);
  align-items:stretch;
  gap:18px;
}

.x8-control-window { display:flex; flex-direction:column; }
.x8-control-window img { display:block; width:100%; height:auto; }
.x8-control-window figcaption,
.x8-device-manager-shot figcaption { margin-top:auto; padding:17px 21px; color:#687680; border-top:1px solid #d7dfe5; font-size:9px; line-height:1.5; }

.x8-device-manager-shot { display:flex; flex-direction:column; }
.x8-device-manager-shot img { display:block; width:100%; height:auto; }

.x8-resource-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:18px;
  border-top:1px solid #cbd5dc;
  border-left:1px solid #cbd5dc;
  background:#fff;
}

.x8-resource-strip > div { display:flex; min-height:155px; flex-direction:column; padding:23px; border-right:1px solid #cbd5dc; border-bottom:1px solid #cbd5dc; }
.x8-resource-strip small { color:#2472bd; font-size:9px; font-weight:760; }
.x8-resource-strip strong { margin-top:28px; color:#23333e; font-size:16px; font-weight:640; }
.x8-resource-strip span { margin-top:8px; color:#75838d; font-size:10px; line-height:1.5; }

.x8-specifications { padding:120px 0; background:#fff; }
.x8-spec-layout { display:grid; grid-template-columns:minmax(330px,.72fr) minmax(580px,1.28fr); align-items:start; gap:100px; }
.x8-spec-heading { position:sticky; top:150px; }
.x8-spec-heading > a { display:inline-block; margin-top:30px; color:#176fbd; font-size:11px; font-weight:680; }
.x8-spec-list { margin:0; border-top:1px solid #ccd6dd; }
.x8-spec-list > div { display:grid; grid-template-columns:190px 1fr; gap:28px; padding:19px 0; border-bottom:1px solid #d7dfe5; }
.x8-spec-list dt { color:#78858f; font-size:10px; }
.x8-spec-list dd { margin:0; color:#293944; font-size:12px; font-weight:620; line-height:1.5; }
.x8-spec-list dd strong { color:#176fbd; }

.x8-cta { padding:80px 0; color:#fff; background:#0b76d8; }
.x8-cta .x8-eyebrow { color:#cce9ff; }
.x8-cta-inner { display:grid; grid-template-columns:1.35fr .65fr; align-items:end; gap:80px; }
.x8-cta h2 { max-width:820px; margin:14px 0 0; font-size:clamp(43px,4.8vw,66px); font-weight:570; letter-spacing:-.055em; line-height:1; }
.x8-cta-inner > div:last-child { justify-self:end; }
.x8-cta-inner > div:last-child p { max-width:340px; margin:0 0 20px; color:#d9edff; font-size:12px; line-height:1.6; }
.x8-cta .x8-button-primary { color:#0b5f9d; border-color:#fff; background:#fff; }
.x8-cta .x8-button-primary:hover { background:#e7f4ff; }

@media (max-width:1120px) {
  .x8-hero-inner,
  .x8-hardware-layout,
  .x8-installation-heading,
  .x8-isolation-layout,
  .x8-performance-layout,
  .x8-software-proof,
  .x8-spec-layout { grid-template-columns:1fr; }
  .x8-hero-inner { padding-top:58px; gap:18px; }
  .x8-hero-copy { max-width:700px; }
  .x8-hero-product { max-width:900px; height:auto; }
  .x8-hardware-layout,.x8-isolation-layout,.x8-performance-layout { gap:58px; }
  .x8-installation-heading { gap:28px; }
  .x8-installation-intro > p { max-width:760px; }
  .x8-installation-outcomes { max-width:760px; }
  .x8-board-view { min-height:660px; }
  .x8-hardware-copy,.x8-performance-copy { max-width:760px; }
  .x8-isolation-visual { max-width:900px; }
  .x8-section-heading { grid-template-columns:1fr; gap:22px; }
  .x8-section-heading > p { max-width:650px; }
  .x8-control-window { max-width:900px; }
  .x8-device-manager-shot { max-width:720px; }
  .x8-spec-heading { position:static; }
  .x8-spec-list { max-width:850px; }
}

@media (max-width:760px) {
  .x8-wide { width:min(100% - 38px,1320px); }
  .x8-local-inner { min-height:48px; }
  .x8-local-links { max-width:68%; overflow-x:auto; gap:16px; }
  .x8-local-links a { white-space:nowrap; }
  .x8-local-links a:not(.x8-local-installation):not(.x8-local-cta) { display:none; }
  .x8-hero-inner { min-height:auto; padding:52px 0 36px; gap:28px; }
  .x8-hero h1 { font-size:49px; }
  .x8-hero-lead { font-size:15px; }
  .x8-hero-benefits { grid-template-columns:1fr 1fr; gap:10px 16px; }
  .x8-hero-benefits li { font-size:11px; line-height:1.4; }
  .x8-hero-product {
    display:grid;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    grid-template-columns:1fr 1fr;
    gap:0;
    overflow:visible;
  }
  .x8-hero-product::before { inset:5% 3% 34%; }
  .x8-hero-product img {
    position:relative;
    top:auto;
    left:auto;
    grid-column:1/-1;
    width:min(600px,100%);
    max-width:100%;
    margin:-10% auto -6%;
    transform:none;
  }
  .x8-callout-lines { display:none; }
  .x8-callout {
    position:static;
    width:auto;
    min-height:78px;
    transform:none;
    border-top:1px solid rgba(103,223,255,.3);
    border-left:0;
    background:rgba(5,18,30,.72);
    backdrop-filter:none;
  }
  .x8-key-facts { grid-template-columns:1fr 1fr; }
  .x8-key-facts > div { min-height:92px; padding:18px; }
  .x8-key-facts > div:first-child { padding-left:18px; }
  .x8-key-facts > div:nth-child(2) { border-right:0; }
  .x8-key-facts strong { font-size:21px; }
  .x8-hardware,.x8-installation,.x8-isolation,.x8-performance,.x8-software,.x8-specifications { padding:80px 0; }
  .x8-board-view { min-height:550px; }
  .x8-board-view img { max-height:500px; }
  .x8-hardware-copy h2,.x8-installation-heading h2,.x8-performance-copy h2,.x8-section-heading h2,.x8-spec-heading h2,.x8-capabilities h2 { font-size:42px; }
  .x8-installation-outcomes { grid-template-columns:1fr; }
  .x8-installation-outcomes > div { min-height:72px; }
  .x8-installation-stage { margin-top:38px; }
  .x8-installation-stage > figcaption { grid-template-columns:1fr; gap:16px; padding:24px; }
  .x8-installation-grid { grid-template-columns:1fr; }
  .x8-installation-media {
    display:grid;
    aspect-ratio:auto;
    grid-template-columns:1fr 1fr;
  }
  .x8-installation-media::after { display:none; }
  .x8-installation-media > img { grid-column:1/-1; height:auto; aspect-ratio:16/9; }
  .x8-installation-lines { display:none; }
  .x8-install-tag,
  .x8-installation-card .x8-install-tag {
    position:static;
    width:auto;
    min-height:70px;
    border-top:1px solid rgba(105,220,255,.23);
    border-left:0;
    background:#08131e;
    box-shadow:none;
    backdrop-filter:none;
  }
  .x8-installation-card figcaption { min-height:0; }
  .x8-isolation-visual { aspect-ratio:16/10; }
  .x8-isolation-visual img { object-fit:contain; }
  .x8-interface-list > div { grid-template-columns:105px 1fr; }
  .x8-timing-window,.x8-control-window { overflow-x:auto; }
  .x8-timing-window img { width:809px; max-width:none; }
  .x8-control-window img { width:824px; max-width:none; }
  .x8-resource-strip { grid-template-columns:1fr 1fr; }
  .x8-resource-strip > div { min-height:135px; }
  .x8-spec-list > div { grid-template-columns:1fr; gap:7px; }
  .x8-cta { padding:70px 0; }
  .x8-cta-inner { grid-template-columns:1fr; gap:34px; }
  .x8-cta-inner > div:last-child { justify-self:start; }
}

@media (max-width:600px) {
  .x8-local-nav { top:56px; }
}

@media (max-width:520px) {
  .x8-local-name { font-size:11px; }
  .x8-local-links { max-width:58%; }
  .x8-local-links a:not(.x8-local-cta) { display:none; }
  .x8-hero h1 { font-size:43px; }
  .x8-hero-benefits { grid-template-columns:1fr; }
  .x8-hero-actions { flex-direction:column; align-items:stretch; }
  .x8-button { width:100%; }
  .x8-hero-platforms { align-items:flex-start; flex-wrap:wrap; }
  .x8-hero-platforms > span { flex-basis:100%; padding:0; border:0; }
  .x8-hero-product { grid-template-columns:1fr; }
  .x8-callout { min-height:68px; }
  .x8-installation-media { grid-template-columns:1fr; }
  .x8-board-view { min-height:470px; }
  .x8-board-view figcaption { flex-direction:column; gap:5px; }
  .x8-isolation-visual { aspect-ratio:16/10; }
  .x8-capability-list h3 { font-size:17px; }
  .x8-speed-facts > div { grid-template-columns:110px 1fr; }
  .x8-resource-strip { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .x8-button { transition:none; }
}