/* ══════════════════════════════════════════════════════
   AdsON — секции главной
   Перенос из прототипа v1. Разметка собрана стандартными
   блоками WordPress, поэтому селекторы привязаны к тому,
   что реально выводит редактор (.wp-block-group и т.д.).
   ══════════════════════════════════════════════════════ */

/* ─── Служебная обёртка редактора ────────────────────── */
/* Внутрь каждой группы WordPress кладёт свой div. Из-за него
   сетка видит одного ребёнка вместо колонок. Гасим обёртку,
   не трогая саму разметку — она остаётся штатной. */
.entry-content .wp-block-group__inner-container {
	display: contents;
}

/* ─── Сайт во всю ширину ─────────────────────────────── */
/* Тема зажимает всю страницу в 1280 и центрирует. Нам нужно
   наоборот: секции от края до края, а ширину держит .wrap
   внутри каждой секции — как в прототипе. */
.site.grid-container,
.home .site-content .grid-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Шапка ровно той же ширины и с теми же полями, что секции:
   логотип должен стоять над текстом первого экрана.
   Селектор с id — тема задаёт свой padding позже. */
#masthead .inside-header {
	max-width: var(--max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pad) !important;
	padding-right: var(--pad) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Навигация внутри шапки своих полей не добавляет —
   иначе кнопка не доходит до правого края. */
#masthead .main-navigation,
#masthead .inside-navigation,
#masthead .main-nav,
#masthead .main-nav > ul {
	max-width: 100%;
	padding: 0;
	margin-right: 0;
}

/* Обёртка навигации растягивается на свободное место,
   а меню внутри прижимается к правому краю шапки.
   Только на широком экране: на узком меню сворачивается
   в кнопку и раскладку держит сама тема. */
@media (min-width: 1025px) {
	#masthead .inside-navigation,
	#masthead .main-nav {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 auto;
		width: 100%;
	}
}

/* Тема оставляет поле справа от меню — снимаем его,
   иначе кнопка не встаёт вровень с правым краем секций. */
#masthead .main-nav > ul,
#masthead .main-nav > ul > li:last-child,
#masthead .main-nav > ul > li:last-child > a {
	margin-right: 0 !important;
	padding-right: 0 !important;
}

#masthead .main-nav > ul > li.cta > a {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Тема обкладывает контент полями со всех сторон — из-за них
   первый экран выглядел вставленной карточкой. Отступы дают
   сами секции. */
.site-content,
.one-container .site-content,
.home .inside-article,
.home .site-main,
.home .entry-content {
	padding: 0;
	margin: 0;
}

.home .entry-content > [class*="wp-block-"]:not(:last-child) {
	margin-bottom: 0;
}

/* Шапка лежит поверх контента, поэтому страницам отдаём её
   высоту сверху. Исключение — страницы с первым экраном: он
   держит отступ сам, и без исключения расстояние до заголовка
   на внутренних страницах выходило на 84 пикселя больше,
   чем на главной. */
body:not(.home) .site-content:not(:has(.hero)) {
	padding-top: 84px;
}

/* ─── Общая обёртка секции ───────────────────────────── */
.wrap {
	width: 100%;
	max-width: var(--max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pad);
	padding-right: var(--pad);
}

/* Тема сдвигает все списки вправо на 3em. Нашим спискам
   это не нужно — они выравниваются по левому краю текста. */
.home .entry-content .wp-block-list,
.hero__bullets,
.press__list,
.comp__list,
.magnet__list,
.badges {
	margin-left: 0;
	padding-left: 0;
}

.home .entry-content .wp-block-list li {
	margin-left: 0;
}

/* Черновая цифра — заменить на фактическую перед публикацией */
.draft {
	border-bottom: 1px dashed var(--accent);
	color: var(--accent-soft);
	white-space: nowrap;
}

/* ─── Первый экран ───────────────────────────────────── */
.hero {
	position: relative;
	padding-top: clamp(116px, 13vh, 150px);
	padding-bottom: clamp(56px, 7vw, 96px);
}

/* Контент поднимаем над подсветкой. Селектор идёт по .wrap,
   а не по прямому потомку: служебная обёртка погашена через
   display:contents, и z-index на ней не работает. */
.hero .wrap {
	position: relative;
	z-index: 1;
}

/* Колонки выровнены по верхнему краю: карточки с цифрами
   начинаются на одном уровне с надзаголовком, а не висят
   по центру. */
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.hero__title {
	margin: 22px 0 0;
	font-size: clamp(32px, 4.6vw, 62px);
}

.hero__lead {
	margin-top: 26px;
	max-width: 470px;
}

/* Буллеты собраны обычным списком */
.hero__bullets {
	display: grid;
	gap: 11px;
	margin-top: 26px;
	padding-left: 0;
	list-style: none;
}

.hero__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ink-70);
}

.hero__bullets li::before {
	content: '';
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--accent);
}

.hero__cta {
	margin-top: 38px;
}

.hero__cta-note {
	margin-top: 14px;
	font-size: 15px;
	color: var(--ink-50);
}

/* Ссылка на канал — как в прототипе заказчика: строка акцентным
   цветом со стрелкой в конце, без рамки и без значка. При наведении
   стрелка отъезжает. */
.hero__tg a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	color: var(--accent);
	font-size: 14.5px;
	line-height: 1.4;
	transition: gap .3s var(--ease);
}

.hero__tg a::after {
	content: '→';
	flex: 0 0 auto;
}

.hero__tg a strong {
	font-weight: 600;
}

.hero__tg a:hover {
	gap: 13px;
}

/* На узком экране строка течёт обычным текстом: во flex каждое слово
   становилось отдельной колонкой и ссылка разваливалась на три куска. */
@media (max-width: 720px) {
	.hero__tg a {
		display: inline;
	}

	.hero__tg a::after {
		margin-left: 8px;
	}
}

/* Низ первого экрана — одна полоса под обеими колонками:
   слева кнопка и приписка, справа ссылка на канал.
   Раньше всё это висело столбиком в левой колонке, а справа
   под карточками оставалась пустота. */
.hero__belt {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 18px 32px;
	margin-top: 48px;
}

.hero__belt .hero__tg {
	justify-self: end;
	margin: 0;
}

.hero__belt-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.hero__belt-cta .hero__cta {
	margin: 0;
}

.hero__belt-cta .hero__cta-note {
	max-width: 20ch;
	margin: 0;
	font-size: 13.5px;
}

@media (min-width: 1081px) {
	.hero__belt .hero__tg a {
		white-space: nowrap;
	}
}

