:root {
  color-scheme: dark;
  --black: #020304;
  --black-soft: #07090c;
  --ink: #f3f4ef;
  --muted: #8e979b;
  --line: rgba(243, 244, 239, 0.18);
  --line-soft: rgba(243, 244, 239, 0.08);
  --acid: #c8ff00;
  --cyan: #34eaff;
  --violet: #a261ff;
  --danger: #ff397e;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --display-cjk: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Segoe UI", sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 3vw, 52px);
  --header-h: 86px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--black);
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 18%, rgba(52, 234, 255, 0.055), transparent 34rem),
    var(--black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

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

button,
a,
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 16px;
  color: #000;
  background: var(--acid);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.render-stack,
#glField,
#particleField,
.scan-beam,
.noise,
.vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.render-stack {
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(200, 255, 0, 0.025), transparent 32%),
    radial-gradient(circle at 69% 28%, rgba(52, 234, 255, 0.08), transparent 27rem),
    var(--black);
}

#glField {
  opacity: 0;
  transition: opacity 900ms ease;
}

.webgl-ready #glField {
  opacity: 0.95;
}

#particleField {
  opacity: 0.72;
}

.scan-beam {
  z-index: 3;
  height: 18vh;
  background: linear-gradient(to bottom, transparent, rgba(200, 255, 0, 0.025), rgba(200, 255, 0, 0.13), transparent);
  mix-blend-mode: screen;
  transform: translateY(-25vh);
  animation: scan-page 9s linear infinite;
}

.noise {
  z-index: 4;
  opacity: 0.19;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.vignette {
  z-index: 5;
  box-shadow: inset 0 0 180px 54px rgba(0, 0, 0, 0.9);
}

.boot-sequence {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  pointer-events: none;
  color: var(--acid);
  background: #000;
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.7, 0, 0.3, 1), visibility 500ms;
}

.ready .boot-sequence {
  visibility: hidden;
  opacity: 0;
}

.boot-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--acid);
  font-family: var(--display);
  font-size: 34px;
}

.boot-copy {
  display: grid;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
}

.boot-copy span {
  opacity: 0;
  animation: boot-line 250ms steps(2, end) forwards;
}

.boot-copy span:nth-child(2) { animation-delay: 180ms; }
.boot-copy span:nth-child(3) { animation-delay: 360ms; }

.cursor-orbit {
  position: fixed;
  z-index: 100;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid rgba(200, 255, 0, 0.5);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  transition: width 160ms ease, height 160ms ease, margin 160ms ease, opacity 200ms ease;
}

.cursor-orbit.visible {
  opacity: 1;
}

.cursor-orbit.active {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
}

.cursor-orbit span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: grid;
  width: 100%;
  height: var(--header-h);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(to bottom, rgba(2, 3, 4, 0.93), rgba(2, 3, 4, 0.18));
  backdrop-filter: blur(7px);
}

.wordmark {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: 0.12em;
}

.wordmark i {
  width: 28px;
  height: 9px;
  background:
    linear-gradient(90deg, var(--acid) 0 19%, transparent 19% 33%, var(--acid) 33% 47%, transparent 47% 76%, rgba(200, 255, 0, 0.4) 76%);
  clip-path: polygon(0 0, 100% 0, 100% 25%, 60% 25%, 60% 75%, 15% 75%, 15% 100%, 0 100%);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 50px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.primary-nav a {
  position: relative;
  min-height: 44px;
  padding: 15px 2px;
  color: #c7cbca;
}

.primary-nav a::after {
  position: absolute;
  right: -19px;
  color: var(--acid);
  content: "/";
}

.primary-nav a:last-child::after {
  display: none;
}

.primary-nav a:hover {
  color: #fff;
  text-shadow: 3px 0 var(--cyan), -3px 0 var(--violet);
}

.header-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
}

.online-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--acid);
}

.online-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}

.quality-toggle {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(2, 3, 4, 0.62);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.quality-toggle:hover {
  color: #000;
  border-color: var(--acid);
  background: var(--acid);
}

main,
.site-footer {
  position: relative;
  z-index: 10;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr) minmax(190px, 0.34fr);
  align-items: center;
  gap: clamp(16px, 2vw, 42px);
  padding: calc(var(--header-h) + 44px) var(--gutter) 162px;
  border-bottom: 1px solid var(--line);
}

.hero::before,
.systems::before {
  position: absolute;
  inset: var(--header-h) var(--gutter) auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--line), transparent 70%);
}

.hero-index {
  position: absolute;
  top: 18%;
  bottom: 176px;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

.hero-index span:nth-child(2) { color: var(--acid); }

.hero-copy {
  position: relative;
  z-index: 5;
  padding-left: clamp(36px, 5vw, 88px);
}

.glitch-title {
  position: relative;
  width: min-content;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(72px, min(7.2vw, 14.4vh), 142px);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.038em;
  text-transform: uppercase;
  filter: drop-shadow(0 12px 38px rgba(0, 0, 0, 0.66));
}

.glitch-title span {
  display: block;
  white-space: nowrap;
}

.glitch-title::before,
.glitch-title::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  width: 100%;
  color: transparent;
  content: attr(data-text);
  opacity: 0;
  pointer-events: none;
}

.glitching .glitch-title::before {
  color: var(--cyan);
  opacity: 0.7;
  clip-path: inset(19% 0 66% 0);
  transform: translateX(-11px);
}

.glitching .glitch-title::after {
  color: var(--violet);
  opacity: 0.7;
  clip-path: inset(67% 0 10% 0);
  transform: translateX(12px);
}

.hero-lead {
  margin: 30px 0 0;
  color: #d1d5d3;
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.signal-entry,
.recalibrate {
  position: relative;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  padding: 0 22px;
  border: 1px solid rgba(200, 255, 0, 0.76);
  color: var(--acid);
  background: rgba(2, 3, 4, 0.68);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  cursor: pointer;
  isolation: isolate;
}

.signal-entry {
  width: min(100%, 370px);
}

.signal-entry::before,
.recalibrate::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.8, 0, 0.2, 1);
}

.signal-entry:hover,
.recalibrate:hover {
  color: #000;
}

.signal-entry:hover::before,
.recalibrate:hover::before {
  transform: scaleX(1);
}

