:root {
  --ink: #02070c;
  --navy: #061522;
  --metal: #142633;
  --panel: #0b1b27;
  --line: rgba(126, 191, 229, .22);
  --blue: #42b9ff;
  --green: #69f7a0;
  --white: #ecf8ff;
  --muted: #9fb4c2;
  --max: 1180px;
  --clip: polygon(7% 0, 93% 0, 100% 13%, 100% 87%, 93% 100%, 7% 100%, 0 87%, 0 13%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--white);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(66, 185, 255, .035) 50%, transparent 50.2%),
    radial-gradient(circle at 50% 0, #0b2940 0, transparent 34rem),
    var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(66, 185, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 185, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
p { margin: 0; color: #cad9e2; }
h1, h2, h3 { margin: 0; line-height: 1.13; text-wrap: balance; }
h2 { font-size: clamp(1.45rem, 2.5vw, 2.35rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.32rem); }
section, .documentation { scroll-margin-top: 90px; }

.readline {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 2px;
  background: rgba(255, 255, 255, .08);
}
.readline span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  box-shadow: 0 0 12px var(--green);
}

.dock {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 0 max(20px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(2, 7, 12, .88);
  backdrop-filter: blur(18px);
}
.brand { flex: 0 0 auto; }
.brand img { width: 156px; height: auto; }
.toc {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}
.toc a {
  max-width: 116px;
  text-decoration: none;
}
.toc a:hover, .toc a:focus-visible { color: var(--green); }
.menu-toggle {
  display: none;
  margin-left: auto;
  padding: 8px 13px;
  color: var(--white);
  border: 1px solid var(--line);
  background: var(--panel);
}

main { overflow: hidden; }
.chamber {
  position: relative;
  display: grid;
  grid-template-columns: minmax(235px, .75fr) minmax(390px, 1.65fr) minmax(235px, .75fr);
  grid-template-rows: auto auto;
  gap: 24px;
  width: min(calc(100% - 40px), 1380px);
  min-height: 760px;
  margin: 36px auto 110px;
  padding: clamp(34px, 5vw, 74px);
  isolation: isolate;
}
.chamber::before,
.chamber::after,
.depth {
  position: absolute;
  content: "";
  pointer-events: none;
  clip-path: var(--clip);
}
.chamber::before {
  inset: 0;
  z-index: -4;
  border: 1px solid rgba(66, 185, 255, .45);
  background: linear-gradient(145deg, rgba(20, 38, 51, .95), rgba(2, 7, 12, .82) 45%, rgba(8, 34, 40, .82));
  box-shadow: inset 0 0 90px #000, 0 0 40px rgba(66, 185, 255, .12);
}
.chamber::after {
  inset: 18px;
  z-index: -3;
  border: 1px solid rgba(105, 247, 160, .18);
}
.depth-one {
  inset: 40px;
  z-index: -2;
  border: 1px solid rgba(66, 185, 255, .16);
}
.depth-two {
  inset: 64px;
  z-index: -1;
  border: 1px solid rgba(236, 248, 255, .08);
}
.title-plate {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  padding: 30px 26px 32px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  background: linear-gradient(90deg, rgba(10, 26, 38, .96), rgba(10, 26, 38, .65));
  box-shadow: 12px 12px 0 rgba(2, 7, 12, .68);
}
.plate-mark {
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
}
.title-plate h1 {
  max-width: 10ch;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.045em;
}
.aperture {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  padding: 12px;
  clip-path: var(--clip);
  background: linear-gradient(115deg, var(--blue), rgba(66, 185, 255, .12) 20%, rgba(105, 247, 160, .35) 80%, var(--green));
  filter: drop-shadow(0 0 28px rgba(66, 185, 255, .22));
}
.aperture::after {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(236, 248, 255, .15);
  content: "";
  clip-path: var(--clip);
  box-shadow: inset 0 0 65px rgba(2, 7, 12, .7);
}
.aperture img {
  width: 100%;
  min-height: 410px;
  object-fit: cover;
  clip-path: var(--clip);
}
.intro-panel {
  position: relative;
  align-self: end;
  padding: 24px 18px 24px 24px;
  border-left: 1px solid var(--blue);
  background: linear-gradient(90deg, rgba(7, 25, 37, .92), rgba(7, 25, 37, .42));
}
.intro-panel::before {
  position: absolute;
  top: 0;
  left: -3px;
  width: 5px;
  height: 42px;
  background: var(--blue);
  box-shadow: 0 0 16px var(--blue);
  content: "";
}
.intro-panel p { font-size: .91rem; }
.intro-a { grid-column: 3; grid-row: 1; align-self: end; }
.intro-b { grid-column: 3; grid-row: 2; align-self: start; }

.server-deck,
.route,
.access-stack,
.touch-surface,
.sequence,
.hard-case,
.diagnostic,
.faq-strips {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto 120px;
}
.section-cap {
  position: relative;
  display: flex;
  align-items: end;
  gap: 18px;
  margin-bottom: 34px;
  padding: 0 0 18px 22px;
  border-bottom: 1px solid var(--line);
}
.section-cap::before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: min(160px, 24%);
  height: 2px;
  background: var(--green);
  box-shadow: 0 0 12px rgba(105, 247, 160, .55);
  content: "";
}
.server-deck {
  padding: 38px;
  border: 1px solid var(--line);
  background: #07111a;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .62);
}
.server-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1px;
  background: var(--line);
}
.server-row p {
  padding: clamp(25px, 4vw, 48px);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(66, 185, 255, .025) 12px),
    #0a1721;
}
.server-row p:last-child { border-right: 3px solid var(--blue); }

