/**
 * HTS Dental Medium: основной каркас темы.
 *
 * Спецификация: _theme_medium/layout-spec.md.
 * Палитра: тёплый молочный фон, белые карточки, эвкалиптовый акцент,
 * песочный — только в мелких маркерах. Footer — глубокий графит.
 * Шрифты: дисплейный serif (DM Serif Display / Prata для кириллицы),
 * интерфейсный Inter. Самохостинг, font-display: swap.
 */

/* ==========================================================================
   1. Шрифты (самохостинг, сабсеты cyrillic + latin)
   ========================================================================== */

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

@font-face {
	font-family: 'Prata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/prata-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

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

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

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

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

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

/* ==========================================================================
   2. Токены и сброс
   ========================================================================== */

:root {
	--color-bg: #F8F8F5;
	--color-surface: #FFFFFF;
	--color-text: #172326;
	--color-text-muted: #657471;
	--color-primary: #6E9B8D;
	--color-primary-hover: #5A897A;
	--color-primary-soft: #EAF3EF;
	--color-sand: #D8B98C;
	--color-dark-footer: #172326;
	--color-border: rgba(23, 35, 38, 0.12);

	--font-display: 'DM Serif Display', 'Prata', Georgia, serif;
	--font-body: 'Inter', 'Manrope', Arial, sans-serif;

	--radius-panel: 28px;
	--radius-card: 16px;
	--radius-btn: 12px;

	--shadow-soft: 0 10px 32px rgba(23, 35, 38, 0.10);
	--shadow-faint: 0 4px 18px rgba(23, 35, 38, 0.06);

	--container: 1320px;
	--gutter: 64px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

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

img {
	display: block;
}

h1, h2, h3, h4, p, ul, ol, figure {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

/* ==========================================================================
   3. Базовые элементы
   ========================================================================== */

.container {
	width: min(100% - var(--gutter), var(--container));
	margin-inline: auto;
}

.container--narrow {
	max-width: 820px;
}

.section {
	padding-block: 112px;
}

.section--muted {
	padding-block: 96px;
}

.section-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.section-subtitle {
	margin-top: 16px;
	max-width: 640px;
	color: var(--color-text-muted);
	font-size: 19px;
}

.section-head {
	margin-bottom: 56px;
}

.section__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
}

.section__intro {
	margin-top: 16px;
	color: var(--color-text-muted);
}

.page-content {
	margin-top: 24px;
}

.page-content h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	margin: 32px 0 12px;
}

.page-content p {
	margin-bottom: 12px;
}

/* --- Кнопки --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 200ms ease, border-color 200ms ease,
		background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

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

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--color-primary);
	color: #fff;
}

.btn--primary:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 8px 22px rgba(110, 155, 141, 0.32);
}

.btn--ghost {
	border-color: var(--color-primary);
	color: var(--color-primary-hover);
	background: transparent;
}

.btn--ghost:hover {
	background: var(--color-primary-soft);
}

.btn--small {
	min-height: 42px;
	padding: 9px 18px;
	font-size: 15px;
}

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

.btn--big {
	min-height: 54px;
	font-size: 16px;
}

:focus-visible {
	outline: 2px solid var(--color-primary-hover);
	outline-offset: 2px;
	border-radius: 4px;
}

.btn:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -48px;
	z-index: 10000;
	padding: 10px 16px;
	background: var(--color-text);
	color: #fff;
	border-radius: 0 0 10px 10px;
	text-decoration: none;
	transition: top 160ms ease;
}

.skip-link:focus-visible {
	top: 0;
}

/* --- Появление по скроллу (JS добавляет .is-visible) --- */

[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 420ms ease, transform 420ms ease;
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

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

.site-header {
	position: relative;
	z-index: 20;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 84px;
}

.site-header__brand {
	flex: 0 0 auto;
	display: block;
}

.site-header__brand img {
	width: 210px;
	height: auto;
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
}

.site-nav__list a {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	transition: color 180ms ease;
}

.site-nav__list a:hover {
	color: var(--color-primary-hover);
}

.site-header__phone {
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: color 180ms ease;
}

.site-header__phone:hover {
	color: var(--color-primary-hover);
}

.site-header__cta {
	white-space: nowrap;
}

/* Бургер */

.site-header__burger {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-surface);
	cursor: pointer;
	padding: 0;
}

.site-header__burger-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	height: 100%;
}

