:root {
  color-scheme: dark;
  --bg: #020309;
  --bg-2: #05070d;
  --bg-3: #080b12;
  --panel: rgba(7, 11, 18, .76);
  --panel-strong: rgba(8, 12, 20, .94);
  --panel-soft: rgba(255, 255, 255, .035);
  --line: rgba(204, 230, 255, .15);
  --line-strong: rgba(0, 217, 255, .42);
  --text: #f2f8ff;
  --text-ice: #eaf6ff;
  --muted: #91a8b8;
  --muted-strong: #adc2d1;
  --cyan: #00d9ff;
  --blue: #2678ff;
  --violet: #9b72ff;
  --gold: #ffc400;
  --gold-soft: #ffd84d;
  --paper: #e2c48f;
  --paper-ink: #1f2d2c;
  --paper-soft: #fbefd6;
  --font-display: "Barlow Condensed", Impact, "Arial Narrow", system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(0, 217, 255, .014) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(0deg, rgba(0, 217, 255, .011) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(0, 217, 255, .052) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(0deg, rgba(255, 196, 0, .028) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(135deg, rgba(38, 120, 255, .12), transparent 28%, rgba(255, 196, 0, .04) 58%, transparent 76%),
    linear-gradient(180deg, #010107 0%, #030509 46%, #010107 100%);
  color: var(--text);
  font-family: var(--font-body);
  letter-spacing: 0;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(0, 217, 255, .055) 18.08%, transparent 18.2% 48%, rgba(255, 196, 0, .035) 48.08%, transparent 48.2%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: .58;
  z-index: 20;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

p {
  color: #b9cbd7;
  line-height: 1.58;
}

code {
  color: var(--gold-soft);
  font-family: var(--font-mono);
}

.site-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(0, 217, 255, .07) 42.15%, transparent 42.45% 68%, rgba(255, 196, 0, .055) 68.15%, transparent 68.35%),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(255, 255, 255, .018) 11px 12px);
  opacity: .56;
  animation: scanDrift 9s linear infinite;
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
}

.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 4;
}

.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 217, 255, .74), rgba(255, 196, 0, .56), transparent);
  opacity: .52;
}

.brand {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 217, 255, .25));
}

.brand div {
  line-height: 1;
}

.brand span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bed0db;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid transparent;
  color: var(--muted-strong);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-color: rgba(0, 217, 255, .24);
  background: rgba(0, 217, 255, .055);
  color: var(--gold-soft);
  box-shadow: inset 0 -1px 0 rgba(255, 196, 0, .25);
}

.signal {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(0, 217, 255, .24);
  background: rgba(0, 217, 255, .055);
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.signal i {
  width: 8px;
  height: 8px;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), 0 0 26px rgba(0, 217, 255, .42);
  animation: signalPulse 1.8s ease-in-out infinite;
}

.hero {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: 42px;
  align-items: center;
  padding: 48px 0 68px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.kicker,
.eyebrow {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.kicker {
  margin-bottom: 18px;
}

h1 {
  max-width: 840px;
  margin-bottom: 24px;
  font-size: clamp(62px, 9vw, 132px);
  line-height: .78;
}

h1 span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 248, 255, .56);
}

.lead {
  max-width: 650px;
  color: #bfd0dc;
  font-size: 18px;
  line-height: 1.62;
}

.cta-row,
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button,
.store-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0 18px;
  border: 1px solid rgba(242, 248, 255, .2);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.button::before,
.store-button::before,
.link-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 255, .16) 48%, transparent 64% 100%);
  transform: translateX(-110%);
  transition: transform .48s ease;
}

.button:hover,
.store-button:hover,
.link-list a:hover {
  border-color: rgba(0, 217, 255, .58);
  box-shadow: 0 0 30px rgba(0, 217, 255, .16), inset 0 0 20px rgba(0, 217, 255, .045);
  transform: translateY(-1px);
}

