/* ============================================================
   Кастомные стили поверх Bootstrap 5.3 по design-system.md
   Порядок подключения: bootstrap.min.css → tokens.css → fonts.css → style.css
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-ink);
  font-weight: 700;
  margin-bottom: 0;
}

h1, .h1 { font-size: var(--text-h1); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--text-h3); font-weight: 700; line-height: 1.2; }
h4, .h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.3; }

p {
  max-width: 65ch;
}

.text-body-lg { font-size: var(--text-body-lg); }
.text-caption { font-size: var(--text-caption); font-weight: 500; line-height: 1.4; }
.text-muted-custom { color: var(--color-text-muted); }
.font-mono { font-family: var(--font-mono); }

a {
  color: var(--color-signal-blue);
}
a:hover {
  color: var(--color-accent-coral-hover);
}

/* Focus-visible — обязателен на всех интерактивных элементах (раздел 5) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---- Контейнер ---- */
.container-page {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (max-width: 639.98px) {
  .container-page { padding-inline: var(--space-4); }
}

/* ---- Вертикальный ритм секций ---- */
.section {
  padding-block: var(--space-24);
}
@media (max-width: 767.98px) {
  .section { padding-block: var(--space-16); }
}
.section-surface {
  background: var(--color-surface);
}

/* /kontakty/ — блок с формой: отступ сверху ровно в 2 раза меньше отступа снизу
   (решение пользователя 2026-09-18). padding-bottom не трогаем (дефолт .section
   96px/64px) — padding-top выставлен явно как половина от него на каждом
   брейкпоинте, а не через Bootstrap pt-* (тот не адаптируется под мобильный
   .section и сломал бы ровное соотношение 1:2 на узких экранах). */
.contacts-form-section {
  padding-top: var(--space-12);
}
@media (max-width: 767.98px) {
  .contacts-form-section { padding-top: var(--space-8); }
}

/* Финальный CTA не использует .section — у него не было верхнего отступа,
   секция выше (FAQ) прилипала к нему вплотную. */
.cta-final {
  padding-top: var(--space-16);
}

.kicker {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-signal-blue-8);
  color: var(--color-signal-blue);
  margin-bottom: var(--space-3);
}

/* ============================================================
   4.1 Кнопки
   ============================================================ */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, color 150ms ease;
  min-height: 44px;
}

.btn-primary-cta {
  background: var(--color-accent-coral);
  border: none;
  color: var(--color-white);
  padding: 14px 28px;
}
.btn-primary-cta:hover {
  background: var(--color-accent-coral-hover);
  color: var(--color-white);
}
.btn-primary-cta:active {
  background: var(--color-accent-coral-active);
  transform: scale(0.98);
  color: var(--color-white);
}
.btn-primary-cta:disabled {
  background: var(--color-neutral-300);
  color: var(--color-neutral-600);
}

.btn-secondary-cta {
  background: transparent;
  border: 1.5px solid var(--color-signal-blue);
  color: var(--color-signal-blue);
  padding: 12.5px 26.5px;
}
.btn-secondary-cta:hover {
  background: var(--color-signal-blue-8);
  color: var(--color-signal-blue);
}
.btn-secondary-cta:active {
  background: rgba(38, 83, 240, 0.14);
  color: var(--color-signal-blue);
}
.btn-secondary-cta:disabled {
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-600);
}

.btn-ghost-cta {
  background: transparent;
  border: none;
  color: var(--color-signal-blue);
  padding: 8px 4px;
  min-height: auto;
}
.btn-ghost-cta:hover {
  text-decoration: underline;
  color: var(--color-signal-blue);
}
.btn-ghost-cta:active {
  color: #1c3fc4;
}
.btn-ghost-cta:disabled {
  color: var(--color-neutral-600);
  text-decoration: none;
}

/* На тёмном фоне (footer/CTA) */
.btn-secondary-on-dark {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--color-white);
  padding: 12.5px 26.5px;
}
.btn-secondary-on-dark:hover {
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  border-color: var(--color-white);
}

/* ============================================================
   4.2 Карточки
   ============================================================ */
.card-custom {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: box-shadow 200ms ease, transform 200ms ease;
  height: 100%;
}
.card-custom:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Модификаторы карточек — решение пользователя 2026-09-17 ("остальные блоки
   страницы — сделай как в примере", см. test-design-b.html): цветной акцент
   сверху вместо одинаковой рамки у всех карточек подряд. */
.card-custom--service {
  border-top: 3px solid var(--color-signal-blue);
}
.card-custom--case {
  border-left: 3px solid var(--color-accent-coral);
}
.card-index {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.card-custom .card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-signal-blue-8);
  color: var(--color-signal-blue);
  margin-bottom: var(--space-4);
}
.card-custom .card-title {
  font-size: var(--text-h4);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-ink);
  margin-bottom: var(--space-2);
}
.card-custom .card-text {
  color: var(--color-text-muted);
  font-size: var(--text-body);
}
.card-custom .card-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  color: var(--color-signal-blue);
  font-weight: 600;
  font-size: var(--text-caption);
  text-decoration: none;
}
.card-custom .card-link-arrow:hover {
  text-decoration: underline;
}

/* ============================================================
   4.3 Тарифная карточка
   ============================================================ */
.pricing-card {
  position: relative;
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  height: 100%;
}
.pricing-card.pricing-featured {
  border: 2px solid var(--color-accent-coral);
}
.pricing-card .pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent-coral);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-size: var(--text-caption);
  font-weight: 600;
  white-space: nowrap;
}
.pricing-card .pricing-title {
  font-size: var(--text-h4);
  font-family: var(--font-heading);
  font-weight: 600;
}
.pricing-card .pricing-price {
  font-size: var(--text-h2);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-primary-ink);
  margin: var(--space-3) 0;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}
.pricing-card ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.pricing-card ul li svg {
  color: var(--color-map-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Строка-оффер под тарифами (поле услуги pricingNote) */
.pricing-note {
  width: 100%;
  margin: var(--space-12) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--color-primary-ink);
}

/* ============================================================
   4.4 Формы
   ============================================================ */
.form-label-custom {
  display: block;
  font-size: var(--text-caption);
  font-weight: 500;
  font-family: var(--font-body);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.form-control-custom {
  height: 48px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  padding: 0 var(--space-4);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
}
textarea.form-control-custom {
  height: auto;
  min-height: 120px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.form-control-custom:focus {
  border-color: var(--color-signal-blue);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.field-error .form-control-custom {
  border-color: var(--color-error);
}
.field-error .form-check-input {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.field-error .error-text {
  display: block;
  color: var(--color-error);
  font-size: var(--text-caption);
  margin-top: var(--space-1);
}
.form-success {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(31, 169, 113, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-success);
  font-weight: 600;
}
.form-error {
  background: var(--color-error-8);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--color-error);
  font-size: var(--text-caption);
  font-weight: 600;
  margin-top: var(--space-3);
}

/* ============================================================
   4.5 Шапка
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 72px;
  display: flex;
  align-items: center;
  background: var(--color-white);
  transition: box-shadow 200ms ease;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-card);
}
@media (max-width: 767.98px) {
  .site-header { height: 56px; }
}
.site-header .logo img,
.footer-logo img {
  display: block;
  height: 40px;
  width: auto;
}
@media (max-width: 767.98px) {
  .site-header .logo img { height: 32px; }
}
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-primary-ink);
  text-decoration: none;
}
/* Общий класс (не только шапка) — решение пользователя 2026-09-18: та же точка
   с пульсирующей серой обводкой нужна и в футере, не только в шапке. */
.logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent-coral);
  box-shadow: 0 0 0 4px var(--color-signal-blue-8);
  flex-shrink: 0;
  animation: logoDotPulse 2.4s ease-in-out infinite;
}
@keyframes logoDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--color-signal-blue-8); }
  50% { box-shadow: 0 0 0 7px var(--color-signal-blue-8); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-dot { animation: none; }
}
.site-header .nav-link-custom {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.site-header .nav-link-custom:hover {
  color: var(--color-signal-blue);
  background: var(--color-signal-blue-8);
}
.site-header .phone-link {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary-ink);
  text-decoration: none;
  white-space: nowrap;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-4);
  display: none;
  z-index: 1040;
}
.nav-item-dropdown:hover .mega-menu,
.nav-item-dropdown:focus-within .mega-menu {
  display: block;
}
.mega-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-body);
}
.mega-menu a:hover {
  background: var(--color-surface);
  color: var(--color-signal-blue);
}

.mobile-drawer {
  background: var(--color-primary-ink);
  color: var(--color-white);
}
.mobile-drawer .nav-link-custom {
  color: var(--color-white);
}
.mobile-drawer .nav-link-custom:hover {
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
}

/* ============================================================
   4.6 Футер
   ============================================================ */
