/*
Theme Name: Ириночи
Theme URI: https://irinochi.ru
Author: Веб-студия Ириночи
Description: Блочная тема веб-студии Ириночи: светлая и тёмная схемы, крупная типографика, карточки услуг. Сделана под макет цифровой студии.
Version: 1.8.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sayt-i-seo
Tags: block-theme, full-site-editing, dark-mode, business, one-column
*/

/* ==========================================================================
   0. Шрифты
   Свои woff2 на своём сервере, порезаны на подмножества по алфавитам:
   браузер скачивает только те файлы, чьи символы реально встретились на
   странице (за это отвечает unicode-range).

   Объявлены здесь, а не в theme.json: оттуда WordPress печатал их тегом
   <style> в каждую страницу, а из этого файла они берутся один раз и живут
   в кэше. На скорость показа это не влияет — три главных файла всё равно
   идут в preload из functions.php, до всякого CSS.
   ⚠️ Пути относительные (assets/fonts/...) — не переписывать на полные,
   иначе тема сломается на другом домене и на локальном стенде.
   ========================================================================== */

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("assets/fonts/oswald-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("assets/fonts/oswald-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("assets/fonts/oswald-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("assets/fonts/oswald-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Запасные шрифты с подогнанными метриками ---
   Пока грузится Oswald/Inter, текст рисуется системным шрифтом. Метрики
   подогнаны замером (Oswald = 80,9 % ширины Arial, Inter = 106,9 %), поэтому
   строки ложатся так же и страница не прыгает при подмене шрифта. */

@font-face {
	font-family: "Oswald Fallback";
	src: local("Arial");
	size-adjust: 80.9%;
	ascent-override: 147.5%;
	descent-override: 35.7%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 106.9%;
	ascent-override: 90.6%;
	descent-override: 22.6%;
	line-gap-override: 0%;
}

/* ==========================================================================
   1. Палитра — светлая и тёмная схемы
   Пресеты в theme.json ссылаются на эти переменные, поэтому переключение
   темы перекрашивает и блоки редактора, и фронт.
   ========================================================================== */

:root {
	color-scheme: light;

	--hero-art: url("assets/img/wave.svg");

	--c-bg: #ffffff;
	--c-surface: #ffffff;
	--c-subtle: #f5f3fc;
	--c-text: #1b1638;
	--c-muted: #6a6288;
	--c-navy: #2a1a5e;
	--c-navy-soft: #3a2680;
	--c-accent: #c0aaff;
	--c-accent-ink: #1b1233;
	--c-line: #e8e3f5;
	--c-eyebrow: #6d4bd8;

	/* Бегунок прокрутки — тот же фиолетовый, что у надзаголовков. Отдельного
	   значения для тёмной схемы не нужно: там --c-eyebrow сам становится
	   лавандовым, и бегунок светлеет вместе с ним. */
	--c-scroll-thumb: var(--c-eyebrow);

	--c-card-shadow: 0 18px 50px -26px rgba(45, 27, 105, 0.3);
	--c-header-bg: rgba(255, 255, 255, 0.82);
	--c-art-1: #c0aaff;
	--c-art-2: #6d4bd8;
	--c-art-opacity: 0.85;
}

[data-theme="dark"] {
	color-scheme: dark;

	--c-bg: #130e2e;
	--c-surface: #221a53;
	--c-subtle: #1b1447;
	--c-text: #ffffff;
	--c-muted: #bdb3e6;
	--c-navy: #372b85;
	--c-navy-soft: #43349c;
	--c-accent: #c0aaff;
	--c-accent-ink: #1b1233;
	--c-line: rgba(255, 255, 255, 0.14);
	--c-eyebrow: var(--c-accent);

	--c-card-shadow: 0 18px 50px -26px rgba(0, 0, 0, 0.6);
	--c-header-bg: rgba(27, 20, 71, 0.78);
	--c-art-1: #c0aaff;
	--c-art-2: #8b6dff;
	--c-art-opacity: 0.55;
}

/* Пока посетитель не трогал переключатель — идём за настройкой его системы. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--c-bg: #130e2e;
		--c-surface: #221a53;
		--c-subtle: #1b1447;
		--c-text: #ffffff;
		--c-muted: #bdb3e6;
		--c-navy: #372b85;
		--c-navy-soft: #43349c;
		--c-line: rgba(255, 255, 255, 0.14);
		--c-eyebrow: var(--c-accent);

		--c-card-shadow: 0 18px 50px -26px rgba(0, 0, 0, 0.6);
		--c-header-bg: rgba(27, 20, 71, 0.78);
		--c-art-2: #8b6dff;
		--c-art-opacity: 0.55;
	}
}

/* ==========================================================================
   2. База
   ========================================================================== */

body {
	background-color: var(--c-bg);
	color: var(--c-text);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

/* Полосы прокрутки — страницы, модального окна и любых прокручиваемых блоков:
   свойства наследуются, поэтому достаточно задать их один раз на html. */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--c-scroll-thumb) var(--c-subtle);
}

/* Тем браузерам, где стандартных свойств выше ещё нет, рисуем то же самое
   старым способом. Браузеры, понявшие scrollbar-color, сюда не заходят. */
@supports not (scrollbar-color: red blue) {
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	::-webkit-scrollbar-track {
		background: var(--c-subtle);
	}

	::-webkit-scrollbar-thumb {
		border: 2px solid var(--c-subtle);
		border-radius: 999px;
		background: var(--c-scroll-thumb);
	}
}

:where(a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible) {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Плавная прокрутка к якорям, но не мучаем тех, кто просил меньше анимаций */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   3. Типографика
   ========================================================================== */

h1, h2, h3,
.wp-block-heading {
	text-wrap: balance;
}

/* Надзаголовок с чёрточкой: «— УСЛУГИ» */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-eyebrow);
}

.eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	flex: none;
	background: currentColor;
}

/* !important — иначе блочная раскладка WordPress центрирует абзац своим !important */
.lead.lead {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	color: var(--c-muted);
	max-width: 60ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ==========================================================================
   4. Кнопки и ссылки-стрелки
   ========================================================================== */

.wp-block-button__link {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -14px rgba(20, 20, 60, 0.5);
}

/* Лавандовая кнопка */
.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--c-accent);
	color: var(--c-accent-ink);
}

/* Кнопка-контур */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-text);
	border: 1px solid var(--c-line);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--c-text);
}

/* Ссылка со стрелкой ↗ */
.arrow-link a,
a.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.arrow-link a::after,
a.arrow-link::after {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-left: 0.35em;
	vertical-align: -0.12em;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
	transition: transform 0.18s ease;
}

.arrow-link a:hover::after,
a.arrow-link:hover::after {
	transform: translate(2px, -2px);
}

/* ==========================================================================
   5. Шапка
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	backdrop-filter: blur(14px);
	background: var(--c-header-bg);
	border-bottom: 1px solid var(--c-line);
}

/* Логотип. Две картинки: тёмная для светлого фона, светлая для тёмного —
   сам логотип фиолетовый и на тёмной схеме сливался бы с фоном. Показываем
   нужную через display, а не через <picture>: тему переключают ещё и вручную
   кнопкой (data-theme на <html>), а media-запросы про это не знают. */
.site-logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	line-height: 0;
}

/* 46px — ниже подпись «ВЕБ-СТУДИЯ» под названием становится нечитаемой. */
.site-logo img {
	display: block;
	width: auto;
	height: 46px;
}

/* Селекторы обязательно с img: правило размера выше — .site-logo img — весит
   больше одного класса и перебило бы display: none. */
.site-logo img.site-logo__img--on-dark {
	display: none;
}

[data-theme="dark"] .site-logo img.site-logo__img--on-light {
	display: none;
}

[data-theme="dark"] .site-logo img.site-logo__img--on-dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-logo img.site-logo__img--on-light {
		display: none;
	}

	:root:not([data-theme="light"]) .site-logo img.site-logo__img--on-dark {
		display: block;
	}
}

@media (max-width: 599px) {
	.site-logo img {
		height: 36px;
	}
}

/* В подвале фон всегда тёмно-синий — там только светлый вариант. */
.site-logo--footer img {
	height: 46px;
}

/* --- Кнопка «Обсудить проект» в шапке ---
   На широком экране — обычная кнопка с текстом. На телефоне текст в неё не
   влезал и разъезжался в три строки, поэтому она превращается в кружок со
   значком-облачком. Текст при этом остаётся в разметке (font-size: 0), так
   что поисковики и озвучка экрана его по-прежнему видят.
   Значок рисуется маской, а не фоном-картинкой: маска красится currentColor
   и сама подхватывает цвет кнопки в светлой и тёмной схеме. */
