/* ==========================================================================
   CINNAMOON — styles
   ========================================================================== */
:root {
  --bg0: #07060f;
  --bg1: #0c0a1a;
  --bg2: #151027;
  --plum: #1e1332;
  --brown: #26150d;
  --cream: #ffeccc;
  --frost: #fff8ec;
  --cin: #c57b3f;
  --cin-d: #7b3d1a;
  --cin-dd: #3a1a0b;
  --orange: #ff9d42;
  --orange-2: #ffc078;
  --lav: #b8a4ff;
  --lav-d: #5f4fb0;
  --cyan: #7af4ff;
  --text: #ebe0cf;
  --muted: #9f95a8;
  --line: #3a2c5c;
  --panel: rgba(16, 12, 30, 0.82);

  --f-px: "Press Start 2P", ui-monospace, monospace;
  --f-term: "VT323", ui-monospace, monospace;
  --f-body: "Space Grotesk", system-ui, -apple-system, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  background-color: var(--bg0);
  background-image:
    radial-gradient(1200px 700px at 78% 8%, rgba(95, 79, 176, 0.22), transparent 60%),
    radial-gradient(900px 600px at 10% 40%, rgba(122, 61, 27, 0.18), transparent 65%),
    radial-gradient(1000px 800px at 50% 110%, rgba(58, 26, 11, 0.55), transparent 60%),
    linear-gradient(180deg, #0a0817 0%, #07060f 45%, #0d0810 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--cin-dd); }

.sprite, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------------- ambient layers ---------------- */
#stars, #fx { position: fixed; inset: 0; pointer-events: none; }
#stars { z-index: 0; }
#fx { z-index: 80; }
#drift { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#drift img { position: absolute; left: 0; top: 0; will-change: transform; }

.crt {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
.crt::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  opacity: .06;
  animation: grain 1s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); }
  50% { transform: translate(3%, -5%); } 75% { transform: translate(-2%, -2%); } 100% { transform: translate(0, 0); }
}

.corner-peek {
  position: fixed; left: 10px; bottom: -6px; z-index: 60; width: 48px; height: 48px;
  transform: translateY(70%) rotate(8deg);
  transition: transform .6s cubic-bezier(.3,1.6,.5,1);
  animation: cornerPeek 14s ease-in-out 4s infinite;
  pointer-events: none;
}
.corner-peek.shy { animation: none; transform: translateY(120%); transition-duration: .25s; }
@keyframes cornerPeek {
  0%, 70%, 100% { transform: translateY(70%) rotate(8deg); }
  76%, 90% { transform: translateY(18%) rotate(-6deg); }
}

/* ---------------- pixel border helper ---------------- */
.pxb {
  --b: var(--line);
  --glow: 0 0 0 0 transparent;
  box-shadow:
    3px 0 0 0 var(--b), -3px 0 0 0 var(--b), 0 3px 0 0 var(--b), 0 -3px 0 0 var(--b),
    var(--glow);
}

/* ---------------- toast ---------------- */
#toasts {
  position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translateX(-50%);
  display: grid; gap: 10px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  --b: var(--orange);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #120c1e; color: var(--cream);
  font-family: var(--f-px); font-size: 10px; letter-spacing: .06em; line-height: 1.6;
  box-shadow: 3px 0 0 0 var(--b), -3px 0 0 0 var(--b), 0 3px 0 0 var(--b), 0 -3px 0 0 var(--b), 0 10px 30px rgba(0,0,0,.5), 0 0 26px -4px var(--b);
  animation: toastIn .35s steps(4) both;
}
.toast.out { animation: toastOut .3s steps(3) both; }
.toast--warn { --b: var(--lav); }
.toast--rare { --b: var(--cyan); }
.toast__icon { width: 12px; height: 12px; background: var(--b); flex: none; box-shadow: inset -3px -3px 0 rgba(0,0,0,.3); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--gutter);
  transition: background .3s, padding .3s, border-color .3s;
  border-bottom: 2px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 6, 16, .78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(184,164,255,.12);
  padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-px); font-size: 12px; letter-spacing: .08em; color: var(--cream); }
