/* EstIQ v2 — оболочка демонстрационного сайта.
 *
 * Токены взяты один в один из боевого assets/estiq.css: это тот же продукт,
 * и человек не должен чувствовать шва между старой и новой страницей.
 * Палитра и гарнитуры не обсуждаются; всё новое здесь — плотность, сетка,
 * движение и глубина.
 */

:root {
  color-scheme: dark;

  --ink: #0A1520;
  --surface: #0F1D2B;
  --card: #122334;
  --line: #1E3345;
  --paper: #E9EEF0;
  --mist: #8CA0AB;
  --turq: #29B3A4;
  --turq-hi: #43D8C6;
  --glow: rgba(41, 179, 164, .35);
  --up: #43D8C6;
  --down: #E8836B;
  --warn: #E8B75C;
  --head-h: 66px;
  --r-card: 18px;
  --r-btn: 12px;
  --r-panel: 22px;
  --shadow: 0 30px 60px -34px rgba(0, 0, 0, .85);
  --shadow-lift: 0 44px 90px -40px rgba(0, 0, 0, .95);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 16px/1.65 "Golos Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none }
img { max-width: 100% }

h1, h2, h3 { font-family: "Unbounded", sans-serif; margin: 0; text-wrap: balance; font-weight: 600 }
h1 { font-size: clamp(30px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -.02em }
h2 { font-size: clamp(24px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.015em }
h3 { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.25 }

p { margin: 0 0 14px }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px }
.narrow { max-width: 900px; margin: 0 auto; padding: 0 24px }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums }
.num { font-variant-numeric: tabular-nums; font-family: "Unbounded", sans-serif }
.muted { color: var(--mist) }
.small { font-size: 13.5px }
.tq { color: var(--turq-hi) }

.eyebrow {
  display: inline-block;
  font: 500 12px/1 "JetBrains Mono", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--turq);
}

/* --------------------------------------------------------------- кнопки */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--r-btn);
  background: var(--turq); color: #06201D;
  font-weight: 600; font-size: 15px; border: 0; cursor: pointer;
  box-shadow: 0 18px 40px -20px var(--glow);
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, background .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--turq-hi); box-shadow: 0 26px 52px -20px var(--glow) }
.btn.ghost {
  background: transparent; color: var(--paper);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { border-color: var(--turq); color: var(--turq-hi) }
.btn.sm { padding: 9px 15px; font-size: 13.5px }

/* ---------------------------------------------------------------- шапка */

header.top {
  position: sticky; top: 0; z-index: 60; height: var(--head-h);
  display: flex; align-items: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(10, 21, 32, .74);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
header.top.stuck { border-bottom-color: var(--line); background: rgba(10, 21, 32, .92) }
header.top .wrap { display: flex; align-items: center; gap: 18px; width: 100% }
/* Знак — боевой assets/logo.svg (Q-лупа с домом): кольцо currentColor,
   акценты #29B3A4. Размер задаётся здесь, а не атрибутами файла. */
.brand { display: flex; align-items: center; color: var(--paper) }
.brand svg { height: 34px; width: auto; display: block }
.foot-brand svg { height: 30px }
nav.main { display: flex; gap: 2px; margin-left: 6px; flex: 1 }
nav.main a {
  padding: 8px 11px; border-radius: 10px; font-size: 14px; color: var(--mist);
  white-space: nowrap;               /* пункт меню не имеет права переноситься */
  transition: color .2s, background .2s;
}
nav.main a:hover, nav.main a.on { color: var(--paper); background: rgba(255, 255, 255, .05) }
.head-cta { display: flex; gap: 8px; align-items: center }
@media (max-width: 900px) { nav.main { display: none } }

/* --------------------------------------------------- сцена «Путь цифры» */

#journey { position: relative; height: 560vh; }
#journey.still { height: auto }
.stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: stretch;
  background: #0A1520;   /* сцена ночная в обеих темах */
}
#journey.still .stage { position: static; height: 78svh }
canvas.world { position: absolute; inset: 0; width: 100%; height: 100%; display: block }

/* Затемнение под подпись. С плоскими заливками хватало одной виньетки,
   но главы теперь — настоящий рендер со светом, и белый заголовок на нём
   без подложки не читается. Три слоя: низ (под текст), левый борт
   (подпись живёт слева) и общая виньетка. */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,21,32,.80) 0%, rgba(10,21,32,0) 12%),
    linear-gradient(to top, rgba(10,21,32,.95) 0%, rgba(10,21,32,.74) 20%, rgba(10,21,32,0) 50%),
    linear-gradient(to right, rgba(10,21,32,.72) 0%, rgba(10,21,32,.22) 32%, rgba(10,21,32,0) 56%),
    radial-gradient(120% 80% at 52% 40%, transparent 38%, rgba(10,21,32,.70) 100%);
}
@media (max-width: 760px) {
  .stage::after {
    background:
      linear-gradient(to bottom, rgba(10,21,32,.86) 0%, rgba(10,21,32,0) 14%),
      linear-gradient(to top, rgba(10,21,32,.97) 0%, rgba(10,21,32,.86) 30%, rgba(10,21,32,0) 62%),
      radial-gradient(130% 80% at 52% 34%, transparent 30%, rgba(10,21,32,.72) 100%);
  }
}