@media (max-width: 1080px) {
	.hero__belt {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.hero__belt .hero__tg {
		justify-self: start;
	}
}

@media (max-width: 720px) {
	.hero__belt-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__belt-cta .hero__cta-note {
		max-width: none;
	}
}

/* ─── Коллаж с цифрами справа ────────────────────────── */
/* Верх карточек совпадает с началом заголовка, а не с
   надзаголовком — отступ равен высоте надзаголовка. */
.proof {
	position: relative;
	display: grid;
	gap: 14px;
	margin-top: var(--hero-head);
}

/* Строго равные колонки: у `1fr` минимальная ширина равна содержимому,
   и длинная строка «640 ₽ ×2,4 дороже» распирала левую плитку —
   плитки получались 276 и 207 вместо равных. */
.proof__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.metric {
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.metric__label {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--ink-50);
}

.metric__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.metric__row .metric__delta {
	white-space: nowrap;
}

.metric__row p {
	margin: 0;
}

.metric__value {
	font-family: var(--display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.metric__delta {
	font-size: 12.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 100px;
	background: var(--accent-12);
	color: var(--accent-soft);
	border: 1px solid var(--accent-30);
}

.metric__delta--down {
	background: rgba(120,255,190,.09);
	border-color: rgba(120,255,190,.24);
	color: #8effc4;
}

/* График роста — рисуется фоном, чтобы не мешать правке текста */
/* Оба состояния переключателя одного размера: без этого карточки
   «До нас» и «С нами» отличались на 20 px и блок прыгал при переключении.
   Значения — по самой высокой версии карточки, замерены на боевом. */
.chart {
	padding: 22px 24px 30px;
	min-height: 256px;
}

.proof__row .metric {
	min-height: 182px;
}

@media (max-width: 720px) {
	.chart,
	.proof__row .metric {
		min-height: 0;
	}
}

.chart__plot {
	height: 74px;
	margin-top: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 74' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ff3366' stop-opacity='.28'/%3E%3Cstop offset='100%25' stop-color='%23ff3366' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 62 L50 56 L100 48 L150 39 L200 30 L250 16 L300 6 L300 74 L0 74 Z' fill='url(%23g)'/%3E%3Cpath d='M0 62 L50 56 L100 48 L150 39 L200 30 L250 16 L300 6' fill='none' stroke='%23ff3366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='297' cy='6' r='4' fill='%23fff' stroke='%23ff3366' stroke-width='2.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	/* Не на всю высоту ячейки: сверху и снизу остаётся зазор,
	   иначе тени соседних строк смыкаются в сплошную полосу. */
	background-size: 100% calc(100% - 20px);
	background-position: center;
}

/* Та же линия для состояния «до нас»: почти горизонтальная,
   серая — рост стоял на месте. */
.chart__plot--flat {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 74' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='.1'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 34 L50 37 L100 32 L150 40 L200 36 L250 43 L300 41 L300 74 L0 74 Z' fill='url(%23f)'/%3E%3Cpath d='M0 34 L50 37 L100 32 L150 40 L200 36 L250 43 L300 41' fill='none' stroke='%23ffffff' stroke-opacity='.38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='297' cy='41' r='4' fill='%23201d2b' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2.5'/%3E%3C/svg%3E");
}

/* ─── Переключатель «До нас / С нами» ────────────────── */
/* Кнопки создаёт скрипт: в редакторе их нет, поэтому правка
   текстов не может сломать переключение. Оба состояния лежат
   в разметке блоками и правятся как обычные абзацы. */
.proof__switch {
	display: inline-flex;
	justify-self: start;
	gap: 4px;
	padding: 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 100px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* С переключателем верхний отступ забирает он сам: карточки
   должны остаться там же, где стояли без него. */
.proof.has-switch {
	margin-top: 0;
	grid-template-rows: auto 1fr;
}

.proof__tab {
	min-height: 40px;
	padding: 9px 22px;
	border: 0;
	border-radius: 100px;
	background: transparent;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-50);
	cursor: pointer;
	transition: color .25s var(--ease), background-color .25s var(--ease);
}

.proof__tab:hover {
	color: var(--ink);
}

.proof__tab.is-active {
	background: var(--accent);
	color: #fff;
}

/* Оба состояния занимают одну ячейку сетки — при переключении
   блок не прыгает по высоте, её держит то, что длиннее. */
/* Состояния сменяются только прозрачностью: сдвиг вверх-вниз
   при переключении читался как «прыжок» блока. */
.proof__state {
	display: grid;
	gap: 14px;
	grid-column: 1;
	grid-row: 2;
	opacity: 0;
	visibility: hidden;
	transform: none;
	transition: opacity .2s var(--ease), visibility .2s var(--ease);
}

.proof__state.is-active {
	opacity: 1;
	visibility: visible;
}

/* Плашки-показатели в состоянии «до»: цена выросла — красная,
   роста нет — нейтральная серая. */
.metric__delta--bad {
	background: rgba(255,86,86,.1);
	border-color: rgba(255,86,86,.28);
	color: #ff9a9a;
}

.metric__delta--flat {
	background: rgba(255,255,255,.05);
	border-color: var(--line-2);
	color: var(--ink-50);
}

/* Черновой пунктир внутри плашки не должен красить её текст */
.metric__delta .draft {
	color: inherit;
	border-bottom-color: currentColor;
}

@media (max-width: 860px) {
	.proof__switch {
		margin-top: 40px;
	}
}

/* ─── Строка доверия ─────────────────────────────────── */
.trustline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 0;
	padding: 24px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
	color: var(--ink-50);
}

.trustline p {
	margin: 0;
	font-size: 14.5px;
	color: var(--ink-50);
}

/* Точка-разделитель между пунктами, как в прототипе */
.trustline p + p::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 22px;
	border-radius: 50%;
	background: var(--ink-35);
	vertical-align: middle;
}

.trustline b,
.trustline strong {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

/* На узком экране пункты идут столбиком, точки не нужны */
@media (max-width: 720px) {
	.trustline {
		display: grid;
		gap: 10px;
	}

	.trustline p + p::before {
		display: none;
	}
}

/* ─── Лента СМИ ──────────────────────────────────────── */
.press {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 34px;
	padding: 30px 0;
}

.press__label {
	margin: 0;
	height: 17px;
	line-height: 17px;
	font-size: 15px;
	color: var(--ink-35);
	white-space: nowrap;
	align-self: center;
}

.press__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 34px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

/* Логотипы приводим к одному ВИДИМОМУ росту букв и делаем
   белыми. Высота файла тут не годится: внутри у всех разный
   масштаб шрифта и разное количество пустоты, поэтому
   одинаковая height даёт буквы от 10 до 22 пикселей. */
.press__list li {
	display: flex;
	align-items: center;
	line-height: 0;
}

.press__list img {
	height: 17px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .5;
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.press__list a {
	display: block;
	line-height: 0;
}

.press__list img:hover,
.press__list a:hover img {
	opacity: 1;
	transform: scale(1.08);
}

/* Пока логотипа нет — название набирается тем же ростом */
.press__list li.press__text {
	font-family: var(--display);
	height: 17px;
	font-size: 17px;
	line-height: 17px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: rgba(255,255,255,.5);
	transition: color .3s var(--ease), transform .3s var(--ease);
}

.press__list li.press__text:hover {
	color: var(--ink);
	transform: scale(1.08);
}

@media (max-width: 720px) {
	.press__list img,
	.press__list li.press__text { height: 15px; font-size: 15px; line-height: 15px; }
	.press__list { gap: 14px 24px; }
}

/* ─── Шапка секции ───────────────────────────────────── */
.section-head {
	margin-bottom: clamp(36px, 4vw, 64px);
	max-width: 720px;
}

.section-head .eyebrow {
	margin-bottom: 18px;
}

.section-head h2 {
	margin: 0;
}

.section-head .lead {
	margin-top: 18px;
	max-width: 560px;
}

/* ─── Компетенции: поток от трафика до продаж ────────── */
/* Пять узлов в ряд: четыре группы услуг и итог. Над карточками —
   линия с бегунком, узел загорается ровно в момент его прохода.
   Узлы и линия нарисованы в CSS, в разметке только группы и списки. */
.comp {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	padding-top: 76px;
	counter-reset: comp;

	/* Концы линии = центры крайних колонок. Иначе бегунок проходит
	   мимо узлов: промежутки между колонками сдвигают их центры. */
	--comp-gap: 16px;
	--comp-start: calc((100% - 4 * var(--comp-gap)) / 10);
	--comp-end: calc(100% - (100% - 4 * var(--comp-gap)) / 10);
}

.comp::before {
	content: '';
	position: absolute;
	left: var(--comp-start);
	right: var(--comp-start);
	top: 39px;
	height: 1px;
	background: linear-gradient(90deg, rgba(255,51,102,.15), rgba(255,51,102,.55), rgba(255,51,102,.15));
}

.comp::after {
	content: '';
	position: absolute;
	top: 34px;
	left: var(--comp-start);
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 18px 4px rgba(255,51,102,.55);
	animation: comp-run 6.5s linear infinite;
}

@keyframes comp-run {
	0%   { left: var(--comp-start); opacity: 0; }
	2%   { opacity: 1; }
	99%  { opacity: 1; }
	100% { left: var(--comp-end); opacity: 0; }
}

.comp__col,
.comp__out {
	position: relative;
	counter-increment: comp;
	padding: 22px 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
	            background-color .35s var(--ease);
}

.comp__out {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 8px;
	text-align: center;
	border-color: var(--accent-30);
	background: radial-gradient(120% 130% at 50% 0%, rgba(255,51,102,.26), rgba(255,51,102,.07) 74%);
}

/* Узлы потока */
.comp__col::before,
.comp__out::before {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-family: var(--display);
	font-weight: 700;
	animation-duration: 6.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: var(--delay, 0s);
}

.comp__col::before {
	content: counter(comp, decimal-leading-zero);
	border: 1px solid var(--accent-30);
	background: var(--bg);
	font-size: 14px;
	color: var(--accent-2);
	animation-name: comp-glow;
}

.comp__out::before {
	content: '₽';
	border: 1px solid var(--accent);
	background: var(--accent);
	box-shadow: 0 0 0 6px rgba(255,51,102,.16);
	font-size: 15px;
	color: #fff;
	animation-name: comp-glow-out;
}

/* Редактор кладёт внутрь группы служебную обёртку, поэтому узлы
   считаются среди своих соседей, а не как прямые дети .comp. */
.comp__col:nth-of-type(2) { --delay: 1.625s; }
.comp__col:nth-of-type(3) { --delay: 3.25s; }
.comp__col:nth-of-type(4) { --delay: 4.875s; }
.comp__out { --delay: 6.45s; }

@keyframes comp-glow {
	0% {
		border-color: var(--accent);
		background: var(--accent);
		color: #fff;
		box-shadow: 0 0 0 8px rgba(255,51,102,.2), 0 0 28px rgba(255,51,102,.7);
	}
	9%, 100% {
		border-color: var(--accent-30);
		background: var(--bg);
		color: var(--accent-2);
		box-shadow: none;
	}
}

@keyframes comp-glow-out {
	0%       { box-shadow: 0 0 0 11px rgba(255,51,102,.28), 0 0 34px rgba(255,51,102,.85); }
	9%, 100% { box-shadow: 0 0 0 6px rgba(255,51,102,.16); }
}

.comp__title {
	margin: 0 0 14px;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
}

.comp__out__title {
	margin: 0;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

.comp__out__note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--ink-50);
}

.comp__list {
	display: grid;
	gap: 9px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.comp__list li {
	border-bottom: none;
}

.comp__list a {
	display: block;
	padding: 0;
	font-size: 13.8px;
	line-height: 1.3;
	color: var(--ink-50);
	transition: color .22s var(--ease);
}

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

/* Плашка про AI и кнопка «Все услуги» — такая же карточка,
   как плитки потока: акцент в блоке остаётся только у итога. */
.ai-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 40px);
	margin-top: 20px;
	padding: 18px 18px 20px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-size: 15px;
	color: var(--ink-70);
}

.ai-note p {
	flex: 1 1 auto;
	margin: 0;
	max-width: 880px;
	color: var(--ink-70);
}

.ai-note__cta {
	flex: 0 0 auto;
	margin: 0;
}

/* Средние экраны: плитки по две в ряд, узел встаёт внутрь карточки,
   линия и бегунок убираются — им негде идти. */
@media (max-width: 1080px) {
	.comp {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: 0;
	}

	.comp::before,
	.comp::after { display: none; }

	.comp__out { grid-column: span 2; }

	.comp__col::before,
	.comp__out::before {
		position: static;
		transform: none;
		margin: 0 0 14px;
		width: 42px;
		height: 42px;
		animation: none;
	}

	.comp__out::before { margin-bottom: 10px; }
}

/* Телефон: цепочка сверху вниз, линия слева, бегунок идёт по ней.
   Боковой прокрутки нет — ни одна плитка не прячется. */
@media (max-width: 720px) {
	.comp {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.comp::before {
		display: block;
		left: 19px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg,
			rgba(255,51,102,0) 0%,
			rgba(255,51,102,.5) 20%,
			rgba(255,51,102,.18) 100%);
	}

	.comp::after {
		display: block;
		top: var(--start, 31px);
		left: 20px;
		animation-name: comp-run-y;
	}

	@keyframes comp-run-y {
		0%   { transform: translateY(0); opacity: 0; }
		2%   { opacity: 1; }
		99%  { opacity: 1; }
		100% { transform: translateY(var(--path, 620px)); opacity: 0; }
	}

	.comp__col,
	.comp__out {
		margin-left: 54px;
		margin-bottom: 16px;
	}

	.comp__out {
		grid-column: span 1;
		justify-items: start;
		text-align: left;
		margin-bottom: 0;
	}

	.comp__col::before,
	.comp__out::before {
		position: absolute;
		top: 50%;
		left: -54px;
		transform: translateY(-50%);
		margin: 0;
		width: 40px;
		height: 40px;
		font-size: 13px;
		animation-duration: 6.5s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;

		/* задержку возвращаем явно: на среднем экране анимация гасится
		   через `animation: none`, а это сокращение обнуляет и её —
		   без этой строки все узлы вспыхивали разом */
		animation-delay: var(--delay, 0s);
	}

	.comp__col::before { animation-name: comp-glow; }
	.comp__out::before { animation-name: comp-glow-out; }

	.comp__list a { font-size: 14.5px; }

	.comp__title,
	.comp__out__title { font-size: 16.5px; }

	/* Плашка встаёт в ту же колонку, что карточки цепочки */
	.ai-note {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-left: 54px;
		padding: 16px 16px 18px;
	}
	.ai-note {
		position: relative;
	}

	.ai-note::before {
		content: '';
		position: absolute;
		left: -35px;
		top: -17px;
		bottom: 0;
		width: 1px;
		background: linear-gradient(180deg, rgba(255,51,102,.18), rgba(255,51,102,0));
	}

	.ai-note .wp-block-button,
	.ai-note .wp-block-button__link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.comp::after { animation: none; opacity: 0; }

	.comp__col::before,
	.comp__out::before { animation: none; }
}

/* ─── Адаптив ────────────────────────────────────────── */
@media (max-width: 1080px) {
	.hero__grid { grid-template-columns: 1fr; }
	.proof { margin-top: 12px; }
}

@media (max-width: 720px) {
	.proof__row { grid-template-columns: 1fr; }

	.hero__cta .wp-block-button,
	.hero__cta .wp-block-button__link { width: 100%; }

	/* На узком экране длинная надпись должна переноситься,
	   иначе кнопка распирает страницу вбок. */
	.wp-block-button__link,
	button,
	input[type="submit"] {
		white-space: normal;
		text-align: center;
		line-height: 1.35;
		padding: 16px 24px;
		min-height: 0;
	}
}

/* ─── Кейсы ──────────────────────────────────────────── */
.cases-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}

.case-card {
	display: flex;
	flex-direction: column;
	padding: var(--card-pad);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .35s var(--ease), background-color .35s var(--ease);
}

.case-card__client {
	margin: 0;
	font-family: var(--display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--ink);
}

.case-card__niche {
	margin: 7px 0 0;
	font-size: 15px;
	color: var(--ink-35);
}

.case-card__text {
	margin: 16px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-50);
}

.case-card__nums {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 20px;
}

.case-card__nums p {
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-size: 13px;
	color: var(--ink-70);
}

.case-card__nums p strong {
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ink);
}

.case-card__nums p.kpi--accent {
	border-color: var(--accent-30);
	background: var(--accent-12);
	color: var(--accent-soft);
}

.case-card__nums p.kpi--accent strong {
	color: var(--accent-soft);
}

.case-card__link {
	margin: auto 0 0;
	padding-top: 20px;
	font-size: 14px;
	font-weight: 600;
}

/* ─── Таблица ниш ────────────────────────────────────── */
.niches {
	margin-top: clamp(36px, 4vw, 56px);
}

.niches__title {
	margin: 0;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ink);
}

.niches__hint {
	margin: 8px 0 20px;
	font-size: 15px;
	color: var(--ink-35);
	max-width: 560px;
}

/* Таблицы собраны штатным блоком таблицы */
.ntable table,
.vs table {
	width: 100%;
	border-collapse: collapse;
}

.ntable,
.vs {
	overflow-x: auto;
}

.ntable table {
	min-width: 620px;
}

.ntable th {
	padding: 12px 14px;
	text-align: right;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-35);
	border: none;
	border-bottom: 1px solid var(--line-2);
	white-space: nowrap;
}

.ntable th:first-child,
.ntable td:first-child {
	text-align: left;
}

.ntable td {
	padding: 13px 14px;
	text-align: right;
	font-size: 14.5px;
	color: var(--ink-70);
	border: none;
	border-bottom: 1px solid var(--line);
	font-variant-numeric: tabular-nums;
}

.ntable td:first-child {
	color: var(--ink);
	font-weight: 500;
}

/* Чередование строк, чтобы длинная таблица читалась */
.ntable tbody tr:nth-child(odd) {
	background: rgba(255,255,255,.015);
}

.ntable tbody tr {
	transition: background-color .25s var(--ease);
}

.ntable tbody tr:hover {
	background: var(--surface-2);
}

/* Вес ниши показываем не линией, а еле заметной заливкой
   ячейки справа налево. Доля приходит из скрипта как --bar. */
.ntable td.has-bar {
	background-image: linear-gradient(
		to left,
		rgba(255,51,102,.14),
		rgba(255,51,102,0) calc(var(--bar, 0%) * .5)
	);
	background-repeat: no-repeat;
	/* Не на всю высоту ячейки: сверху и снизу остаётся зазор,
	   иначе тени соседних строк смыкаются в сплошную полосу. */
	background-size: 100% calc(100% - 20px);
	background-position: center;
}

.ntable tbody tr:hover td.has-bar {
	background-image: linear-gradient(
		to left,
		rgba(255,51,102,.24),
		rgba(255,51,102,0) calc(var(--bar, 0%) * .5)
	);
}

/* Узкий экран: строка ниши разворачивается вниз — название сверху,
   под ним четыре показателя парами. Вбок таблица больше не едет,
   поэтому и «липкая» первая колонка не нужна. */