.header-cta {
	--cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

.header-cta .wp-block-button__link {
	padding: 0.8rem 1.4rem;
	font-size: 0.875rem;
}

@media (max-width: 600px) {
	.header-cta .wp-block-button__link {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		font-size: 0;
	}

	.header-cta .wp-block-button__link::before {
		content: "";
		width: 21px;
		height: 21px;
		background-color: currentColor;
		-webkit-mask: var(--cta-icon) center / contain no-repeat;
		mask: var(--cta-icon) center / contain no-repeat;
	}
}

.site-header .wp-block-navigation {
	font-size: 0.9375rem;
	font-weight: 500;
}

.site-header .wp-block-navigation a {
	color: var(--c-text);
	text-decoration: none;
}

.site-header .wp-block-navigation a:hover {
	color: var(--c-navy);
	text-decoration: none;
}

[data-theme="dark"] .site-header .wp-block-navigation a:hover {
	color: var(--c-accent);
}

/* Переключатель светлая/тёмная */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: transparent;
	color: var(--c-text);
	cursor: pointer;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.theme-toggle:hover {
	border-color: var(--c-text);
	transform: rotate(-12deg);
}

.theme-toggle svg {
	width: 18px;
	height: 18px;
}

.theme-toggle .icon-moon {
	display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
	display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun {
		display: none;
	}

	:root:not([data-theme="light"]) .theme-toggle .icon-moon {
		display: block;
	}
}

/* ==========================================================================
   6. Первый экран
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
}

/* Содержимое — поверх декоративной графики */
.hero > * {
	position: relative;
	z-index: 1;
}

/* Волнистая графика из макета */
.hero::before {
	content: "";
	position: absolute;
	inset: -20% -6% auto 42%;
	height: 150%;
	background-image: var(--hero-art);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 150% auto;
	opacity: var(--c-art-opacity);
	pointer-events: none;
}

@media (max-width: 781px) {
	.hero::before {
		background-size: 170% auto;
		background-position: right -30% top 2%;
		opacity: calc(var(--c-art-opacity) * 0.55);
	}
}

.hero h1 {
	max-width: 16ch;
}

/* ==========================================================================
   7. Секции и карточки
   ========================================================================== */

/* Крупная белая «плита», в которую сложены секции — как в макете */
.section-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--c-card-shadow);
}

.is-dark-section {
	--c-text: #ffffff;
	--c-muted: #b6b3e0;
	--c-line: rgba(255, 255, 255, 0.14);
	--c-surface: var(--c-navy-soft);
	--c-eyebrow: var(--c-accent);
	color: #ffffff;
}

.is-dark-section :is(h1, h2, h3, h4) {
	color: #ffffff;
}

/* Карточка услуги с крупным «призрачным» номером */
.service-card {
	position: relative;
	overflow: hidden;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	padding: 1.75rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-navy);
	box-shadow: var(--c-card-shadow);
}

a.service-card {
	text-decoration: none;
}

.service-card__num {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--c-text);
	opacity: 0.09;
	pointer-events: none;
}

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1.25rem;
	border-radius: 12px;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 1.25rem;
	transition: transform 0.2s ease;
}

.service-card__icon svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
}

.service-card:hover .service-card__icon {
	transform: translateY(-2px) rotate(-6deg);
}

.service-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
}

.service-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-muted);
}

.service-card__price {
	display: block;
	margin-top: 1rem;
	font-weight: 600;
	color: var(--c-text);
}

/* Сетки карточек */
.services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.services-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem 1.5rem;
}

@media (max-width: 1024px) {
	.services-grid,
	.services-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.services-grid,
	.services-grid--3,
	.stats-grid {
		grid-template-columns: 1fr;
	}

	/* Второй класс — не для красоты: у блока кнопок WordPress свой
	   .wp-block-buttons-is-layout-flex с display: flex, он идёт в каскаде
	   позже темы и при одном классе перебивал скрытие — кнопка «Обсудить
	   проект» вылезала в мобильную шапку и ломала её. */
	.hide-on-mobile,
	.wp-block-buttons.hide-on-mobile {
		display: none;
	}
}

/* Плитка с цифрой-достижением */
.stat {
	border-top: 2px solid var(--c-accent);
	padding-top: 1rem;
}

.stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--c-text);
}

.stat__label {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--c-muted);
}

/* Строка прайса */
.price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px dashed var(--c-line);
}

.price-row:last-child {
	border-bottom: 0;
}

.price-row__name {
	font-weight: 600;
	color: var(--c-text);
}

.price-row__value {
	flex: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
}

/* Карточка кейса без имени клиента */
.case-card {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.case-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-navy);
}

.case-card__tag {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--c-subtle);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.case-card__result {
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--c-text);
}

/* Бегущая строка с преимуществами */
.marquee {
	overflow: hidden;
	border-block: 1px solid var(--c-line);
	padding: 0.9rem 0;
	background: var(--c-navy);
	color: #ffffff;
}

/*
 * Лента — это один и тот же набор слов, написанный дважды, который едет влево
 * ровно на свою половину. Поэтому у половин обязана совпадать ширина
 * до пикселя: никаких gap между элементами (он не удваивается вместе с ними
 * и лента раз в круг дёргается) — все отступы живут внутри самих слов.
 */