.site-header__burger-box span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform 200ms ease, opacity 200ms ease;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-box span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-box span:nth-child(2) {
	opacity: 0;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-box span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
	.site-header__inner {
		flex-wrap: wrap;
		min-height: 72px;
		gap: 12px;
	}

	.site-header__brand img {
		width: 180px;
	}

	.site-header__burger {
		display: block;
		margin-left: auto;
	}

	.site-header__menu {
		display: none;
		flex: 0 0 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 8px 0 18px;
	}

	.site-header__menu.is-open {
		display: flex;
		animation: menu-open 240ms ease;
	}

	@keyframes menu-open {
		from { opacity: 0; transform: translateY(-6px); }
		to { opacity: 1; transform: none; }
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list a {
		display: block;
		padding: 12px 2px;
		font-size: 17px;
		border-bottom: 1px solid var(--color-border);
	}

	.site-header__phone {
		padding: 12px 2px 4px;
	}

	.site-header__cta {
		margin-top: 10px;
	}
}

@media (max-width: 767px) {
	.site-header__brand img {
		width: 158px;
	}
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.hero {
	padding-block: 64px 96px;
}

.hero__grid {
	display: grid;
	grid-template-columns: 46% 1fr;
	gap: 56px;
	align-items: center;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--color-primary-soft);
	color: var(--color-primary-hover);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.hero__title {
	margin-top: 22px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(40px, 5.2vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.hero__text {
	margin-top: 22px;
	max-width: 480px;
	font-size: 19px;
	color: var(--color-text-muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.hero__trust {
	margin-top: 26px;
	color: var(--color-text-muted);
	font-size: 14px;
	letter-spacing: 0.01em;
}

/* Фото с плавающей карточкой */

.hero-photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-panel);
	aspect-ratio: 1600 / 1067;
	background: var(--color-primary-soft);
}

.hero-photo picture,
.hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-photo img {
	object-fit: cover;
}

.hero-trust-card {
	position: absolute;
	right: 28px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 300px;
	padding: 18px 22px;
	border: 1px solid rgba(23, 35, 38, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 10px 32px rgba(23, 35, 38, 0.12);
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.3;
}

.hero-trust-card .icon {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	color: var(--color-primary);
}

.icon {
	display: block;
	width: 28px;
	height: 28px;
	color: var(--color-primary);
}

@media (max-width: 1199px) {
	.hero__grid {
		gap: 36px;
	}
}

@media (max-width: 767px) {
	.hero {
		padding-block: 32px 64px;
	}

	.hero__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.hero__text {
		font-size: 17px;
	}

	.hero__actions .btn {
		flex: 1 1 100%;
	}

	.hero-photo {
		aspect-ratio: 900 / 750;
		border-radius: 20px;
	}

	.hero-trust-card {
		right: 14px;
		bottom: 14px;
		max-width: 245px;
		padding: 13px 15px;
		gap: 10px;
		font-size: 14px;
	}

	.hero-trust-card .icon {
		width: 22px;
		height: 22px;
	}
}

/* ==========================================================================
   6. Быстрые доказательства (mint-панель)
   ========================================================================== */

.trust {
	padding-bottom: 112px;
}

.trust__panel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	padding: 44px 48px;
	background: var(--color-primary-soft);
	border-radius: var(--radius-panel);
}

.trust__item {
	display: grid;
	gap: 10px;
	padding-inline: 36px;
}

.trust__item:first-child {
	padding-left: 0;
}

.trust__item + .trust__item {
	border-left: 1px solid rgba(110, 155, 141, 0.35);
}

.trust__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.trust__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-sand);
	transform: translateY(-2px);
}

.trust__text {
	color: var(--color-text-muted);
	font-size: 16px;
}

@media (max-width: 1023px) {
	.trust__panel {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 36px 32px;
	}

	.trust__item {
		padding-inline: 0;
	}

	.trust__item + .trust__item {
		border-left: 0;
		border-top: 1px solid rgba(110, 155, 141, 0.35);
		padding-top: 24px;
	}
}

@media (max-width: 767px) {
	.trust {
		padding-bottom: 64px;
	}

	.trust__panel {
		padding: 28px 22px;
		border-radius: 20px;
	}
}

/* ==========================================================================
   7. Блок доверия и возражений
   ========================================================================== */

.objections {
	padding-block: 0 112px;
}

.objections__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.objections__grid {
	margin-top: 48px;
}

.objections__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.objections__pill::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-primary);
}