@media (max-width: 860px) {
	.ntable {
		overflow-x: visible;
	}

	.ntable table {
		display: block;
		min-width: 0;
	}

	.ntable thead {
		display: none;
	}

	.ntable tbody {
		display: block;
		border-top: 1px solid var(--line-2);
	}

	.ntable tbody tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 14px;
		padding: 16px 0 14px;
		border-bottom: 1px solid var(--line);
		background: none;
	}

	.ntable tbody tr:nth-child(odd) {
		background: none;
	}

	.ntable td {
		display: block;
		padding: 10px 0 0;
		text-align: left;
		border: none;
		font-size: 16px;
		font-weight: 500;
		color: var(--ink);
	}

	.ntable td:first-child {
		grid-column: 1 / -1;
		padding: 0;
		font-size: 15.5px;
		font-weight: 600;
		line-height: 1.3;
	}

	/* подпись столбца подставляется скриптом из шапки таблицы */
	.ntable td[data-col]::before {
		content: attr(data-col);
		display: block;
		margin-bottom: 1px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--ink-35);
	}

	/* Вес ниши: вместо заливки ячейки — полоска под числом, её длина
	   и есть доля. В узкой колонке заливка читалась как обрезанный
	   прямоугольник. */
	.ntable td.has-bar {
		position: relative;
		background-image: none;
		padding-bottom: 8px;
	}

	.ntable td.has-bar::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: var(--bar, 0%);
		height: 3px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--accent), rgba(255,51,102,.25));
	}
}

.ntable tbody tr.is-hidden {
	display: none;
}

/* Ряд под таблицей: обе кнопки вместе, по центру */
.niches__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
}

/* ─── Лид-магнит ─────────────────────────────────────── */
.magnet {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(30px, 4vw, 64px);
	align-items: start;
	padding: clamp(32px, 4vw, 56px);
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	background: linear-gradient(140deg, var(--bg-3), var(--bg-2) 62%);
	overflow: hidden;
}

.magnet::before {
	content: '';
	position: absolute;
	right: -12%;
	top: -44%;
	width: 48%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,51,102,.18), transparent 66%);
	pointer-events: none;
}

/* Заголовок лид-магнита живёт по общему стандарту: надзаголовок → H2
   двенадцать, H2 → лид шестнадцать. Иначе форма справа, привязанная
   к --hero-head, встаёт мимо линии заголовка. */
.magnet h2 {
	margin: var(--sp-2) 0 var(--sp-3);
}

/* Список файлов идёт под обеими колонками: каждый файл — своя
   карточка одинаковой высоты, по три в ряд. Раньше это был
   столбец строк через тонкие линии — читался серой простынёй. */
.magnet__list {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding-left: 0;
	list-style: none;
}

.magnet__list li {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent-30);
	border-radius: var(--r);
	background: var(--surface);
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.magnet__list li:hover {
	border-color: var(--accent-30);
	border-left-color: var(--accent);
	background: var(--surface-2);
	box-shadow: -6px 0 22px -10px rgba(255,51,102,.8);
}

.magnet__list li strong {
	display: block;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.3;
	color: var(--ink);
}

.magnet__list .desc {
	display: block;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-50);
}

.magnet__tag {
	display: inline-grid;
	place-items: center;
	justify-self: start;
	padding: 5px 11px;
	border-radius: 7px;
	border: 1px solid var(--accent-30);
	background: var(--accent-12);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--accent-2);
}

@media (max-width: 1080px) {
	.magnet__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.magnet__list { grid-template-columns: minmax(0, 1fr); }
}

.magnet__note {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-35);
}

/* ─── Сравнение с другими ────────────────────────────── */
.claim {
	padding: 26px 30px;
	margin-bottom: 28px;
	border-left: 2px solid var(--accent);
	background: var(--surface);
	border-radius: 0 var(--r) var(--r) 0;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.55;
	color: var(--ink-70);
}

.vs table {
	min-width: 640px;
}

.vs th {
	padding: 18px 22px;
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-50);
	border: none;
	border-bottom: 1px solid var(--line-2);
	vertical-align: bottom;
}

.vs th:first-child {
	width: 27%;
	font-weight: 400;
	color: var(--ink-35);
}

.vs th:nth-child(2) {
	font-family: var(--display);
	font-size: 15px;
	letter-spacing: -.02em;
	color: var(--accent);
}

.vs td {
	padding: 17px 22px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink-50);
	border: none;
	border-bottom: 1px solid var(--line);
}

.vs td:first-child {
	color: var(--ink);
	font-weight: 500;
}

/* Своя колонка выделена сплошной подложкой на всю высоту
   таблицы, со скруглением сверху и снизу — читается как
   отдельная карточка внутри таблицы, а не как заливка ячеек. */
.vs td:nth-child(2) {
	color: var(--ink);
	background: var(--accent-12);
	font-weight: 500;
	box-shadow: inset 1px 0 0 var(--accent-30), inset -1px 0 0 var(--accent-30);
}

.vs th:nth-child(2) {
	background: var(--accent-12);
	border-radius: var(--r) var(--r) 0 0;
	box-shadow: inset 1px 0 0 var(--accent-30), inset -1px 0 0 var(--accent-30),
	            inset 0 1px 0 var(--accent-30);
}

.vs tbody tr:last-child td:nth-child(2) {
	border-radius: 0 0 var(--r) var(--r);
	box-shadow: inset 1px 0 0 var(--accent-30), inset -1px 0 0 var(--accent-30),
	            inset 0 -1px 0 var(--accent-30);
}

/* Узкий экран: та же таблица, только строки разворачиваются вниз —
   название строки сверху, под ним пары «колонка — значение».
   Подложка своей колонки и линии сохраняются, вбок ничего не едет.
   Порог 860, а не 720: на планшете в 768 таблица ещё уезжала. */
@media (max-width: 860px) {
	.vs {
		overflow-x: visible;
	}

	.vs table {
		display: block;
		min-width: 0;
	}

	.vs thead {
		display: none;
	}

	.vs tbody {
		display: block;
		border-top: 1px solid var(--line-2);
	}

	.vs tbody tr {
		display: block;
		padding: 18px 0 20px;
		border-bottom: 1px solid var(--line-2);
	}

	.vs td {
		display: grid;
		grid-template-columns: 42% minmax(0, 1fr);
		align-items: baseline;
		gap: 14px;
		padding: 9px 0;
		border: none;
		font-size: 15px;
		line-height: 1.4;
	}

	.vs td:first-child {
		display: block;
		padding: 0 0 10px;
		font-size: 15.5px;
		font-weight: 600;
		color: var(--ink);
	}

	/* подпись столбца подставляется скриптом из шапки таблицы */
	.vs td[data-col]::before {
		content: attr(data-col);
		font-size: 13.5px;
		color: var(--ink-35);
	}

	.vs td:nth-child(2) {
		padding: 11px 14px;
		border-radius: 10px;
		background: var(--accent-12);
		box-shadow: inset 1px 0 0 var(--accent-30), inset -1px 0 0 var(--accent-30),
		            inset 0 1px 0 var(--accent-30), inset 0 -1px 0 var(--accent-30);
		color: var(--ink);
		font-weight: 500;
	}

	.vs td:nth-child(2)::before {
		font-family: var(--display);
		font-size: 12.5px;
		letter-spacing: -.01em;
		color: var(--accent);
	}

	.vs tbody tr:last-child td:nth-child(2) {
		border-radius: 10px;
	}
}

/* ─── Отрасли ────────────────────────────────────────── */
.ind {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* Левый край подкрашен акцентом и загорается при наведении —
   тот же приём, что у карточек в «Папке собственника». */
.ind__item {
	padding: 24px 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent-30);
	border-radius: var(--r);
	transition: border-color .28s var(--ease), background-color .28s var(--ease),
	            box-shadow .28s var(--ease);
}


.ind__name {
	margin: 0;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.ind__name a {
	color: var(--ink);
}

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

/* Последняя ячейка сетки — переход ко всем отраслям.
   Оформлена как обычная плитка, чтобы сетка была ровной. */
.ind__more {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	border-style: dashed;
	border-color: var(--line-2);
	border-left-color: var(--accent-30);
	background: transparent;
}

.ind__more-link {
	margin: 0;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.ind__more-link a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--accent);
}

.ind__more-link a::after {
	content: '→';
	transition: transform .3s var(--ease);
}

.ind__more:hover .ind__more-link a::after {
	transform: translateX(5px);
}

.ind__more-note {
	margin: 0;
	font-size: 15px;
	color: var(--ink-35);
}

.ind__what {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-50);
}

/* ─── Шаги работы ────────────────────────────────────── */
.steps {
	display: grid;

	/* Все шаги одного размера: под каждым номером одинаковое место
	   под текст. Владелец 01.10.2026. */
	grid-auto-rows: 1fr;
}

.step {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(20px, 3vw, 48px);
	padding: clamp(24px, 3vw, 34px) 0;
	border-top: 1px solid var(--line);

	/* Номер, заголовок и описание начинаются на одной линии.
	   Центрирование каждого по себе разводило их: в шаге с коротким
	   заголовком и длинным описанием текст справа начинался выше
	   заголовка на 10 px. */
	align-items: start;
}

.step:last-child {
	border-bottom: 1px solid var(--line);
}

.step__n {
	margin: 0;

	/* Без этого бокс цифры выше её самой на 25 px (наследуется
	   межстрочный 1.6) и номер визуально проваливается вниз. */
	line-height: 1;
	font-family: var(--display);
	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 700;
	color: var(--ink-35);
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
	transition: color .35s var(--ease);
}

.step:hover .step__n {
	color: var(--accent);
}

.step h3 {
	margin: 0;
}

.step__extra {
	margin: 14px 0 0;
	font-size: 15px;
	color: var(--accent-soft);
}

.step__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-50);
}

/* ─── Гарантии ───────────────────────────────────────── */
.guar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.guar__item {
	padding: 28px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.guar__item--first {
	grid-column: span 2;
	border-color: var(--accent-30);
	background: var(--accent-12);
}

.guar__n {
	margin: 0;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	color: var(--accent);
}

.guar__t {
	margin: 12px 0 0;
	font-family: var(--display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

.guar__d {
	margin: 10px 0 0;
	font-size: 14.2px;
	line-height: 1.55;
	color: var(--ink-50);
}

/* Последняя ячейка — переход к договору, тем же приёмом,
   что и «Все отрасли»: не висящая кнопка, а плитка. */
.guar__more {
	grid-column: span 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	border-style: dashed;
	border-color: var(--line-2);
	border-left-color: var(--accent-30);
	background: transparent;
}

.guar__more-link {
	margin: 0;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.guar__more-link a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--accent);
}

.guar__more-link a::after {
	content: '↓';
	transition: transform .3s var(--ease);
}

.guar__more:hover .guar__more-link a::after {
	transform: translateY(3px);
}

.guar__more-note {
	margin: 0;
	font-size: 15px;
	color: var(--ink-35);
}

@media (max-width: 720px) {
	.guar__more {
		grid-column: span 1;
	}
}

/* ─── Эксперт ────────────────────────────────────────── */
/* Собран в карточку, как остальные блоки страницы, иначе
   висит в пустоте, а кнопки липнут к тексту. */
.expert {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: clamp(28px, 3.4vw, 52px);
	align-items: center;
	padding: clamp(28px, 3vw, 44px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
	            background-color .35s var(--ease);
}

.expert:hover {
	border-color: var(--accent-30);
	background-color: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28),
	            inset 0 0 12px -6px rgba(255,51,102,.35);
}

.expert__photo {
	margin: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -.04em;
	color: #fff;
	background: linear-gradient(140deg, var(--accent), #7a3bff);
}

.expert__text {
	margin: 0;
	font-size: clamp(15px, 1.25vw, 17px);
	line-height: 1.65;
	color: var(--ink-50);
}

.expert__text strong {
	color: var(--ink);
	font-weight: 600;
}

/* Кнопки не липнут к тексту */
.expert__cta {
	margin-top: clamp(22px, 2.2vw, 30px);
	gap: 12px;
}

/* ─── Партнёры ───────────────────────────────────────── */
.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.badges li {
	padding: 13px 22px;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-size: 14px;
	color: var(--ink-70);
	background: var(--surface);
}

/* ─── Команда ────────────────────────────────────────── */
.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.member {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.member__ava {
	margin: 0;
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(140deg, var(--accent), #7a3bff);
}

.member__name {
	margin: 0;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

.member__role {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--ink-35);
}

/* ─── Логотипы и отзывы ──────────────────────────────── */
.logos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.logos p {
	margin: 0;
	aspect-ratio: 2.4 / 1;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	font-size: 15px;
	color: var(--ink-35);
	text-align: center;
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}

.review {
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.review__ph {
	margin: 0 0 16px;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	border: 1px dashed var(--line-2);
	display: grid;
	place-items: center;
	font-size: 15px;
	color: var(--ink-35);
}

.review__name {
	margin: 0;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

.review__role {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--ink-35);
}

/* ─── Вопросы и ответы ───────────────────────────────── */
/* Собраны штатным блоком «Детали» */
.faq {
	border-top: 1px solid var(--line);
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--display);
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.3;
	color: var(--ink);
	transition: color .25s var(--ease);
}

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

.faq summary:hover {
	color: var(--accent);
}

.faq summary::after {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	background:
		linear-gradient(var(--accent), var(--accent)) center/14px 1.5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) center/1.5px 14px no-repeat;
	transition: transform .3s var(--ease);
}

.faq details[open] summary::after {
	transform: rotate(90deg);
}

.faq details p {
	padding-bottom: 24px;
	max-width: 760px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-50);
}

/* ─── Контакты ───────────────────────────────────────── */
/* Слева заголовок и контакты, справа форма — вровень,
   от одной верхней линии. */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: start;
}

.contact-grid .section-head {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.contact__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}

.contact__row:first-child {
	border-top: 1px solid var(--line);
}

.contact__row p {
	margin: 0;
}

.contact__key {
	font-size: 15px;
	color: var(--ink-35);
	min-width: 96px;
	padding-top: 3px;
}

.contact__val {
	font-size: 16px;
	color: var(--ink);
}

.contact__val--big {
	font-family: var(--display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	letter-spacing: -.02em;
}

/* ─── Формы ──────────────────────────────────────────── */
/* Карточка не тянется во всю высоту колонки и читается как
   отдельный блок, а не как пустая рамка. */
.form-box {
	align-self: start;
	margin-top: 0;
	padding: clamp(26px, 2.6vw, 34px);
	border-radius: var(--r-lg);
	border: 1px solid var(--line-2);
	background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
	box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}

/* Форма начинается ровно на уровне заголовка, а не надзаголовка.
   Там, где надзаголовка нет (лид-магнит на страницах услуг),
   опускать форму не на что — берётся только отступ самого заголовка. */
.contact-grid .form-box,
.magnet .form-box {
	margin-top: var(--hero-head);
}

.magnet:not(:has(.eyebrow)) .form-box,
.contact-grid:not(:has(.eyebrow)) .form-box {
	margin-top: var(--sp-2);
}

/* Обе колонки заканчиваются на одной линии: форма тянется до низа
   контактов, а её поля расходятся на освободившуюся высоту. */
@media (min-width: 1081px) {
	.contact-grid {
		align-items: stretch;
	}

	.contact-grid .form-box {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}

	.contact-grid .form-box form {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}


.form-box__title {
	margin: 0 0 18px;
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.15;
}

.form-box__note {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--ink-50);
}

.form-box .wpcf7-form p {
	margin: 0 0 14px;
}

.form-box input[type="submit"],
.form-box .wpcf7-submit {
	width: 100%;
}

.form-box .wpcf7-list-item {
	margin: 0;
}

.form-box .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-35);
}

.form-box .wpcf7-not-valid-tip {
	font-size: 12.5px;
	color: var(--accent);
}

.form-box .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	font-size: 13.5px;
	color: var(--ink-70);
}