.marquee__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	animation: marquee 45s linear infinite;
}

.marquee__track span {
	display: inline-flex;
	align-items: center;
}

.marquee__track span::after {
	content: "◆";
	margin: 0 3rem;
	color: var(--c-accent);
}

/* Пока курсор на ленте — она останавливается, читать удобнее */
.marquee:hover .marquee__track {
	animation-play-state: paused;
}

@keyframes marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

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

/* ==========================================================================
   8. Подвал
   ========================================================================== */

.site-footer {
	background: var(--c-navy);
	color: #ffffff;
	--c-text: #ffffff;
	--c-muted: rgba(255, 255, 255, 0.68);
	--c-line: rgba(255, 255, 255, 0.16);
}

.site-footer :is(h1, h2, h3, h4),
.site-footer .wp-block-site-title a {
	color: #ffffff;
}

.site-footer a {
	color: #ffffff;
	text-decoration: none;
}

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

.site-footer p {
	color: rgba(255, 255, 255, 0.68);
}

/* Контакты в подвале — со значками */
.footer-contacts {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.68);
}

.footer-contacts li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.footer-contacts svg {
	width: 16px;
	height: 16px;
	flex: none;
	stroke-width: 1.8;
	color: var(--c-accent);
}

/* ==========================================================================
   9. Блоки внутренних страниц
   ========================================================================== */

/* Нумерованные шаги работы */
.steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps li {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
}

.steps li::before {
	counter-increment: step;
	content: "0" counter(step);
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--c-eyebrow);
	-webkit-text-stroke: 0;
}

.is-dark-section .steps li::before {
	color: var(--c-accent);
}

.steps li strong {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--c-text);
}

.steps li span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-muted);
}

.is-dark-section .steps li {
	border-color: rgba(255, 255, 255, 0.16);
	background: transparent;
}

/* Вопрос-ответ */
.faq {
	border-top: 1px solid var(--c-line);
}

.faq__item {
	border-bottom: 1px solid var(--c-line);
}

.faq__item summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--c-text);
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "";
	flex: none;
	align-self: center;
	width: 20px;
	height: 20px;
	background-color: var(--c-eyebrow);
	-webkit-mask: url("assets/icons/plus.svg") center / contain no-repeat;
	mask: url("assets/icons/plus.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
	transform: rotate(45deg);
}

.faq__item summary:hover {
	color: var(--c-eyebrow);
}

.faq__item p {
	margin: 0 0 1.25rem;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-muted);
}

/* Тарифы */
.tariffs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.tariff {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
}

.tariff--featured {
	border-color: var(--c-navy);
	box-shadow: var(--c-card-shadow);
}

.tariff__badge {
	position: absolute;
	top: -0.7rem;
	left: 1.5rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tariff__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--c-text);
}

.tariff__price {
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--c-text);
}

.tariff__note {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--c-muted);
}

.tariff__list {
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--c-line);
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.tariff__list li,
.checklist li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-muted);
}

.tariff__list li::before,
.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.22em;
	width: 1.05em;
	height: 1.05em;
	background-color: var(--c-eyebrow);
	-webkit-mask: url("assets/icons/check.svg") center / contain no-repeat;
	mask: url("assets/icons/check.svg") center / contain no-repeat;
}

.is-dark-section .checklist li::before {
	background-color: var(--c-accent);
}

/* Чек-лист «что входит» */
.checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checklist--one {
	grid-template-columns: 1fr;
}

.is-dark-section .checklist li {
	color: rgba(255, 255, 255, 0.78);
}

/* Отзыв */
.review-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
}

.review-card__text {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-text);
}

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

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

.review-card__author {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--c-line);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--c-text);
}

.review-card__meta {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--c-muted);
}

/* Карточки контактов */
.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.contact-card {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.contact-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-navy);
}

.contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1.1rem;
	border-radius: 12px;
	background: var(--c-subtle);
	color: var(--c-navy);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-card__icon svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
}

.contact-card:hover .contact-card__icon {
	background: var(--c-accent);
	color: var(--c-accent-ink);
}

.contact-card__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.contact-card__value {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--c-text);
}

.contact-card__note {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
	color: var(--c-muted);
}

/* Ссылки-плитки на соседние страницы */
.link-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.link-card {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.link-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-navy);
}

.link-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	color: var(--c-text);
}

.link-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-muted);
}

.link-card__price {
	display: block;
	margin-top: 1rem;
	font-weight: 600;
	color: var(--c-text);
}

/* Карточки записей в блоге — одинаковой высоты */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template .case-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wp-block-post-template .case-card .wp-block-post-excerpt__more-text {
	margin-top: 1rem;
}

