/*
 * AI Powered public infrastructure portrait.
 * No scripts, external fonts, images or tracking are required; every visual is
 * CSS-only so the strict Caddy content-security policy remains unchanged.
 */
:root {
  color-scheme: dark;
  --bg: #070a0c;
  --surface: #0d1114;
  --surface-2: #12181c;
  --surface-3: #182025;
  --line: #263138;
  --line-soft: #182126;
  --text: #f4f7f5;
  --muted: #8d9b97;
  --muted-strong: #bdc8c4;
  --green: #a8ff3e;
  --cyan: #55e6ff;
  --orange: #ffb454;
  --radius: 1.5rem;
  --page: min(90rem, calc(100vw - 3rem));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  min-width: 20rem;
  margin: 0;
  background:
    radial-gradient(circle at 80% 4%, rgb(168 255 62 / 8%), transparent 25rem),
    linear-gradient(180deg, #080b0d 0%, var(--bg) 22rem);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

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

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  background: var(--green);
  color: #080b0d;
  font-weight: 800;
  transform: translateY(-150%);
}

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

.site-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--page);
  min-height: 5rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  width: fit-content;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wordmark-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-size: 0.68rem;
  place-items: center;
}

nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  color: var(--muted-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

nav a,
.wordmark,
.button,
.linked-node {
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease,
    transform 180ms ease;
}

nav a:hover,
nav a:focus-visible { color: var(--green); }

/* The language selector is plain navigation so it remains usable without JS. */
.header-actions {
  display: inline-flex;
  justify-self: end;
  gap: 1rem;
  align-items: center;
}

.language-switch {
  display: inline-flex;
  gap: 0;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(13 17 20 / 72%);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.language-switch a {
  display: grid;
  min-width: 2rem;
  height: 1.7rem;
  border-radius: 999px;
  color: var(--muted);
  place-items: center;
}

.language-switch a[aria-current="page"] {
  background: var(--green);
  color: #080b0d;
}

.header-state {
  display: inline-flex;
  justify-self: end;
  gap: 0.55rem;
  align-items: center;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header-state span,
.live-label i,
.pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0.9rem var(--green);
}

.section {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 9rem) 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  min-height: calc(100svh - 5rem);
  padding-top: 5rem;
  padding-bottom: 6rem;
}

.eyebrow,
.card-kicker {
  margin: 0 0 1.25rem;
  color: var(--green);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 15ch;
  margin-bottom: 1.8rem;
  font-size: clamp(3.2rem, 7.2vw, 7.3rem);
  font-weight: 680;
  letter-spacing: -0.075em;
  line-height: 0.93;
}

h1 span { color: var(--green); }

.hero-intro {
  max-width: 42rem;
  margin-bottom: 2.2rem;
  color: var(--muted-strong);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  line-height: 1.7;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.button {
  display: inline-flex;
  min-height: 3.15rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.button:hover,
.button:focus-visible { transform: translateY(-2px); }
.button-primary { border-color: var(--green); background: var(--green); color: #081005; }
.button-primary:hover,
.button-primary:focus-visible { background: #c2ff7b; }
.button-secondary:hover,
.button-secondary:focus-visible { border-color: var(--green); color: var(--green); }

.hero-system {
  position: relative;
  overflow: hidden;
  min-height: 39rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px),
    radial-gradient(circle at center, rgb(168 255 62 / 7%), transparent 48%),
    var(--surface);
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, auto, auto;
  box-shadow: 0 2rem 7rem rgb(0 0 0 / 45%);
}

.system-topline {
  display: flex;
  position: relative;
  z-index: 2;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.live-label { display: flex; gap: 0.5rem; align-items: center; color: var(--green); }
.live-label i { display: block; width: 0.42rem; height: 0.42rem; }
.core-orbit { position: relative; height: 25rem; }

.orbit,
.core,
.satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit { border: 1px solid var(--line); border-radius: 50%; }

.orbit::before,
.orbit::after {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--green);
  content: "";
  box-shadow: 0 0 1rem rgb(168 255 62 / 70%);
}

.orbit-one { width: 12rem; height: 12rem; }
.orbit-one::before { top: 1rem; right: 1.6rem; }
.orbit-one::after { bottom: 0.55rem; left: 2.8rem; }
.orbit-two { width: 20rem; height: 20rem; border-style: dashed; }
.orbit-two::before { top: 50%; left: -0.22rem; }
.orbit-two::after { right: 1.3rem; bottom: 3rem; background: var(--cyan); box-shadow: 0 0 1rem rgb(85 230 255 / 70%); }

.core {
  display: grid;
  z-index: 2;
  width: 7rem;
  height: 7rem;
  border: 1px solid var(--green);
  border-radius: 50%;
  background: #10170d;
  box-shadow: 0 0 3rem rgb(168 255 62 / 16%), inset 0 0 2rem rgb(168 255 62 / 8%);
  place-content: center;
  text-align: center;
}

.core strong { color: var(--green); font-size: 2rem; line-height: 1; }
.core span,
.satellite { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.16em; }
.core span { margin-top: 0.35rem; color: var(--muted); }

.satellite {
  z-index: 3;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-2);
  color: var(--muted-strong);
}

.satellite-web { top: 19%; left: 75%; }
.satellite-data { top: 78%; left: 66%; }
.satellite-ai { top: 65%; left: 17%; }

.system-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: rgb(7 10 12 / 78%);
}

.system-stats div { padding: 1rem 1.1rem; }
.system-stats div:nth-child(odd) { border-right: 1px solid var(--line); }
.system-stats div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
.system-stats span,
.system-stats strong { display: block; }
.system-stats span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.6rem; letter-spacing: 0.12em; }
.system-stats strong { margin-top: 0.18rem; font-size: 1rem; }

.evidence-strip {
  display: flex;
  width: 100%;
  min-height: 4.5rem;
  padding: 0 5vw;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  align-items: center;
  justify-content: center;
}

.evidence-strip p {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0;
  padding: 0 1.7rem;
  border-right: 1px solid var(--line);
  color: var(--muted-strong);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.evidence-strip p:last-child { border-right: 0; }
.evidence-strip strong { color: var(--text); }
.pulse { display: block; width: 0.4rem; height: 0.4rem; }

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.62fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

h2 {
  max-width: 16ch;
  margin-bottom: 0;
  font-size: clamp(2.4rem, 5vw, 5.4rem);
  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.section-heading > p,
.security-copy > p { margin-bottom: 0; color: var(--muted); font-size: 1.02rem; }
.architecture,
.services,
.evolution,
.delta { border-bottom: 1px solid var(--line-soft); }

.topology {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.topology-lane {
  display: grid;
  position: relative;
  grid-template-columns: minmax(11rem, 0.8fr) 4rem minmax(13rem, 1fr) 4rem minmax(13rem, 1.15fr);
  gap: 1rem;
  align-items: center;
  padding: 4.5rem 2rem 2rem;
}

.topology-lane + .topology-lane { border-top: 1px solid var(--line); }
.private-lane { background: linear-gradient(90deg, rgb(85 230 255 / 3%), transparent 65%); }
.lane-label { position: absolute; top: 1.2rem; left: 1.5rem; margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.63rem; letter-spacing: 0.14em; }

.node {
  min-height: 11.5rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-2);
}

.featured-node { border-color: rgb(168 255 62 / 55%); box-shadow: inset 0 0 2rem rgb(168 255 62 / 4%); }
.node small,
.node strong,
.node p { display: block; }
.node small { margin-top: 1rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.12em; }
.node strong { margin-top: 0.25rem; font-size: 1.3rem; }
.node p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.78rem; }

.node-icon { display: block; position: relative; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: 0.6rem; }
.globe-icon::before,
.globe-icon::after { position: absolute; content: ""; }
.globe-icon::before { inset: 0.45rem; border: 1px solid var(--cyan); border-radius: 50%; }
.globe-icon::after { top: 50%; left: 0.5rem; right: 0.5rem; border-top: 1px solid var(--cyan); }
.shield-icon::before { position: absolute; inset: 0.4rem 0.55rem 0.5rem; border: 1px solid var(--green); border-radius: 0.6rem 0.6rem 0.9rem 0.9rem; content: ""; }
.spark-icon::before { position: absolute; top: 0.45rem; left: 0.82rem; width: 0.5rem; height: 1.2rem; background: var(--green); clip-path: polygon(55% 0, 100% 0, 65% 42%, 95% 42%, 30% 100%, 45% 55%, 10% 55%); content: ""; }
.cube-icon::before { position: absolute; inset: 0.55rem; border: 1px solid var(--cyan); content: ""; transform: rotate(30deg) skew(-5deg); }
.disk-icon::before,
.disk-icon::after { position: absolute; left: 0.45rem; width: 1.15rem; height: 0.35rem; border: 1px solid var(--orange); border-radius: 50%; content: ""; }
.disk-icon::before { top: 0.55rem; }
.disk-icon::after { bottom: 0.55rem; }

.connector { display: flex; align-items: center; }
.connector::after { width: 0; height: 0; border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent; border-left: 0.45rem solid var(--green); content: ""; }
.connector i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), var(--green)); }
.node-stack { display: grid; gap: 0.75rem; }
.compact-node { min-height: auto; padding: 1rem 1.2rem; }
.compact-node small { margin-top: 0; }
.compact-node strong { font-size: 1rem; }
.linked-node:hover,
.linked-node:focus-visible { border-color: var(--green); transform: translateX(3px); }