/* ─── Подвал ─────────────────────────────────────────── */
.site-footer .footer-widgets {
	border-top: 1px solid var(--line);
	padding: clamp(44px, 5vw, 72px) 0 24px;
	background-color: var(--bg-2);
}

/* Колонки стоят по той же сетке, что и секции страницы.
   Селектор с id — тема растягивает контейнер подвала. */
#footer-widgets .footer-widgets-container {
	max-width: 100%;
	padding: 0;
}

#footer-widgets .inside-footer-widgets {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 64px);
	max-width: var(--max);
	margin: 0 auto;
	padding-left: var(--pad);
	padding-right: var(--pad);
}

#footer-widgets .widget {
	margin: 0;
	padding: 0;
	font-size: 15px;
}

.site-footer .widget-title {
	margin-bottom: 20px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-35);
}

.site-footer .wp-block-list {
	display: grid;
	gap: 12px;
	padding-left: 0;
	list-style: none;
	font-size: 14.5px;
}

.site-footer .wp-block-list a {
	color: var(--ink-70);
}

.site-footer .wp-block-list a:hover {
	color: var(--accent);
}

.footer__brand {
	margin: 0;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--ink);
}

.footer__desc {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-50);
	max-width: 320px;
}

/* Реквизиты — по той же сетке, слева, под колонками */
.site-info {
	padding: 26px 0 34px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-35);
	background-color: var(--bg-2);
	border-top: 1px solid var(--line);
}

.site-info .inside-site-info {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--pad);
	text-align: left;
}

.site-info .copyright-bar {
	padding: 0;
}

.site-info p {
	margin: 0;
	font-size: 15px;
	color: var(--ink-35);
}

/* ─── Адаптив секций ─────────────────────────────────── */
@media (max-width: 1080px) {
	.cases-grid,
	.ind,
	.reviews,
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.magnet { grid-template-columns: 1fr; }
	.logos { grid-template-columns: repeat(3, 1fr); }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.expert { grid-template-columns: 120px minmax(0, 1fr); }
	.expert__photo { font-size: 32px; }

	/* Шаги на узком экране. Прежняя раскладка ставила номер и заголовок
	   в одну строку сетки, а описание — во вторую: высоту первой строки
	   задавала крупная цифра, и между заголовком и описанием зияла
	   пустота в 73 px. Теперь номер уходит в левое поле и встаёт по
	   центру шага, а заголовок с описанием идут подряд. */
	.step {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		gap: var(--sp-1);
		padding: 0 0 0 84px;
		border-top: 0;
	}

	.step:last-child { border-bottom: 0; }

	.steps { row-gap: var(--sp-5); }

	.step__n {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		display: grid;
		place-items: center;
		width: 62px;
		color: rgba(255, 255, 255, .14);
	}

	.step__desc { grid-column: auto; }

	/* Нить между номерами: два отрезка, цифра остаётся в разрыве.
	   Сплошную линию с подложкой под цифрой использовать нельзя —
	   подложка видна на подсвеченных участках фона. */
	.step::before,
	.step::after {
		content: '';
		position: absolute;
		left: 30px;
		width: 1px;
		background: rgba(255, 51, 102, .22);
	}

	.step::before { top: 0; height: calc(50% - 38px); }
	.step::after { top: calc(50% + 38px); bottom: calc(var(--sp-5) * -1); }
	.step:first-child::before { display: none; }
	.step:last-child::after { display: none; }
	/* Селектор с id: базовое правило подвала задано через #footer-widgets,
	   и правило с одними классами его не перебивало — на телефоне подвал
	   оставался в три колонки и правая уезжала за экран. */
	#footer-widgets .inside-footer-widgets { grid-template-columns: 1fr 1fr; }
}

/* На телефоне цифра крупнее: она держит ритм блока вместо линий. */
@media (max-width: 720px) {
	.step__n { font-size: 46px; }
}

@media (max-width: 720px) {
	.guar,
	.team-grid { grid-template-columns: 1fr; }
	.guar__item--first { grid-column: span 1; }
	.logos { grid-template-columns: repeat(2, 1fr); }
	.expert { grid-template-columns: 1fr; }
	.expert__photo { width: 110px; }
	#footer-widgets .inside-footer-widgets { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Появление при прокрутке ────────────────────────── */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ─── Формы сайта ────────────────────────────────────── */
.adson-form .field {
	margin: 0 0 12px;
}

.adson-form .field input {
	width: 100%;
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(0,0,0,.28);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.adson-form .field input::placeholder {
	color: var(--ink-35);
}

.adson-form .field input:focus {
	outline: none;
	border-color: var(--accent-30);
	background: rgba(0,0,0,.36);
}

.adson-form .form__agree {
	display: flex;
	gap: 11px;
	margin: 16px 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-35);
}

.adson-form .form__agree input {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 1px;
	accent-color: var(--accent);
}

.adson-form .form__agree a {
	color: var(--ink-50);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.adson-form button {
	width: 100%;
}

.form__done {
	margin: 16px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--accent-30);
	border-radius: var(--r);
	background: var(--accent-12);
	font-size: 15px;
	color: var(--accent-soft);
}

/* Подвал: тема раскладывает виджеты своей float-сеткой,
   из-за неё колонки сплющивались. Сбрасываем и раскладываем
   сами. */
.site-footer .footer-widgets .widget,
.site-footer .footer-widgets .grid-33,
.site-footer .footer-widgets .widget-area {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}

.site-footer .footer-widgets-container {
	max-width: 100%;
	padding: 0;
}


/* ─── Наведение на карточки ──────────────────────────── */
/* Один эффект на все блоки с рамкой: фон чуть светлеет,
   рамка розовеет, по контуру идёт мягкое свечение. */
.comp__col,
.case-card,
.ind__item,
.guar__item,
.member,
.review,
.metric,
.logos p,
.badges li {
	transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
	            background-color .35s var(--ease);
}

.comp__col:hover,
.case-card:hover,
.ind__item:hover,
.guar__item:hover,
.member:hover,
.review:hover,
.metric:hover,
.logos p:hover,
.badges li:hover {
	border-color: var(--accent-30);
	background-color: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28),
	            inset 0 0 12px -6px rgba(255,51,102,.35);
}

/* У первой гарантии свой акцентный фон — при наведении
   он усиливается, а не заменяется. */
.guar__item--first:hover {
	background-color: rgba(255,51,102,.18);
	border-color: var(--accent);
}

/* ─── Текст кейса ────────────────────────────────────── */
/* Колонка уже общей ширины секции: длинные строки на 1280
   пикселях читать невозможно. */
.article {
	max-width: 780px;
}

.article h2 {
	margin: clamp(40px, 4vw, 64px) 0 18px;
	font-size: clamp(24px, 2.6vw, 34px);
}

.article h3 {
	margin: 34px 0 12px;
	color: var(--accent-soft);
}

.article p {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.65;
}

.article ul {
	display: grid;
	gap: 10px;
	margin: 0 0 22px;
	padding-left: 0;
	list-style: none;
}

.article li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-left: 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--ink-70);
}

.article li::before {
	content: '';
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-top: 10px;
	border-radius: 50%;
	background: var(--accent);
}

/* Скриншоты из кейса — во всю ширину колонки, с рамкой */
.case-shot {
	margin: 28px 0 32px;
}

.case-shot img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
}

/* Форма прямо в первом экране страницы кейса: слева текст,
   справа захват. Верх формы совпадает с надзаголовком. */
.hero--inner .hero__grid {
	align-items: start;
}

/* Форма кейса тоже стоит вровень с H1: у кейсов надзаголовок
   короче, поэтому смещение считается от той же переменной. */
.hero__form {
	margin-top: 0;
}

/* Колонка с текстом здесь уже, чем на главной: крупный кегль
   рвёт заголовок на восемь строк. */
.hero--inner .hero__title {
	max-width: none;
	font-size: clamp(28px, 3.3vw, 44px);
	line-height: 1.08;
}

@media (max-width: 980px) {
	.hero--inner .hero__grid {
		grid-template-columns: 1fr;
	}

	.hero__form {
		margin-top: 8px;
	}
}

/* Текст кейса и следующая за ним секция стоят вплотную:
   после ссылки на оригинал стандартный отступ секции давал
   полтора пустых экрана. */
.section-pad:has(.article) {
	padding-bottom: clamp(24px, 3vw, 40px);
}

.section-pad:has(.article) + .section-pad {
	padding-top: clamp(40px, 4.5vw, 68px);
}

/* Ссылка на исходную публикацию. Раньше была широкая плашка
   с кнопкой и своей секцией — вокруг оставалось много воздуха.
   Теперь компактная строка, кликается целиком. */
.source-link {
	margin: 26px 0 0;
}

.source-link a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 13px 20px 13px 16px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: var(--surface);
	color: var(--ink-70);
	font-size: 14.5px;
	line-height: 1.3;
	transition: border-color .3s var(--ease), background-color .3s var(--ease),
	            color .3s var(--ease);
}

.source-link a::before {
	content: '';
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--accent-12);
	border: 1px solid var(--accent-30);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ff3366' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 7.8 8.4 3.6'/%3E%3Cpath d='M5 3.4h3.6V7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}

.source-link a::after {
	content: '→';
	color: var(--accent);
	transition: transform .3s var(--ease);
}

.source-link a:hover {
	border-color: var(--accent-30);
	background: var(--accent-12);
	color: var(--ink);
}

.source-link a:hover::after {
	transform: translateX(4px);
}

.article .source-link {
	margin: 26px 0 0;
	font-size: 14.5px;
}

/* ─── Инфографика кейса ──────────────────────────────── */
/* Данные, которые в публикации были скриншотами кабинета.
   Строками, а не карточками: в колонке 780 пикселей четыре
   карточки становятся узкими и текст в них рвётся.
   Заливка строки показывает долю от лучшего месяца. */
.figures {
	display: grid;
	gap: 10px;
	margin: 26px 0 34px;
}

.figures__item {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background-color: var(--surface);
	overflow: hidden;
	transition: border-color .3s var(--ease), transform .3s var(--ease);
}

/* Шкала лежит подложкой, а не фоном строки: у неё свой мягкий
   градиент и свечение у правого края. */
.figures__item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--w, 0%);
	background: linear-gradient(90deg, rgba(255,51,102,.05), rgba(255,51,102,.2));
	border-right: 1px solid var(--accent-30);
	box-shadow: 0 0 24px -4px rgba(255,51,102,.45);
	pointer-events: none;
}

.figures__item > * {
	position: relative;
	z-index: 1;
}

