/* =========================================================
   ГЛОБАЛЬНЫЕ СТИЛИ (ПЕРЕРАЗБИТО ПО БЛОКАМ + КОММЕНТАРИИ)
   Ничего функционально не менял — только порядок и подписи.
   ========================================================= */

/* ===================== 0) TOKENS / RESET / BASE ===================== */
/* — дизайн-токены, сбросы, базовая типографика, контейнеры, общие секции */
:root {
	/* Палитра / токены */
	--brand: #24a7e0;
	--blue: #55c2f1;
	--blue-strong: #1f6ed6;
	--ink: #0f172a;
	--muted: #64748b;
	--bg: #fff;
	--bg-soft: #f5f7fb;
	--line: #e5e9f0;
	--chip: #f6f8fb;

	/* Сетка / размеры */
	--container: 1160px;
	--pad: 1rem; /* was 16px */
	--radius: 0.75rem; /* was 12px */

	/* Заголовки секций */
	--heading: #5f6b7a;
	--section-title-size: clamp(1.75rem, 4vw, 2.5rem);
	--section-title-weight: 800;

	/* Высота шапки (используется для липкости/смещения скролла/панели меню) */
	--header-offset: 72px;
}

/* Сбросы и типографика */
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
}
html {
	/* Fluid root to make rem-based sizing adapt by screen width */
	font-size: clamp(15px, 1vw + 8px, 18px);
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-offset);
}
body {
	font-family: Inter, system-ui, Arial, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.5;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
ul {
	padding-left: 1.2rem;
}

/* Общие контейнеры и отступы секций */
.container {
	max-width: var(--container);
	margin: 0 auto;
}
.section {
	padding: 40px 0;
}

/* Заголовки секций (общие) */
.section-title {
	margin: 0 0 12px;
	font-size: var(--section-title-size);
	font-weight: var(--section-title-weight);
	color: var(--ink); /* match header color */
	text-align: center;
	line-height: 1.2;
}
.section-sub,
.lead,
.sub {
	margin: 0 0 24px;
	color: var(--muted);
	text-align: center;
}
.h2 {
	font-size: var(--section-title-size);
	margin: 0 0 12px;
	color: var(--ink); /* match header color */
	font-weight: var(--section-title-weight);
}
.blue {
	color: var(--blue);
}
.caps-blue {
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

@media (max-width: 1200px) {
	.container {
		padding: 0 var(--pad);
	}
}
/* ===================== 2) HERO ===================== */
/* — крупный первичный экран с фоновым фото и 4 преимуществами */

.hero {
	position: relative;
	width: 100%;
	color: #fff;
	height: 35rem; /* можно подогнать */
	overflow: hidden;
}

/* Контейнер для фонов */
.hero-slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Каждая картинка */
.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1);
	transition: opacity 1.8s ease, transform 8s ease;
}

/* Активная картинка */
.hero-bg.active {
	opacity: 1;
	transform: scale(1.05); /* лёгкий zoom */
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.1);
}

.hero__shade {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 24px 0 24px 0;
	z-index: 2;
	max-width: var(--container);
}

.hero__title {
	font-weight: 800;
	font-size: clamp(32px, 4.5vw, 52px);
	line-height: 1.05;
	margin: 0 0 5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease;
}
.hero__subtitle {
	font-weight: 350;
	font-size: clamp(22px, 3.2vw, 40px);
	line-height: 1.15;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
	margin-bottom: 15px;
	transition: transform 0.25s ease;
}
.hero__tag {
	margin: 8px 0 28px;
	font-size: clamp(14px, 1.7vw, 19px);
	font-weight: 400;
	opacity: 0.95;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transition: transform 0.25s ease;
}

/* Сетка достоинств */
.hero-list {
	display: flex;
	width: 100%;
	gap: clamp(10px, 1.6vw, 20px);
	align-items: flex-start;
	list-style: none;
	padding: 5px;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(2px);
}

.hero-play img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	cursor: pointer;
	animation: pulseShadow 2s infinite;
	transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* Пульсация тени и лёгкий glow */
@keyframes pulseShadow {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.hero-item {
	text-align: center;
	max-width: 300px;
	margin-inline: auto;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.hero-ico {
	position: relative;
	width: clamp(72px, 7vw, 92px);
	height: auto;
	display: grid;
	place-items: center;
	margin: 0 auto 8px;
}

.hero-ico img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.18));
	transition: transform 0.25s ease;
}

.hero-ico:hover img {
	transform: scale(1.08);
}

.hero-ico__value {
	position: absolute;
	font-weight: 800;
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1;
	letter-spacing: 0.2px;
	color: #fff;
}
.hero-item__title {
	text-wrap: nowrap;
	font-weight: 700;
	font-size: clamp(16px, 2vw, 22px);
	line-height: 1.15;
	margin: 4px 0 6px;
	transition: transform 0.25s ease;
}
.hero-item__desc {
	font-size: clamp(12px, 1.4vw, 16px);
	line-height: 1.3;
	max-width: 280px;
	margin: 0 auto;
	opacity: 0.9;
	transition: transform 0.25s ease;
}

.hero-item__desc:hover,
.hero-item__title:hover {
	transform: scale(1.1);
}