.route {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(420px, 1.28fr);
  gap: 38px 70px;
}
.route .section-cap { grid-column: 1 / -1; }
.route-copy {
  position: relative;
  display: grid;
  gap: 38px;
  padding-left: 36px;
}
.route-copy::before {
  position: absolute;
  inset: 0 auto 0 8px;
  width: 2px;
  background: linear-gradient(var(--blue), var(--green));
  box-shadow: 0 0 12px rgba(66, 185, 255, .5);
  content: "";
}
.route-copy p {
  position: relative;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.route-copy p::before {
  position: absolute;
  top: 34px;
  left: -34px;
  width: 32px;
  height: 1px;
  background: var(--blue);
  content: "";
}
.evidence-bay {
  align-self: start;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(236, 248, 255, .15);
  background: #0a1118;
  box-shadow: 18px 18px 0 #050b10, inset 0 0 25px #000;
}
.evidence-bay img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.8) contrast(1.05);
}
.evidence-bay figcaption {
  padding: 14px 8px 2px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .04em;
}

.access-stack {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 22px;
}
.access-stack .section-cap { grid-column: 1 / -1; }
.access-stack article {
  min-height: 270px;
  padding: clamp(28px, 4vw, 50px);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #0c1c28, #071019);
  clip-path: polygon(0 0, 94% 0, 100% 22px, 100% 100%, 0 100%);
}
.access-stack article:last-child {
  margin-top: 72px;
  border-color: rgba(105, 247, 160, .25);
  transform: translateX(-36px);
}

.touch-surface {
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid rgba(66, 185, 255, .18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 90% 14%, rgba(105, 247, 160, .09), transparent 22%),
    linear-gradient(145deg, #0d1d28, #03090e);
  box-shadow: inset 0 0 70px #000, 0 25px 80px rgba(0, 0, 0, .32);
}
.touch-copy {
  columns: 2 330px;
  column-gap: 64px;
  margin-bottom: 58px;
}
.touch-copy p { break-inside: avoid; }
.touch-copy p + p { margin-top: 24px; }
.runway {
  position: relative;
  width: calc(100% + 13vw);
  margin-left: -6.5vw;
  padding: 12px 9vw;
  border-block: 1px solid rgba(66, 185, 255, .38);
  background:
    linear-gradient(90deg, transparent, rgba(66, 185, 255, .22) 15%, transparent 15.5%, transparent 84.5%, rgba(105, 247, 160, .2) 85%, transparent),
    #040c12;
}
.runway::before,
.runway::after,
.runway i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--blue);
  box-shadow: 0 0 14px var(--blue);
  content: "";
}
.runway::before { left: 15%; }
.runway::after { right: 15%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.runway i:first-child { left: 38%; opacity: .3; }
.runway i:last-child { right: 38%; opacity: .3; }
.runway img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 470px;
  object-fit: cover;
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}