.button:hover::before,
.store-button:hover::before,
.link-list a:hover::before {
  transform: translateX(110%);
}

.button.primary {
  border-color: rgba(0, 217, 255, .72);
  background: linear-gradient(90deg, rgba(0, 217, 255, .18), rgba(38, 120, 255, .16));
  box-shadow: 0 0 28px rgba(0, 217, 255, .16);
}

.button.gold {
  border-color: rgba(255, 196, 0, .72);
  background: rgba(255, 196, 0, .12);
  color: var(--gold-soft);
}

.button.ghost {
  border-color: rgba(255, 196, 0, .32);
}

.operator {
  min-height: 620px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.living-operator::before {
  content: "";
  position: absolute;
  width: min(86%, 620px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(0, 217, 255, .22), transparent 33%),
    conic-gradient(from 180deg, transparent, rgba(0, 217, 255, .36), transparent, rgba(255, 196, 0, .24), transparent);
  filter: blur(26px);
  opacity: .58;
  animation: auraBreathe 5.8s ease-in-out infinite;
  z-index: -1;
}

.hero-orbit,
.halo,
.halo::after {
  position: absolute;
  content: "";
  aspect-ratio: 1;
  border: 1px solid rgba(0, 217, 255, .36);
  box-shadow: 0 0 70px rgba(0, 217, 255, .12);
}

.hero-orbit {
  width: min(98%, 680px);
  background:
    linear-gradient(90deg, rgba(0, 217, 255, .18) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(255, 196, 0, .08) 1px, transparent 1px) 0 0 / 24px 24px;
  mask-image: radial-gradient(circle, transparent 0 38%, black 39% 54%, transparent 55%);
  opacity: .82;
  animation: slowRotate 24s linear infinite;
}

.halo {
  width: min(92%, 640px);
  transform: rotate(45deg);
  border-color: rgba(255, 196, 0, .42);
  animation: haloTilt 8s ease-in-out infinite;
}

.halo::after {
  inset: 18%;
  border-color: rgba(0, 217, 255, .36);
  transform: rotate(-45deg);
}

.crybaby-face {
  position: relative;
  z-index: 2;
  width: min(76vw, 430px);
  filter: drop-shadow(0 28px 70px rgba(0, 0, 0, .72)) drop-shadow(0 0 34px rgba(0, 217, 255, .25));
}

.cyber-face {
  animation: logoFloat 4.8s ease-in-out infinite, glitchFlicker 11s linear infinite;
}

.hero-particles span {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(0, 217, 255, .72);
  background: rgba(0, 217, 255, .12);
  box-shadow: 0 0 18px rgba(0, 217, 255, .4);
  animation: fragmentDrift 7s ease-in-out infinite;
}

.hero-particles span:nth-child(1) { left: 10%; top: 28%; animation-delay: -.8s; }
.hero-particles span:nth-child(2) { right: 18%; top: 18%; border-color: rgba(255, 196, 0, .7); animation-delay: -2.1s; }
.hero-particles span:nth-child(3) { right: 8%; top: 58%; animation-delay: -3.6s; }
.hero-particles span:nth-child(4) { left: 24%; bottom: 16%; border-color: rgba(255, 196, 0, .64); animation-delay: -1.4s; }
.hero-particles span:nth-child(5) { left: 3%; top: 51%; animation-delay: -4.2s; }
.hero-particles span:nth-child(6) { right: 32%; bottom: 8%; animation-delay: -2.8s; }

.lab-note {
  position: absolute;
  max-width: 224px;
  padding: 12px 14px;
  border: 1px solid rgba(242, 248, 255, .16);
  background: rgba(2, 3, 9, .88);
  color: #dceaf2;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  text-transform: uppercase;
  z-index: 4;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.lab-note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 10px;
}

.note-a {
  left: 0;
  top: 18%;
}

.note-b {
  right: 0;
  bottom: 18%;
  border-color: rgba(0, 217, 255, .3);
}

.note-c {
  left: 12%;
  bottom: 7%;
  border-color: rgba(255, 196, 0, .34);
}

.manifesto-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(0, 217, 255, .22);
  background:
    linear-gradient(90deg, rgba(0, 217, 255, .12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
    rgba(3, 6, 12, .84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 28px 90px rgba(0, 0, 0, .22);
}

.manifesto-strip h2 {
  margin: 10px 0 0;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .88;
}

.manifesto-strip > p {
  margin: 0;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.7vw, 48px);
  font-weight: 900;
  line-height: .94;
  text-transform: uppercase;
}

.truth-pills,
.module-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.truth-pills span,
.module-row span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .035);
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.band {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.lab-stack {
  position: relative;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.section-head h2 {
  max-width: 780px;
  margin-bottom: 0;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: .88;
}

.section-head p {
  max-width: 460px;
  margin-bottom: 0;
  color: var(--muted);
}

.project-grid,
.feature-grid,
.press-grid,
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.project-card,
.feature-card,
.press-card,
.copy-block,
.console-module,
.paper-console,
.signal-card,
.link-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.project-card {
  overflow: hidden;
}

.project-card img {
  width: 100%;
  aspect-ratio: 1 / .74;
  object-fit: cover;
  background: #0a0f18;
}

.project-card .body,
.feature-card,
.press-card,
.copy-block,
.console-module {
  padding: 18px;
}

.project-card h3,
.feature-card h3,
.press-card h3,
.copy-block h2,
.console-module h3 {
  margin: 12px 0 10px;
  font-size: 24px;
  line-height: .98;
}

.project-card p,
.feature-card p,
.press-card p,
.copy-block p,
.legal p,
.legal li {
  color: #b2c4d0;
}

.paper-console {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255, 196, 0, .12), transparent 34%),
    rgba(7, 11, 18, .78);
}

.paper-console-media {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 196, 0, .18), rgba(0, 217, 255, .08)),
    var(--paper);
}