.figures__item:hover {
	border-color: var(--accent-30);
	transform: translateX(2px);
}

/* Номер шага — маленький кружок слева */
.figures__num {
	margin: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent-12);
	border: 1px solid var(--accent-30);
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-soft);
}

.figures__period {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ink);
	white-space: nowrap;
}

.figures__value {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-family: var(--display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.figures__value span {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-50);
	letter-spacing: 0;
}

.figures__side {
	display: grid;
	justify-items: end;
	gap: 3px;
}

.figures__price {
	margin: 0;
	font-size: 14px;
	color: var(--accent-soft);
	white-space: nowrap;
}

.figures__cost {
	margin: 0;
	font-size: 12.5px;
	color: var(--ink-35);
	white-space: nowrap;
}

/* Изменение к прошлому периоду */
.figures__delta {
	margin: 4px 0 0;
	display: inline-block;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	background: rgba(120,255,190,.09);
	border: 1px solid rgba(120,255,190,.24);
	color: #8effc4;
}

.figures__delta--up {
	background: rgba(255,86,86,.1);
	border-color: rgba(255,86,86,.28);
	color: #ff9a9a;
}

.figures__delta--start {
	background: rgba(255,255,255,.05);
	border-color: var(--line-2);
	color: var(--ink-50);
}

/* Доля шкалы задаётся классом — от 1 до 100 процентов.
   Значение в разметке хранить нельзя: редактор чистит стили. */
.figures__item--w1 { --w: 1%; }
.figures__item--w2 { --w: 2%; }
.figures__item--w3 { --w: 3%; }
.figures__item--w4 { --w: 4%; }
.figures__item--w5 { --w: 5%; }
.figures__item--w6 { --w: 6%; }
.figures__item--w7 { --w: 7%; }
.figures__item--w8 { --w: 8%; }
.figures__item--w9 { --w: 9%; }
.figures__item--w10 { --w: 10%; }
.figures__item--w11 { --w: 11%; }
.figures__item--w12 { --w: 12%; }
.figures__item--w13 { --w: 13%; }
.figures__item--w14 { --w: 14%; }
.figures__item--w15 { --w: 15%; }
.figures__item--w16 { --w: 16%; }
.figures__item--w17 { --w: 17%; }
.figures__item--w18 { --w: 18%; }
.figures__item--w19 { --w: 19%; }
.figures__item--w20 { --w: 20%; }
.figures__item--w21 { --w: 21%; }
.figures__item--w22 { --w: 22%; }
.figures__item--w23 { --w: 23%; }
.figures__item--w24 { --w: 24%; }
.figures__item--w25 { --w: 25%; }
.figures__item--w26 { --w: 26%; }
.figures__item--w27 { --w: 27%; }
.figures__item--w28 { --w: 28%; }
.figures__item--w29 { --w: 29%; }
.figures__item--w30 { --w: 30%; }
.figures__item--w31 { --w: 31%; }
.figures__item--w32 { --w: 32%; }
.figures__item--w33 { --w: 33%; }
.figures__item--w34 { --w: 34%; }
.figures__item--w35 { --w: 35%; }
.figures__item--w36 { --w: 36%; }
.figures__item--w37 { --w: 37%; }
.figures__item--w38 { --w: 38%; }
.figures__item--w39 { --w: 39%; }
.figures__item--w40 { --w: 40%; }
.figures__item--w41 { --w: 41%; }
.figures__item--w42 { --w: 42%; }
.figures__item--w43 { --w: 43%; }
.figures__item--w44 { --w: 44%; }
.figures__item--w45 { --w: 45%; }
.figures__item--w46 { --w: 46%; }
.figures__item--w47 { --w: 47%; }
.figures__item--w48 { --w: 48%; }
.figures__item--w49 { --w: 49%; }
.figures__item--w50 { --w: 50%; }
.figures__item--w51 { --w: 51%; }
.figures__item--w52 { --w: 52%; }
.figures__item--w53 { --w: 53%; }
.figures__item--w54 { --w: 54%; }
.figures__item--w55 { --w: 55%; }
.figures__item--w56 { --w: 56%; }
.figures__item--w57 { --w: 57%; }
.figures__item--w58 { --w: 58%; }
.figures__item--w59 { --w: 59%; }
.figures__item--w60 { --w: 60%; }
.figures__item--w61 { --w: 61%; }
.figures__item--w62 { --w: 62%; }
.figures__item--w63 { --w: 63%; }
.figures__item--w64 { --w: 64%; }
.figures__item--w65 { --w: 65%; }
.figures__item--w66 { --w: 66%; }
.figures__item--w67 { --w: 67%; }
.figures__item--w68 { --w: 68%; }
.figures__item--w69 { --w: 69%; }
.figures__item--w70 { --w: 70%; }
.figures__item--w71 { --w: 71%; }
.figures__item--w72 { --w: 72%; }
.figures__item--w73 { --w: 73%; }
.figures__item--w74 { --w: 74%; }
.figures__item--w75 { --w: 75%; }
.figures__item--w76 { --w: 76%; }
.figures__item--w77 { --w: 77%; }
.figures__item--w78 { --w: 78%; }
.figures__item--w79 { --w: 79%; }
.figures__item--w80 { --w: 80%; }
.figures__item--w81 { --w: 81%; }
.figures__item--w82 { --w: 82%; }
.figures__item--w83 { --w: 83%; }
.figures__item--w84 { --w: 84%; }
.figures__item--w85 { --w: 85%; }
.figures__item--w86 { --w: 86%; }
.figures__item--w87 { --w: 87%; }
.figures__item--w88 { --w: 88%; }
.figures__item--w89 { --w: 89%; }
.figures__item--w90 { --w: 90%; }
.figures__item--w91 { --w: 91%; }
.figures__item--w92 { --w: 92%; }
.figures__item--w93 { --w: 93%; }
.figures__item--w94 { --w: 94%; }
.figures__item--w95 { --w: 95%; }
.figures__item--w96 { --w: 96%; }
.figures__item--w97 { --w: 97%; }
.figures__item--w98 { --w: 98%; }
.figures__item--w99 { --w: 99%; }
.figures__item--w100 { --w: 100%; }

/* Итог — три отдельные карточки, а не общая рамка */
.totals {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
	margin: 30px 0 10px;
}

.totals__item {
	padding: var(--card-pad);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .35s var(--ease), background-color .35s var(--ease),
	            box-shadow .35s var(--ease);
}

.totals__item:hover {
	border-color: var(--accent-30);
	background-color: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28),
	            inset 0 0 12px -6px rgba(255,51,102,.35);
}

.totals__value {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	letter-spacing: -.04em;
	color: var(--ink);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.totals__label {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-50);
}

/* Внутри текста кейса у абзацев свой размер — возвращаем свой */
.article .figures__num    { margin: 0; font-size: 12px; line-height: 1; }
.article .figures__period { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.article .figures__value  { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.1; }
.article .figures__price  { margin: 0; font-size: 14px; line-height: 1.35; color: var(--accent-soft); }
.article .figures__cost   { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-35); }
.article .figures__delta  { margin: 4px 0 0; font-size: 12px; line-height: 1.3; }
.article .totals__value   { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1; }
.article .totals__label   { margin: 12px 0 0; font-size: 13.5px; line-height: 1.4; }

@media (max-width: 860px) {
	.totals {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.figures__item {
		grid-template-columns: 24px 1fr auto;
		gap: 8px 14px;
		padding: 16px 18px;
	}

	.figures__period {
		grid-column: 2;
	}

	.figures__value {
		grid-column: 2;
		font-size: 22px;
	}

	.figures__side {
		grid-column: 3;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-content: center;
	}
}

/* На телефоне правая колонка строки уходит вниз. Цена и расход стоят
   с запретом переноса, колонка `auto` не сжимается — на 390 px строка
   вылезала за экран и обрезала «заявок +58%». */
@media (max-width: 560px) {
	.figures__item {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 6px 12px;
	}

	.figures__period,
	.figures__value { grid-column: 2; }

	.figures__side {
		grid-column: 2;
		grid-row: auto;
		justify-items: start;
		margin-top: 4px;
	}

	.figures__price,
	.figures__cost { white-space: normal; }
}

/* ─── Страницы услуг ─────────────────────────────────── */
/* Первый экран внутренней страницы: отступ сверху такой же,
   как на главной — расстояние от шапки одно на весь сайт.
   Снизу поджат, тут нет колонки с цифрами. */
.hero--inner {
	padding-bottom: clamp(40px, 5vw, 72px);
}

.hero--inner .hero__lead,
.hero--inner .hero__title {
	max-width: 900px;
}

/* Задачи, с которыми приходят: строками «боль → решение».
   Сеткой из карточек последний ряд оставался пустым. */
/* ─── «С чем к нам приходят»: цепочка, как компетенции на главной ─
   Кружок с номером над карточкой, за ним отрезок линии. Пунктов
   на страницах от 6 до 16, поэтому цепочка переносится по рядам,
   и линия рисуется у каждой карточки, а не у всего блока. */
.tasks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--sp-grid);
	padding-top: 72px;
	counter-reset: задача;
	border-top: none;

	/* линия у крайних карточек выходит за край ряда — подрезаем
	   по горизонтали; свечение карточек при наведении не страдает */
	overflow-x: clip;
}

.tasks__item {
	position: relative;
	counter-increment: задача;
	display: grid;
	align-content: start;
	gap: var(--sp-1);
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	transition: border-color .3s var(--ease), background-color .3s var(--ease),
	            box-shadow .3s var(--ease);
}

.tasks__item:hover {
	border-color: var(--accent-30);
	background: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28);
}

/* отрезок линии на уровне кружков: тянется на половину зазора
   в обе стороны, поэтому внутри ряда линия выглядит сплошной */
.tasks__item::after {
	content: '';
	position: absolute;
	left: calc(var(--sp-grid) / -2);
	right: calc(var(--sp-grid) / -2);
	top: -49px;
	height: 1px;
	background: rgba(255,51,102,.35);
}

.tasks__item::before {
	content: counter(задача, decimal-leading-zero);
	position: absolute;
	z-index: 1;
	top: -72px;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--accent-30);
	background: var(--bg);
	font-family: var(--display);
	font-weight: 700;
	font-size: 14px;
	color: var(--accent-2);
}

.tasks__title {
	margin: 0;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.25;
	color: var(--ink);
}

.tasks__text {
	margin: 0;
	font-size: 13.8px;
	line-height: 1.45;
	color: var(--ink-50);
}

@media (max-width: 720px) {
	.tasks {
		padding-top: 0;
	}

	.tasks__item::after {
		display: none;
	}

	.tasks__item::before {
		position: static;
		transform: none;
		margin-bottom: 4px;
		width: 40px;
		height: 40px;
	}

	.tasks__item {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* Форматы и цена */
.pricing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.pricing__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	padding: var(--card-pad);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent-30);
	border-radius: var(--r);
	transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
	            background-color .35s var(--ease);
}

.pricing__item:hover {
	border-color: var(--accent-30);
	background-color: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28),
	            inset 0 0 12px -6px rgba(255,51,102,.35);
}

.pricing__name {
	margin: 0;
	font-size: 15px;
	color: var(--ink-50);
}

.pricing__price {
	margin: 12px 0 0;
	font-family: var(--display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--ink);
}

/* Сноска под ценами. Голым серым текстом она терялась под
   рядом карточек — собрана в плашку со значком и акцентной
   гранью слева, чтобы читалась как пояснение, а не как
   забытая строка. */
.pricing__note {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	max-width: 860px;
	margin: 22px 0 0;
	padding: 15px 24px 15px 18px;
	background: linear-gradient(90deg, var(--accent-12), rgba(255,51,102,0) 82%);
	border-left: 2px solid var(--accent-30);
	border-radius: 0 var(--r) var(--r) 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-70);
}

.pricing__note::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border-radius: 50%;
	background-color: var(--accent-12);
	border: 1px solid var(--accent-30);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ff3366' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 5.4v3.2'/%3E%3Cpath d='M6 3.4v.01'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
}

@media (max-width: 720px) {
	.pricing__note {
		gap: 11px;
		padding: 14px 16px 14px 15px;
	}
}

/* Смежные страницы. Голые списки ссылок висели в пустоте и
   читались как обрывок подвала — каждая колонка собрана в
   карточку, ссылки идут строками с разделителями и стрелкой,
   которая выезжает при наведении. */
.related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	align-items: stretch;
}

.related__col {
	padding: var(--card-pad) var(--card-pad) 6px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .35s var(--ease), background-color .35s var(--ease),
	            box-shadow .35s var(--ease);
}

.related__col:hover {
	border-color: var(--accent-30);
	background-color: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28),
	            inset 0 0 12px -6px rgba(255,51,102,.35);
}

.related__title {
	margin: 0 0 4px;
	font-family: var(--display);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--accent);
}

.related__list {
	display: block;
	margin: 0;
	padding-left: 0;
	list-style: none;
	font-size: 15px;
}

.related__list li {
	border-top: 1px solid var(--line);
}