.objections__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.objections__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	transition: border-color 200ms ease, background-color 200ms ease,
		transform 200ms ease, box-shadow 200ms ease;
}

.objections__item:hover {
	border-color: rgba(110, 155, 141, 0.5);
	transform: translateY(-2px);
	box-shadow: var(--shadow-faint);
}

.objections__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-primary-soft);
	color: var(--color-primary);
}

.objections__icon .icon {
	width: 26px;
	height: 26px;
}

.objections__name {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
}

.objections__text {
	color: var(--color-text-muted);
	font-size: 16px;
}

.objections__ending {
	margin-top: 44px;
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.25;
	text-align: center;
}

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

@media (max-width: 767px) {
	.objections {
		padding-bottom: 64px;
	}

	.objections__grid {
		grid-template-columns: 1fr;
	}

	.objections__ending {
		margin-top: 32px;
	}
}

/* ==========================================================================
   8. Услуги
   ========================================================================== */

.services {
	padding-block: 0 112px;
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}

.service {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 30px 28px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	transition: transform 200ms ease, border-color 200ms ease,
		background-color 200ms ease, box-shadow 200ms ease;
}

.service:hover {
	transform: translateY(-2px);
	border-color: rgba(110, 155, 141, 0.5);
	box-shadow: var(--shadow-soft);
}

/* Ведущая карточка терапии: эвкалиптовая рамка и мягкий фон */
.service--featured {
	background: linear-gradient(180deg, var(--color-primary-soft), var(--color-surface) 62%);
	border-color: var(--color-primary);
}

.service__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.service__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-primary-soft);
	color: var(--color-primary);
}

.service--featured .service__icon {
	background: rgba(255, 255, 255, 0.8);
}

.service__icon .icon {
	width: 26px;
	height: 26px;
}

.service__note {
	display: inline-flex;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--color-sand);
	color: #3d2f1c;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.service__name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.1;
}

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

.service__price {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.service__term {
	color: var(--color-text-muted);
	font-size: 15px;
}

.service__features {
	display: grid;
	gap: 10px;
}

.service__features li {
	position: relative;
	padding-left: 22px;
	color: var(--color-text-muted);
	font-size: 15.5px;
	line-height: 1.4;
}

.service__features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-sand);
}

.service__open {
	margin-top: auto;
}

.service--featured .service__open {
	background: var(--color-primary);
	color: #fff;
}

.service--featured .service__open:hover {
	background: var(--color-primary-hover);
}

@media (max-width: 1023px) {
	.services__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

@media (max-width: 767px) {
	.services {
		padding-bottom: 64px;
	}

	.services__grid {
		gap: 16px;
	}

	.service {
		padding: 24px 20px;
	}

	/* Ведущая карточка — первой на mobile */
	.services__grid {
		display: flex;
		flex-direction: column;
	}

	.service--featured {
		order: -1;
	}
}

/* ==========================================================================
   9. Этапы лечения
   ========================================================================== */

.process {
	padding-block: 0 112px;
}

.process__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	counter-reset: step;
}

.process__step {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 34px 40px 8px 0;
}

.process__step:not(:last-child)::after {
	content: '';
	position: absolute;
	/* Линия между шагами: стартует после кружка с номером (56px + 16px зазор),
	   по вертикали — центр кружка (padding-top 34px + радиус 28px) */
	top: 61px;
	right: 0;
	left: 72px;
	height: 1px;
	background: linear-gradient(90deg, var(--color-border) 60%, transparent);
}

