:root {
  color-scheme: dark;
  --background: #080d0f;
  --surface: #101a1d;
  --border: #284044;
  --text: #f2f7f4;
  --muted: #abc0ba;
  --accent: #b8ec65;
  --accent-soft: #79c7bd;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 76% 25%, #143033 0, transparent 31%), var(--background);
}
img { max-width: 100%; }
a { color: inherit; }
.skip-link { position: absolute; top: -80px; left: 16px; padding: 12px; background: var(--accent); color: #10201b; z-index: 10; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.page-shell { width: min(100% - 48px, 1180px); margin-inline: auto; }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 122px;
  border-bottom: 1px solid var(--border);
}
.brand { display: block; width: 280px; height: auto; }
.header-note, .section-number, .eyebrow, .art-label, .card-index {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.header-note, .section-number, .card-index { color: var(--accent-soft); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: center;
  gap: 48px;
  min-height: 590px;
  padding-block: 70px 84px;
}
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--accent); margin: 0 0 28px; }
.signal { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
h1 { max-width: 760px; margin: 0; font-size: clamp(43px, 5.7vw, 77px); line-height: 1.04; letter-spacing: -.065em; font-weight: 680; }
h1 span { color: var(--accent); }
.lead { max-width: 590px; margin: 30px 0 0; color: var(--text); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.58; }
.boundary { max-width: 560px; margin: 24px 0 0; padding-left: 18px; border-left: 2px solid var(--accent-soft); color: var(--muted); line-height: 1.65; }

.system-art { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
.art-orbit { position: absolute; inset: 10%; border: 1px solid #3d5f5a; border-radius: 50%; }
.orbit-two { inset: 25%; border-color: #608177; }
.system-art::before, .system-art::after { content: ""; position: absolute; inset: 50% 7% auto; height: 1px; background: linear-gradient(90deg, transparent, #3e6c65, transparent); transform: rotate(32deg); }
.system-art::after { transform: rotate(-32deg); }
.art-core { position: absolute; inset: 36%; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; background: #142825; box-shadow: 0 0 0 14px #132321, 0 0 75px #7ac2a21f; color: var(--accent); font-size: 30px; font-weight: 800; letter-spacing: -.08em; }
.art-node { position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 50%; background: var(--background); box-shadow: 0 0 18px #b8ec657a; }
.node-one { top: 13%; left: 27%; }
.node-two { top: 56%; right: 8%; }
.node-three { bottom: 8%; left: 26%; }
.art-label { position: absolute; color: var(--accent-soft); font-size: 9px; }
.label-one { top: 6%; left: 32%; }
.label-two { top: 61%; right: 0; }
.label-three { bottom: 2%; left: 31%; }

.overview { padding: 45px 0 112px; border-top: 1px solid var(--border); }
.section-heading { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; margin-bottom: 32px; }
.section-number { padding-top: 9px; }
h2 { max-width: 680px; margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; letter-spacing: -.045em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { min-width: 0; min-height: 205px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, #142124, var(--surface)); }
.card h3 { margin: 36px 0 10px; font-size: 19px; letter-spacing: -.025em; }
.card p { max-width: 34ch; margin: 0; color: var(--muted); line-height: 1.6; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 38px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-block: 70px 58px; }
  .system-art { width: min(100%, 320px); }
  .section-heading { grid-template-columns: 1fr; gap: 12px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: auto; }
  .card h3 { margin-top: 25px; }
}
@media (max-width: 500px) {
  .page-shell { width: min(100% - 32px, 1180px); }
  .site-header { min-height: 94px; }
  .brand { width: 220px; }
  .header-note { display: none; }
  .hero { padding-top: 56px; }
  .overview { padding-bottom: 72px; }
  .site-footer { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }