/* ==========================================================================
   Site 6467373 — основная дизайн-система
   Авторская вёрстка. Без фреймворков. Mobile-first.
   Все значения вынесены в CSS-переменные: цвета, отступы, радиусы, тени.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ДИЗАЙН-ТОКЕНЫ
   -------------------------------------------------------------------------- */
:root {
	/* Цвета — светлая тема */
	--c-navy-900: #0a1626;
	--c-navy-800: #0d1b2a;
	--c-navy-700: #14293f;
	--c-navy-600: #1d3a56;
	--c-navy-500: #27496b;
	--c-navy-400: #3d6489;
	--c-navy-300: #6b8aab;
	--c-navy-100: #dde5ee;

	--c-graphite-900: #16191d;
	--c-graphite-700: #2b3138;
	--c-graphite-500: #4a5159;
	--c-graphite-400: #6b7280;

	--c-gold-600: #a8823a;
	--c-gold-500: #c9a227;
	--c-gold-400: #d9b44a;
	--c-gold-300: #e8d08a;

	--c-green-500: #1f7a4d;
	--c-red-500: #b03a2e;

	/* Семантические цвета — светлая тема */
	--bg: #ffffff;
	--bg-muted: #f4f6f9;
	--bg-elevated: #ffffff;
	--bg-header: rgba(255, 255, 255, 0.92);
	--bg-topbar: var(--c-navy-800);

	--text: var(--c-graphite-900);
	--text-soft: var(--c-graphite-500);
	--text-muted: var(--c-graphite-400);
	--text-inverse: #ffffff;
	--text-inverse-soft: rgba(255, 255, 255, 0.78);

	--accent: var(--c-gold-500);
	--accent-hover: var(--c-gold-600);
	--accent-soft: rgba(201, 162, 39, 0.12);
	--accent-contrast: var(--c-navy-900);

	/* Золотой для ТЕКСТА на светлом фоне.
	   #a8823a давал 3.55:1 (провал AA), #8a6a1f — 5.05:1 на белом и 4.66:1 на #f4f6f9. */
	--accent-text: #8a6a1f;
	/* Hover-состояние ссылки: ещё темнее, чтобы не «выцветать» до 3.55:1 */
	--accent-text-hover: #6f5314;

	--primary: var(--c-navy-800);
	--primary-hover: var(--c-navy-700);

	--border: #e3e8ef;
	--border-strong: #cfd8e3;
	--ring: rgba(201, 162, 39, 0.45);

	--shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
	--shadow-sm: 0 2px 8px rgba(13, 27, 42, 0.06);
	--shadow-md: 0 8px 24px rgba(13, 27, 42, 0.08);
	--shadow-lg: 0 18px 48px rgba(13, 27, 42, 0.12);
	--shadow-glow: 0 12px 32px rgba(201, 162, 39, 0.22);

	/* Типографика */
	--font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* Модульная шкала кеглей (коэффициент ~1.25) */
	--fs-xs: 0.8125rem;   /* 13px — подписи, метки */
	--fs-sm: 0.9375rem;   /* 15px — вспомогательный текст */
	--fs-base: 1.0625rem; /* 17px — основной текст, комфортный для чтения */
	--fs-md: 1.1875rem;   /* 19px — лид-абзацы */
	--fs-lg: 1.375rem;    /* 22px — h4 */
	--fs-xl: 1.75rem;     /* 28px — h3 */
	--fs-2xl: 2.125rem;   /* 34px — h2 мобильный */
	--fs-3xl: 2.75rem;    /* 44px — h2 десктоп */
	--fs-4xl: 3.5rem;     /* 56px — h1 мобильный */
	--fs-5xl: 4.25rem;    /* 68px — h1 десктоп */

	/* Плавные размеры: масштабируются от ширины вьюпорта и никогда
	   не выходят за пределы контейнера. Раньше фиксированные 68px
	   на узких экранах обрезали длинные слова («автомобиля»). */
	--fs-h1: clamp(2rem, 1.15rem + 3.6vw, 4rem);
	--fs-h2: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);
	--fs-h3: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);

	--lh-tight: 1.15;
	--lh-heading: 1.25;
	--lh-base: 1.7;

	/* Ритм отступов — шаг 4px */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;

	/* Скругления */
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--r-xl: 24px;
	--r-full: 999px;

	/* Прочее */
	--container: 1280px;
	--container-narrow: 900px;
	--header-h: 76px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.25s;
	--dur-slow: 0.45s;

	/* Слой поверх контента, но под шапкой */
	--z-content: 1;
	--z-sticky: 100;
	--z-header: 200;
	--z-drawer: 300;
	--z-modal: 400;
}

/* Тёмная тема — включается атрибутом data-theme="dark" на <html> */
[data-theme="dark"] {
	--bg: #0b1017;
	--bg-muted: #111925;
	--bg-elevated: #16202e;
	--bg-header: rgba(11, 16, 23, 0.9);
	--bg-topbar: #070b11;

	--text: #eef2f7;
	--text-soft: #b3bfcd;
	--text-muted: #8595a8;

	--border: #22303f;
	--border-strong: #324457;

	--primary: #1d3a56;
	--primary-hover: #27496b;

	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);

	--accent-soft: rgba(217, 180, 74, 0.16);
	--accent-contrast: #0b1017;

	/* В тёмной теме золото на тёмном фоне читается отлично — берём светлый оттенок */
	--accent-text: var(--c-gold-300);
	--accent-text-hover: #f0e0ae;
}

/* --------------------------------------------------------------------------
   2. СБРОС И БАЗА
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Компенсация sticky-шапки при переходе по анкорам */
	scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden; /* Защита от горизонтального скролла */
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Заголовки — Manrope, плотный интерлиньяж, отрицательный трекинг.
   Это визуальный «каркас» делового стиля. */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--text);
	letter-spacing: -0.02em;
	text-wrap: balance;
	/* Длинное слово («автомобиля», «перерегистрация») переносится,
	   а не вылезает за край и не создаёт горизонтальный скролл. */
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
	margin: 0 0 var(--sp-5);
	max-width: 72ch;
	overflow-wrap: break-word;
}

a {
	color: var(--c-navy-600);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur) var(--ease);
}

[data-theme="dark"] a {
	color: var(--c-gold-300);
}

a:hover,
a:focus-visible {
	color: var(--accent-text-hover);
}

/* Видимый фокус — обязательное требование доступности */
:focus-visible {
	outline: 3px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

img, svg, video, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	margin: 0 0 var(--sp-5);
	padding-left: 1.35em;
}

li {
	margin-bottom: var(--sp-2);
}

blockquote {
	margin: 0;
	padding: 0;
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.925em;
}

pre {
	overflow-x: auto;
	padding: var(--sp-4);
	background: var(--bg-muted);
	border-radius: var(--r-md);
}

hr {
	margin: var(--sp-10) 0;
	border: 0;
	border-top: 1px solid var(--border);
}

::selection {
	background: var(--accent);
	color: var(--accent-contrast);
}

