/* ══════════════════════════════════════════════════════
   AdsON — база оформления
   Перенесено из прототипа v1 «Тёмный премиум».
   Здесь только основа: токены, фон, типографика, кнопки,
   шапка, подвал, формы. Стили отдельных секций главной
   лежат рядом, в sections.css.
   ══════════════════════════════════════════════════════ */

/* ─── Токены ─────────────────────────────────────────── */
:root {
	--bg:          #14121d;
	--bg-2:        #1a1725;
	--bg-3:        #201d2b;
	--surface:     rgba(255,255,255,.028);
	--surface-2:   rgba(255,255,255,.05);
	--line:        rgba(255,255,255,.09);
	--line-2:      rgba(255,255,255,.16);

	--ink:         #ffffff;
	--ink-70:      rgba(255,255,255,.72);
	--ink-50:      rgba(255,255,255,.5);
	--ink-35:      rgba(255,255,255,.35);

	--accent:      #ff3366;
	--accent-2:    #ff4284;
	--accent-soft: #ffb8d0;
	--accent-12:   rgba(255,51,102,.12);
	--accent-30:   rgba(255,51,102,.3);

	--display:     'Unbounded', 'Druk Text Wide', Impact, sans-serif;
	--sans:        'IBM Plex Sans', system-ui, -apple-system, sans-serif;

	--max:         1280px;
	--pad:         clamp(20px, 5vw, 64px);
	--sect:        clamp(72px, 9vw, 148px);
	--r:           18px;
	--r-lg:        26px;
	--ease:        cubic-bezier(.22,.61,.36,1);

	/* Стандарт внутренних страниц: один отступ внутри карточек
	   и один шаг сетки. Меняются здесь — меняются везде. */
	--card-pad:    clamp(24px, 2.4vw, 32px);
	--gap:         clamp(14px, 1.3vw, 18px);
}

/* ─── Основа страницы ────────────────────────────────── */
/* Отступы считаем внутри ширины — как в прототипе. Без этого
   шапка получалась шире контента на величину своих полей. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ink);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Фон держит только внешняя обёртка: если красить ещё и
   контентный слой, он перекрывает подсветку. */
.site {
	background-color: var(--bg);
}

.site-content {
	background-color: transparent;
}

/* Живой фон на всю высоту страницы: пятна распределены
   сверху донизу, поэтому при прокрутке картинка меняется.
   Размытия нет намеренно — радиальные градиенты и так мягкие,
   а blur на такой площади сильно грузит прокрутку. */
/* Тема использует этот псевдоэлемент для служебной вёрстки
   и прячет его — возвращаем видимость. */
.site:not(.footer-widgets)::before {
	content: '';
	display: block;
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(40% 11% at 14% 12%, rgba(255,51,102,.29), transparent 72%),
		radial-gradient(38% 10% at 84% 27%, rgba(122,59,255,.27), transparent 74%),
		radial-gradient(40% 11% at 20% 44%, rgba(122,59,255,.25), transparent 74%),
		radial-gradient(38% 10% at 80% 59%, rgba(255,51,102,.27), transparent 74%),
		radial-gradient(34% 9%  at 46% 74%, rgba(255,184,208,.16), transparent 74%),
		radial-gradient(36% 10% at 26% 86%, rgba(122,59,255,.22), transparent 74%);
	/* Пятна повторяются плиткой: на длинной странице они не
	   растягиваются, подсветка одинаковая сверху донизу. */
	background-size: 100% 4200px;
	background-repeat: repeat-y;
	will-change: transform;
	animation: bgDrift 25s ease-in-out infinite alternate;
}

