/* ═══════════════════ TrackGemz marketing site ═══════════════════
   Concept: the night shift for your record collection.
   Console-phosphor: cyan on near-black, condensed display, mono data. */

@font-face { font-family: "Bebas Neue"; src: url(assets/fonts/bebas-neue-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #0b0d10;
  --bg-rgb: 11,13,16;
  --bg-2: #101216;
  --surface: #15171c;
  --surface-2: #1b1e25;
  --line: #23262e;
  --line-hi: #2c313b;
  --text: #e8eaed;
  --muted: #8b9099;
  --dim: #62666e;
  --cyan: #2dd4ec;
  --cyan-rgb: 45,212,236;
  --cyan-hi: #3ee0f5;
  --cyan-lo: #16b8d4;
  --cyan-ink: #04222a;
  --ok: #1ecb8b;
  --warn: #ffb84d;
  --danger: #ff5d5d;
  --disp: "Bebas Neue", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --max: 1180px;
}

/* the app's real alternate themes · same tokens, different console */
[data-theme="amber"] {
  --cyan: #ff8a3d; --cyan-rgb: 255,138,61; --cyan-hi: #ffa05c; --cyan-lo: #e0762c; --cyan-ink: #2a1604;
}
[data-theme="neon"] {
  --bg: #0a0812; --bg-rgb: 10,8,18; --bg-2: #0f0b1a; --surface: #151021; --surface-2: #1b1529;
  --line: #251d36; --line-hi: #322747;
  --cyan: #e879ff; --cyan-rgb: 232,121,255; --cyan-hi: #f09aff; --cyan-lo: #c74fe6; --cyan-ink: #26042e;
}
[data-theme="editorial"] {
  --bg: #f5f3ee; --bg-rgb: 245,243,238; --bg-2: #efece4; --surface: #e9e5db; --surface-2: #e2ddd1;
  --line: #d5cfc0; --line-hi: #c4bca9;
  --text: #16130e; --muted: #5c564a; --dim: #8a8271;
  --cyan: #ff4d2e; --cyan-rgb: 255,77,46; --cyan-hi: #ff6a4f; --cyan-lo: #e03a1d; --cyan-ink: #fff4f1;
}
[data-theme="hardware"] {
  --bg: #e8eaec; --bg-rgb: 232,234,236; --bg-2: #dfe2e5; --surface: #d6dade; --surface-2: #ccd1d6;
  --line: #bcc2c9; --line-hi: #a8b0b9;
  --text: #1a1e23; --muted: #4e565f; --dim: #7b838c;
  --cyan: #1f7fd6; --cyan-rgb: 31,127,214; --cyan-hi: #3a93e6; --cyan-lo: #1668b3; --cyan-ink: #eef6ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* grain overlay */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.t-mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

/* ─────────── hero ─────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100vh;
  object-fit: cover;
  opacity: .5;
}
[data-theme="editorial"] .hero-video, [data-theme="hardware"] .hero-video { opacity: .18; }
#spectrum {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: 100vh;
  opacity: .7;
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* scanlines */
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    /* vignette */
    radial-gradient(ellipse 120% 90% at 50% 30%, transparent 40%, rgba(var(--bg-rgb),.85) 100%),
    /* readability behind headline */
    radial-gradient(ellipse 55% 42% at 50% 34%, rgba(var(--bg-rgb),.62) 0%, transparent 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.6), transparent 22%, transparent 70%, var(--bg) 98%);
}
.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
}
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wm-main { font-family: var(--disp); font-size: 30px; letter-spacing: .02em; text-transform: uppercase; }
.wm-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--cyan); margin-top: 4px; }
.topbar-links { display: flex; align-items: center; gap: 26px; font-size: 13px; color: var(--muted); }
.topbar-links a:hover { color: var(--text); }
.topbar-cta {
  color: var(--cyan);
  border: 1px solid var(--cyan-lo);
  border-radius: 999px;
  padding: 7px 16px;
  transition: all .18s cubic-bezier(.2,.7,.3,1);
}
.topbar-cta:hover { background: var(--cyan); color: var(--cyan-ink) !important; }