.sequence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.sequence .section-cap { grid-column: 1 / -1; }
.sequence-lane {
  position: relative;
  padding: 32px 30px 32px 46px;
  border-left: 1px solid var(--blue);
  background: linear-gradient(90deg, rgba(66, 185, 255, .06), transparent);
}
.sequence-lane::after {
  position: absolute;
  top: 0;
  left: -3px;
  width: 5px;
  height: 54px;
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
  content: "";
}
.sequence-lane:last-child {
  margin-top: 76px;
  border-color: var(--green);
}

.documentation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(calc(100% - 40px), 1360px);
  margin: 0 auto 120px;
  border-block: 1px solid var(--line);
}
.doc-column {
  padding: clamp(28px, 4vw, 54px);
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 30, 42, .75), rgba(3, 9, 14, .7));
}
.doc-column:last-child { border-right: 0; }
.doc-column h2 {
  min-height: 4.5em;
  margin-bottom: 35px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(105, 247, 160, .26);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
}
.doc-column p + p { margin-top: 28px; }

.hard-case {
  padding: 20px;
  border: 1px solid rgba(236, 248, 255, .14);
  border-radius: 22px;
  background: linear-gradient(135deg, #1a2b36, #050a0e 36%, #101d25);
  box-shadow: inset 0 0 0 8px #060d12, 0 38px 80px rgba(0, 0, 0, .35);
}
.hard-case .section-cap { margin: 18px 22px 34px; }
.case-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid rgba(66, 185, 255, .14);
  border-radius: 13px;
  background: #050d13;
}
.case-copy { display: grid; align-content: center; gap: 28px; }
.kit-plinth {
  position: relative;
  align-self: center;
  padding: 18px 18px 34px;
  border: 1px solid rgba(105, 247, 160, .2);
  border-radius: 10px;
  background: #090f14;
  box-shadow: inset 0 -18px 30px #000;
}
.kit-plinth::after {
  position: absolute;
  inset: auto 12% 10px;
  height: 3px;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
  content: "";
}
.kit-plinth img { border-radius: 6px; }

.diagnostic {
  border: 1px solid rgba(66, 185, 255, .3);
  background: #07121a;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
}
.diagnostic > h2 { margin: 0; }
.diagnostic-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(24px, 4vw, 40px);
  color: var(--white);
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #0e2736, #07121a);
  cursor: pointer;
}
.diagnostic-toggle .toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 20px;
}
.diagnostic-toggle .toggle-icon::before,
.diagnostic-toggle .toggle-icon::after {
  position: absolute;
  top: 10px;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--green);
  content: "";
  transition: transform .2s ease;
}
.diagnostic-toggle .toggle-icon::after { transform: rotate(0); }
.diagnostic-toggle[aria-expanded="false"] .toggle-icon::after { transform: rotate(90deg); }
.diagnostic-content { padding: clamp(28px, 5vw, 58px); }
.diagnostic-content[hidden] { display: none; }
.diagnostic-content ul {
  display: grid;
  gap: 12px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
  counter-reset: checks;
}
.diagnostic-content li {
  position: relative;
  padding: 17px 20px 17px 50px;
  border-left: 2px solid var(--green);
  background: rgba(105, 247, 160, .045);
  color: #d8e7ee;
  counter-increment: checks;
}
.diagnostic-content li::before {
  position: absolute;
  left: 20px;
  color: var(--green);
  content: "✓";
}

.faq-strips h2 {
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.question-strip {
  position: relative;
  padding: 24px 30px 24px 48px;
  border-bottom: 1px solid rgba(66, 185, 255, .16);
  background: linear-gradient(90deg, rgba(13, 36, 50, .8), rgba(4, 12, 18, .2));
}
.question-strip::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--blue);
  box-shadow: 0 0 14px rgba(66, 185, 255, .6);
  content: "";
}
.question-strip:nth-child(even)::before { background: var(--green); }
.question-strip + .question-strip { margin-top: 8px; }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  padding: 24px max(20px, calc((100vw - var(--max)) / 2));
  border-top: 1px solid var(--line);
  background: #010509;
}
.footer img { width: 156px; height: auto; }
.footer span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: .85rem;
}

.cookie {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 390px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--line);
  background: rgba(4, 15, 23, .96);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.cookie[hidden] { display: none; }
.cookie p { font-size: .78rem; }
.cookie button {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: #00160a;
  border: 0;
  background: var(--green);
  font-weight: 700;
  cursor: pointer;
}

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