.wp-block-post-template .case-card .wp-block-post-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.3;
}

.wp-block-post-template .case-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* Врезка-примечание */
.note {
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--c-accent);
	border-radius: 0 12px 12px 0;
	background: var(--c-subtle);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-text);
}

@media (max-width: 1024px) {
	.tariffs,
	.contact-cards,
	.link-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.steps,
	.tariffs,
	.checklist,
	.contact-cards,
	.link-cards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   10. Мелочи
   ========================================================================== */

.wp-block-image.is-style-duotone img {
	filter: grayscale(1) contrast(1.05);
}

.rounded-photo img {
	border-radius: var(--wp--custom--radius--card);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   11. Форма обратной связи — кнопка «Оставить заявку» и модальное окно
   ========================================================================== */

/* Карточка-кнопка на странице «Контакты» — тот же вид, что у карточек связи,
   только кислотная, чтобы читалась как главное действие. */
.contact-card--action {
	border: 0;
	width: 100%;
	text-align: left;
	font: inherit;
	cursor: pointer;
	background: var(--c-accent);
}

.contact-card--action:hover {
	border-color: transparent;
}

.contact-card--action .contact-card__label,
.contact-card--action .contact-card__value,
.contact-card--action .contact-card__note {
	color: var(--c-accent-ink);
}

.contact-card--action .contact-card__note {
	opacity: 0.7;
}

/* Модальное окно */
/* Высота окна считается в dvh, а не в vh. На телефоне 100vh — это высота
   экрана БЕЗ учёта адресной строки браузера, поэтому окно вылезало за нижний
   край и кнопка «Отправить» оказывалась за пределами видимой части. dvh —
   реально доступная высота, она меняется вместе со скрытием адресной строки.
   Строка с vh оставлена первой как запасная для старых браузеров. */
.lead-modal {
	/* ⚠️ Обязательно: <dialog> не попадает под общее border-box из стилей
	   блоков и считает высоту по-старому — БЕЗ отступов и рамки. Из-за этого
	   ограничение высоты не работало: окно с отступами 40 px выходило на
	   82 px выше экрана, и кнопка «Отправить» оказывалась за нижним краем. */
	box-sizing: border-box;
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 3rem);
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-text);
	overflow: visible;
}

.lead-modal::backdrop {
	background: rgba(15, 12, 58, 0.6);
	backdrop-filter: blur(4px);
}

.lead-modal[open] .lead-modal__inner {
	animation: lead-modal-in 0.24s ease-out;
}

@keyframes lead-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lead-modal[open] .lead-modal__inner {
		animation: none;
	}
}

/* Окно — колонка: заголовок сверху стоит на месте, прокручиваются только поля
   (за это отвечает .lead-modal__body ниже). Раньше прокручивалось всё окно
   целиком, и на невысоком экране кнопка «Отправить» уходила вниз незаметно
   для посетителя. */
.lead-modal__inner {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 3rem);
	max-height: calc(100dvh - 2rem);
	overflow: hidden;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 30px 80px -30px rgba(15, 12, 58, 0.6);
}