.site-footer {
  background: var(--color-primary-ink);
  color: rgba(255,255,255,0.7);
  padding-top: var(--space-24);
  padding-bottom: var(--space-8);
}
.site-footer h5 {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-4);
}
.site-footer a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-body);
}
.site-footer a:hover {
  color: var(--color-white);
}
/* реквизиты под телефоном (2026-10-17) - мелко и тише остального текста */
.site-footer .footer-requisites {
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
  max-width: 32ch;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  font-size: var(--text-caption);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}

/* ============================================================
   4.7 FAQ-аккордеон
   ============================================================ */
.faq-accordion .faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-accordion .faq-item:last-child {
  border-bottom: none;
}
.faq-accordion .faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-primary-ink);
  cursor: pointer;
  min-height: 44px;
}
.faq-accordion .faq-icon {
  flex-shrink: 0;
  transition: transform 200ms ease;
  color: var(--color-signal-blue);
}
.faq-accordion .faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}
.faq-accordion .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
  padding: 0 var(--space-6);
}
.faq-accordion .faq-question[aria-expanded="true"] + .faq-panel {
  grid-template-rows: 1fr;
}
.faq-accordion .faq-panel-inner {
  overflow: hidden;
}
.faq-accordion .faq-panel p {
  padding-bottom: var(--space-4);
  color: var(--color-text-muted);
}

/* ============================================================
   4.8 Бейдж / pill
   ============================================================ */
.badge-custom {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--text-caption);
  font-weight: 600;
}
.badge-teal { background: var(--color-map-teal-10); color: var(--color-map-teal); }
.badge-coral { background: rgba(255, 107, 74, 0.1); color: var(--color-accent-coral-hover); }
.badge-blue { background: var(--color-signal-blue-8); color: var(--color-signal-blue); }
/* «И другие города РФ» в списках городов: цвет как у ссылок-городов, но это не ссылка (2026-10-17) */
.city-other { color: var(--color-signal-blue); }

/* ============================================================
   4.9 Cookie-баннер
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--color-primary-ink);
  color: rgba(255,255,255,0.7);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-4) var(--space-6);
}
.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.cookie-banner p {
  margin: 0;
  flex: 1 1 420px;
  font-size: var(--text-caption);
}
.cookie-banner a {
  color: var(--color-white);
  text-decoration: underline;
}
.cookie-banner .btn {
  flex-shrink: 0;
}

/* ============================================================
   4.10 Hero-фото (единый фон hero на всех страницах — решение
   пользователя 2026-09-17: "вариант 03 · фото города + затемнение" из
   test-design-b-hero-options.html, перенесённое на весь сайт)
   ============================================================ */
.hero-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
}
.hero-photo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-photo__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-photo__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Затемнение через сам --color-primary-ink, а не отдельный "тёмный" цвет —
     фон hero буквально то же доминантное тёмно-синее "ink", просто как фото,
     а не плоская плашка (см. CLAUDE.md п.2: primary-ink = доминантный цвет). */
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-primary-ink) 96%, black) 0%,
    color-mix(in srgb, var(--color-primary-ink) 88%, black) 32%,
    color-mix(in srgb, var(--color-primary-ink) 60%, transparent) 62%,
    color-mix(in srgb, var(--color-primary-ink) 30%, transparent) 100%
  );
}
.hero-photo__content {
  position: relative;
  z-index: 2;
}
.hero-photo h1,
.hero-photo h2 {
  color: var(--color-white);
}
.hero-photo .text-muted-custom {
  color: rgba(255, 255, 255, 0.72);
}
.hero-photo .kicker {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}
.hero-photo .badge-custom.badge-blue,
.hero-photo .badge-custom.badge-teal {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}
.hero-photo .btn-secondary-cta {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}
.hero-photo .btn-secondary-cta:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}
.hero-photo a:not(.btn):not(.hero-photo__listing) {
  color: var(--color-accent-coral);
}
.hero-photo a:not(.btn):not(.hero-photo__listing):hover {
  color: var(--color-white);
}

/* Полная версия — главная страница: высокий hero, есть место под
   двухколоночную композицию (текст + карточка объекта на карте). */
.hero-photo--tall {
  padding-block: var(--space-24);
}
@media (max-width: 767.98px) {
  .hero-photo--tall { padding-block: var(--space-16); }
}

/* Слим-версия — общий баннер всех внутренних страниц (render_page_hero и
   кастомные hero service/case/city/...). Короче, без второй колонки. */