/* --------------------------------------------------------------------------
   3. УТИЛИТЫ ДОСТУПНОСТИ
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	z-index: 999;
	padding: var(--sp-3) var(--sp-6);
	background: var(--accent);
	color: var(--accent-contrast);
	font-weight: 600;
	border-radius: 0 0 var(--r-md) var(--r-md);
	transition: top var(--dur) var(--ease);
}

.skip-link:focus {
	top: 0;
	color: var(--accent-contrast);
}

/* --------------------------------------------------------------------------
   4. СЕТКА И КОНТЕЙНЕР
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}

@media (min-width: 768px) {
	.container {
		padding: 0 var(--sp-8);
	}
}

.site-main {
	min-height: 60vh;
	overflow-x: hidden;
}

/* Страховка: любой длинный элемент (URL, слово, таблица) не создаёт
   горизонтальную прокрутку на мобильных. */
.site-main,
.site-footer,
.container,
.hero,
.section {
	max-width: 100%;
}

.entry-content img,
.entry-content iframe,
.entry-content video {
	max-width: 100%;
	height: auto;
}

.entry-content pre,
.entry-content code {
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

/* Layout: контент + сайдбар */
.layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	padding-top: var(--sp-10);
	padding-bottom: var(--sp-16);
}

@media (min-width: 1024px) {
	.layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--sp-10);
		padding-top: var(--sp-16);
	}

	.layout--page .layout__content,
	.layout--article .entry {
		max-width: 100%;
	}
}

/* Сетки карточек: mobile-first — один столбец, затем 2, затем 3–4 */
.cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

@media (min-width: 640px) {
	.cards-grid--3,
	.cards-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cards-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

/* --------------------------------------------------------------------------
   5. КНОПКИ
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-6);
	min-height: 46px;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease),
				border-color var(--dur) var(--ease),
				color var(--dur) var(--ease),
				transform var(--dur) var(--ease),
				box-shadow var(--dur) var(--ease);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--primary);
	color: var(--text-inverse);
	box-shadow: var(--shadow-sm);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--primary-hover);
	color: var(--text-inverse);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.btn--accent {
	background: var(--accent);
	color: var(--accent-contrast);
	box-shadow: var(--shadow-glow);
}

.btn--accent:hover,
.btn--accent:focus-visible {
	background: var(--accent-hover);
	color: var(--accent-contrast);
	transform: translateY(-2px);
}

.btn--outline {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text);
}

/* --------------------------------------------------------------------------
   КОНТРАСТ: золотые ссылки в тёмных секциях
   --accent-text (#8a6a1f) рассчитан на белый фон. На тёмном он даёт 3.5:1 —
   провал AA. Поэтому во всех тёмных блоках возвращаем яркое золото #c9a227
   (7.5:1). Это касается текста ссылок, иконок и акцентов.
   -------------------------------------------------------------------------- */
.section--dark a,
.cta-section a,
.hero a,
.site-footer a,
.mobile-menu__foot a,
[data-theme="dark"] .site-footer a {
	color: var(--accent);
}

.section--dark a:hover,
.section--dark a:focus-visible,
.cta-section a:hover,
.cta-section a:focus-visible,
.hero a:hover,
.hero a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--c-gold-300);
}

/* Заголовок-надзаголовок (kicker) в тёмных секциях */
.section--dark .section__kicker,
.cta-section .section__kicker,
.hero .section__kicker {
	color: var(--accent);
}

/* Иконки-акценты в тёмных секциях */
.section--dark .icon,
.cta-section .icon,
.hero .icon,
.site-footer .icon {
	color: var(--accent);
}

/* Пункты списков с галочками на тёмном фоне */
.section--dark .check-list .icon,
.cta-section .check-list .icon,
.hero .check-list .icon {
	color: var(--c-gold-300);
}

/* ВАЖНО: на тёмных секциях (hero, «Процедура», CTA) контурная кнопка
   наследовала цвет --text (#16191d) на фоне #0a1626 — контраст 1.03:1,
   текст становился невидимым. Даём ей светлый текст и заметную рамку. */
.hero .btn--outline,
.section--dark .btn--outline,
.cta-section .btn--outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-inverse);
}

.hero .btn--outline:hover,
.hero .btn--outline:focus-visible,
.section--dark .btn--outline:hover,
.section--dark .btn--outline:focus-visible,
.cta-section .btn--outline:hover,
.cta-section .btn--outline:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
	color: var(--text-inverse);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	border-color: var(--primary);
	background: var(--bg-muted);
	color: var(--text);
}

.btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--text-inverse);
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: var(--text-inverse);
}

.btn--ghost {
	background: transparent;
	color: var(--text-soft);
	padding-inline: var(--sp-3);
}

/* Тот же случай: на тёмных секциях ghost-кнопка должна быть светлой */
.hero .btn--ghost,
.section--dark .btn--ghost,
.cta-section .btn--ghost {
	color: var(--text-inverse-soft);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	color: var(--text);
	background: var(--bg-muted);
}

.btn--sm {
	min-height: 38px;
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-xs);
}

.btn--lg {
	min-height: 56px;
	padding: var(--sp-4) var(--sp-8);
	font-size: var(--fs-base);
}

.btn--block {
	display: flex;
	width: 100%;
}

/* --------------------------------------------------------------------------
   6. ТОПБАР
   -------------------------------------------------------------------------- */
.topbar {
	background: var(--bg-topbar);
	color: var(--text-inverse-soft);
	font-size: var(--fs-xs);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 40px;
}

.topbar__meta,
.topbar__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-width: 0;
}

.topbar__item,
.topbar__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--text-inverse-soft);
	text-decoration: none;
	white-space: nowrap;
}

/* Адрес длинный — на средних экранах показываем его в одну строку
   без обрезки по буквам, а на узких просто скрываем (см. ниже). */
.topbar__item {
	min-width: 0;
}

.topbar__item > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar__item .icon,
.topbar__link .icon {
	flex: 0 0 auto;
	opacity: 0.75;
}

.topbar__link:hover,
.topbar__link:focus-visible {
	color: var(--accent);
}

.topbar__link::after {
	content: "";
	position: absolute;
}

/* На мобильных топбар не отвлекает: оставляем только телефон-действие */
@media (max-width: 767px) {
	.topbar__item--hours,
	.topbar__link--email,
	.topbar__item:not(.topbar__item--hours) {
		display: none;
	}

	.topbar__inner {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   7. ШАПКА
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--bg-header);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--border);
	transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* Тень появляется после прокрутки — добавляется из JS */
.site-header.is-scrolled {
	box-shadow: var(--shadow-md);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	min-height: var(--header-h);
	/* min-width: 0 позволяет flex-детям сжиматься вместо переполнения */
	min-width: 0;
}

.site-branding {
	flex: 0 0 auto;
}

.site-branding img,
.custom-logo {
	max-height: 48px;
	width: auto;
}

.site-branding__text {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	color: var(--text);
}

.site-branding__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: linear-gradient(145deg, var(--c-navy-700), var(--c-navy-500));
	color: var(--accent);
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	border-radius: var(--r-md);
	box-shadow: var(--shadow-sm);
}

.site-branding__names {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.site-branding__title {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.site-branding__tagline {
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

@media (max-width: 479px) {
	.site-branding__tagline {
		display: none;
	}
}

/* Главное меню */
.main-nav {
	display: none;
}

@media (min-width: 1024px) {
	.main-nav {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		/* ВАЖНО: здесь НЕЛЬЗЯ ставить overflow: hidden.
		   Подменю (.sub-menu) позиционировано absolute и выходит за границы
		   навигации — любое обрезание делает его невидимым.
		   Переполнение по горизонтали решаем через flex-wrap и уменьшение
		   отступов ссылок, а не через overflow. */
		overflow: visible;
	}
}

.main-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.main-nav__list > li {
	position: relative;
	margin: 0;
}

.main-nav__list > li > a {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	color: var(--text);
	font-size: var(--fs-sm);
	font-weight: 550;
	text-decoration: none;
	border-radius: var(--r-sm);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.main-nav__list > li > a:hover,
.main-nav__list > li > a:focus-visible,
.main-nav__list > .current-menu-item > a,
.main-nav__list > .current_page_item > a,
.main-nav__list > .current-menu-ancestor > a {
	background: var(--accent-soft);
	color: var(--text);
}

/* Подменю (второй уровень) */
.main-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: calc(var(--z-header) + 5);
	min-width: 268px;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.main-nav__list > li:hover > .sub-menu,
.main-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav__list .sub-menu a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	color: var(--text-soft);
	font-size: var(--fs-sm);
	text-decoration: none;
	border-radius: var(--r-sm);
}

.main-nav__list .sub-menu a:hover,
.main-nav__list .sub-menu a:focus-visible {
	background: var(--bg-muted);
	color: var(--text);
}

.main-nav__list .sub-menu li {
	margin: 0;
}

/* Невидимый мостик: без него курсор, идущий от пункта меню к подменю,
   на мгновение покидает :hover, и подменю «мигает», закрываясь. */
.main-nav__list > li.menu-item-has-children::after,
.main-nav__list > li.has-children::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 8px;
}

/* Стрелка у пунктов с подменю — подсказка пользователю */
.main-nav__list > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 6px;
	vertical-align: middle;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.5;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.main-nav__list > li.menu-item-has-children:hover > a::after {
	transform: rotate(225deg) translateY(-2px);
	opacity: 1;
}

/* Подменю шире пункта — выравниваем по правому краю для последних пунктов */
.main-nav__list > li:last-child > .sub-menu,
.main-nav__list > li:nth-last-child(2) > .sub-menu {
	left: auto;
	right: 0;
}

/* Блок контактов в шапке */
.site-header__cta {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex: 0 0 auto;
}

.phone-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.phone-link .icon {
	color: var(--accent);
}

.phone-link:hover,
.phone-link:focus-visible {
	color: var(--accent-text);
}

.phone-link--large {
	font-size: var(--fs-lg);
}

.phone-link--light {
	color: var(--text-inverse);
}

.phone-link--light:hover {
	color: var(--accent);
}

.phone-link--block {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-3);
}

.site-header__callback {
	display: none;
}

/* Показываем CTA только когда в шапке точно хватает места.
   Раньше кнопка появлялась с 1200px и на 1280–1400 обрезалась справа. */
@media (min-width: 1440px) {
	.site-header__callback {
		display: inline-flex;
	}
}

/* На средних десктопах ужимаем ссылки меню, чтобы всё влезло */
@media (min-width: 1024px) and (max-width: 1439px) {
	.main-nav__list > li > a {
		padding: 10px 12px;
	}

	.site-header__inner {
		gap: var(--sp-4);
	}
}

@media (max-width: 1023px) {
	.phone-link--header {
		display: none;
	}
}

/* Переключатель темы */
.theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	color: var(--text-soft);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	background: var(--bg-muted);
	color: var(--text);
	border-color: var(--primary);
}

/* Показываем ту иконку, которая соответствует активной теме */
.theme-toggle__icon {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.theme-toggle__icon--moon {
	opacity: 0;
	transform: scale(0.6) rotate(-30deg);
}

[data-theme="dark"] .theme-toggle__icon--sun {
	opacity: 0;
	transform: scale(0.6) rotate(30deg);
}

[data-theme="dark"] .theme-toggle__icon--moon {
	opacity: 1;
	transform: none;
}

/* Бургер */
.burger {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--primary);
	border: 0;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}

@media (min-width: 1024px) {
	.burger {
		display: none;
	}
}

.burger:hover {
	background: var(--primary-hover);
}

.burger__box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
}

.burger__line {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Анимация бургера в крестик — управляется классом is-open на body */
.is-menu-open .burger__line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.is-menu-open .burger__line:nth-child(2) {
	opacity: 0;
}

.is-menu-open .burger__line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Прогресс чтения статьи */
.reading-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
}

.reading-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--c-gold-300));
	transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   8. МОБИЛЬНОЕ МЕНЮ
   -------------------------------------------------------------------------- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(6, 12, 20, 0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease);
}

.is-menu-open .mobile-menu__overlay {
	opacity: 1;
}

.mobile-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(88vw, 400px);
	height: 100%;
	background: var(--bg-elevated);
	box-shadow: var(--shadow-lg);
	transform: translateX(102%);
	transition: transform var(--dur-slow) var(--ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.is-menu-open .mobile-menu__panel {
	transform: translateX(0);
}

.mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--border);
}

.mobile-menu__title {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 700;
}

.mobile-menu__close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	color: var(--text-soft);
	cursor: pointer;
}

.mobile-menu__close:hover {
	background: var(--bg-muted);
	color: var(--text);
}

.mobile-menu__nav {
	padding: var(--sp-4) var(--sp-5);
	flex: 1 1 auto;
}

.mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu__list li {
	margin: 0;
}

.mobile-menu__list a {
	display: block;
	padding: var(--sp-3) 0;
	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}

.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible {
	color: var(--accent-text);
}

/* Подменю на мобильных — с отступом и меньшим кеглем */
.mobile-menu__list .sub-menu {
	margin: 0;
	padding: 0 0 var(--sp-3) var(--sp-4);
	list-style: none;
}

.mobile-menu__list .sub-menu a {
	padding: var(--sp-2) 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--text-soft);
	border-bottom: 0;
}

.mobile-menu__foot {
	padding: var(--sp-5);
	border-top: 1px solid var(--border);
	background: var(--bg-muted);
	display: grid;
	gap: var(--sp-3);
}

.mobile-menu__foot .phone-link {
	justify-content: center;
	font-size: var(--fs-md);
}

.mobile-menu__address {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--text-soft);
}

.mobile-menu__address .icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--accent);
}

/* Блокировка прокрутки под открытым меню */
.is-menu-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. НИЖНЯЯ МОБИЛЬНАЯ ПАНЕЛЬ
   -------------------------------------------------------------------------- */
.mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-sticky);
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--bg-elevated);
	border-top: 1px solid var(--border);
	box-shadow: 0 -4px 16px rgba(13, 27, 42, 0.08);
	/* Безопасная зона для iPhone с «челкой» */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 1024px) {
	.mobile-bar {
		display: none;
	}
}

.mobile-bar__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-2);
	min-height: 56px;
	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 650;
	text-decoration: none;
}

.mobile-bar__item + .mobile-bar__item {
	border-left: 1px solid var(--border);
}

.mobile-bar__item .icon {
	color: var(--accent);
}

.mobile-bar__item--accent {
	background: var(--primary);
	color: var(--text-inverse);
}

.mobile-bar__item--accent .icon {
	color: var(--accent);
}

/* Отступ для контента, чтобы панель не перекрывала футер */
@media (max-width: 1023px) {
	.site-footer {
		padding-bottom: calc(var(--sp-10) + 56px + env(safe-area-inset-bottom, 0));
	}
}

/* --------------------------------------------------------------------------
   10. ПЕРВЫЙ ЭКРАН (HERO)
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	isolation: isolate;
	padding: var(--sp-16) 0 var(--sp-12);
	background: var(--c-navy-900);
	color: var(--text-inverse);
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Фоновое изображение hero — опционально, ложится под градиентом */
.hero__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
}

/* Градиентная подложка: тёмно-синий с золотым свечением справа */
.hero__gradient {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 88% 12%, rgba(201, 162, 39, 0.22) 0%, transparent 55%),
		radial-gradient(100% 80% at 8% 92%, rgba(39, 73, 107, 0.7) 0%, transparent 60%),
		linear-gradient(160deg, #0a1626 0%, #10243a 55%, #0d1b2a 100%);
}

/* Геометрический узор: тонкая сетка вместо стоковой фотографии */
.hero__pattern {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 80%);
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-10);
	align-items: center;
}

@media (min-width: 1024px) {
	.hero {
		padding: var(--sp-24) 0 var(--sp-20);
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--sp-16);
	}
}

.hero__content {
	max-width: 720px;
}

.hero__kicker {
	display: inline-block;
	margin: 0 0 var(--sp-5);
	padding: var(--sp-2) var(--sp-4);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--r-full);
	color: var(--accent);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hero__title {
	margin: 0 0 var(--sp-5);
	color: var(--text-inverse);
	font-size: var(--fs-h1);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	/* Не даём заголовку выйти за колонку на промежуточных ширинах */
	overflow-wrap: break-word;
	hyphens: auto;
}

.hero__subtitle {
	margin: 0 0 var(--sp-6);
	color: var(--text-inverse-soft);
	font-size: var(--fs-md);
	line-height: 1.65;
}

.hero__list {
	display: grid;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-8);
	padding: 0;
	list-style: none;
}

.hero__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin: 0;
	color: var(--text-inverse);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.hero__list .icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--accent);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.hero__phone {
	margin: 0;
	color: var(--text-inverse-soft);
	font-size: var(--fs-sm);
}

.hero__phone a {
	color: var(--text-inverse);
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 700;
	text-decoration: none;
}

.hero__phone a:hover {
	color: var(--accent);
}

/* Карточка «Условия вкратце» */
.hero__card {
	padding: var(--sp-6);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-xl);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--shadow-lg);
}

.hero__card-title {
	margin: 0 0 var(--sp-5);
	color: var(--text-inverse);
	font-size: var(--fs-lg);
}

.hero__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
	margin: 0 0 var(--sp-6);
	padding: 0;
	list-style: none;
}

.hero__fact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	padding: var(--sp-3);
	text-align: center;
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--r-md);
}

.hero__fact-value {
	color: var(--accent);
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	font-weight: 800;
	line-height: 1.2;
}

.hero__fact-label {
	color: var(--text-inverse-soft);
	font-size: 11px;
	line-height: 1.3;
}

.hero__card-note {
	margin: var(--sp-4) 0 0;
	color: var(--text-inverse-soft);
	font-size: var(--fs-xs);
	text-align: center;
}

/* --------------------------------------------------------------------------
   11. СЕКЦИИ
   -------------------------------------------------------------------------- */
.section {
	padding: var(--sp-16) 0;
}

@media (min-width: 1024px) {
	.section {
		padding: var(--sp-20) 0;
	}
}

.section--tight {
	padding: var(--sp-10) 0;
}

.section--muted {
	background: var(--bg-muted);
}

.section--dark {
	position: relative;
	background: var(--c-navy-900);
	color: var(--text-inverse);
}

.section--dark .section__title {
	color: var(--text-inverse);
}

.section--dark p {
	color: var(--text-inverse-soft);
}

.section__head {
	max-width: 780px;
	margin-bottom: var(--sp-10);
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.section__kicker {
	display: block;
	margin-bottom: var(--sp-3);
	color: var(--accent-text);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.section__kicker--light {
	color: var(--accent);
}

.section__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-h2);
}

.section__title--light {
	color: var(--text-inverse);
}

.section__lead {
	margin: 0;
	color: var(--text-soft);
	font-size: var(--fs-md);
	line-height: 1.65;
}

.section--dark .section__lead {
	color: var(--text-inverse-soft);
}

.section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
	margin-top: var(--sp-10);
}

/* --------------------------------------------------------------------------
   12. КАРТОЧКИ
   -------------------------------------------------------------------------- */
.feature-card,
.icon-card,
.card,
.review-card,
.stat-card {
	position: relative;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	transition: transform var(--dur) var(--ease),
				box-shadow var(--dur) var(--ease),
				border-color var(--dur) var(--ease);
}

.feature-card:hover,
.icon-card:hover,
.card:hover,
.review-card:hover {
	transform: translateY(-4px);
	border-color: var(--border-strong);
	box-shadow: var(--shadow-md);
}

/* Карточка преимущества */
.feature-card {
	padding: var(--sp-6);
}

.feature-card__icon,
.icon-card__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--sp-5);
	background: var(--accent-soft);
	color: var(--accent-text);
	border-radius: var(--r-md);
}

[data-theme="dark"] .feature-card__icon,
[data-theme="dark"] .icon-card__icon {
	color: var(--accent);
}

.feature-card__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-lg);
}

.feature-card__text {
	margin: 0;
	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: 1.65;
}

/* Карточка с иконкой */
.icon-card {
	padding: var(--sp-6);
}

.icon-card__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-base);
}

.icon-card__text {
	margin: 0;
	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: 1.65;
}

/* Карточка записи / акции */
.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.card__link {
	display: block;
	text-decoration: none;
}

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--sp-6);
}

.card__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-lg);
	line-height: 1.35;
}

.card__title a {
	color: var(--text);
	text-decoration: none;
}

.card__title a:hover,
.card__title a:focus-visible {
	color: var(--accent-text);
}

.card__excerpt {
	margin: 0 0 var(--sp-5);
	color: var(--text-soft);
	font-size: var(--fs-sm);
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: auto;
	color: var(--accent-text);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 650;
	text-decoration: none;
}