.lead-modal__title {
	margin-top: 0.75rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.lead-modal__note {
	margin-top: 0.75rem;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

.lead-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--c-text);
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.lead-modal__close:hover {
	border-color: var(--c-text);
	background: var(--c-subtle);
}

.lead-modal__close svg {
	width: 18px;
	height: 18px;
}

.lead-modal__loading,
.lead-modal__error {
	margin-top: 1.75rem;
	color: var(--c-muted);
}

/* Сама форма */
.lead-form {
	margin-top: 1.75rem;
	display: grid;
	gap: 1.25rem;
}

.lead-form__field {
	display: grid;
	gap: 0.5rem;
}

.lead-form label {
	font-size: 0.875rem;
	font-weight: 600;
}

.lead-form input[type="text"],
.lead-form textarea {
	/* Как и у самого окна: поля ввода не подпадают под общее border-box,
	   поэтому «ширина 100 %» + внутренние отступы давали 100 % ПЛЮС 37 px —
	   поля вылезали за край и внизу формы появлялась горизонтальная
	   прокрутка. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.9rem 1.1rem;
	font: inherit;
	font-size: 1rem;
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lead-form textarea {
	resize: vertical;
	min-height: 7rem;
}

.lead-form input[type="text"]:focus,
.lead-form textarea:focus {
	outline: none;
	border-color: var(--c-eyebrow);
	box-shadow: 0 0 0 3px rgba(77, 67, 216, 0.16);
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
	color: var(--c-muted);
	opacity: 0.75;
}

.lead-form__hint {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--c-muted);
}

.lead-form__agree {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--c-muted);
	line-height: 1.5;
}

.lead-form__agree input {
	flex: none;
	margin-top: 0.15rem;
	width: 18px;
	height: 18px;
	accent-color: var(--c-eyebrow);
}

.lead-form__agree a {
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lead-form__agree a:hover {
	color: var(--c-eyebrow);
}

/* Ловушка для ботов: человек её не видит. */
.lead-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Прокручиваемая часть окна: только поля формы. min-height: 0 обязателен —
   без него элемент внутри flex-колонки отказывается сжиматься и прокрутка
   не появляется вовсе. */
.lead-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lead-form__submit {
	justify-self: start;
	padding: 1rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: var(--c-accent-ink);
	background: var(--c-accent);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.lead-form__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -14px rgba(20, 20, 60, 0.5);
}

.lead-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* На невысоких экранах (телефон, ноутбук с открытой клавиатурой) кнопка
   «Отправить» прилипает к низу окна и видна всегда, а поля прокручиваются
   под ней. Кольцо-тень цветом фона закрывает просвет по краям кнопки.
   ⚠️ Блок должен идти ПОСЛЕ обычных правил кнопки: у них одинаковый вес,
   и при обратном порядке justify-self: start отменял бы растягивание. */
/* Кнопка «Отправить» прилипает к низу прокручиваемой части и видна всегда.
   ⚠️ БЕЗ ограничения по высоте экрана: форма не влезает не только на телефоне.
   На экране 800 px она вылезала всего на 36 px — и кнопки уже не было видно,
   а прокрутки внутри окна посетитель не замечает.
   Где ничего не обрезается, sticky просто ни на что не влияет.

   Кнопка остаётся слева и обычной ширины, как была. Чтобы под ней не ползли
   поля, тень с огромным разбросом закрашивает полосу цветом фона, а clip-path
   обрезает её до этой полосы — иначе тень залила бы всё окно. */
.lead-form__submit {
	position: sticky;
	bottom: 0;
	box-shadow: 0 0 0 100vmax var(--c-surface);
	clip-path: inset(-0.7rem -100vmax -0.7rem -100vmax);
}

/* Подскок при наведении убран: у липкой кнопки он дёргал бы всю полосу. */
.lead-form__submit:hover:not(:disabled) {
	transform: none;
	box-shadow: 0 0 0 100vmax var(--c-surface);
}

@media (max-height: 760px) {
	/* Ужимаем «шапку» окна: на невысоком экране крупный заголовок и пояснение
	   съедали место, и под поля оставалась узкая полоска. */
	.lead-modal__inner {
		padding: 1.35rem;
	}

	.lead-modal__title {
		margin-top: 0.4rem;
		font-size: 1.5rem;
	}

	.lead-modal__note {
		margin-top: 0.5rem;
		font-size: 0.875rem;
	}
}

.lead-form__status {
	margin: 0;
	font-size: 0.875rem;
	color: var(--c-muted);
}

.lead-form__status.is-error {
	color: #d64550;
}

.lead-form__done {
	margin-top: 1.75rem;
	padding: 1.5rem;
	background: var(--c-subtle);
	border-radius: var(--wp--custom--radius--card);
	color: var(--c-text);
	font-weight: 500;
}

/* ==========================================================================
   12. Хлебные крошки
   ========================================================================== */

.breadcrumbs {
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	color: var(--c-muted);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--c-line);
}

.breadcrumbs a {
	color: var(--c-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
	color: var(--c-text);
	border-bottom-color: var(--c-accent);
}

.breadcrumbs [aria-current="page"] {
	color: var(--c-text);
}

/* ==========================================================================
   12. Анимации
   Двигаем только opacity и transform: они не меняют размеры элементов,
   поэтому вёрстка не смещается и CLS остаётся нулевым. Всё выключается,
   если в системе стоит «уменьшить движение».
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* --- Появление секций при прокрутке (класс вешает reveal.js) --- */
	.sis-reveal {
		opacity: 0;
		transform: translateY(22px);
	}

	.sis-reveal-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--sis-delay, 0s);
	}

	/* --- Первый экран: мягко поднимается при загрузке ---
	   H1 не гасим по прозрачности: это самый крупный элемент экрана, и по нему
	   поисковик замеряет скорость показа (LCP). Он только всплывает. */
	.hero .eyebrow,
	.hero .lead,
	.hero .wp-block-buttons {
		animation: sis-rise-fade 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.hero h1 {
		animation: sis-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.hero .eyebrow          { animation-delay: 0.05s; }
	.hero h1                { animation-delay: 0.1s; }
	.hero .lead             { animation-delay: 0.25s; }
	.hero .wp-block-buttons { animation-delay: 0.38s; }

	@keyframes sis-rise-fade {
		from { opacity: 0; transform: translateY(16px); }
		to   { opacity: 1; transform: none; }
	}

	@keyframes sis-rise {
		from { transform: translateY(14px); }
		to   { transform: none; }
	}

	/* --- Волна на первом экране еле заметно дышит --- */
	.hero::before {
		animation: sis-wave 28s ease-in-out infinite;
	}

	@keyframes sis-wave {
		0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
		50%      { transform: translate3d(-1.2%, -1.4%, 0) scale(1.03); }
	}

	/* --- Пункты меню: линия выезжает из-под слова --- */
	.site-header .wp-block-navigation .wp-block-navigation-item__content {
		position: relative;
	}

	.site-header .wp-block-navigation .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -4px;
		height: 2px;
		background: var(--c-accent);
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.site-header .wp-block-navigation .wp-block-navigation-item__content:hover::after {
		transform: scaleX(1);
		transform-origin: left center;
	}

	/* Подменю «Услуги» и «Цены» — не выпрыгивают, а проявляются */
	.site-header .wp-block-navigation__submenu-container {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	/* --- Смена светлой и тёмной схемы — переливом, а не рывком --- */
	body,
	.site-header,
	.section-card,
	.service-card,
	.case-card,
	.marquee,
	.wp-block-button__link {
		transition:
			background-color 0.35s ease,
			border-color 0.35s ease,
			color 0.35s ease;
	}

	/* --- Ответы в блоке вопросов раскрываются плавно --- */
	.faq__item[open] > *:not(summary) {
		animation: sis-rise-fade 0.35s ease-out both;
	}
}

/* ==========================================================================
   13. Акция — плашка и зачёркнутые цены
   ========================================================================== */

/*
 * Переключатели акции. По умолчанию страница выглядит так, будто акции нет:
 * акционные цены спрятаны, обычные показаны. Класс sis-promo на <body> (его
 * ставит inc/promo.php) меняет их местами. Поэтому конец акции — это одна
 * константа в PHP, а не правка текстов на двух страницах цен.
 */
.promo-only {
	display: none;
}

.sis-promo .promo-only {
	display: inline;
}

.sis-promo .promo-hide {
	display: none;
}

/*
 * Старая цена. Прячется сама, без promo-only: иначе при выключенной акции
 * правило .tariff__price .price-old оказывалось специфичнее, чем .promo-only,
 * и зачёркнутая цена продолжала показываться.
 */
.price-old {
	display: none;
}

.sis-promo .price-old {
	display: inline;
	margin-right: 0.4em;
	color: var(--c-muted);
	font-weight: 400;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* В карточке тарифа цифры крупные — зачёркнутую уводим строкой выше и мельче */
.sis-promo .tariff__price .price-old {
	display: block;
	margin: 0 0 0.2rem;
	font-size: 1.125rem;
	line-height: 1.2;
}

/* Плашка акции над тарифами */
.promo-bar {
	margin-top: var(--wp--preset--spacing--50);
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--c-navy);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	box-shadow: var(--c-card-shadow);
}

.promo-bar__label {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.promo-bar__title {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--c-text);
}

.promo-bar__text {
	margin: 0.75rem 0 0;
	max-width: 60ch;
	color: var(--c-text);
}

.promo-bar__left {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-muted);
}

.promo-bar__action {
	margin-top: 1.5rem;
}

/*
 * На телефоне две цены в одну строку не влезают: у .price-row__value стоит
 * nowrap, и строка выталкивала страницу вбок (появлялась горизонтальная
 * прокрутка). Во время акции разрешаем перенос и ставим старую цену строкой
 * выше — так же, как в карточках тарифов.
 */
@media (max-width: 600px) {
	.sis-promo .price-row__value {
		white-space: normal;
		text-align: right;
	}

	.sis-promo .price-row__value .price-old {
		display: block;
		margin: 0 0 0.1rem;
		font-size: 0.9375rem;
	}
}

/* ==========================================================================
   14. Квиз — приглашение на странице и окно с шагами
   ========================================================================== */

/* Приглашение на странице. Тот же вид, что у плашки акции: два разных блока
   с одинаковой ролью не должны выглядеть по-разному. */
.quiz-invite {
	margin-top: var(--wp--preset--spacing--50);
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-subtle);
}