@keyframes bgDrift {
	0% {
		transform: translate3d(-2%, 0, 0) scale(1.04);
	}
	50% {
		transform: translate3d(2.5%, 0, 0) scale(1.09);
	}
	100% {
		transform: translate3d(-1.5%, 0, 0) scale(1.05);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site:not(.footer-widgets)::before {
		animation: none;
	}
}

/* Слой лежит внутри страницы, контент — над ним.
   Обрезка по обеим осям обязательна: в анимации фоновый слой
   увеличивается и без неё вылезает за нижний край, отчего
   страница становится выше и под подвалом появляется пустота. */
.site {
	position: relative;
	background-color: var(--bg);

	/* Фоновый слой в анимации выезжает за края — его обязательно
	   обрезать. `hidden` стоит запасным: `clip` понимают не все
	   мобильные браузеры, а без обрезки фон даёт боковую прокрутку
	   на телефоне. Браузер с поддержкой `clip` возьмёт его. */
	overflow: hidden;
	overflow: clip;
}

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

/* GeneratePress красит контентные обёртки своим цветом —
   из-за этого после первого экрана был виден стык фона.
   Гасим все обёртки: фон один на всю страницу. */
.content-area,
.site-main,
.inside-article,
.entry-content,
.one-container .site-content,
.one-container .container,
.separate-containers .inside-article,
.separate-containers .site-main {
	background-color: transparent;
}

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

img,
svg {
	max-width: 100%;
	height: auto;
}

/* Ширина контента как в прототипе */
.grid-container {
	max-width: var(--max);
	padding-left: var(--pad);
	padding-right: var(--pad);
}

/* ─── Типографика ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--ink);
}

h1, .h1 { font-size: clamp(38px, 6.2vw, 82px); }
h2, .h2 { font-size: clamp(28px, 4vw, 54px); letter-spacing: -.025em; }
h3, .h3 { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.15; letter-spacing: -.01em; }
h4       { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.2; }

p {
	color: var(--ink-70);
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color .3s var(--ease);
}

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

/* Вспомогательные классы из прототипа —
   их можно ставить блокам в редакторе через «Дополнительный класс CSS». */
.accent { color: var(--accent); }
.muted  { color: var(--ink-50); }
.num    { font-variant-numeric: tabular-nums; }

.lead {
	font-size: clamp(16px, 1.35vw, 19px);
	color: var(--ink-70);
	font-weight: 300;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-50);
}

.eyebrow::before {
	content: '';
	width: 22px;
	height: 1px;
	background: var(--accent);
}

/* ─── Кнопки ─────────────────────────────────────────── */
.wp-block-button__link,
.gb-button,
button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 58px;
	padding: 0 32px;
	border: none;
	border-radius: 100px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 10px 34px -12px var(--accent-30);
	transition: transform .3s var(--ease), background-color .3s var(--ease),
	            border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}

.wp-block-button__link:hover,
.gb-button:hover,
button:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
	background: var(--accent-2);
	color: #fff;
	box-shadow: 0 16px 44px -12px rgba(255,51,102,.5);
}

/* Прозрачная кнопка — стиль «Контур» у блока кнопки.
   Селектор нарочно тяжёлый: тема красит кнопки правилом
   a.wp-block-button__link:not(.has-background), и более
   простой селектор ему проигрывает. */
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background),
.btn-ghost {
	background: rgba(255,255,255,.02);
	border: 1px solid var(--line-2);
	color: var(--ink);
	box-shadow: none;
}

.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background):hover,
.btn-ghost:hover {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.4);
	color: var(--ink);
	box-shadow: none;
}

/* ─── Шапка ──────────────────────────────────────────── */
/* Сверху прозрачная и лежит поверх первого экрана, при
   прокрутке становится матовой — как в прототипе. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .4s var(--ease), border-color .4s var(--ease);
}

.site-header.is-stuck {
	background-color: rgba(20,18,29,.82);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom-color: var(--line);
}

body.admin-bar .site-header {
	top: 32px;
}

@media (min-width: 1025px) {
	.inside-header {
		display: flex;
		align-items: center;
		gap: 0;
		min-height: 84px;
		flex-wrap: nowrap;
		padding-top: 0;
		padding-bottom: 0;
	}

	.site-header.is-stuck .inside-header {
		min-height: 70px;
	}
}

/* На узких экранах — логотип слева, кнопка меню справа */
@media (max-width: 1024px) {
	.inside-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		min-height: 64px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* Логотип с розовой подсветкой и бейджем сбоку */
#masthead .inside-header .site-branding {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-right: auto;
}

.site-branding .main-title {
	position: relative;
	margin: 0;
	padding-left: 0;
	line-height: 1;
}

.site-branding .main-title::before {
	content: '';
	position: absolute;
	left: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 55%, rgba(255,51,102,0) 78%);
	opacity: .85;
	z-index: 0;
}

.site-branding .main-title a {
	position: relative;
	z-index: 1;
}