.capacity-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.allocation-card,
.disk-card,
.resource-card,
.delta-grid article { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.allocation-card { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.allocation-copy h3 { max-width: 13ch; margin: 0 0 1rem; font-size: clamp(1.8rem, 3.2vw, 3.2rem); letter-spacing: -0.055em; line-height: 1; }
.allocation-copy > p:last-child { max-width: 44rem; margin: 0; color: var(--muted); }
.allocation-visual { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; justify-content: flex-end; }
.allocation-pie { display: grid; flex: 0 0 auto; width: clamp(10rem, 18vw, 14rem); aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; background: conic-gradient(var(--green) 0 7.407%, var(--cyan) 7.407% 100%); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%); place-items: center; }
.allocation-pie > div { display: grid; width: 48%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 0.5rem rgb(13 17 20 / 35%); place-content: center; text-align: center; }
.allocation-pie strong,
.allocation-pie span { display: block; }
.allocation-pie strong { font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.06em; line-height: 1; }
.allocation-pie span { margin-top: 0.3rem; color: var(--muted); font-size: 0.65rem; text-transform: uppercase; }
.allocation-legend { display: grid; min-width: 10rem; margin: 0; padding: 0; gap: 1rem; list-style: none; }
.allocation-legend li { display: grid; grid-template-columns: 0.75rem 1fr; gap: 0.75rem; align-items: start; }
.allocation-legend li > div { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem; align-items: baseline; }
.allocation-legend span { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; }
.allocation-legend strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
.allocation-legend small { grid-column: 1 / -1; color: var(--muted); font-size: 0.7rem; }
.legend-swatch { width: 0.75rem; height: 0.75rem; margin-top: 0.2rem; border-radius: 50%; }
.legend-system { background: var(--green); }
.legend-data { background: var(--cyan); }
.disk-card { grid-column: span 3; padding: clamp(1.5rem, 3vw, 2.5rem); }
.disk-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2.2rem; }
.card-kicker { margin-bottom: 0.45rem; }
.disk-card h3 { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -0.04em; }