.quiz-invite__label {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.65rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.quiz-invite__title {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--c-text);
}

.quiz-invite__text {
	margin: 0.75rem 0 0;
	max-width: 62ch;
	color: var(--c-text);
}

.quiz-invite__action {
	margin-top: 1.5rem;
}

/* Окно квиза: прокручивается содержимое, а не всё окно целиком — иначе на
   невысоком экране кнопка уходит за нижний край незаметно для посетителя.
   Отрицательные отступы нужны, чтобы полоса прокрутки шла по краю окна, а не
   резала текст по середине. */
.quiz-modal [data-quiz-body] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 calc(-1 * clamp(1.75rem, 4vw, 2.5rem));
	padding: 0 clamp(1.75rem, 4vw, 2.5rem);
}

/* Шкала прохождения */
.quiz__progress {
	margin-top: 1.5rem;
}

.quiz__bar {
	height: 4px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--c-line);
	overflow: hidden;
}

.quiz__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--c-accent);
	transition: width 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.quiz__bar span {
		transition: none;
	}
}

.quiz__counter {
	margin: 0.6rem 0 0;
	font-size: 0.8125rem;
	color: var(--c-muted);
}

/* Шаг. Сброс обязателен: у fieldset и legend свои рамки и отступы от браузера,
   без сброса вопрос уезжает влево и рисуется рамка вокруг вариантов. */