.paper-console-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paper-console-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 44px);
}

.paper-console-copy h3 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(36px, 5vw, 66px);
  line-height: .88;
}

.paper-console-copy p {
  max-width: 540px;
  margin-bottom: 0;
}

.module-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.console-module {
  min-height: 230px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    rgba(6, 10, 17, .84);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.console-module::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 217, 255, .75), transparent);
  opacity: .5;
}

.console-module:hover {
  border-color: rgba(0, 217, 255, .38);
  box-shadow: 0 0 38px rgba(0, 217, 255, .1);
  transform: translateY(-2px);
}

.console-module span {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
}

.console-module p {
  margin-bottom: 0;
  font-size: 14px;
}

.signal-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: stretch;
}

.signal-copy {
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid rgba(255, 196, 0, .22);
  background:
    linear-gradient(135deg, rgba(255, 196, 0, .12), transparent 34%),
    rgba(7, 11, 18, .72);
}

.signal-copy h2 {
  max-width: 820px;
  margin-bottom: 18px;
  font-size: clamp(38px, 6vw, 84px);
  line-height: .86;
}

.signal-copy p {
  max-width: 680px;
  margin-bottom: 0;
}

.signal-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 20px;
  border-color: rgba(0, 217, 255, .26);
}

.signal-card img {
  width: min(100%, 150px);
  align-self: center;
  filter: drop-shadow(0 0 34px rgba(0, 217, 255, .22));
}

.signal-card .signal-mark {
  border-radius: 50%;
}

.signal-card p {
  margin-bottom: 0;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.product-hero {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(330px, .72fr);
  gap: 42px;
  align-items: center;
  padding: 36px 0 52px;
}

.product-copy {
  min-width: 0;
}

.product-copy h1 {
  color: var(--paper-soft);
}

.product-copy h1 span {
  -webkit-text-stroke-color: rgba(255, 196, 0, .62);
}

.paper-visual {
  min-height: 640px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 196, 0, .26);
  background:
    linear-gradient(135deg, rgba(255, 248, 230, .55), transparent 34%),
    linear-gradient(135deg, rgba(255, 196, 0, .22), rgba(0, 217, 255, .08)),
    var(--paper);
}