.gauge { display: grid; width: 6.2rem; height: 6.2rem; padding: 0.55rem; border-radius: 50%; place-items: center; }
.gauge-39 { background: conic-gradient(var(--green) 39%, var(--surface-3) 0); }
.gauge-2 { background: conic-gradient(var(--cyan) 2%, var(--surface-3) 0); }
.gauge > div { display: grid; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); place-content: center; text-align: center; }
.gauge strong,
.gauge span { display: block; }
.gauge strong { font-size: 1.25rem; line-height: 1; }
.gauge span { margin-top: 0.2rem; color: var(--muted); font-size: 0.58rem; text-transform: uppercase; }

.measure-row { display: flex; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 0.85rem; }
.measure-row strong { color: var(--text); }
.bar { overflow: hidden; height: 0.45rem; margin: 1.5rem 0; border-radius: 2rem; background: var(--surface-3); }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.disk-data .bar i { background: var(--cyan); }
/* CSP-safe width presets: the live policy intentionally forbids inline styles. */
.bar-value-39 { width: 39%; }
.bar-value-2 { width: 2%; }
.card-note { margin: 0; color: var(--muted); font-size: 0.87rem; }
.card-note strong { color: var(--green); }

.resource-card { grid-column: span 3; padding: 2rem 2.5rem; }
.resource-number { margin: 1rem 0 0.5rem; font-size: clamp(3.2rem, 5vw, 5rem); font-weight: 700; letter-spacing: -0.07em; line-height: 1; }
.resource-number span { margin-left: 0.45rem; color: var(--muted); font-size: 0.85rem; letter-spacing: 0; }
.resource-card > p:last-child { margin: 0; color: var(--muted); font-size: 0.85rem; }