.quiz__step {
	margin: 1.75rem 0 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.quiz__question {
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-text);
}

.quiz__hint {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	color: var(--c-muted);
}

.quiz__options {
	margin-top: 1.25rem;
	display: grid;
	gap: 0.6rem;
}

.quiz__option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.quiz__option:hover {
	border-color: var(--c-text);
}

/*
 * Кружки и галочки рисуем сами. Стандартные при тёмной схеме выходят мутными
 * болотными: accent-color красит только отмеченное состояние, а неотмеченное
 * браузер рисует по своему усмотрению поверх тёмного фона.
 *
 * Цвета берём --c-accent и --c-accent-ink: они одинаковы в обеих схемах,
 * поэтому галочка читается и на светлой, и на тёмной.
 */
.quiz__option input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0.15rem 0 0;
	border: 2px solid var(--c-line);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz__option input[type="checkbox"] {
	border-radius: 6px;
}

.quiz__option:hover input {
	border-color: var(--c-muted);
}

.quiz__option input[type="radio"]:checked {
	border-color: var(--c-accent);
	background: radial-gradient(circle at center, var(--c-accent) 0 5px, transparent 5px);
}

.quiz__option input[type="checkbox"]:checked {
	border-color: var(--c-accent);
	background-color: var(--c-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b1233' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-position: center;
	background-repeat: no-repeat;
}

.quiz__option:has(input:checked) {
	border-color: var(--c-eyebrow);
	background: var(--c-subtle);
}

/* Клавиатура: без этого не видно, на каком варианте находишься. */
.quiz__option:focus-within {
	outline: 2px solid var(--c-eyebrow);
	outline-offset: 2px;
}

.quiz__input {
	width: 100%;
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	color: var(--c-text);
	font: inherit;
}

.quiz__input:focus {
	outline: 2px solid var(--c-eyebrow);
	outline-offset: 1px;
}

.quiz__nav {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.quiz__back,
.quiz__forward {
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--c-text);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.quiz__back:hover,
.quiz__forward:hover {
	border-color: var(--c-text);
	background: var(--c-subtle);
}

.quiz__forward {
	border-color: var(--c-text);
}

.quiz__submit {
	margin: 0;
}

.quiz__status {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--c-muted);
}

.quiz__status.is-error {
	color: #b32d2e;
}

[data-theme="dark"] .quiz__status.is-error {
	color: #ff9d9b;
}

/* --- Экран результата --- */

.quiz-result__price {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--c-text);
}

/* Старую цену прячет общее правило .price-old, поэтому здесь только размер. */
.sis-promo .quiz-result__price .price-old {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 1.125rem;
}

.quiz-result__term,
.quiz-result__host {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	color: var(--c-muted);
}

.quiz-result__notes {
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--c-line);
	list-style: none;
	display: grid;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--c-muted);
}

.quiz-result__note {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	color: var(--c-muted);
}

/* Находки робота */
.quiz-findings {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.quiz-finding {
	padding: 1rem 1.1rem;
	border: 1px solid var(--c-line);
	border-left-width: 3px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
}

.quiz-finding--bad {
	border-left-color: #b32d2e;
}

.quiz-finding--warn {
	border-left-color: #d08700;
}

.quiz-finding--ok,
.quiz-finding--note {
	border-left-color: var(--c-accent);
}

.quiz-finding__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--c-text);
}

.quiz-finding__text {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9375rem;
	color: var(--c-muted);
}

.quiz-result__cta {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--c-line);
}

.quiz-result__cta-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--c-text);
}

.quiz-result__cta-text {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	color: var(--c-muted);
}