.stage-ui {
  position: relative; z-index: 2; align-self: end;
  padding: 0 0 clamp(28px, 7vh, 76px);
  pointer-events: none;
}
.stage-ui .wrap { pointer-events: auto }

.chapters { position: relative; min-height: 230px }
.chapter {
  position: absolute; inset: auto 0 0 0; max-width: 620px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.chapter.on { opacity: 1; transform: none }
#journey.still .chapter { position: static; opacity: 1; transform: none; margin-bottom: 26px; max-width: none }
#journey.still .chapters { min-height: 0 }
.chapter h2,
.chapter h1 { margin: 12px 0 10px; font-size: clamp(23px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -.015em }
.chapter p { color: var(--mist); max-width: 560px; font-size: clamp(14.5px, 1.25vw, 17px) }
.chapter .big { font-family: "Unbounded", sans-serif; font-weight: 600; color: var(--turq-hi) }

.rail {
  position: absolute; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 3; display: grid; gap: 16px; pointer-events: none;
}
#journey.still .rail { display: none }
.rail b {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  font: 500 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(140, 160, 171, .45);
  transition: color .35s;
}
.rail b::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(140, 160, 171, .3); transition: background .35s, box-shadow .35s, transform .35s;
}
.rail b.past::after { background: rgba(41, 179, 164, .5) }
.rail b.on { color: var(--turq-hi) }
.rail b.on::after { background: var(--turq-hi); transform: scale(1.5); box-shadow: 0 0 0 5px rgba(41,179,164,.16) }
@media (max-width: 720px) { .rail b { font-size: 0; gap: 0 } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  font: 500 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--mist);
  text-transform: uppercase; display: flex; align-items: center; gap: 8px;
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-hint span { width: 1px; height: 22px; background: linear-gradient(var(--turq), transparent) }
@keyframes bob { 0%,100% { opacity: .45; transform: translate(-50%, 0) } 50% { opacity: 1; transform: translate(-50%, 5px) } }

/* ------------------------------------------------------------- разделы */

section.band { padding: clamp(64px, 9vw, 130px) 0; position: relative }
section.band.tight { padding-top: 0 }
.sec-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 52px) }
.sec-head h2 { margin: 14px 0 12px }
.sec-head p { color: var(--mist); font-size: clamp(15px, 1.3vw, 17.5px) }

.rule { height: 1px; background: linear-gradient(90deg, var(--line), transparent); border: 0; margin: 0 }

/* Проявление из глубины — единственный вход блока в кадр. */
.rv { opacity: 0; transform: perspective(1200px) translate3d(0, 34px, -70px) rotateX(4.5deg) }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
}

/* --------------------------------------------------------------- двери */

.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
@media (max-width: 980px) { .doors { grid-template-columns: 1fr } }