.hero-photo--slim {
  padding-block: var(--space-12) var(--space-16);
}
@media (max-width: 767.98px) {
  .hero-photo--slim { padding-block: var(--space-8) var(--space-12); }
}

.hero-photo__pins {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.hero-photo__pin {
  font-size: var(--text-caption);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-signal-blue);
}

/* Карточка "объект на карте" в hero главной — единственный непрозрачный
   (не сквозной) элемент внутри hero-photo, поэтому живёт на var(--color-white)
   как обычно, а не в белом-на-белом тексте остального hero. */
.hero-photo__listing {
  display: block;
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-6);
  max-width: 320px;
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow 200ms ease;
}
.hero-photo__listing:hover {
  box-shadow: 0 14px 36px rgba(20, 33, 61, 0.18);
}
.hero-photo__listing-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.hero-photo__listing-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-white);
  background: var(--color-accent-coral);
  padding: 3px 9px;
  border-radius: 6px;
}
.hero-photo__listing-rating {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--color-primary-ink);
}
.hero-photo__listing-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 4px;
  color: var(--color-primary-ink);
}
.hero-photo__listing-meta {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.hero-photo__listing-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--color-border);
  overflow: hidden;
}
.hero-photo__listing-bar > span {
  display: block;
  height: 100%;
  width: 92%;
  background: linear-gradient(90deg, var(--color-map-teal), var(--color-signal-blue));
}
.hero-photo__listing-foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Панель "карта" за карточкой в hero главной — серая сетка + пины с запросами
   (решение пользователя 2026-09-18, по образцу test-design-b.html: там пины
   с городами на той же сетке; здесь вместо городов — тематические запросы под
   нишу текущего кейса, свои для каждой карточки, см. hero.php $heroPinSets).
   Светлая поверхность (var(--color-surface)), а не тёмное фото — сознательный
   контраст с остальным hero-photo, тот же приём, что в референсе. */
.hero-photo__visual {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  min-height: 380px;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .hero-photo__visual { min-height: 340px; padding: var(--space-6); }
}
.hero-photo__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.6;
}
/* Та же keyframe-анимация и те же animation-delay, что у карточек-слайдов —
   пины меняются в такт с карточкой, не по своему расписанию. */
.hero-photo__map-pins {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: heroSliderCycle 30s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo__map-pins { animation: none; display: none; }
  .hero-photo__map-pins:first-child { display: block; opacity: 1; }
}
.hero-photo__map-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero-photo__map-pin .icon-line {
  width: 22px;
  height: 22px;
  color: var(--color-map-teal);
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 2px 4px rgba(15, 181, 166, 0.35));
}
.hero-photo__map-pin-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary-ink);
  background: var(--color-surface-raised);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

/* Слайдер из 5 карточек-кейсов в hero главной — по кругу, без JS (решение
   пользователя 2026-09-17). Карточки лежат друг на друге (position: absolute)
   и по очереди проявляются через CSS-анимацию с фиксированным сдвигом
   animation-delay (задаётся инлайн в hero.php, i*6s). Цикл 30s = 5 карточек
   по 6s каждая (время показа увеличено в 1.5 раза от исходных 4s — решение
   пользователя), окна не пересекаются — считалось так, чтобы плавный fade
   у одной карточки заканчивался ровно к началу следующей. Теперь живёт внутри
   .hero-photo__visual (решение пользователя 2026-09-18), поверх сетки+пинов. */