.process__num {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid rgba(110, 155, 141, 0.45);
	color: var(--color-primary-hover);
	font-family: var(--font-display);
	font-size: 22px;
}

.process__name {
	font-size: 22px;
	font-weight: 600;
}

.process__text {
	color: var(--color-text-muted);
	font-size: 16px;
	max-width: 320px;
}

@media (max-width: 1023px) {
	.process__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.process__step {
		padding: 24px 0 8px;
	}

	.process__step:not(:last-child)::after {
		left: 78px;
		right: 24px;
		top: 52px;
	}
}

@media (max-width: 767px) {
	.process {
		padding-bottom: 64px;
	}
}

/* ==========================================================================
   10. Промежуточный CTA
   ========================================================================== */

.cta-band {
	padding-block: 0 112px;
}

.cta-band__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 48px 56px;
	background: var(--color-primary-soft);
	border-radius: var(--radius-panel);
}

.cta-band__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.12;
}

.cta-band__text {
	margin-top: 12px;
	max-width: 520px;
	color: var(--color-text-muted);
	font-size: 17px;
}

.cta-band__btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.cta-band {
		padding-bottom: 64px;
	}

	.cta-band__box {
		flex-direction: column;
		align-items: stretch;
		padding: 32px 24px;
		border-radius: 20px;
		text-align: left;
	}

	.cta-band__btn {
		width: 100%;
	}
}

/* ==========================================================================
   11. Форма (двухколоночная секция)
   ========================================================================== */

.lead {
	padding-block: 0 120px;
}

.lead__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.lead__badge {
	display: inline-flex;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--color-primary-soft);
	color: var(--color-primary-hover);
	font-size: 14px;
	font-weight: 600;
}

.lead__aside .section-title {
	margin-top: 20px;
}

.lead__text {
	margin-top: 18px;
	color: var(--color-text-muted);
	font-size: 18px;
	max-width: 460px;
}

.lead__points {
	display: grid;
	gap: 14px;
	margin-top: 28px;
}

.lead__points li {
	position: relative;
	padding-left: 30px;
	font-size: 16.5px;
	font-weight: 600;
}

.lead__points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-primary-soft);
}

.lead__points li::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 6px;
	width: 8px;
	height: 5px;
	border-left: 2px solid var(--color-primary-hover);
	border-bottom: 2px solid var(--color-primary-hover);
	transform: rotate(-45deg);
}

/* Правая белая карточка формы */

.lead__box {
	position: relative;
	padding: 36px 36px 32px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-faint);
}

.lead__aside-note {
	position: absolute;
	top: -16px;
	right: 28px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-text-muted);
	box-shadow: var(--shadow-faint);
}

.lead__aside-note::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}

.lead__box-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
}

.lead-form {
	margin-top: 24px;
	display: grid;
	gap: 18px;
}

.lead-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.field {
	display: grid;
	gap: 8px;
}

.field label {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}

.field input[type="text"],
.field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-bg);
	font: inherit;
	font-size: 16px;
	color: var(--color-text);
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	background: var(--color-surface);
	box-shadow: 0 0 0 3px rgba(110, 155, 141, 0.18);
}

.field input.is-invalid,
.field textarea.is-invalid {
	border-color: #c4624f;
}

.field--check label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-text-muted);
}

.field--check input {
	margin-top: 2px;
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	accent-color: var(--color-primary);
}

.field--check a {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.field-error {
	margin: 0;
	color: #b04a37;
	font-size: 13.5px;
}

.hp-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.lead-form__note {
	color: var(--color-text-muted);
	font-size: 13.5px;
	text-align: center;
}

.form-status {
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--color-primary-soft);
	color: var(--color-primary-hover);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 18px;
}

.form-status--err {
	background: #f7ece9;
	color: #a4442f;
}

.form-status--ok {
	background: var(--color-primary-soft);
	color: var(--color-primary-hover);
}

