/* Витрина Авиграма (web/site). Подача — по приёмам SalesAgent (wiki: apsd-2.1.0/tz-home-salesagent-rhythm.md — правила
   темпа, не их вид): одна секция = одна мысль (подпись с линией → заголовок ≤ 3 строк → абзац ≤ 3 строк → ≤ 4 карточек),
   одинаковый шаг секций, шкала цифра : заголовок : текст ≈ 4 : 2 : 1, контраст меняется каждые 1–2 экрана, акцентная
   заливка — не чаще одной на 1,5 экрана, призыв — плашкой после блоков доказательств. Вид — дизайн-код Авиграма
   (tokens.css, base.css): цвета только токенами, линии вместо теней, скругления по роли. Без анимации «через размытие»
   (текст — сразу в HTML), без backdrop-filter на липком; размытие — только у открытого окна чата. */

:root { --sec: 72px; --wrap: 1120px; }
@media (max-width: 359px) { :root { --sec: 56px; } }
/* Роли витрины: инверсный блок («прожектор» в обеих темах) и стрелка на нём — акцент, читаемый на его фоне */
:root, [data-theme="dark"] { --vs-arrow: var(--uv); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --vs-arrow: var(--mint); } }
[data-theme="light"] { --vs-arrow: var(--mint); }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.s-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 768px) { .s-wrap { padding: 0 var(--s-8); } }
.s-skip { position: absolute; left: -9999px; }
.s-skip:focus { left: var(--s-4); top: var(--s-2); z-index: 60; background: var(--canvas); padding: var(--s-2) var(--s-3); }

/* Шапка: липкая, плотная (без размытия — слабые машины) */
.s-head { position: sticky; top: 0; z-index: 20; background: var(--canvas); border-bottom: 1px solid var(--frame); }
.s-head__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 60px; }
.s-logo { display: inline-flex; align-items: center; gap: var(--s-2); font: 700 18px/1 var(--f-sans); color: var(--ink); text-decoration: none; }
.s-logo img { width: 28px; height: 28px; }
.s-nav { display: none; gap: var(--s-6); }
.s-nav a { font: 600 12px/1 var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; color: var(--meta); }
.s-nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .s-nav { display: flex; } }
.s-head__act { display: flex; align-items: center; gap: var(--s-2); }
.s-head__act .btn:not(.btn--icon) { min-height: 40px; padding: 6px 16px; }

/* Каркас секции */
.s-sec { padding: var(--sec) 0; border-top: 1px solid var(--frame); }
.s-eyebrow { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-5);
             font: 600 12px/1.2 var(--f-mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--meta); }
.s-eyebrow::before { content: ''; width: 44px; border-top: 1px solid currentColor; flex: none; }
.s-h1 { font: 700 clamp(46px, 13.5vw, 96px)/.92 var(--f-display); letter-spacing: .5px; text-transform: uppercase; margin: 0; text-wrap: balance; }
.s-h2 { font: 700 clamp(30px, 8.7vw, 46px)/1.04 var(--f-sans); letter-spacing: -.02em; margin: 0; text-wrap: balance; max-width: 20ch; }
.s-lead { font: 400 16px/1.5 var(--f-sans); color: var(--meta); margin: var(--s-4) 0 0; max-width: 52ch; }
.s-num { font: 700 clamp(58px, 17vw, 76px)/.88 var(--f-display); letter-spacing: .5px; }
/* Знак рубля — из Onest: в Oswald его нет, иначе подставится чужой шрифт */
.s-rub { font: 700 .6em/1 var(--f-sans); margin-left: .08em; }

/* Первый экран: заканчивается чёткой границей (линия следующей секции) */
.s-hero { padding: var(--s-8) 0 var(--s-8); }
@media (min-width: 768px) { .s-hero { padding: var(--s-16) 0; } }
.s-hero .s-h1 { margin-top: var(--s-5); }
.s-hero .s-lead { font-size: 17px; }
.s-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.s-trust { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.s-trust li { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.3 var(--f-sans); color: var(--meta); }
.s-trust li::before { content: '✓'; color: var(--accent-ink); font-weight: 700; }
.s-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.s-step { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--frame); }
.s-step b { font: 600 12px/1 var(--f-mono); letter-spacing: 1.2px; color: var(--meta); }
.s-step span { font: 600 13px/1.3 var(--f-sans); }
@media (min-width: 900px) { .s-steps { max-width: 760px; } }