.hero-photo__slider {
  position: relative;
  z-index: 2;
  max-width: 320px;
  margin: var(--space-6) auto 0;
  min-height: 190px;
}
.hero-photo__listing--slide {
  position: absolute;
  inset: 0;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  animation: heroSliderCycle 30s infinite;
}
@keyframes heroSliderCycle {
  0% { opacity: 0; pointer-events: none; }
  3% { opacity: 1; pointer-events: auto; }
  17% { opacity: 1; pointer-events: auto; }
  20% { opacity: 0; pointer-events: none; }
  100% { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo__listing--slide {
    animation: none;
    display: none;
  }
  .hero-photo__listing--slide:first-child {
    display: block;
    position: relative;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   4.11 Блоки главной — акцентная версия (решение пользователя 2026-09-17,
   "остальные блоки страницы — сделай как в примере", см. test-design-b.html)
   ============================================================ */

/* Полоса метрик с разделителями вместо голых чисел в ряд. */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stats-strip__item {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border-left: 1px solid var(--color-border);
}
.stats-strip__item:first-child {
  border-left: none;
}
@media (max-width: 699.98px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-strip__item:nth-child(3) { border-left: none; }
  .stats-strip__item:nth-child(odd) { border-left: none; }
}

/* Рельс процесса — первый шаг выделен акцентом, остальные приглушены. */
.process-rail__step {
  padding-top: var(--space-4);
  border-top: 3px solid var(--color-border);
}
.process-rail__step.is-active {
  border-top-color: var(--color-accent-coral);
}

/* Сравнение "мы vs типовое агентство" — у типового агентства лёгкая штриховка,
   у нас — заметная рамка, чтобы контраст читался с первого взгляда, а не
   только по тексту списка. */
.compare-card--typical {
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-surface) 0px, var(--color-surface) 10px,
      var(--color-border) 10px, var(--color-border) 11px
    );
}
.compare-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare-mark--yes {
  background: var(--color-map-teal-10);
  color: var(--color-map-teal);
}
.compare-mark--no {
  background: var(--color-error-8);
  color: var(--color-error);
}
.compare-mark svg {
  width: 13px;
  height: 13px;
}

/* Крупная кавычка над отзывом вместо мелкой иконки. */
.quote-mark {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1;
  color: var(--color-signal-blue);
  opacity: 0.35;
}

/* ============================================================
   4.12 Попап при попытке уйти со страницы (exit-intent, решение
   пользователя 2026-09-22) — assets/js/app.js решает, когда показать
   (#exitPopup, разметка в includes/footer.php); тут только внешний вид.
   ============================================================ */
.exit-popup {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.exit-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 46, 0.6);
}
.exit-popup__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  background: var(--color-surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.exit-popup__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.exit-popup__close:hover {
  color: var(--color-text);
}
.exit-popup__close svg {
  width: 16px;
  height: 16px;
}
.exit-popup__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-coral);
  margin-bottom: var(--space-2);
}
.exit-popup__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary-ink);
  margin-bottom: var(--space-2);
}
.exit-popup__text {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  margin-bottom: var(--space-6);
}
/* Блокировка скролла фона, пока попап открыт — ставится/снимается тем же
   assets/js/app.js. */
body.exit-popup-open {
  overflow: hidden;
}
@media (max-width: 479.98px) {
  .exit-popup__dialog {
    padding: var(--space-6) var(--space-4) var(--space-4);
  }
}

/* Свёрнутое состояние — маленький виджет-кнопка в углу вместо полного
   попапа (решение пользователя 2026-09-22). Форма и акцентный цвет — те же
   токены, что у .btn-primary-cta (var(--color-accent-coral)), просто
   круглая пилюля (var(--radius-pill)) вместо прямоугольной кнопки. */
.exit-popup-widget {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1060;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-accent-coral);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card-hover);
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
  /* Периодическая пульсация-напоминание (решение пользователя 2026-09-22) —
     4с цикл, сама пульсация занимает только первые ~20% (короткий "стук",
     не непрерывное дыхание), остальное время виджет статичен. */
  animation: exit-popup-widget-pulse 4s ease-in-out infinite;
}
.exit-popup-widget:hover {
  transform: scale(1.06);
  background: var(--color-accent-coral-hover);
  /* Наведение управляет transform само — не даём keyframes спорить с hover. */
  animation-play-state: paused;
}
.exit-popup-widget svg {
  width: 28px;
  height: 28px;
}
@keyframes exit-popup-widget-pulse {
  0%, 80%, 100% {
    transform: scale(1);
    box-shadow: var(--shadow-card-hover), 0 0 0 0 color-mix(in srgb, var(--color-accent-coral) 45%, transparent);
  }
  8% {
    transform: scale(1.08);
  }
  20% {
    transform: scale(1);
    box-shadow: var(--shadow-card-hover), 0 0 0 14px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .exit-popup-widget { animation: none; }
}
@media (max-width: 479.98px) {
  .exit-popup-widget {
    right: var(--space-4);
    bottom: var(--space-4);
    width: 56px;
    height: 56px;
  }
  .exit-popup-widget svg {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
   5. Состояния
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-24) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state svg {
  color: var(--color-neutral-300);
  margin-bottom: var(--space-4);
}

.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-300) 25%, #E8EBF0 37%, var(--color-neutral-300) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Область нажатия на мобайле — минимум 44х44 */
@media (max-width: 767.98px) {
  .btn, .nav-link-custom, .faq-question, a.card-link-arrow {
    min-height: 44px;
  }
}

/* ---- Обложка статьи и оглавление на первом экране (2026-10-17) ----
   Обложка 16:9 (на мобильных 4:3), нижняя треть уходит в прозрачность (mask-image). Оглавление начинается с 2/3
   высоты обложки: отрицательный margin-top в процентах считается от ширины колонки, поэтому треть высоты
   16:9 = 9/16/3 = 18.75% ширины, для 4:3 = 25%. Фон оглавления полупрозрачный - верх растворяющейся картинки
   чуть виден сквозь него. */
.post-cover {
  aspect-ratio: 16 / 9;
}
.post-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* обрезаем снизу: нижняя треть всё равно растворяется под оглавлением, главное у обложек выше */
  object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, black 66.67%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 66.67%, transparent 100%);
}
.post-toc--over-cover {
  position: relative;
  z-index: 1;
  height: auto;
  margin-top: -18.75%;
  background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
}
@media (max-width: 991.98px) {
  .post-cover {
    aspect-ratio: 4 / 3;
  }
  .post-toc--over-cover {
    margin-top: -25%;
  }
}