.form-status__retry {
	margin-left: 12px;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* PoW-вставка */

.hts-pow {
	min-height: 20px;
}

.hts-pow:empty {
	display: none;
}

/* Плашка выбранной услуги */

.selected-service {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding: 14px 16px;
	border: 1px solid rgba(110, 155, 141, 0.36);
	border-radius: var(--radius-card);
	background: var(--color-primary-soft);
	animation: selected-in 260ms ease;
}

@keyframes selected-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

.selected-service[hidden] {
	display: none;
}

.selected-service__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	color: var(--color-primary);
	background: rgba(255, 255, 255, 0.72);
}

.selected-service__icon .icon {
	width: 24px;
	height: 24px;
}

.selected-service__content {
	display: grid;
	gap: 2px;
}

.selected-service__eyebrow {
	color: var(--color-text-muted);
	font-size: 12px;
}

.selected-service__title {
	font-size: 17px;
}

.selected-service__meta {
	color: var(--color-text-muted);
	font-size: 13px;
}

.selected-service__change {
	border: 0;
	padding: 8px;
	background: transparent;
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.selected-service__remove {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.selected-service__remove:hover {
	background: rgba(23, 35, 38, 0.06);
	color: var(--color-text);
}

@media (max-width: 1199px) {
	.lead__grid {
		gap: 36px;
	}
}

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

	.lead__box {
		max-width: 640px;
	}
}

@media (max-width: 767px) {
	.lead {
		padding-bottom: 64px;
	}

	.lead__box {
		padding: 26px 20px;
		border-radius: 20px;
	}

	.lead__aside-note {
		position: static;
		margin-bottom: 18px;
		width: fit-content;
	}

	.lead-form__row {
		grid-template-columns: 1fr;
	}

	.selected-service {
		grid-template-columns: auto 1fr auto;
		gap: 10px;
	}

	.selected-service__remove {
		grid-column: 3;
		grid-row: 1;
	}

	.selected-service__change {
		grid-column: 2 / -1;
		justify-self: start;
		padding: 4px 0 0;
	}
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	background: var(--color-dark-footer);
	color: rgba(255, 255, 255, 0.82);
	padding: 72px 0 32px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
}

.site-footer__brand {
	display: inline-block;
}

.site-footer__brand img {
	width: 230px;
	height: auto;
	/* Логотип с тёмным текстом не читается на графите: инвертируем в светлое */
	filter: invert(1) hue-rotate(180deg) saturate(0.4) brightness(1.6);
}

.site-footer__desc {
	margin-top: 20px;
	max-width: 360px;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.site-footer__cta {
	margin-top: 24px;
}

.site-footer__title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 18px;
}

.site-footer__list {
	display: grid;
	gap: 12px;
	font-size: 16px;
}

.site-footer__list a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 180ms ease;
}

.site-footer__list a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__list span {
	color: rgba(255, 255, 255, 0.72);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	transition: color 180ms ease;
}

.site-footer__legal a:hover {
	color: #fff;
}

.site-footer__legal span:first-child {
	margin-right: auto;
}

@media (max-width: 1023px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.site-footer {
		padding: 56px 0 24px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.site-footer__legal {
		flex-direction: column;
		gap: 10px;
	}

	.site-footer__legal span:first-child {
		margin-right: 0;
	}
}

/* ==========================================================================
   13. Modal услуги
   ========================================================================== */

.modal,
.document-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.modal__overlay,
.document-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(23, 35, 38, 0.5);
	opacity: 0;
	transition: opacity 220ms ease;
}

.modal__window,
.document-modal__window {
	position: relative;
	background: var(--color-surface);
	/* Модалки разметочно внутри тёмного футера: возвращаем тёмный текст,
	   иначе наследуется белый цвет футера */
	color: var(--color-text);
	border-radius: var(--radius-panel);
	box-shadow: 0 24px 64px rgba(23, 35, 38, 0.28);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.modal.is-open .modal__overlay,
.document-modal.is-open .document-modal__overlay {
	opacity: 1;
}

.modal.is-open .modal__window,
.document-modal.is-open .document-modal__window {
	opacity: 1;
	transform: none;
}

.modal__window {
	width: min(560px, calc(100% - 40px));
	margin: 8vh auto 0;
	padding: 40px 40px 32px;
	max-height: 84vh;
	overflow-y: auto;
}

.modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--color-surface);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.modal__close:hover {
	background: var(--color-primary-soft);
	border-color: var(--color-primary);
}