.card__more .icon {
	transition: transform var(--dur) var(--ease);
}

.card__more:hover .icon {
	transform: translateX(4px);
}

.card__badge {
	position: absolute;
	top: var(--sp-4);
	left: var(--sp-4);
	z-index: 2;
	padding: var(--sp-1) var(--sp-3);
	background: var(--accent);
	color: var(--accent-contrast);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--r-full);
	box-shadow: var(--shadow-sm);
}

.card__meta {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

/* Мета записи */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.post-meta a {
	color: var(--text-muted);
}

/* Карточка отзыва */
.review-card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-6);
}

.review-card__rating {
	display: flex;
	gap: 2px;
	margin-bottom: var(--sp-4);
}

.review-card__star {
	color: var(--border-strong);
}

.review-card__star.is-active {
	color: var(--accent);
}

.review-card__text {
	margin: 0 0 var(--sp-5);
	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.review-card__text::before {
	content: "«";
}

.review-card__text::after {
	content: "»";
}

.review-card__author {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--border);
}

.review-card__name {
	font-family: var(--font-heading);
	font-weight: 700;
}

.review-card__vehicle {
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   13. БЛОК «О КОМПАНИИ»
   -------------------------------------------------------------------------- */
.about {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.about {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--sp-16);
	}
}

.about__media {
	position: relative;
}

.about__badge {
	position: absolute;
	bottom: var(--sp-5);
	left: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	background: var(--accent);
	color: var(--accent-contrast);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	text-align: center;
}

.about__badge-value {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: 800;
	line-height: 1;
}

.about__badge-label {
	display: block;
	margin-top: var(--sp-1);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.about__content h2 {
	margin-bottom: var(--sp-5);
}

.about__content p {
	color: var(--text-soft);
}

.about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.about__note {
	margin-top: var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	background: var(--accent-soft);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	color: var(--text-soft) !important;
	font-size: var(--fs-sm);
}

.check-list {
	display: grid;
	gap: var(--sp-3);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.check-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin: 0;
	font-size: var(--fs-sm);
}

.check-list .icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--c-green-500);
}

[data-theme="dark"] .check-list .icon {
	color: #4ade80;
}

/* --------------------------------------------------------------------------
   14. ЦИФРЫ И СЧЁТЧИКИ
   -------------------------------------------------------------------------- */
.stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-5);
}

@media (min-width: 1024px) {
	.stats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-6);
	}
}

.stat-card {
	padding: var(--sp-6);
	text-align: center;
}

.stat-card__value {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--c-navy-800);
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .stat-card__value {
	color: var(--accent);
}

.stat-card__label {
	display: block;
	margin-bottom: var(--sp-3);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 650;
}

.stat-card__sub {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--fs-xs);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   15. ШАГИ (ПРОЦЕДУРА)
   -------------------------------------------------------------------------- */
.steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

@media (min-width: 768px) {
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.step {
	position: relative;
	margin: 0;
	padding: var(--sp-6);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--r-lg);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.step:hover {
	background: rgba(255, 255, 255, 0.09);
	transform: translateY(-4px);
}

.step__num {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--sp-4);
	background: var(--accent);
	color: var(--accent-contrast);
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 800;
	border-radius: var(--r-md);
}

.step__title {
	margin: 0 0 var(--sp-3);
	color: var(--text-inverse);
	font-size: var(--fs-base);
}

.step__text {
	margin: 0;
	color: var(--text-inverse-soft);
	font-size: var(--fs-sm);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   16. СПИСОК ДОКУМЕНТОВ
   -------------------------------------------------------------------------- */
.doc-list {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-item {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.doc-item:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-sm);
	transform: translateX(4px);
}

.doc-item__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	background: var(--accent-soft);
	color: var(--accent-text);
	border-radius: var(--r-sm);
}

[data-theme="dark"] .doc-item__icon {
	color: var(--accent);
}

.doc-item__title {
	flex: 1 1 auto;
	color: var(--text);
	font-size: var(--fs-sm);
	font-weight: 550;
	text-decoration: none;
}

.doc-item__title:hover {
	color: var(--accent-text);
}

.doc-item__meta {
	flex: 0 0 auto;
	padding: 2px var(--sp-3);
	background: var(--bg-muted);
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--r-full);
}

@media (max-width: 639px) {
	.doc-item {
		flex-wrap: wrap;
	}

	.doc-item__title {
		flex-basis: calc(100% - 58px);
	}
}

/* --------------------------------------------------------------------------
   17. БЛОК CTA + ФОРМА ЗАЯВКИ
   -------------------------------------------------------------------------- */
.cta-section {
	position: relative;
	background: linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy-700) 100%);
	color: var(--text-inverse);
	padding: var(--sp-16) 0;
}

@media (min-width: 1024px) {
	.cta-section {
		padding: var(--sp-20) 0;
	}
}

.cta-section__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
	align-items: start;
}

@media (min-width: 1024px) {
	.cta-section__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--sp-16);
	}
}

.cta-section__content h2 {
	color: var(--text-inverse);
}

.cta-section__lead {
	margin: 0 0 var(--sp-6);
	color: var(--text-inverse-soft);
	font-size: var(--fs-md);
	line-height: 1.7;
}

.cta-section__benefits {
	display: grid;
	gap: var(--sp-3);
	margin: var(--sp-8) 0 var(--sp-10);
	padding: 0;
	list-style: none;
}

.cta-section__benefits li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin: 0;
	color: var(--text-inverse);
	font-size: var(--fs-sm);
}

.cta-section__benefits .icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--accent);
}

.cta-section__contacts {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--r-lg);
}

.cta-section__address,
.cta-section__hours {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin: 0;
	color: var(--text-inverse-soft);
	font-size: var(--fs-sm);
}

.cta-section__address .icon,
.cta-section__hours .icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--accent);
}

/* Форма */
.lead-form {
	padding: var(--sp-8);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lg);
}

.lead-form__title {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-xl);
	text-align: center;
}

.lead-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Поля */
.field {
	margin-bottom: var(--sp-5);
}

.field__label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.field__req {
	color: var(--c-red-500);
}

.field__input {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	color: var(--text);
	font-family: inherit;
	font-size: var(--fs-base);
	line-height: 1.5;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field__input:focus {
	outline: 0;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--ring);
}

.field__input::placeholder {
	color: var(--text-muted);
}

.field__input--textarea {
	resize: vertical;
	min-height: 96px;
	font-family: inherit;
}

.field__input--select {
	cursor: pointer;
}

.field__error {
	display: none;
	margin-top: var(--sp-2);
	color: var(--c-red-500);
	font-size: var(--fs-xs);
}

.field__error:not(:empty) {
	display: block;
}

.field.is-error .field__input {
	border-color: var(--c-red-500);
}

/* Чекбокс согласия */
.checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	cursor: pointer;
}

.checkbox__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.checkbox__box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.checkbox__box::after {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--accent-contrast);
	border-radius: 2px;
	transform: scale(0);
	transition: transform var(--dur) var(--ease);
}