.paper-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(90, 63, 35, .045) 0 2px, transparent 2px 8px);
  opacity: .6;
}

.paper-visual video,
.paper-visual img {
  position: relative;
  z-index: 1;
}

.paper-visual video {
  width: min(72%, 420px);
  border: 1px solid rgba(31, 45, 44, .24);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
}

.paper-visual .body-art {
  width: min(78%, 500px);
  filter: drop-shadow(0 22px 36px rgba(52, 35, 18, .28));
}

.store-button {
  min-width: 156px;
  min-height: 54px;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 16px;
  border-color: rgba(255, 196, 0, .45);
  background: rgba(255, 196, 0, .09);
  font-size: 13px;
}

.store-button span {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
}

.split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 16px;
}

.facts {
  display: grid;
  gap: 12px;
}

.fact-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.fact-row strong {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.fact-row span {
  color: #b7c8d3;
}

.link-stack {
  min-height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  padding: 48px 0;
}

.link-card {
  width: min(540px, 100%);
  padding: 28px;
  text-align: center;
}

.link-card img {
  width: 116px;
  margin: 0 auto 18px;
}

.link-card h1 {
  margin-bottom: 12px;
  font-size: clamp(42px, 8vw, 74px);
}

.link-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.link-list a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.legal {
  max-width: 820px;
  padding: 54px 0 80px;
}

.legal h1 {
  font-size: clamp(42px, 6vw, 84px);
}

.footer {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.footer a {
  color: var(--muted-strong);
  text-decoration: none;
}

.footer a:hover {
  color: var(--gold-soft);
}

@keyframes scanDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-54px, 54px, 0); }
}