.modal__name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
	padding-right: 40px;
}

.modal__desc {
	margin-top: 14px;
	color: var(--color-text-muted);
	font-size: 16.5px;
}

.modal__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 22px;
	padding: 18px 22px;
	background: var(--color-primary-soft);
	border-radius: var(--radius-card);
}

.modal__price {
	flex: 1 1 60%;
	min-width: 160px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.modal__price-label {
	/* «от» в одну строку с ценой (раньше был block — уходило на вторую строку) */
	display: inline;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-text-muted);
	margin-right: 6px;
	vertical-align: baseline;
}

/* Пустой лейбл (у цены без «от») не оставляет отступа */
.modal__price-label:empty {
	display: none;
	margin: 0;
}

.modal__term {
	align-self: center;
	color: var(--color-text-muted);
	font-size: 15px;
}

.modal__features {
	display: grid;
	gap: 10px;
	margin-top: 22px;
}

.modal__features li {
	position: relative;
	padding-left: 26px;
	font-size: 15.5px;
}

.modal__features li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-sand);
}

.modal__order {
	margin-top: 26px;
	width: 100%;
}

.modal__note {
	margin-top: 12px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 13.5px;
}

@media (max-width: 767px) {
	.modal__window {
		width: calc(100% - 24px);
		margin-top: 4vh;
		max-height: 92vh;
		padding: 30px 22px 24px;
	}
}

/* ==========================================================================
   14. Fullscreen document-modal (согласие на обработку ПД)
   ========================================================================== */

.document-modal__window {
	width: min(920px, calc(100% - 48px));
	height: min(88vh, 100%);
	margin: 6vh auto 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.document-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-btn);
	background: var(--color-surface);
	color: var(--color-primary-hover);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.document-modal__close:hover {
	background: var(--color-primary);
	color: #fff;
}

.document-modal__close span[aria-hidden] {
	font-size: 18px;
	line-height: 1;
}

.document-modal__brand {
	padding: 24px 48px;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-display);
	font-size: 20px;
}

.document-modal__brand small {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-text-muted);
}

.document-modal__body {
	padding: 36px 48px 48px;
	overflow-y: auto;
	font-size: 16px;
	line-height: 1.6;
}

.document-modal__eyebrow {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary-hover);
}

.document-modal__title {
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.12;
}

.document-modal__sub {
	margin-top: 8px;
	color: var(--color-text-muted);
}

/* Плашка о демонстрационном характере страницы */
.document-modal__demo {
	display: grid;
	gap: 6px;
	margin: 20px 0 4px;
	padding: 14px 16px;
	border: 1px solid rgba(110, 155, 141, 0.36);
	border-radius: var(--radius-card);
	background: var(--color-primary-soft);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
}

.document-modal__demo strong {
	font-size: 14.5px;
}

.document-modal__demo a {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.document-modal__body h2 {
	margin: 32px 0 10px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
}

.document-modal__body p {
	margin-bottom: 10px;
}

.document-modal__return {
	display: inline-block;
	margin-top: 28px;
	color: var(--color-text-muted);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.document-modal__return:hover {
	color: var(--color-primary-hover);
}

@media (max-width: 767px) {
	.document-modal__window {
		width: 100%;
		height: 100%;
		margin: 0;
		border-radius: 0;
	}

	.document-modal__brand {
		padding: 18px 22px;
	}

	.document-modal__body {
		padding: 24px 22px 40px;
	}

	.document-modal__close {
		top: 12px;
		right: 12px;
		padding: 10px 14px;
	}

	.document-modal__close span:not([aria-hidden]) {
		display: none;
	}
}

/* ==========================================================================
   15. Служебное
   ========================================================================== */

body.has-modal {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}