/* Карточки: номер, заголовок 1–3 слова, ≤ 4 строк текста */
.s-cards { display: grid; gap: 10px; margin-top: var(--s-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .s-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .s-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-card { border: 1px solid var(--frame); border-radius: var(--r-feature); padding: var(--s-6); display: grid; gap: var(--s-2); align-content: start; background: var(--canvas); }
.s-card__n { font: 600 12px/1 var(--f-mono); letter-spacing: 1.2px; color: var(--meta); }
.s-card__t { font: 700 21px/1.12 var(--f-sans); margin: 0; }
.s-card__p { font: 400 15px/1.5 var(--f-sans); color: var(--meta); margin: 0; }
.s-card--spot { background: var(--spot); color: var(--on-spot); border-color: transparent; }
.s-card--mint { background: var(--mint); color: var(--on-accent); border-color: transparent; }
.s-card--spot .s-card__n, .s-card--spot .s-card__p, .s-card--mint .s-card__n, .s-card--mint .s-card__p { color: inherit; opacity: .78; }
.s-card .s-num { margin-bottom: var(--s-2); }

/* Как это выглядит: уведомление в Telegram — тем же текстом, что шлёт бот */
.s-demo { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 900px) { .s-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.s-tg { margin: 0; border: 1px solid var(--frame); border-radius: var(--r-feature); background: var(--layer); padding: var(--s-5); display: grid; gap: var(--s-3); max-width: 420px; }
.s-tg__bot { display: flex; align-items: center; gap: var(--s-2); }
.s-tg__bot img { width: 32px; height: 32px; }
.s-tg__msg { background: var(--layer-2); border-radius: var(--r-feature); padding: var(--s-4); display: grid; gap: 2px; font: 400 15px/1.45 var(--f-sans); }
.s-tg__msg small { color: var(--meta); font-size: 13px; }
.s-tg__msg p { margin: var(--s-2) 0 0; }
.s-tg__btn { border: 1px solid var(--frame); border-radius: var(--r-btn); min-height: 40px; display: grid; place-items: center;
             font: 600 12px/1 var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.s-demo__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.s-demo__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); font: 400 16px/1.5 var(--f-sans); }
.s-demo__list b { font: 600 12px/1.9 var(--f-mono); color: var(--meta); }

/* Плашка-призыв: заливка акцентом, заголовок ≤ 2 строк, одна кнопка */
.s-band { background: var(--mint); color: var(--on-accent); border-radius: var(--r-feature); padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-5); justify-items: start; }
.s-band .s-h2 { max-width: 22ch; }
.s-band .btn { background: var(--on-accent); color: var(--mint); }
.s-band--spot { background: var(--spot); color: var(--on-spot); }
.s-band--spot .btn { background: var(--on-spot); color: var(--spot); }
.s-band .s-lead { color: inherit; opacity: .78; margin: 0; }
.s-band .s-eyebrow { color: inherit; margin: 0; }

/* «Обычно → С Авиграмом»: инверсный блок, старое — тихим, новое — жирным, стрелка акцентом */
.s-vs { background: var(--spot); color: var(--on-spot); border-radius: var(--r-feature); padding: var(--s-8) var(--s-6); margin-top: var(--s-8); }
.s-vs__head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid currentColor; font: 700 18px/1.2 var(--f-sans); }
.s-vs__head i { color: var(--vs-arrow); font-style: normal; }
.s-vs ul { list-style: none; margin: 0; padding: 0; }
.s-vs li { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--frame); }
.s-vs li:last-child { border-bottom: 0; padding-bottom: 0; }
.s-vs__old { opacity: .62; font: 400 15px/1.4 var(--f-sans); }
.s-vs__arrow { color: var(--vs-arrow); font: 700 16px/1 var(--f-sans); }
.s-vs__new { font: 700 17px/1.35 var(--f-sans); }

/* Тарифы */
.s-plans { display: grid; gap: 10px; margin-top: var(--s-8); }
@media (min-width: 900px) { .s-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.s-plan { border: 1px solid var(--frame); border-radius: var(--r-feature); padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.s-plan--main { border-color: var(--line); }
.s-plan__price { font: 700 clamp(40px, 11vw, 52px)/.95 var(--f-display); }
.s-plan__price small { font: 500 14px/1 var(--f-sans); color: var(--meta); margin-left: var(--s-1); }
.s-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.s-plan li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-2); font: 400 15px/1.45 var(--f-sans); }
.s-plan li::before { content: '—'; color: var(--meta); }
.s-note { margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--frame); border-radius: var(--r-card); box-shadow: inset 3px 0 0 0 var(--uv);
          font: 400 15px/1.5 var(--f-sans); }

/* Вопросы */
.s-faq { margin-top: var(--s-8); border-top: 1px solid var(--frame); }
.s-faq details { border-bottom: 1px solid var(--frame); }
.s-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0;
                 font: 600 17px/1.35 var(--f-sans); min-height: 44px; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: '+'; font: 400 22px/1 var(--f-sans); color: var(--meta); }
.s-faq details[open] summary::after { content: '–'; }
.s-faq p { margin: 0 0 var(--s-5); color: var(--meta); font: 400 16px/1.55 var(--f-sans); max-width: 64ch; }