.hero-inner {
  position: relative; z-index: 2;
  max-width: 900px;
  margin: 8vh auto 0;
  padding: 0 24px;
  text-align: center;
}
.eyebrow { color: var(--cyan); text-transform: uppercase; }
.hero-title {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 148px);
  line-height: .92;
  text-transform: uppercase;
  margin: 20px 0 26px;
}
.hero-title .line { display: block; }
.hero-title .line-accent { font-size: .58em; letter-spacing: .04em; }
.hero-title em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 40px rgba(var(--cyan-rgb),.45);
}
.hero-sub {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; margin: 34px 0 14px; }
.btn {
  font-weight: 600; font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  transition: all .18s cubic-bezier(.2,.7,.3,1);
  display: inline-block;
  white-space: nowrap;
}
.btn-solid {
  background: var(--cyan); color: var(--cyan-ink);
  box-shadow: 0 0 34px rgba(var(--cyan-rgb),.35);
}
.btn-solid:hover { background: var(--cyan-hi); transform: translateY(-1px); box-shadow: 0 0 50px rgba(var(--cyan-rgb),.5); }
.btn-ghost { border: 1px solid var(--line-hi); color: var(--text); }
.btn-ghost:hover { border-color: var(--cyan-lo); color: var(--cyan); }
.btn-wide { width: 100%; text-align: center; }
.microcopy { color: var(--dim); }
.center { text-align: center; }

.hero-shot {
  position: relative; z-index: 2;
  max-width: 1040px;
  margin: 60px auto 0;
  padding: 0 24px;
  perspective: 1200px;
}
.shot-frame {
  position: relative;
  border-radius: 12px;
  overflow: visible;
  border: 1px solid var(--line-hi);
  box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 80px rgba(var(--cyan-rgb),.08);
  transform: rotateX(6deg);
  transform-origin: center bottom;
}
.shot-frame img { border-radius: 12px; }
.hud {
  position: absolute;
  background: rgba(var(--bg-rgb), .88);
  border: 1px solid var(--cyan-lo);
  color: var(--cyan);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(var(--cyan-rgb), .25);
}
.hud::after {
  content: "";
  position: absolute;
  width: 1px; height: 26px;
  background: var(--cyan-lo);
  left: 50%; top: 100%;
}
.hud-a { top: -14px; left: 24%; animation: hudfloat 5s ease-in-out infinite; }
.hud-b { top: -14px; right: 6%; animation: hudfloat 5s ease-in-out 1.2s infinite; }
.hud-c { bottom: -14px; left: 42%; animation: hudfloat 5s ease-in-out 2.4s infinite; }
.hud-c::after { top: auto; bottom: 100%; }
@keyframes hudfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-shot figcaption { text-align: center; color: var(--dim); margin: 16px 0 40px; }

.receipts {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 30px;
}
.receipt {
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 44px;
  border-right: 1px solid var(--line);
}
.receipt:first-child { border-left: 1px solid var(--line); }
.r-num {
  font-family: var(--disp);
  font-size: 46px; line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.r-label { color: var(--dim); margin-top: 6px; }
.receipts-note {
  position: relative; z-index: 2;
  text-align: center; color: var(--dim);
  padding: 14px 24px 0;
}

/* ─────────── ticker ─────────── */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
  padding: 12px 0;
}
.ticker-track {
  display: inline-flex; gap: 48px;
  white-space: nowrap;
  animation: tick 42s linear infinite;
  color: var(--muted);
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track b { color: var(--cyan); font-weight: 400; }
.ticker-track .tk-warn { color: var(--warn); }
.ticker-track .tk-ok { color: var(--ok); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─────────── sections common ─────────── */
section { padding: 110px 24px; }
.section-head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.section-head h2 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1;
  text-transform: uppercase;
  margin: 14px 0 18px;
}
.section-sub { color: var(--muted); }

/* ─────────── mess table ─────────── */
.mess { background: var(--bg); }
.mess-table {
  max-width: 980px; margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
}
.mess-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr .9fr .5fr .4fr;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  align-items: center;
}
.mess-row:last-child { border-bottom: none; }
.mess-head { color: var(--dim); text-transform: uppercase; font-size: 11px; background: var(--surface); }
.mess-cell { position: relative; overflow: hidden; }
.mess-cell .v-dirty, .mess-cell .v-clean {
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s;
}
.v-dirty { color: var(--danger); }
.v-dirty.neutral { color: var(--muted); }
.v-clean { position: absolute; inset: 0; color: var(--text); transform: translateY(110%); opacity: 0; }
.v-clean .hl { color: var(--cyan); }
.mess-row.cleaned .v-dirty { transform: translateY(-110%); opacity: 0; }
.mess-row.cleaned .v-clean { transform: translateY(0); opacity: 1; }
.mess-note { text-align: center; color: var(--dim); margin-top: 18px; }