.brand__moon { width: 32px; height: 32px; animation: spinStep 8s steps(8) infinite; }
@keyframes spinStep { to { transform: rotate(360deg); } }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-family: var(--f-px); font-size: 9px; letter-spacing: .1em; text-decoration: none; color: var(--muted); transition: color .2s; position: relative; }
.nav__links a:hover { color: var(--cream); }
.nav__links a::before { content: "▸"; position: absolute; left: -12px; opacity: 0; color: var(--orange); transition: opacity .2s; }
.nav__links a:hover::before { opacity: 1; }

/* ---------------- buttons ---------------- */
.btn {
  --b: #2a1208;
  --bg: var(--orange);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px; margin: 3px;
  font-family: var(--f-px); font-size: 11px; letter-spacing: .06em; line-height: 1.3;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  background: var(--bg); color: #241006;
  box-shadow:
    3px 0 0 0 var(--b), -3px 0 0 0 var(--b), 0 3px 0 0 var(--b), 0 -3px 0 0 var(--b),
    inset -3px -4px 0 rgba(0,0,0,.22), inset 3px 3px 0 rgba(255,255,255,.35);
  transition: transform .12s steps(2), filter .2s;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .copy:focus-visible, .moon-btn:focus-visible { outline: 2px dashed var(--cyan); outline-offset: 6px; }
.btn--primary { --bg: linear-gradient(180deg, #ffc078 0 50%, #ff9d42 50% 100%); }
.btn--lg { padding: 18px 24px; font-size: 12px; }
.btn--sm { padding: 10px 14px; font-size: 9px; }
.btn--ghost {
  --b: var(--lav-d); --bg: rgba(20, 15, 38, .85);
  color: var(--cream); font-size: 9px; padding: 14px 16px;
  box-shadow: 3px 0 0 0 var(--b), -3px 0 0 0 var(--b), 0 3px 0 0 var(--b), 0 -3px 0 0 var(--b), inset -3px -3px 0 rgba(0,0,0,.35);
}
.btn--ghost:hover { --b: var(--lav); color: #fff; }
.btn--primary:not(.is-soon) { animation: btnGlow 2.4s ease-in-out infinite; }
@keyframes btnGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,157,66,0)); }
  50% { filter: drop-shadow(0 0 14px rgba(255,157,66,.55)); }
}
.soon-tag { display: none; }
.btn.is-soon {
  --bg: repeating-linear-gradient(-45deg, #2a1d3e 0 8px, #22182f 8px 16px);
  --b: #4a3a6e;
  color: #a99cc4; cursor: not-allowed;
}
.btn.is-soon:hover { transform: none; filter: none; }
.btn.is-soon .soon-tag {
  display: inline-block; font-style: normal; font-size: 8px;
  padding: 4px 6px; background: var(--lav); color: #1a1030;
  animation: blink 1.4s steps(1) infinite;
}
.btn--ghost.is-soon { --bg: rgba(20,15,38,.85); color: var(--muted); cursor: pointer; }
.btn--ghost.is-soon::after {
  content: "SOON"; position: absolute; top: -10px; right: -6px;
  font-size: 7px; padding: 3px 4px; background: var(--lav-d); color: var(--cream);
}
.nav .btn.is-soon .soon-tag { display: none; }

@keyframes blink { 50% { opacity: 0; } }

/* ---------------- hero ---------------- */
main { position: relative; z-index: 2; }
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  max-width: var(--maxw); margin: 0 auto;
  padding: 120px var(--gutter) 90px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px;
}
.signal {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-family: var(--f-term); font-size: 19px; letter-spacing: .14em; color: var(--cyan);
  text-shadow: 0 0 12px rgba(122,244,255,.45);
}
.signal__dot { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1s steps(1) infinite; flex: none; }
.title {
  margin: 0; font-family: var(--f-px); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 62px); line-height: 1.05; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fffaf0 0 38%, #ffd9a0 38% 62%, #ff9d42 62% 82%, #c57b3f 82% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #7b3d1a) drop-shadow(0 4px 0 #2a1208) drop-shadow(0 0 28px rgba(255,157,66,.28));
  padding-bottom: 10px;
}
.ticker { margin: 18px 0 0; font-family: var(--f-term); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: .06em; color: var(--cream); line-height: 1.2; }
.tk { color: var(--orange); text-shadow: 0 0 14px rgba(255,157,66,.5); }
.lede { max-width: 30em; margin: 16px 0 0; color: #cfc4d6; font-size: 17px; }

.status { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--f-term); font-size: 19px; letter-spacing: .08em; color: #d9d0ff; }
.status li span { color: var(--lav-d); color: #8c7fd0; }
.caret { display: inline-block; width: 9px; height: 15px; margin-left: 6px; background: var(--orange); vertical-align: -2px; animation: blink 1s steps(1) infinite; }

/* contract card */
.ca-wrap { position: relative; margin-top: 28px; max-width: 610px; }
.ca {
  --b: #5a4593;
  --glow: 0 0 40px -8px rgba(184,164,255,.35);
  position: relative; z-index: 1; margin: 3px;
  padding: 16px 18px; background: linear-gradient(180deg, rgba(30,19,50,.95), rgba(17,12,30,.95));
}
.ca::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); pointer-events: none; }
.ca__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ca__label { font-family: var(--f-px); font-size: 9px; letter-spacing: .14em; color: var(--lav); }
.ca__chip { font-family: var(--f-px); font-size: 7px; letter-spacing: .1em; padding: 4px 6px; color: #1a1030; background: var(--lav); }
.ca__chip.is-live { background: #7dffb0; }
.ca__row { display: flex; align-items: center; gap: 12px; }
.ca__value {
  flex: 1; min-width: 0; padding: 12px 14px; background: #08060f;
  font-family: var(--f-px); font-size: 13px; letter-spacing: .06em; color: var(--orange-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6), inset -2px -2px 0 rgba(184,164,255,.12);
  text-shadow: 0 0 10px rgba(255,157,66,.4);
}
.ca__value.is-live { font-family: var(--f-term); font-size: 21px; line-height: 1.15; letter-spacing: .02em; padding: 8px 12px; color: var(--cream); white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; overflow-wrap: anywhere; user-select: all; }
.copy {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 14px; border: 0; cursor: pointer;
  background: var(--cream); color: #241006;
  font-family: var(--f-px); font-size: 9px; letter-spacing: .08em;
  box-shadow: inset -3px -3px 0 rgba(123,61,27,.35), inset 3px 3px 0 #fff;
  transition: transform .1s steps(2), background .2s;
}
.copy svg { width: 14px; height: 14px; }
.copy:hover { background: #fff; transform: translateY(-1px); }
.copy:active { transform: translateY(1px); }
.copy.done { background: #7dffb0; }

.peek {
  position: absolute; z-index: 0; width: 48px; height: 48px; right: 26px; top: 0;
  transform: translateY(20%);
  transition: transform .5s cubic-bezier(.3,1.7,.5,1);
  animation: peekIdle 11s ease-in-out 2s infinite;
  pointer-events: none;
}
.ca-wrap:hover .peek { animation: none; transform: translateY(-78%) rotate(-8deg); }
@keyframes peekIdle {
  0%, 78%, 100% { transform: translateY(20%); }
  83%, 93% { transform: translateY(-62%) rotate(6deg); }
}

.warn { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; color: #e6c8a2; }
.warn svg { width: 14px; height: 14px; color: var(--orange); flex: none; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 28px; }
.socials { display: flex; flex-wrap: wrap; gap: 14px; }

/* moon stage */
.hero > * { min-width: 0; }
.hero__moon { display: flex; justify-content: center; align-items: center; }
.moon-stage { position: relative; width: min(540px, 44vw); aspect-ratio: 1; }
.halo {
  position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,226,180,.26) 0%, rgba(255,170,100,.12) 32%, rgba(184,164,255,.10) 50%, transparent 68%);
  animation: halo 6s ease-in-out infinite;
  transition: opacity .4s, transform .4s;
}
@keyframes halo { 50% { transform: scale(1.06); opacity: .8; } }
.orbit-ring {
  position: absolute; left: 50%; top: 50%; width: 132%; height: 34%;
  transform: translate(-50%, -50%) rotate(-16deg);
  border-radius: 50%; border: 2px dashed rgba(184,164,255,.18); pointer-events: none;
}
.orbit-ring--2 { width: 112%; height: 62%; transform: translate(-50%, -50%) rotate(28deg); border-color: rgba(255,192,120,.12); border-style: dotted; }
.orbiter { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; will-change: transform; pointer-events: none; }
.moon-par { position: absolute; inset: 7%; z-index: 2; will-change: transform; }
.moon-bob { width: 100%; height: 100%; animation: bob 7s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(10px); } }
.moon-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
#moonCanvas {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 18px rgba(255,226,180,.38)) drop-shadow(0 0 70px rgba(255,157,66,.22));
  transition: filter .5s;
}
.moon-btn:hover #moonCanvas { filter: drop-shadow(0 0 24px rgba(255,236,200,.5)) drop-shadow(0 0 90px rgba(255,157,66,.3)); }
.moon-btn.squish { animation: squish .5s steps(5); }
@keyframes squish { 30% { transform: scale(.93, .9); } 60% { transform: scale(1.05, 1.06); } 100% { transform: none; } }
.moon-msg {
  position: absolute; z-index: 5; left: 50%; top: 2%;
  transform: translate(-50%, 0); opacity: 0; pointer-events: none;
  padding: 10px 14px; background: var(--frost); color: #2a1208;
  font-family: var(--f-px); font-size: 10px; letter-spacing: .06em; white-space: nowrap;
  box-shadow: 3px 0 0 0 #2a1208, -3px 0 0 0 #2a1208, 0 3px 0 0 #2a1208, 0 -3px 0 0 #2a1208, 0 0 30px rgba(255,236,200,.4);
  transition: opacity .2s steps(2), transform .25s steps(3);
}
.moon-msg::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 9px; height: 9px; margin-left: -4px; background: var(--frost); box-shadow: 0 3px 0 #2a1208, 3px 0 0 #2a1208, -3px 0 0 #2a1208; }
.moon-msg.show { opacity: 1; transform: translate(-50%, -14px); }
.moon-hint { position: absolute; bottom: -4%; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--f-term); font-size: 17px; letter-spacing: .2em; color: rgba(184,164,255,.45); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--f-px); font-size: 8px; letter-spacing: .2em; color: var(--muted); text-decoration: none;
}
.scroll-cue svg { width: 12px; height: 12px; animation: bob 1.6s steps(3) infinite; }