.related__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	color: var(--ink-70);
	transition: color .25s var(--ease), padding-left .25s var(--ease);
}

/* Стрелка появляется только под курсором — иначе три колонки
   превращаются в частокол значков. */
.related__list a::after {
	content: '→';
	flex: 0 0 auto;
	color: var(--accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s var(--ease), transform .3s var(--ease);
}

.related__list a:hover {
	color: var(--ink);
	padding-left: 6px;
}

.related__list a:hover::after {
	opacity: 1;
	transform: translateX(0);
}

/* ─── Связанные страницы: каждая ссылка — плитка ─────────────
   Владелец 01.10.2026, вариант 1. Колонка в блоке осталась одна
   («Смежные услуги»), а сетка была рассчитана на три — карточка
   занимала треть ширины, справа зияла пустота на весь экран.
   Теперь обёртка колонки перестаёт быть карточкой, карточками
   становятся сами ссылки и занимают ряд целиком. Ссылок бывает
   две или три — ряд подстраивается. */
.related {
	display: block;
}

.related__col {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.related__col:hover {
	background: none;
	border: 0;
	box-shadow: none;
}

.related__title {
	margin: 0 0 var(--sp-4);
}

.related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--gap);
}

.related__list li {
	border-top: 0;
}

.related__list a {
	min-height: 96px;
	padding: 24px 26px;
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	font-family: var(--display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--ink);
	transition: border-color .35s var(--ease), background-color .35s var(--ease),
	            box-shadow .35s var(--ease);
}

.related__list a:hover {
	color: var(--ink);
	padding-left: 26px;
	border-color: var(--accent-30);
	background: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28);
}

/* В плитке стрелка видна всегда: их две-три, частокола не выходит. */
.related__list a::after {
	opacity: 1;
	transform: none;
	font-size: 20px;
}

.related__list a:hover::after {
	transform: translateX(5px);
}

@media (max-width: 720px) {
	.related__list {
		grid-template-columns: 1fr;
		gap: var(--sp-2);
	}

	.related__list a {
		min-height: 0;
		padding: 18px 20px;
		font-size: 16px;
	}

	.related__list a:hover { padding-left: 20px; }
}

@media (max-width: 1080px) {
	.tasks,
	.pricing,
	.related {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	.tasks,
	.pricing,
	.related {
		grid-template-columns: 1fr;
	}
}

/* ─── Состав работ по этапам ─────────────────────────── */
.stages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.stages__col {
	padding: var(--card-pad);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
	            background-color .35s var(--ease);
}

.stages__col:hover {
	border-color: var(--accent-30);
	background-color: var(--surface-2);
	box-shadow: 0 0 18px -2px rgba(255,51,102,.28),
	            inset 0 0 12px -6px rgba(255,51,102,.35);
}

.stages__num {
	margin: 0;
	font-family: var(--display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
}

.stages__title {
	margin: 10px 0 18px;
	font-family: var(--display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

.stages__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.stages__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-70);
}

/* Галочка вместо маркера */
.stages__list li::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--accent-12);
	border: 1px solid var(--accent-30);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ff3366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3 4.8 8.6 9.5 3.9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px;
}

@media (max-width: 1080px) {
	.stages { grid-template-columns: 1fr; }
}

/* ─── Первый экран страницы услуги ───────────────────── */
/* Стандарт: слева заголовок, обещание, буллеты и кнопка;
   справа — панель про саму услугу и две плитки с цифрами
   из кейсов этой же страницы. Рамка, сетка и отступы для
   всех услуг одинаковы, меняется только начинка панели:
   .serp — как это выглядит в поиске, .adprev — рекламное
   объявление. Плитки цифр — те же .metric, что на главной. */
.hero--service .hero__grid {
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
}

.hero--service .hero__title {
	max-width: none;
}

/* Верх панели совпадает с началом заголовка, как на главной. */
.uvis {
	display: grid;
	gap: var(--gap);
	margin-top: 64px;
}

.upanel {
	position: relative;
	padding: 22px 22px 8px;
	background: linear-gradient(150deg, var(--bg-3), var(--bg-2) 70%);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.upanel::before {
	content: '';
	position: absolute;
	right: -18%;
	top: -52%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,51,102,.16), transparent 66%);
	pointer-events: none;
}

.upanel__label {
	position: relative;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-35);
}

/* Строки поисковой выдачи: позиция, запрос, изменение. */
.serp__row {
	position: relative;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 13px 0;
	border-top: 1px solid var(--line);
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--ink-70);
}

.serp__pos {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	font-family: var(--display);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

.serp__row:first-of-type .serp__pos {
	background: var(--accent-12);
	border-color: var(--accent-30);
	color: var(--accent-soft);
}

.serp__delta {
	flex-shrink: 0;
	padding: 5px 11px;
	border-radius: 100px;
	background: var(--accent-12);
	border: 1px solid var(--accent-30);
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-soft);
	white-space: nowrap;
}

/* Рекламное объявление в поиске. */
.adprev {
	position: relative;
	padding: 4px 0 16px;
}

.adprev__badge {
	display: inline-block;
	margin: 0 0 11px;
	padding: 4px 11px;
	border-radius: 100px;
	background: var(--accent-12);
	border: 1px solid var(--accent-30);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-soft);
}

.adprev__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--ink);
}

.adprev__url {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ink-35);
}

.adprev__text {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink-50);
}

/* Строка под объявлением: путь заявки. */
.uflow {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink-50);
}

.uflow span {
	padding: 6px 12px;
	border-radius: 100px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	white-space: nowrap;
}

.uflow span:last-child {
	background: var(--accent-12);
	border-color: var(--accent-30);
	color: var(--accent-soft);
}

.uvis .proof__row {
	gap: var(--gap);
}

@media (max-width: 980px) {
	.hero--service .hero__grid {
		grid-template-columns: 1fr;
	}

	.uvis {
		margin-top: 28px;
	}
}

@media (max-width: 560px) {
	.serp__row {
		grid-template-columns: 26px minmax(0, 1fr);
		gap: 11px;
		font-size: 14px;
	}

	.serp__pos {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}

	.serp__delta {
		grid-column: 2;
		justify-self: start;
	}
}

/* Кнопка «Все кейсы» стоит под сеткой обычной кнопкой, а не
   карточкой внутри неё — ряды кейсов остаются ровными.
   Если кейсов нечётное число, последний занимает всю ширину:
   пустая половина ряда выглядит как недосбор. */
.cases-more {
	margin-top: var(--gap);
}

.cases-grid .case-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Ритм внутренних страниц: между двумя соседними секциями
   складывались нижний и верхний отступы — до 296px пустоты
   на десктопе и рыхлая, бесконечная страница на телефоне.
   Расстояние между секциями держит только верхний отступ,
   нижний остаётся у последней секции перед подвалом.
   Главную не трогаем: её ритм уже принят. */
body:not(.home) .section-pad {
	padding-bottom: 0;
}

body:not(.home) .section-pad:last-of-type {
	padding-bottom: var(--sect);
}

/* Прежние исключения для внутренних страниц сняты 26.09.2026:
   шаг между блоками и отступ шапки теперь одинаковые на всём
   сайте и заданы в блоке «Стандарт вертикальных отступов». */
@media (max-width: 720px) {
	body:not(.home) {
		--card-pad: 20px;
	}
}

/* Список внутри панели первого экрана: строками с разделителями,
   когда у услуги нет цифр для карточек-метрик. */
.upanel__list {
	position: relative;
	margin: 6px 0 14px;
	padding: 0;
	list-style: none;
}

.upanel__list li {
	padding: 12px 0;
	border-top: 1px solid var(--line);
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ink-70);
}

/* Первый экран без правой колонки: на странице только текст заказчика. */
.hero--solo .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--solo .hero__title,
.hero--solo .hero__lead { max-width: 900px; }

/* «Что входит в услугу» — перечень заказчика строками, без деления на этапы. */
/* «Что делаем» — чек-лист в две колонки: у каждого пункта акцентная
   галочка, строки разделены линиями. Выбор владельца 28.09.2026. */
.worklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-2) 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Пункт — обычный блок с галочкой в левом поле, НЕ сетка.
   Сеткой пункт ломался на отраслевых страницах: там внутри ссылка
   и продолжение фразы, голый текст становился отдельной ячейкой
   и падал в колонку шириной 26 px — фраза сыпалась по буквам
   в столбик. Владелец поймал на странице промышленности 01.10.2026. */
.worklist li {
	display: block;
	position: relative;
	padding: 12px 0 12px 38px;
	border-bottom: 1px solid var(--line);
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--ink-70);
}

.worklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 12px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--accent-30);
	background: var(--accent-12);
	color: var(--accent-2);
	font-size: 13px;
	line-height: 1;
}

@media (max-width: 720px) {
	.worklist {
		grid-template-columns: minmax(0, 1fr);
	}
}

.worklist li::first-letter { text-transform: uppercase; }

/* Правый блок первого экрана начинается ВРОВЕНЬ С ЗАГОЛОВКОМ, а не с надзаголовком.
   С переключателем верх колонки — это сам переключатель, поэтому отступ нужен тот же,
   что и у карточек без переключателя (высота надзаголовка). */
.proof.has-switch {
	margin-top: var(--hero-head);
}

@media (max-width: 1080px) {
	.proof.has-switch { margin-top: 12px; }
}

/* То же правило для кейсов: форма справа начинается вровень с H1,
   а не с надзаголовком. Отступ равен высоте надзаголовка. */
.hero--inner .hero__form {
	margin-top: var(--hero-head);
}

@media (max-width: 980px) {
	.hero--inner .hero__form { margin-top: 8px; }
}

/* Ссылка в ленте изданий не красит название: вид остаётся прежним,
   меняется только по наведению. Иначе названия-текст становятся
   акцентными, а логотипы-картинки — нет, и лента едет вразнобой. */
.press__list li.press__text a {
	color: inherit;
	text-decoration: none;
	display: block;
	line-height: inherit;
}

.press__list li.press__text:hover a,
.press__list li.press__text a:hover {
	color: var(--ink);
}

/* Пункт компетенций не сдвигается при наведении: раньше строка уезжала
   вправо на 6px и текст дёргался. Меняется только цвет. */
.comp__list a {
	transition: color .22s var(--ease);
}

.comp__list a:hover {
	padding-left: 0;
}

/* Левая грань плитки отрасли загорается ярче остального контура.
   Правило стоит после общей группы наведения: её сокращённый
   `border-color` иначе перекрывает левый край. */
.ind__item:hover {
	border-left-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════
   СТАНДАРТ ВЕРТИКАЛЬНЫХ ОТСТУПОВ (принят 26.09.2026)
   Шкала: 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.
   Отступ между блоками задаётся ТОЛЬКО сверху, снизу — ноль,
   иначе соседние отступы складываются: до этой правки между
   блоками выходило 259 px вместо 96.
   Все значения меняются здесь и нигде больше.
   ══════════════════════════════════════════════════════════ */
:root {
	--sp-1: 8px;
	--sp-2: 12px;
	--sp-3: 16px;
	--sp-4: 24px;
	--sp-5: 32px;
	--sp-6: 48px;
	--sp-block: 96px;
	--sp-head: 48px;
	--sp-grid: 16px;

	/* высота надзаголовка вместе с отступом до заголовка: на столько
	   опускается правый блок, чтобы встать вровень с H1/H2.
	   Выставлено замером, менять только вместе с ним. */
	--hero-head: 58px;
}

@media (max-width: 720px) {
	:root {
		--sp-block: 64px;
		--sp-head: 32px;
		--sp-grid: 12px;
	}
}

/* ── между блоками ── */
.section-pad {
	padding-top: var(--sp-block);
	padding-bottom: 0;
}

body:not(.home) .section-pad:last-of-type {
	padding-bottom: var(--sp-block);
}

.hero {
	padding-top: var(--sp-block);
	padding-bottom: 0;
}

.trustline {
	margin-top: var(--sp-block);
	padding: var(--sp-4) 0;
}

.press {
	margin-top: var(--sp-block);
	padding: 0;
}

/* у таблиц и у обёрток блоков свой отступ снизу от редактора —
   он ломает шаг между блоками (на страницах услуг давал 24 px
   вместо 96 после ленты изданий) */
.wp-block-table {
	margin-bottom: 0;
}

.entry-content .wrap {
	margin-bottom: 0;
}

/* Между блоками в разметке остаются переносы строк: браузер рисует
   их отдельной строкой и добавляет к шагу лишние ~24 px. Колоночный
   flex такие пустые узлы игнорирует. */
.entry-content {
	display: flex;
	flex-direction: column;
}

/* Тема GeneratePress вешает на каждый блок контента отступ снизу
   в 1.5em своим правилом той же формы — перебиваем им же,
   иначе между секциями добавляется лишний шаг. */
.entry-content > [class*="wp-block-"]:not(:last-child):not(.wp-block-heading) {
	margin-bottom: 0;
}

.section-pad > .wrap > *:last-child,
.section-pad .wrap > .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

/* ── шапка блока ── */
.section-head {
	margin-bottom: var(--sp-head);
}

.section-head h2 {
	margin-top: var(--sp-2);
}

.section-head .lead {
	margin-top: var(--sp-3);
	margin-bottom: 0;
}

/* ── первый экран ── */
.hero__title {
	margin-top: var(--sp-2);
}

.hero__lead {
	margin-top: var(--sp-3);
}

.hero__bullets {
	margin-top: var(--sp-5);
	gap: var(--sp-2);
}

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

.proof {
	gap: var(--sp-3);
}

/* ── сетки карточек ── */
.comp,
.cases-grid,
.ind,
.guar,
.steps,
.team-grid,
.reviews,
.magnet__list,
.tasks,
.pricing,
.related {
	gap: var(--sp-grid);
}

/* ── внутри карточек ── */
.comp__title,
.ind__name,
.case-card__client,
.guar__t,
.tasks__title {
	margin-bottom: var(--sp-1);
}

.comp__list {
	gap: var(--sp-2);
}

.ind__what,
.case-card__text {
	margin-top: var(--sp-1);
}

/* ── нижние плашки блоков ── */
.ai-note,
.niches__more,
.cases-more,
.guar__more {
	margin-top: var(--sp-5);
}

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

/* На узком экране форма лид-магнита стоит под текстом: смещение под
   заголовок ей не нужно, от текста до формы и от формы до карточек
   тот же отступ, что у шапки блока. */
@media (max-width: 1080px) {
	.magnet {
		row-gap: 0;
	}

	.magnet__text .lead {
		margin-bottom: 0;
	}

	.magnet .form-box,
	.magnet:not(:has(.eyebrow)) .form-box {
		margin-top: var(--sp-head);
	}

	.magnet__list {
		margin-top: var(--sp-head);
	}
}

/* На самых узких телефонах вложенные поля блока и формы
   не оставляют места даже короткой подсказке. */
@media (max-width: 360px) {
	.magnet {
		padding-inline: var(--sp-3);
	}
}

/* ─── Благодарственные письма ────────────────────────── */
/* Лента со стрелками: видно четыре письма, остальные листаются
   кнопками. Клик по письму открывает его целиком по высоте экрана,
   ещё клик — во всю ширину с прокруткой. На телефоне сразу по ширине. */
.letters {
	position: relative;
}

/* Заказчик выбрал показ всех писем сразу (28.09.2026), стрелки не нужны */
.letters__nav {
	display: none;
}

.letters__nav button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--ink);
	font-size: 18px;
	cursor: pointer;
	transition: border-color .25s var(--ease), background-color .25s var(--ease);
}