@media (max-width: 1040px) {
  .menu-toggle { display: block; }
  .toc {
    position: absolute;
    top: calc(100% + 1px);
    right: 20px;
    display: none;
    width: min(390px, calc(100vw - 40px));
    padding: 16px;
    border: 1px solid var(--line);
    background: #07121a;
    box-shadow: 0 16px 40px #000;
  }
  .toc.open { display: grid; }
  .toc a { max-width: none; padding: 10px; border-bottom: 1px solid rgba(126, 191, 229, .12); }
  .chamber {
    grid-template-columns: minmax(210px, .7fr) minmax(400px, 1.3fr);
    min-height: auto;
  }
  .title-plate { grid-column: 1; grid-row: 1; }
  .aperture { grid-column: 2; grid-row: 1 / 3; }
  .intro-a { grid-column: 1; grid-row: 2; }
  .intro-b { grid-column: 1 / -1; grid-row: 3; }
  .route { grid-template-columns: 1fr; }
  .route .section-cap { grid-column: 1; }
  .access-stack article:last-child { transform: none; }
  .documentation { grid-template-columns: 1fr; }
  .doc-column { border-right: 0; border-bottom: 1px solid var(--line); }
  .doc-column h2 { min-height: auto; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .chamber {
    grid-template-columns: 1fr;
    width: min(calc(100% - 24px), 1380px);
    margin-top: 18px;
    padding: 32px 24px;
  }
  .title-plate { grid-row: auto; }
  .title-plate h1 { max-width: 14ch; }
  .aperture { grid-column: 1; grid-row: auto; }
  .aperture img { min-height: 260px; }
  .intro-a, .intro-b { grid-column: 1; grid-row: auto; }
  .server-deck,
  .route,
  .access-stack,
  .touch-surface,
  .sequence,
  .hard-case,
  .diagnostic,
  .faq-strips { width: min(calc(100% - 24px), var(--max)); margin-bottom: 82px; }
  .server-deck { padding: 18px; }
  .server-row, .access-stack, .sequence, .case-shell { grid-template-columns: 1fr; }
  .access-stack article:last-child, .sequence-lane:last-child { margin-top: 0; }
  .touch-surface { padding: 26px 20px; border-radius: 18px; }
  .touch-copy { columns: auto; }
  .runway { width: calc(100% + 40px); margin-left: -20px; padding-inline: 20px; }
  .documentation { width: calc(100% - 24px); margin-bottom: 82px; }
  .case-shell { padding: 18px; }
  .question-strip { padding: 21px 20px 21px 30px; }
  .cookie { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

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

/* Legal pages and shared legal navigation */
.toc { gap: 10px; }
.toc a { max-width: 100px; font-size: .68rem; }
.toc a[aria-current="page"],
.legal-links a[aria-current="page"] { color: var(--green); }
.legal-main {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
  padding: clamp(54px, 8vw, 100px) 0 110px;
  overflow: visible;
}
.legal-hero {
  position: relative;
  max-width: 900px;
  margin-bottom: clamp(44px, 7vw, 78px);
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: linear-gradient(135deg, rgba(20, 38, 51, .95), rgba(2, 7, 12, .72));
  box-shadow: 18px 18px 0 rgba(0, 0, 0, .35);
}
.legal-kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--green);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.legal-hero h1 {
  margin-bottom: 22px;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  letter-spacing: -.055em;
}
.legal-hero p { max-width: 720px; font-size: clamp(1rem, 1.7vw, 1.2rem); }
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.legal-card {
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #0c1c28, #050c12);
}
.legal-card:nth-child(3n + 2) { border-top: 3px solid var(--blue); }
.legal-card:nth-child(3n) { border-top: 3px solid var(--green); }
.legal-card h2 {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(105, 247, 160, .2);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}
.legal-card p + p { margin-top: 20px; }
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  color: var(--muted);
  font-size: .8rem;
}
.legal-links a { text-decoration: none; }
.legal-links a:hover,
.legal-links a:focus-visible { color: var(--green); }

@media (max-width: 760px) {
  .legal-main {
    width: min(calc(100% - 24px), var(--max));
    padding: 36px 0 78px;
  }
  .legal-hero { padding: 28px 22px; }
  .legal-grid { grid-template-columns: 1fr; }
  .footer { flex-wrap: wrap; gap: 20px; }
  .legal-links { order: 3; flex-basis: 100%; justify-content: flex-start; }
}