/* moon mode (press M) */
body.moon-mode #moonCanvas { filter: brightness(1.25) drop-shadow(0 0 30px rgba(255,248,236,.85)) drop-shadow(0 0 120px rgba(255,190,120,.6)); }
body.moon-mode .halo { opacity: 1; transform: scale(1.25); background: radial-gradient(circle, rgba(255,240,210,.5) 0%, rgba(255,170,100,.24) 34%, rgba(184,164,255,.18) 52%, transparent 70%); }
body.moon-mode .crt { animation: mmFlash 1.6s steps(8); }
@keyframes mmFlash { 0% { background-color: rgba(255,236,200,.18); } 100% { background-color: transparent; } }

/* ---------------- tape ---------------- */
.tape {
  position: relative; z-index: 2; overflow: hidden;
  background: repeating-linear-gradient(-45deg, #ff9d42 0 14px, #1a0f08 14px 28px);
  padding: 3px 0; transform: rotate(-1.2deg); margin: 0 -20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.tape__track {
  display: flex; align-items: center; gap: 26px; width: max-content;
  background: #120b08; padding: 10px 0;
  font-family: var(--f-px); font-size: 10px; letter-spacing: .14em; color: var(--orange-2);
  animation: tape 40s linear infinite;
}
.tape__track i { width: 8px; height: 8px; background: var(--lav); flex: none; }
@keyframes tape { to { transform: translateX(-50%); } }

/* ---------------- sections ---------------- */
.section { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 130px var(--gutter) 40px; scroll-margin-top: 20px; }
.section--last { padding-bottom: 120px; }
.sec-head { margin-bottom: 52px; }
.kicker { margin: 0 0 14px; font-family: var(--f-term); font-size: 19px; letter-spacing: .16em; color: var(--lav); }
.sec-head h2 {
  margin: 0; font-family: var(--f-px); font-weight: 400;
  font-size: clamp(18px, 2.9vw, 32px); line-height: 1.4; letter-spacing: .02em; color: var(--cream);
  text-shadow: 0 3px 0 #5b2a12, 0 0 24px rgba(255,157,66,.22);
}
.sec-head h2::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 18px; background: linear-gradient(90deg, var(--orange) 0 33%, var(--cream) 33% 66%, var(--lav) 66%); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.cards .reveal:nth-child(2) { transition-delay: .12s; }
.cards .reveal:nth-child(3) { transition-delay: .24s; }

/* ---------------- incident ---------------- */
.incident > *, .cards > * { min-width: 0; }
.incident { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.term { --b: #3f3170; --glow: 0 30px 80px -30px rgba(0,0,0,.8); margin: 3px; background: var(--panel); display: flex; flex-direction: column; }
.term__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #1b1430; font-family: var(--f-px); font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.term__dots { display: flex; gap: 6px; }
.term__dots i { width: 9px; height: 9px; background: #4a3a6e; }
.term__dots i:first-child { background: var(--orange); }
.term__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term__rec { color: #ff6b6b; display: flex; align-items: center; gap: 6px; }
.term__rec::before { content: ""; width: 8px; height: 8px; background: #ff6b6b; animation: blink 1.2s steps(1) infinite; }
.stripes { background: repeating-linear-gradient(-45deg, #ff9d42 0 10px, #1a0f08 10px 20px); padding: 3px 0; }
.stripes span { display: block; width: max-content; max-width: 100%; text-align: center; margin: 0 auto; padding: 4px 10px; background: #1a0f08; font-family: var(--f-px); font-size: 8px; letter-spacing: .14em; color: var(--orange-2); }
.term__body { flex: 1; padding: 28px 26px 22px; font-family: var(--f-term); font-size: clamp(22px, 2.3vw, 28px); line-height: 1.35; color: #e9e2ff; min-height: 290px; }
.tl { margin: 0 0 10px; text-shadow: 0 0 10px rgba(184,164,255,.35); }
.tl::before { content: "> "; color: var(--orange); }
.tl--hot { color: var(--orange-2); text-shadow: 0 0 14px rgba(255,157,66,.55); }
.tl .cur { display: inline-block; width: .5em; height: .9em; background: var(--cream); vertical-align: -.1em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.term__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 2px dashed rgba(184,164,255,.14); font-family: var(--f-term); font-size: 16px; letter-spacing: .12em; color: var(--muted); }

.scope { --b: #3f3170; margin: 3px; background: var(--panel); padding: 16px 18px 18px; position: relative; display: flex; flex-direction: column; }
.scope__head { display: flex; justify-content: space-between; font-family: var(--f-px); font-size: 9px; letter-spacing: .1em; color: var(--lav); margin-bottom: 14px; }
.scope__count { color: var(--cyan); }
.scope__radar { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; margin: 0 auto 16px; }
#radar { width: 100%; height: 100%; }
.readout { margin: 0; display: grid; gap: 6px; font-family: var(--f-term); font-size: 18px; letter-spacing: .06em; }
.readout div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed rgba(184,164,255,.12); padding-bottom: 4px; }
.readout dt { color: var(--muted); }
.readout dd { margin: 0; color: var(--cream); text-align: right; display: flex; align-items: center; gap: 8px; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 4px; background: var(--cyan); animation: bar 1.4s steps(3) infinite; }
.bars i:nth-child(1) { height: 4px; } .bars i:nth-child(2) { height: 6px; animation-delay: .1s; }
.bars i:nth-child(3) { height: 9px; animation-delay: .2s; } .bars i:nth-child(4) { height: 11px; animation-delay: .3s; }
.bars i:nth-child(5) { height: 14px; animation-delay: .4s; }
@keyframes bar { 50% { opacity: .3; } }
.whisper {
  margin: 14px 0 0; text-align: center; font-family: var(--f-px); font-size: 7px; letter-spacing: .2em;
  color: var(--lav); opacity: .06; transition: opacity 2.5s ease; user-select: text;
}
.whisper:hover { opacity: .75; transition-duration: .8s; }

/* ---------------- cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.card-wrap { position: relative; padding-top: 22px; }
.peek--card { top: 22px; right: 22px; width: 32px; height: 32px; animation-duration: 13s; }
.card-wrap:nth-child(2) .peek--card { animation-delay: 5s; right: auto; left: 30px; }
.card-wrap:nth-child(3) .peek--card { animation-delay: 9s; }
.card-wrap:hover .peek--card { animation: none; transform: translateY(-82%) rotate(-10deg); }
.card {
  --b: #3f3170; --accent: var(--orange);
  position: relative; z-index: 1; margin: 3px; height: calc(100% - 6px);
  padding: 22px 24px 28px; background: var(--panel);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.card:hover { transform: translateY(-6px); --b: var(--accent); --glow: 0 0 46px -10px var(--accent); }
.card--meme { --accent: var(--orange); background: linear-gradient(180deg, rgba(58,26,11,.55), rgba(16,12,30,.9)); }
.card--sol { --accent: #9b7bff; background: linear-gradient(180deg, rgba(60,30,110,.45), rgba(10,30,40,.55) 70%, rgba(16,12,30,.9)); }
.card--sig { --accent: var(--cyan); background: linear-gradient(180deg, rgba(20,60,70,.35), rgba(16,12,30,.9)); }
.card__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-px); font-size: 8px; letter-spacing: .12em; }
.card__no { color: var(--accent); }
.card__tag { padding: 4px 6px; background: rgba(255,255,255,.06); color: var(--muted); }
.card__sprite { position: relative; width: 128px; height: 128px; margin: 22px auto 18px; }
.card__sprite canvas { position: relative; z-index: 1; width: 128px; height: 128px; }
.card--meme canvas { animation: hop 1.6s cubic-bezier(.3,0,.4,1) infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.08, .9); } 45% { transform: translateY(-18px) scale(.96, 1.05); } 80% { transform: translateY(0) scale(1.04, .95); } }
.card--sol canvas { animation: jitter .18s steps(2) infinite; }
@keyframes jitter { 50% { transform: translate(1px, -1px); } }
.card--sig canvas { animation: bob 4s ease-in-out infinite; }
.card__shadow { position: absolute; left: 50%; bottom: 2px; width: 60px; height: 8px; margin-left: -30px; background: rgba(0,0,0,.5); filter: blur(1px); }
.card--sol .card__shadow { background: rgba(20,241,149,.25); }
.waves { position: absolute; left: 50%; top: 10px; width: 0; height: 0; }
.waves i {
  position: absolute; left: -12px; top: -12px; width: 24px; height: 24px;
  border: 3px solid var(--cyan); border-radius: 50%; opacity: 0;
  animation: wave 2.4s steps(8) infinite;
}
.waves i:nth-child(2) { animation-delay: .8s; } .waves i:nth-child(3) { animation-delay: 1.6s; }
@keyframes wave { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.card h3 { margin: 0 0 10px; font-family: var(--f-px); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--cream); }
.card p { margin: 0; color: #c9bfd2; font-size: 16px; }

/* ---------------- console ---------------- */
.console { position: relative; max-width: 920px; margin: 0 auto; }
.peek--console { left: 50%; right: auto; top: 0; width: 64px; height: 64px; margin-left: -32px; animation-duration: 9s; }
.console:hover .peek--console { animation: none; transform: translateY(-76%) rotate(6deg); }
.console__bezel {
  --b: #2a1208;
  position: relative; z-index: 1; margin: 3px; padding: 28px;
  background: linear-gradient(180deg, #6b3a1f, #4a2412 40%, #3a1a0b);
  box-shadow:
    3px 0 0 0 var(--b), -3px 0 0 0 var(--b), 0 3px 0 0 var(--b), 0 -3px 0 0 var(--b),
    inset 4px 4px 0 rgba(255,200,150,.18), inset -4px -4px 0 rgba(0,0,0,.35),
    0 0 120px -20px rgba(255,157,66,.35), 0 0 80px -20px rgba(122,244,255,.25);
}
.bolt { position: absolute; width: 8px; height: 8px; background: #c9a07a; box-shadow: inset -2px -2px 0 #6b3a1f; }
.bolt:nth-child(1) { left: 10px; top: 10px; } .bolt:nth-child(2) { right: 10px; top: 10px; }
.bolt:nth-child(3) { left: 10px; bottom: 10px; } .bolt:nth-child(4) { right: 10px; bottom: 10px; }
.console__screen {
  position: relative; overflow: hidden;
  padding: 26px clamp(18px, 4vw, 48px) 36px;
  background: radial-gradient(ellipse at 50% 0%, rgba(122,244,255,.12), transparent 60%), radial-gradient(ellipse at 50% 120%, rgba(184,164,255,.18), transparent 60%), #070914;
  box-shadow: inset 0 0 0 3px #0a0a12, inset 0 0 60px rgba(122,244,255,.12);
  text-align: center;
}
.console__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(122,244,255,.04) 0 2px, transparent 2px 4px); animation: roll 8s linear infinite; }
@keyframes roll { to { background-position: 0 200px; } }
.console__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: var(--f-px); font-size: 8px; letter-spacing: .12em; color: var(--cyan); padding-bottom: 14px; border-bottom: 2px dashed rgba(122,244,255,.18); text-align: left; }
.console__bar span { display: flex; align-items: center; gap: 8px; }
.rec-dot { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blink .9s steps(1) infinite; }
.console__big {
  margin: 34px auto 0; max-width: 18em;
  font-family: var(--f-px); font-size: clamp(16px, 2.6vw, 28px); line-height: 1.55; color: var(--cream);
  text-shadow: 0 0 18px rgba(122,244,255,.35), 0 3px 0 #2c2357;
  animation: flicker 6s steps(1) infinite;
}
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .55; } }
.console__sub { margin: 18px 0 0; font-family: var(--f-term); font-size: 23px; letter-spacing: .06em; color: #bfeff5; }
.ca--console { max-width: 620px; margin: 32px auto 0; text-align: left; --b: #2a5d6a; --glow: 0 0 40px -8px rgba(122,244,255,.35); background: rgba(8,16,24,.9); }
.ca--console .ca__label { color: var(--cyan); }
.cta--center { justify-content: center; margin-top: 30px; }

.console__deck {
  position: relative; margin: 0 26px; padding: 18px 28px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #2b1a2f, #1a0f1d);
  box-shadow: 3px 0 0 0 #120810, -3px 0 0 0 #120810, 0 3px 0 0 #120810, inset 0 4px 0 rgba(255,255,255,.06);
}
.deck__label { font-family: var(--f-px); font-size: 7px; letter-spacing: .14em; color: var(--muted); text-align: center; }
.stick { position: relative; width: 40px; height: 30px; }
.stick::before { content: ""; position: absolute; left: 8px; bottom: 0; width: 24px; height: 8px; background: #0b0710; }
.stick::after { content: ""; position: absolute; left: 18px; bottom: 6px; width: 4px; height: 16px; background: #8b8197; }
.stick i { position: absolute; left: 11px; top: -6px; width: 18px; height: 18px; background: #ff5f6d; box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.35); z-index: 1; animation: wiggle 3s steps(2) infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(-3px); } 90% { transform: translateX(3px); } }
.pads { display: flex; gap: 12px; }
.pad { width: 26px; height: 26px; border: 0; padding: 0; box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.4); }
.pad--m { background: var(--orange); font-family: var(--f-px); font-size: 9px; color: #2a1208; cursor: pointer; }
.pad--m:active { transform: translateY(2px); }
.pad--b { background: var(--cyan); }

/* ---------------- footer ---------------- */
.footer { position: relative; z-index: 2; text-align: center; padding: 50px var(--gutter) 60px; border-top: 2px dashed rgba(184,164,255,.12); background: linear-gradient(180deg, transparent, rgba(38,21,13,.4)); }
.footer__moon { width: 32px; height: 32px; margin: 0 auto 18px; }
.footer__disc { margin: 0 auto; max-width: 38em; color: var(--muted); font-size: 14px; }
.footer__copy { margin: 14px 0 0; font-family: var(--f-px); font-size: 9px; letter-spacing: .14em; color: var(--cream); }

/* ---------------- flyer ---------------- */
.flyer { position: fixed; left: 0; top: 0; z-index: 65; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; background: none; cursor: pointer; }
.flyer img { width: 48px; height: 48px; filter: drop-shadow(0 0 10px rgba(122,244,255,.8)) drop-shadow(0 0 22px rgba(255,236,200,.5)); }

/* ---------------- responsive ---------------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 96px; gap: 8px; text-align: left; }
  .hero__moon { order: -1; }
  .moon-stage { width: min(340px, 74vw); }
  .incident { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 26px; }
  .scroll-cue { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav__links { display: none; }
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .brand { font-size: 10px; }
  .brand__moon { width: 28px; height: 28px; }
  .signal { font-size: 16px; letter-spacing: .08em; align-items: flex-start; }
  .signal__dot { margin-top: 6px; }
  .status { font-size: 17px; gap: 2px 16px; }
  .ca__row { flex-direction: column; align-items: stretch; }
  .ca__value { font-size: 11px; text-align: center; }
  .ca__value.is-live { font-size: 19px; }
  .copy { justify-content: center; }
  .cta { flex-direction: column; align-items: stretch; }
  .btn--lg { width: calc(100% - 6px); }
  .socials { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .socials .btn { padding-left: 8px; padding-right: 8px; font-size: 8px; min-width: 0; white-space: normal; text-align: center; }
  .section { padding-top: 96px; }
  .sec-head { margin-bottom: 36px; }
  .term__body { padding: 20px 18px; min-height: 250px; font-size: 21px; }
  .stripes span { font-size: 6px; }
  .console__bezel { padding: 14px; }
  .console__deck { margin: 0 10px; padding: 14px 16px; }
  .deck__label { font-size: 6px; }
  .moon-msg { font-size: 8px; }
  .tape__track { font-size: 8px; }
}

@media (max-width: 340px) {
  .socials { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}