.service-table { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 1.1fr 1.4fr 0.8fr 0.55fr; gap: 1rem; align-items: center; min-height: 5.4rem; padding: 1rem 0.5rem; border-bottom: 1px solid var(--line); color: var(--muted-strong); }
.service-row > span:first-child { display: flex; gap: 0.9rem; align-items: center; color: var(--text); }
.service-table-head { min-height: 3rem; color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.service-table-head > span:first-child { color: var(--muted); }
.service-glyph { display: block; width: 1.6rem; height: 1.6rem; border: 1px solid var(--line); border-radius: 0.35rem; background: linear-gradient(135deg, rgb(168 255 62 / 20%), transparent); }
.app-glyph { background: linear-gradient(135deg, rgb(85 230 255 / 25%), transparent); }
.ai-glyph { border-radius: 50%; box-shadow: inset 0 0 0 0.35rem var(--surface), inset 0 0 0 0.5rem var(--green); }
.box-glyph { transform: rotate(12deg); }
.health-glyph { background: linear-gradient(135deg, rgb(255 180 84 / 25%), transparent); }
code { padding: 0.25rem 0.45rem; border: 1px solid var(--line); border-radius: 0.3rem; color: var(--cyan); font-size: 0.78rem; }
.status-ok { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--green); font-size: 0.72rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.status-ok::before { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--green); content: ""; }

.security { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.82fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.security h2 { margin-bottom: 1.8rem; }
.check-list { display: grid; gap: 0.8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.8rem; color: var(--muted-strong); font-size: 0.9rem; }
.check-list li::before { position: absolute; top: 0.5rem; left: 0; width: 0.7rem; height: 0.35rem; border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); content: ""; transform: rotate(-45deg); }