.site-branding .main-title,
.site-branding .main-title a {
	font-family: var(--display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.03em;
	color: var(--ink);
}

/* Подпись — узкий бейдж через разделитель */
#masthead .site-description {
	margin: 0;
	padding-left: 12px;
	border-left: 1px solid var(--line);
	max-width: 108px;
	font-size: 11px;
	line-height: 1.25;
	color: var(--ink-50);
}

/* Навигация */
.main-navigation,
.main-navigation .main-nav ul ul {
	background-color: transparent;
}

@media (min-width: 1025px) {
	#masthead .main-navigation {
		margin-left: auto;
		flex: 0 1 auto;
	}

	.main-navigation .main-nav > ul {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

/* Пункт меню — скруглённая плашка, как в прототипе:
   подсветка обнимает текст, а не растягивается на всю шапку. */
@media (min-width: 1025px) {
.main-navigation .main-nav > ul > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	line-height: 1.2;
	border-radius: 100px;
	color: var(--ink-70);
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: color .25s var(--ease), background-color .25s var(--ease);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
	color: var(--ink);
	background-color: rgba(255,255,255,.05);
}

/* Промежутки между пунктами — как в макете */
.main-navigation .main-nav > ul > li {
	margin: 0 2px;
}

/* Стрелка у пункта с выпадающим меню. Тема отодвигает её от слова
   на 16 пикселей и оставляет 20 справа — стрелка висит сама по себе
   и тянется к соседнему пункту. Прижимаем её к слову. */
.main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
	padding-left: 3px;
	/* Справа тот же отступ, что у пунктов без стрелки, — плашка
	   подсветки выглядит одинаково у всех. */
	padding-right: 13px;
}

.main-navigation .main-nav > ul > li > a {
	gap: 3px;
}
}

