/* ЗОК · инструмент менеджера — красно-белый, кинематографичный. Шрифт заголовков RoadRadio (бренд), текст — системный. */
@font-face { font-family: "RoadRadio"; src: url("../fonts/RoadRadio-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "RoadRadio"; src: url("../fonts/RoadRadio-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "RoadRadio"; src: url("../fonts/RoadRadio.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "RoadRadio"; src: url("../fonts/RoadRadio-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }

:root {
  --red: #CB253D; --red-hot: #EC233D; --red-deep: #8E1226; --red-soft: #FDECEF;
  --ink: #130F26; --ink-2: #3A3650; --mute: #7A7890; --line: #E8E7EE; --mist: #F5F5F7; --paper: #FFFFFF;
  --ok: #1E9E5A; --warn: #C97A00;
  --display: "RoadRadio", "Segoe UI", system-ui, sans-serif;
  --text: -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 18px; --r-sm: 12px; --shadow: 0 20px 60px rgba(19, 15, 38, .10); --shadow-sm: 0 6px 24px rgba(19, 15, 38, .08);
  --ease: cubic-bezier(.22, .61, .36, 1); --t: .5s;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, .display { font-family: var(--display); letter-spacing: .01em; line-height: 1.05; margin: 0; text-transform: uppercase; }
h2 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 900; }
h3 { font-size: 18px; font-weight: 700; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: var(--red); color: #fff; }
.hide { display: none !important; }
.mute { color: var(--mute); }
.small { font-size: 13px; }
.red { color: var(--red); }
.container { width: min(1280px, 100% - 48px); margin: 0 auto; }


/* ─ top bar ─ */
.top { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(18px); background: rgba(255, 255, 255, .78); border-bottom: 1px solid rgba(19, 15, 38, .06); }
.top .container { display: flex; align-items: center; gap: 22px; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 15px; letter-spacing: .06em; text-decoration: none; }
.brand img { height: 52px; width: auto; }   /* вектор: марка логотипа, масштабируется без потери качества */
.brand small { display: block; font: 500 10px/1 var(--text); color: var(--mute); letter-spacing: .08em; text-transform: none; margin-top: 3px; }
.tabbar { position: relative; display: flex; gap: 2px; margin-left: 10px; }
.tabbar .pill { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(135deg, var(--red-hot), var(--red)); box-shadow: 0 10px 26px rgba(203, 37, 61, .32);
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; opacity: 0; }
.tabbtn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none;
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
  transition: color .35s var(--ease), transform .35s var(--ease); }
.tabbtn i { font-style: normal; font-family: var(--display); font-size: 11px; font-weight: 700; width: 18px; height: 18px;
  border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--mute); transition: all .35s var(--ease); }
.tabbtn:hover { color: var(--ink); transform: translateY(-1px); }
.tabbtn.on { color: #fff; }
.tabbtn.on i { background: rgba(255, 255, 255, .22); color: #fff; }
.top .actions { margin-left: auto; display: flex; gap: 8px; }

/* ─ buttons ─ */
.btn { --bg: var(--ink); --fg: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1px solid transparent; background: var(--bg); color: var(--fg); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t), opacity .3s; will-change: transform; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(19, 15, 38, .18); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-red { --bg: linear-gradient(135deg, var(--red-hot), var(--red)); }
.btn-red:hover { box-shadow: 0 16px 40px rgba(203, 37, 61, .38); }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: rgba(19, 15, 38, .16); }
.btn-ghost:hover { background: var(--mist); box-shadow: none; }
.btn-white { --bg: #fff; --fg: var(--ink); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.chip.st-new { background: var(--red-soft); color: var(--red); }
.chip.st-work { background: #fff3d6; color: #8a5a00; }
.chip.st-kp { background: #e6f6ea; color: #1f7a3a; }
.leads-table td .btn { white-space: nowrap; }
#requestsWrap { margin-bottom: 28px; }
.top .actions .btn-mgr { padding: 5px 10px; font-size: 11.5px; opacity: .85; }   /* менеджер — мелко, Денис 23.09 */
/* законы и возражения — заметные кнопки с надписью, а не две иконки (Денис 24.09) */
.top .actions .btn-pill.btn-panel { padding: 10px 16px; font-size: 14px; font-weight: 700; --bg: var(--red-soft); --fg: var(--red-deep); border-color: rgba(203, 37, 61, .18); }
.top .actions .btn-pill.btn-panel:hover { --bg: var(--red); --fg: #fff; }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-pill { --bg: var(--mist); --fg: var(--ink-2); padding: 8px 14px; font-size: 13px; font-weight: 600; }
[hidden] { display: none !important; }   /* атрибут hidden сильнее любых display у .btn/.grid2 — иначе «скрытое» видно (24.09) */
.btn-bug { --bg: #fff3d6; --fg: #8a5a00; }   /* кнопка бета-теста «Обратная связь» */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab .btn { box-shadow: var(--shadow); padding: 12px 18px; font-size: 14px; font-weight: 700; border-radius: 999px; }
@media (max-width: 760px) { .fab { right: 12px; bottom: 12px; } .fab .btn { padding: 10px 14px; font-size: 13px; } }
.btn-edit { --bg: #e8efff; --fg: #2457d6; }   /* «Нужны правки» — маркетинг */
.btn-edit.on { --bg: #2457d6; --fg: #fff; }
/* режим правок: слой поверх сайта, рамка, облачко (24.09) */
#markLayer { position: fixed; inset: 0; z-index: 180; cursor: crosshair; background: rgba(36, 87, 214, .04); touch-action: none; }
.mark-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 20px);
  background: var(--ink); color: #fff; padding: 8px 10px 8px 16px; border-radius: 999px; font-size: 13.5px; box-shadow: var(--shadow); cursor: default; }
.mark-box { position: fixed; border: 3px solid #e6203d; background: rgba(230, 32, 61, .08); border-radius: 6px; pointer-events: none; }
.mark-sent { position: absolute; z-index: 170; border: 3px solid #1f9d55; background: rgba(31, 157, 85, .08); border-radius: 6px; pointer-events: none; }
.mark-sent span { position: absolute; top: -12px; left: -12px; background: #1f9d55; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.mark-bubble { position: fixed; z-index: 190; width: min(360px, calc(100vw - 20px)); background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow); cursor: default; display: grid; gap: 8px; }
.mark-bubble textarea { width: 100%; resize: vertical; }
.mark-bubble .row { display: flex; align-items: center; gap: 8px; } .mark-bubble .sp { flex: 1; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.fb-kinds label { cursor: pointer; }
.fb-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.fb-kinds span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; }
.fb-kinds input:checked + span { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); }
.fb-kinds input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.fb-shot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.fb-preview { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.fb-preview[hidden] { display: none; }
.fb-preview img { max-width: 100%; max-height: 220px; border-radius: 12px; border: 1px solid var(--line); }
.btn-pill:hover { --bg: var(--red-soft); --fg: var(--red-deep); box-shadow: none; }

/* ─ экраны-вкладки ─ */
.screens { position: relative; min-height: 70vh; }
.screen { display: none; scroll-margin-top: 100vh; }   /* ссылка с #kb/#book: браузер плавно прыгает к секции и сдвигает шапку — с таким отступом прыжок упирается в 0 */
.screen.on { display: block; animation: screenIn .5s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }
.container.pad { padding: 40px 0 72px; }

/* появление содержимого вкладки: у каждого блока своя задержка */
.rise { opacity: 0; transform: translateY(18px); }
.screen.on .rise { animation: rise .6s var(--ease) forwards; }
.screen.on .rise.d1 { animation-delay: .07s; }
.screen.on .rise.d2 { animation-delay: .14s; }
.screen.on .rise.d3 { animation-delay: .21s; }

/* ─ баннер вкладки «Скрипт» ─ */
.banner { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.banner-bg { position: absolute; inset: 0; z-index: -2; }
.banner-bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 38s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(19, 15, 38, .55), rgba(19, 15, 38, .92)), linear-gradient(90deg, rgba(203, 37, 61, .5), transparent 60%); }
.banner-in { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 26px 0 22px; flex-wrap: wrap; }
.banner h2 { font-size: clamp(26px, 3vw, 40px); }
.banner p { color: rgba(255, 255, 255, .8); margin: 10px 0 0; max-width: 620px; font-size: 15px; }
.kicker.light { color: #fff; opacity: .75; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 18px; }
.stats b { display: block; font-family: var(--display); font-size: clamp(22px, 2.2vw, 32px); font-weight: 900; line-height: 1; }
.stats span { font-size: 11px; color: rgba(255, 255, 255, .7); line-height: 1.25; display: block; margin-top: 4px; }
.hotkeys { color: var(--mute); font-size: 13px; margin-bottom: 22px; }

/* ─ заголовок вкладки ─ */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.sec-head p { max-width: 560px; color: var(--mute); margin: 10px 0 0; font-size: 17px; }
.kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 12px; display: block; }

/* ─ flow (скрипт) ─ */
.flow-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.rail { position: sticky; top: 118px; display: grid; gap: 6px; }
.rail .st { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--r-sm); color: var(--mute); font-weight: 600; font-size: 13.5px; transition: all var(--t) var(--ease); cursor: default; }
.rail .st i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-style: normal; font-family: var(--display); font-size: 13px; font-weight: 700; transition: all var(--t); }
.rail .st.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.rail .st.on i { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 0 0 6px var(--red-soft); }
.rail .st.done i { border-color: var(--ink); background: var(--ink); color: #fff; }
.rail .st.done i::before { content: "✓"; }
.rail .st.done i span { display: none; }
.rail .bar { height: 4px; border-radius: 4px; background: var(--line); margin: 14px 12px 0; overflow: hidden; }
.rail .bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--red-hot)); transition: width .8s var(--ease); }
.rail .restart { margin: 16px 12px 0; }

.card { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 40px 44px; min-height: 480px; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--red-hot), var(--red)); }
.card.enter { animation: cardIn .55s var(--ease); }
.card .crumbs { display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-bottom: 18px; }
.card .crumbs b { color: var(--red); }
.card .crumbs .stg { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
.card .crumbs .stg i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.card .label { font-family: var(--display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 900; text-transform: uppercase; line-height: 1.02; margin-bottom: 18px; }
.say { position: relative; padding: 18px 22px 18px 58px; border-radius: var(--r); background: linear-gradient(135deg, #fff, var(--red-soft)); border: 1px solid rgba(203, 37, 61, .15); font-size: 18px; line-height: 1.45; color: var(--ink); margin-bottom: 18px; }
.say::before { content: "🗣"; position: absolute; left: 18px; top: 16px; font-size: 24px; }
.say.internal { background: var(--mist); border-color: var(--line); color: var(--ink-2); font-size: 15px; }
.say.internal::before { content: "⚙️"; }
.say .copy { position: absolute; right: 10px; top: 10px; }
.hints { display: grid; gap: 8px; margin-bottom: 26px; }
.hints div { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.hints div::before { content: "💡"; flex: none; }
.control { display: grid; gap: 12px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.opt { text-align: left; padding: 14px 16px 14px 50px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 15px; position: relative; transition: all .35s var(--ease); line-height: 1.3; }
.opt::before { content: attr(data-n); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; background: var(--mist); display: grid; place-items: center; font-family: var(--display); font-size: 12px; color: var(--mute); transition: all .35s; }
.opt:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.opt:hover::before, .opt.def::before { background: var(--red); color: #fff; }
.opt.def { border-color: rgba(203, 37, 61, .45); }
.opt.warnopt { border-style: dashed; }
.opt small { display: block; font-weight: 500; color: var(--mute); font-size: 12px; margin-top: 2px; }
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yesno .opt { text-align: center; padding: 18px; font-size: 18px; }
.inrow { display: flex; gap: 10px; align-items: stretch; }
.in { flex: 1; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--line); font-size: 20px; font-weight: 600; outline: none; transition: border-color .3s, box-shadow .3s; min-width: 0; background: #fff; }
.in:focus { border-color: var(--red); box-shadow: 0 0 0 5px var(--red-soft); }
.in.big { font-family: var(--display); font-size: 30px; letter-spacing: .04em; }
.unit { align-self: center; color: var(--mute); font-weight: 600; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; }
.err { color: var(--red); font-weight: 600; font-size: 14px; min-height: 20px; }
.navrow { display: flex; gap: 10px; margin-top: 28px; align-items: center; }
.navrow .sp { flex: 1; }
.kbd { font: 600 11px/1 var(--text); color: var(--mute); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--mist); margin-left: 6px; }

/* стоп-экран, «ещё объект», результат */
.stopcard { text-align: center; padding: 60px 30px; }
.stopcard .label { color: var(--red); }
.geo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.geo div { background: var(--mist); border-radius: 14px; padding: 14px; }
.geo b { display: block; font-family: var(--display); font-size: 24px; font-weight: 900; }
.geo span { font-size: 12px; color: var(--mute); }

.result .totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 10px 0 22px; }
.result .tot { background: var(--mist); border-radius: 16px; padding: 16px 18px; }
.result .tot span { font-size: 12px; color: var(--mute); display: block; margin-bottom: 4px; }
.result .tot b { font-family: var(--display); font-size: 22px; font-weight: 900; white-space: nowrap; }
.result .tot.grand { grid-column: 1 / -1; background: var(--ink); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; }
.result .tot.grand span { color: rgba(255, 255, 255, .7); font-size: 13px; }
.result .tot.grand b { font-size: clamp(28px, 3vw, 42px); color: #fff; }
.result table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.result th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.result td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.result td.r, .result th.r { text-align: right; white-space: nowrap; }
.warn { padding: 12px 16px; border-radius: 12px; background: #FFF4E5; border: 1px solid #FFD9A8; color: #7A4B00; font-size: 14px; margin: 6px 0; }
.warn.hard { background: var(--red-soft); border-color: rgba(203, 37, 61, .3); color: var(--red-deep); font-weight: 600; }
.info { padding: 12px 16px; border-radius: 12px; background: var(--mist); font-size: 14px; margin: 6px 0; color: var(--ink-2); }
.price-note { position: relative; padding: 10px 14px 10px 40px; border-radius: 12px; background: #FFF4E5; border: 1px solid #FFD9A8; color: #7A4B00; font-size: 13.5px; line-height: 1.45; margin: 0 0 16px; max-width: 980px; }
.price-note::before { content: "⚠️"; position: absolute; left: 13px; top: 9px; }
.price-note:empty { display: none; }
.clienttext { white-space: pre-wrap; background: var(--mist); border-radius: 16px; padding: 18px 20px; font-size: 14px; line-height: 1.55; margin-top: 12px; max-height: 320px; overflow: auto; }

/* карточка лида справа */
.leadcard { position: sticky; top: 98px; background: var(--ink); color: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.leadcard h3 { font-size: 13px; letter-spacing: .16em; color: rgba(255, 255, 255, .6); margin-bottom: 14px; }
.leadcard .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.leadcard .row span { color: rgba(255, 255, 255, .55); flex: none; }
.leadcard .row b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.leadcard .obj { background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.leadcard .obj b { display: block; }
.leadcard .obj span { color: rgba(255, 255, 255, .6); font-size: 12px; }
.leadcard .live { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.leadcard .live b { display: block; font-family: var(--display); font-size: 30px; font-weight: 900; color: var(--red-hot); text-shadow: 0 0 30px rgba(236, 35, 61, .4); transition: all .4s; }
.leadcard .live span { font-size: 12px; color: rgba(255, 255, 255, .6); }
.leadcard .empty { color: rgba(255, 255, 255, .45); font-size: 13px; }

/* ─ калькулятор ─ */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.panel { background: #fff; border-radius: 26px; padding: 34px; box-shadow: var(--shadow); }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fields .wide { grid-column: 1 / -1; }
select.in { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23130F26' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; font-size: 16px; }
.in.md { font-size: 17px; padding: 13px 16px; }
.field label.check, .check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.check input { width: 20px; height: 20px; accent-color: var(--red); }
.calc-out { background: var(--ink); color: #fff; border-radius: 26px; padding: 34px; box-shadow: var(--shadow); position: sticky; top: 98px; }
.calc-out .big { font-family: var(--display); font-size: clamp(40px, 4.6vw, 64px); font-weight: 900; line-height: 1; color: var(--red-hot); text-shadow: 0 0 40px rgba(236, 35, 61, .45); margin: 6px 0 4px; }
.calc-out .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 20px 0; }
.calc-out .grid div { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 8px; }
.calc-out .grid span { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); }
.calc-out .grid b { font-family: var(--display); font-size: 20px; }
.calc-out .note { font-size: 12px; color: rgba(255, 255, 255, .55); }

/* ─ прайс ─ */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tab { padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; transition: all .3s var(--ease); }
.tab.on, .tab:hover { border-color: var(--red); background: var(--red); color: #fff; }
.pblock { background: #fff; border-radius: 22px; box-shadow: var(--shadow-sm); padding: 26px 28px; margin-bottom: 18px; }
.pblock h3 { font-size: 20px; font-weight: 900; }
.pblock .sub { color: var(--mute); font-size: 14px; margin: 4px 0 14px; }
.pblock table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pblock th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pblock td { padding: 10px; border-bottom: 1px solid var(--line); }
.pblock tr:hover td { background: var(--mist); }
.pblock td.r, .pblock th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pblock td.price { font-family: var(--display); font-size: 16px; font-weight: 700; }
.badge { display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--mist); color: var(--mute); margin-left: 8px; font-weight: 700; vertical-align: middle; }
.badge.polymer { background: var(--red-soft); color: var(--red-deep); }
.search { max-width: 380px; }

/* ─ лиды ─ */
.leads-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.leads-table th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 12px 14px; background: var(--mist); }
.leads-table td { padding: 12px 14px; border-top: 1px solid var(--line); }
.leads-table td.r { text-align: right; white-space: nowrap; }

/* ─ drawers ─ */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; z-index: 80; transform: translateX(105%); transition: transform .55s var(--ease); box-shadow: -30px 0 80px rgba(19, 15, 38, .18); display: grid; grid-template-rows: auto 1fr; }
.drawer.open { transform: none; }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.drawer .dh h3 { font-size: 20px; }
.drawer .db { overflow: auto; padding: 22px 26px 40px; }
.law { border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; transition: border-color .3s; }
.law:hover { border-color: rgba(203, 37, 61, .4); }
.law h4 { margin: 0 0 6px; font-family: var(--display); font-size: 17px; font-weight: 900; text-transform: uppercase; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.law .tag { font: 700 10px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; background: var(--mist); color: var(--mute); padding: 4px 8px; border-radius: 6px; }
.law .tag.main { background: var(--red); color: #fff; }
.law p { margin: 4px 0; font-size: 14px; color: var(--ink-2); }
.law .ph { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--red-soft); color: var(--ink); font-size: 14px; }
.acc { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; padding: 14px 4px; font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.acc summary::after { content: "+"; font-family: var(--display); font-size: 22px; color: var(--red); transition: transform .3s; }
.acc[open] summary::after { transform: rotate(45deg); }
.acc .body { padding: 0 4px 16px; }
.acc .script { background: var(--red-soft); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
.acc .script .copy { position: absolute; right: 8px; top: 8px; }
.acc .hint { font-size: 13px; color: var(--mute); margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.chip { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: var(--mist); }
.chip.no { background: var(--red-soft); color: var(--red-deep); }
button.chip { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }   /* чипы-кнопки: тренажёр, разделы книги из «Продукта» */
.chip.soon { background: var(--paper); border: 1px dashed var(--red); }   /* кнопка-заглушка «в разработке» (тренажёр звонка) */
.chip.soon:hover { background: var(--red-soft); }
/* ─ база знаний: продукт (пять слоёв, сетки, леса) ─ */
.kb-product { display: grid; gap: 14px; margin-bottom: 34px; }
.kb-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kb-layer { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); }
.kb-layer .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--display); font-size: 14px; margin-bottom: 8px; }
.kb-layer h4 { margin: 0 0 4px; font-size: 15px; }
.kb-layer p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.kb-layer .say { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--red); color: var(--ink); font-size: 13.5px; font-style: italic; }
.kb-nets { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.kb-net { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); }
.kb-net.main { border-color: var(--red); }
.kb-net h4 { margin: 0 0 2px; font-size: 16px; }
.kb-net .kind { color: var(--mute); font-size: 12.5px; margin-bottom: 10px; }
.kb-net dl { display: grid; grid-template-columns: 120px 1fr; gap: 5px 10px; margin: 0; font-size: 13.5px; line-height: 1.4; }
.kb-net dt { color: var(--mute); } .kb-net dd { margin: 0; color: var(--ink-2); }
.kb-net.main dd.hi, .kb-net dd.warn { font-weight: 600; } .kb-net dd.warn { color: var(--red-deep); }
.kb-scaf { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-scaf span { background: var(--mist); border-radius: 12px; padding: 8px 12px; font-size: 13px; } .kb-scaf b { margin-right: 6px; }
@media (max-width: 760px) { .kb-net dl { grid-template-columns: 1fr; } }
.overlay { position: fixed; inset: 0; background: rgba(19, 15, 38, .35); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .4s; backdrop-filter: blur(3px); }
.overlay.on { opacity: 1; pointer-events: auto; }

/* ─ modal ─ */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal .box { background: #fff; border-radius: 22px; padding: 30px; width: min(440px, 92vw); box-shadow: var(--shadow); transform: translateY(16px); transition: transform .4s var(--ease); }
.modal .box.wide { width: min(820px, 94vw); max-height: 90vh; overflow: auto; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.creds { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--red); border-radius: 14px; background: var(--red-soft); }
.creds pre { white-space: pre-wrap; font-size: 13px; margin: 8px 0; }
tr.off td { opacity: .55; }
/* экран входа (учётки на сервере, 24.09) */
.login-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #fff 0, var(--paper) 60%); padding: 16px; }
.login-screen[hidden] { display: none; }
/* пока не проверен вход — интерфейс не показываем вовсе, виден только экран входа (ТЗ ред. 2, Д4, 27.09) */
html.booting body > *:not(#loginScreen) { visibility: hidden; }
.login-box { width: min(400px, 100%); background: #fff; border-radius: 24px; padding: 32px; box-shadow: var(--shadow); }
.login-logo { height: 64px; display: block; margin: 0 auto 14px; }
.login-box h2 { font-size: 20px; text-align: center; margin: 0 0 6px; }
.login-box p { text-align: center; }
body.locked { overflow: hidden; }
.modal.open .box { transform: none; }

/* ─ toast ─ */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; transition: all .4s var(--ease); z-index: 100; pointer-events: none; box-shadow: var(--shadow); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ─ footer ─ */
footer { padding: 40px 0; color: var(--mute); font-size: 13px; border-top: 1px solid var(--line); }
footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ─ reveal & motion ─ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 35, 61, .5); } 70% { box-shadow: 0 0 0 14px rgba(236, 35, 61, 0); } }
.pulse { animation: pulse 2s infinite; }
.spin { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rise, .reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1100px) {
  .flow-grid { grid-template-columns: 1fr; }
  .rail { position: static; display: flex; flex-wrap: wrap; }
  .rail .bar, .rail .restart { display: none; }
  .leadcard { position: static; }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-grid > * { min-width: 0; }
  .calc-out { position: static; }
}
@media (max-width: 720px) {
  .container { width: min(100% - 32px, 1280px); }
  .top .container { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .tabbar { order: 3; width: 100%; margin: 6px 0 0; overflow-x: auto; scrollbar-width: none; }
  .tabbar::-webkit-scrollbar { display: none; }
  .top .actions { margin-left: auto; }
  .card { padding: 26px 22px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .fields { grid-template-columns: 1fr; }
  .banner-in { padding-bottom: 16px; }
}
@media print {
  .top, .banner, .rail, .leadcard, .drawer, .overlay, footer, .navrow { display: none !important; }
  .screen { display: block !important; }
  .card { box-shadow: none; }
}

/* ?nomotion — для скриншотов/тестов: без анимаций и появления */
html.nomotion *, html.nomotion *::before, html.nomotion *::after { animation: none !important; transition: none !important; }
html.nomotion .rise, html.nomotion .reveal { opacity: 1 !important; transform: none !important; }

/* ─ книга продаж ─ */
.chip.file { text-decoration: none; background: var(--paper); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.chip.file:hover { border-color: var(--red); transform: translateY(-1px); }
#bookMaterials { margin-bottom: 18px; }
.book-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.book-toc { position: sticky; top: 98px; max-height: calc(100vh - 124px); overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); }
.book-progress { margin-bottom: 14px; }
.book-progress .bar { height: 6px; border-radius: 999px; background: var(--mist); overflow: hidden; margin-bottom: 6px; }
.book-progress .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-hot)); transition: width .5s var(--ease); }
.bch + .bch { margin-top: 4px; }
.bch-h { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: var(--r-sm); font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.bch-h:hover { background: var(--mist); }
.bch.on .bch-h { background: var(--red-soft); color: var(--red-deep); }
.bch-h span { flex: 1; }
.bch-h .pct { font: 500 11px/1 var(--text); color: var(--mute); font-style: normal; }
.bch-h .pct.full { color: var(--ok); }
.bch-s { display: none; padding: 2px 0 8px 10px; }
.bch.on .bch-s { display: block; }
.bch-s button { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid var(--line); padding: 7px 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.bch-s button:hover { color: var(--red); border-left-color: var(--red); }
.bch-s button.read { color: var(--mute); }
.bch-s button.read::before { content: "✓ "; color: var(--ok); }
.bch-s button.on { background: var(--mist); border-left-color: var(--red); color: var(--ink); font-weight: 600; }
.book-main { min-width: 0; }
.book-results { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); max-height: 460px; overflow: auto; }
.bres { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 0; }
.bres:first-of-type { border-top: 0; }
.bres b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--red); margin-bottom: 3px; }
.bres span { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.bres:hover span { color: var(--ink); }
.bres mark { background: #FFE9AD; color: inherit; border-radius: 3px; padding: 0 2px; }
.book-reader { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 34px; box-shadow: var(--shadow); }
.book-reader .crumbs { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--red); font-weight: 700; }
.book-reader .btitle { font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; margin: 8px 0 16px; text-transform: none; }
.bmedia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--mist); border-radius: var(--r-sm); margin-bottom: 20px; }
.bmedia audio { height: 34px; flex: 1; min-width: 240px; }
.prose { font-size: 16.5px; line-height: 1.68; color: var(--ink-2); }
/* Текст держим в читаемой колонке, а таблицы пускаем во всю ширину карточки. */
.prose > p, .prose > ul, .prose > ol, .prose > h3, .prose > h4, .prose > .callout, .prose > .principle, .prose > .tcap { max-width: 76ch; }
.prose h3 { font-family: var(--display); font-size: 17px; text-transform: none; color: var(--ink); margin: 26px 0 8px; }
.prose h4 { font: 700 15px/1.3 var(--text); color: var(--ink); margin: 20px 0 6px; }
.prose p { margin: 0 0 13px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose b { color: var(--ink); }
.prose code { background: var(--mist); border-radius: 4px; padding: 1px 5px; font-size: 14px; }
.prose .tcap { font-size: 13px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 6px; }
.prose .twrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--mist); font: 700 12px/1.3 var(--text); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose .callout { border-left: 3px solid var(--red); background: var(--red-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; margin: 0 0 16px; color: var(--ink); }
.prose .principle { border: 1px dashed var(--red); border-radius: var(--r-sm); padding: 12px 16px; margin: 0 0 16px; color: var(--red-deep); font-weight: 600; }
.bfoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.bfoot .bnav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1080px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-toc { position: static; max-height: 320px; }
}
@media (max-width: 720px) {
  .book-reader { padding: 22px 18px; }
  .prose { font-size: 16px; }
}
.chip.file.main { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); font-weight: 600; }
/* дата созвона: поле словами + календарь рядом */
.in.dt { flex: 0 0 auto; width: 232px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.in.dt::-webkit-calendar-picker-indicator { cursor: pointer; filter: saturate(0) brightness(.55); }
@media (max-width: 720px) { .in.dt { width: 100%; } .control .inrow { flex-wrap: wrap; } }
/* шаг 0 — карточка клиента перед звонком */
.card.intake { border-left-color: var(--ink); background: linear-gradient(180deg, #fff, var(--mist)); }
.card.intake .label { font-size: clamp(26px, 2.6vw, 34px); }
.card.intake .say.internal { background: var(--red-soft); color: var(--red-deep); font-weight: 600; }
.card.intake .navrow { margin-top: 26px; }
.card.intake #next { box-shadow: 0 16px 40px rgba(203, 37, 61, .35); }
/* шаг 0 «Заявка» — несколько полей на одном экране */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.formgrid .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formgrid .fld span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.formgrid .fld:last-child { grid-column: 1 / -1; }
@media (max-width: 720px) { .formgrid { grid-template-columns: 1fr; } }

/* ─ шапка: главная кнопка, меню инструментов ─ */
.tabbtn.primary { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
/* два скрипта в одном стиле, но разных цветов: менеджер — фирменный красный, маркетинг — синий (Денис 23.09) */
.tabbtn.primary:not(.on) { color: var(--ink); }          /* надпись всегда обычная, цвет только у активной пилюли (Денис 24.09) */
.tabbtn.primary.mk:not(.on) { color: var(--ink); }
.tabbar.mk .pill { background: linear-gradient(135deg, #3B7BFF, #2457D6); box-shadow: 0 10px 26px rgba(36, 87, 214, .32); }
#lead { --red: #2457D6; --red-hot: #3B7BFF; --red-deep: #173A9E; --red-soft: #E8EFFF; }
#lead .banner::before { background: linear-gradient(120deg, rgba(23, 58, 158, .88), rgba(19, 15, 38, .55) 70%); }
#lead .btn-red:hover { box-shadow: 0 16px 40px rgba(36, 87, 214, .38); }
.modal .box.wide { width: min(760px, 94vw); max-height: 92vh; overflow: auto; }
.modal .box .formgrid .fld:last-child { grid-column: 1 / -1; }
.leads-table .who { color: var(--mute); font-size: 12px; white-space: nowrap; }
.leads-table .cmt { display: block; color: var(--red-deep); font-size: 12px; margin-top: 4px; }
.chip.st-rework { background: #fff3d6; color: #8a5a00; }
  border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; display: grid; gap: 4px; opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 60; }
  font-weight: 700; font-size: 14px; color: var(--ink); }
.tabbar .pill.hidden { opacity: 0; }

/* ─ главная ─ */
.home { position: relative; min-height: calc(100vh - 78px); color: #fff; overflow: hidden; isolation: isolate; display: grid; align-items: center; }
.home-bg { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.home-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.home-bg video.on { opacity: .9; }   /* два облёта (здание ↔ цистерна) сменяют друг друга растворением */
.home::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(19, 15, 38, .92) 0%, rgba(19, 15, 38, .62) 55%, rgba(19, 15, 38, .3) 100%), linear-gradient(0deg, rgba(19, 15, 38, .9), transparent 40%); }
.home-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: 48px; align-items: center; padding: 56px 0; }
.home-title { font-size: clamp(52px, 7.4vw, 112px); font-weight: 900; line-height: .92; display: grid; margin: 0 0 22px; }
.home-title span { display: block; opacity: 0; transform: translateY(40px); animation: rise .9s var(--ease) forwards; }
.home-title span:nth-child(2) { animation-delay: .12s; }
.home-title span:nth-child(3) { animation-delay: .24s; color: var(--red-hot); text-shadow: 0 0 60px rgba(236, 35, 61, .5); }
.home-lead { max-width: 560px; font-size: clamp(16px, 1.3vw, 19px); color: rgba(255, 255, 255, .86); margin: 0 0 26px; opacity: 0; animation: rise .9s .4s var(--ease) forwards; }
.home-cta { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; animation: rise .9s .55s var(--ease) forwards; }
.home-cta .btn-red { box-shadow: 0 18px 50px rgba(236, 35, 61, .45); animation: pulse 2.8s 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 18px 50px rgba(236, 35, 61, .45); } 50% { box-shadow: 0 18px 70px rgba(236, 35, 61, .8); } }
.phrase { margin-top: 38px; max-width: 620px; padding: 18px 22px 16px 26px; border-left: 3px solid var(--red-hot); background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px); border-radius: 0 var(--r) var(--r) 0; position: relative; min-height: 84px; }
.phrase .q { position: absolute; left: 10px; top: -6px; font-family: var(--display); font-size: 44px; color: var(--red-hot); opacity: .8; }
.phrase b { display: block; font-size: 17px; line-height: 1.4; font-weight: 600; transition: opacity .5s, transform .5s var(--ease); }
.phrase b.swap { opacity: 0; transform: translateY(8px); }
.phrase .mute { display: block; margin-top: 8px; color: rgba(255, 255, 255, .5); }

/* радар с датой */
.radar { position: relative; width: min(300px, 70vw); aspect-ratio: 1; margin: 0 auto 26px; display: grid; place-items: center; }
.radar .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); }
.radar .ring.r2 { inset: 18%; } .radar .ring.r3 { inset: 36%; border-color: rgba(236, 35, 61, .5); }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(236, 35, 61, .55), rgba(236, 35, 61, 0) 28%); animation: spin 5s linear infinite; mask: radial-gradient(circle, transparent 36%, #000 37%); }
.radar-in { position: relative; text-align: center; }
.radar-in b { display: block; font-family: var(--display); font-size: 46px; font-weight: 900; line-height: 1; }
.radar-in span { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.home-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-widgets .w { background: rgba(255, 255, 255, .07); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r); padding: 14px 16px; }
.home-widgets .w span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.home-widgets .w b { display: block; font-family: var(--display); font-size: 26px; font-weight: 900; margin: 6px 0 2px; line-height: 1.1; }
.home-widgets .w small { color: rgba(255, 255, 255, .65); font-size: 12px; line-height: 1.3; display: block; }
.home-widgets .w small i { font-style: normal; color: #fff; font-weight: 700; }
.banner.slim .banner-in { padding: 22px 0 18px; }
@media (max-width: 1100px) { .home-in { grid-template-columns: 1fr; } .radar { display: none; } }
@media (max-width: 720px) { .home { min-height: auto; } .home-widgets { grid-template-columns: 1fr; } .home-title { font-size: 46px; } }
html.nomotion .home-title span, html.nomotion .home-lead, html.nomotion .home-cta { opacity: 1 !important; transform: none !important; }
.actions .btn-pill.active { --bg: var(--red-soft); --fg: var(--red-deep); }

/* ─ аура экранов: живой фон под содержимым, только transform и opacity ─ */
.screen { position: relative; isolation: isolate; min-height: calc(100vh - 78px - 62px); }   /* фон-аура на всю высоту окна, даже если содержимого мало */
.screen > .container, .screen > .banner { position: relative; z-index: 1; }
.aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aura img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; opacity: .07; filter: grayscale(.4) contrast(1.1);
  animation: kenburns 60s ease-in-out infinite alternate; }
.aura i { position: absolute; display: block; }
.aura .b1, .aura .b2 { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: multiply; }
.aura .b1 { left: -12vw; top: -10vw; background: radial-gradient(circle, rgba(236, 35, 61, .28), transparent 60%); animation: drift1 22s ease-in-out infinite; }
.aura .b2 { right: -14vw; top: 22%; background: radial-gradient(circle, rgba(19, 15, 38, .22), transparent 60%); animation: drift2 28s ease-in-out infinite; }
.aura .grid { inset: 0; opacity: .5; background-image: linear-gradient(rgba(19, 15, 38, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 15, 38, .06) 1px, transparent 1px);
  background-size: 56px 56px; mask: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%); animation: gridslide 40s linear infinite; }
.aura .shine { inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); mix-blend-mode: soft-light;
  transform: translateX(-70%); animation: shine 14s ease-in-out infinite; }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14vw, 8vw) scale(1.12); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12vw, -6vw) scale(.9); } }
@keyframes gridslide { from { background-position: 0 0, 0 0; } to { background-position: 0 56px, 56px 0; } }
@keyframes shine { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
/* на скрипте баннер сверху, аура под рабочей областью — чуть тише */
#flow .aura .b1 { top: 30%; }
html.nomotion .aura i, html.nomotion .aura img { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .aura i, .aura img { animation: none !important; } }

/* ─ шапка на средних экранах: логотип и кнопки не переносятся и не вылезают ─ */
.brand span { white-space: nowrap; }
.brand small { white-space: nowrap; }
.top .actions .btn-pill { white-space: nowrap; }
@media (max-width: 1240px) {
  .top .container { height: auto; padding: 10px 0; flex-wrap: wrap; row-gap: 8px; }
  .tabbar { order: 3; width: 100%; margin-left: 0; }
  .top .actions { margin-left: auto; }
  .top .actions .btn-pill { padding: 7px 11px; font-size: 12.5px; }
  .top .actions .btn-pill.btn-panel { padding: 9px 14px; font-size: 13.5px; }
  .brand img { height: 46px; }
}
@media (max-width: 980px) {
  .brand small { display: none; }
  .top .actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; order: 4; }
}

/* ─ шапка: фирменный логотип целиком (марка + «АСТОРИЯ С·Л·К», брендбук) — высота шапки от логотипа,
   ничего не обрезаем; на экранах уже 1400 px кнопки переносятся во вторую строку ─ */
.top .container { height: auto; min-height: 98px; padding: 8px 0; overflow: visible; }
.brand { flex: 0 0 auto; gap: 14px; }
.brand img { height: 82px; max-height: 82px; width: auto; display: block; }
.brand .tag { display: block; font: 700 10.5px/1.35 var(--text); color: var(--mute); letter-spacing: .12em; text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--line); }
@media (max-width: 1400px) {
  .top .container { flex-wrap: wrap; row-gap: 8px; }
  .tabbar { order: 3; width: 100%; margin-left: 0; }
  .top .actions { margin-left: auto; }
  .brand img { height: 70px; max-height: 70px; }
}
@media (max-width: 980px) { .brand .tag { display: none; } }
/* пять вкладок + три кнопки: ужимаем шапку, чтобы влезало в 1280-контейнер без переноса */
.top .container { gap: 12px; }
.tabbar { margin-left: 2px; gap: 0; }
.tabbtn { padding: 9px 11px; font-size: 13.5px; }
.tabbtn.primary { font-size: 12px; }
.top .actions { gap: 6px; }
.top .actions .btn-pill { padding: 7px 10px; font-size: 12.5px; }
.top .actions .btn-pill.btn-panel { padding: 9px 13px; font-size: 13.5px; }
.brand { gap: 10px; }
.brand .tag { padding-left: 10px; }

/* ─ читаемость скрипта (Денис 23.09): фраза для клиента — крупно и с подписью, подсказки — тише, отдельным блоком ─ */
.say { padding: 20px 26px 22px 26px; border-radius: 18px; background: #fff; border: 1px solid rgba(19, 15, 38, .08); border-left: 6px solid var(--red);
  box-shadow: 0 10px 30px rgba(19, 15, 38, .07); font-size: 21px; line-height: 1.5; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.say::before { content: "🗣 Скажи клиенту"; position: static; display: block; font: 700 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.say.internal { font-size: 15px; font-weight: 500; background: var(--mist); border-left-color: var(--mute); color: var(--ink-2); box-shadow: none; }
.say.internal::before { content: "⚙️ Для себя, клиенту не читать"; color: var(--mute); }
.hints { gap: 6px; margin-bottom: 22px; padding: 12px 14px 12px 14px; background: var(--mist); border-radius: 12px; }
.hints::before { content: "подсказки"; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.hints div { font-size: 13px; color: var(--ink-2); opacity: .8; line-height: 1.4; }
.hints:empty { display: none; }
.result .say { font-size: 18px; }

/* итог: одна строка вместо шести плиток (дубли справа убраны — Конов 23.09); длинные названия сетки не вылезают */
.tot b, .leadcard .row b { overflow-wrap: anywhere; }
.tot.grand > div { display: flex; flex-direction: column; gap: 4px; }

/* меню скрипта на рельсе: этап раскрывает шаги, на пройденный шаг можно вернуться (Денис 24.09) */
.rail .st.has { cursor: pointer; }
.rail .st em { margin-left: auto; font-style: normal; color: var(--mute); font-size: 11px; }
.rail .st { grid-template-columns: 30px 1fr auto; }
.rail .sub { display: grid; gap: 2px; margin: -2px 0 6px 40px; }
.rail .stp { font-size: 12.5px; line-height: 1.3; color: var(--mute); padding: 4px 8px; border-radius: 8px; }
.rail .stp.done { color: var(--ink-2); }
.rail .stp.done::before { content: "✓ "; color: var(--ok); }
.rail .stp.on { color: var(--red); font-weight: 700; background: var(--red-soft); }
.rail .stp.can { cursor: pointer; }
.rail .stp.can:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* ─ телефон ─ (Денис 24.09: «с телефона открывается?») — одна колонка, шапка в две прокручиваемые строки, без бокового скролла */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .container { width: calc(100% - 28px); }
  .top .container { flex-wrap: wrap; row-gap: 6px; padding: 8px 0; min-height: 0; }
  .brand img { height: 52px; max-height: 52px; }
  .brand .tag { display: none; }
  .tabbar, .top .actions { order: 3; width: 100%; margin: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .tabbar::-webkit-scrollbar, .top .actions::-webkit-scrollbar { display: none; }
  .tabbtn, .top .actions .btn-pill { flex: none; }
  .banner h2 { font-size: 22px; }
  .banner p { font-size: 14px; }
  .home-title { font-size: clamp(40px, 14vw, 60px); }
  .home-in { padding: 28px 0; gap: 20px; }
  .home-widgets { grid-template-columns: 1fr 1fr; }
  .hotkeys { display: none; }
  .flow-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .flow-grid > * { min-width: 0; max-width: 100%; }
  .home-in { grid-template-columns: minmax(0, 1fr); }
  .home-in > * { min-width: 0; }
  .leadcard .row { flex-wrap: wrap; }
  .leadcard .row b { text-align: left; }
  .home-widgets .w, .stats li { min-width: 0; }
  .banner-in > div { min-width: 0; }
  .rail { position: static; display: grid; gap: 4px; }
  .rail .st { font-size: 13px; padding: 6px 10px; }
  .rail .sub { margin-left: 34px; }
  .stage .card, .card { padding: 22px 18px; min-height: 0; border-radius: 18px; }
  .card .label { font-size: 24px; }
  .say { font-size: 18px; padding: 16px 16px 18px 18px; }
  .hints div { font-size: 12.5px; }
  .leadcard { position: static; }
  .yesno, .opts { grid-template-columns: 1fr; }
  .navrow { flex-wrap: wrap; gap: 8px; }
  .navrow .btn { flex: 1 1 auto; justify-content: center; }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-grid > * { min-width: 0; }
  .fields { grid-template-columns: 1fr; }
  .leads-table { display: block; overflow-x: auto; white-space: nowrap; }
  .modal .box, .modal .box.wide { width: calc(100vw - 24px); padding: 20px 16px; max-height: 88vh; overflow: auto; }
  .formgrid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  footer .container { flex-direction: column; gap: 6px; font-size: 12px; }
}

/* ─ база знаний ─ */
.kb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 34px; }   /* семь плиток в ряд на 1440 (с «Продуктом», 24.09) */
.kb-tile { display: block; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 18px 18px 16px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); font: inherit; color: var(--ink); }
.kb-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kb-tile i { display: block; font-size: 26px; font-style: normal; margin-bottom: 10px; }
.kb-tile b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; margin-bottom: 4px; }
.kb-tile span { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.35; }
.kb-h { font-family: var(--display); text-transform: uppercase; font-size: 22px; margin: 0 0 14px; }
.kb-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 34px; }
.kb-pr { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.kb-pr .kind { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background: var(--mist); color: var(--mute); }
.kb-pr .kind.free { background: #e6f6ea; color: #1f7a3a; } .kb-pr .kind.paid { background: var(--red-soft); color: var(--red); } .kb-pr .kind.kp { background: #e8efff; color: #2457d6; } .kb-pr .kind.memo { background: #fff3d6; color: #8a5a00; }
.kb-pr h4 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.kb-pr p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; flex: 1; }
.kb-pr .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kb-pr .row .mute { font-size: 12px; margin-left: auto; }
.kb-pr.na { opacity: .55; }
.kb-3d { display: grid; gap: 22px; }
.kb-obj { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-sm); }
.kb-obj h4 { margin: 0 0 2px; font-family: var(--display); text-transform: uppercase; font-size: 16px; }
.kb-obj .sub { color: var(--mute); font-size: 13px; margin-bottom: 14px; }
.kb-obj .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kb-obj video { width: 100%; border-radius: 14px; background: var(--ink); aspect-ratio: 16 / 9; object-fit: cover; }
.kb-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kb-views a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.kb-views img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.kb-views a:hover img { transform: scale(1.04); }
.kb-views span { display: block; font-size: 11px; color: var(--mute); padding: 4px 6px; }
.kbback { display: inline-block; margin: 0 0 14px; color: var(--mute); font-size: 13px; text-decoration: none; }
.kbback:hover { color: var(--red); }
.hotkeys .btn { margin-left: 8px; }
@media (max-width: 760px) { .kb-obj .wrap { grid-template-columns: minmax(0, 1fr); } .kb-views { grid-template-columns: repeat(2, 1fr); } }
.say-more { margin: -4px 0 10px; font-size: 13px; padding: 4px 12px; }   /* В6: «Подробнее» под фразой презентации */
#tList { overflow-x: auto; }   /* «Команда» со статистикой (Д3) шире окна на ноутбуке — прокрутка внутри, а не за край */
.script-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; color: var(--mute, #6b7080); }
.script-pick .btn.on { background: var(--red, #E8283C); color: #fff; border-color: transparent; }   /* выбор сценария (Денис 27.09) */