/* ---- Тело статьи блога ---- */
.article-body p {
  margin-bottom: var(--space-4);
  max-width: none;
}
.article-body h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.article-body a {
  text-decoration: underline;
}
/* Таблицы в теле статьи — zebra, отступы, читаемый шрифт.
   Добавлено 2026-10-17 после жалобы на нечитаемые таблицы в
   skolko-foto-nuzhno-v-yandeks-kartah и pochemu-net-zvonkov-s-kartochki-yandeks-karty. */
.article-body table {
  width: 100%;
  /* --space-5 в проекте не определена -> margin фактически был 0, таблица лепилась
     к следующему абзацу (жалоба пользователя 2026-10-17). Явно 1.5rem сверху
     и 2.5rem снизу — асимметрично, чтобы «отбить» таблицу от следующего H2/абзаца. */
  margin: 1.5rem 0 2.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.article-body table thead {
  background: #f3f4f6;
}
.article-body table th {
  padding: 0.7rem 0.9rem;
  text-align: left;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #d1d5db;
}
.article-body table td {
  padding: 0.65rem 0.9rem;
  color: #374151;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
}
.article-body table tbody tr:nth-child(even) {
  background: #f9fafb;
}
.article-body table tbody tr:last-child td {
  border-bottom: 0;
}
.article-body table tbody tr:hover {
  background: #fff7ed;
}
/* Скриншоты в статьях (2026-10-17): узкие высокие снимки (боковая панель Карт) не занимают весь экран -
   высота до 70% окна, ширина пропорционально, по центру колонки. */
.article-body figure.figure {
  text-align: center;
}
.article-body figure.figure img {
  max-height: 70vh;
  width: auto;
  height: auto;
  max-width: 100%;
}
.article-body figure.figure figcaption {
  text-align: left;
}
/* Горизонтальный скролл на узких экранах, чтобы таблица не ломала вёрстку. */
.article-body figure.table-wrap,
.article-body .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-5) 0;
}
@media (max-width: 575.98px) {
  .article-body table {
    font-size: 0.875rem;
  }
  .article-body table th,
  .article-body table td {
    padding: 0.55rem 0.65rem;
  }
}
/* .card-custom растягивается на 100% высоты для карточек в сетках, но .row у статьи
   блога флексом растягивает col-lg-8 до высоты сайдбара, и оглавление наследует эту
   высоту, отодвигая текст статьи вниз. Оглавлению высота сайдбара не нужна. */
nav[aria-label="Оглавление статьи"] {
  height: auto;
}

/* Обложки блога (карточки в сетке + hero на странице статьи) — .ratio>*
   у Bootstrap растягивает img на всю высоту контейнера, но не задаёт
   object-fit, поэтому без этого правила картинка сжимается по пропорциям
   вместо кадрирования. Исходники обложек квадратные (1024x1024) — контейнер
   .ratio-1x1 им соответствует по пропорциям, но object-fit:cover оставлен
   на случай не строго квадратного источника. Только .ratio-1x1 — единственное
   место на сайте, где .ratio используется под фото (card-preview/hero), не
   задеть другие потенциальные применения .ratio (видео и т.п.). */
.ratio-1x1 img {
  object-fit: cover;
}

/* ============================================================
   6. Иконки
   ============================================================ */
.icon-line {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}