/* Телефон в шапке — без плашки, меняется только цвет */
.main-navigation .main-nav > ul > li.phone > a {
	font-family: var(--display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
	margin-left: 10px;
	border-radius: 0;
}

.main-navigation .main-nav > ul > li.phone > a:hover {
	color: var(--accent);
	background-color: transparent;
}

/* Выпадающее меню — как в прототипе: широкая панель из карточек,
   у каждой значок, название и короткое пояснение. */
.main-navigation .main-nav ul ul {
	background-color: rgba(26,23,37,.96);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: 0 34px 80px -30px rgba(0,0,0,.85);
	padding: 6px 0;
}

@media (min-width: 1025px) {
	/* Панель считает свои края от навигации, а не от узкого пункта,
	   иначе широкое меню уезжает за правый край экрана. */
	.main-navigation {
		position: relative;
	}

	.main-navigation .main-nav > ul > li.menu-item-has-children {
		position: static;
	}

	.main-navigation .main-nav > ul > li > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		/* Высота ряда одна и та же во всех панелях меню: иначе
		   длинное название переносится на вторую строку и растит
		   свой ряд, а промежутки в разных панелях расходятся. */
		grid-auto-rows: 66px;
		gap: 2px 8px;
		width: min(92vw, 1040px);
		padding: 20px;
		top: calc(100% + 14px);
	}

	/* Мост через отступ между пунктом и панелью: без него курсор
	   попадает в пустоту, наведение теряется и меню закрывается
	   раньше, чем до него доедешь. */
	.main-navigation .main-nav > ul > li > ul.sub-menu::before {
		content: '';
		position: absolute;
		top: -18px;
		left: 0;
		right: 0;
		height: 18px;
	}

	.main-navigation .main-nav > ul > li.menu-item-has-children:hover > ul.sub-menu,
	.main-navigation .main-nav > ul > li.menu-item-has-children.sfHover > ul.sub-menu,
	.main-navigation .main-nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu {
		left: auto;
		right: 0;
	}

	.main-navigation .main-nav ul ul li {
		width: auto;
	}

	.main-navigation .main-nav ul ul li a {
		display: grid;
		grid-template-columns: 38px 1fr;
		align-items: start;
		column-gap: 13px;
		row-gap: 3px;
		padding: 13px;
		border-radius: 14px;
		line-height: 1.35;
		transition: background-color .25s var(--ease);
	}

	.main-navigation .main-nav ul ul li a:hover,
	.main-navigation .main-nav ul ul li.current-menu-item a {
		background-color: rgba(255,255,255,.05);
	}

	/* Значок слева. Символ задаётся классом пункта меню —
	   его видно и правится в «Внешний вид → Меню». */
	.main-navigation .main-nav ul ul li a::before {
		content: '◇';
		grid-row: span 2;
		width: 38px;
		height: 38px;
		display: grid;
		place-items: center;
		border-radius: 11px;
		background: var(--accent-12);
		border: 1px solid var(--accent-30);
		color: var(--accent-soft);
		font-size: 15px;
	}

	.main-navigation .main-nav ul ul li.ico-context > a::before   { content: '◎'; }
	.main-navigation .main-nav ul ul li.ico-direct > a::before    { content: '▶'; }
	.main-navigation .main-nav ul ul li.ico-google > a::before    { content: 'G'; }
	.main-navigation .main-nav ul ul li.ico-vk > a::before        { content: '◈'; }
	.main-navigation .main-nav ul ul li.ico-tg > a::before        { content: '✈'; }
	.main-navigation .main-nav ul ul li.ico-max > a::before       { content: '✦'; }
	.main-navigation .main-nav ul ul li.ico-avito > a::before     { content: '▤'; }
	.main-navigation .main-nav ul ul li.ico-seo > a::before       { content: '↗'; }
	.main-navigation .main-nav ul ul li.ico-ai > a::before        { content: '✳'; }
	.main-navigation .main-nav ul ul li.ico-maps > a::before      { content: '◉'; }
	.main-navigation .main-nav ul ul li.ico-serm > a::before      { content: '★'; }
	.main-navigation .main-nav ul ul li.ico-content > a::before   { content: '✎'; }
	.main-navigation .main-nav ul ul li.ico-smm > a::before       { content: '◍'; }
	.main-navigation .main-nav ul ul li.ico-site > a::before      { content: '❐'; }
	.main-navigation .main-nav ul ul li.ico-analytics > a::before { content: '▦'; }

	.main-navigation .main-nav ul ul li.ico-industry > a::before  { content: '▩'; }
	.main-navigation .main-nav ul ul li.ico-gates > a::before     { content: '▥'; }
	.main-navigation .main-nav ul ul li.ico-glass > a::before     { content: '◧'; }
	.main-navigation .main-nav ul ul li.ico-stone > a::before     { content: '◆'; }
	.main-navigation .main-nav ul ul li.ico-furniture > a::before { content: '◨'; }
	.main-navigation .main-nav ul ul li.ico-repair > a::before    { content: '▧'; }
	.main-navigation .main-nav ul ul li.ico-realty > a::before    { content: '▣'; }
	.main-navigation .main-nav ul ul li.ico-drill > a::before     { content: '◇'; }
	.main-navigation .main-nav ul ul li.ico-auto > a::before      { content: '◐'; }
	.main-navigation .main-nav ul ul li.ico-b2c > a::before       { content: '✧'; }
	.main-navigation .main-nav ul ul li.ico-b2b > a::before       { content: '⊞'; }
}

/* Название и пояснение — по одной строке. Если текст длиннее,
   он подрезается многоточием, но карточка не растёт и промежутки
   в меню остаются одинаковыми. */
.mm__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.mm__desc {
	display: block;
	grid-column: 2;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink-50);
}