.checkbox__input:checked + .checkbox__box {
	background: var(--accent);
	border-color: var(--accent);
}

.checkbox__input:checked + .checkbox__box::after {
	transform: scale(1);
}

.checkbox__input:focus-visible + .checkbox__box {
	outline: 3px solid var(--ring);
	outline-offset: 2px;
}

.checkbox__text {
	flex: 1 1 auto;
	color: var(--text-soft);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.checkbox__text a {
	color: var(--accent-text);
	text-decoration: underline;
}

/* Сообщения формы */
.lead-form__message {
	margin-top: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	line-height: 1.5;
	text-align: center;
}

.lead-form__message:empty {
	display: none;
}

.lead-form__message--success {
	background: rgba(31, 122, 77, 0.12);
	border: 1px solid var(--c-green-500);
	color: var(--c-green-500);
}

[data-theme="dark"] .lead-form__message--success {
	background: rgba(74, 222, 128, 0.12);
	border-color: #4ade80;
	color: #86efac;
}

.lead-form__message--error {
	background: rgba(176, 58, 46, 0.12);
	border: 1px solid var(--c-red-500);
	color: var(--c-red-500);
}

[data-theme="dark"] .lead-form__message--error {
	background: rgba(248, 113, 113, 0.12);
	border-color: #f87171;
	color: #fca5a5;
}

.lead-form__note {
	margin: var(--sp-5) 0 0;
	color: var(--text-muted);
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

.lead-form__submit {
	position: relative;
}

.lead-form__submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   18. ФУТЕР
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--c-graphite-900);
	color: rgba(255, 255, 255, 0.75);
	padding-top: var(--sp-16);
	padding-bottom: var(--sp-8);
}

[data-theme="dark"] .site-footer {
	background: var(--c-navy-900);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
	margin-bottom: var(--sp-12);
}

@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
		gap: var(--sp-12);
	}
}

.footer-brand {
	max-width: 380px;
}

.footer-brand .site-branding__text {
	color: #fff;
}

.footer-brand__text {
	margin: var(--sp-6) 0 var(--sp-8);
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--fs-sm);
	line-height: 1.65;
}

.socials {
	display: flex;
	gap: var(--sp-3);
}

.socials__item {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--r-md);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.socials__item:hover,
.socials__item:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
	transform: translateY(-3px);
}

.footer-col__title {
	margin: 0 0 var(--sp-5);
	color: #fff;
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu li {
	margin: 0;
}

.footer-menu a {
	display: block;
	padding: var(--sp-2) 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.footer-menu a:hover,
.footer-menu a:focus-visible {
	color: var(--accent);
	padding-left: var(--sp-2);
}

.footer-contacts {
	display: grid;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-6);
	padding: 0;
	list-style: none;
}

.footer-contacts__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.footer-contacts__item .icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--accent);
}

.footer-contacts__item a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.footer-contacts__item a:hover {
	color: var(--accent);
}

.footer-contacts__alt {
	display: block;
	margin-top: var(--sp-1);
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: var(--fs-xs);
}

.footer-contacts__cta {
	margin-top: var(--sp-6);
}

/* Реквизиты */
.footer-requisites {
	margin-bottom: var(--sp-10);
	padding: var(--sp-6);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--r-lg);
}

.footer-requisites__title {
	margin: 0 0 var(--sp-4);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.footer-requisites__list {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
}

@media (min-width: 768px) {
	.footer-requisites__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-4) var(--sp-8);
	}
}

.footer-requisites__row {
	display: flex;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
}

.footer-requisites__row dt {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
}

.footer-requisites__row dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 550;
}

/* Подвал подвала */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	padding-top: var(--sp-8);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--fs-xs);
}

.footer-legal__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-legal__list li {
	margin: 0;
}

.footer-legal__list a {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--fs-xs);
	text-decoration: none;
}

.footer-legal__list a:hover {
	color: var(--accent);
}

.footer-disclaimer {
	margin: var(--sp-6) 0 0;
	padding: var(--sp-4) var(--sp-5);
	background: rgba(201, 162, 39, 0.08);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--fs-xs);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   19. ВНУТРЕННИЕ СТРАНИЦЫ
   -------------------------------------------------------------------------- */
.page-hero {
	padding: var(--sp-12) 0 var(--sp-8);
	background: var(--bg-muted);
	border-bottom: 1px solid var(--border);
}

.page-hero--compact {
	padding: var(--sp-8) 0 var(--sp-6);
}

.page-hero--article {
	background: var(--bg);
}

.page-hero__title {
	margin: 0;
	max-width: 960px;
}

.page-hero__lead {
	margin: var(--sp-5) 0 0;
	max-width: 720px;
	color: var(--text-soft);
	font-size: var(--fs-md);
	line-height: 1.7;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-8);
}

/* Хлебные крошки */
.breadcrumbs {
	margin-bottom: var(--sp-5);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
}

.breadcrumbs__item::after {
	content: "/";
	margin-left: var(--sp-2);
	color: var(--text-muted);
}

.breadcrumbs__item:last-child::after {
	content: none;
}

.breadcrumbs__item a {
	color: var(--text-muted);
	text-decoration: none;
}

.breadcrumbs__item a:hover {
	color: var(--text);
}

.breadcrumbs__item [aria-current] {
	color: var(--text);
}

/* Контент записи */
.entry {
	max-width: 880px;
}