/* ─────────── archive interlude ─────────── */
.interlude {
  position: relative;
  min-height: 62vh;
  background: url(assets/img/scene-archive.jpg) center 30% / cover no-repeat, var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 30px;
}
.interlude::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 72%, var(--bg) 100%);
}
.interlude-line {
  position: relative;
  color: var(--muted);
  background: rgba(var(--bg-rgb), .7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ─────────── crew ─────────── */
.crew { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.worker {
  position: relative;
  max-width: var(--max);
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.worker::before {
  content: attr(data-num);
  position: absolute;
  top: -70px; right: -20px;
  font-family: var(--disp);
  font-size: 300px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--w-accent) 22%, transparent);
  pointer-events: none;
  z-index: 0;
}
.worker:nth-child(odd)::before { right: auto; left: -20px; }
.worker > * { position: relative; z-index: 1; }
.worker:last-child { margin-bottom: 0; }
.worker:nth-child(odd) .worker-copy { order: 2; }
.worker { --w-accent: var(--cyan); }
.worker[data-worker="editor"] { --w-accent: #e879ff; }
.worker[data-worker="janitor"] { --w-accent: #ffb84d; }
.worker-index { color: var(--w-accent); text-transform: uppercase; }
.worker-name {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 84px);
  text-transform: uppercase;
  line-height: .95;
  margin: 10px 0 4px;
}
.worker-role { color: var(--w-accent); font-weight: 600; margin-bottom: 16px; }
.worker-chips li { border-color: color-mix(in srgb, var(--w-accent) 35%, transparent); }
.worker-desc { color: var(--muted); }
.junk { color: var(--danger); }
.worker-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.worker-chips li {
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--muted);
}
.worker-art img {
  border-radius: 12px;
  border: 1px solid var(--line-hi);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.worker-portrait {
  width: 78%;
  border-radius: 14px;
  border: 1px solid var(--line-hi);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.worker:nth-child(odd) .worker-portrait { margin-left: auto; }
.console-panel {
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.panel-overlap {
  width: 72%;
  margin-top: -26%;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
.worker:nth-child(odd) .panel-overlap { margin-left: 0; margin-right: auto; }
.worker[data-worker="janitor"] .worker-portrait { width: 64%; }
.worker[data-worker="janitor"] .panel-overlap { width: 100%; margin-top: -20%; }
.worker[data-worker="researcher"] .panel-overlap { width: 86%; }
.worker[data-worker="editor"] .panel-overlap { width: 94%; }

.ba-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; align-items: start; }
.ba-col .panel-tall { max-width: 100%; }
.genre-clean {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-2);
}
.genre-clean li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.genre-clean li:last-child { border-bottom: none; }
.genre-clean span { color: var(--cyan); }
.genre-clean b { color: var(--muted); font-weight: 400; }
.console-panel img { border-radius: 9px; border: 1px solid var(--line); box-shadow: none; }
.console-panel .panel-tall { max-width: 235px; align-self: center; }
.console-panel .panel-card { max-width: 320px; align-self: center; }
.panel-cap { color: var(--dim); text-transform: uppercase; }

/* ─────────── spectral compare ─────────── */
.spectral { background: var(--bg); }
.compare {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-hi);
  user-select: none;
  cursor: ew-resize;
}
.compare-pane { position: relative; }
.compare-pane img { width: 100%; }
.compare-pane figcaption {
  position: absolute; bottom: 12px; left: 16px;
  background: rgba(var(--bg-rgb),.8);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text);
}
.compare-over {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 50%);
}
.compare-over figcaption { left: auto; right: 16px; }
.compare-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 0;
  z-index: 5;
}
.handle-line {
  position: absolute; top: 0; bottom: 0; left: -1px;
  width: 2px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(var(--cyan-rgb),.8);
}
.handle-grip {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  background: var(--cyan);
  color: var(--cyan-ink);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.cutoff-mark {
  position: absolute;
  top: 24%; right: 16px;
  color: var(--warn);
  background: rgba(var(--bg-rgb),.8);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed var(--warn);
}
.spectral-note { text-align: center; color: var(--dim); margin-top: 18px; }

/* ─────────── floor ─────────── */
.floor { background: var(--bg-2); border-top: 1px solid var(--line); }
.floor-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.room {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s;
}
.room:hover { transform: translateY(-4px); border-color: var(--cyan-lo); }
.room-shot img { border-bottom: 1px solid var(--line); }
.room h3 {
  font-family: var(--disp); font-weight: 400;
  font-size: 30px; text-transform: uppercase;
  padding: 18px 22px 0;
}
.room p { color: var(--muted); font-size: 14px; padding: 8px 22px 24px; }

/* ─────────── safety ─────────── */
.safety { background: var(--bg); }
.safety-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.safe-tile {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
  background: var(--bg-2);
}
.safe-k { color: var(--cyan); text-transform: uppercase; margin-bottom: 12px; }
.safe-tile h4 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.safe-tile p { color: var(--muted); font-size: 14px; }

/* ─────────── booth ─────────── */
.booth {
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: 70px 24px;
}
.booth-flow { color: var(--dim); margin-bottom: 18px; letter-spacing: .08em; }
.booth-line { max-width: 760px; margin: 0 auto 10px; font-size: 19px; }
.booth-apps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 22px 0 18px; font-size: 14px;
}
.booth-apps span {
  color: var(--cyan);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  padding: 8px 20px;
  background: var(--surface);
}
.booth-sub { color: var(--dim); }