@media (min-width: 1025px) {
	.mm__title,
	.mm__desc {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* На телефоне выпадающее меню остаётся простым списком */
@media (max-width: 1024px) {
	.main-navigation .main-nav ul ul li a {
		line-height: 1.4;
		padding: 11px 20px;
		font-size: 14.5px;
	}

	.mm__desc {
		display: none;
	}
}

/* Пункт-кнопка */
.main-navigation .main-nav > ul > li.cta > a {
	margin-left: 10px;
	padding: 13px 22px;
	border-radius: 100px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 10px 34px -14px var(--accent-30);
}

.main-navigation .main-nav > ul > li.cta > a:hover {
	background: var(--accent-2);
	color: #fff;
}

.main-navigation .menu-toggle {
	line-height: 1;
	padding: 18px 0;
	color: var(--ink-70);
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 500;
	background-color: transparent;
	border-radius: 100px;
	box-shadow: none;
	min-height: 0;
}

.main-navigation .menu-toggle:hover {
	color: var(--ink);
	background-color: transparent;
	box-shadow: none;
	transform: none;
}

@media (max-width: 1024px) {
	/* Логотип слева, кнопка меню справа, в одну строку */
	#masthead .inside-header {
		flex-wrap: nowrap;
		justify-content: space-between;
		text-align: left;
	}

	/* Служебные ::before и ::after шаблона в этом ряду занимают края,
	   и логотип с кнопкой уходят к середине. */
	#masthead .inside-header::before,
	#masthead .inside-header::after {
		display: none;
	}

	/* Шаблон показывает кнопку только до 768, а меню здесь скрыто
	   до 1024: на планшете не оставалось ни меню, ни кнопки. */
	#masthead .main-navigation .menu-toggle {
		display: block;
	}

	#masthead .inside-header .site-branding {
		flex: 0 1 auto;
		width: auto;
		margin: 0;
		text-align: left;
	}

	#masthead .main-navigation {
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		position: static;
	}

	/* Само меню выпадает панелью во всю ширину под шапкой */
	#masthead .site-header,
	.site-header {
		position: fixed;
	}

	/* Панель показывается только когда меню открыто кнопкой */
	#masthead .main-navigation:not(.toggled) .main-nav {
		display: none;
	}

	/* Панель фиксированная: так она всегда во всю ширину экрана,
	   независимо от того, что тема считает точкой отсчёта. */
	#masthead .main-navigation.toggled .main-nav {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: 64px;
		width: 100%;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		padding: 8px var(--pad) 24px;
		background-color: var(--bg);
		border-bottom: 1px solid var(--line);
	}

	body.admin-bar #masthead .main-navigation.toggled .main-nav {
		top: 110px;
		max-height: calc(100vh - 110px);
	}

	#masthead .main-navigation.toggled .main-nav > ul {
		display: block;
		width: 100%;
	}

	/* Каждый пункт — своей строкой */
	#masthead .main-navigation.toggled .main-nav > ul > li {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
	}

	/* На главной все пункты ведут на её разделы и считаются текущими,
	   а шаблон красит текущий пункт серым. */
	#masthead .main-navigation .main-nav > ul > li[class*="current-menu-"]:not(.cta):not(.phone) > a {
		background-color: transparent;
		color: var(--ink-70);
	}

	.main-navigation .main-nav > ul > li > a {
		display: block;
		padding: 15px 0;
		line-height: 1.4;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
		color: var(--ink-70);
	}

	.main-navigation .main-nav > ul > li.phone > a {
		margin-left: 0;
		font-family: var(--display);
		font-size: 19px;
		color: var(--ink);
		border-bottom: none;
	}

	.main-navigation .main-nav > ul > li.cta > a {
		display: inline-flex;
		margin: 14px 0 4px;
		padding: 14px 26px;
		border-radius: 100px;
		background: var(--accent);
		color: #fff;
		border-bottom: none;
	}

	#masthead .site-description {
		display: none;
	}

	#masthead .inside-header .site-branding {
		margin-right: 0;
	}
}

/* ─── Подвал ─────────────────────────────────────────── */
.site-footer,
.site-info {
	background-color: var(--bg-2);
	border-top: 1px solid var(--line);
	color: var(--ink-50);
	font-size: 14px;
}

.site-info a {
	color: var(--ink-70);
}

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

/* ─── Поля форм ──────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	width: 100%;
	min-height: 56px;
	padding: 0 20px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

textarea {
	min-height: 140px;
	padding-top: 16px;
	padding-bottom: 16px;
	line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
	color: var(--ink-35);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent-30);
	background: var(--surface-2);
}

/* ─── Отступы секций ─────────────────────────────────── */
/* Класс для блока-секции, ставится в редакторе. */
.section-pad {
	padding-top: var(--sect);
	padding-bottom: var(--sect);
}

.section-pad--tight {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(48px, 6vw, 88px);
}

/* ─── Карточки ───────────────────────────────────────── */
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(22px, 2.4vw, 34px);
	transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}

.card:hover {
	border-color: var(--line-2);
	background: var(--surface-2);
	transform: translateY(-3px);
}

/* ─── Редактор: тот же фон и шрифты, что на сайте ────── */
.editor-styles-wrapper {
	background-color: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
}