.entry__thumb {
	margin: 0 0 var(--sp-8);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.entry__thumb--wide {
	margin-left: calc(-1 * var(--sp-5));
	margin-right: calc(-1 * var(--sp-5));
	border-radius: 0;
}

@media (min-width: 768px) {
	.entry__thumb--wide {
		margin-left: 0;
		margin-right: 0;
		border-radius: var(--r-lg);
	}
}

.entry-content {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

.entry-content > * + * {
	margin-top: var(--sp-6);
}

.entry-content h2 {
	margin-top: var(--sp-10);
	font-size: var(--fs-xl);
}

.entry-content h3 {
	margin-top: var(--sp-8);
	font-size: var(--fs-lg);
}

.entry-content a {
	color: var(--accent-text);
	font-weight: 550;
}

.entry-content img {
	border-radius: var(--r-md);
}

.entry-content blockquote {
	padding: var(--sp-5) var(--sp-6);
	background: var(--bg-muted);
	border-left: 4px solid var(--accent);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	font-size: var(--fs-md);
	font-style: normal;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.entry-content th,
.entry-content td {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	border: 1px solid var(--border);
}

.entry-content th {
	background: var(--bg-muted);
	font-weight: 650;
}

.entry__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	margin-top: var(--sp-10);
	padding-top: var(--sp-8);
	border-top: 1px solid var(--border);
}

.entry__tags a {
	display: inline-block;
	margin: 0 var(--sp-2) var(--sp-2) 0;
	padding: var(--sp-1) var(--sp-3);
	background: var(--bg-muted);
	color: var(--text-soft);
	font-size: var(--fs-xs);
	text-decoration: none;
	border-radius: var(--r-full);
}

.entry__tags a:hover {
	background: var(--accent-soft);
	color: var(--text);
}

.entry__share {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
}

.entry__share-label {
	color: var(--text-muted);
}

.entry__share-link {
	color: var(--text-soft);
	text-decoration: none;
}

.entry__share-link:hover {
	color: var(--accent-text);
}

/* Навигация между записями */
.post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin-top: var(--sp-10);
}

@media (min-width: 640px) {
	.post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
	background: var(--bg-muted);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.post-nav__item:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.post-nav__label {
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.post-nav__title {
	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	font-weight: 650;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   20. ПОИСК И 404
   -------------------------------------------------------------------------- */
.search-form {
	max-width: 680px;
	margin: var(--sp-6) 0;
}

.search-form__row {
	display: flex;
	gap: var(--sp-3);
}

.search-form__input {
	flex: 1 1 auto;
	padding: var(--sp-3) var(--sp-5);
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	color: var(--text);
	font-family: inherit;
	font-size: var(--fs-base);
	transition: border-color var(--dur) var(--ease);
}

.search-form__input:focus {
	outline: 0;
	border-color: var(--accent);
}

.search-form__submit {
	flex: 0 0 auto;
}

.search-form__submit-text {
	display: none;
}

@media (min-width: 640px) {
	.search-form__submit-text {
		display: inline;
	}
}

.error-404 {
	padding: var(--sp-20) 0;
	text-align: center;
}

.error-404__inner {
	max-width: 740px;
	margin: 0 auto;
}

.error-404__code {
	color: var(--accent);
	font-family: var(--font-heading);
	font-size: 9rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	opacity: 0.3;
}

.error-404__title {
	margin: var(--sp-6) 0 var(--sp-4);
	font-size: var(--fs-3xl);
}

.error-404__text {
	margin: 0 0 var(--sp-8);
	color: var(--text-soft);
	font-size: var(--fs-md);
}

.error-404__search {
	margin: var(--sp-8) 0;
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin: var(--sp-10) 0;
}

.error-404__contacts {
	margin-top: var(--sp-12);
	padding-top: var(--sp-8);
	border-top: 1px solid var(--border);
}

.empty-state {
	padding: var(--sp-12) var(--sp-6);
	text-align: center;
}

.empty-state .icon {
	color: var(--text-muted);
	margin: 0 auto var(--sp-6);
}

.empty-state__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xl);
}

.empty-state__text {
	margin: 0 0 var(--sp-8);
	color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   21. ТАБЛИЦЫ
   -------------------------------------------------------------------------- */
.table-wrap {
	overflow-x: auto;
	margin: var(--sp-6) 0;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
}

.conditions-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.conditions-table thead {
	background: var(--bg-muted);
}

.conditions-table th,
.conditions-table td {
	padding: var(--sp-4) var(--sp-5);
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.conditions-table th {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.conditions-table tbody tr:last-child th,
.conditions-table tbody tr:last-child td {
	border-bottom: 0;
}

.conditions-table tbody tr:hover {
	background: var(--bg-muted);
}

.conditions-table__note {
	margin: var(--sp-4) 0 0;
	color: var(--text-muted);
	font-size: var(--fs-xs);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   22. ЗАГЛУШКИ (PLACEHOLDER)
   -------------------------------------------------------------------------- */
.placeholder,
.media {
	position: relative;
	aspect-ratio: var(--ph-ratio, 16/9);
	background: var(--bg-muted);
	border-radius: var(--r-md);
	overflow: hidden;
}

/* Обёртка реального фото. Соотношение приходит из шаблона через --media-ratio
   (см. site_6467373_theme_image() и site_6467373_media() в inc/template-tags.php).
   Высоту держит aspect-ratio, поэтому картинка не «прыгает» при загрузке — нет CLS. */
.media--photo,
.media--hero,
.media--about,
.media--holder {
	aspect-ratio: var(--media-ratio, 16/9);
	border-radius: var(--r-lg);
}

/* Заглушка внутри медиа-обёртки растягивается на всю площадь родителя,
   иначе aspect-ratio сработает дважды и блок станет вдвое выше. */
.media > .placeholder--fill,
.media > .placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
}

/* Фото в карточке «Условия вкратце» на первом экране (тёмная подложка) */
.media--hero {
	margin-bottom: var(--sp-4);
	background: rgba(255, 255, 255, 0.06);
}

.media--hero .placeholder__label {
	color: rgba(255, 255, 255, 0.6);
}

.media--hero .placeholder {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
}

/* Фото в блоке «О компании» */
.media--about {
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-md);
}

.placeholder {
	display: grid;
	place-items: center;
	background:
		linear-gradient(135deg, var(--bg-muted) 0%, var(--border) 100%);
}

.placeholder__label {
	color: var(--text-muted);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-align: center;
	z-index: 2;
}

.placeholder__size {
	position: absolute;
	bottom: var(--sp-2);
	right: var(--sp-2);
	padding: 2px var(--sp-2);
	background: rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 0.75);
	font-size: 10px;
	border-radius: 3px;
}

.media {
	background: var(--bg-muted);
}

.media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Плавное проявление при lazy-загрузке, чтобы не было «щелчка» */
	animation: media-fade-in 0.4s var(--ease) both;
}

@keyframes media-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.media__img {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   23. АНИМАЦИИ ПОЯВЛЕНИЯ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	}

	.reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   24. ОТЗЫВЧИВОСТЬ: АДАПТИВНЫЕ СКРЫТИЯ
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
	.hide-mobile {
		display: none !important;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.hide-desktop {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   25. PАГИНАЦИЯ
   -------------------------------------------------------------------------- */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-12);
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding: var(--sp-2) var(--sp-3);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pagination .page-numbers:hover {
	background: var(--bg-muted);
	border-color: var(--primary);
	transform: translateY(-2px);
}

.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
}

.pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   26. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.widget {
	padding: var(--sp-6);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.widget__title {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-lg);
}

.widget__text {
	margin: 0 0 var(--sp-5);
	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: 1.65;
}

.widget__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget__list li {
	margin: 0;
}

.widget__list a {
	display: block;
	padding: var(--sp-2) 0;
	color: var(--text-soft);
	font-size: var(--fs-sm);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.widget__list a:hover {
	color: var(--text);
	padding-left: var(--sp-2);
}

.widget__list li:last-child a {
	border-bottom: 0;
}

.widget__contacts {
	margin-top: var(--sp-4);
}

.widget--cta {
	background: var(--accent-soft);
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   27. ПРОЧЕЕ
   -------------------------------------------------------------------------- */
.icon {
	display: inline-block;
	flex-shrink: 0;
}

/* Принудительная прокрутка таблиц на мобильных */
@media (max-width: 639px) {
	.entry-content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* Нативная поддержка тёмной темы браузером */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
	}
}


/* --------------------------------------------------------------------------
   28. КОНТЕНТ, ПЕРЕНЕСЁННЫЙ СО СТАРОГО САЙТА (WP BAKERY / VISUAL COMPOSER)

   Страницы 6467373.ru свёрстаны конструктором WP Bakery, который расставляет
   собственные фоны строк и цвета текста инлайново. В прежней тёмной теме
   это работало, в новой — даёт нечитаемые комбинации: светло-серый текст
   на светло-серой подложке.

   Решение: приводим наследуемый контент к дизайн-системе темы.
   Фоны строк убираем (текст ложится на фон страницы), цвета текста
   принудительно берём из токенов. !important необходим — иначе
   инлайновые стили WP Bakery перебивают каскад.
   -------------------------------------------------------------------------- */

/* 1. Снимаем фоновые заливки строк и колонок конструктора */
.entry-content .vc_row,
.entry-content .wpb_row,
.entry-content .vc_section,
.entry-content .vc_column_container,
.entry-content .vc_column-inner,
.entry-content .wpb_content_element,
.entry-content .wpb_wrapper,
.entry-content .wpb_text_column,
.entry-content .wpb_single_image {
	background-color: transparent !important;
	background-image: none !important;
}

/* 2. Текст — цвет темы, независимо от того, что записал конструктор */
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.entry-content dt,
.entry-content dd,
.entry-content blockquote,
.entry-content figcaption,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content .wpb_text_column,
.entry-content .wpb_wrapper {
	color: var(--text) !important;
}

/* 3. Ссылки — акцентный цвет, читаемый на светлом */
.entry-content a:not(.btn):not(.wp-block-button__link) {
	color: var(--accent-text) !important;
}

.entry-content a:not(.btn):not(.wp-block-button__link):hover {
	color: var(--accent-text-hover) !important;
}

/* 4. Точечно ловим светлые цвета, оставшиеся от старой тёмной темы */
.entry-content [style*="color:#fff"],
.entry-content [style*="color: #fff"],
.entry-content [style*="color:#ffffff"],
.entry-content [style*="color: #ffffff"],
.entry-content [style*="color:white"],
.entry-content [style*="color: white"],
.entry-content [style*="color:#eee"],
.entry-content [style*="color:#eeeeee"],
.entry-content [style*="color:#f0f0f0"],
.entry-content [style*="color:#ddd"],
.entry-content [style*="color:#dddddd"],
.entry-content [style*="color:#ccc"],
.entry-content [style*="color:#cccccc"],
.entry-content [style*="color:#e8e8e8"],
.entry-content [style*="color:#f4f4f4"] {
	color: var(--text) !important;
}

/* 5. Инлайновые светлые фоны на абзацах и блоках — убираем */
.entry-content [style*="background-color:#e"],
.entry-content [style*="background-color: #e"],
.entry-content [style*="background-color:#f"],
.entry-content [style*="background-color: #f"],
.entry-content [style*="background:#e"],
.entry-content [style*="background: #e"],
.entry-content [style*="background:#f"],
.entry-content [style*="background: #f"] {
	background-color: transparent !important;
	background: transparent !important;
}

/* 6. Заголовки-«секции» внутри контента — вернуть им нормальную иерархию.
      WP Bakery часто делает h2 капсом с огромным кеглем. */
.entry-content h2 {
	font-size: var(--fs-h2) !important;
	line-height: var(--lh-heading) !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
	font-weight: 700 !important;
}

.entry-content h3 {
	font-size: var(--fs-h3) !important;
	line-height: var(--lh-heading) !important;
	text-transform: none !important;
	font-weight: 700 !important;
}

/* 7. Таблицы из старой темы: рамки и читаемость */
.entry-content .vc_row table,
.entry-content table {
	border-color: var(--border) !important;
}

.entry-content table th,
.entry-content table td {
	border-color: var(--border) !important;
}

/* 8. Иконки-разделители и пустые декоративные блоки не должны ломать сетку */
.entry-content .vc_empty_space {
	height: auto !important;
	min-height: var(--sp-4);
}

/* --------------------------------------------------------------------------
   29. ЗАЩИТА ОТ КОЛЛИЗИЙ CSS С ПЛАГИНАМИ

   WP Bakery и часть плагинов определяют собственный класс .container
   с width: 100%. Из-за этого шапка и секции растягивались на всю ширину
   экрана, а контент прижимался к краям. Повышаем специфичность своих
   правил, чтобы они выигрывали независимо от порядка подключения файлов.
   -------------------------------------------------------------------------- */
body .container,
body .site-container {
	width: 100% !important;
	max-width: var(--container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (min-width: 768px) {
	body .container,
	body .site-container {
		padding-left: var(--sp-8) !important;
		padding-right: var(--sp-8) !important;
	}
}

/* Печать: убираем фоны, оптимизируем под бумагу */
@media print {
	body {
		background: #fff;
		color: #000;
	}

	.topbar,
	.site-header,
	.mobile-bar,
	.mobile-menu,
	.site-footer,
	.cta-section,
	.btn,
	.theme-toggle,
	.burger {
		display: none !important;
	}
}

/* ==========================================================================
   30. ИТОГОВЫЕ ПЕРЕОПРЕДЕЛЕНИЯ: НАВИГАЦИЯ И КОНТЕНТ (версия 1.5.0)
   Этот раздел — последний в файле и имеет приоритет над предыдущими правилами.
   ========================================================================== */

/* --- Навигация: подменю всегда видно при наведении, фокусе и открытии по клику --- */
.main-nav,
.main-nav__list,
.main-nav__list > li {
	overflow: visible !important;
}

.main-nav__list > li {
	position: relative;
}

.main-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: calc(var(--z-header) + 5);
	display: block;
	min-width: 250px;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

/* Открытие: наведение мышью, фокус с клавиатуры или класс из JS */
.main-nav__list > li:hover > .sub-menu,
.main-nav__list > li:focus-within > .sub-menu,
.main-nav__list > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav__list .sub-menu li {
	position: relative;
	margin: 0;
}

.main-nav__list .sub-menu a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	color: var(--text);
	font-size: var(--fs-sm);
	text-decoration: none;
	border-radius: var(--r-sm);
	white-space: nowrap;
}

.main-nav__list .sub-menu a:hover,
.main-nav__list .sub-menu a:focus-visible {
	background: var(--accent-soft);
	color: var(--text);
}

/* Невидимый мост к подменю: курсор не «теряет» его при переходе вниз */
.main-nav__list > li > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}

/* Стрелка у пунктов с подменю */
.main-nav__list > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 6px;
	vertical-align: middle;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.55;
}

/* --- Контент, перенесённый с WP Bakery: читаемый текст на любом фоне --- */
.entry-content [style*="background"] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

.entry-content [style*="color"] {
	color: inherit !important;
}

.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content blockquote,
.entry-content .wpb_wrapper,
.entry-content .wpb_text_column {
	color: var(--text) !important;
}

.entry-content a {
	color: var(--accent-text) !important;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--accent-text-hover) !important;
}

/* Инлайновые «полосы» и заливки конструктора не должны перекрывать текст */
.entry-content .vc_row,
.entry-content .vc_column_container,
.entry-content .vc_column-inner {
	position: static;
}