/* Подвал */
.s-foot { border-top: 1px solid var(--frame); padding-top: var(--s-12); padding-bottom: calc(var(--s-12) + 72px); display: grid; gap: var(--s-6); }
.s-foot__links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.s-foot__links a { font: 600 12px/1.6 var(--f-mono); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; color: var(--meta); }
.s-foot__links a:hover { color: var(--ink); }
.s-foot__req { color: var(--meta); font: 400 13px/1.6 var(--f-sans); margin: 0; }

/* Документы (оферта, политика, согласие) */
.s-doc { padding: var(--s-12) 0 var(--s-16); max-width: 72ch; }
.s-doc h1 { font: 700 clamp(28px, 7vw, 40px)/1.08 var(--f-sans); margin: 0 0 var(--s-4); }
.s-doc h2 { font: 700 20px/1.25 var(--f-sans); margin: var(--s-8) 0 var(--s-3); }
.s-doc p, .s-doc li { font: 400 16px/1.6 var(--f-sans); }
.s-doc .s-draft { padding: var(--s-4); border: 1px solid var(--uv); border-radius: var(--r-card); box-shadow: inset 3px 0 0 0 var(--uv); }

/* ── Чат: пузырь с первым сообщением → окно (полупрозрачное, с размытием подложки) → быстрые вопросы → форма ── */
.s-bubble { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 40; width: min(360px, calc(100vw - 32px));
            display: grid; grid-template-columns: 32px minmax(0, 1fr) 28px; gap: var(--s-3); align-items: start; text-align: left;
            padding: var(--s-4); border: 1px solid var(--frame); border-radius: var(--r-feature); background: var(--layer); color: var(--ink);
            font: 400 15px/1.45 var(--f-sans); cursor: pointer; opacity: 0; transform: translateY(16px);
            transition: opacity .3s ease, transform .3s ease; }
.s-bubble.is-in { opacity: 1; transform: none; }
.s-bubble img { width: 32px; height: 32px; }
.s-bubble__name { display: block; font: 600 11px/1.4 var(--f-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--meta); margin-bottom: 2px; }
.s-bubble__x { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--meta); font-size: 18px; line-height: 1; }
.s-bubble__x:hover { color: var(--ink); background: var(--surface); }
.s-launch { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 40; width: 56px; height: 56px; border-radius: 50%; border: 0;
            background: var(--btn-bg); color: var(--btn-fg); display: grid; place-items: center; cursor: pointer; }
.s-launch svg { width: 24px; height: 24px; }

.s-chat { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: stretch; }
.s-chat[hidden], .s-bubble[hidden], .s-launch[hidden] { display: none; }
.s-chat__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .25s ease; }
.s-chat__panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(88vh, 720px); min-height: 52vh;
                 background: var(--glass); border: 1px solid var(--glass-line); border-bottom: 0; border-radius: var(--r-feature) var(--r-feature) 0 0;
                 -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
                 opacity: 0; transform: translateY(24px); transition: opacity .25s ease, transform .25s ease; }
.s-chat.is-open .s-chat__scrim { opacity: 1; }
.s-chat.is-open .s-chat__panel { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .s-chat { align-items: end; justify-items: end; padding: var(--s-6); }
  .s-chat__panel { width: 400px; min-height: 0; max-height: min(78vh, 640px); border-bottom: 1px solid var(--glass-line); border-radius: var(--r-feature); }
}
/* Без поддержки размытия или с «уменьшить прозрачность» — плотный слой */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .s-chat__panel { background: var(--layer); } }
@media (prefers-reduced-transparency: reduce) { .s-chat__panel { background: var(--layer); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.s-chat__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-4) var(--s-3);
                border-bottom: 1px solid var(--glass-line); }
.s-chat__head img { width: 32px; height: 32px; }
.s-chat__head b { display: block; font: 700 16px/1.2 var(--f-sans); }
.s-chat__close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.s-chat__close:hover { background: var(--surface); }
.s-chat__log { overflow-y: auto; padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; overscroll-behavior: contain; }
.s-msg { max-width: 88%; padding: 10px 14px; border-radius: var(--r-feature); background: var(--surface); color: var(--ink); font: 400 15px/1.45 var(--f-sans); }
.s-msg a { text-decoration-color: currentColor; }
.s-msg--me { justify-self: end; background: var(--btn-bg); color: var(--btn-fg); }
.s-chat__foot { padding: var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-line); display: grid; gap: var(--s-3); }
.s-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.s-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--frame); border-radius: var(--r-btn); background: transparent; color: var(--ink);
          font: 500 14px/1.2 var(--f-sans); cursor: pointer; }
.s-chip:hover { border-color: var(--ink); }
.s-form { display: grid; gap: var(--s-3); }
.s-form .input { background: var(--field); }
.s-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); align-items: start; font: 400 13px/1.45 var(--f-sans); color: var(--meta); }
.s-check input { margin: 2px 0 0; accent-color: var(--ink); width: 16px; height: 16px; }
.s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
html.s-lock { overflow: hidden; }