/* ============================================================
   ООО «МУНИК» / mooniq — co-branding tokens, moon mark, theme scope
   ============================================================
   Mirrors the CKS / Mura Menasa co-branding pattern:
     .theme-mq-full — whole-page rebrand of the Entropia chassis to
                      mooniq's look: night-indigo base, indigo accent,
                      dawn terracotta as the warm second voice.
                      Unbounded display, Onest body, JetBrains Mono.
                      DARK base with LIGHT (linen) bands.
   Brand source: mooniq design tokens (mooniq-dash/dashboard.html).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Onest:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* night — the base the product lives on */
  --mq-night-950:  #101227;
  --mq-night-900:  #14162A;
  --mq-night-800:  #1B1E38;
  --mq-night-700:  #242847;
  --mq-night-600:  #31365F;
  --mq-night-500:  #434879;

  /* indigo — the primary brand accent */
  --mq-indigo-700: #3B41B8;
  --mq-indigo-600: #4A50D4;
  --mq-indigo-500: #5C62E6;
  --mq-indigo-400: #868BF0;
  --mq-indigo-300: #B4B7F6;
  --mq-indigo-100: #E7E8FB;

  /* dawn — the warm second voice, the bridge to Entropia's terracotta */
  --mq-dawn-600:   #D98450;
  --mq-dawn-500:   #E9A178;
  --mq-dawn-400:   #F2B891;
  --mq-dawn-200:   #F9DCC7;

  /* paper / linen / sand — the light bands */
  --mq-paper:      #FBFAF7;
  --mq-linen-100:  #F4F3EF;
  --mq-linen-200:  #EDEBE4;
  --mq-sand-300:   #E3E0D6;

  /* ink — text on light */
  --mq-ink-900:    #1C1E2A;
  --mq-ink-700:    #43465A;
  --mq-ink-500:    #74778B;
  --mq-ink-400:    #9A9CAC;

  /* semantic — carried over from the dashboard's health language */
  --mq-green:      #3F9E7C;
  --mq-amber:      #D99A2B;
  --mq-red:        #D65C4E;

  --mq-font-display: 'Unbounded', 'Inter Tight', system-ui, sans-serif;
  --mq-font-body:    'Onest', 'Inter Tight', system-ui, sans-serif;
  --mq-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
   MOON MARK — the mooniq wordmark: an indigo dot with a slow
   lunar halo. Host: <span class="mq-moon" data-mq-moon></span>
   Pure CSS, no asset fetch.
   ============================================================ */

.mq-moon {
  --mq-moon-size: 200px;
  position: relative;
  display: inline-block;
  width: var(--mq-moon-size);
  height: var(--mq-moon-size);
  vertical-align: middle;
  flex: none;
}

/* the orbit ring */
.mq-moon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(134, 139, 240, 0.32);
}

/* the body of the moon + its halo */
.mq-moon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 32%, var(--mq-indigo-300) 0%, var(--mq-indigo-500) 46%, var(--mq-indigo-700) 100%);
  box-shadow:
    0 0 0 1px rgba(180, 183, 246, 0.28),
    0 0 42px 6px rgba(92, 98, 230, 0.45);
}

/* the terminator — the sliver of dawn on the lit edge */
.mq-moon-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: visible;
}
.mq-moon-arc::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(118deg, transparent 52%, rgba(233, 161, 120, 0.85) 100%);
  mix-blend-mode: screen;
}

/* orbiting satellite — one of the six systems circling the core */
.mq-moon-sat {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.mq-moon-sat::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--mq-dawn-500);
  box-shadow: 0 0 12px 2px rgba(217, 132, 80, 0.6);
}