/* ─────────── pricing ─────────── */
.pricing { background: var(--bg); }
.price-grid {
  max-width: 1080px; margin: 0 auto 26px;
  display: grid; grid-template-columns: .85fr 1fr 1.1fr; gap: 26px;
  align-items: stretch;
}
.price-free { opacity: .92; }
.price-free .price-num { font-size: 64px; }
.price-card {
  border: 1px solid var(--line-hi);
  border-radius: 16px;
  padding: 34px 32px;
  background: var(--bg-2);
  display: flex; flex-direction: column;
}
.price-best {
  border-color: var(--cyan-lo);
  box-shadow: 0 0 60px rgba(var(--cyan-rgb),.12);
  position: relative;
}
.price-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--cyan); color: var(--cyan-ink);
  padding: 4px 14px; border-radius: 999px;
  font-weight: 700; text-transform: uppercase;
  white-space: nowrap;
}
.price-name { color: var(--muted); text-transform: uppercase; }
.price-num {
  font-family: var(--disp);
  font-size: 84px; line-height: 1;
  margin: 12px 0 20px;
}
.price-num .cur { font-size: 40px; vertical-align: super; color: var(--muted); }
.price-num .per { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: 10px; }
.price-feats { list-style: none; color: var(--muted); font-size: 14px; flex: 1; margin-bottom: 26px; }
.price-feats li { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.price-feats li:last-child { border-bottom: none; }

/* ─────────── faq ─────────── */
.faq { background: var(--bg-2); border-top: 1px solid var(--line); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 0;
  list-style: none;
  position: relative;
}
.faq summary::after {
  content: "+";
  position: absolute; right: 4px;
  color: var(--cyan);
  font-family: var(--mono);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); font-size: 15px; padding: 0 0 18px; }

