/* ==== Тема — бренд-кит 1C:Yangi, утверждённый концепт 2026-08-20 ==========
   Одна золотая заливка на странице — у геройского CTA. Контраст --muted и
   --gold-deep на кремовом фоне пересчитан (WCAG AA с запасом, не впритык). */
:root {
  --gold:       #F5A623;
  --gold-deep:  #8C5A08;
  --ink:        #211B14;
  --bg:         #FDFBF8;
  --surface:    #FFFFFF;
  --border:     #E8E1D3;
  --text:       #2B2621;
  --muted:      #6B6157;
  --link:       #2F80ED;
  --danger:     #D92D20;
  --ok:         #1A7F37;
  --shadow:     0 1px 3px rgba(33,27,20,.05), 0 10px 28px rgba(33,27,20,.06);
  --shadow-lg:  0 4px 10px rgba(33,27,20,.06), 0 24px 48px rgba(33,27,20,.10);
  /* Полупрозрачная подложка шапки (sticky, с blur) — не то же самое, что
     --surface (тот непрозрачный); нужен свой токен, чтобы не хардкодить rgba
     от --bg напрямую (см. .nav ниже — было захардкожено под светлую тему,
     из-за чего шапка не темнела в тёмной теме, найдено 2026-08-21). */
  --nav-bg: rgba(253,251,248,.92);
  /* Горизонтальный отступ секций и внутренние зазоры сеток — растут по мере
     расширения экрана, брейкпоинты см. в самом низу файла. Одна точка
     настройки вместо повторения чисел в каждой секции. */
  --pad: 20px;
  --gap: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gold:       #FFC107;
    --gold-deep:  #FFD766;
    --ink:        #211B14;
    --bg:         #1C1815;
    --surface:    #241E18;
    --border:     #3B3226;
    --text:       #F2EDE6;
    --muted:      #B3A996;
    --link:       #4A9BFF;
    --danger:     #FF6B6B;
    --ok:         #3DDC84;
    --shadow:     0 1px 3px rgba(0,0,0,.35);
    --shadow-lg:  0 4px 12px rgba(0,0,0,.35), 0 24px 48px rgba(0,0,0,.35);
    --nav-bg:     rgba(28,24,21,.92);
  }
}

/* ==== База ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* Onest — единственный акцентный шрифт, только для заголовков секций
   (H1 героя, H2 «Тарифы»/«Контакты», H3 активного блока «Возможности»).
   Тело текста, цитата, подписи тарифов — везде системный гротеск.
   История замены (2026-08-20): был Unbounded → пробовали Manrope (показался
   слишком нейтральным, пользователь предпочёл характер Unbounded) → Onest —
   геометрический дисплейный гротеск того же «техно»-семейства, что и
   Unbounded, но спокойнее по формам; заявленная поддержка узбекского
   (кириллица и латиница) закрывает требование брендбука проверять диакритику
   (ʻ в «oʻ»/«gʻ»). */
.display { font-family: "Onest", "Segoe UI", system-ui, sans-serif; }

.eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ==== Шапка ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px var(--pad);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.tile {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--gold);
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 5px;
}
.tile .c { border-radius: 2.5px; }
.tile .c.ghost { border: 1.2px solid rgba(33,27,20,.35); }
.tile .c.active { background: var(--ink); }
.brand-name { font-size: 17px; font-weight: 700; color: var(--text); }