.port-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.port-panel-head { display: flex; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.1em; }
.port-panel-head span:last-child { color: var(--green); }
.port-list { padding: 1rem; }
.port-item { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--line-soft); }
.port-item:last-child { border-bottom: 0; }
.port-item strong { color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.3rem; }
.port-item span { color: var(--muted-strong); font-size: 0.82rem; }
.port-item em { color: var(--muted); font-size: 0.58rem; font-style: normal; letter-spacing: 0.1em; }
.blocked-zone { display: flex; gap: 1rem; align-items: center; padding: 1.3rem 1.5rem; border-top: 1px solid #51282c; background: #1c1113; }
.blocked-zone > span { display: grid; width: 2rem; height: 2rem; border: 1px solid #ff6f79; border-radius: 50%; color: #ff8c94; place-items: center; }
.blocked-zone p { margin: 0; color: #c99ea1; font-size: 0.75rem; line-height: 1.5; }
.blocked-zone strong { color: #ffd4d6; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; position: relative; grid-template-columns: 6rem 1fr; min-height: 8.5rem; padding: 0 0 2rem; }
.timeline li::before { position: absolute; top: 2.3rem; bottom: 0; left: 2.2rem; width: 1px; background: var(--line); content: ""; }
.timeline li:last-child::before { display: none; }
.timeline-index { display: grid; position: relative; z-index: 2; width: 4.5rem; height: 4.5rem; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; place-items: center; }
.timeline li > div { padding: 0.4rem 0 2rem 1.5rem; border-bottom: 1px solid var(--line-soft); }
.timeline time { color: var(--green); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.timeline h3 { margin: 0.25rem 0; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.timeline p { margin: 0; color: var(--muted); }
.timeline-current .timeline-index { border-color: var(--green); background: var(--green); color: #081005; }
.timeline-current h3 { color: var(--green); }

.delta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.delta-grid article { min-height: 16rem; padding: 2rem; }
.delta-grid span { color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.63rem; letter-spacing: 0.12em; }
.delta-grid h3 { margin: 4rem 0 0.7rem; font-size: 1.35rem; }
.delta-grid p { margin: 0; color: var(--muted); font-size: 0.85rem; }

.final-status { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 5rem; align-items: center; padding-top: 7rem; padding-bottom: 7rem; }
.final-status h2 { max-width: 12ch; }
.final-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.final-grid p { margin: 0; padding: 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.final-grid span,
.final-grid strong { display: block; }
.final-grid span { color: var(--muted); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; }
.final-grid strong { margin-top: 0.3rem; font-size: 0.95rem; }

footer { display: flex; width: var(--page); min-height: 7rem; margin: 0 auto; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.72rem; }
footer p { margin: 0; }
footer strong { color: var(--text); }

@media (max-width: 70rem) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero { grid-template-columns: 1fr 0.8fr; gap: 3rem; }
  .topology-lane { grid-template-columns: 1fr 2rem 1fr 2rem 1fr; padding-inline: 1.2rem; }
  .delta-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 52rem) {
  :root { --page: min(100% - 2rem, 44rem); }
  .hero,
  .section-heading,
  .security,
  .final-status { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 4rem; }
  h1 { font-size: clamp(3.1rem, 15vw, 6rem); }
  .hero-system { min-height: 36rem; }
  .evidence-strip { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0.8rem 1rem; }
  .evidence-strip p { min-height: 2.4rem; padding: 0.3rem 0.7rem; border: 0; white-space: normal; }
  .section-heading { gap: 1.5rem; }
  .topology-lane { grid-template-columns: 1fr; gap: 0.8rem; padding: 4rem 1rem 1rem; }
  .connector { width: 1px; height: 1.5rem; margin-left: 2rem; background: linear-gradient(var(--line), var(--green)); }
  .connector i { display: none; }
  .connector::after { align-self: flex-end; margin: 0 0 -0.2rem -0.28rem; border-top: 0.45rem solid var(--green); border-right: 0.3rem solid transparent; border-bottom: 0; border-left: 0.3rem solid transparent; }
  .node { min-height: auto; }
  .capacity-grid { grid-template-columns: 1fr; }
  .allocation-card { grid-template-columns: 1fr; }
  .allocation-copy h3 { max-width: 18ch; }
  .allocation-visual { justify-content: flex-start; }
  .disk-card,
  .resource-card { grid-column: auto; }
  .service-row { grid-template-columns: 1.1fr 1fr 0.6fr; }
  .service-row > span:nth-child(2),
  .service-table-head > span:nth-child(2) { display: none; }
  .final-status { gap: 2.5rem; }
}

@media (max-width: 35rem) {
  .site-header { min-height: 4.5rem; }
  .wordmark > span:last-child { display: none; }
  .header-state { font-size: 0.65rem; }
  .header-actions { gap: 0.6rem; }
  .language-switch a { min-width: 1.75rem; }
  .section { padding: 4.5rem 0; }
  .hero { padding-top: 3.5rem; }
  h1 { letter-spacing: -0.065em; }
  .hero-system { min-height: 32rem; border-radius: 1.3rem; }
  .core-orbit { height: 21rem; transform: scale(0.85); }
  .system-stats { margin: -1rem 0.8rem 0.8rem; }
  .evidence-strip { grid-template-columns: 1fr; }
  .evidence-strip p { justify-content: center; text-align: center; }
  .disk-card-head { gap: 1rem; }
  .allocation-visual { display: grid; justify-items: center; }
  .allocation-legend { width: min(100%, 16rem); }
  .gauge { width: 5rem; height: 5rem; }
  .service-row { grid-template-columns: 1fr auto; }
  .service-row > span:nth-child(3),
  .service-table-head > span:nth-child(3) { display: none; }
  .port-item { grid-template-columns: 3rem 1fr auto; padding-inline: 0.6rem; }
  .timeline li { grid-template-columns: 4.5rem 1fr; }
  .timeline-index { width: 3.5rem; height: 3.5rem; }
  .timeline li::before { left: 1.75rem; }
  .timeline li > div { padding-left: 0.8rem; }
  .delta-grid,
  .final-grid { grid-template-columns: 1fr; }
  .delta-grid article { min-height: 13rem; }
  footer { display: grid; gap: 0.5rem; padding: 1.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}