/* IGOSHEV PRO v3. Мир: рабочая система заявок. Главная показывает систему, страницы решений — продукт в работе.
   Широкий гротеск только в заголовках. Цвет несут статусы заявок и главное действие. Одна рукописная деталь у сцены. */
:root {
  --bg: #EDF1EF;
  --surface: #F8FAF9;
  --ink: #0F2420;
  --ink-2: #4B5E59;
  --line: #D3DCD9;
  --accent: #157A55;
  --accent-hover: #0F6345;
  --on-accent: #F4FBF8;
  --accent-soft: #D6EDE3;
  --warn: #8A5A0F;
  --warn-soft: #FBEBC8;
  --blue: #2F5BD3;
  --blue-soft: #DDE6FB;
  --chat-bg: #E2E9E6;
  --bubble-in: #FFFFFF;
  --bubble-out: #CFEBDD;
  --bezel: #0F2420;
  --shadow: 0 40px 80px -40px rgba(15, 36, 32, .45);
  --display: 'Unbounded', 'Arial Black', Arial, sans-serif;
  --body: 'Manrope', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1513; --surface: #13201D; --ink: #E6EEEB; --ink-2: #9BB0AA; --line: #233532;
    --accent: #3FBF8A; --accent-hover: #5CD3A1; --on-accent: #0C1513; --accent-soft: #173A2E;
    --warn: #F0B95A; --warn-soft: #3A2E14; --blue: #8EA8F2; --blue-soft: #1C2A4D;
    --chat-bg: #101C19; --bubble-in: #1A2925; --bubble-out: #1D4535; --bezel: #2A3F3A;
    --shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1513; --surface: #13201D; --ink: #E6EEEB; --ink-2: #9BB0AA; --line: #233532;
  --accent: #3FBF8A; --accent-hover: #5CD3A1; --on-accent: #0C1513; --accent-soft: #173A2E;
  --warn: #F0B95A; --warn-soft: #3A2E14; --blue: #8EA8F2; --blue-soft: #1C2A4D;
  --chat-bg: #101C19; --bubble-in: #1A2925; --bubble-out: #1D4535; --bezel: #2A3F3A;
  --shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.55 var(--body); -webkit-font-smoothing: antialiased; caret-color: var(--accent); touch-action: manipulation; }
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-weight: 800; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
a { color: inherit; text-underline-offset: 4px; }
.ph { color: var(--accent); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section[id] { scroll-margin-top: 16px; }
.band { padding-block: 112px; }
.band.tint { background: var(--surface); }
.head { display: grid; gap: 16px; max-width: 780px; margin-bottom: 56px; }
.head h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.head p { color: var(--ink-2); font-size: 19px; max-width: 58ch; }

/* Кнопки: прямоугольные, плотные, иконка Telegram в цветной плитке */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 58px; padding: 0 24px; border-radius: 14px;
  font: 800 17px/1 var(--body); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer; position: relative;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease, translate .25s cubic-bezier(.2, .8, .2, 1);
}
.btn-main { background: var(--ink); color: var(--bg); padding-left: 10px; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 24px -16px rgba(15, 36, 32, .7); }
.btn-main:not(:has(.ico)) { padding-left: 24px; }
.btn-main:hover { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 26px -16px rgba(15, 36, 32, .75); }
.btn .ico {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.btn:hover .ico { transform: rotate(-8deg) scale(1.05); }
.btn .ico svg { width: 20px; height: 20px; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* Шапка */
.top { padding-block: 20px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font-family: var(--display); font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: -0.01em; }
.nav { display: flex; gap: 26px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.top .btn { min-height: 46px; font-size: 15px; padding-right: 16px; padding-left: 6px; gap: 10px; border-radius: 12px; }
.top .btn .ico { width: 34px; height: 34px; border-radius: 9px; }

/* Главная: система */
.hero { padding-block: 64px 104px; }
.hero.sys { padding-bottom: 0; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px 64px; align-items: end; }
.hero h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; }
.hero-side { display: grid; gap: 26px; }
.lead { font-size: 20px; color: var(--ink-2); max-width: 36em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.facts { list-style: none; padding: 26px 0 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 56px; border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 2px; }
.facts b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.facts span { color: var(--ink-2); font-size: 16px; }

.board-wrap { margin-top: 56px; position: relative; }
.board { background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: 22px 22px 0 0; box-shadow: var(--shadow); overflow: hidden; }
.bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.bar .addr { margin-left: 14px; font-size: 13px; color: var(--ink-2); background: var(--bg); border-radius: 8px; padding: 5px 12px; }
.bar .tag, .chat-tag { margin-left: auto; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.app { display: grid; grid-template-columns: 200px 1fr 300px; min-height: 420px; }
.side { border-right: 1px solid var(--line); padding: 18px 12px; display: grid; gap: 4px; align-content: start; font-size: 15px; }
.side span { padding: 9px 12px; border-radius: 10px; color: var(--ink-2); }
.side .on { background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.main { padding: 22px 24px; min-width: 0; }
.main-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.main-top b { font-size: 18px; }
.main-top span { font-size: 14px; color: var(--ink-2); }
.leads { width: 100%; border-collapse: collapse; font-size: 14px; }
.leads th { text-align: left; font-weight: 700; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.leads td { padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.leads td.t { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.p-new { background: var(--warn-soft); color: var(--warn); }
.p-work { background: var(--blue-soft); color: var(--blue); }
.p-ok { background: var(--accent-soft); color: var(--accent); }
.stats { border-left: 1px solid var(--line); padding: 22px; display: grid; gap: 18px; align-content: start; }
.stats b { font-size: 15px; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 120px; }
.bars span { background: var(--accent-soft); border-radius: 6px 6px 2px 2px; }
.bars span.hi { background: var(--accent); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; font-size: 12px; color: var(--ink-2); text-align: center; }
.src { display: grid; gap: 8px; font-size: 14px; }
.src div { display: flex; justify-content: space-between; gap: 10px; }
.src span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
.toast { position: absolute; right: 28px; top: 92px; width: min(330px, 70%); background: var(--ink); color: var(--bg); border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.toast i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 7px; grid-row: span 2; }
.toast b { font-size: 15px; }
.toast span { font-size: 14px; opacity: .8; }
@keyframes slide { from { opacity: 0; transform: translateY(-14px); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (min-width: 1101px) {
  .play .row-new { animation: slide .6s cubic-bezier(.2,.8,.2,1) 1s both; }
  .play .toast { animation: pop .5s cubic-bezier(.2,.8,.2,1) 1.6s both; }
}

/* Было и стало */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ba-col { border-radius: 24px; padding: 34px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.ba-col.before { background: var(--bg); border: 1px solid var(--line); }
.ba-col.after { background: var(--ink); color: var(--bg); }
.ba-col h3 { font-size: 22px; }
.ev { display: grid; grid-template-columns: 64px 1fr; gap: 14px; }
.ev time { font-weight: 800; font-variant-numeric: tabular-nums; }
.before .ev p { color: var(--ink-2); }
.after .ev p { opacity: .82; }
.ba-col .end { padding-top: 16px; border-top: 1px solid rgba(127, 150, 144, .35); font-weight: 800; }

/* Решения строками */
.offers { border-top: 1px solid var(--line); }
.offer { display: grid; grid-template-columns: 1.1fr 1.6fr 0.6fr 0.8fr; gap: 28px; align-items: baseline; padding: 28px 14px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .18s ease; border-radius: 4px; }
a.offer:hover { background: var(--surface); }
.offer h3 { font-size: 22px; }
.offer p { color: var(--ink-2); font-size: 17px; }
.offer .term { color: var(--accent); font-weight: 800; font-size: 16px; }
.offer .price { font-size: 20px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.offer h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .18s ease; }
a.offer:hover h3 { text-decoration-color: currentColor; }

/* Квиз: строки-варианты и смета */
.quiz { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
.qz { display: grid; gap: 40px; min-width: 0; }
.qz-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.qz-step legend { padding: 0; margin-bottom: 16px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 14px; }
.qz-n { font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qz-opt {
  position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 14px; cursor: pointer;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .15s ease, background-color .15s ease;
}
.qz-opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.qz-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.qz-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); margin-top: 1px; transition: box-shadow .15s ease, background-color .15s ease; }
.qz-t { display: grid; gap: 2px; }
.qz-t b { font-size: 17px; }
.qz-t small { font-size: 14px; color: var(--ink-2); }
.qz-opt.on { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.qz-opt.on .qz-dot { background: var(--accent); box-shadow: inset 0 0 0 5px var(--surface), 0 0 0 2px var(--accent); }
.qz-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.est {
  position: sticky; top: 24px; border-radius: 22px; padding: 30px; display: grid; gap: 12px; min-width: 0;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(15, 36, 32, .5);
}
.est-h { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.est-name { font-family: var(--display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-weight: 700; }
.est-why { color: var(--ink-2); font-size: 16px; margin-bottom: 8px; }
.lr { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.lr i { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-4px); min-width: 20px; }
.lr span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr.total { margin-top: 6px; padding-top: 14px; border-top: 1.5px solid var(--ink); font-size: 18px; }
.lr.total span:last-child { font-size: 26px; letter-spacing: -0.02em; }
.est .btn { margin-top: 10px; justify-self: stretch; }
.est-more { font-weight: 700; font-size: 15px; justify-self: center; color: var(--ink-2); }
.est-more:hover { color: var(--ink); }

/* Сцена переписки (страницы решений) */
.hero .wrap > .hero-text { min-width: 0; }
.hero:not(.sys) .wrap { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 56px; align-items: center; }
.hero:not(.sys) .hero-text { display: grid; gap: 26px; }
.hero.svc h1 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; }
.trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.scene { position: relative; justify-self: center; width: min(100%, 390px); padding-bottom: 56px; }
.phone { background: var(--chat-bg); border: 10px solid var(--bezel); border-radius: 40px; overflow: hidden; box-shadow: var(--shadow); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--accent); color: var(--on-accent); }
.chat-title { display: grid; line-height: 1.25; min-width: 0; }
.chat-title b { font-size: 16px; }
.chat-title span { font-size: 13px; color: var(--accent); }
.chat { display: grid; gap: 10px; padding: 18px 14px 22px; min-height: 380px; align-content: start; }
.msg { max-width: 82%; padding: 10px 14px 8px; border-radius: 18px; font-size: 15px; line-height: 1.4; background: var(--bubble-in); color: var(--ink); box-shadow: 0 1px 1px rgba(15, 36, 32, .08); }
.msg.in { justify-self: start; border-bottom-left-radius: 6px; }
.msg.out { justify-self: end; background: var(--bubble-out); border-bottom-right-radius: 6px; }
.msg time { display: block; text-align: right; font-size: 11px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.msg .chip { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 10px; text-align: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14px; }
.msg.push { max-width: 100%; justify-self: stretch; border-radius: 16px; display: grid; gap: 2px; background: var(--surface); }
.msg.push b { font-size: 14px; }
.msg.push span { font-size: 14px; color: var(--ink-2); }
.note { position: absolute; left: -28px; right: 40px; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: var(--bg); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5); }
.note .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 7px; grid-row: span 2; }
.note b { font-size: 15px; }
.note span { font-size: 14px; opacity: .8; }
@media (min-width: 1021px) {
  .anim .msg, .anim .note { animation: pop .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
}
.hand { position: absolute; left: -64px; top: -66px; width: 280px; font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 600; font-size: 26px; line-height: 1.05; color: var(--accent); transform: rotate(-3deg); }
.hand svg { display: block; width: 64px; height: 32px; margin: 0 0 0 96px; transform: rotate(38deg); }

/* Калькулятор */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.calc-in { display: grid; gap: 28px; min-width: 0; }
.range { display: grid; gap: 10px; }
.range-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.range label { font-weight: 800; font-size: 17px; }
.range output { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.range small { color: var(--ink-2); font-size: 14px; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; }
.calc-out { border-radius: 24px; padding: 36px; display: grid; gap: 18px; min-width: 0; background: var(--ink); color: var(--bg); }
.calc-out p { color: inherit; opacity: .8; font-size: 17px; }
.calc-out .calc-sum { font-family: var(--display); font-size: clamp(38px, 4.6vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; opacity: 1; }
.calc-out .calc-hint { font-size: 14px; opacity: .65; }
.calc-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }
.calc-meta b { font-variant-numeric: tabular-nums; }
.calc-out .btn-main { justify-self: start; background: var(--bg); color: var(--ink); }

/* Сравнение */
.compare-box { overflow-x: auto; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 17px; }
.compare th, .compare td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 16px; color: var(--ink-2); font-weight: 700; }
.compare tbody th { font-weight: 800; width: 26%; }
.compare td { color: var(--ink-2); }
.compare .us { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.compare thead .us { color: var(--accent); }

/* Кому подходит, сценарий, что входит */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.row-item { padding: 22px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; }
.row-item p { color: var(--ink-2); font-size: 17px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step { display: grid; gap: 8px; align-content: start; min-width: 0; }
.step .n { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--accent-soft); color: var(--accent); }
.step p { color: var(--ink-2); font-size: 16px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 17px; }
.checks svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.checks b { display: block; }
.checks span { color: var(--ink-2); }
.pack { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: start; }
.price-panel { border-radius: 22px; padding: 30px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(15, 36, 32, .5); display: grid; gap: 14px; }
.price-panel .line { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px dotted var(--line); font-size: 16px; }
.price-panel .line span:first-child { color: var(--ink-2); }
.price-panel .line span:last-child { font-weight: 800; }
.price-panel .big { font-family: var(--display); font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-panel .extra { font-size: 15px; color: var(--ink-2); }

/* Процесс и обещания */
.steps5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.steps5 li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 3px solid var(--ink); min-width: 0; }
.steps5 .d { font-weight: 800; color: var(--accent); font-size: 15px; }
.steps5 p { color: var(--ink-2); font-size: 16px; }
.promise { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.promise div { background: var(--accent-soft); border-radius: 20px; padding: 24px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.promise p { color: var(--ink-2); font-size: 16px; }
.seats { margin-top: 32px; font-size: 19px; font-weight: 800; }

/* Кто делает */
.founder { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.portrait { display: grid; gap: 14px; min-width: 0; }
.photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 28px; background: var(--accent-soft); border: 1.5px dashed var(--line); display: grid; place-items: center; align-content: center; gap: 8px; color: var(--accent); text-align: center; padding: 20px; }
.photo span { font-family: var(--display); font-size: 76px; font-weight: 700; }
.photo small { font-size: 15px; }
.video { font-weight: 800; }
.founder-text { display: grid; gap: 22px; min-width: 0; }
.founder-text .quote { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; max-width: 32em; }
.sign { color: var(--ink-2); font-size: 16px; }

/* Кейсы */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case { border: 1.5px dashed var(--line); border-radius: 22px; padding: 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.case h3 { font-size: 22px; }
.case dl { margin: 0; display: grid; gap: 12px; }
.case dt { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.case dd { margin: 0; }
.reviews { margin-top: 32px; color: var(--ink-2); }

/* Вопросы */
.faq { max-width: 880px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; font-weight: 800; font-size: 19px; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--ink-2); transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--ink-2); max-width: 64ch; }

/* Другие решения */
.others { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.other { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; min-width: 0; }
.other b { font-size: 18px; }
.other span { color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.other:hover b { text-decoration: underline; }

/* Финал: тёмная полоса */
.final { background: var(--ink); color: var(--bg); }
.final .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; }
.final-text { display: grid; gap: 22px; min-width: 0; }
.final-text h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.06; }
.final-text > p { opacity: .82; font-size: 19px; }
.final .btn-main { background: var(--bg); color: var(--ink); justify-self: start; }
.final .ph { color: var(--accent); }
.contacts { display: grid; gap: 10px; font-size: 17px; }
.contacts div { display: flex; gap: 14px; flex-wrap: wrap; }
.contacts span:first-child { opacity: .7; min-width: 6.5em; }
.proof { margin: 8px 0 0; padding-top: 22px; border-top: 1px solid rgba(127, 150, 144, .35); display: grid; gap: 8px; }
.proof blockquote { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 800; }
.proof figcaption { opacity: .75; font-size: 15px; }
form { background: var(--surface); color: var(--ink); border-radius: 24px; padding: 30px; display: grid; gap: 16px; min-width: 0; }
.final form .btn-main { background: var(--ink); color: var(--bg); width: 100%; }
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; font-weight: 800; }
.field .opt { font-weight: 500; color: var(--ink-2); }
input[type="text"], textarea, select { font: inherit; font-size: 17px; color: var(--ink); background: var(--bg); border: 0; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 12px; padding: 14px 15px; width: 100%; transition: box-shadow .15s ease; }
input[type="text"]:hover, textarea:hover, select:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft); }
textarea { min-height: 96px; resize: vertical; }
.form-error { color: #B42318; font-size: 15px; }
.result { display: grid; gap: 10px; }
.result pre { margin: 0; white-space: pre-wrap; font: 15px/1.5 var(--body); background: var(--bg); border-radius: 12px; padding: 14px; }
.small { font-size: 14px; color: var(--ink-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.consent a { color: inherit; }
.result.ok { background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; }
.result.ok p { margin: 0; }
footer { padding-block: 32px; color: var(--ink-2); font-size: 15px; border-top: 1px solid var(--line); }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.sticky { display: none; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-error { color: #FF8A7A; } }
:root[data-theme="dark"] .form-error { color: #FF8A7A; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .side, .stats { display: none; }
  .toast { top: auto; bottom: 18px; right: 18px; }
  .promise { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
  .nav { display: none; }
  .hero-grid, .hero:not(.sys) .wrap, .quiz, .founder, .final .wrap, .calc, .pack { grid-template-columns: 1fr; gap: 40px; }
  .scene { justify-self: start; }
  .hand { display: none; }
  .ba, .split { grid-template-columns: 1fr; }
  .steps5 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .cases { grid-template-columns: 1fr; }
  .others { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(2, auto); }
  .photo { max-width: 340px; }
  .est { position: static; }
  .offer { grid-template-columns: 1fr auto; gap: 6px 20px; }
  .offer p { grid-column: 1 / -1; grid-row: 2; }
  .offer .term { grid-column: 1; grid-row: 3; }
  .offer .price { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .band { padding-block: 72px; }
  .hero { padding-block: 32px 72px; }
  .top .btn { display: none; }
  .cta-row .btn { flex: 1 1 100%; }
  .qz-opts, .steps5, .steps, .promise, .others { grid-template-columns: 1fr; }
  .leads th:nth-child(3), .leads td:nth-child(3), .leads th:nth-child(4), .leads td:nth-child(4) { display: none; }
  .main { padding: 16px; }
  .toast { position: static; width: auto; margin: 0 16px 16px; }
  .note { left: 0; right: 0; }
  .ba-col, .est, form, .calc-out, .price-panel { padding: 24px; }
  .sticky { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: var(--surface); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; }
  .sticky .btn { min-height: 52px; }
  .sticky .btn-main { flex: 1; }
  .sticky.show { transform: none; }
  body { padding-bottom: 84px; }
}

[hidden] { display: none !important; }

/* ---- Раунд 2: уровень студии ---- */
@media (min-width: 1021px) { .band { padding-block: 136px; } }
.micro { font-size: 14px; color: var(--ink-2); }
.micro.center { justify-self: center; text-align: center; }
.final .micro { color: inherit; opacity: .7; }

/* Стек бонусов: ценность против цены */
.stack { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 64px; align-items: center; }
.stack-list { display: grid; gap: 18px; min-width: 0; }
.stack-list .lr { font-size: 17px; align-items: flex-end; }
.stack-list .lr > span:first-child { display: grid; gap: 2px; }
.stack-list .lr small { color: var(--ink-2); font-size: 15px; }
.stack-list .lr.total { font-size: 18px; }
.stack-side { display: grid; gap: 10px; }
.stack-big { white-space: nowrap; font-family: var(--display); font-size: clamp(40px, 5.2vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: .95; color: var(--accent); font-variant-numeric: tabular-nums; }
.stack-side p:last-child { color: var(--ink-2); font-size: 18px; max-width: 22em; }
.promise .g { background: var(--ink); color: var(--bg); }
.promise .g p, .promise .g .ph { color: var(--accent-soft); opacity: 1; }

/* Заголовок по словам: один открывающий ход */
.w { display: inline-block; }
@media (min-width: 1021px) {
  .anim .words .w { animation: word .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
}
@keyframes word { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }

/* Панель разворачивается при прокрутке (где браузер умеет) */
@supports (animation-timeline: view()) {
  @media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .board { animation: tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; transform-origin: 50% 0; }
    @keyframes tilt { from { transform: perspective(1600px) rotateX(16deg) scale(.94); } to { transform: none; } }
  }
}

@media (max-width: 1020px) { .stack { grid-template-columns: 1fr; gap: 28px; } .stack-side { order: -1; } }

/* ---- Правки 13.11: кнопка Telegram, тихая шапка, ровные карточки ---- */
/* Главная кнопка «Написать» (15.11): глубокий красный в пару к бирюзе палитры.
   Без прыжка и цветного свечения; движение — только магнит к курсору (app.js). */
:root { --tg: #A8243E; --tg-hover: #8E1D34; --on-tg: #FFFFFF; }

.btn-tg {
  background: var(--tg); color: var(--on-tg); padding: 0 22px 0 18px; gap: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 10px 20px -14px rgba(0, 0, 0, .45);
  transition: background-color .18s ease, box-shadow .18s ease, translate .25s cubic-bezier(.2, .8, .2, 1);
}
.btn-tg:hover { background: var(--tg-hover); }
.btn-tg:active { background: var(--tg-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset; }
.btn-tg .ico { width: auto; height: auto; background: none; border-radius: 0; color: inherit; }
/* Самолётик по центру текста (подобрано с Дмитрием 15.11); при наведении не двигается */
.btn-tg .ico svg { width: 20px; height: 20px; }
.btn-tg:hover .ico, .btn-tg:hover .ico svg { transform: none; }
.final .btn-tg, .calc-out .btn-tg { background: var(--tg); color: var(--on-tg); }
.final .btn-tg:hover { background: var(--tg-hover); }
.sticky .btn-tg { flex: 1; }

/* Шапка: вместо второй кнопки — тихая ссылка на ник */
.tg-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); padding: 8px 2px; }
.tg-link svg { width: 18px; height: 18px; color: var(--tg); }
.tg-link span { border-bottom: 1.5px solid var(--line); transition: border-color .15s ease; }
.tg-link:hover span { border-color: var(--ink); }
@media (max-width: 640px) { .tg-link span { display: none; } .tg-link svg { width: 24px; height: 24px; } }

/* Ровные карточки: строки выравниваются между соседями */
.ba { grid-template-rows: repeat(5, auto); row-gap: 0; }
.ba-col { grid-row: span 5; display: grid; grid-template-rows: subgrid; gap: 20px; }
.ba-col .end { align-self: end; }
.promise { grid-template-rows: auto auto; row-gap: 0; }
.promise div { grid-row: span 2; display: grid; grid-template-rows: subgrid; gap: 8px; }
.steps5 { grid-template-rows: auto auto auto; row-gap: 0; }
.steps5 li { grid-row: span 3; display: grid; grid-template-rows: subgrid; gap: 8px; }
@media (max-width: 1020px) {
  .ba { grid-template-rows: none; row-gap: 24px; }
  .ba-col { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 1100px) { .promise { grid-template-rows: none; row-gap: 20px; } .promise div { grid-row: auto; grid-template-rows: none; } }
@media (max-width: 1020px) { .steps5 { grid-template-rows: none; row-gap: 20px; } .steps5 li { grid-row: auto; grid-template-rows: none; } }
.top .btn-tg { padding: 0 17px 0 14px; gap: 7px; }
.top .btn-tg .ico { width: auto; height: auto; }
.top .btn-tg .ico svg { width: 18px; height: 18px; }
.final .btn-tg { justify-self: start; }
@media (max-width: 640px) { .top .btn-tg { display: inline-flex; min-height: 42px; padding: 0 14px 0 11px; font-size: 14px; gap: 6px; } }
.logo { white-space: nowrap; }
@media (max-width: 640px) { .top .tx { display: none; } }

/* Трафик: цена с ведением и связка */
.offer .price small { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.bundle { margin-top: 48px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: center; padding: 40px; border-radius: 28px; background: var(--ink); color: var(--bg); }
.bundle h3 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.bundle-text { display: grid; gap: 18px; min-width: 0; }
.bundle-text > p { opacity: .82; font-size: 18px; max-width: 38em; }
.bundle .checks { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.bundle .checks svg { color: var(--accent); }
.bundle-price { display: grid; gap: 6px; justify-items: start; }
.bundle-price .old { text-decoration: line-through; opacity: .6; font-size: 18px; font-variant-numeric: tabular-nums; }
.bundle-price .new { font-family: var(--display); font-size: clamp(36px, 4vw, 52px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bundle-price .bt { opacity: .75; font-size: 16px; margin-bottom: 14px; }
.bundle .btn-main { background: var(--bg); color: var(--ink); }
@media (max-width: 1020px) { .bundle { grid-template-columns: 1fr; padding: 28px; gap: 28px; } .bundle .checks { grid-template-columns: 1fr; } }

/* ---- Навигация мультилендинга ---- */
.top { position: relative; z-index: 30; }
.nav { align-items: center; }
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 0; font: 600 16px var(--body); color: var(--ink-2); cursor: pointer; }
.dd-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.dd:hover .dd-btn, .dd.open .dd-btn, .dd.cur .dd-btn { color: var(--ink); }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: 100%; left: -18px; width: 360px; padding: 10px; margin-top: 6px;
  display: none; gap: 2px; border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(15, 36, 32, .45);
}
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd.open .dd-menu, .dd:hover .dd-menu, .dd:focus-within .dd-menu { display: grid; }
.dd-menu a, .mnav-list a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.dd-menu a:hover, .mnav-list a:hover { background: var(--bg); }
.dd-menu b, .mnav-list b { font-size: 16px; }
.dd-menu span, .mnav-list span { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.dd-menu a[aria-current] b, .mnav-list a[aria-current] b { color: var(--accent); }
.top-r { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease; }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(15, 36, 32, .5); padding-block: 8px 20px; max-height: calc(100vh - 90px); overflow-y: auto; }
.mnav-h { font-size: 14px; font-weight: 800; color: var(--accent); margin: 14px 0 4px; }
.mnav-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mnav-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 700; }
.mnav-more a { text-decoration: none; }
@media (max-width: 1020px) { .burger { display: block; } }
@media (max-width: 640px) { .mnav-list { grid-template-columns: 1fr; } }
@media (min-width: 1021px) { .mnav { display: none !important; } }

/* Явная ссылка в строке услуги */
.offer .go { display: block; margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
a.offer:hover .go { text-decoration-color: var(--accent); }

/* Подвал: карта сайта */
footer { padding-block: 64px 40px; }
.f-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.f-grid > div { display: grid; gap: 10px; align-content: start; }
.f-brand p { font-size: 15px; color: var(--ink-2); max-width: 30ch; }
.f-h { font-size: 14px; font-weight: 800; color: var(--ink); }
.f-grid a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.f-grid a:hover { color: var(--ink); }
.f-grid .logo { color: var(--ink); font-size: 17px; }
@media (max-width: 1020px) { .f-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .f-grid { grid-template-columns: 1fr; } }
.top .mnav .wrap { display: block; }
.burger span { transform-origin: 50% 50%; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Первый экран главной: одна колонка, одна мысль */
.hero-one { display: grid; gap: 30px; max-width: 1040px; }
.hero.sys h1 { font-size: clamp(42px, 7.2vw, 104px); line-height: .98; letter-spacing: -0.035em; max-width: 11.5em; }
.hero.sys .lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; max-width: 34em; }
.cta-block { display: grid; gap: 12px; justify-items: start; margin-top: 6px; }
.hero.sys { padding-top: 88px; }
.hero.sys .facts { margin-top: 72px; }
@media (max-width: 640px) {
  .hero.sys { padding-top: 32px; }
  .hero-one { gap: 22px; }
  .cta-block { justify-items: stretch; }
  .hero.sys .facts { margin-top: 48px; }
}
h1.words { text-wrap: wrap; }
.hero.sys h1 { font-size: clamp(40px, 6.4vw, 94px); max-width: none; }
.hero-one { max-width: 1200px; }

/* ---- Регион, валюта и язык ---- */
.loc .dd-btn { min-height: 44px; padding: 0 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.loc .dd-menu { left: auto; right: 0; width: 300px; }
.loc .dd-menu a[lang] { border-top: 1px solid var(--line); border-radius: 0; }
.loc .dd-menu a[lang] + a[lang] { border-top: 0; }
.vat { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.eu-contacts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.f-legal { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
@media (max-width: 640px) { .loc .dd-btn { min-height: 42px; padding: 0 10px; } .loc .dd-btn svg { display: none; } }
@media (max-width: 640px) { .top-r .loc { display: none; } }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 { -webkit-hyphens: auto; hyphens: auto; }
.offer h3 { min-width: 0; overflow-wrap: break-word; }
.first3 { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; }
.stack-side p:not(.stack-big) { color: var(--ink-2); font-size: 18px; max-width: 22em; }
.stack-side .first3 { font-size: 16px; color: var(--ink); }

/* ---- Чёрная пятница, лид-магнит, политика ---- */
.promo { background: var(--accent); color: #fff; font-size: 15px; line-height: 1.45; padding: 10px 0; }
.promo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lm { display: grid; gap: 20px; justify-items: start; max-width: 46em; }
.lm p { font-size: 19px; color: var(--ink-2); margin: 0; }
.cl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; counter-reset: cl; }
.cl li { counter-increment: cl; padding: 22px 24px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cl h3 { margin: 0 0 10px; font-size: 19px; }
.cl h3::before { content: counter(cl) ". "; color: var(--accent); }
.cl p { margin: 6px 0 0; font-size: 16px; color: var(--ink-2); }
.cl p b { color: var(--ink); }
.legal { max-width: 760px; }
.legal h2 { font-size: 22px; margin: 36px 0 10px; }
.legal p { font-size: 17px; }
@media (max-width: 760px) { .cl { grid-template-columns: 1fr; } }
@media print { .top, .promo, footer, .sticky, .cta-row, .band:last-of-type { display: none !important; } .cl li { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } }

/* Баннер cookies (Метрика только после согласия) */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); display: grid; gap: 10px; font-size: 15px; }
.cookie-bar p { margin: 0; }
.cookie-bar div { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-bar .btn { padding: 10px 16px; font-size: 15px; }
@media (max-width: 720px) { .cookie-bar { bottom: 84px; } }

/* ИИ-чат на сайте */
.chat-w { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 15px; }
.chat-fab { border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 var(--body); padding: 14px 18px; border-radius: 999px; box-shadow: var(--shadow); }
.chat-w.on .chat-fab { display: none; }
.chat-panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-panel header { padding: 12px 44px 10px 16px; border-bottom: 1px solid var(--line); position: relative; display: grid; }
.chat-panel header span { font-size: 13px; color: var(--ink-2); }
.chat-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-2); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--chat-bg); }
.chat-m { max-width: 85%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; line-height: 1.45; }
.chat-m.them { background: var(--bubble-in); align-self: flex-start; }
.chat-m.me { background: var(--bubble-out); align-self: flex-end; }
.chat-m small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.chat-m.typing { opacity: .6; }
.chat-in { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-in textarea { min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; font-size: 16px; }
.chat-in .btn { padding: 0 16px; }
.chat-contact { padding: 10px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.chat-contact p { margin: 0; font-size: 14px; }
.chat-contact input[type="text"] { padding: 10px 12px; font-size: 16px; }
.chat-err { color: #B42318; }
.chat-leave { border: 0; background: none; color: var(--ink-2); font-size: 13px; padding: 0 12px 10px; text-align: left; cursor: pointer; text-decoration: underline; }
@media (max-width: 720px) { .chat-w { bottom: 84px; right: 12px; } .chat-fab { padding: 12px 14px; font-size: 14px; } }

/* ==== Правки 15.11 (аудит Hallmark + материалы) ==== */

/* Главный образ на первом экране: на широком экране панель заявок справа от заголовка */
@media (min-width: 1201px) {
  .hero.sys { padding-bottom: 96px; }
  .hero.sys .wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); column-gap: 56px; align-items: center; }
  .hero.sys .hero-one { grid-column: 1; grid-row: 1; gap: 26px; }
  .hero.sys h1 { font-size: clamp(38px, 3.5vw, 54px); line-height: 1.04; letter-spacing: -0.03em; }
  .hero.sys .facts { grid-column: 1; grid-row: 2; margin-top: 40px; gap: 12px 36px; }
  .hero.sys .facts b { font-size: 24px; }
  .hero.sys .board-wrap { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding-bottom: 28px; }
  .hero.sys .board { border-bottom: 1px solid var(--line); border-radius: 22px; animation: none; transform: none; }
  .hero.sys .app { grid-template-columns: 1fr; min-height: 0; }
  .hero.sys .side, .hero.sys .stats { display: none; }
  .hero.sys .main { padding: 20px 18px 8px; }
  .hero.sys .leads th:nth-child(4), .hero.sys .leads td:nth-child(4) { display: none; }
  .hero.sys .leads td { padding: 11px 8px; }
  .hero.sys .toast { top: auto; bottom: 0; right: auto; left: -28px; width: min(320px, 80%); }
}

/* Тёмные полосы задают свой цвет текста */
.band.tint { color: var(--ink); }

/* Плашка акции: текст цвета «на акценте» (белый на светло-зелёном в тёмной теме не читался) */
.promo, .promo a { color: var(--on-accent); }

/* Телефон: кнопка ИИ-чата появляется после первого экрана, как липкая панель, и не закрывает цифры */
@media (max-width: 720px) { html:not(.past-hero) .chat-w:not(.on) { display: none; } }

/* «Кто делает»: фото / видео основателя; пока материалов нет — спокойная карточка с инициалами */
.photo.media { padding: 0; border: 0; background: var(--surface); object-fit: cover; width: 100%; display: block; }
video.photo.media { background: var(--ink); }
.photo.mono { border: 0; background: var(--ink); color: var(--bg); }
.photo.mono span { font-size: clamp(64px, 7vw, 96px); letter-spacing: -0.04em; }
.video { justify-self: start; text-decoration: underline; text-underline-offset: 4px; }

/* Кейсы: настоящие, со скриншотом и ссылкой */
.case { border-style: solid; background: var(--surface); }
.case.has-img { padding-top: 0; overflow: hidden; }
.case-img { display: block; width: calc(100% + 52px); margin: 0 -26px 4px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); background: var(--bg); }
.case-link { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.reviews a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
/* Без фото блок не делает вид, что фото есть: компактный знак с инициалами над цитатой */
.founder:has(.mono) { grid-template-columns: 1fr; gap: 28px; max-width: 880px; }
.photo.mono { width: 96px; max-width: 96px; aspect-ratio: 1; border-radius: 50%; padding: 0; }
.photo.mono span { font-size: 34px; letter-spacing: -0.02em; }

/* Решения на главной: один раздел, внутри группы «Система», «ИИ», «Трафик» */
.offer-group + .offer-group { margin-top: 88px; }
.og-head { display: grid; gap: 10px; max-width: 760px; margin-bottom: 24px; scroll-margin-top: 96px; }
.offer-group[id] { scroll-margin-top: 96px; }
.og-head h3 { font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }
.og-head p { color: var(--ink-2); font-size: 18px; max-width: 58ch; }
@media (max-width: 640px) { .offer-group + .offer-group { margin-top: 56px; } }
/* Телефон: название решения во всю ширину, цена — в строку со сроком (подпись «+ абонемент…» не зажимает название) */
@media (max-width: 640px) {
  .offer h3 { grid-column: 1 / -1; grid-row: 1; }
  .offer .term { align-self: start; }
  .offer .price { grid-row: 3; text-align: right; }
  .offer .price small { white-space: normal; }
}

/* «Кто делает» → платформа IGOSHEV PRO: модули, которыми клиент будет пользоваться (вместо фото) */
.pf { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.tint .pf { background: var(--bg); }
.pf .addr { font-weight: 800; color: var(--ink); }
.pf-list { list-style: none; margin: 0; padding: 8px 18px 6px; display: grid; }
.pf-list li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pf-list li:last-child { border-bottom: 0; }
.pf-list li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pf-list b { font-size: 16px; }
.pf-list small { font-size: 14px; color: var(--ink-2); }
.pf-list .pill { flex: none; }
.pf-cap { padding: 14px 18px 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }

/* ---- Первый экран главной (15.11, с Дмитрием): как на страницах продуктов ---- */
.hero.sys .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Факты — равные колонки с тонкими разделителями, а не «по содержимому» */
.hero.sys .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; justify-content: stretch; }
.hero.sys .facts li { padding: 0 20px; border-left: 1px solid var(--line); }
.hero.sys .facts li:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 640px) {
  .hero.sys .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .hero.sys .facts li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero.sys .cta-row .btn { flex: 1 1 100%; }
}
/* Рукописная пометка над панелью заявок */
.hero.sys .board-wrap { position: relative; }
.hero.sys .hand { left: auto; right: 24px; top: -64px; width: auto; text-align: right; }
.hero.sys .hand svg { margin: 2px 0 0 auto; transform: scaleX(-1) rotate(38deg); }
@media (max-width: 1200px) { .hero.sys .hand { display: none; } }
@media (min-width: 1201px) {
  .hero.sys h1 { font-size: clamp(40px, 3.4vw, 52px); max-width: 12em; }
  .hero.sys .board-wrap { padding-top: 56px; }
}
@media (min-width: 1201px) {
  /* Заголовок в 2 строки; факты — во всю ширину под обеими колонками, чтобы подписи не переносились */
  .hero.sys h1 { font-size: clamp(40px, 3.2vw, 48px); max-width: none; }
  .hero.sys .facts { grid-column: 1 / -1; grid-row: 2; margin-top: 56px; }
  .hero.sys .board-wrap { grid-row: 1; align-self: center; }
}
/* Пометка ближе к окну (отступ снизу вдвое меньше) */
@media (min-width: 1201px) { .hero.sys .hand { top: -36px; } }
/* Таблица заявок: ровные колонки, статус по правому краю, без линии под последней строкой */
.hero.sys .leads { table-layout: fixed; }
.hero.sys .leads th:nth-child(1), .hero.sys .leads td:nth-child(1) { width: 18%; }
.hero.sys .leads th:nth-child(2), .hero.sys .leads td:nth-child(2) { width: 24%; }
.hero.sys .leads th:nth-child(3), .hero.sys .leads td:nth-child(3) { width: 30%; }
.hero.sys .leads th:last-child, .hero.sys .leads td:last-child { width: 28%; text-align: right; }
.hero.sys .leads th:first-child, .hero.sys .leads td:first-child { padding-left: 0; }
.hero.sys .leads th:last-child, .hero.sys .leads td:last-child { padding-right: 0; }
.hero.sys .leads tbody tr:last-child td { border-bottom: 0; padding-bottom: 4px; }
/* Адресная строка как в браузере: тянется до метки «пример» */
.hero.sys .bar .addr { flex: 1 1 auto; margin-right: 14px; text-align: left; }
/* Пометка «так выглядит ваша CRM» ниже, у самого окна (15.11) */
@media (min-width: 1201px) { .hero.sys .hand { top: -20px; } }
/* Таблица заявок (15.11, выбор Дмитрия): все колонки по левому краю, одна сетка 17/25/32/26 % */
.hero.sys .leads th:nth-child(1), .hero.sys .leads td:nth-child(1) { width: 17%; }
.hero.sys .leads th:nth-child(2), .hero.sys .leads td:nth-child(2) { width: 25%; }
.hero.sys .leads th:nth-child(3), .hero.sys .leads td:nth-child(3) { width: 32%; }
.hero.sys .leads th:last-child, .hero.sys .leads td:last-child { width: 26%; text-align: left; }
.hero.sys .leads th, .hero.sys .leads td { padding-left: 0; padding-right: 12px; }
.hero.sys .leads th { font-size: 13px; font-weight: 600; padding-top: 0; }
/* «Один вечер в двух салонах» (15.11): одинаковый шаг между записями внутри карточки
   вместо общей сетки строк (она давала дыры под короткими записями); итог прижат к низу,
   карточки равной высоты, заголовки одной высоты. */
.ba { grid-template-rows: none; row-gap: 24px; align-items: stretch; }
.ba-col { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; gap: 18px; }
.ba-col h3 { line-height: 1.25; margin: 0 0 4px; }
.ba-col .ev { align-items: baseline; }
.ba-col .end { margin-top: auto; align-self: stretch; }

/* ---- «Что мы делаем и сколько это стоит» (15.11): вкладки + карточки вместо таблицы на 14 строк ----
   Включается классом .offers-tabs на #offers (app.js). Без JS остаётся прежний список. */
.offers-tabs .og-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 8px 0 32px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.offers-tabs .og-tabs button { font: 700 15px/1 var(--body); color: var(--ink-2); background: none; border: 0; border-radius: 10px; padding: 12px 18px; cursor: pointer; transition: background-color .15s ease, color .15s ease; white-space: nowrap; }
.offers-tabs .og-tabs button span { font-weight: 600; opacity: .6; margin-left: 6px; font-variant-numeric: tabular-nums; }
.offers-tabs .og-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.offers-tabs .og-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.offers-tabs .offer-group + .offer-group { margin-top: 0; }
.offers-tabs .og-head h3 { display: none; }
.offers-tabs .og-head p { color: var(--ink-2); font-size: 17px; max-width: 46em; margin: 0 0 24px; }
.offers-tabs .offers { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offers-tabs .offer { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 10px 16px; align-items: start; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.offers-tabs a.offer:hover { background: var(--surface); border-color: var(--ink-2); }
.offers-tabs .offer h3 { grid-column: 1 / -1; grid-row: 1; font-size: 20px; line-height: 1.2; }
.offers-tabs .offer p { grid-column: 1 / -1; grid-row: 2; font-size: 15px; line-height: 1.5; }
.offers-tabs .offer .go { display: none; }
.offers-tabs .offer .term { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.offers-tabs .offer .price { grid-column: 2; grid-row: 3; align-self: end; text-align: right; font-size: 22px; }
.offers-tabs .offer .price small { font-size: 12px; }
.offers-tabs .bundle { margin-top: 16px; }
@media (max-width: 1100px) { .offers-tabs .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .offers-tabs .og-tabs { display: flex; width: 100%; }
  .offers-tabs .og-tabs button { flex: 1; padding: 12px 8px; font-size: 14px; }
  .offers-tabs .og-tabs button span { display: none; }
  .offers-tabs .offers { grid-template-columns: 1fr; }
}
/* Связка «Система + трафик»: видна под любой вкладкой, с воздухом от карточек */
.offers-tabs > .wrap > .bundle, .offers-tabs .bundle { margin-top: 48px; }
/* «Подробнее о связке» на светлом/инверсном фоне связки: свой цвет, не сливается при наведении */
.bundle .est-more { color: var(--bg); opacity: .72; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: opacity .15s ease, text-decoration-color .15s ease; }
.bundle .est-more:hover { color: var(--bg); opacity: 1; text-decoration-color: currentColor; }

/* ---- «В каждый пакет входит» (15.11): итог справа в карточке, без строки итога под списком ---- */
.stack-list .lr.total { display: none; }
.stack { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: stretch; }
.stack-side { align-content: center; gap: 12px; padding: 40px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.stack-label { font-size: 17px; font-weight: 700; color: var(--ink-2); margin: 0; }
.stack-side p.stack-label { color: var(--ink-2); font-size: 17px; }
.stack-big { font-size: clamp(48px, 5vw, 72px); }
.stack-side p:not(.stack-big):not(.stack-label) { margin-top: 6px; }
@media (max-width: 1020px) { .stack { grid-template-columns: minmax(0, 1fr); gap: 28px; } .stack-side { padding: 28px; } }

/* Плитка «Система + трафик» (15.11): правая колонка по ширине содержимого — без пустого поля справа */
.bundle { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; padding: 40px 44px; }
.bundle-price { justify-items: stretch; min-width: 240px; }
.bundle-price .btn { justify-content: center; }
.bundle-price .est-more { justify-self: center; }
@media (max-width: 1020px) { .bundle { grid-template-columns: 1fr; padding: 28px; gap: 28px; } .bundle-price { min-width: 0; justify-items: start; } }

/* ---- Квиз «Подберём решение» (15.11): пошагово, карточка той же ширины, что смета ---- */
.quiz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.qz.qz-wizard { gap: 0; align-content: start; padding: 30px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(15, 36, 32, .5); }
.qz-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; min-height: 24px; }
.qz-prog { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qz-prog button { height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--line); cursor: pointer; transition: background-color .2s ease; }
.qz-prog button.done { background: var(--accent); }
.qz-prog button[aria-current="step"] { background: var(--ink); }
.qz-back { font: 700 14px/1 var(--body); color: var(--ink-2); background: none; border: 0; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.qz-back:hover { color: var(--ink); }
.qz-back[hidden] { display: none; }
.qz-wizard .qz-step[hidden] { display: none; }
.qz-wizard .qz-step legend { display: grid; gap: 6px; margin-bottom: 20px; font-family: var(--display); font-size: clamp(22px, 2vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.qz-wizard .qz-n { font-family: var(--body); font-size: 14px; letter-spacing: 0; }
.qz-wizard .qz-opts { grid-template-columns: 1fr 1fr; gap: 10px; }
.qz-wizard .qz-opt { grid-template-columns: 1fr; padding: 16px 44px 16px 16px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.qz-wizard .qz-dot { display: none; }
.qz-wizard .qz-opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.qz-wizard .qz-opt.on { background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.qz-wizard .qz-opt::after { content: ""; position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .15s ease, box-shadow .15s ease; }
.qz-wizard .qz-opt.on::after { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
.qz-wizard .qz-t b { font-size: 16px; }
.qz-wizard .qz-t small { font-size: 13px; }
.quiz .est { position: static; }
.est.pulse { animation: est-pulse .6s ease; }
@keyframes est-pulse { 40% { box-shadow: inset 0 0 0 2px var(--accent), 0 30px 60px -40px rgba(15, 36, 32, .5); } }
@media (prefers-reduced-motion: reduce) { .est.pulse { animation: none; } }
@media (max-width: 1020px) { .quiz { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .qz.qz-wizard { padding: 22px; } .qz-wizard .qz-opts { grid-template-columns: 1fr; } }
/* Квиз, итерация 2: иконки ответов, смета открывается после 3-го ответа */
.qz-wizard .qz-opt { grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 40px 12px 12px; }
.qz-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: background-color .15s ease, color .15s ease; }
.qz-ico svg { width: 22px; height: 22px; }
.qz-wizard .qz-opt.on .qz-ico { background: var(--accent); color: var(--on-accent); }
.qz-wizard .qz-opt::after { top: 50%; margin-top: -9px; right: 14px; }
.est { position: relative; }
.est.est-wait > :not(.est-wait-box) { visibility: hidden; }
.est-wait-box { display: none; }
.est.est-wait .est-wait-box { display: grid; gap: 14px; position: absolute; inset: 30px; align-content: start; }
.est-wait-t { font-family: var(--display); font-size: clamp(22px, 2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink-2); max-width: 15em; }
.est-skel { display: grid; gap: 14px; margin-top: 18px; }
.est-skel i { height: 14px; border-radius: 7px; background: var(--line); opacity: .6; }
.est-skel i:nth-child(1) { width: 70%; } .est-skel i:nth-child(2) { width: 55%; } .est-skel i:nth-child(3) { width: 62%; } .est-skel i:nth-child(4) { width: 40%; height: 28px; margin-top: 10px; }
.quiz .est { position: relative; top: auto; }
/* Квиз, итерация 3: короткие вопросы (≤4 ответа) — одна колонка крупных строк; низ карточки — подпись */
.qz.qz-wizard { display: flex; flex-direction: column; }
.qz-wizard .qz-opts.qz-one { grid-template-columns: 1fr; gap: 10px; }
.qz-wizard .qz-opts.qz-one .qz-opt { padding: 14px 44px 14px 14px; }
.qz-foot { margin-top: auto; padding-top: 20px; font-size: 14px; color: var(--ink-2); }
/* Вопрос с 8 ответами: без мелких подсказок, иконка и отметка компактнее — названия не рвутся по слогам */
.qz-wizard .qz-opts:not(.qz-one) .qz-opt { grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 34px 12px 12px; min-height: 62px; }
.qz-wizard .qz-opts:not(.qz-one) .qz-ico { width: 34px; height: 34px; border-radius: 10px; }
.qz-wizard .qz-opts:not(.qz-one) .qz-ico svg { width: 19px; height: 19px; }
.qz-wizard .qz-opts:not(.qz-one) .qz-t small { display: none; }
.qz-wizard .qz-opts:not(.qz-one) .qz-t b { font-size: 15px; line-height: 1.25; }
.qz-wizard .qz-opts:not(.qz-one) .qz-opt::after { width: 16px; height: 16px; margin-top: -8px; right: 12px; }

/* ---- Квиз, итерация 4 (15.11) ---- */
/* Все вопросы — одной колонкой с подсказками */
.qz-wizard .qz-opts, .qz-wizard .qz-opts:not(.qz-one) { grid-template-columns: 1fr; gap: 8px; }
.qz-wizard .qz-opts:not(.qz-one) .qz-opt { grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 44px 12px 12px; min-height: 0; }
.qz-wizard .qz-opts:not(.qz-one) .qz-ico { width: 40px; height: 40px; border-radius: 11px; }
.qz-wizard .qz-opts:not(.qz-one) .qz-ico svg { width: 22px; height: 22px; }
.qz-wizard .qz-opts:not(.qz-one) .qz-t small { display: block; }
.qz-wizard .qz-opts:not(.qz-one) .qz-t b { font-size: 16px; }
.qz-wizard .qz-opts:not(.qz-one) .qz-opt::after { width: 18px; height: 18px; margin-top: -9px; right: 14px; }
/* Выбранный ответ — мягко: лёгкая заливка вместо жирной обводки */
.qz-wizard .qz-opt.on { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Смета едет за прокруткой, как раньше */
.quiz { align-items: start; }
.quiz .est { position: sticky; top: 24px; }
/* Карточка сметы: три факта плитками, цена крупно, всё по одной сетке */
.quiz .est { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 12px; padding: 30px; }
.quiz .est > * { grid-column: 1 / -1; }
.quiz .est .est-h { margin: 0; }
.quiz .est .est-why { margin: -2px 0 6px; }
.quiz .est > .lr:not(.total) { grid-column: auto; display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 13px; }
.quiz .est > .lr:not(.total) i { display: none; }
.quiz .est > .lr:not(.total) span:first-child { color: var(--ink-2); }
.quiz .est > .lr:not(.total) span:last-child { font-size: 15px; white-space: normal; }
.quiz .est > .lr.total { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); align-items: baseline; }
.quiz .est > .lr.total i { display: none; }
.quiz .est > .lr.total span:first-child { flex: 1; color: var(--ink-2); font-size: 15px; font-weight: 700; }
.quiz .est > .lr.total span:last-child { font-family: var(--display); font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
.quiz .est .btn { margin-top: 6px; }
@media (max-width: 1020px) { .quiz .est { position: relative; top: auto; } }
@media (max-width: 420px) { .quiz .est { grid-template-columns: 1fr; } }
/* Квиз: одна плитка для всех трёх шагов — одинаковые поля, иконка, шрифт, промежутки */
.qz.qz-wizard .qz-step .qz-opts { grid-template-columns: 1fr; gap: 8px; }
.qz.qz-wizard .qz-step .qz-opt { grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 44px 12px 12px; min-height: 64px; }
.qz.qz-wizard .qz-step .qz-ico { width: 40px; height: 40px; border-radius: 11px; }
.qz.qz-wizard .qz-step .qz-ico svg { width: 22px; height: 22px; }
.qz.qz-wizard .qz-step .qz-t b { font-size: 16px; line-height: 1.25; }
.qz.qz-wizard .qz-step .qz-t small { display: block; font-size: 13px; }
.qz.qz-wizard .qz-step .qz-opt::after { width: 18px; height: 18px; margin-top: -9px; right: 14px; }
/* Цена в смете: «+ ведение» — мелко под суммой */
#r-price small { display: block; margin-top: 4px; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); text-align: right; }
.quiz .est > .lr.total { align-items: flex-end; }
.quiz .est > .lr.total { align-items: first baseline; }
.quiz .est > .lr.total { align-items: flex-start; }
.quiz .est > .lr.total > span:first-child { padding-top: 15px; }
/* Обе карточки квиза едут за прокруткой: та, что ниже, держится у верха, пока листают соседнюю */
@media (min-width: 1021px) { .qz.qz-wizard { position: sticky; top: 24px; } }
/* Частые вопросы во всю ширину контейнера (15.11); ответы — удобная длина строки */
.faq { max-width: none; }
.faq details p { max-width: 72ch; }
/* Финальный блок: строка «Telegram @IgoshevProBot» лишняя — есть кнопка (15.11) */
#contact .contacts { display: none; }
/* Селект: своя стрелка с отступом 18 px от правого края, цвет из палитры */
select {
  appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 24px) 52%, calc(100% - 18px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* ---- Подвал (15.11): ровные колонки, копирайт внизу ---- */
.f-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 32px; }
.f-grid > div { gap: 12px; }
.f-h { margin-bottom: 4px; }
.f-grid a { line-height: 1.35; }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.f-bottom a { color: var(--ink-2); text-decoration: none; }
.f-bottom a:hover { color: var(--ink); }
@media (max-width: 1020px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .f-grid { grid-template-columns: 1fr; } .f-bottom { flex-direction: column; align-items: flex-start; } }
/* Подвал: 4 равные колонки без колонки бренда (15.11) */
footer .f-brand { display: none; }
.f-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .f-grid { grid-template-columns: 1fr; } }
/* `footer .wrap { display:flex }` перебивал сетку подвала — колонки шли по длине ссылок */
footer .wrap.f-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 32px; justify-content: stretch; }
footer .wrap.f-bottom { display: flex; flex-wrap: nowrap; }
@media (max-width: 1020px) { footer .wrap.f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { footer .wrap.f-grid { grid-template-columns: 1fr; } footer .wrap.f-bottom { flex-direction: column; align-items: flex-start; } }

/* ---- Финальный блок (15.11): форма в тон светлого фона, колонки по центру друг относительно друга ---- */
.final { --f-card: color-mix(in srgb, var(--bg) 5%, var(--ink)); --f-field: color-mix(in srgb, var(--ink) 70%, #fff); --f-line: color-mix(in srgb, var(--bg) 16%, var(--ink)); --f-muted: color-mix(in srgb, var(--bg) 55%, var(--ink)); }
.final .wrap { align-items: center; }
.final form { background: var(--f-card); color: var(--bg); box-shadow: inset 0 0 0 1px var(--f-line), 0 30px 60px -44px rgba(0, 0, 0, .35); }
.final form label, .final form .field > span, .final form .consent { color: var(--bg); }
.final form input[type="text"], .final form textarea, .final form select { background-color: var(--f-field); color: var(--bg); box-shadow: inset 0 0 0 1px var(--f-line); }
.final form input[type="text"]:hover, .final form textarea:hover, .final form select:hover { box-shadow: inset 0 0 0 1px var(--f-muted); }
.final form input::placeholder, .final form textarea::placeholder { color: var(--f-muted); }
.final form select { background-image: linear-gradient(45deg, transparent 50%, var(--f-muted) 50%), linear-gradient(135deg, var(--f-muted) 50%, transparent 50%); }
.final form .btn-main { background: var(--bg); color: var(--ink); }
.final form .small, .final form small { color: var(--f-muted); }
/* Сообщение после отправки формы — в тон светлой формы, читаемое */
.final form .result { background: color-mix(in srgb, var(--accent) 12%, var(--f-card)); color: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 14px; padding: 18px 20px; }
.final form .result b, .final form .result strong { color: var(--bg); }
.final form .result p, .final form .result span { color: color-mix(in srgb, var(--bg) 78%, var(--ink)); }
.final form .result a { color: var(--bg); text-decoration-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.final form .result a:hover { text-decoration-color: currentColor; }
/* Телефон: пока нет ответов — короткая заглушка сметы, без пустого скелета на весь экран */
@media (max-width: 1020px) { .quiz .est.est-wait > :not(.est-wait-box) { display: none; } .quiz .est.est-wait .est-wait-box { position: static; inset: auto; } }