.door {
  position: relative; display: block; overflow: hidden;
  background: linear-gradient(180deg, var(--card), #0E1C2A);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 26px 24px 84px; min-height: 430px;
  box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .4s;
  transform-style: preserve-3d;
}
.door:hover { border-color: rgba(41, 179, 164, .55); box-shadow: var(--shadow-lift) }
.door::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px 220px at var(--mx, 50%) var(--my, 0%), rgba(41,179,164,.16), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.door:hover::before { opacity: 1 }
.door img {
  position: absolute; right: -8px; bottom: 4px; width: 46%; max-width: 190px;
  max-height: 178px; object-fit: contain; object-position: right bottom;
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, .7));
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events: none; z-index: 0;
}
.door > .eyebrow, .door h3, .door p, .door .go { position: relative; z-index: 1 }
.door p { text-shadow: 0 2px 10px rgba(10, 21, 32, .9) }
.door:hover img { transform: translateY(-10px) scale(1.04) }
.door h3 { margin: 12px 0 10px; font-size: clamp(19px, 1.8vw, 24px) }
.door p { color: var(--mist); font-size: 14.5px; max-width: 20em }
.door .go {
  position: absolute; left: 24px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--turq-hi);
}
.door .go::after { content: "→"; transition: transform .3s }
.door:hover .go::after { transform: translateX(5px) }

/* ---------------------------------------------------------- карточки */

.grid { display: grid; gap: 16px }
.g2 { grid-template-columns: repeat(2, 1fr) }
.g3 { grid-template-columns: repeat(3, 1fr) }
.g4 { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 1000px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 8px }
.card p { color: var(--mist); font-size: 14.5px; margin: 0 }
.card .obj { width: 84px; height: 84px; object-fit: contain; margin: -6px 0 10px -6px }
.card.hi { border-color: rgba(41, 179, 164, .55); box-shadow: 0 0 0 1px rgba(41,179,164,.16), var(--shadow) }

.kpi { display: grid; gap: 4px }
.kpi .val { font-family: "Unbounded", sans-serif; font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em }
.kpi .cap { font: 500 11px/1.3 "JetBrains Mono", monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--mist) }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center }
.split.flip > *:first-child { order: 2 }
@media (max-width: 940px) { .split { grid-template-columns: 1fr } .split.flip > *:first-child { order: 0 } }

.bullets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px }
.bullets li { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; row-gap: 4px;
  align-items: start; font-size: 15px }
.bullets li::before {
  content: ""; width: 9px; height: 9px; margin-top: 8px; border-radius: 3px;
  background: var(--turq); box-shadow: 0 0 0 4px rgba(41, 179, 164, .13);
  grid-row: 1; grid-column: 1;
}
.bullets li > b { grid-column: 2; grid-row: 1; font-weight: 600 }
.bullets li > span { grid-column: 2; grid-row: 2; color: var(--mist); font-size: 14.5px; line-height: 1.55 }

/* ------------------------------------------------------- живая витрина */

.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px }
.zone {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 15px; transition: border-color .25s, transform .25s;
}
.zone:hover { border-color: rgba(41, 179, 164, .5); transform: translateY(-2px) }
.zone .n { font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist) }
.zone .v { font-family: "Unbounded", sans-serif; font-size: 24px; font-weight: 600; margin: 8px 0 4px }
.zone .d { font: 500 11.5px/1 "JetBrains Mono", monospace }
.zone .d.up { color: var(--up) } .zone .d.dn { color: var(--down) }
.zone.thin { opacity: .55 }
.zone.thin .v { font-size: 15px; color: var(--mist); font-family: "Golos Text", sans-serif; font-weight: 400 }

/* ---------------------------------------------------------- шахматка */

.chess-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 20px; box-shadow: var(--shadow);
}
.chess-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 16px }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto }
.legend i { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mist); font-style: normal }
.legend i::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--turq) }
.legend i.b::before { background: var(--warn) }
.legend i.s::before { background: var(--line) }