/* ─────────── footer ─────────── */
.footer {
  text-align: center;
  padding: 80px 24px 50px;
  border-top: 1px solid var(--line);
}
.footer-mark { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-bottom: 14px; }
.footer-line { color: var(--muted); margin-bottom: 22px; }
.footer-nav { display: flex; gap: 24px; justify-content: center; color: var(--muted); margin-bottom: 26px; }
.footer-nav a:hover { color: var(--cyan); }
.footer-copy { color: var(--dim); }

/* ─────────── theme console ─────────── */
.theme-console {
  position: fixed; bottom: 18px; right: 18px; z-index: 50;
  display: flex; align-items: center; gap: 9px;
  background: rgba(var(--bg-rgb), .82);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  padding: 9px 16px;
}
.tc-label, .tc-name { color: var(--dim); }
.tc-name { min-width: 96px; }
.tc-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line-hi);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.tc-dot:hover { transform: scale(1.25); }
.tc-dot.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan); }
.tc-dot[data-theme-pick=""] { background: #2dd4ec; }
.tc-dot[data-theme-pick="amber"] { background: #ff8a3d; }
.tc-dot[data-theme-pick="neon"] { background: #e879ff; }
.tc-dot[data-theme-pick="editorial"] { background: #f5f3ee; border-color: #ff4d2e; }
.tc-dot[data-theme-pick="hardware"] { background: #1f7fd6; }

/* light themes need lighter chrome */
[data-theme="editorial"] body::after, [data-theme="hardware"] body::after { opacity: .035; }
[data-theme="editorial"] .hero-scrim, [data-theme="hardware"] .hero-scrim {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 90% at 50% 30%, transparent 40%, rgba(var(--bg-rgb),.9) 100%),
    radial-gradient(ellipse 55% 42% at 50% 34%, rgba(var(--bg-rgb),.62) 0%, transparent 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.6), transparent 22%, transparent 70%, var(--bg) 98%);
}
[data-theme="editorial"] .shot-frame, [data-theme="hardware"] .shot-frame { box-shadow: 0 40px 120px rgba(0,0,0,.28), 0 0 80px rgba(var(--cyan-rgb),.1); }
[data-theme="editorial"] .worker[data-worker="editor"] { --w-accent: #b43de0; }
[data-theme="hardware"] .worker[data-worker="editor"] { --w-accent: #b43de0; }
[data-theme="editorial"] .worker[data-worker="janitor"] { --w-accent: #c47a10; }
[data-theme="hardware"] .worker[data-worker="janitor"] { --w-accent: #c47a10; }

/* ─────────── reveal on scroll (JS-gated so no-JS users see everything) ─────────── */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
html.js .reveal.in { opacity: 1; transform: none; }
.v-clean .ok { color: var(--ok); }

/* ─────────── responsive ─────────── */
@media (max-width: 960px) {
  .receipts { flex-wrap: wrap; }
  .receipt { padding: 18px 22px; }
  .worker { grid-template-columns: 1fr; gap: 30px; }
  .worker:nth-child(odd) .worker-copy { order: 0; }
  .floor-grid { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .topbar-links a:not(.topbar-cta) { display: none; }
}
@media (max-width: 560px) {
  .safety-grid { grid-template-columns: 1fr; }
  .mess-row { font-size: 12px; grid-template-columns: 1.3fr 1.5fr .8fr .5fr; }
  .mess-row span:nth-child(5), .mess-cell:nth-child(5) { display: none; }
  .wm-sub { letter-spacing: .18em; font-size: 9px; }
  .tc-label, .tc-name { display: none; }
  .hero-cta { flex-wrap: wrap; }
}

/* ─────────── reduced motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  #spectrum { display: none; }
  html { scroll-behavior: auto; }
}