:root {
  --void: #01040f;
  --deep: #020a22;
  --blue: #075cff;
  --cyan: #36dfff;
  --ice: #d9f5ff;
  --muted: #6d83a8;
  --line: rgba(85, 171, 255, .18);
  --display: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--void); }
body {
  min-height: 100vh; margin: 0; color: var(--ice); overflow-x: hidden;
  background:
    radial-gradient(circle at 70% 46%, rgba(0, 74, 190, .22), transparent 35%),
    radial-gradient(circle at 20% 0%, rgba(24, 76, 160, .12), transparent 34%),
    linear-gradient(145deg, #01030b 0%, #02091c 55%, #01040f 100%);
  font-family: var(--display); letter-spacing: .02em;
}

#neural-canvas { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .5; z-index: 0; }
.noise { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: .045; 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='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.scanline { position: fixed; inset: -30% 0 auto; height: 22%; z-index: 7; pointer-events: none; background: linear-gradient(transparent, rgba(38, 211, 255, .035), transparent); animation: scan 10s linear infinite; }

.topbar { position: relative; z-index: 10; height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(25px, 5vw, 82px); border-bottom: 1px solid var(--line); }
.sigil { color: var(--ice); text-decoration: none; font: 700 12px/1 var(--mono); letter-spacing: .32em; }
.sigil span { display: inline-block; color: var(--cyan); font-size: 22px; margin-right: 12px; filter: drop-shadow(0 0 10px var(--cyan)); }
.top-status { color: #8fa7c7; font: 10px/1 var(--mono); letter-spacing: .24em; }
.top-status i { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: #52ffba; box-shadow: 0 0 12px #52ffba; animation: pulse 2s ease-in-out infinite; }

.hero { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr); min-height: calc(100vh - 165px); padding: clamp(60px, 9vh, 120px) clamp(25px, 8vw, 138px) 70px; align-items: center; }
.copy { position: relative; max-width: 820px; }
.eyebrow { margin: 0 0 30px; color: #6d8ab8; font: 10px/1.4 var(--mono); letter-spacing: .28em; }
.eyebrow span { color: var(--cyan); margin-right: 14px; }
h1 { position: relative; margin: 0; font-size: clamp(54px, 7.4vw, 128px); font-weight: 800; line-height: .78; letter-spacing: -.055em; text-transform: uppercase; text-shadow: 0 0 70px rgba(0, 91, 255, .18); }
h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(116, 211, 255, .95); filter: drop-shadow(0 0 17px rgba(0, 176, 255, .4)); }
.ghost { position: absolute; left: 0; top: -4px; color: transparent; -webkit-text-stroke: 1px rgba(33, 121, 255, .08); transform: translate(7px, -9px); z-index: -1; }
.lead { margin: 38px 0; color: #8fa1bc; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.65; letter-spacing: .09em; text-transform: uppercase; }
.identity { display: inline-flex; flex-direction: column; gap: 8px; padding: 16px 22px; border: 1px solid var(--line); border-left-color: var(--cyan); background: rgba(0, 13, 40, .62); backdrop-filter: blur(12px); box-shadow: inset 0 0 30px rgba(0, 84, 255, .04); }
.identity-label { color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .24em; }
.identity strong { color: #e9fbff; font: 500 clamp(14px, 1.4vw, 20px)/1.2 var(--mono); letter-spacing: .06em; }
.telemetry { display: flex; gap: 36px; margin-top: 38px; }
.telemetry div { min-width: 84px; }
.telemetry span, .telemetry b { display: block; font: 9px/1.5 var(--mono); letter-spacing: .18em; }
.telemetry span { color: #4c668e; }
.telemetry b { color: #9eefff; font-weight: 400; }

.artifact { position: relative; justify-self: center; width: min(38vw, 580px); aspect-ratio: 1; display: grid; place-items: center; }
.halo { position: absolute; border-radius: 50%; border: 1px solid rgba(60, 158, 255, .18); }
.halo::before, .halo::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.halo-a { inset: 2%; border-style: dashed; animation: rotate 38s linear infinite; }
.halo-a::before { left: 14%; top: 13%; }.halo-a::after { right: 6%; bottom: 27%; }
.halo-b { inset: 13%; border-color: rgba(34, 116, 255, .3); animation: rotate-reverse 22s linear infinite; }
.halo-b::before { right: 17%; top: 8%; }.halo-b::after { left: 0; bottom: 46%; }
.halo-c { inset: 28%; border-color: rgba(73, 215, 255, .26); box-shadow: 0 0 80px rgba(0, 90, 255, .07), inset 0 0 65px rgba(0, 90, 255, .08); animation: breathe 4s ease-in-out infinite; }
.core { position: relative; width: 24%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(130, 230, 255, .55); background: radial-gradient(circle, rgba(76, 220, 255, .28), rgba(0, 68, 189, .15) 45%, rgba(0, 5, 20, .9) 72%); box-shadow: 0 0 35px rgba(36, 183, 255, .45), 0 0 120px rgba(0, 80, 255, .23); }
.core-glow { position: absolute; inset: 35%; border-radius: 50%; background: #d5faff; box-shadow: 0 0 18px #fff, 0 0 50px var(--cyan), 0 0 90px var(--blue); animation: pulse 2.4s ease-in-out infinite; }
.core-mark { z-index: 2; color: #fff; font: 700 14px/1 var(--mono); letter-spacing: .15em; mix-blend-mode: overlay; }
.orbit { position: absolute; inset: -50%; border: 1px solid rgba(73, 210, 255, .3); border-radius: 50%; transform: rotateX(66deg); }
.orbit-two { inset: -87%; transform: rotateY(67deg); }
.coordinates { position: absolute; color: #47668e; font: 8px/1.5 var(--mono); letter-spacing: .15em; }
.coord-a { top: 12%; left: 2%; }.coord-b { right: 0; bottom: 15%; text-align: right; }
.artifact-caption { position: absolute; bottom: 2%; color: #6884a9; font: 8px/1 var(--mono); letter-spacing: .25em; }
.artifact-caption span { display: inline-block; width: 32px; height: 1px; margin: 0 10px 3px 0; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }

.rail { position: fixed; right: 22px; top: 50%; z-index: 3; display: flex; align-items: center; gap: 15px; color: #3d5578; font: 7px/1 var(--mono); letter-spacing: .25em; transform: translateY(-50%) rotate(90deg); transform-origin: center; }
.rail i { width: 22px; height: 1px; background: #234168; }
footer { position: relative; z-index: 10; min-height: 73px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(25px, 5vw, 82px); border-top: 1px solid var(--line); color: #445c7d; font: 8px/1.4 var(--mono); letter-spacing: .22em; }
footer nav { display: flex; gap: 28px; }
footer a { color: #7691b5; text-decoration: none; transition: color .25s, text-shadow .25s; }
footer a:hover { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }

.legal-body { overflow: auto; }
.legal { position: relative; z-index: 2; max-width: 1050px; margin: 0 auto; padding: 90px 32px 110px; }
.legal h1 { font-size: clamp(55px, 9vw, 120px); line-height: .9; margin-bottom: 28px; }
.legal-intro { color: #7185a6; font: 12px/1.7 var(--mono); }
.legal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 60px; background: var(--line); border: 1px solid var(--line); }
.legal-grid section { min-height: 180px; padding: 30px; background: rgba(2, 9, 27, .94); }
.legal h2 { margin: 0 0 18px; color: var(--cyan); font: 10px/1.3 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.legal p, .legal address { color: #9aacc5; font: normal 14px/1.8 var(--display); }
.legal strong { color: #e4f8ff; }
.legal a { color: #8cecff; }
.legal-copy { margin-top: 1px; padding: 38px 30px; border: 1px solid var(--line); background: rgba(2, 9, 27, .8); }
.legal-copy h2:not(:first-child) { margin-top: 35px; }
.back { display: inline-block; margin-top: 48px; padding: 14px 18px; color: var(--cyan); border: 1px solid rgba(54, 223, 255, .35); font: 9px/1 var(--mono); letter-spacing: .2em; text-decoration: none; }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotate-reverse { to { transform: rotate(-360deg); } }
@keyframes breathe { 50% { transform: scale(1.045); opacity: .65; } }
@keyframes pulse { 50% { opacity: .42; transform: scale(.82); } }
@keyframes scan { to { transform: translateY(650%); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .artifact { width: min(88vw, 520px); grid-row: 1; margin-bottom: 40px; }
  .copy { grid-row: 2; }
  .rail { display: none; }
  h1 { font-size: clamp(52px, 15vw, 95px); }
}
@media (max-width: 600px) {
  .topbar { height: 74px; }
  .top-status { font-size: 8px; }
  .hero { padding: 45px 22px 60px; }
  .artifact { width: 96vw; margin-left: -20px; }
  .telemetry { gap: 18px; flex-wrap: wrap; }
  .telemetry div { min-width: 70px; }
  footer { padding: 22px; gap: 20px; flex-direction: column; align-items: flex-start; }
  .legal { padding: 65px 20px 80px; }
  .legal-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #neural-canvas, .scanline { display: none; }
}