.mq-moon.is-playing::after {
  animation: mq-moon-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mq-moon.is-playing .mq-moon-sat {
  animation: mq-moon-orbit 26s linear 0.9s infinite;
}
.mq-moon:hover .mq-moon-sat { animation-duration: 6s; }

@keyframes mq-moon-rise {
  0%   { transform: translate(-50%, -20%) scale(0.7); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes mq-moon-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mq-moon.is-playing::after { animation: none; }
  .mq-moon.is-playing .mq-moon-sat,
  .mq-moon:hover .mq-moon-sat { animation: none; }
}

/* wordmark — "mooniq" set in Unbounded with the indigo dot */
.mq-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--mq-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
}
.mq-wordmark .dot {
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.16em;
  border-radius: 50%;
  background: var(--mq-indigo-500);
  box-shadow: 0 0 14px rgba(92, 98, 230, 0.7);
}

/* ============================================================
   HERO head row — title left, oversized moon right
   ============================================================ */
.mq-hero-headrow {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  margin-top: 36px;
}
.mq-hero-sidemoon { display: flex; justify-content: flex-end; }
.mq-hero-sidemoon .mq-moon { --mq-moon-size: clamp(220px, 26vw, 360px); }

@media (max-width: 1080px) {
  .mq-hero-headrow { grid-template-columns: 1fr; gap: 28px; }
  .mq-hero-sidemoon { justify-content: flex-start; }
  .mq-hero-sidemoon .mq-moon { --mq-moon-size: clamp(180px, 44vw, 280px); }
}
@media (max-width: 720px) {
  .mq-hero-sidemoon .mq-moon { --mq-moon-size: 160px; }
}

/* ============================================================
   CLIENT MARK — framed block in the context section
   ============================================================ */
.mq-client-mark {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  border: 1.5px solid var(--mq-indigo-500);
  background: rgba(92, 98, 230, 0.07);
  border-radius: var(--r-sm);
}
.mq-client-id {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mq-font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--mq-indigo-400);
  text-transform: uppercase;
}
.mq-client-id .dash { width: 1px; height: 14px; background: rgba(92, 98, 230, 0.45); }
.mq-client-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mq-client-row .mq-moon { --mq-moon-size: 76px; }
.mq-client-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 360px;
}

/* ============================================================
   PROCESS LANE — the "as it was" sequence for the audit section
   ============================================================ */