.letters__nav button:hover {
	border-color: var(--accent);
	background: var(--accent-12);
}

.letters__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-grid);
	overflow: visible;
}

.letters__track::-webkit-scrollbar {
	display: none;
}

.letter {
	padding: 0;
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent-30);
	border-radius: var(--r);
	background: var(--surface);
	overflow: hidden;
	cursor: pointer;
	transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.letter:hover {
	border-color: var(--accent-30);
	border-left-color: var(--accent);
	background: var(--surface-2);
	box-shadow: -6px 0 22px -10px rgba(255,51,102,.8);
}

.letter img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1.3;
	object-fit: cover;
	object-position: 50% 0;
}

/* просмотр письма */
.lview {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	place-items: center;
	padding: 24px;
	background: rgba(10,9,14,.92);
	backdrop-filter: blur(6px);
}

.lview.is-open {
	display: grid;
}

.lview__stage {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	align-content: start;
	width: min(1100px, 96vw);
	max-height: 94vh;
	overflow: auto;
	scrollbar-width: thin;
}

.lview__stage img {
	display: block;
	height: 94vh;
	width: auto;
	max-width: none;
	border-radius: 12px;
	cursor: zoom-in;
}

.lview__stage.is-wide img {
	width: 100%;
	height: auto;
	cursor: zoom-out;
}

.lview__close,
.lview__prev,
.lview__next {
	position: absolute;
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: rgba(255,255,255,.06);
	color: var(--ink);
	font-size: 20px;
	cursor: pointer;
}

.lview__close { top: 18px; right: 22px; }
.lview__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lview__next { right: 22px; top: 50%; transform: translateY(-50%); }

@media (max-width: 1080px) {
	.letters__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.letters__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-2);
	}

	.lview { padding: 12px; }

	.lview__stage {
		max-height: 86vh;
	}

	.lview__stage img {
		width: 100%;
		height: auto;
	}

	.lview__close {
		width: 52px;
		height: 52px;
		font-size: 24px;
		top: 12px;
		right: 12px;
		background: rgba(20,18,29,.92);
	}

	.lview__prev,
	.lview__next {
		top: auto;
		bottom: 14px;
		transform: none;
		background: rgba(20,18,29,.92);
	}

	.lview__prev { left: 14px; }
	.lview__next { right: 14px; }
}

/* ═══ Правки по документу заказчика от 24.10.2026 (тема 1.27.0) ═══
   Дописывается в КОНЕЦ assets/css/sections.css на сервере. Порядок важен:
   правила ниже перебивают прежние того же веса только потому, что идут позже. */

/* ─── 3. Строка доверия и лента изданий крупнее («чёт мелко всё») ─── */
.trustline {
	padding: 32px 0;
	font-size: 18px;
}

.trustline p {
	font-size: 18px;
}

.trustline b,
.trustline strong {
	font-size: 20px;
}

.press {
	padding: 36px 0;
	gap: 18px 40px;
}

.press__label {
	height: 24px;
	line-height: 24px;
	font-size: 17px;
}

.press__list {
	gap: 16px 40px;
}

.press__list img {
	height: 24px;
}

.press__list li.press__text {
	height: 24px;
	font-size: 24px;
	line-height: 24px;
}

@media (max-width: 720px) {
	.trustline,
	.trustline p { font-size: 16px; }
	.trustline b,
	.trustline strong { font-size: 18px; }
	.press__label { font-size: 15px; }
	.press__list img { height: 20px; }
	.press__list li.press__text {
		height: 20px;
		font-size: 20px;
		line-height: 20px;
	}
}

/* ─── 5. Ссылки на публикации: на карточке кейса и под названием ниши ─── */
.case-card__link-label {
	margin-right: 6px;
	font-weight: 500;
	color: var(--ink-35);
}

.case-card__link a {
	color: var(--accent-2);
}

.case-card__link a + a::before {
	content: '·';
	margin: 0 8px;
	font-weight: 400;
	color: var(--ink-35);
}

.ntable__case {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ink-35);
}

.ntable__case a {
	color: var(--accent-2);
}

.ntable__case a + a::before {
	content: '·';
	margin: 0 6px;
	color: var(--ink-35);
}

/* ─── 6. Блок гайдов: текст и форма в две колонки, под ними четыре гайда в ряд ───
   28.10: гайды выдаются за заявку («пусть заявку оставляют за лид магнит»),
   карточки больше не ссылки в Телеграм — раскладка вернулась к двум колонкам. */
.magnet--guides .magnet__list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
	.magnet--guides .magnet__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	/* В один столбец равная высота карточек только раздувает короткие */
	.magnet--guides .magnet__list {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}
}

/* ─── 6а. Отрасли без ссылок: одиннадцатая плитка на всю ширину ─── */
.ind__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Название без ссылки держит тот же цвет, что была ссылка */
.ind__name {
	color: var(--ink);
}

/* ─── 8, 10. Фото вместо инициалов ─── */
.expert__photo {
	padding: 0;
	overflow: hidden;
}

.expert__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.member__ava {
	width: 64px;
	height: 64px;
	overflow: hidden;
}

.member__ava img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Семь человек в три колонки: седьмая карточка встаёт в среднюю колонку,
   а не висит слева одна. */
@media (min-width: 1081px) {
	.team-grid > .member:nth-child(3n + 1):last-child {
		grid-column: 2;
	}
}

/* ─── 9. Логотипы партнёров вместо текстовых плашек ─── */
.badges--logos li {
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0 26px;
}

.badges--logos img {
	display: block;
	height: 26px;
	width: auto;
	max-width: 160px;
	filter: brightness(0) invert(1);
	opacity: .6;
	transition: opacity .3s var(--ease);
}

.badges--logos li:hover img {
	opacity: 1;
}

/* У JetStat рисунок мелкий внутри своего поля — поднимаем высоту */
.badges--logos img[alt="JetStat"] {
	height: 36px;
}

/* У CMS Magazine знак — белые буквы на красной плашке: белый монохром
   сливает их в сплошной прямоугольник. Инверсия с обесцвечиванием
   оставляет плашку светлой, буквы тёмными, слово «magazine» читаемым. */
.badges--logos img[alt="CMS Magazine"] {
	filter: invert(1) grayscale(1) brightness(1.3);
	opacity: .75;
}

/* ─── 1. Окно с формой заявки по кнопке первого экрана ───
   Кнопка с data-modal="lead" открывает окно; форма переносится из блока
   контактов и возвращается обратно при закрытии (adson.js, leadModal). */
.modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	place-items: center;
	padding: 24px;
	background: rgba(10,9,14,.92);
	backdrop-filter: blur(6px);
}

.modal.is-open {
	display: grid;
}

.modal__box {
	position: relative;
	width: min(560px, 100%);
	max-height: 94vh;
	overflow: auto;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-2);
	scrollbar-width: thin;
}

.modal__title {
	margin: 0 44px 8px 0;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

.modal__lead {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-50);
}

.modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: rgba(255,255,255,.06);
	color: var(--ink);
	font-size: 20px;
	cursor: pointer;
}

body.is-locked {
	overflow: hidden;
}

@media (max-width: 720px) {
	.modal { padding: 12px; }
	.modal__box { max-height: 90vh; }
}

/* ─── 28.10.2026: меню и подвал ведут на разделы главной ───
   Шапка закреплена сверху и закрывает начало раздела при переходе по якорю. */
#services,
#cases,
#why,
#industries,
#team,
#contact,
#guides {
	scroll-margin-top: 88px;
}

/* После отправки страница открывается на подтверждении, примерно посередине экрана */
.form__done {
	scroll-margin-top: 40vh;
}

/* ─── Документы: в пунктах бывают ссылки и выделения, поэтому пункт — обычный
   блок. Во flex голый текст рядом с тегом разваливается на колонки. ─── */
.article--doc li {
	display: block;
	position: relative;
	padding-left: 19px;
}

.article--doc li::before {
	position: absolute;
	left: 0;
	top: 0;
}

.article--doc ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.article--doc ol li {
	display: list-item;
	padding-left: 0;
}

.article--doc ol li::before {
	content: none;
}

/* ─── Подтверждение формы гайдов: ссылки на файлы ─── */
.form__done p {
	margin: 0 0 var(--sp-1);
}

.form__done ul {
	display: grid;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.form__done a {
	color: inherit;
	text-decoration: underline;
}

/* ─── Панель меню: без подписи название по центру значка ─── */
@media (min-width: 1025px) {
	.main-navigation .main-nav ul ul li a:not(:has(.mm__desc)) .mm__title {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}
}

/* ─── Шапка от 1025 до 1240: шесть пунктов со стрелками, телефон и кнопка должны
   влезть в один ряд, поэтому подпись убрана, а промежутки поджаты. ─── */
@media (min-width: 1025px) and (max-width: 1240px) {
	#masthead .site-description {
		display: none;
	}

	.main-navigation .main-nav > ul > li {
		margin: 0;
	}

	.main-navigation .main-nav > ul > li > a {
		padding: 10px 9px;
		font-size: 14px;
	}

	.main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
		padding-right: 6px;
	}

	.main-navigation .main-nav > ul > li.cta > a {
		margin-left: 6px;
		padding: 13px 16px;
	}
}

/* Подсказка поля канала в узкой колонке формы влезает впритык. */
@media (min-width: 1081px) and (max-width: 1240px) {
	.adson-form input::placeholder {
		font-size: 14px;
	}
}

/* ─── Команда как в образце владельца 03.11: круглое фото, имя, должность, без карточек ─── */
#team .team-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-4);
}

#team .member,
#team .member:hover {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

#team .member__ava {
	width: 148px;
	height: 148px;
	margin: 0 0 var(--sp-4);
	background: var(--surface-2);
}

#team .member__name {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
}

#team .member__role {
	margin-top: var(--sp-2);
	font-family: var(--display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--ink);
}

@media (max-width: 720px) {
	#team .team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-5) var(--sp-3);
	}

	#team .member__ava {
		width: 112px;
		height: 112px;
		margin-bottom: var(--sp-3);
	}

	#team .member__role {
		font-size: 14px;
	}
}

/* ─── Гайды без формы, 03.11: заказчик «тупо ссылки на гайды дать… меньше полей, выше конверсия» ───
   Текст блока в одну колонку, каждая карточка целиком ссылка на файл. */
.magnet--guides:not(:has(.form-box)) {
	grid-template-columns: minmax(0, 1fr);
}

.magnet__list li:has(> .magnet__link) {
	padding: 0;
}

.magnet__link {
	display: grid;
	align-content: start;
	gap: var(--sp-1);
	height: 100%;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}