.signal-entry svg {
  width: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-width: 1.5;
  transition: transform 200ms ease;
}

.signal-entry:hover svg {
  transform: translateX(5px);
}

.z-sculpture {
  position: relative;
  z-index: 2;
  min-height: min(68vh, 720px);
}

.z-ghost {
  position: absolute;
  inset: 50% auto auto 50%;
  color: transparent;
  font-family: var(--display);
  font-size: min(58vw, 780px);
  line-height: 0.7;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.11);
  text-shadow: 16px 0 rgba(52, 234, 255, 0.026), -16px 0 rgba(162, 97, 255, 0.03);
  transform: translate(-50%, -50%) rotate(-4deg) scaleX(0.82);
}

.coordinate {
  position: absolute;
  padding: 9px 11px;
  border: 1px solid rgba(200, 255, 0, 0.26);
  color: var(--acid);
  background: rgba(2, 3, 4, 0.74);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.coordinate-a { top: 15%; right: 8%; }
.coordinate-b { right: 27%; bottom: 7%; border-width: 0 0 1px; color: var(--muted); }

.telemetry {
  position: relative;
  z-index: 4;
  align-self: center;
  padding-left: 20px;
  border-left: 1px solid var(--line-soft);
  font-family: var(--mono);
}

.scope-line {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.scope-line svg {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 10px;
  overflow: visible;
}

.scope-line polyline {
  fill: none;
  stroke: var(--acid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.telemetry dl {
  margin: 0;
}

.telemetry dl > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.telemetry dt {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.telemetry dd {
  margin: 0;
  color: #ced1ce;
  font-size: 9px;
}

.telemetry dd b {
  color: var(--cyan);
  font-size: 17px;
  font-weight: 500;
}

.telemetry dl > div:nth-child(3) b { color: var(--violet); }
.telemetry dl > div:nth-child(4) b { color: var(--acid); font-size: 11px; }
.telemetry dl > div:nth-child(5) b { color: #fff; font-size: 11px; }

.terminal-dock {
  position: absolute;
  right: var(--gutter);
  bottom: 34px;
  left: var(--gutter);
  z-index: 8;
  display: grid;
  min-height: 112px;
  grid-template-columns: minmax(250px, 1.15fr) minmax(250px, 0.85fr) minmax(160px, 0.42fr);
  padding-top: 26px;
  border: 1px solid var(--line);
  background: rgba(2, 3, 4, 0.74);
  font-family: var(--mono);
  backdrop-filter: blur(5px);
}

.terminal-title {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 26px;
  align-items: center;
  width: 100%;
  padding-left: 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--acid);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.terminal-lines,
.terminal-code,
.mini-scope {
  min-width: 0;
  margin: 0;
  padding: 14px 18px;
  border-right: 1px solid var(--line-soft);
}

.terminal-lines {
  display: grid;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.terminal-lines span {
  display: block;
  animation: terminal-in 260ms steps(4, end);
}

.terminal-lines time { color: #5f686d; margin-right: 12px; }
.terminal-lines b { color: var(--acid); margin-right: 9px; font-weight: 500; }

.terminal-code {
  color: #bac1be;
  font-size: 9px;
  line-height: 1.65;
}

.terminal-code em { color: var(--violet); font-style: normal; }
.terminal-code strong { color: var(--cyan); font-weight: 500; }
.terminal-code i { color: var(--acid); font-style: normal; }

.mini-scope {
  display: grid;
  align-items: center;
  border-right: 0;
}

.mini-scope canvas {
  display: block;
  width: 100%;
  height: 56px;
}

.scroll-cue {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 9;
  display: grid;
  width: 44px;
  height: 20px;
  place-items: center;
  transform: translateX(-50%);
}

.scroll-cue span {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--acid);
  border-bottom: 2px solid var(--acid);
  transform: rotate(45deg);
  animation: cue 1.8s ease-in-out infinite;
}

.systems {
  position: relative;
  min-height: 1120px;
  padding: calc(var(--header-h) + 70px) var(--gutter) 74px;
  background: linear-gradient(to bottom, rgba(2, 3, 4, 0.15), rgba(2, 3, 4, 0.92) 22%, #020304 78%);
}

.section-ruler {
  position: absolute;
  top: calc(var(--header-h) + 14px);
  right: var(--gutter);
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: #596064;
  font-family: var(--mono);
  font-size: 9px;
}

.section-ruler::before {
  position: absolute;
  top: -4px;
  left: 55%;
  width: 7px;
  height: 7px;
  background: var(--acid);
  content: "";
  box-shadow: 0 0 14px var(--acid);
}

.systems-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.45fr);
  align-items: end;
  gap: 50px;
}

.systems-head h2 {
  max-width: 980px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(72px, 9vw, 164px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

.systems-head p {
  margin: 0 0 10px;
  color: #d4d7d5;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
}

.wave-field {
  position: relative;
  height: 170px;
  margin: 38px calc(var(--gutter) * -1) 24px;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(to right, rgba(200, 255, 0, 0.02), rgba(52, 234, 255, 0.025), transparent);
}

.wave-field canvas {
  width: 100%;
  height: 100%;
}

.scan-marker {
  position: absolute;
  top: -1px;
  left: 55%;
  height: 100%;
  padding: 8px 9px;
  border-left: 1px solid var(--acid);
  color: var(--acid);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.systems-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  grid-template-areas:
    "rails code"
    "rails node";
  gap: 12px 24px;
}

.technology-rails {
  grid-area: rails;
  align-self: stretch;
}

.tech-rail {
  position: relative;
  display: grid;
  min-height: 118px;
  grid-template-columns: 48px minmax(185px, 0.65fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line);
  color: var(--acid);
}

.tech-rail:last-child {
  border-bottom: 1px solid var(--line);
}

.tech-rail[data-accent="cyan"] { color: var(--cyan); }
.tech-rail[data-accent="violet"] { color: var(--violet); }

.rail-index {
  font-family: var(--display);
  font-size: 34px;
}

.tech-rail h3 {
  margin: 0;
  color: #eef0ed;
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 38px);
  font-weight: 500;
  letter-spacing: 0.015em;
}

.tech-rail h3 i {
  color: currentColor;
  font-family: var(--mono);
  font-style: normal;
}

.rail-viz {
  position: relative;
  display: flex;
  height: 54px;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  border-bottom: 1px solid currentColor;
  opacity: 0.8;
}

.rail-viz::before {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0.35;
}

.rail-viz span {
  position: relative;
  width: 20%;
  height: calc(8px + var(--level, 20) * 1px);
  border: 1px solid currentColor;
  transform: skewX(-24deg);
  animation: rail-pulse 1.7s ease-in-out infinite alternate;
}

.rail-viz span:nth-child(1) { --level: 6; animation-delay: -0.7s; }
.rail-viz span:nth-child(2) { --level: 22; animation-delay: -1.1s; }
.rail-viz span:nth-child(3) { --level: 13; animation-delay: -0.2s; }
.rail-viz span:nth-child(4) { --level: 31; animation-delay: -0.9s; }
.rail-viz span:nth-child(5) { --level: 9; animation-delay: -1.4s; }

.tech-rail dl {
  display: grid;
  min-width: 82px;
  gap: 5px;
  margin: 0;
  font-family: var(--mono);
  font-size: 7px;
}

.tech-rail dl div {
  display: flex;
  justify-content: space-between;
  gap: 9px;
}

.tech-rail dt { color: var(--muted); }
.tech-rail dd { margin: 0; color: currentColor; }

.code-window,
.node-map {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(2, 3, 4, 0.78);
}

.code-window {
  grid-area: code;
  min-height: 256px;
  box-shadow: -1px 0 0 var(--acid);
}

.code-bar {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: #dfe2df;
  font-family: var(--mono);
  font-size: 8px;
}

.code-bar span:last-child { color: var(--acid); }

.code-lines {
  margin: 0;
  padding: 14px 0 14px 52px;
  color: #596064;
  font-family: var(--mono);
  font-size: clamp(7px, 0.63vw, 10px);
  line-height: 1.55;
}

.code-lines li {
  padding: 1px 14px;
  color: #60686b;
}

.code-lines code { color: #bcc4c1; }
.code-lines em { color: var(--cyan); font-style: normal; }
.code-lines b { color: var(--acid); font-weight: 400; }
.code-lines .active { background: rgba(200, 255, 0, 0.09); box-shadow: inset 2px 0 var(--acid); }

.node-map {
  grid-area: node;
  min-height: 140px;
}

.node-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.node-labels,
.output-labels {
  position: absolute;
  top: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: var(--acid);
  font-family: var(--mono);
  font-size: 7px;
  pointer-events: none;
}

.node-labels { left: 10px; }
.output-labels { right: 10px; color: var(--cyan); text-align: right; }

.recalibration-strip {
  display: grid;
  min-height: 112px;
  grid-template-columns: 230px minmax(200px, 1fr) minmax(220px, 0.42fr);
  align-items: stretch;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.recalibrate {
  width: 100%;
  height: 100%;
  min-height: 110px;
  margin: 0;
  border-width: 0 1px 0 0;
}

.recalibrate i {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.recalibrate i::before,
.recalibrate i::after {
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.recalibrate i::after {
  inset: 15px;
  background: currentColor;
}

.recalibration-strip > canvas {
  width: 100%;
  height: 100%;
}

.system-log {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px 18px;
  border-left: 1px solid var(--line-soft);
  color: #a7aeaa;
  font-family: var(--mono);
  font-size: 8px;
}

.site-footer {
  display: grid;
  min-height: 114px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
  background: #020304;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.footer-line {
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(200, 255, 0, 0.5), var(--line));
}

.site-footer a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}

.site-footer a:hover { color: var(--acid); }
.site-footer a b { font-size: 20px; font-weight: 400; }

.noscript-message {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  max-width: 360px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--acid);
  color: #000;
  background: var(--acid);
  font-family: var(--mono);
  font-size: 11px;
}

.no-js .boot-sequence {
  display: none;
}

.static-fx #glField,
.static-fx #particleField,
.static-fx .scan-beam {
  display: none;
}

.webgl-failed #glField {
  display: none;
}

.capture-signal .hero {
  display: none;
}

.static-fx .render-stack,
.webgl-failed .render-stack {
  background:
    repeating-radial-gradient(ellipse at 68% 24%, transparent 0 22px, rgba(200, 255, 0, 0.06) 23px, transparent 24px 42px),
    linear-gradient(120deg, rgba(52, 234, 255, 0.04), transparent 42%),
    var(--black);
}

@keyframes boot-line {
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes scan-page {
  0% { transform: translateY(-25vh); }
  100% { transform: translateY(110vh); }
}

@keyframes terminal-in {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cue {
  0%, 100% { opacity: 0.35; transform: translateY(-3px) rotate(45deg); }
  50% { opacity: 1; transform: translateY(3px) rotate(45deg); }
}

@keyframes rail-pulse {
  to { height: 9px; opacity: 0.22; }
}

@media (max-width: 1120px) {
  .hero {
    grid-template-columns: minmax(0, 0.88fr) minmax(330px, 1.12fr);
  }

  .telemetry {
    position: absolute;
    top: 115px;
    right: var(--gutter);
    width: 170px;
  }

  .telemetry .scope-line,
  .telemetry dl > div:nth-child(n + 3) {
    display: none;
  }

  .systems-grid {
    grid-template-columns: 1fr 0.8fr;
  }

  .tech-rail {
    grid-template-columns: 38px minmax(160px, 0.8fr) minmax(100px, 1fr);
  }

  .tech-rail dl { display: none; }
}

@media (max-width: 820px) {
  :root { --header-h: 70px; --gutter: 20px; }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .primary-nav,
  .online-state {
    display: none;
  }

  .wordmark { font-size: 27px; }

  .hero {
    min-height: 940px;
    grid-template-columns: 1fr;
    align-content: start;
    padding-top: 126px;
    padding-bottom: 160px;
  }

  .hero-copy {
    padding-left: 24px;
  }

  .hero-index {
    top: 130px;
    bottom: auto;
    height: 340px;
  }

  .glitch-title {
    font-size: clamp(68px, 20vw, 120px);
  }

  .z-sculpture {
    position: absolute;
    top: 320px;
    right: -16vw;
    z-index: -1;
    width: 90vw;
    min-height: 500px;
    opacity: 0.54;
  }

  .z-ghost { font-size: 92vw; }
  .coordinate { display: none; }
  .telemetry { display: none; }

  .terminal-dock {
    grid-template-columns: 1fr;
    min-height: 116px;
  }

  .terminal-code,
  .mini-scope {
    display: none;
  }

  .terminal-lines {
    border-right: 0;
  }

  .systems {
    min-height: 1540px;
    padding-top: 124px;
  }

  .systems-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .systems-head h2 {
    font-size: clamp(66px, 18vw, 112px);
  }

  .wave-field {
    height: 130px;
  }

  .systems-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "rails" "code" "node";
  }

  .technology-rails {
    margin-bottom: 12px;
  }

  .tech-rail {
    min-height: 110px;
    grid-template-columns: 36px 1fr 0.8fr;
    gap: 12px;
  }

  .code-window { min-height: 280px; }
  .node-map { min-height: 210px; }

  .recalibration-strip {
    grid-template-columns: 1fr;
  }

  .recalibrate {
    min-height: 88px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .recalibration-strip > canvas { height: 100px; }
  .system-log { display: none; }

  .site-footer {
    grid-template-columns: auto 1fr;
  }

  .site-footer a { display: none; }
}

@media (max-width: 520px) {
  .boot-sequence {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
  }

  .hero {
    min-height: 850px;
    padding-top: 118px;
  }

  .glitch-title {
    font-size: clamp(50px, 15.5vw, 72px);
    line-height: 0.82;
  }

  .hero-lead {
    margin-top: 30px;
    font-size: 11px;
  }

  .signal-entry {
    width: calc(100vw - 64px);
    min-height: 58px;
    font-size: 11px;
  }

  .terminal-lines {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 7px;
  }

  .terminal-lines time { margin-right: 5px; }
  .terminal-lines b { margin-right: 4px; }

  .systems {
    min-height: 1500px;
  }

  .systems-head h2 {
    font-size: clamp(58px, 18vw, 86px);
  }

  .systems-head p {
    font-size: 10px;
  }

  .tech-rail {
    min-height: 102px;
    grid-template-columns: 32px 1fr;
  }

  .tech-rail h3 { font-size: 24px; }
  .rail-viz { display: none; }
  .code-lines { padding-left: 40px; font-size: 7px; }
  .site-footer { font-size: 9px; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-orbit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .scan-beam,
  #particleField,
  .cursor-orbit {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #c4cac7;
    --line: rgba(255, 255, 255, 0.52);
    --line-soft: rgba(255, 255, 255, 0.3);
  }
}

@media (forced-colors: active) {
  .render-stack,
  .boot-sequence,
  .cursor-orbit,
  .z-sculpture,
  .wave-field,
  .rail-viz,
  .node-map,
  .recalibration-strip > canvas {
    display: none;
  }
  .site-header { background: Canvas; }
  .signal-entry,
  .recalibrate,
  .quality-toggle { border: 1px solid ButtonText; }
}

/* ZAVU business system — businessfx-20260904.3 */

.mail-shortcut {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  color: #d7dbd8;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mail-shortcut::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--acid);
  transform: scaleX(0.18);
  transform-origin: right;
  transition: transform 220ms ease;
}

.mail-shortcut:hover { color: var(--acid); }
.mail-shortcut:hover::after { transform: scaleX(1); }

.language-toggle {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(2, 3, 4, 0.62);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  cursor: pointer;
  overflow: hidden;
}

.language-toggle::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--acid);
  transform: translateY(102%);
  transition: transform 190ms ease;
}

.language-toggle i {
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
}

.language-toggle span:last-child { opacity: 0.38; }
.language-toggle:hover { color: #020304; border-color: var(--acid); }
.language-toggle:hover::before { transform: translateY(0); }

.language-burst {
  --burst-x: 88vw;
  --burst-y: 46px;
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  pointer-events: none;
}

.language-burst .burst-ring,
.language-burst .burst-shard {
  position: absolute;
  top: var(--burst-y);
  left: var(--burst-x);
}

.language-burst .burst-ring {
  width: 18px;
  height: 18px;
  margin: -9px;
  border: 1px solid var(--acid);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(200, 255, 0, 0.86);
  animation: language-ring 680ms cubic-bezier(0.12, 0.76, 0.2, 1) both;
}

.language-burst .burst-ring:nth-child(2) { border-color: var(--cyan); animation-delay: 34ms; }
.language-burst .burst-ring:nth-child(3) { border-color: var(--violet); animation-delay: 72ms; }

.language-burst .burst-shard {
  width: 2px;
  height: var(--shard-size, 34px);
  margin: calc(var(--shard-size, 34px) / -2) -1px;
  background: var(--shard-color, var(--acid));
  box-shadow: 0 0 12px var(--shard-color, var(--acid));
  transform-origin: 50% 50%;
  animation: language-shard 620ms cubic-bezier(0.16, 0.84, 0.25, 1) both;
}

.language-switching .site-header > *,
.language-switching main h1,
.language-switching main h2,
.language-switching main h3,
.language-switching main p,
.language-switching main a,
.language-switching main button,
.language-switching main label,
.language-switching main .form-channel,
.language-switching main .form-meta,
.language-switching main dt,
.language-switching main dd,
.language-switching main .section-ruler,
.language-switching main .mail-status,
.language-switching main .delivery-strip,
.language-switching main .work-output,
.language-switching .site-footer > * {
  animation: language-copy-out 210ms steps(3, end) both;
}

.language-entering .site-header > *,
.language-entering main h1,
.language-entering main h2,
.language-entering main h3,
.language-entering main p,
.language-entering main a,
.language-entering main button,
.language-entering main label,
.language-entering main .form-channel,
.language-entering main .form-meta,
.language-entering main dt,
.language-entering main dd,
.language-entering main .section-ruler,
.language-entering main .mail-status,
.language-entering main .delivery-strip,
.language-entering main .work-output,
.language-entering .site-footer > * {
  animation: language-copy-in 430ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-copy { max-width: 900px; }

.glitch-title {
  font-size: clamp(72px, min(7.2vw, 14.4vh), 142px);
  line-height: 0.84;
}

.hero-lead em,
.systems-head p em,
.services-intro p em,
.mail-copy p em {
  color: var(--muted);
  font-style: normal;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hero-actions .signal-entry,
.hero-actions .text-link {
  margin-top: clamp(22px, 2.8vh, 30px);
}

.text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.text-link span { color: var(--acid); font-size: 17px; transition: transform 180ms ease; }
.text-link:hover { color: #fff; }
.text-link:hover span { transform: translate(4px, 4px); }

.work-section,
.services-section,
.mail-portal,
.contact-section {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.work-section {
  min-height: 0;
  padding: calc(var(--header-h) + 52px) var(--gutter) clamp(96px, 9vw, 168px);
  background: rgba(2, 3, 4, 0.54);
}

.work-head h2,
.services-intro h2,
.mail-copy h2,
.contact-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}

.work-head h2 { line-height: 0.86; }

.work-head p {
  align-self: end;
  padding-bottom: 8px;
  line-height: 1.85;
}

.case-console {
  display: grid;
  grid-template-columns: minmax(500px, 0.92fr) minmax(480px, 1.08fr);
  gap: clamp(24px, 3vw, 58px);
  align-items: start;
  margin-top: clamp(34px, 5vw, 82px);
}

.case-list {
  border-top: 1px solid var(--line);
}

.case-row {
  position: relative;
  display: grid;
  min-height: 104px;
  grid-template-columns: 44px minmax(210px, 0.95fr) minmax(160px, 1fr) 28px;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  font-family: var(--mono);
  isolation: isolate;
}

.case-row::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--acid);
  transform: translateX(-101%);
  transition: transform 330ms cubic-bezier(0.72, 0, 0.2, 1);
}

.case-row .case-no {
  color: var(--acid);
  font-size: 11px;
}

.case-row strong {
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-size: clamp(28px, 2.25vw, 44px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.case-row > span:nth-of-type(2) {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.07em;
}

.case-row i {
  color: var(--acid);
  font-size: 18px;
  font-style: normal;
  transition: transform 180ms ease;
}

.case-row:hover,
.case-row:focus-visible,
.case-row.is-active {
  color: #020304;
}

.case-row:hover::before,
.case-row:focus-visible::before,
.case-row.is-active::before { transform: translateX(0); }

.case-row:hover .case-no,
.case-row:hover > span,
.case-row:hover i,
.case-row:focus-visible .case-no,
.case-row:focus-visible > span,
.case-row:focus-visible i,
.case-row.is-active .case-no,
.case-row.is-active > span,
.case-row.is-active i { color: #020304; }

.case-row:hover i,
.case-row:focus-visible i { transform: translate(4px, -4px); }

.case-preview {
  position: sticky;
  top: calc(var(--header-h) + 22px);
  margin: 0;
  border: 1px solid var(--line);
  background: rgba(2, 3, 4, 0.88);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.36);
}

.case-preview-bar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.case-preview-bar span:nth-child(2) { color: var(--muted); }
.case-preview-bar span:last-child { color: var(--acid); }

.case-preview-media {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(200, 255, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 0, 0.035) 1px, transparent 1px),
    #050708;
  background-size: 28px 28px;
}

.case-preview-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.case-preview-image-link:focus-visible {
  outline-offset: -4px;
}

.case-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.9) contrast(1.03);
  transform: scale(1.003);
  transition: opacity 180ms ease, transform 750ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease;
}

.case-preview-media img.is-contain {
  object-fit: contain;
  padding: 15%;
}

.case-preview-media img.is-switching { opacity: 0.08; transform: scale(1.06); }
.case-preview:hover img { transform: scale(1.022); filter: saturate(1) contrast(1.02); }

.case-scan {
  position: absolute;
  inset: -10% 0 auto;
  height: 22%;
  border-bottom: 1px solid var(--acid);
  background: linear-gradient(to bottom, transparent, rgba(200, 255, 0, 0.1));
  mix-blend-mode: screen;
  animation: case-scan 5.5s linear infinite;
  pointer-events: none;
}

.case-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--acid);
  pointer-events: none;
}

.case-corner-a { top: 14px; left: 14px; border-top: 1px solid; border-left: 1px solid; }
.case-corner-b { right: 14px; bottom: 14px; border-right: 1px solid; border-bottom: 1px solid; }

.case-preview figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 26px;
  padding: 22px;
  font-family: var(--mono);
}

.case-preview figcaption > span {
  grid-column: 1 / -1;
  color: var(--acid);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.case-preview figcaption > strong {
  font-family: var(--display);
  font-size: clamp(34px, 3.7vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.case-preview figcaption > p {
  grid-row: 3;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.case-preview figcaption dl {
  grid-row: 2 / span 2;
  grid-column: 2;
  min-width: 170px;
  margin: 0;
}

.case-preview figcaption dl > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 8px;
}

.case-preview figcaption dt { color: var(--muted); }
.case-preview figcaption dd { margin: 0; color: var(--acid); }

.case-preview-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.case-preview-actions a,
.case-preview-actions button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 800 9px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.case-preview-actions a:hover,
.case-preview-actions button:hover {
  border-color: var(--acid);
  background: var(--acid);
  color: #020304;
}

.work-output {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.services-section {
  padding: calc(var(--header-h) + 52px) var(--gutter) clamp(100px, 10vw, 180px);
  background:
    linear-gradient(90deg, transparent 0 74%, rgba(52, 234, 255, 0.025) 74%),
    rgba(2, 3, 4, 0.74);
}

.services-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.44fr);
  align-items: end;
  gap: 50px;
  margin: clamp(52px, 7vw, 100px) 0 clamp(48px, 6vw, 92px);
}

.services-intro h2 {
  font-size: clamp(72px, 9.2vw, 168px);
  line-height: 0.84;
}

.services-intro p,
.mail-copy p {
  margin: 0;
  color: #d3d7d4;
  font-family: var(--mono);
  font-size: clamp(11px, 0.9vw, 15px);
  line-height: 1.9;
}

.service-topology {
  display: grid;
  grid-template-columns: minmax(560px, 1.15fr) minmax(420px, 0.85fr);
  gap: 20px;
}

.service-rails {
  border-top: 1px solid var(--line);
}

.service-rail {
  position: relative;
  display: grid;
  min-height: 122px;
  grid-template-columns: 48px minmax(220px, 1fr) minmax(190px, 0.7fr) auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  transition: padding 240ms ease, background 240ms ease;
}

.service-rail::after {
  position: absolute;
  right: -20px;
  width: 20px;
  height: 1px;
  content: "";
  background: var(--line);
}

.service-rail > span {
  color: var(--acid);
  font-family: var(--mono);
  font-size: 11px;
}

.service-rail h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 2.55vw, 48px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.service-rail p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.service-rail > i {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.1em;
}

.service-rail[data-accent="cyan"] > span { color: var(--cyan); }
.service-rail[data-accent="violet"] > span { color: var(--violet); }
.service-rail:hover { padding-left: 14px; background: rgba(255, 255, 255, 0.025); }
.service-rail:hover h3 { text-shadow: 4px 0 rgba(52, 234, 255, 0.34), -4px 0 rgba(162, 97, 255, 0.26); }

.service-node-map {
  position: sticky;
  top: calc(var(--header-h) + 22px);
  min-height: 696px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at center, rgba(200, 255, 0, 0.06), transparent 36%),
    rgba(2, 3, 4, 0.76);
}

.node-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 144px;
  height: 144px;
  place-items: center;
  border: 1px solid rgba(200, 255, 0, 0.55);
  color: var(--acid);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 70px rgba(200, 255, 0, 0.08);
}

.node-core::before,
.node-core::after {
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(52, 234, 255, 0.22);
  content: "";
}

.node-core::after { inset: 34px; border-color: rgba(162, 97, 255, 0.32); }

.node-core b,
.node-core span { transform: rotate(-45deg); }
.node-core b { font-family: var(--display); font-size: 52px; line-height: 0.7; }
.node-core span { position: absolute; bottom: 23px; font-family: var(--mono); font-size: 6px; white-space: nowrap; }

.delivery-strip {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #cdd1cf;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.delivery-strip i { height: 1px; background: linear-gradient(90deg, var(--line), var(--acid), var(--line)); }

.mail-portal {
  display: grid;
  min-height: min(920px, 100svh);
  grid-template-columns: minmax(0, 1.12fr) minmax(440px, 0.88fr);
  grid-template-rows: auto 1fr;
  gap: 32px clamp(40px, 6vw, 120px);
  align-items: center;
  padding: calc(var(--header-h) + 44px) var(--gutter) clamp(82px, 8vw, 140px);
  overflow: hidden;
  background: #030405;
}

.mail-grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(200, 255, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 0, 0.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 76% 52%, #000, transparent 57%);
}

.mail-status {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.mail-status span { color: var(--acid); }
.mail-status i { height: 1px; background: linear-gradient(90deg, var(--acid), var(--cyan), transparent); }
.mail-status b { color: var(--muted); font-weight: 400; }

.mail-copy { position: relative; z-index: 2; }

.mail-copy h2 {
  max-width: 9ch;
  font-size: clamp(72px, 8.4vw, 152px);
  line-height: 0.86;
}

.mail-copy p { margin-top: 42px; }

.mail-hatch {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 560px;
  align-content: center;
  justify-items: center;
  border: 1px solid var(--line);
  background: rgba(2, 3, 4, 0.72);
  clip-path: polygon(38px 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%, 0 38px);
}

.mail-hatch-head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: 44px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--acid);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.mail-hatch-head i { height: 1px; background: linear-gradient(90deg, var(--acid), var(--cyan), transparent); }
.mail-hatch-head b { color: var(--muted); font-weight: 400; }

.mail-hatch::before,
.mail-hatch::after {
  position: absolute;
  width: 70px;
  height: 70px;
  content: "";
  border-color: var(--acid);
}

.mail-hatch::before { top: 20px; right: 20px; border-top: 1px solid; border-right: 1px solid; }
.mail-hatch::after { bottom: 20px; left: 20px; border-bottom: 1px solid; border-left: 1px solid; }

.mail-orbit {
  position: relative;
  display: grid;
  width: min(28vw, 340px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(200, 255, 0, 0.42);
  border-radius: 50%;
}

.mail-orbit::before,
.mail-orbit::after,
.mail-orbit span {
  position: absolute;
  border: 1px solid;
  border-radius: 50%;
  content: "";
}

.mail-orbit::before { inset: 15%; border-color: rgba(52, 234, 255, 0.5); animation: mail-orbit 9s linear infinite; }
.mail-orbit::after { inset: 31%; border-color: rgba(162, 97, 255, 0.56); animation: mail-orbit 6s linear infinite reverse; }
.mail-orbit span:nth-child(1) { inset: -7%; border-color: rgba(255, 255, 255, 0.08); border-style: dashed; animation: mail-orbit 22s linear infinite; }
.mail-orbit span:nth-child(2) { inset: 7%; border-color: rgba(200, 255, 0, 0.15); }
.mail-orbit span:nth-child(3) { top: 50%; left: -4px; width: 8px; height: 8px; border: 0; background: var(--acid); box-shadow: 0 0 18px var(--acid); animation: orbit-node 4.4s linear infinite; }
.mail-orbit b { font-family: var(--display); font-size: clamp(58px, 6vw, 108px); font-weight: 900; }

.mail-address {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: 32px;
  font-family: var(--mono);
}

.mail-address span { color: var(--muted); font-size: 9px; letter-spacing: 0.13em; }
.mail-address strong { font-size: 14px; letter-spacing: 0.08em; }

.mail-hatch > a,
.contact-primary {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--acid);
  color: var(--acid);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.mail-hatch > a { width: min(70%, 360px); margin-top: 34px; padding: 0 21px; }
.mail-hatch > a span,
.contact-primary span { font-size: 21px; }
.mail-hatch > a:hover,
.contact-primary:hover { color: #020304; background: var(--acid); transform: translateY(-3px); }

.contact-section {
  display: grid;
  min-height: 940px;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
  align-items: end;
  gap: clamp(42px, 7vw, 140px);
  padding: clamp(120px, 13vw, 230px) var(--gutter) clamp(100px, 10vw, 180px);
  overflow: hidden;
  background: rgba(2, 3, 4, 0.84);
}

.contact-orbit {
  position: absolute;
  top: 50%;
  right: -7vw;
  color: transparent;
  font-family: var(--display);
  font-size: min(73vw, 1100px);
  line-height: 0.66;
  -webkit-text-stroke: 1px rgba(200, 255, 0, 0.15);
  transform: translateY(-50%) rotate(-8deg);
}

.contact-copy,
.contact-actions { position: relative; z-index: 2; }

.contact-copy h2 {
  font-size: clamp(70px, 8.5vw, 156px);
  line-height: 0.86;
}

.contact-copy p {
  max-width: 620px;
  margin: 44px 0 0;
  color: #c9cecb;
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.9;
}

.contact-primary { padding: 0 22px; }

.inquiry-form {
  position: relative;
  padding: clamp(24px, 2.4vw, 38px);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.045), transparent 38%),
    rgba(2, 3, 4, 0.9);
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.38);
}

.inquiry-form::before,
.inquiry-form::after {
  position: absolute;
  width: 28px;
  height: 28px;
  content: "";
  pointer-events: none;
}

.inquiry-form::before { top: 12px; right: 12px; border-top: 1px solid var(--white); border-right: 1px solid var(--white); }
.inquiry-form::after { bottom: 12px; left: 12px; border-bottom: 1px solid var(--acid); border-left: 1px solid var(--acid); }

.form-channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
  color: var(--acid);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
}

.form-channel i { height: 1px; background: linear-gradient(90deg, var(--acid), var(--cyan), transparent); }
.form-channel b { color: var(--muted); font-weight: 400; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.form-field-wide { grid-column: 1 / -1; }

.form-field {
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: rgba(255, 255, 255, 0.018);
  color: var(--white);
  font: 13px/1.5 var(--mono);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.form-field input,
.form-field select { min-height: 48px; padding: 0 12px; }
.form-field textarea { min-height: 126px; padding: 12px; resize: vertical; }
.form-field select { cursor: pointer; color-scheme: dark; }
.form-field select:invalid { color: #747b78; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--acid);
  background: rgba(200, 255, 0, 0.035);
  box-shadow: 0 12px 44px rgba(200, 255, 0, 0.035);
}

.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea { border-color: #ff426d; }

.form-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 11px;
  margin: 22px 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.65;
  cursor: pointer;
}

.form-consent input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--acid);
}

.form-consent.is-invalid { color: #ff426d; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.inquiry-form .contact-primary {
  width: 100%;
  appearance: none;
  cursor: pointer;
  background: transparent;
  text-align: left;
}

.inquiry-form .contact-primary span,
.inquiry-form .contact-primary b { position: relative; z-index: 1; color: inherit; opacity: 1; visibility: visible; }

.inquiry-form .contact-primary:disabled { opacity: 0.46; cursor: wait; transform: none; }
.inquiry-form .contact-primary.is-sent { color: #020304; background: var(--acid); }

.form-feedback {
  min-height: 18px;
  margin: 13px 0 0;
  color: var(--acid);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
}

.form-feedback[data-state="error"],
.form-feedback[data-state="invalid"] { color: #ff426d; }

.form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.form-meta a { color: var(--cyan); }
.form-meta a:hover { color: var(--acid); }

.engagement-modes {
  display: grid;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.engagement-modes span {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.site-footer { grid-template-columns: auto auto 1fr auto; }
.site-footer nav { display: flex; gap: 22px; }
.site-footer nav a { display: inline-flex; font-size: 10px; }

@keyframes case-scan {
  from { transform: translateY(-30%); }
  to { transform: translateY(500%); }
}

@keyframes mail-orbit { to { transform: rotate(360deg); } }

@keyframes orbit-node {
  0% { transform: rotate(0deg) translateX(170px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(170px) rotate(-360deg); }
}

@keyframes language-ring {
  0% { opacity: 1; transform: scale(0.2); }
  78% { opacity: 0.78; }
  100% { opacity: 0; transform: scale(62); }
}

@keyframes language-shard {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--shard-angle)) translateY(0) scaleY(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--shard-angle)) translateY(calc(var(--shard-distance) * -1)) scaleY(1); }
}

@keyframes language-copy-out {
  0% { opacity: 1; filter: blur(0); transform: translate(0); clip-path: inset(0); }
  38% { opacity: 1; text-shadow: -7px 0 var(--cyan), 7px 0 var(--violet); transform: translateX(3px); }
  100% { opacity: 0; filter: blur(5px); transform: translate(14px, -7px) skewX(-7deg); clip-path: inset(44% 0 37% 0); }
}

@keyframes language-copy-in {
  0% { opacity: 0; filter: blur(7px); transform: translate(-16px, 8px) skewX(8deg); clip-path: inset(54% 0 31% 0); text-shadow: 9px 0 var(--cyan), -9px 0 var(--violet); }
  58% { opacity: 1; filter: blur(0); clip-path: inset(0); text-shadow: 3px 0 var(--cyan), -3px 0 var(--violet); }
  100% { opacity: 1; transform: translate(0) skewX(0); text-shadow: none; }
}

/* Typography stabilization: preserve the condensed Latin face, but give CJK
   headings a native display stack and enough vertical room to render cleanly. */
.glitch-title,
.work-head h2,
.services-intro h2,
.mail-copy h2,
.contact-copy h2,
.service-rail h3 {
  text-wrap: balance;
}

:lang(zh-CN) .glitch-title,
:lang(zh-CN) .work-head h2,
:lang(zh-CN) .services-intro h2,
:lang(zh-CN) .mail-copy h2,
:lang(zh-CN) .contact-copy h2,
:lang(zh-CN) .service-rail h3 {
  font-family: var(--display-cjk);
  font-weight: 900;
  letter-spacing: -0.07em;
  font-kerning: normal;
  word-break: keep-all;
}

:lang(zh-CN) .glitch-title,
:lang(zh-CN) .work-head h2,
:lang(zh-CN) .services-intro h2,
:lang(zh-CN) .mail-copy h2,
:lang(zh-CN) .contact-copy h2 {
  line-height: 1.02;
}

:lang(zh-CN) .service-rail h3 {
  line-height: 1.16;
  letter-spacing: -0.045em;
}

.case-row strong,
.case-preview figcaption > strong {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Keep the complete conversion path visible on short laptop screens. The
   terminal remains anchored to the viewport, so the hero copy compacts above
   it instead of allowing the project CTA to disappear underneath. */
@media (min-width: 821px) and (max-height: 760px) {
  .hero {
    align-items: start;
    padding-top: calc(var(--header-h) + 20px);
  }

  .hero-copy,
  .z-sculpture,
  .telemetry {
    margin-top: 10px;
  }

  .glitch-title {
    font-size: clamp(68px, 11.4vh, 88px);
    line-height: 0.82;
  }

  :lang(zh-CN) .glitch-title {
    font-size: clamp(64px, 9.7vh, 74px);
    line-height: 0.94;
  }

  .hero-lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .hero-actions .signal-entry,
  .hero-actions .text-link {
    margin-top: 12px;
  }

  .hero-actions .signal-entry { min-height: 52px; }
  .hero-actions .text-link { min-height: 40px; }
}

@media (max-width: 1240px) {
  .primary-nav { gap: 24px; }
  .header-tools { gap: 14px; }
  .online-state { display: none; }
  .case-console { grid-template-columns: minmax(430px, 0.92fr) minmax(420px, 1.08fr); }
  .service-topology { grid-template-columns: minmax(500px, 1.08fr) minmax(360px, 0.92fr); }
}

@media (max-width: 980px) {
  .primary-nav a:nth-child(3) { display: none; }
  .case-console,
  .service-topology { grid-template-columns: 1fr; }
  .case-preview { position: relative; top: auto; order: -1; }
  .case-preview-media { height: auto; aspect-ratio: 16 / 10; }
  .service-node-map { position: relative; top: auto; min-height: 520px; order: -1; }
  .mail-portal { grid-template-columns: 1fr; }
  .mail-hatch { min-height: 560px; }
  .mail-orbit { width: min(48vw, 340px); }
  .contact-section { grid-template-columns: 1fr; }
  .contact-actions { width: 100%; max-width: 720px; }
}

@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-tools { gap: 10px; }
  .quality-toggle { padding: 0 9px; }
  .language-toggle { padding: 0 8px; }
  .mail-shortcut { font-size: 9px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 0; }
  .text-link { margin-top: 17px; }
  .work-section,
  .services-section { padding-top: 110px; }
  .case-console { margin-top: 38px; }
  .case-row { grid-template-columns: 34px minmax(0, 1fr) 24px; min-height: 92px; }
  .case-row > span:nth-of-type(2) { display: none; }
  .case-preview figcaption { grid-template-columns: 1fr; }
  .case-preview figcaption dl { display: none; }
  .case-preview figcaption > strong { font-size: clamp(38px, 10vw, 68px); }
  .case-preview-actions { flex-direction: column; }
  .case-preview-actions a,
  .case-preview-actions button { width: 100%; }
  .services-intro { grid-template-columns: 1fr; gap: 24px; }
  .services-intro h2 { font-size: clamp(70px, 18vw, 128px); }
  .service-rail { grid-template-columns: 34px minmax(0, 1fr); min-height: 100px; }
  .service-rail p,
  .service-rail > i { display: none; }
  .service-rail::after { display: none; }
  .delivery-strip { grid-template-columns: 1fr 1fr; gap: 0; }
  .delivery-strip span { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .delivery-strip i { display: none; }
  .mail-portal { min-height: auto; padding-top: 110px; }
  .mail-copy h2 { font-size: clamp(62px, 16vw, 108px); line-height: 0.9; }
  .mail-hatch { min-height: 510px; }
  .contact-section { min-height: 780px; }
  .contact-copy h2 { font-size: clamp(62px, 16vw, 108px); line-height: 0.9; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: 16px; }
  .form-field-wide { grid-column: auto; }
  .site-footer { grid-template-columns: auto 1fr; }
  .site-footer nav { display: none; }
}

@media (max-width: 520px) {
  .mail-shortcut { display: inline-flex; }
  .quality-toggle { display: none; }
  .language-toggle { min-height: 40px; padding: 0 7px; font-size: 8px; }
  .language-toggle > span:last-child,
  .language-toggle > i { display: none; }
  .glitch-title { font-size: clamp(52px, 15.7vw, 76px); line-height: 0.9; }
  .hero-copy { padding-left: 20px; }
  .signal-entry { width: calc(100vw - 60px); }
  .work-head h2 { font-size: clamp(56px, 16vw, 82px); line-height: 0.92; }
  :lang(zh-CN) .services-intro h2 { font-size: clamp(58px, 18vw, 82px); }
  :lang(zh-CN) .contact-copy h2 { font-size: clamp(50px, 15.5vw, 82px); }
  .case-preview-media { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .case-preview-bar span:nth-child(2) { display: none; }
  .case-preview figcaption { padding: 17px; }
  .case-row strong { font-size: clamp(25px, 8.5vw, 38px); }
  .service-node-map { min-height: 420px; }
  .node-core { width: 108px; height: 108px; }
  .node-core b { font-size: 42px; }
  .node-core span { bottom: 15px; }
  .mail-status { grid-template-columns: 1fr auto; }
  .mail-status i { display: none; }
  .mail-hatch { min-height: 440px; }
  .mail-orbit { width: 62vw; }
  .mail-hatch > a { width: 78%; min-height: 62px; }
  .contact-section { padding-top: 120px; }
  .contact-copy p { font-size: 12px; }
  .contact-primary { min-height: 62px; font-size: 9px; }
  .inquiry-form { padding: 22px 18px; }
  .form-channel { grid-template-columns: auto 1fr; }
  .form-channel b { display: none; }
  .form-meta { align-items: flex-start; flex-direction: column; }
  .work-output span:nth-child(n + 3) { display: none; }
}

@media (max-width: 820px) {
  :lang(zh-CN) .glitch-title,
  :lang(zh-CN) .work-head h2,
  :lang(zh-CN) .services-intro h2,
  :lang(zh-CN) .mail-copy h2,
  :lang(zh-CN) .contact-copy h2 {
    line-height: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-scan,
  .mail-orbit::before,
  .mail-orbit::after,
  .mail-orbit span { animation: none !important; }
  .language-burst { display: none; }
}