@keyframes signalPulse {
  0%, 100% { opacity: .72; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes auraBreathe {
  0%, 100% { opacity: .44; transform: scale(.96); }
  50% { opacity: .72; transform: scale(1.04); }
}

@keyframes slowRotate {
  to { transform: rotate(360deg); }
}

@keyframes haloTilt {
  0%, 100% { transform: rotate(43deg) scale(.98); }
  50% { transform: rotate(48deg) scale(1.02); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes fragmentDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .4; }
  50% { transform: translate3d(14px, -18px, 0) rotate(90deg); opacity: 1; }
}

@media (max-width: 1100px) {
  .module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 0;
  }

  .signal {
    display: none;
  }

  .hero,
  .product-hero,
  .split,
  .paper-console,
  .signal-field {
    grid-template-columns: 1fr;
  }

  .operator,
  .paper-visual {
    min-height: 520px;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-grid,
  .feature-grid,
  .press-grid {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 640px) {
  * {
    max-width: 100%;
  }

  .shell {
    width: 100vw;
    margin: 0;
    padding: 0 12px;
    overflow: hidden;
  }

  .brand {
    width: 100%;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .nav-links a {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 8px;
  }

  .hero,
  .product-hero {
    width: calc(100vw - 24px);
    min-height: auto;
    padding-top: 34px;
    gap: 28px;
    overflow: hidden;
  }

  .hero-copy,
  .product-copy,
  .lead,
  .cta-row,
  .store-buttons {
    width: calc(100vw - 24px);
  }

  h1 {
    max-width: 100%;
    font-size: 54px;
    line-height: .86;
    overflow-wrap: anywhere;
  }

  .product-copy h1 {
    font-size: 46px;
  }

  .lead {
    width: min(100%, 340px);
    max-width: 340px;
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .cta-row,
  .store-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button,
  .store-button {
    width: 100%;
    min-height: 48px;
  }

  .operator,
  .paper-visual {
    width: calc(100vw - 24px);
    min-height: 430px;
  }

  .crybaby-face {
    width: min(92vw, 380px);
  }

  .lab-note {
    display: none;
  }

  .manifesto-strip,
  .signal-copy,
  .signal-card {
    padding: 18px;
  }

  .manifesto-strip h2,
  .section-head h2,
  .signal-copy h2,
  .paper-console-copy h3 {
    font-size: 42px;
    line-height: .9;
  }

  .manifesto-strip > p {
    font-size: 31px;
  }

  .band {
    padding: 46px 0;
  }

  .paper-console-media {
    min-height: 300px;
  }

  .paper-console-copy {
    padding: 22px;
  }

  .paper-visual video {
    width: min(88%, 380px);
  }

  .fact-row {
    grid-template-columns: 1fr;
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 18px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FUTURISTIC / PIXEL-WORLD / LIVING CRYBABY LAYER
   Art direction: darker, shadier, pixel-world, ghost watermark
   ═══════════════════════════════════════════════════════════════ */

/* --- Deep edge vignette (cinematic dark frame over all content) --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 90% at 50% 50%, transparent 28%, rgba(1, 1, 6, .68) 100%);
  z-index: 2;
}

/* --- Page ghost watermark: translucent Crybaby face behind all content --- */
.page-ghost {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.page-ghost img {
  width: min(54vw, 620px);
  object-fit: contain;
  opacity: .055;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 100px rgba(0, 217, 255, .48)) hue-rotate(6deg);
  animation: ghostBreathe 10s ease-in-out infinite;
  transform: translateX(10%) translateY(-4%);
}

/* --- Pixel field: scattered blinking pixel dots fixed to viewport --- */
.pixel-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pixel-field i {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  background: var(--cyan);
  animation: pixelBlink 4.5s ease-in-out infinite;
}

.pixel-field i:nth-child(1)  { left:  4%; top: 11%; animation-delay:    0s; background: var(--gold); }
.pixel-field i:nth-child(2)  { left: 17%; top: 36%; animation-delay:  -.7s; }
.pixel-field i:nth-child(3)  { left: 29%; top:  7%; animation-delay: -1.4s; background: var(--gold); }
.pixel-field i:nth-child(4)  { left: 47%; top: 24%; animation-delay: -2.2s; }
.pixel-field i:nth-child(5)  { left: 60%; top: 69%; animation-delay: -2.9s; background: var(--gold); }
.pixel-field i:nth-child(6)  { left: 73%; top: 13%; animation-delay:  -.5s; }
.pixel-field i:nth-child(7)  { left: 87%; top: 41%; animation-delay: -3.3s; background: var(--gold); }
.pixel-field i:nth-child(8)  { left: 12%; top: 77%; animation-delay: -1.8s; }
.pixel-field i:nth-child(9)  { left: 23%; top: 54%; animation-delay: -2.5s; background: var(--gold); width: 4px; height: 4px; }
.pixel-field i:nth-child(10) { left: 53%; top: 89%; animation-delay: -3.7s; }
.pixel-field i:nth-child(11) { left: 78%; top: 74%; animation-delay: -1.0s; background: var(--gold); }
.pixel-field i:nth-child(12) { left: 92%; top: 27%; animation-delay: -4.2s; width: 2px; height: 2px; }
.pixel-field i:nth-child(13) { left: 40%; top: 63%; animation-delay: -1.2s; width: 4px; height: 4px; }
.pixel-field i:nth-child(14) { left: 66%; top: 45%; animation-delay: -3.1s; background: var(--gold); }
.pixel-field i:nth-child(15) { left: 82%; top: 91%; animation-delay: -2.6s; }
.pixel-field i:nth-child(16) { left:  3%; top: 50%; animation-delay: -4.6s; background: var(--gold); width: 2px; height: 2px; }
.pixel-field i:nth-child(17) { left: 37%; top: 83%; animation-delay: -1.6s; }
.pixel-field i:nth-child(18) { left: 70%; top:  4%; animation-delay: -3.9s; background: var(--gold); }

/* --- Terminal status row below nav --- */
.terminal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 217, 255, .08);
  color: rgba(145, 168, 184, .5);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.terminal-row::before {
  content: "> ";
  color: var(--cyan);
  opacity: .55;
  flex-shrink: 0;
}

.terminal-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(0, 217, 255, .22);
  background: rgba(0, 217, 255, .05);
  color: rgba(0, 217, 255, .65);
  font-size: 9px;
  flex-shrink: 0;
}

.terminal-badge.gold {
  border-color: rgba(255, 196, 0, .22);
  background: rgba(255, 196, 0, .05);
  color: rgba(255, 196, 0, .65);
}

/* --- Pixel clusters: mini 3×3 blinking dot grids in hero --- */
.pixel-cluster {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 3px;
  z-index: 3;
  pointer-events: none;
}

.pixel-cluster i {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--cyan);
  animation: pixelBlink 3.2s ease-in-out infinite;
}

.pixel-cluster.gold i { background: var(--gold); }

.pixel-cluster i:nth-child(1) { animation-delay:    0s; }
.pixel-cluster i:nth-child(2) { animation-delay:  -.5s; }
.pixel-cluster i:nth-child(3) { animation-delay: -1.0s; }
.pixel-cluster i:nth-child(4) { animation-delay: -1.5s; }
.pixel-cluster i:nth-child(5) { animation-delay: -2.0s; }
.pixel-cluster i:nth-child(6) { animation-delay: -2.5s; }
.pixel-cluster i:nth-child(7) { animation-delay: -3.0s; }
.pixel-cluster i:nth-child(8) { animation-delay:  -.8s; }
.pixel-cluster i:nth-child(9) { animation-delay: -1.6s; }

/* --- Manifesto strip corner brackets (pixel-cyber decoration) --- */
.manifesto-strip {
  position: relative;
}

.manifesto-strip::before,
.manifesto-strip::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 5;
}

.manifesto-strip::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid rgba(0, 217, 255, .72);
  border-left: 2px solid rgba(0, 217, 255, .72);
}

.manifesto-strip::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid rgba(255, 196, 0, .62);
  border-right: 2px solid rgba(255, 196, 0, .62);
}

/* --- New keyframes --- */
@keyframes ghostBreathe {
  0%, 100% { opacity: .036; transform: translateX(10%) translateY(-4%) scale(1); }
  50%       { opacity: .058; transform: translateX(10%) translateY(-4%) scale(1.018); }
}

@keyframes pixelBlink {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: .72; }
  50%      { opacity: 1; }
}

@keyframes glitchFlicker {
  0%,  85%   { filter: drop-shadow(0 28px 70px rgba(0,0,0,.72)) drop-shadow(0 0 34px rgba(0,217,255,.25)); }
  86%         { filter: drop-shadow(0 28px 70px rgba(0,0,0,.82)) drop-shadow(0 0 52px rgba(0,217,255,.62)) drop-shadow(3px 0 2px rgba(255,0,80,.4)) brightness(1.22); }
  86.5%       { filter: drop-shadow(0 28px 70px rgba(0,0,0,.72)) drop-shadow(0 0 34px rgba(0,217,255,.25)); }
  89%,  90.5% { filter: drop-shadow(0 28px 70px rgba(0,0,0,.72)) drop-shadow(0 0 34px rgba(0,217,255,.25)); }
  90%         { filter: drop-shadow(0 28px 70px rgba(0,0,0,.78)) drop-shadow(0 0 46px rgba(255,196,0,.36)) drop-shadow(-3px 0 2px rgba(0,217,255,.48)); }
  100%        { filter: drop-shadow(0 28px 70px rgba(0,0,0,.72)) drop-shadow(0 0 34px rgba(0,217,255,.25)); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}