.chess { display: grid; gap: 5px; overflow-x: auto; padding-bottom: 4px }
.chess-row { display: grid; grid-template-columns: 34px repeat(8, minmax(38px, 1fr)); gap: 5px; align-items: center }
.chess-row > u {
  font: 500 10.5px/1 "JetBrains Mono", monospace; color: var(--mist); text-decoration: none; text-align: right;
}
.cell {
  height: 34px; border-radius: 7px; border: 1px solid transparent; cursor: pointer;
  background: rgba(30, 51, 69, .95);
  display: grid; place-items: center;
  font: 500 10px/1 "JetBrains Mono", monospace; color: rgba(233, 238, 240, .35);
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, background .2s;
}
.cell.free { background: rgba(41, 179, 164, .82); color: #06201D }
.cell.hold { background: rgba(232, 183, 92, .8); color: #2A1F06 }
.cell:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .8); z-index: 2 }
.cell.sel { box-shadow: 0 0 0 2px var(--turq-hi), 0 14px 26px -10px rgba(0,0,0,.8); z-index: 3 }

.unit-card {
  margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px;
}
.unit-card .kpi .val { font-size: 22px }

/* -------------------------------------------------------- диалог бота */

.chat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 18px; display: grid; gap: 10px; box-shadow: var(--shadow); min-height: 320px;
  align-content: start;
}
.msg {
  max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5;
  opacity: 0; transform: translateY(10px); animation: pop .45s cubic-bezier(.16,1,.3,1) forwards;
}
.msg.bot { background: rgba(30, 51, 69, .8); border-top-left-radius: 5px; justify-self: start }
.msg.me { background: var(--turq); color: #06201D; border-top-right-radius: 5px; justify-self: end; font-weight: 500 }
.msg.res { background: linear-gradient(180deg, rgba(41,179,164,.16), rgba(41,179,164,.05));
  border: 1px solid rgba(41, 179, 164, .4); max-width: 100%; justify-self: stretch }
.msg.res b { font-family: "Unbounded", sans-serif; font-size: 20px; display: block; margin: 4px 0 6px; color: var(--turq-hi) }
@keyframes pop { to { opacity: 1; transform: none } }

/* ---------------------------------------------------------- тарифы */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 24px; position: relative }
.plan.hi { border-color: rgba(41, 179, 164, .6); box-shadow: 0 0 0 1px rgba(41,179,164,.2), var(--shadow-lift) }
.plan .price { font-family: "Unbounded", sans-serif; font-size: 30px; font-weight: 600; margin: 12px 0 2px }
.plan .per { color: var(--mist); font-size: 13px; margin-bottom: 16px }
.plan ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; font-size: 14.5px }
.plan ul li { display: grid; grid-template-columns: 15px 1fr; gap: 10px; color: var(--mist) }
.plan ul li::before { content: "▸"; color: var(--turq) }
.tag {
  position: absolute; top: -11px; left: 24px; background: var(--turq); color: #06201D;
  font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 7px;
}

/* ------------------------------------------------------------- прочее */

.note {
  border-left: 2px solid var(--warn); padding: 4px 0 4px 16px; color: var(--mist);
  font-size: 14px; margin: 18px 0;
}
.badge {
  display: inline-block; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line);
  font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
}
.badge.ok { border-color: rgba(41, 179, 164, .5); color: var(--turq-hi) }

.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 16px 0; background: var(--surface) }
.marquee div { display: flex; gap: 44px; width: max-content; animation: slide 34s linear infinite }
.marquee span { font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); white-space: nowrap }
.marquee b { color: var(--turq-hi) }
@keyframes slide { to { transform: translateX(-50%) } }

footer.foot { border-top: 1px solid var(--line); background: var(--surface); padding: 44px 0 34px; color: var(--mist); font-size: 14px }
footer.foot a:hover { color: var(--turq-hi) }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr } }
.foot-grid h4 { font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin: 0 0 12px }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }

.demo-flag {
  position: fixed; right: 14px; bottom: 14px; z-index: 52; pointer-events: none;
  background: rgba(18, 35, 52, .92); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font: 500 11px/1.35 "JetBrains Mono", monospace; color: var(--mist);
  backdrop-filter: blur(10px); max-width: 260px;
  animation: flagout .6s ease 11s forwards;
}
@keyframes flagout { to { opacity: 0; visibility: hidden } }
@media (max-width: 620px) { .demo-flag { max-width: 210px; font-size: 10px; animation-delay: 7s } }
.demo-flag b { color: var(--warn) }