/* Без формы колонка справа пустая: межрядный зазор сетки и отступ лида давали 134 px вместо стандарта шапки блока. */
.magnet--guides:not(:has(.form-box)) {
	row-gap: 0;
}

.magnet--guides:not(:has(.form-box)) .magnet__text .lead {
	margin-bottom: 0;
}

.magnet--guides:not(:has(.form-box)) .magnet__list {
	margin-top: var(--sp-head);
}

/* ─── Команда: стаж и описание у каждого, четыре в ряд (образец владельца 03.11) ─── */
#team .team-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

#team .member__ava:not(:has(img)) {
	font-size: 40px;
}

#team .member__exp {
	margin: var(--sp-1) 0 0;
	font-size: 13.5px;
	color: var(--ink-35);
}

#team .member__desc {
	margin: var(--sp-2) 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-70);
}

@media (max-width: 1080px) {
	#team .team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	#team .team-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	#team .member__role {
		font-size: 16px;
	}
}

/* Меню под одностраничник (03.11): на главной пункты-ссылки на разделы WordPress считает текущими
   и красит плашкой все сразу. Плашка остаётся только при наведении, как у остальных пунктов. */
@media (min-width: 1025px) {
	.main-navigation .main-nav > ul > li.menu-item-object-custom.current-menu-item:not(.cta):not(.phone):not(:hover) > a {
		background-color: transparent;
		color: var(--ink-70);
	}
}

/* ============================================================
   Нижняя полоса на телефоне (05.11.2026, тема 1.27.17)
   Позвонить и Telegram, закреплена внизу экрана, только на главной
   (inc/mobile-bar.php). Кнопка «наверх» поднимается над полосой,
   низ страницы получает отступ на высоту полосы.
   ============================================================ */
.mbar { display: none; }

@media (max-width: 720px) {
	.mbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
		background: rgba(20, 18, 29, .94);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--line);
	}

	.mbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		border-radius: 999px;
		font: 600 15px/1 var(--sans);
		text-decoration: none;
	}

	.mbar__tel,
	.mbar__tel:hover,
	.mbar__tel:focus {
		background: var(--accent);
		color: #fff;
	}

	.mbar__tg,
	.mbar__tg:hover,
	.mbar__tg:focus {
		border: 1px solid var(--line-2);
		color: var(--ink);
	}

	body.has-mbar {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	body.has-mbar .generate-back-to-top {
		bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

/* ============================================================
   Плашка о cookies (05.11.2026, тема 1.27.18)
   Текст со старого сайта, inc/cookie-notice.php. На компьютере —
   карточка слева внизу, на телефоне — над нижней полосой.
   ============================================================ */
.cookie {
	position: fixed;
	z-index: 95;
	left: 16px;
	bottom: 16px;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	background: rgba(20, 18, 29, .96);
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

.cookie[hidden] { display: none; }

.cookie .cookie__text {
	margin: 0;
	font: 400 13.5px/1.5 var(--sans);
	color: var(--ink-70);
}

.cookie .cookie__text a {
	color: var(--accent-soft);
	text-decoration: underline;
}

.cookie .cookie__ok {
	align-self: flex-start;
	min-height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font: 600 14px/1 var(--sans);
	cursor: pointer;
}

@media (max-width: 720px) {
	.cookie {
		left: 12px;
		right: 12px;
		max-width: none;
		bottom: calc(72px + env(safe-area-inset-bottom));
	}

	.cookie .cookie__ok { align-self: stretch; }
}

/* ── Компетенции на компьютере: перечни с одной линии (06.11.2026, тема 1.27.19) ──
   Название группы бывает в одну строку («Продвижение», «Аналитика») и в две
   («Трафик и реклама», «Контент и соцсети»), и перечни под ними стояли вразнобой.
   Под название всегда отведено место на две строки: 2 × межстрочный 1.15. */
@media (min-width: 1081px) {
	.comp__title { min-height: calc(2em * 1.15); }
}

/* ── Кейсы: крупные цифры и розовая кнопка «Посмотреть кейс подробно» (06.11.2026, тема 1.27.20) ──
   Владелец выбрал по макету: кнопка — вариант 2 (розовая заливка), цифры — Ц1 (крупные).
   Плашки с рамкой убраны: их принимали за кнопки. Число сверху, подпись под ним; подписи
   в одной карточке начинаются на одной линии. Три цифры в узкой карточке встают списком. */
.case-card {
	container: case-card / inline-size;
}

.case-card__nums {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 6px 0;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.case-card__nums p {
	display: grid;
	grid-row: 1 / span 2;
	grid-template-rows: subgrid;
	row-gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0 16px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-50);
}

.case-card__nums p + p {
	padding-left: 16px;
	border-left: 1px solid var(--line);
}

.case-card__nums p:last-child {
	padding-right: 0;
}

.case-card__nums p strong {
	align-self: start;
	font-family: var(--display);
	font-size: clamp(18px, 5.2cqi, 28px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--ink);
}

@container case-card (max-width: 460px) {
	.case-card__nums:has(p:nth-child(3)) {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 0;
	}

	.case-card__nums:has(p:nth-child(3)) p {
		grid-row: auto;
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		column-gap: 14px;
		align-items: baseline;
		padding: 12px 0;
		border-left: 0;
	}

	.case-card__nums:has(p:nth-child(3)) p:first-child {
		padding-top: 0;
	}

	.case-card__nums:has(p:nth-child(3)) p:last-child {
		padding-bottom: 0;
	}

	.case-card__nums:has(p:nth-child(3)) p + p {
		border-top: 1px solid var(--line);
	}
}

/* Другие разборы — мелкой строкой над кнопкой; кнопка всегда внизу карточки,
   поэтому в ряду кнопки стоят на одной линии. */
.case-card__more {
	margin: auto 0 0;
	padding-top: 24px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-35);
}

.case-card__more a {
	color: var(--ink-70);
	text-decoration: none;
	border-bottom: 1px solid var(--line-2);
	white-space: nowrap;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}

.case-card__more a:hover,
.case-card__more a:focus-visible {
	color: var(--accent-2);
	border-color: var(--accent-2);
}

.case-card__cta {
	margin: auto 0 0;
	padding-top: 24px;
}

.case-card__more + .case-card__cta {
	margin-top: 0;
	padding-top: 14px;
}

.case-card .case-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 22px;
	border-radius: 100px;
	background: var(--accent);
	box-shadow: 0 10px 34px -12px var(--accent-30);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.case-card .case-card__btn::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .3s var(--ease);
}

.case-card .case-card__btn:hover,
.case-card .case-card__btn:focus-visible {
	transform: translateY(-2px);
	background: var(--accent-2);
	color: #fff;
	box-shadow: 0 16px 44px -12px rgba(255,51,102,.5);
}

.case-card .case-card__btn:hover::after,
.case-card .case-card__btn:focus-visible::after {
	transform: translateX(3px);
}

.case-card .case-card__btn:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.case-card .case-card__btn,
	.case-card .case-card__btn::after {
		transition: none;
	}

	.case-card .case-card__btn:hover {
		transform: none;
	}
}

/* ── Первый экран: результаты клиентов по нишам вместо «До нас / С нами» (07.11.2026, тема 1.27.21, полоски на transform — 1.27.22) ──
   Владелец выбрал по макету вариант Э1. Блок остаётся .proof — отступ сверху вровень с H1 прежний.
   Выбор ниши, полоски и смену ниш добавляет nichePick() в adson.js; без скрипта видна одна ниша. */
.niche-pick__card {
	padding: 22px 24px 24px;
}

.niche-pick [hidden] {
	display: none;
}

.niche-pick__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	margin-bottom: 20px;
}

.niche-pick__label {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-50);
}

.niche-pick__name {
	margin: 6px 0 20px;
	font-weight: 600;
	color: var(--ink);
}

.niche-pick__select {
	position: relative;
	display: block;
	min-width: 0;
	max-width: 100%;
}

.niche-pick .niche-pick__select select {
	-webkit-appearance: none;
	appearance: none;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 38px 8px 16px;
	border: 1px solid var(--line-2);
	border-radius: 100px;
	background: rgba(255,255,255,.04);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: border-color .2s var(--ease);
}

.niche-pick .niche-pick__select select:hover {
	border-color: var(--accent-30);
}

.niche-pick .niche-pick__select select:focus-visible {
	outline: none;
	border-color: var(--accent-2);
	box-shadow: 0 0 0 3px var(--accent-12);
}

.niche-pick .niche-pick__select option {
	background: var(--bg-2);
	color: var(--ink);
}

.niche-pick__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 1.6px solid var(--ink-70);
	border-bottom: 1.6px solid var(--ink-70);
	transform: rotate(45deg);
	pointer-events: none;
}

.niche-pick__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.niche-pick__pair + .niche-pick__pair {
	margin-top: 20px;
}

.niche-pick__m {
	min-width: 0;
	padding-right: 16px;
}

.niche-pick__m + .niche-pick__m {
	padding: 0 0 0 16px;
	border-left: 1px solid var(--line);
}

.niche-pick__val {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.03em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.niche-pick__sub {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-50);
}

.niche-pick__bars {
	display: none;
	gap: 8px;
	margin: 20px 0;
}

.niche-pick.is-live .niche-pick__bars {
	display: grid;
}

.niche-pick__bar {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--ink-50);
}

.niche-pick__track {
	display: block;
	height: 10px;
	border-radius: 10px;
	background: rgba(255,255,255,.05);
	overflow: hidden;
}

.niche-pick__track i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .7s var(--ease);
}

.niche-pick__bar + .niche-pick__bar .niche-pick__track i {
	background: linear-gradient(90deg, rgba(255,51,102,.55), rgba(255,66,132,.55));
}

.niche-pick__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	min-height: 57px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.niche-pick__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-35);
}

.niche-pick__case {
	margin: 0;
}

.niche-pick .niche-pick__case a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 5px 14px;
	border-radius: 100px;
	background: var(--accent);
	box-shadow: 0 8px 24px -12px var(--accent-30);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--ease);
}

.niche-pick .niche-pick__case a::after,
.ntable__circ::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s var(--ease);
}

.niche-pick .niche-pick__case a:hover,
.niche-pick .niche-pick__case a:focus-visible {
	background: var(--accent-2);
	color: #fff;
}

.niche-pick .niche-pick__case a:hover::after,
.niche-pick .niche-pick__case a:focus-visible::after {
	transform: translateX(3px);
}

.niche-pick .niche-pick__case a:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
}

@media (max-width: 720px) {
	.niche-pick .niche-pick__case a {
		min-height: 40px;
		padding: 8px 16px;
		font-size: 14px;
	}
}

/* ── Таблица ниш: строка с кейсом нажимается целиком (07.11.2026, тема 1.27.21) ──
   Владелец выбрал по макету вариант Т3. Ссылка — на названии ниши, остальные разборы
   строкой «ещё: …»; стрелку справа и нажатие на строку добавляет nicheRows() в adson.js. */
.ntable tbody tr.is-go {
	cursor: pointer;
}

.ntable .ntable__go {
	color: var(--ink);
	text-decoration: none;
}

.ntable .ntable__go:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
	border-radius: 4px;
}

.ntable__also {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ink-35);
}

.ntable .ntable__also a {
	color: var(--ink-70);
	text-decoration: none;
	border-bottom: 1px solid var(--line-2);
	white-space: nowrap;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}

.ntable .ntable__also a:hover,
.ntable .ntable__also a:focus-visible {
	color: var(--accent-2);
	border-color: var(--accent-2);
}

.ntable th.ntable__arr,
.ntable td.ntable__arr {
	width: 1%;
	padding-left: 4px;
}

.ntable__circ {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	color: var(--ink);
	transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

.ntable tbody tr.is-go:hover .ntable__circ,
.ntable tbody tr.is-go:focus-within .ntable__circ {
	background: var(--accent);
	border-color: var(--accent);
}

.ntable tbody tr.is-go:hover .ntable__circ::before {
	transform: translateX(2px);
}

@media (max-width: 860px) {
	.ntable tbody tr {
		position: relative;
	}

	.ntable td.ntable__arr {
		position: absolute;
		top: 12px;
		right: 0;
		width: auto;
		padding: 0;
	}

	.ntable td.ntable__arr:empty {
		display: none;
	}

	.ntable tbody tr.is-go td:first-child {
		padding-right: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.niche-pick__track i,
	.niche-pick .niche-pick__case a::after,
	.ntable__circ::before {
		transition: none;
	}
}

/* ── Подвал в четыре колонки: документы отдельной колонкой (10.11.2026, тема 1.27.23) ──
   Тема при четырёх колонках ставит виджетам свои float-классы grid-25 — сбрасываем,
   как раньше grid-33. Узкие раскладки повторены ниже, иначе новое правило их перебьёт. */
.site-footer .footer-widgets .grid-25 {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}

#footer-widgets .inside-footer-widgets {
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

@media (max-width: 1080px) {
	#footer-widgets .inside-footer-widgets { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	#footer-widgets .inside-footer-widgets { grid-template-columns: 1fr; gap: 32px; }
}