/* --- Hero: АДАПТИВ --- */
@media (max-width: 768px) {
	.hero__title {
		font-size: 30px;
	}
	.service__caption--right {
		/* эта тень под сервис-карточкой видна поверх hero-фона на узких */
		background: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0) 20%,
			rgba(0, 0, 0, 0.6) 100%
		);
		padding: 20px;
	}
}

@media (max-width: 540px) {
	.hero-ico {
		width: clamp(52px, 5vw, 62px);
	}
	.hero-item__desc {
		display: none;
	}
}

/* ===================== 3) PROMO (лента акций) ===================== */
/* — горизонтальная прокрутка карточек-баннеров акций */

.promo-section {
	padding: 60px 0;
}
.promo-section .h2 {
	text-align: center;
	margin-bottom: 12px;
}
.promo-section .lead {
	text-align: center;
	font-size: clamp(16px, 2vw, 20px);
	color: #555;
	margin-bottom: 28px;
}

/* Лента карточек */
.promo-grid {
	display: flex;
	gap: 16px;
	margin-top: 20px;
	padding: 10px 0 14px;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
/* Карточка баннера */
.promo-card {
	position: relative;
	flex: 0 0 80%;
	max-width: 520px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #f0f0f0;
	transition: transform 0.3s ease;
	scroll-snap-align: start;
	transform-origin: center;
	cursor: pointer;
}
.promo-card img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}
.promo-card:hover {
	transform: scale(1.02);
	z-index: 3;
}

/* Скроллбар (WebKit) */
.promo-grid::-webkit-scrollbar {
	height: 8px;
}
.promo-grid::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.12);
	border-radius: 4px;
}
.promo-grid::-webkit-scrollbar-track {
	background: transparent;
}

/* Предпочтение: уменьшить анимации */
@media (prefers-reduced-motion: reduce) {
	.promo-grid {
		scroll-behavior: auto;
	}
}

/* --- Promo: АДАПТИВ (ширина карточек) --- */
@media (min-width: 768px) {
	.promo-card {
		flex-basis: 48%;
	}
}
@media (min-width: 1024px) {
	.promo-card {
		flex-basis: 32%;
	}
}

/* ===================== 4) SERVICES (широкая карточка) ===================== */
/* — большая карточка «Дома» со сдвинутым затемнением справа */

.section .section-title,
.section .section-sub {
	text-align: center;
}

.service {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	aspect-ratio: 24 / 9; /* фиксированная пропорция */
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	z-index: 3;
}

.service img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.service__caption--right {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 24px 36px;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.55) 100%
	);
	color: #fff;
}
.service__caption--bottom {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px 36px;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0) 60%
	);
	color: #fff;
}
.service__content {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
	text-align: right;
}
.service__caption--bottom .service__content {
	align-items: center;
	text-align: center;
}
.service__title {
	font-weight: 800;
	font-size: clamp(26px, 3.5vw, 42px);
	line-height: 1.2;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.service__text {
	font-size: clamp(14px, 2vw, 18px);
	opacity: 0.92;
}

/* карточка — целиком ссылка */
.service--link {
	display: block;
	color: inherit;
}

.service--link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 4px;
	border-radius: 16px;
}

/* --- Services: АДАПТИВ --- */
@media (max-width: 768px) {
	.service__content {
		max-width: 100%;
	}
}

/* ===================== 5) BUTTONS (глобальные) ===================== */
/* — базовые кнопки, используются в Services и CTA */

.btn {
	display: inline-block;
	padding: 14px 22px;
	border-radius: 10px;
	background: var(--blue);
	color: #fff;
	font-weight: 700;
	font-size: clamp(16px, 2vw, 20px);
	transition: background 0.25s ease, transform 0.2s ease;
}
.btn:hover {
	background: #1a6fbf;
	transform: translateY(-1px);
}
.btn:active {
	transform: translateY(0);
}
.btn--large {
	padding: 14px 26px;
}

/* ===================== 6) CTA (призыв к действию) ===================== */

.cta {
	background: var(--bg-soft);
	padding: 36px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.cta__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cta__box--center {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	min-height: 240px;
	margin: 0 auto;
}
.cta__text {
	max-width: 720px;
}
.cta__box--center .btn {
	display: block;
	margin: 4px auto 0;
}

/* --- CTA: АДАПТИВ --- */
@media (max-width: 1100px) {
	.cta__box {
		align-items: center !important;
		justify-content: center;
		text-align: center;
	}
}

/* ===================== 7) FEATURES («Почему мы») ===================== */

.features {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}
.feature {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px;
	text-align: center;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.feature img {
	width: 56px;
	height: 56px;
	margin: 0 auto 10px;
	display: block;
	opacity: 0.9;
	transition: transform 0.35s ease;
}

.feature:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.feature:hover img {
	transform: scale(1.08);
}

.feature__title {
	margin: 4px 0 6px;
	font-size: 18px;
	font-weight: 600;
}
.feature__text {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

/* --- Features: АДАПТИВ --- */
@media (max-width: 1100px) {
	.features {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Home Services: mobile tweak to fit button --- */
@media (max-width: 768px) {
	#services .service {
		aspect-ratio: 24 / 12;
	}
}