/* ------------------------------------------------------------ светлая тема

   Тёмная — родная и остаётся по умолчанию; светлая включается кнопкой
   в шапке и живёт в localStorage "estiq_theme". Краски данных — из
   провалидированной светлой палитры «Штаба» (hq/DESIGN-charts.md):
   интерфейсная бирюза #29B3A4 на белом слишком светла, поэтому краска
   темнеет до #1F9A8C, а цифры и наведение — до #10847A. */

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #EEF2F4;
  --surface: #E5EBEE;
  --card: #FFFFFF;
  --line: #D3DDE2;
  --paper: #0A1520;
  --mist: #5B6F7B;
  --turq: #1F9A8C;
  --turq-hi: #10847A;
  --glow: rgba(31, 154, 140, .28);
  --up: #10847A;
  --down: #B5462F;
  --warn: #A46F0F;
  --shadow: 0 24px 48px -30px rgba(23, 49, 71, .28);
  --shadow-lift: 0 36px 70px -34px rgba(23, 49, 71, .38);
}

/* Сцена и её подписи остаются в ночном мире и на светлой теме. */
[data-theme="light"] #journey {
  --paper: #E9EEF0; --mist: #8CA0AB; --turq: #29B3A4; --turq-hi: #43D8C6;
}

[data-theme="light"] header.top { background: rgba(238, 242, 244, .82) }
[data-theme="light"] header.top.stuck { background: rgba(238, 242, 244, .95) }
[data-theme="light"] nav.main a:hover,
[data-theme="light"] nav.main a.on { color: var(--paper); background: rgba(10, 21, 32, .06) }
[data-theme="light"] .lang-sw button.on { background: rgba(31, 154, 140, .12) }