.mq-lane {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  border: var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mq-lane-step {
  position: relative;
  padding: var(--s-5);
  border-right: var(--hairline);
  min-height: 156px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mq-lane-step:last-child { border-right: none; }
.mq-lane-step .mq-lane-id {
  font-family: var(--mq-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mq-ink-500);
}
.mq-lane-step h4 { font-family: var(--mq-font-display); font-size: 15px; letter-spacing: -0.02em; }
.mq-lane-step p { font-size: 12.5px; line-height: 1.5; }
.mq-lane-step .mq-lane-arrow {
  position: absolute;
  right: -7px; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-family: var(--mq-font-mono);
  font-size: 12px;
  color: var(--mq-ink-400);
}
.mq-lane-step.is-bottleneck { box-shadow: inset 3px 0 0 var(--mq-dawn-600); }
.mq-lane-step.is-bottleneck .mq-lane-id { color: var(--mq-dawn-600); }
@media (max-width: 860px) {
  .mq-lane { grid-auto-flow: row; grid-auto-columns: auto; }
  .mq-lane-step { border-right: none; border-bottom: var(--hairline); }
  .mq-lane-step:last-child { border-bottom: none; }
  .mq-lane-step .mq-lane-arrow { display: none; }
}

/* ============================================================
   BOTTLENECK GRID — "узкое место → решение автоматизацией"
   ============================================================ */
.mq-bottlenecks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mq-bn-head, .mq-bn-row {
  display: grid;
  grid-template-columns: 48px 1.1fr 1.4fr;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  align-items: start;
}
.mq-bn-head {
  font-family: var(--mq-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mq-bn-row .mq-bn-num { font-family: var(--mq-font-mono); font-size: 12px; color: var(--mq-indigo-600); }
.mq-bn-row .mq-bn-pain { font-weight: 500; line-height: 1.45; font-size: 14px; }
.mq-bn-row .mq-bn-fix { font-size: 13.5px; line-height: 1.5; }
.mq-bn-row .mq-bn-fix b { font-weight: 600; }
@media (max-width: 720px) {
  .mq-bn-head { display: none; }
  .mq-bn-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   PULSE GAUGE — the health index, mooniq's signature readout
   ============================================================ */
.mq-pulse {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border: var(--hairline);
  border-radius: var(--r-sm);
  background: rgba(92, 98, 230, 0.06);
}
.mq-pulse-dial {
  --mq-dial-size: 132px;
  position: relative;
  width: var(--mq-dial-size);
  height: var(--mq-dial-size);
  border-radius: 50%;
  /* 0–100 arc: indigo up to the mark, faint track after it */
  background: conic-gradient(var(--mq-indigo-500) 0 var(--mq-dial-pct, 62%), rgba(134, 139, 240, 0.16) var(--mq-dial-pct, 62%) 100%);
  display: grid;
  place-items: center;
  flex: none;
}
.mq-pulse-dial::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--mq-night-800);
}
.mq-pulse-val {
  position: relative;
  z-index: 1;
  font-family: var(--mq-font-mono);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--mq-indigo-300);
}
.mq-pulse-legend { display: flex; flex-direction: column; gap: 10px; }
.mq-pulse-legend .k {
  font-family: var(--mq-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mq-indigo-400);
}
.mq-pulse-weights { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.mq-pulse-weight {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(134, 139, 240, 0.28);
  border-radius: 100px;
  font-family: var(--mq-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.mq-pulse-weight b { color: var(--mq-dawn-500); font-weight: 600; }
@media (max-width: 640px) {
  .mq-pulse { grid-template-columns: 1fr; }
}

/* ============================================================
   SOURCE GRID — the six systems folded into one screen
   ============================================================ */
.mq-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mq-source { padding: var(--s-5); display: flex; flex-direction: column; gap: 8px; }
.mq-source .k {
  font-family: var(--mq-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mq-indigo-400);
}
.mq-source .v { font-size: 15px; font-weight: 500; }
.mq-source .d { font-size: 12.5px; line-height: 1.5; }
@media (max-width: 900px) { .mq-sources { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mq-sources { grid-template-columns: 1fr; } }

/* ============================================================
   CAPTION STRIP under a screenshot / video
   ============================================================ */
.mq-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mq-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mq-ink-400);
  margin-top: var(--s-3);
}
.mq-cap .bar { color: var(--mq-indigo-500); }

/* ============================================================
   FOOTER CO-SIGN — Entropia × mooniq
   ============================================================ */
.mq-cosign {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mq-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mq-cosign .x { opacity: 0.45; }
.mq-cosign .mq-cosign-mark { display: inline-flex; align-items: center; gap: 9px; }
.mq-cosign .mq-wordmark { font-size: 14px; letter-spacing: -0.03em; }

/* ============================================================
   THEME FULL — whole-page rebrand to night + indigo + dawn
   ============================================================ */
.theme-mq-full {
  --color-bg: var(--mq-night-900);
  --color-primary: var(--mq-paper);
  --color-accent: var(--mq-indigo-500);
  --color-accent-hover: var(--mq-indigo-700);
  --accent: var(--mq-indigo-500);
  --accent-12: rgba(92, 98, 230, 0.16);
  --accent-30: rgba(92, 98, 230, 0.42);
  --accent-glow: rgba(92, 98, 230, 0.65);
  --accent-soft: rgba(92, 98, 230, 0.16);
  --titanium: var(--mq-paper);
  --titanium-dim: rgba(251, 250, 247, 0.76);
  --titanium-faint: rgba(251, 250, 247, 0.46);
  --titanium-mute: rgba(251, 250, 247, 0.56);
  --line: rgba(251, 250, 247, 0.10);
  --line-2: rgba(251, 250, 247, 0.18);
  --hairline: 1px solid rgba(251, 250, 247, 0.10);

  background: var(--mq-night-900);
  color: var(--mq-paper);
  font-family: var(--mq-font-body);
}

.theme-mq-full .display,
.theme-mq-full h1,
.theme-mq-full h2,
.theme-mq-full h3,
.theme-mq-full h4 {
  font-family: var(--mq-font-display);
  letter-spacing: -0.035em;
  color: var(--mq-paper);
}
.theme-mq-full h1, .theme-mq-full .display { font-weight: 700; }
.theme-mq-full h2, .theme-mq-full h3 { font-weight: 600; }
.theme-mq-full .display .dim,
.theme-mq-full h1 .dim,
.theme-mq-full h2 .dim,
.theme-mq-full h3 .dim { opacity: 1; color: rgba(251, 250, 247, 0.44); }
.theme-mq-full .mono,
.theme-mq-full .eyebrow,
.theme-mq-full .chip,
.theme-mq-full .btn { font-family: var(--mq-font-mono); }

.theme-mq-full .mq-title-accent { color: var(--mq-indigo-400); }
.theme-mq-full .mq-title-dawn { color: var(--mq-dawn-500); }
.theme-mq-full .caret { background: var(--mq-indigo-500); }

/* ── NAV ─────────────────────────────────────────────────── */
.theme-mq-full .nav {
  background: rgba(16, 18, 39, 0.9);
  border-bottom-color: rgba(251, 250, 247, 0.08);
}
.theme-mq-full .nav-item { color: rgba(251, 250, 247, 0.7); }
.theme-mq-full .nav-item:hover,
.theme-mq-full .nav-item.is-active { color: var(--mq-indigo-400); }
.theme-mq-full .logo { color: var(--mq-paper); }
.theme-mq-full .nav-mark img { filter: hue-rotate(196deg) saturate(1.5) brightness(1.25); }
.theme-mq-full .btn-primary {
  background: var(--mq-indigo-600);
  color: var(--mq-paper);
  border-color: transparent;
}
.theme-mq-full .btn-primary:hover {
  background: var(--mq-indigo-500);
  box-shadow: 0 0 26px rgba(92, 98, 230, 0.45);
}
.theme-mq-full .btn { border-color: rgba(251, 250, 247, 0.24); color: var(--mq-paper); }
.theme-mq-full .btn:hover { border-color: var(--mq-paper); background: var(--mq-paper); color: var(--mq-night-900); }

/* ── SECTION TONES ───────────────────────────────────────── */
.theme-mq-full .hero,
.theme-mq-full .section { background: transparent; color: var(--mq-paper); }
.theme-mq-full .section { border-top-color: rgba(251, 250, 247, 0.08); }

.theme-mq-full .section.tone-cool::before     { background: var(--mq-night-800); }
.theme-mq-full .section.tone-cream::before    { background: var(--mq-night-950); }
.theme-mq-full .section.tone-beige::before    { background: var(--mq-linen-100); }
.theme-mq-full .section.tone-clay::before     { background: rgba(92, 98, 230, 0.10); }
.theme-mq-full .section.tone-sand::before     { background: var(--mq-night-950); }
.theme-mq-full .section.tone-espresso::before { background: var(--mq-night-950); }

/* ── LIGHT BAND (tone-beige) — ink on linen ──────────────── */
.theme-mq-full .section.tone-beige,
.theme-mq-full .section.tone-beige h1,
.theme-mq-full .section.tone-beige h2,
.theme-mq-full .section.tone-beige h3,
.theme-mq-full .section.tone-beige h4 { color: var(--mq-ink-900); }
.theme-mq-full .section.tone-beige h1 .dim,
.theme-mq-full .section.tone-beige h2 .dim,
.theme-mq-full .section.tone-beige h3 .dim { color: rgba(28, 30, 42, 0.42); }
.theme-mq-full .section.tone-beige .mq-title-accent { color: var(--mq-indigo-600); }
.theme-mq-full .section.tone-beige .mq-title-dawn { color: var(--mq-dawn-600); }
.theme-mq-full .section.tone-beige .eyebrow { color: var(--mq-indigo-600); }
.theme-mq-full .section.tone-beige .eyebrow::before { background: var(--mq-ink-400) !important; }
.theme-mq-full .section.tone-beige .dim,
.theme-mq-full .section.tone-beige p.dim,
.theme-mq-full .section.tone-beige .mute { color: var(--mq-ink-700); }
.theme-mq-full .section.tone-beige .faint,
.theme-mq-full .section.tone-beige .mono.faint { color: var(--mq-ink-500); }
.theme-mq-full .section.tone-beige b,
.theme-mq-full .section.tone-beige strong { color: var(--mq-ink-900); }
.theme-mq-full .section.tone-beige .mono.accent,
.theme-mq-full .section.tone-beige .accent { color: var(--mq-indigo-600); }
.theme-mq-full .section.tone-beige .chip {
  border-color: rgba(92, 98, 230, 0.32);
  color: var(--mq-indigo-700);
  background: rgba(92, 98, 230, 0.07);
}
.theme-mq-full .section.tone-beige .mq-lane-step h4 { color: var(--mq-ink-900); }
.theme-mq-full .section.tone-beige .mq-lane-step p { color: var(--mq-ink-700); }
.theme-mq-full .section.tone-beige .mq-bn-row .mq-bn-pain { color: var(--mq-ink-900); }
.theme-mq-full .section.tone-beige .mq-bn-row .mq-bn-fix { color: var(--mq-ink-700); }
.theme-mq-full .section.tone-beige .mq-source .v { color: var(--mq-ink-900); }
.theme-mq-full .section.tone-beige .mq-source .d { color: var(--mq-ink-700); }
.theme-mq-full .section.tone-beige .mq-source .k { color: var(--mq-indigo-600); }
.theme-mq-full .section.tone-beige .mq-cap { color: var(--mq-ink-500); }

/* Tiles on the light band → white cards, ink hairlines */
.theme-mq-full .section.tone-beige .bg-line { background: rgba(28, 30, 42, 0.12) !important; }
.theme-mq-full .section.tone-beige .tile,
.theme-mq-full .section.tone-beige .tile-6 { background: #FFFFFF !important; }
.theme-mq-full .section.tone-beige .bd-hair { border-color: rgba(28, 30, 42, 0.16) !important; }
.theme-mq-full .section.tone-beige .mq-bottlenecks,
.theme-mq-full .section.tone-beige .mq-lane,
.theme-mq-full .section.tone-beige .mq-sources { background: rgba(28, 30, 42, 0.14); border-color: rgba(28, 30, 42, 0.16); }
.theme-mq-full .section.tone-beige .mq-lane-step,
.theme-mq-full .section.tone-beige .mq-bn-row,
.theme-mq-full .section.tone-beige .mq-source { background: #FFFFFF; }
.theme-mq-full .section.tone-beige .mq-bn-head { background: #FFFFFF; color: var(--mq-ink-500); }

/* ── DARK bands — eyebrows, dim text, chips ──────────────── */
.theme-mq-full .eyebrow { color: var(--mq-indigo-400); }
.theme-mq-full .eyebrow::before { background: var(--mq-night-500); }
.theme-mq-full .dim { color: rgba(251, 250, 247, 0.78); }
.theme-mq-full .mute, .theme-mq-full .faint { color: rgba(251, 250, 247, 0.5); }
.theme-mq-full .mono.accent, .theme-mq-full .accent { color: var(--mq-indigo-400); }
.theme-mq-full b, .theme-mq-full strong { color: var(--mq-paper); }
.theme-mq-full .chip {
  border-color: rgba(134, 139, 240, 0.38);
  color: var(--mq-indigo-300);
  background: rgba(92, 98, 230, 0.10);
}
.theme-mq-full .chip.is-dawn {
  border-color: rgba(233, 161, 120, 0.42);
  color: var(--mq-dawn-400);
  background: rgba(217, 132, 80, 0.10);
}

/* Hero dot grid */
.theme-mq-full .grid-bg {
  background-image:
    linear-gradient(to right, rgba(251, 250, 247, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(251, 250, 247, 0.04) 1px, transparent 1px);
}

/* Metric tiles inside DARK sections → raised night */
.theme-mq-full .section .bg-line { background: rgba(251, 250, 247, 0.08) !important; }
.theme-mq-full .section .tile,
.theme-mq-full .section .tile-6 { background: var(--mq-night-800) !important; }

/* ── BLUEPRINT — recolor to night/indigo ─────────────────── */
.theme-mq-full .bp-svg rect[fill="url(#bp-dots)"] { opacity: 0.5; }
.theme-mq-full .bp-tick { stroke: rgba(251, 250, 247, 0.5); }
.theme-mq-full .bp-coord { fill: rgba(251, 250, 247, 0.5); }
.theme-mq-full .bp-core-box { stroke: var(--mq-indigo-500); fill: rgba(92, 98, 230, 0.18); }
.theme-mq-full .bp-core-corner { fill: var(--mq-indigo-400); }
.theme-mq-full .bp-core-sub { fill: var(--mq-indigo-400); }
.theme-mq-full .bp-core-label { fill: var(--mq-paper); }
.theme-mq-full .bp-core-meta { fill: rgba(251, 250, 247, 0.7); }
.theme-mq-full .bp-pulse { stroke: rgba(92, 98, 230, 0.38); }
.theme-mq-full .bp-module-box { stroke: rgba(251, 250, 247, 0.25); fill: var(--mq-night-800); }
.theme-mq-full .bp-mod-corner { stroke: rgba(251, 250, 247, 0.5); }
.theme-mq-full .bp-mod-name { fill: var(--mq-paper); }
.theme-mq-full .bp-mod-meta { fill: rgba(251, 250, 247, 0.6); }
.theme-mq-full .bp-mod-id { fill: var(--mq-indigo-400); }
.theme-mq-full .bp-line { stroke: rgba(92, 98, 230, 0.5); }
.theme-mq-full .bp-endpoint { fill: var(--mq-dawn-500); }
.theme-mq-full .bp-info {
  background: var(--mq-night-800);
  border-color: rgba(92, 98, 230, 0.42);
}
.theme-mq-full .bp-info-eyebrow, .theme-mq-full .bp-info-cta { color: var(--mq-indigo-400); }

/* ── VIDEO BEAM — indigo beam instead of the warm default ── */
.theme-mq-full .video-beam[data-tone="indigo"] { --vb-c1: #3B41B8; --vb-c2: #B4B7F6; }
.theme-mq-full .video-beam-hud { color: rgba(180, 183, 246, 0.8); }
.theme-mq-full .video-beam-play { border-color: rgba(180, 183, 246, 0.55); color: var(--mq-indigo-300); }
.theme-mq-full .video-beam-dot { background: var(--mq-dawn-500); }

/* ── BURST CTA ───────────────────────────────────────────── */
.theme-mq-full .section.tone-burst::before {
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(92, 98, 230, 0.34) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 0% 100%, rgba(217, 132, 80, 0.22) 0%, transparent 60%),
    var(--mq-night-950);
}
.theme-mq-full .section.tone-burst,
.theme-mq-full .section.tone-burst h2,
.theme-mq-full .section.tone-burst h3 { color: var(--mq-paper); }
.theme-mq-full .section.tone-burst .mono.faint,
.theme-mq-full .section.tone-burst .mono.mute,
.theme-mq-full .section.tone-burst .dim { color: rgba(251, 250, 247, 0.66) !important; }
.theme-mq-full .section.tone-burst .handoff,
.theme-mq-full .section.tone-burst .handoff-light {
  background: transparent;
  border-color: rgba(92, 98, 230, 0.4);
}
.theme-mq-full .section.tone-burst .btn.btn-primary {
  background: var(--mq-indigo-600);
  color: var(--mq-paper);
  border-color: transparent;
}
.theme-mq-full .section.tone-burst .btn.btn-primary:hover {
  background: var(--mq-paper);
  color: var(--mq-night-900);
  box-shadow: 0 0 24px rgba(92, 98, 230, 0.45);
}

/* ── FOOTER ──────────────────────────────────────────────── */
.theme-mq-full .footer-dark { background: var(--mq-night-950); color: var(--mq-paper); }
.theme-mq-full .footer-dark a { color: rgba(251, 250, 247, 0.7); }
.theme-mq-full .footer-dark a:hover { color: var(--mq-paper); }
.theme-mq-full .footer-dark .logo { color: var(--mq-paper); }
.theme-mq-full .footer-dark .mono.faint { color: rgba(251, 250, 247, 0.5); }

/* ── BLUEPRINT TONES ─────────────────────────────────────────
   platform-blueprint.css hardcodes the Entropia beige/blue tints for
   [data-tone="cool"|"beige"], which read as washed-out grey on the night
   base. Remap them to the mooniq pair: indigo for the data modules,
   dawn for the ones that talk back to a human.
   ------------------------------------------------------------ */
.theme-mq-full .bp-module[data-tone="cool"] .bp-module-box  { fill: rgba(92, 98, 230, 0.14); }
.theme-mq-full .bp-module[data-tone="cool"] .bp-mod-id      { fill: var(--mq-indigo-400); }
.theme-mq-full .bp-line[data-tone="cool"]                   { stroke: rgba(92, 98, 230, 0.45); }
.theme-mq-full .bp-endpoint[data-tone="cool"]               { fill: var(--mq-indigo-400); }

.theme-mq-full .bp-module[data-tone="warm"] .bp-module-box  { fill: rgba(92, 98, 230, 0.20); }
.theme-mq-full .bp-module[data-tone="warm"] .bp-mod-id      { fill: var(--mq-indigo-400); }
.theme-mq-full .bp-line[data-tone="warm"]                   { stroke: rgba(92, 98, 230, 0.45); }
.theme-mq-full .bp-endpoint[data-tone="warm"]               { fill: var(--mq-indigo-400); }

.theme-mq-full .bp-module[data-tone="beige"] .bp-module-box { fill: rgba(217, 132, 80, 0.14); }
.theme-mq-full .bp-module[data-tone="beige"] .bp-mod-id     { fill: var(--mq-dawn-500); }
.theme-mq-full .bp-line[data-tone="beige"]                  { stroke: rgba(217, 132, 80, 0.45); }
.theme-mq-full .bp-endpoint[data-tone="beige"]              { fill: var(--mq-dawn-500); }

/* ── HERO STATS ──────────────────────────────────────────────
   .hero-compact hides the stat row site-wide; this case leads with four
   numbers, so bring it back inside the mooniq theme only.
   ------------------------------------------------------------ */
.theme-mq-full .hero.hero-compact .hero-stats { display: grid; }
@media (max-width: 720px) {
  .theme-mq-full .hero.hero-compact .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── VIDEO STANDBY ───────────────────────────────────────────
   The shared standby overlay is opaque black, so the poster frame can
   never read through it. Here the promo IS the section, so trade the
   solid plate for a night-tinted vignette and let the poster show.
   ------------------------------------------------------------ */
.theme-mq-full .video-beam .video-beam-surface video { opacity: 1; }
.theme-mq-full .video-beam .video-beam-surface { background: var(--mq-night-950); }
.theme-mq-full .video-beam-overlay {
  background:
    radial-gradient(ellipse 82% 62% at 50% 50%,
      rgba(16, 18, 39, 0.30) 0%,
      rgba(16, 18, 39, 0.88) 82%);
}
.theme-mq-full .video-beam-scanlines { opacity: 0.35; }

/* ============================================================
   RESPONSIVE GRIDS — narrative column + artefact column.
   Kept as classes rather than inline styles so they can actually
   collapse: a two-column split does not fit under ~900px, and the
   metric strips need fewer columns before they overflow.
   ============================================================ */
.mq-two {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s-9);
  align-items: start;
}
.mq-two.is-12   { grid-template-columns: 1fr 1.2fr; }
.mq-two.is-left { grid-template-columns: 1.1fr 1fr; }
.mq-two.is-even { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) {
  .mq-two,
  .mq-two.is-12,
  .mq-two.is-left,
  .mq-two.is-even { grid-template-columns: 1fr; gap: var(--s-7); }
}

.mq-tiles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: var(--hairline);
}
.mq-tiles.is-2 { grid-template-columns: repeat(2, 1fr); }
.mq-tiles.is-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .mq-tiles.is-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mq-tiles.is-2, .mq-tiles.is-4 { grid-template-columns: 1fr; } }