.nav-links { display: none; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.nav-right { display: flex; align-items: center; gap: 12px; }

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 6.5rem;
  padding: 8px 12px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer;
}
.lang-btn svg { width: 11px; height: 11px; opacity: .55; }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 7rem; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); z-index: 20;
}
.lang-menu li { padding: 8px 12px; font-size: 13px; white-space: nowrap; border-radius: 6px; cursor: pointer; }
.lang-menu li:hover { background: var(--bg); }
.lang-menu li.active { color: #fff; background: var(--link); }

a.btn-cta {
  padding: 9px 18px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  /* Обрезка текста многоточием — нашлось 2026-08-21 при UX-тестировании: когда
     эта кнопка показывает имя авторизованного пользователя (см. index.html,
     refreshResumeLabels), бэкенд иногда отдаёт email целиком вместо короткого
     имени — без ограничения кнопка раздувалась (в живом тесте — 252px) и на
     узких десктопных окнах вылезала за край экрана, создавая горизонтальный
     скролл на всей странице. 100px, не больше — посчитано под худший случай
     390px: доступно 350px в строке шапки (без учёта паддингов), из них лого
     ~107px + зазор 20px + языковой дропдаун 104px (min-width:6.5rem) + зазор
     12px = 243px уже занято, на кнопку остаётся ~107px. min-width:0
     обязателен — иначе flex-элемент (.nav-right — display:flex) не
     сжимается меньше своего контента, ellipsis не сработает. */
  max-width: 100px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.btn-cta:hover { text-decoration: none; border-color: var(--text); }

/* ==== Герой ============================================================
   Три состояния по ширине (см. брейкпоинты внизу файла):
   - мобильный: текст сверху, картинка снизу, плоская «карточка + телефон
     внахлёст на угол» (проценты, не фиксированные px — не ломается).
   - планшет: тот же плоский приём, но текст и картинка рядом.
   - десктоп (1024px+): картинка с 3D-наклоном, тоже на процентах — не
     привязана к конкретной ширине окна, в отличие от исходного макета. */
/* scroll-margin-top — переход по #top (лого в шапке, внешние ссылки вида
   .../#top) без него приземлялся на scrollY = высота шапки, а не 0 (шапка
   sticky и в Chrome визуально перекрывает то же место, поэтому незаметно —
   но это известный кросс-браузерный краевой случай со sticky-шапками,
   в других движках может показать сдвиг/наезд). 77px — высота .nav на базовой
   ширине (<700px, замерено), 86px — на ≥700px (там .nav padding больше,
   см. брейкпоинт ниже). Найдено 2026-08-21. */
.hero { max-width: 1160px; margin: 0 auto; padding: 32px var(--pad) 0; scroll-margin-top: 77px; }
.hero-copy { max-width: 480px; }

.headline {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 800;
  text-wrap: balance;
}
.sub { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Колонкой, не строкой — 2026-08-21, по просьбе пользователя: раньше «Тест-драйв»
   и бейджи сторов на широком десктопе оказывались в одной строке (места
   хватало), визуально сливаясь в один кластер — непонятно, что тут главное
   действие, а что вторично. Теперь бейджи всегда отдельной строкой под
   кнопкой, на любой ширине. */
.cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
/* Оба бейджа — один флекс-элемент .cta-row, переносятся вместе при
   переносе строки (не порознь на разные уровни). */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
a.btn-cta-big {
  display: inline-block;
  padding: 14px 26px;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  background: var(--gold);
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
.hero-visual { position: relative; margin-bottom: 40px; }
.hero-shot {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(33,27,20,.14);
}
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot-phone {
  /* right: max(-4%, -16px) — не просто -4%: тот масштабируется вместе с
     контейнером, а .hero-visual остаётся в одну колонку вплоть до 700px (см.
     брейкпоинт ниже), т.е. диапазон ширин контейнера большой (от ~350px на
     телефоне до ~660px прямо перед брейкпоинтом). При -4% на широком конце
     этого диапазона (~660px) overshoot вырастает до ~26px — больше бокового
     паддинга страницы (20px), даёт горизонтальный скролл на всей странице.
     На узком конце -4% даёт безопасные ~14px — max() не даёт заходить дальше
     -16px, но не мешает на узких ширинах. Найдено 2026-08-21 при
     UX-тестировании (изначально смотрели другую кнопку, всплыло попутно). */
  position: absolute; right: max(-4%, -16px); bottom: -22%;
  height: 56%; width: auto;
  border-radius: 14px;
  border: 4px solid var(--surface);
  box-shadow: 0 16px 34px rgba(33,27,20,.20);
}

/* Чёрные бейджи сторов — теперь прямо в .cta-row рядом с «Тест-драйв»
   (переехали из отдельного блока .stores 2026-08-20 — тот дублировал
   текстовую ссылку рядом с CTA). Контракт с product.js — data-store. */
a.store-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  color: #fff; background: var(--ink);
  border: 1px solid transparent; border-radius: 10px;
  transition: opacity .15s;
}
a.store-badge:hover { opacity: .85; text-decoration: none; }
.store-icon { width: 18px; height: 18px; }
.store-name { font-size: 13.5px; font-weight: 600; }

/* ==== Вход / регистрация (функциональный блок, движок — assets/auth.js) ===
   Попап, не постоянный раздел страницы: auth.js после успеха сам уводит
   браузер на другой адрес (рабочее приложение), карточка — временное окно
   поверх текущей страницы. Открытие/закрытие — inline-скрипт внизу index.html.
   Разметка экранов внутри (id/data-*) — универсальная, не наша, не менять. */
.auth-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-overlay.hidden { display: none; }
.auth-backdrop {
  position: absolute; inset: 0;
  background: rgba(33,27,20,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.auth-modal { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.auth-close {
  position: absolute; top: -14px; right: -14px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.auth-close svg { width: 16px; height: 16px; }
.auth-close:hover { color: var(--danger); }
body.auth-open { overflow: hidden; }

.auth-card {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
#heading { margin: 0 0 24px; font-size: 20px; font-weight: 700; text-align: center; }
label { display: block; margin-bottom: 14px; }
.label-text { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
input {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(47,128,237,.18); }
input.invalid { border-color: var(--danger); }
.field-error { display: none; margin-top: 5px; font-size: 13px; color: var(--danger); }
.field-error.shown { display: block; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%;
  margin: 0; padding: 0; background: var(--muted); border: none;
  border-radius: 0 8px 8px 0; cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.pw-toggle:hover:not(:disabled) { background: var(--text); opacity: 1; }
.pw-toggle.shown {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.caps-note { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.pw-check { margin: 8px 0 0; padding: 0; font-size: 13px; list-style: none; }
.pw-check li { position: relative; margin-bottom: 4px; padding-left: 22px; color: var(--muted); transition: color .15s; }
.pw-check li::before { content: "○"; position: absolute; left: 4px; }
.pw-check li.ok { color: var(--text); }
.pw-check li.ok::before { content: "✓"; color: var(--ok); }
.captcha { margin-bottom: 14px; }
.captcha:empty { display: none; }
button[type="submit"] {
  width: 100%; margin-top: 10px; padding: 12px; font: inherit; font-weight: 600;
  color: var(--ink); background: var(--gold); border: none; border-radius: 8px;
  cursor: pointer; transition: background .15s, opacity .15s;
}
button[type="submit"]:hover:not(:disabled) { background: #ecb800; }
button[type="submit"]:disabled { opacity: .55; cursor: default; }
.notice { margin-bottom: 18px; padding: 10px 12px; font-size: 14px; color: var(--danger); background: rgba(217,45,32,.09); border-radius: 8px; }
.notice-retry {
  display: block; width: auto; margin: 8px 0 0; padding: 7px 14px;
  font-size: 13px; color: var(--danger); background: transparent;
  border: 1px solid var(--danger); border-radius: 6px; cursor: pointer;
}
.notice-retry:hover:not(:disabled) { color: #fff; background: var(--danger); opacity: 1; }
.switch { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.hint { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.hint.center { text-align: center; margin-bottom: 0; }
.workplace-entry { margin-top: 10px; font-size: 13px; }
body:not([data-mode="client"]) .workplace-entry { display: none; }
.workplace-steps { margin: 0 0 18px; padding-left: 20px; font-size: 14px; color: var(--muted); }
.workplace-steps li + li { margin-top: 8px; }
a.btn-scan {
  display: block; padding: 12px; font-weight: 600; text-align: center;
  color: var(--ink); background: var(--gold); border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
a.btn-scan:hover { background: #ecb800; }
.apps { list-style: none; margin: 0; padding: 0; }
.apps li + li { margin-top: 8px; }
.apps a {
  display: block; padding: 14px 16px; color: inherit;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color .15s;
}
.apps a:hover { border-color: var(--link); text-decoration: none; }
.app-name { font-weight: 500; }
.app-note { font-size: 13px; color: var(--muted); }
.apps a.btn-continue { padding: 12px; font-weight: 600; text-align: center; color: var(--ink); background: var(--gold); border: none; }
.apps a.btn-continue:hover { background: #ecb800; border-color: transparent; }
.progress { text-align: center; padding: 12px 0 4px; }
.clock { margin-bottom: 8px; font-variant-numeric: tabular-nums; font-size: 22px; }
.spinner {
  width: 28px; height: 28px; margin: 0 auto 14px;
  border: 3px solid var(--border); border-top-color: var(--link);
  border-radius: 50%; animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.success-mark {
  width: 48px; height: 48px; margin: 0 auto 14px;
  font-size: 26px; line-height: 48px; color: #fff;
  background: var(--ok); border-radius: 50%;
}
.debug { max-width: 760px; margin: 24px auto 0; padding: 0 var(--pad); }
.debug details { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.debug summary { padding: 10px 14px; font-size: 13px; color: var(--muted); cursor: pointer; }
.debug pre { margin: 0; padding: 0 14px 14px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; }

/* ==== Цитата УТП ======================================================== */
.quote-section {
  max-width: 1160px; margin: 40px auto 0; padding: 44px var(--pad);
  border-top: 1px solid var(--border);
}
.quote-rule { width: 32px; height: 3px; background: var(--gold); margin-bottom: 16px; }
.quote {
  /* --text, не --ink — цитата лежит на обычном фоне страницы (не на золотой
     заливке), --ink статично тёмный и в тёмной теме давал тёмный текст на
     тёмном фоне (почти нечитаемо). Тот же баг был ещё в 4 местах — см. рядом
     .fb-title/.b-title/.plan-price/.c-row-value. Найдено 2026-08-21. */
  margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--text);
}

/* ==== Заголовок секции (общий для «Тарифов»/«Контактов») ================ */
.section-head { max-width: 600px; margin: 0 auto; padding: 0 var(--pad) 32px; text-align: center; }
.section-head h2 { margin: 0 0 12px; font-size: 26px; font-weight: 700; }
.section-head p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* ==== Возможности =======================================================
   Переключатели (.fb-tab): клик меняет скриншот (или заглушку, если у блока
   пока нет своего кадра — .fb-placeholder), заголовок и описание. Обвязка —
   inline-скрипт внизу index.html (#feature-shot/#feature-placeholder/
   #feature-title/#feature-desc). */
.features { max-width: 1160px; margin: 0 auto; padding: 44px var(--pad); }
.fb-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.fb-tab {
  padding: 8px 15px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.fb-tab:hover { border-color: var(--gold-deep); }
.fb-tab.active { color: var(--ink); background: var(--gold); border-color: var(--gold); font-weight: 700; }

.fb-shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(33,27,20,.10); }
.fb-shot img { display: block; width: 100%; height: auto; }
.fb-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  aspect-ratio: 16 / 9; padding: 28px; margin-bottom: 22px;
  border-radius: 14px; border: 1.5px dashed var(--border); background: var(--surface);
  color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: center;
}
.fb-placeholder svg { width: 28px; height: 28px; opacity: .55; }
.fb-placeholder p { margin: 0; max-width: 320px; }
.fb-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--text); }
.fb-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); min-height: 66px; }

/* Десктопный + телефонный кадр одновременно — телефон внахлёст поверх
   десктопного (тот же приём, что уже в герое: .hero-visual/.hero-shot/
   .hero-shot-phone). Выбрано 2026-08-20 после сравнения на отдельной
   черновой странице (_comparison-features.html) с вариантом «свой кадр под
   брейкпоинт» — страница сравнения удалена, решение принято и здесь.
   .fb-visual-b — позиционирующий родитель БЕЗ overflow:hidden (в отличие
   от .fb-shot) — иначе обрезает телефон, который нарочно висит за краем
   десктопного кадра.
   bottom:0 (не отрицательный) — сознательно: 8 разных скриншотов сильно
   отличаются пропорциями (от почти квадратного «Расчёты с контрагентами»
   до широкого «Деньги»), а телефон в углу считается в процентах от высоты
   десктопного кадра — на самом высоком скриншоте отрицательный bottom дал
   бы кадр, вылезающий далеко за пределы блока и наезжающий на
   «Преимущества» ниже. Флеш по нижнему краю безопасен на всех 8
   пропорциях; крупный масштаб (2026-08-20, по просьбе — «увеличить,
   при необходимости перекрывай») даёт перекрытие самого десктопного
   кадра — это осознанно, не обрезка/утечка за пределы блока. */
.fb-visual-b { position: relative; margin-bottom: 22px; }
@media (min-width: 700px) { .fb-visual-b { margin-bottom: 0; } }
.fb-shot-mobile-wrap {
  display: block;
  /* right:-2% на мобильной ширине (одна колонка, .fb-visual-b — почти вся
     ширина страницы) — на -6% телефон вылезал ровно настолько, что съедал
     весь боковой отступ страницы (var(--pad)=20px) и утыкался в край экрана
     на всех 8 вкладках (замерено 2026-08-20: правый край кадра совпадал с
     innerWidth день в день). ≥700px — двухколоночная сетка, там overshoot
     уходит в grid-gap (увеличен сегодня же до 48px), а не в край страницы —
     там -6% безопасен, возвращаем его ниже по брейкпоинту. */
  position: absolute; right: -2%; bottom: 0;
  height: 85%; width: auto;
  border-radius: 14px; border: 4px solid var(--surface);
  box-shadow: 0 16px 34px rgba(33,27,20,.20);
}

/* ==== Преимущества ======================================================= */
.benefits { max-width: 1160px; margin: 0 auto; padding: 8px var(--pad) 44px; list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.bcard { padding: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 13px; }
.b-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.b-icon {
  flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-deep); background: rgba(245,166,35,.14); border-radius: 10px;
}
.b-icon svg { width: 17px; height: 17px; }
.b-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.b-text { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ==== Цены ============================================================= */
.pricing-section { max-width: 1160px; margin: 0 auto; padding: 44px var(--pad); }
.note {
  max-width: 560px; margin: 0 auto 28px; padding: 12px 16px; text-align: center;
  background: rgba(245,166,35,.10); border: 1px solid rgba(245,166,35,.35); border-radius: 10px;
  font-size: 12.5px; color: var(--gold-deep); font-weight: 600;
}
.plans { display: grid; grid-template-columns: 1fr; gap: var(--gap); max-width: 940px; margin: 0 auto; }
.plan { padding: 22px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; }
.plan.on { border-color: var(--gold); box-shadow: 0 16px 34px rgba(33,27,20,.10); }
.plan-name { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.plan-price { display: block; margin: 0 0 4px; font-size: 24px; font-weight: 700; color: var(--text); }
.plan-note { display: block; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.plan-list { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.plan-list li { display: flex; gap: 8px; font-size: 13px; color: var(--text); }
.plan-list svg { flex: none; width: 15px; height: 15px; color: var(--ok); margin-top: 2px; }
a.plan-cta { display: block; width: 100%; padding: 11px; text-align: center; font-size: 13.5px; font-weight: 600; border-radius: 8px; }
a.plan-cta.solid { color: var(--ink); background: var(--gold); font-weight: 700; }
a.plan-cta.outline { color: var(--text); background: transparent; border: 1px solid var(--border); }
a.plan-cta:hover { text-decoration: none; }

/* ==== Контакты ========================================================== */
.contact-section { max-width: 1160px; margin: 0 auto; padding: 44px var(--pad) 56px; }
.contact-info { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 900px; margin: 0 auto; }
.c-row { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.c-row-icon { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--gold-deep); background: rgba(245,166,35,.14); border-radius: 10px; }
.c-row-icon svg { width: 17px; height: 17px; }
.c-row-title { display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--muted); }
.c-row-value { display: block; font-size: 14px; font-weight: 700; color: var(--text); }

/* ==== Секция-зоны (фон, для ритма страницы) ============================
   Крем (герой+цитата) → белый (возможности+преимущества+тарифы) → крем
   (контакты+футер). */
.zone-surface { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ==== Футер ============================================================= */
.site-footer {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: 1160px; margin: 0 auto; padding: 22px var(--pad) 32px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); text-align: center;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--link); }

/* ==== html.client-boot — та же раскладка client-режима, но СИНХРОННО до
   первого кадра (см. <head> в index.html) ================================
   body[data-mode="client"] ниже выставляет композиционный <script> внизу
   файла — уже ПОСЛЕ первой отрисовки, то есть без этого класса первый кадр
   в client-режиме на мгновение показывает полный маркетинг со скрытым
   попапом входа, и лишь потом JS меняет всё местами. Полный дубль списка
   ниже, но на html.client-boot — тот же эффект, без ожидания JS.
   Изначально сделано в рамках попыток устранить задержку выбора сохранённого
   пароля в client-режиме (репорт 2026-08-22) — не помогло, как и пять других
   правок той же серии (см. CLAUDE.md, вопрос отложен в бэклог). Оставлено —
   устраняет реальную вспышку контента на первом кадре, независимо полезно
   само по себе. */
html.client-boot .nav-links,
html.client-boot .btn-cta,
html.client-boot .hero-copy,
html.client-boot .hero-visual,
html.client-boot .quote-section,
html.client-boot .benefits,
html.client-boot .features,
html.client-boot .zone-surface,
html.client-boot .pricing-section,
html.client-boot .contact-section,
html.client-boot .site-footer {
  display: none;
}
html.client-boot .nav { justify-content: center; z-index: 60; }
html.client-boot .hero { padding-top: 16px; }
html.client-boot .auth-close,
html.client-boot .auth-backdrop { display: none; }
html.client-boot .auth-overlay { pointer-events: none; display: flex; }
html.client-boot .auth-modal { pointer-events: auto; }

/* ==== Режимы отображения (data-mode на body, задаёт index.html) ========
   client     — открыто мобильным клиентом 1С: только форма входа, весь маркетинг скрыт.
   mobile-web — мобильный браузер: вход недоступен, только маркетинг + сторы.
   desktop    — обычный браузер: всё вместе. ============================= */
body[data-mode="client"] .nav-links,
body[data-mode="client"] .btn-cta,
body[data-mode="client"] .hero-copy,
body[data-mode="client"] .hero-visual,
body[data-mode="client"] .quote-section,
body[data-mode="client"] .benefits,
body[data-mode="client"] .features,
body[data-mode="client"] .zone-surface,
body[data-mode="client"] .pricing-section,
body[data-mode="client"] .contact-section,
body[data-mode="client"] .site-footer {
  display: none;
}
/* .zone-surface — обёртка вокруг .features+.benefits с собственными
   background/border-top/border-bottom (см. .zone-surface без модификатора
   режима выше). Раньше пряталось только содержимое (.features,
   .zone-surface .fb-tabs), сама обёртка оставалась в потоке — пустая, но с
   границами, которые смыкались в тонкую горизонтальную полосу прямо под
   шапкой (в mobile-web такого нет — там всё содержимое зоны видно, полоса не
   успевает схлопнуться в линию). Прежняя точечная строка `.zone-surface
   .fb-tabs` стала избыточной (.features и так уже в списке выше) — убрана.
   Найдено по репорту пользователя 2026-08-22. */
body[data-mode="client"] .nav { justify-content: center; }
body[data-mode="client"] .hero { padding-top: 16px; }
body[data-mode="client"] .auth-close,
body[data-mode="client"] .auth-backdrop { display: none; }
/* Без backdrop оверлей визуально прозрачный, но остаётся fixed на весь экран
   поверх шапки (z-index:50 > .nav z-index:10) и перехватывал клики по
   переключателю языка — тот в client-режиме не скрыт (см. список выше),
   должен оставаться рабочим. Пропускаем клики сквозь пустую область
   оверлея, возвращаем их только самой карточке входа. Баг найден 2026-08-20. */
body[data-mode="client"] .auth-overlay { pointer-events: none; }
body[data-mode="client"] .auth-modal { pointer-events: auto; }
/* .nav (z-index:10) рендерился под .auth-overlay (z-index:50) — сам попап
   прозрачный (без backdrop, см. выше), но выпадающий список языка (потомок
   .nav) уходил на задний план и наполовину скрывался карточкой входа при
   открытии. Поднимаем .nav только в client-режиме — здесь он всего лишь
   узкая полоска с лого и языком (justify-content:center, см. выше), риск
   перекрыть чем-то содержательным карточку снизу минимален. Найдено 2026-08-20. */
body[data-mode="client"] .nav { z-index: 60; }

body[data-mode="mobile-web"] .auth-overlay,
body[data-mode="mobile-web"] .btn-cta,
body[data-mode="mobile-web"] .btn-cta-big {
  /* .btn-cta-big («Тест-драйв») добавлен 2026-08-21 — раньше не был скрыт (только
     .btn-cta, «Войти»), клик по нему на телефоне в браузере открывал auth-open
     (блокировал прокрутку), не показывая ничего — попап тоже скрыт этим же
     правилом. Найдено по репорту пользователя. */
  display: none;
}

/* Призыв установить приложение — виден только в mobile-web, вместо кнопок
   входа. На десктопе/client — .mobile-install-card остаётся display:contents
   (сама не рендерится, .store-badges внутри ведёт себя как прямой ребёнок
   .cta-row, раскладка не меняется), .mobile-install-hint скрыт через
   display:none по умолчанию.
   Переработано 2026-08-22 по просьбе пользователя (третий заход) — раньше
   был золотистый блок-подложка с иконкой; убраны оба («выбивались из общего
   дизайна» — на странице всего одна золотая заливка, у геройского CTA,
   см. комментарий у :root в начале файла). Теперь это обычный текст в потоке
   героя, тем же приёмом, что .sub чуть выше. */
.mobile-install-card { display: contents; }
.mobile-install-hint { display: none; }

body[data-mode="mobile-web"] .mobile-install-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
body[data-mode="mobile-web"] .mobile-install-hint {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
/* store-badges живут и на десктопе (не только mobile-web) — своих стилей не
   меняем там. В mobile-web раньше были принудительно столбцом — по просьбе
   пользователя 2026-08-22 (третий заход) переведены в ряд: базовый
   flex-wrap:wrap (см. .store-badges выше) сам перенесёт второй бейдж на
   новую строку, если места не хватает, вместо того чтобы всегда его туда
   отправлять. Первый (подходящий под ОС) остаётся обычной кнопкой, второй —
   лёгкая ссылка (см. .store-badge--secondary ниже). */

/* Второй (не подходящий под ОС) стор в mobile-web — не кнопка, а лёгкая
   текстовая ссылка: раньше был той же кнопкой с приглушённой непрозрачностью,
   выглядело как «второй сорт» того же элемента, а не как явно другое,
   менее приоритетное действие. Переработано 2026-08-21 по просьбе
   пользователя. Только mobile-web — на десктопе оба бейджа остаются
   обычными кнопками (JS не трогает классы вне mobileWeb). */
body[data-mode="mobile-web"] a.store-badge.store-badge--secondary {
  padding: 4px 0;
  background: transparent;
  border-color: transparent;
  color: var(--link);
}
body[data-mode="mobile-web"] a.store-badge.store-badge--secondary:hover { opacity: 1; text-decoration: underline; }
body[data-mode="mobile-web"] a.store-badge.store-badge--secondary .store-icon { width: 15px; height: 15px; }
body[data-mode="mobile-web"] a.store-badge.store-badge--secondary .store-name { font-weight: 600; }

/* ==== Отзывчивость ======================================================
   Два брейкпоинта: 700px (планшет и шире) и 1024px (десктоп и шире) —
   проверены на живом макете на трёх ширинах (390 / 834 / 1440) перед
   переносом сюда, не придуманы на месте. */
@media (min-width: 700px) {
  :root { --pad: 32px; --gap: 20px; }
  .nav-links { display: flex; }
  .nav { padding-top: 22px; padding-bottom: 22px; }
  a.btn-cta { max-width: 200px; }

  .hero { display: flex; gap: 32px; align-items: center; padding-top: 40px; scroll-margin-top: 86px; }
  .hero-copy { flex: 0 0 300px; }
  .headline { font-size: 34px; }
  .hero-visual { flex: 1; margin-bottom: 0; }
  .hero-shot-phone { right: -3%; bottom: -14%; height: 52%; }

  .quote-section { display: flex; gap: 26px; align-items: flex-start; padding: 56px var(--pad); }
  .quote-rule { flex: none; width: 3px; height: 110px; margin: 6px 0 0; }
  .quote { font-size: 23px; max-width: 640px; }

  .features { padding: 56px var(--pad); }
  /* gap увеличен с 28 до 48px (2026-08-20) — при right:-6% на .fb-shot-mobile-wrap
     (телефон нарочно висит за правым краем десктопного кадра, см. комментарий
     выше) тень телефона (box-shadow blur 34px) визуально задевала заголовок
     блока почти на всех 8 вкладках, 28px не хватало; перекрытие ИМ десктопного
     кадра осталось прежним, это другое, осознанное решение — тут только зазор
     до текстовой колонки. */
  .fb-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
  /* Возвращаем -6% (было общее правило до сегодняшнего дня) — здесь это
     безопасно: overshoot уходит в grid-gap выше, а не в край страницы, как
     было на мобильной ширине (см. комментарий у базового правила). */
  .fb-shot-mobile-wrap { right: -6%; }
  .fb-placeholder { margin-bottom: 0; }

  .benefits { grid-template-columns: repeat(2, minmax(0,1fr)); padding-top: 6px; padding-bottom: 56px; }

  /* Тарифы и контакты сознательно остаются в один столбец даже на планшете —
     полная карточка тарифа (название+цена+список фич+кнопка) в 3 колонки на
     ~800px была бы слишком тесной. Именно такая экономия места на прошлой
     версии сайта и приводила к поломкам, здесь по одной карточке во всю
     ширину до самого десктопного брейкпоинта. */
  .plans, .contact-info { max-width: 640px; }

  .site-footer { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 1024px) {
  :root { --pad: 64px; --gap: 20px; }

  .headline { font-size: 42px; }
  .hero-copy { flex: 0 0 420px; }
  .hero { gap: 56px; padding-top: 44px; }
  /* .hero-shot остаётся в обычном потоке (не absolute) — трансформ не влияет
     на раскладку, высота .hero-visual сама следует за реальной высотой
     картинки на любой ширине окна, без подгонянного под макет фиксированного
     px (это и была причина, по которой прошлая версия сайта ломалась). */
  .hero-visual { position: relative; }
  .hero-shot { transform: perspective(1800px) rotateY(-6deg) rotateX(1deg); transform-origin: left center; box-shadow: 40px 50px 90px rgba(33,27,20,.16); }
  .hero-shot-phone { right: 2%; bottom: -6%; height: 46%; transform: perspective(1800px) rotateY(-6deg) rotateX(1deg) translateZ(30px); box-shadow: 20px 40px 70px rgba(33,27,20,.22); }

  .quote-section { padding: 72px var(--pad); }
  .quote-rule { height: 130px; }
  .quote { font-size: 27px; max-width: 760px; }

  .features { padding: 64px var(--pad) 72px; }

  .benefits { grid-template-columns: repeat(4, minmax(0,1fr)); }

  /* max-width сбрасывается обратно на широкий — иначе унаследовал бы 640px
     из планшетного брейкпоинта (min-width правила не «выключаются» сами) и
     три колонки на десктопе оказались бы тесными. */
  .plans { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 940px; }

  .contact-info { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 900px; }
}