[data-theme="light"] .door { background: linear-gradient(180deg, #FFFFFF, #EEF3F5) }
[data-theme="light"] .door p { text-shadow: none }
[data-theme="light"] .door::before {
  background: radial-gradient(320px 220px at var(--mx, 50%) var(--my, 0%), rgba(31,154,140,.10), transparent 70%);
}

[data-theme="light"] .msg.bot { background: #E7EEF1 }
[data-theme="light"] .msg.res {
  background: linear-gradient(180deg, rgba(31, 154, 140, .10), rgba(31, 154, 140, .03));
  border-color: rgba(31, 154, 140, .45);
}

[data-theme="light"] .cell { background: #DEE7EB; color: rgba(10, 21, 32, .35) }
[data-theme="light"] .cell.free { background: rgba(31, 154, 140, .85); color: #FFFFFF }
[data-theme="light"] .cell.hold { background: rgba(212, 160, 60, .85); color: #2A1F06 }

[data-theme="light"] .mnav { background: rgba(238, 242, 244, .98) }
[data-theme="light"] .demo-flag { background: rgba(255, 255, 255, .95) }

/* --------------------------------------------------------- кнопка темы */

.theme-btn {
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 11px; width: 42px; height: 38px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--mist);
  transition: color .2s, border-color .2s;
}
.theme-btn:hover { color: var(--turq-hi); border-color: var(--turq) }
.theme-btn:focus-visible { outline: 2px solid var(--turq-hi); outline-offset: -2px }
/* Иконка показывает то, что получишь: в тёмной — солнце, в светлой — луну. */
.theme-btn .tb-moon { display: none }
[data-theme="light"] .theme-btn .tb-sun,
[data-theme="light"] .theme-btn .tb-rays { display: none }
[data-theme="light"] .theme-btn .tb-moon { display: block }

/* ---------------------------------------------------------- форма заявки */

.lead-card { max-width: 780px }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px }
.lead-grid .full { grid-column: 1 / -1 }
.fld { display: grid; gap: 7px }
.fld > span {
  font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mist);
}
.fld input {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 13px; color: var(--paper); font: inherit; width: 100%;
}
.fld input:focus-visible { outline: 2px solid var(--turq); outline-offset: 0; border-color: var(--turq) }
.fld input.bad { border-color: var(--down) }
.lead-actions { display: flex; gap: 14px; align-items: center; margin-top: 18px; flex-wrap: wrap }
@media (max-width: 640px) { .lead-grid { grid-template-columns: 1fr } }

/* ------------------------------------------------- язык и бургер-меню */

.lang-sw { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.lang-sw button {
  appearance: none; background: none; border: 0; color: var(--mist); cursor: pointer;
  font: 600 12px/1 "JetBrains Mono", monospace; letter-spacing: .08em; padding: 9px 11px;
  transition: color .2s, background .2s;
}
.lang-sw button + button { border-left: 1px solid var(--line) }
.lang-sw button.on { background: rgba(41, 179, 164, .14); color: var(--turq-hi) }
.lang-sw button:focus-visible { outline: 2px solid var(--turq-hi); outline-offset: -2px }

.burger {
  display: none; appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 11px; width: 42px; height: 38px; cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--paper);
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2) { opacity: 0 }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.mnav {
  position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0; z-index: 58;
  background: rgba(10, 21, 32, .97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: none; flex-direction: column; gap: 24px;
  padding: 26px 24px calc(26px + env(safe-area-inset-bottom));
  overflow: auto;
}
.mnav.open { display: flex }
.mnav nav { display: grid }
.mnav nav a {
  font: 600 19px/1.3 "Unbounded", sans-serif; padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}
.mnav nav a:active { color: var(--turq-hi) }
.mnav-cta { display: grid; gap: 10px }
.mnav-cta .btn { justify-content: center }
.mnav .lang-sw { align-self: flex-start }
.mnav .lang-sw button { font-size: 13px; padding: 12px 16px }

@media (max-width: 900px) {
  .burger { display: flex }
  .head-cta .lang-sw { display: none }   /* на телефоне язык живёт в панели */
}
@media (max-width: 560px) {
  .head-cta .btn.ghost { display: none } /* «Витрина» есть в панели */
}


/* ------------------------------------------------------------ светлая тема

   Тёмная — родная и остаётся по умолчанию; светлая включается кнопкой
   в шапке и живёт в localStorage "estiq_theme". Краски данных — из
   провалидированной светлой палитры «Штаба» (hq/DESIGN-charts.md):
   интерфейсная бирюза #29B3A4 на белом слишком светла, поэтому краска
   темнеет до #1F9A8C, а цифры и наведение — до #10847A. */

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #EEF2F4;
  --surface: #E5EBEE;
  --card: #FFFFFF;
  --line: #D3DDE2;
  --paper: #0A1520;
  --mist: #5B6F7B;
  --turq: #1F9A8C;
  --turq-hi: #10847A;
  --glow: rgba(31, 154, 140, .28);
  --up: #10847A;
  --down: #B5462F;
  --warn: #A46F0F;
  --shadow: 0 24px 48px -30px rgba(23, 49, 71, .28);
  --shadow-lift: 0 36px 70px -34px rgba(23, 49, 71, .38);
}

/* Сцена и её подписи остаются в ночном мире и на светлой теме. */
[data-theme="light"] #journey {
  --paper: #E9EEF0; --mist: #8CA0AB; --turq: #29B3A4; --turq-hi: #43D8C6;
}

[data-theme="light"] header.top { background: rgba(238, 242, 244, .82) }
[data-theme="light"] header.top.stuck { background: rgba(238, 242, 244, .95) }
[data-theme="light"] nav.main a:hover,
[data-theme="light"] nav.main a.on { color: var(--paper); background: rgba(10, 21, 32, .06) }
[data-theme="light"] .lang-sw button.on { background: rgba(31, 154, 140, .12) }

[data-theme="light"] .door { background: linear-gradient(180deg, #FFFFFF, #EEF3F5) }
[data-theme="light"] .door p { text-shadow: none }
[data-theme="light"] .door::before {
  background: radial-gradient(320px 220px at var(--mx, 50%) var(--my, 0%), rgba(31,154,140,.10), transparent 70%);
}

[data-theme="light"] .msg.bot { background: #E7EEF1 }
[data-theme="light"] .msg.res {
  background: linear-gradient(180deg, rgba(31, 154, 140, .10), rgba(31, 154, 140, .03));
  border-color: rgba(31, 154, 140, .45);
}

[data-theme="light"] .cell { background: #DEE7EB; color: rgba(10, 21, 32, .35) }
[data-theme="light"] .cell.free { background: rgba(31, 154, 140, .85); color: #FFFFFF }
[data-theme="light"] .cell.hold { background: rgba(212, 160, 60, .85); color: #2A1F06 }

[data-theme="light"] .mnav { background: rgba(238, 242, 244, .98) }
[data-theme="light"] .demo-flag { background: rgba(255, 255, 255, .95) }

/* --------------------------------------------------------- кнопка темы */

.theme-btn {
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 11px; width: 42px; height: 38px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--mist);
  transition: color .2s, border-color .2s;
}
.theme-btn:hover { color: var(--turq-hi); border-color: var(--turq) }
.theme-btn:focus-visible { outline: 2px solid var(--turq-hi); outline-offset: -2px }
/* Иконка показывает то, что получишь: в тёмной — солнце, в светлой — луну. */
.theme-btn .tb-moon { display: none }
[data-theme="light"] .theme-btn .tb-sun,
[data-theme="light"] .theme-btn .tb-rays { display: none }
[data-theme="light"] .theme-btn .tb-moon { display: block }

/* ---------------------------------------------------------- форма заявки */

.lead-card { max-width: 780px }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px }
.lead-grid .full { grid-column: 1 / -1 }
.fld { display: grid; gap: 7px }
.fld > span {
  font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mist);
}
.fld input {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 13px; color: var(--paper); font: inherit; width: 100%;
}
.fld input:focus-visible { outline: 2px solid var(--turq); outline-offset: 0; border-color: var(--turq) }
.fld input.bad { border-color: var(--down) }
.lead-actions { display: flex; gap: 14px; align-items: center; margin-top: 18px; flex-wrap: wrap }
@media (max-width: 640px) { .lead-grid { grid-template-columns: 1fr } }

/* ------------------------------------------------- язык и бургер-меню */

.lang-sw { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.lang-sw button {
  appearance: none; background: none; border: 0; color: var(--mist); cursor: pointer;
  font: 600 12px/1 "JetBrains Mono", monospace; letter-spacing: .08em; padding: 9px 11px;
  transition: color .2s, background .2s;
}
.lang-sw button + button { border-left: 1px solid var(--line) }
.lang-sw button.on { background: rgba(41, 179, 164, .14); color: var(--turq-hi) }
.lang-sw button:focus-visible { outline: 2px solid var(--turq-hi); outline-offset: -2px }

.burger {
  display: none; appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 11px; width: 42px; height: 38px; cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--paper);
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2) { opacity: 0 }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.mnav {
  position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0; z-index: 58;
  background: rgba(10, 21, 32, .97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: none; flex-direction: column; gap: 24px;
  padding: 26px 24px calc(26px + env(safe-area-inset-bottom));
  overflow: auto;
}
.mnav.open { display: flex }
.mnav nav { display: grid }
.mnav nav a {
  font: 600 19px/1.3 "Unbounded", sans-serif; padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}
.mnav nav a:active { color: var(--turq-hi) }
.mnav-cta { display: grid; gap: 10px }
.mnav-cta .btn { justify-content: center }
.mnav .lang-sw { align-self: flex-start }
.mnav .lang-sw button { font-size: 13px; padding: 12px 16px }

@media (max-width: 900px) {
  .burger { display: flex }
  .head-cta .lang-sw { display: none }   /* на телефоне язык живёт в панели */
}
@media (max-width: 560px) {
  .head-cta .btn.ghost { display: none } /* «Витрина» есть в панели */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important }
  .rv { opacity: 1; transform: none }
}

/* ------------------------------------------------- согласие в форме заявки и уведомление о cookie */
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--mist); cursor: pointer }
.consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--turq); cursor: pointer }
.consent-err { margin: 6px 0 0; color: var(--warn) }
/* /cookie-notice.js: цвета темы; на телефоне плашка встаёт над «Демонстрацией» в правом нижнем углу */
:root { --cn-bg: var(--card); --cn-fg: var(--paper); --cn-border: var(--line); --cn-link: var(--turq-hi); --cn-btn-bg: var(--turq); --cn-btn-fg: #06281F;
  --cn-radius: 14px; --cn-btn-radius: 10px; --cn-font: 400 14px/1.45 "Golos Text", system-ui, sans-serif; --cn-bottom-m: 76px }