@font-face {
	font-family: "Museo Sans Cyrl 500";
	src: url("./fonts/MuseoSansCyrl-500.eot");
	src:
		local("MuseoSansCyrl-500"),
		url("./fonts/MuseoSansCyrl-500.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-500.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-500.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Museo Sans Cyrl 300";
	src: url("./fonts/MuseoSansCyrl-300Italic.eot");
	src:
		local("MuseoSansCyrl-300Italic"),
		url("./fonts/MuseoSansCyrl-300Italic.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-300Italic.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-300Italic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Museo Sans Cyrl 500";
	src: url("./fonts/MuseoSansCyrl-500Italic.eot");
	src:
		local("MuseoSansCyrl-500Italic"),
		url("./fonts/MuseoSansCyrl-500Italic.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-500Italic.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-500Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Museo Sans Cyrl 900";
	src: url("./fonts/MuseoSansCyrl-900.eot");
	src:
		local("MuseoSansCyrl-900"),
		url("./fonts/MuseoSansCyrl-900.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-900.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-900.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Museo Sans Cyrl 700";
	src: url("./fonts/MuseoSansCyrl-700.eot");
	src:
		local("MuseoSansCyrl-700"),
		url("./fonts/MuseoSansCyrl-700.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-700.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-700.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Museo Sans Cyrl 700";
	src: url("./fonts/MuseoSansCyrl-700Italic.eot");
	src:
		local("MuseoSansCyrl-700Italic"),
		url("./fonts/MuseoSansCyrl-700Italic.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-700Italic.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-700Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Museo Sans Cyrl 300";
	src: url("./fonts/MuseoSansCyrl-300.eot");
	src:
		local("MuseoSansCyrl-300"),
		url("./fonts/MuseoSansCyrl-300.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-300.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-300.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Museo Sans Cyrl 100";
	src: url("./fonts/MuseoSansCyrl-100.eot");
	src:
		local("MuseoSansCyrl-100"),
		url("./fonts/MuseoSansCyrl-100.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-100.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-100.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Museo Sans Cyrl 100";
	src: url("./fonts/MuseoSansCyrl-100Italic.eot");
	src:
		local("MuseoSansCyrl-100Italic"),
		url("./fonts/MuseoSansCyrl-100Italic.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-100Italic.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-100Italic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Museo Sans Cyrl 900";
	src: url("./fonts/MuseoSansCyrl-900Italic.eot");
	src:
		local("Museo Sans Cyrl 900 Italic"),
		local("MuseoSansCyrl-900Italic"),
		url("./fonts/MuseoSansCyrl-900Italic.eot?#iefix") format("embedded-opentype"),
		url("./fonts/MuseoSansCyrl-900Italic.woff") format("woff"),
		url("./fonts/MuseoSansCyrl-900Italic.ttf") format("truetype");
	font-weight: bold;
	font-style: italic;
}

:root {
	--text: #6b6375;
	--text-h: #08060d;
	--bg: #fff;
	--border: #e5e4e7;
	--code-bg: #f4f3ec;
	--accent: #aa3bff;
	--accent-bg: rgba(170, 59, 255, 0.1);
	--accent-border: rgba(170, 59, 255, 0.5);
	--social-bg: rgba(244, 243, 236, 0.5);
	--shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

	--sans: system-ui, "Segoe UI", Roboto, sans-serif;
	--heading: system-ui, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, Consolas, monospace;
	--heading-font: "Museo Sans Cyrl 500", var(--heading);
	--blue: #2e5edb;

	font: 18px/145% var(--heading-font);
	letter-spacing: 0.18px;
	color-scheme: light dark;
	color: var(--text);
	background: var(--bg);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	@media (max-width: 1024px) {
		font-size: 16px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: #9ca3af;
		--text-h: #f3f4f6;
		--bg: #16171d;
		--border: #2e303a;
		--code-bg: #1f2028;
		--accent: #c084fc;
		--accent-bg: rgba(192, 132, 252, 0.15);
		--accent-border: rgba(192, 132, 252, 0.5);
		--social-bg: rgba(47, 48, 58, 0.5);
		--shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
	}

	#social .button-icon {
		filter: invert(1) brightness(2);
	}
}

body {
	margin: 0;
}

h1,
h2 {
	font-family: var(--heading);
	font-weight: 500;
	color: var(--text-h);
}

h1 {
	font-size: 56px;
	letter-spacing: -1.68px;
	margin: 32px 0;
	@media (max-width: 1024px) {
		font-size: 36px;
		margin: 20px 0;
	}
}
h2 {
	font-size: 24px;
	line-height: 118%;
	letter-spacing: -0.24px;
	margin: 0 0 8px;
	@media (max-width: 1024px) {
		font-size: 20px;
	}
}
p {
	margin: 0;
}

/* Контейнер контента */
.container {
	width: 100%;
	max-width: 1680px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

/* ---------- Хиро ---------- */
.hero {
	position: relative;
	z-index: 0;
	/* подтягиваем хиро вверх на высоту стеклянной шапки (.hero__header),
	   чтобы она легла поверх верхней части картинки */
	margin-top: -112px;
	height: 901px;
	overflow: hidden;
	color: #fff;
	background-color: #23282e;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}

/* Слайдер (Swiper) — на всю площадь хиро */
.hero__slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: 100%;
}
.hero__slider .swiper-slide {
	position: relative;
	overflow: hidden;
}
.slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
/* Оверлей: слева темнее — для читаемости текста */
.hero__slider .swiper-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(47, 52, 58, 0.75) 0%, rgba(47, 52, 58, 0.345) 100%);
}
.slide__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 112px; /* под стеклянный хедер */
}

/* Контент слайда */
.hero h1 {
	margin: 0;
	max-width: 68%;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 3.6vw, 60px);
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.slide__lead {
	max-width: 700px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
}
.slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
}

.btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 25px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	line-height: 19px;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 0.2s,
		border-color 0.2s;
}
.btn svg {
	width: 24px;
	height: 24px;
}
.btn--primary {
	background: var(--blue, #2e5edb);
	color: #fff;
}
.btn--primary:hover {
	background: #2650c0;
}
.btn--ghost {
	background: transparent;
	color: #fff;
	border-color: #fff;
}
.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Управление слайдером */
.hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 28px;
}
.hero__arrows {
	display: flex;
	align-items: center;
	gap: 4px;
}
.hero__prev,
.hero__next {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: color 0.2s;
}
.hero__prev {
	color: rgba(255, 255, 255, 0.3);
}
.hero__prev:hover {
	color: #fff;
}
.hero__prev svg,
.hero__next svg {
	width: 24px;
	height: 24px;
}
.hero__progress {
	position: relative;
	width: clamp(200px, 32vw, 600px);
	height: 3px;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}
.hero__progress span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: #fff;
	transition: width 0.15s linear;
}

@media (max-width: 1024px) {
	.hero {
		margin-top: -88px;
		height: 640px;
	}
	.hero h1 {
		max-width: 100%;
		font-size: clamp(28px, 6vw, 44px);
	}
	.slide__content {
		padding-top: 96px;
	}
	.hero__controls {
		bottom: 6%;
	}
}

/* ---------- Слайдер услуг (вертикальный) ---------- */
.services {
	position: relative;
	height: 691px;
	overflow: hidden;
	color: #fff;
	background: radial-gradient(50% 50% at 50% 50%, #393f47 0%, #2f343a 100%);
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.services__inner {
	position: relative;
	height: 100%;
}

/* Заголовок секции */
.services__head {
	position: absolute;
	top: 60px; /* выше полосы слайдов (top:120), чтобы не накладывалось на текст слайда */
	left: 145px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 30px;
}
.services__label {
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #6d6f73;
}
.services__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 16px;
	line-height: 19px;
	text-decoration: none;
}
.services__all svg {
	width: 24px;
	height: 24px;
}

/* Вертикальный скроллбар (Swiper) слева */
.services .services__scrollbar {
	position: absolute;
	left: 40px;
	top: 125px;
	width: 3px;
	height: 320px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 2px;
	z-index: 2;
}
.services .services__scrollbar .swiper-scrollbar-drag {
	background: #fff;
	border-radius: 2px;
}

/* Счётчик слайдов (Swiper fraction) */
.services .services__counter {
	position: absolute;
	left: 30px;
	top: 480px;
	bottom: auto;
	right: auto;
	width: auto;
	z-index: 2;
	font-family: "Museo Sans Cyrl 300", "Segoe UI", system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	color: #fff;
	white-space: nowrap;
}

/* Слайдер.
   Селектор с .services — специфичность выше, чем у `.swiper` из swiper-bundle.css
   (он грузится после style.css и иначе перебивает position:absolute на relative). */
.services .services__slider {
	position: absolute;
	left: 145px;
	right: 96px;
	top: 120px;
	/* Явная высота, а не bottom:120 — вертикальному Swiper нужна определённая
	   высота контейнера, иначе слайды (height:100%) уходят в бесконечность (2^25px). */
	height: calc(100% - 240px);
	z-index: 1;
}
.services__slider .swiper-slide {
	display: flex;
	align-items: center;
	/* фикс высоты слайда, чтобы крупные картинки не растягивали слайдер */
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
.service {
	display: flex;
	align-items: center;
	gap: 40px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/* резерв справа под стрелки навигации (.services__nav, right:145) — картинка их не перекрывает */
	padding-right: 150px;
}
.service__text {
	flex: 0 0 560px;
	max-width: 48%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.service__title {
	margin: 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.service__lead {
	max-width: 445px;
	margin: 22px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
	/* ограничиваем высоту лида, чтобы длинные описания не распирали слайд */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.service__text .btn {
	margin-top: 32px;
}
.service__media {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center; /* картинка по центру своей области */
}
.service__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Вертикальная навигация */
/* Навигация — две вертикальные плашки (по макету) */
.services__nav {
	position: absolute;
	top: 136px;
	right: 145px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 84px;
	height: 420px;
}
.services__prev,
.services__next {
	flex: 1;
	display: grid;
	place-items: center;
	border: none;
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s;
}
.services__prev {
	color: rgba(255, 255, 255, 0.3);
}
.services__prev:hover,
.services__next:hover {
	background: rgba(255, 255, 255, 0.15);
}
.services__prev:hover {
	color: #fff;
}
.services__prev svg,
.services__next svg {
	width: 24px;
	height: 24px;
}
.services__prev.swiper-button-disabled,
.services__next.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

@media (max-width: 1024px) {
	.services {
		height: auto;
		padding-block: 48px;
	}
	.services__head {
		position: static;
		margin-bottom: 24px;
	}
	.services .services__scrollbar,
	.services .services__counter,
	.services__nav {
		display: none;
	}
	.services .services__slider {
		position: relative;
		inset: auto;
		height: auto;
	}
	.services__slider .swiper-slide {
		height: auto;
	}
	.service {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		height: auto;
		padding-right: 0; /* на мобильном стрелки скрыты — резерв справа не нужен */
	}
	.service__text {
		flex: none;
		width: 100%;
		max-width: none;
	}
	.service__media {
		width: 100%;
		height: 220px;
		background: transparent;
	}
	.service__title {
		font-size: clamp(26px, 6vw, 40px);
	}
}

/* ---------- О компании ---------- */
.about {
	background: #fff;
	color: #0d1126;
	padding-block: 100px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.about__inner {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 40px;
}
.about__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	max-width: 665px;
}
.about__title {
	margin: 0 0 28px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.about__text p {
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}
.about__text p + p {
	margin-top: 24px;
}
.about__btn {
	margin-top: auto;
	align-self: flex-start;
}
.btn--outline {
	background: transparent;
	color: var(--blue);
	border-color: var(--blue);
}
.btn--outline:hover {
	background: rgba(46, 94, 219, 0.08);
}
.about__stats {
	flex: 0 0 auto;
	width: min(904px, 55%);
}
.about__stats img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.about {
		padding-block: 56px;
	}
	.about__inner {
		flex-direction: column;
		gap: 32px;
	}
	.about__text {
		max-width: none;
	}
	.about__btn {
		margin-top: 24px;
	}
	.about__stats {
		width: 100%;
	}
	.about__title {
		font-size: clamp(26px, 6vw, 40px);
	}
}

/* ---------- Каталог ---------- */
.catalog {
	background: #f7fbff;
	color: #0d1126;
	padding-block: 84px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.catalog__title {
	margin: 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}

/* Фильтр-пилюли */
.catalog__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
}
.cat-tab {
	padding: 15px;
	border: 1px solid #6d7882;
	border-radius: 90px;
	background: transparent;
	color: #6d7882;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s,
		border-color 0.2s;
}
.cat-tab:hover {
	border-color: var(--blue);
	color: var(--blue);
}
.cat-tab.is-active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* Сетка карточек */
.catalog__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-top: 40px;
}
.product {
	display: flex;
	flex-direction: column;
}
.product__media {
	aspect-ratio: 375 / 317;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.product__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.product__title {
	margin: 24px 0 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: #0d1126;
}
.product--active .product__title {
	color: var(--blue);
}
.product__specs {
	margin: 16px 0 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.5;
	color: #6d7882;
}
.product__actions {
	margin-top: 24px;
	display: flex;
	gap: 10px;
}

/* Кнопка "Подробнее" в карточке */
.btn-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px;
	border: 1px solid var(--blue);
	border-radius: 5px;
	background: transparent;
	color: var(--blue);
	font-size: 16px;
	line-height: 19px;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s;
}
.btn-more svg {
	width: 24px;
	height: 24px;
}
.product--active .btn-more,
.btn-more:hover {
	background: var(--blue);
	color: #fff;
}

/* Кнопка корзины */
.btn-cart {
	flex: none;
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 5px;
	background: #c8a35f; /* Gold */
	color: #fff;
	cursor: pointer;
	transition: filter 0.2s;
}
/* ВРЕМЕННО: продажи отключены — сайт работает как каталог-витрина.
   Скрываем кнопки «В корзину» везде (главная, магазин, карточка товара, «рекомендуем»).
   Чтобы вернуть покупку — удалить это правило. */
.btn-cart {
	display: none !important;
}
.btn-cart:hover {
	filter: brightness(1.08);
}
.btn-cart svg {
	width: 24px;
	height: 24px;
}

/* Смотреть все */
.catalog__more {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

@media (max-width: 1024px) {
	.catalog {
		padding-block: 56px;
	}
	.catalog__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
	.catalog__title {
		font-size: clamp(26px, 6vw, 40px);
	}
}
@media (max-width: 600px) {
	.catalog__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Акции и предложения ---------- */
.promo {
	background: #fff;
	color: #0d1126;
	padding-block: 84px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.promo__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.promo__title {
	margin: 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.promo__grid {
	display: grid;
	grid-template-columns: 955fr 663fr;
	gap: 60px;
	margin-top: 40px;
}
.promo-card {
	position: relative;
	min-height: 359px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 55px 40px;
	color: #fff;
	background-size: cover;
	background-position: center;
}
.promo-card--photo {
	background-color: #3a3f45;
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/e079d53fd9d8823cf1bd0658fe60a455bb93e4c8.jpg");
}
.promo-card--blue {
	background-color: #264edb;
	background-image: linear-gradient(rgba(38, 78, 219, 0.79), rgba(38, 78, 219, 0.79)), url("../img/d6cbbe54500bcb56a838917a12ddf9428a85ad28.jpg");
}
.promo-card__corner {
	position: absolute;
	top: 40px;
	right: 40px;
	line-height: 0;
	color: #fff;
}
.promo-card__corner svg {
	width: 28px;
	height: 28px;
}
.promo-card__title {
	margin: 0;
	max-width: 460px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.promo-card__text {
	margin: 16px 0 0;
	max-width: 465px;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
}
.promo-card__btn {
	margin-top: auto;
}
.btn--white {
	background: #fff;
	color: var(--blue);
	border-color: #fff;
}
.btn--white:hover {
	background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1024px) {
	.promo {
		padding-block: 56px;
	}
	.promo__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.promo__title {
		font-size: clamp(26px, 6vw, 40px);
	}
}
@media (max-width: 600px) {
	.promo__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Портфолио ---------- */
.portfolio {
	background: radial-gradient(50% 50% at 50% 50%, #393f47 0%, #2f343a 100%);
	color: #fff;
	padding-block: 84px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.portfolio__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.portfolio__title {
	margin: 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.portfolio__grid {
	display: grid;
	grid-template-columns: 375fr 520fr 665fr;
	gap: 58px;
	margin-top: 40px;
}
.pf-card {
	position: relative;
	min-height: 496px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 40px;
	color: #fff;
	text-decoration: none; /* карточка — ссылка (Fancybox) */
	cursor: pointer;
	background-color: #2b2f35;
	background-size: cover;
	background-position: center;
}
/* затемняющий слой поверх фото — прозрачный по умолчанию, темнеет при наведении */
.pf-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.35s ease;
	pointer-events: none;
}
.pf-card:hover::before {
	background: rgba(0, 0, 0, 0.45);
}
.pf-card__title {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 220px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: #fff;
}
.pf-card__expand {
	position: absolute;
	top: 50%;
	left: 50%;
	/* по умолчанию скрыт и «сжат»; при наведении проявляется, уголки расходятся */
	transform: translate(-50%, -50%) scale(0.6);
	z-index: 1;
	line-height: 0;
	color: #fff;
	opacity: 0;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}
.pf-card:hover .pf-card__expand {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.pf-card__expand svg {
	width: 28px;
	height: 28px;
}

@media (max-width: 1024px) {
	.portfolio {
		padding-block: 56px;
	}
	.portfolio__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.pf-card {
		min-height: 320px;
	}
	.portfolio__title {
		font-size: clamp(26px, 6vw, 40px);
	}
}
@media (max-width: 600px) {
	.portfolio__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Карта ---------- */
.map {
	width: 100%;
	height: 560px;
	background: #d9d9d9 url("/image.png") center / cover no-repeat;
}

/* ---------- Подвал ---------- */
.footer {
	background: radial-gradient(50% 50% at 50% 50%, #393f47 0%, #2f343a 100%);
	color: #fff;
	padding-block: 54px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.footer__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.footer__nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 35px;
}
.footer__nav a {
	color: #fff;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.2s;
}
.footer__nav a:hover {
	opacity: 1;
}
.footer__contacts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 50px;
	margin-top: 44px;
}
.footer__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-family: "Museo Sans Cyrl 300", "Segoe UI", system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;
	text-decoration: none;
}
.footer__contact svg {
	width: 24px;
	height: 24px;
	flex: none;
}

/* ---------- Страница «О нас» ---------- */
.about-page {
	background: #fff;
	color: #0d1126;
	padding-top: 60px;
	padding-bottom: 160px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}

/* Контент этих страниц по макету — 1690px (базовый .container даёт 1640px) */
.about-page .container,
.directions .container,
.services-page .container,
.service-hero .container,
.service-info .container,
.gas-promo .container,
.portfolio-page .container,
.contacts-page .container,
.catalog-page .container,
.product-page .container {
	max-width: 1730px;
}

/* Хлебные крошки */
.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 50px;
}
.breadcrumbs__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1;
	color: #282d34;
	text-decoration: none;
}
.breadcrumbs__link--current {
	color: #b1b8c3;
}
.breadcrumbs__arrow {
	width: 14px;
	height: 14px;
	flex: none;
}

/* Блок «О нас»: изображение слева + текст справа */
.about-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

/* Левый столбец — изображение (сейчас заглушка) */
.about-hero__media {
	position: relative;
}
.about-hero__frame {
	position: relative;
	aspect-ratio: 810 / 454;
}
.about-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-hero__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: #d9d9d9;
	color: #8a8f98;
	text-align: center;
}
.about-hero__placeholder svg {
	width: 56px;
	height: 56px;
}
.about-hero__placeholder span {
	font-size: 16px;
	line-height: 1.4;
}

/* Правый столбец — заголовок и текст */
.about-hero__text {
	padding-top: 60px;
}
.about-hero__title {
	margin: 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.about-hero__text p {
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}

/* Карточки статистики — накрывают нижний край изображения */
.about-stats {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -115px;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}
.stat-card {
	min-height: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 10px;
	background: #fff;
	box-shadow: 0 20px 40px rgba(13, 17, 38, 0.08);
	text-align: center;
}
.stat-card__num {
	font-family: "Museo Sans Cyrl 300", "Segoe UI", system-ui, sans-serif;
	font-weight: 300;
	font-size: 64px;
	line-height: 1;
	color: #0d1126;
}
.stat-card__label {
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	color: #0d1126;
}
.stat-card__sub {
	font-size: 12px;
	line-height: 14px;
	color: #2f343a;
}

@media (max-width: 1024px) {
	.about-page {
		padding-top: 32px;
		padding-bottom: 56px;
	}
	.breadcrumbs {
		margin-bottom: 28px;
	}
	.about-hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.about-hero__text {
		padding-top: 0;
	}
	.about-hero__title {
		font-size: clamp(36px, 8vw, 64px);
	}
	/* Карточки становятся обычным рядом под изображением */
	.about-stats {
		position: static;
		margin-top: 24px;
		gap: 16px;
	}
	.stat-card {
		min-height: 0;
		padding: 24px 10px;
		box-shadow: none;
		border: 1px solid var(--border, #e5e4e7);
	}
}

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

/* ---------- Основные направления деятельности ---------- */
.directions {
	position: relative;
	background: #fff;
	/* фото инженера выходит ниже формы — оставляем место снизу */
	padding-bottom: 160px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.directions__panel {
	position: relative;
	padding: 60px 50px 70px;
	background: radial-gradient(50% 50% at 50% 50%, #393f47 0%, #2f343a 100%);
}
.directions__title {
	margin: 0 0 48px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.directions__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 60px;
}
.direction {
	max-width: 324px;
}
.direction__num {
	display: block;
	margin-bottom: 24px;
	font-family: "Museo Sans Cyrl 100", "Segoe UI", system-ui, sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.6);
}
.direction__title {
	margin: 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.direction__text {
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}
.direction--gold .direction__num,
.direction--gold .direction__title,
.direction--gold .direction__text {
	color: #c8a35f;
}

/* Фото инженера — выходит из нижнего-правого угла панели вниз, в зону формы */
.directions__photo {
	position: absolute;
	right: 50px;
	/* низ уходит в зону карты (наезд), верх остаётся на панели:
	   высота и bottom смещены на одну величину (+177) — верх не двигается */
	bottom: -726px;
	width: 415px;
	height: 980px;
	z-index: 2; /* поверх карты (.map) из футера */
	overflow: hidden;
	background-color: #d9d9d9;
}
.directions__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Блок «Оставьте заявку» (в белой зоне под панелью, слева от фото) */
.directions__form {
	display: flex;
	align-items: flex-start;
	gap: 70px;
	margin-top: 100px;
}
.directions__form-text {
	width: 509px;
}
.directions__form-title {
	margin: 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.directions__form-text p {
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}
.request-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 520px;
}
.request-form__input {
	box-sizing: border-box;
	width: 100%;
	height: 90px;
	padding: 0 30px;
	background: #fff;
	border: 1px solid #e1edf7;
	box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}
.request-form__input::placeholder {
	color: #71808c;
}
.request-form__input:focus {
	outline: none;
	border-color: var(--blue, #2e5edb);
}
/* базовые стили кнопки — из .btn.btn--primary; здесь только отступ сверху (по макету 30px = gap 10 + 20) */
.request-form__submit {
	margin-top: 20px;
}

/* ---------- Модальное окно «Оставьте заявку» ---------- */
.modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	padding: 20px;
	overflow-y: auto;
}
.modal.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(13, 17, 38, 0.55);
}
.modal__dialog {
	position: relative;
	z-index: 1;
	width: min(810px, 100%);
	margin: auto;
	box-sizing: border-box;
	padding: 56px clamp(24px, 8vw, 145px) 64px;
	background: #fff;
	box-shadow: 0 4px 90px rgba(0, 0, 0, 0.1);
	animation: modal-in 0.25s ease;
}
@keyframes modal-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.modal__close {
	position: absolute;
	top: 24px;
	right: 24px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	color: #0d1126;
	cursor: pointer;
	transition: opacity 0.2s;
}
.modal__close:hover {
	opacity: 0.6;
}
.modal__title {
	margin: 0;
	text-align: center;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.modal__text {
	margin: 20px auto 0;
	max-width: 520px;
	text-align: center;
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}
/* форма-модалка: на всю ширину контента, кнопка «Отправить» — во всю ширину */
.request-form--modal {
	width: 100%;
	margin-top: 36px;
}
.request-form--modal .request-form__submit {
	align-self: stretch;
	justify-content: center;
}
body.modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.modal__dialog {
		padding: 48px 20px 40px;
	}
	.modal__title {
		font-size: clamp(26px, 7vw, 40px);
	}
}

@media (max-width: 1700px) {
	/* До 1700px фото наезжало бы на колонки/форму — прячем вместе с зарезервированным местом */
	.directions {
		padding-bottom: 84px;
	}
	.directions__photo {
		display: none;
	}
}
@media (max-width: 1024px) {
	.directions__panel {
		padding: 40px 24px 48px;
	}
	.directions__title {
		margin-bottom: 32px;
		font-size: clamp(24px, 5vw, 40px);
	}
	.directions__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 40px;
	}
	.direction {
		max-width: none;
	}
	.directions__form {
		flex-direction: column;
		gap: 24px;
		margin-top: 48px;
	}
	.directions__form-text {
		width: 100%;
	}
	.request-form {
		width: 100%;
		max-width: 520px;
	}
	.directions__form-title {
		font-size: clamp(24px, 5vw, 40px);
	}
	.request-form__input {
		height: 72px;
		padding: 0 20px;
	}
}
@media (max-width: 600px) {
	.directions__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Страница «Услуги» (сетка карточек) ---------- */
.services-page {
	background: #fff;
	color: #0d1126;
	padding-top: 60px;
	padding-bottom: 100px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
}
.service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.service-card__media {
	width: 100%;
	aspect-ratio: 520 / 268;
	background: #d9d9d9 center / cover no-repeat;
}
.service-card__title {
	margin: 30px 0 0;
	/* резерв под 2 строки — описание во всех карточках стартует на одной высоте */
	min-height: 48px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.service-card__text {
	margin: 15px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}
.service-card__btn {
	margin-top: 32px;
}

@media (max-width: 1024px) {
	.services-page {
		padding-top: 32px;
		padding-bottom: 56px;
	}
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
	.service-card__title {
		min-height: 0;
	}
}
@media (max-width: 600px) {
	.services-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Карточка товара (детальная) ---------- */
.product-page {
	background: #fff;
	color: #0d1126;
	padding-top: 60px;
	padding-bottom: 100px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.product-page__title {
	margin: 0 0 40px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.product-page__layout {
	display: grid;
	grid-template-columns: 512px minmax(0, 810px);
	gap: 67px;
	align-items: start;
}

/* Галерея */
.product-gallery__main {
	aspect-ratio: 512 / 538;
	background: #d9d9d9 center / contain no-repeat;
}
.product-gallery__thumbs {
	display: flex;
	gap: 6px;
	margin-top: 14px;
}
.product-gallery__thumb {
	position: relative;
	width: 86px;
	height: 90px;
	padding: 0;
	border: none;
	background: #d9d9d9 center / cover no-repeat;
	cursor: pointer;
}
.product-gallery__thumb.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

/* Блок покупки */
.product-info__buy {
	display: flex;
	align-items: center;
	gap: 30px;
}
.product-info__price {
	font-size: 24px;
	line-height: 1.3;
	color: #2e5edb;
}
.product-info__cart {
	width: 85px;
}
.product-info__stock {
	margin-top: 30px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: #37a45c;
}
.product-info__code {
	margin-top: 28px;
	font-size: 14px;
	line-height: 1.3;
	color: #2f343a;
}

/* Описание / особенности */
.product-info__heading {
	margin: 50px 0 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.product-info__specs {
	margin: 16px 0 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #8192a6;
}
.product-info__subheading {
	margin: 30px 0 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #0d1126;
}
.product-features {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.product-feature h4 {
	margin: 0 0 4px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #0d1126;
}
.product-feature p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #0d1126;
}

/* Таблица характеристик */
.product-specs {
	width: 100%;
	margin-top: 24px;
	border-collapse: collapse;
}
.product-specs tr:nth-child(odd) {
	background: #f6fbff;
}
.product-specs th,
.product-specs td {
	height: 39px;
	vertical-align: middle;
}
.product-specs th {
	padding-left: 15px;
	text-align: left;
	white-space: nowrap;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	color: #8192a6;
}
.product-specs td {
	padding-right: 48px;
	text-align: right;
	font-size: 14px;
	color: #0d1126;
}
.product-info__manager {
	margin-top: 40px;
}

@media (max-width: 1024px) {
	.product-page {
		padding-top: 32px;
		padding-bottom: 56px;
	}
	.product-page__title {
		margin-bottom: 28px;
		font-size: clamp(26px, 5vw, 40px);
	}
	.product-page__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.product-specs td {
		padding-right: 15px;
	}
}

/* ---------- Страница «Каталог» ---------- */
.catalog-page {
	background: #fff;
	color: #0d1126;
	padding-top: 60px;
	padding-bottom: 100px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.catalog-page__title {
	margin: 0 0 50px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.catalog-layout {
	display: grid;
	grid-template-columns: 375px 1fr;
	gap: 59px;
	align-items: start;
}

/* Сайдбар фильтров */
.catalog-filters {
	padding: 30px;
	background: #fff;
	border: 1px solid #bbc3cc;
}
.filter + .filter {
	margin-top: 30px;
}
.filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	cursor: pointer;
	list-style: none;
}
.filter__head::-webkit-details-marker {
	display: none;
}
.filter__head--static {
	cursor: default;
}
.filter__title {
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.filter__caret {
	width: 24px;
	height: 24px;
	flex: none;
	color: #0d1126;
	transition: transform 0.2s;
}
.filter[open] .filter__caret {
	transform: rotate(180deg);
}
.filter__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}
.filter__option {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.filter__option input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #2e5edb;
	cursor: pointer;
}
.filter__option span {
	font-family: "Museo Sans Cyrl 300", "Segoe UI", system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	color: #0d1126;
}

/* Ползунок цены (статичный визуал; интерактивность — по необходимости на JS) */
.filter__price-labels {
	display: flex;
	justify-content: space-between;
	margin: 20px 0 16px;
}
.filter__price-labels span {
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
	color: #c8a35f;
}
.filter__slider {
	position: relative;
	height: 21px;
}
.filter__slider-track,
.filter__slider-fill {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 2px;
}
.filter__slider-track {
	right: 0;
	background: #2f343a;
}
.filter__slider-fill {
	width: 30%;
	background: #2e5edb;
}
.filter__slider-knob {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #2e5edb;
}
.filter__slider-knob--min {
	left: 0;
}
.filter__slider-knob--max {
	left: 30%;
}

/* ---------- Вывод виджетов фильтров WooCommerce под макет .filter ---------- */
.catalog-filters .filter + .filter {
	margin-top: 30px;
}
.catalog-filters .filter .filter__head--static {
	margin-bottom: 20px;
}

/* Многоуровневая навигация (Бренд, Ёмкость) — строки-опции с псевдо-чекбоксом */
.catalog-filters .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.catalog-filters .woocommerce-widget-layered-nav-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.catalog-filters .woocommerce-widget-layered-nav-list__item a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Museo Sans Cyrl 300", "Segoe UI", system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	color: #0d1126;
	text-decoration: none;
}
.catalog-filters .woocommerce-widget-layered-nav-list__item a::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border: 1px solid #bbc3cc;
	border-radius: 4px;
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}
.catalog-filters .woocommerce-widget-layered-nav-list__item.chosen a::before,
.catalog-filters .woocommerce-widget-layered-nav-list__item--chosen a::before {
	content: "" !important; /* убираем красный крестик-глиф WooCommerce */
	margin: 0 !important;
	font-family: inherit !important;
	color: transparent !important;
	border-color: #2e5edb;
	background: #2e5edb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.catalog-filters .woocommerce-widget-layered-nav-list__item .count {
	font-size: 14px;
	color: #8192a6;
}

/* Активные фильтры (чипы-сброс). Класс обёртки WC — .widget_layered_nav_filters */
.catalog-filters .widget_layered_nav_filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.catalog-filters .widget_layered_nav_filters ul li {
	margin: 0;
}
.catalog-filters .widget_layered_nav_filters ul li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px 7px 14px;
	border: 1px solid var(--blue, #2e5edb);
	border-radius: 90px;
	background: rgba(46, 94, 219, 0.08);
	font-size: 14px;
	line-height: 1;
	color: var(--blue, #2e5edb);
	text-decoration: none;
	transition: background 0.2s;
}
.catalog-filters .widget_layered_nav_filters ul li a:hover {
	background: rgba(46, 94, 219, 0.16);
}
/* убираем красную иконку-глиф WooCommerce, ставим аккуратный × после названия */
.catalog-filters .widget_layered_nav_filters ul li a::before {
	content: "" !important;
	display: none !important;
	margin: 0 !important;
}
.catalog-filters .widget_layered_nav_filters ul li a::after {
	content: "×";
	font-size: 17px;
	line-height: 0.8;
}

/* Фильтр по цене. Перебиваем дефолтные фиолетовые стили WooCommerce
   (.woocommerce .widget_price_filter ... — они специфичнее, поэтому !important). */
.catalog-filters .widget_price_filter .price_slider {
	position: relative;
	height: 3px !important;
	margin: 10px 9px 22px !important;
	background: #e5e4e7 !important;
	border: 0 !important;
	border-radius: 2px !important;
}
.catalog-filters .widget_price_filter .ui-slider-range {
	position: absolute;
	top: 0 !important;
	height: 100% !important;
	background: var(--blue, #2e5edb) !important;
	border: 0 !important;
	border-radius: 2px !important;
}
.catalog-filters .widget_price_filter .ui-slider-handle {
	position: absolute;
	top: 50% !important;
	width: 18px !important;
	height: 18px !important;
	margin-top: -9px !important;
	margin-left: -9px !important;
	background: var(--blue, #2e5edb) !important;
	border: 2px solid #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
	cursor: ew-resize;
	outline: none;
}
.catalog-filters .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	text-align: left !important;
}
.catalog-filters .widget_price_filter .price_slider_amount .price_label {
	order: 1;
	width: 100%;
	float: none !important;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #0d1126;
}
/* Кнопку «Фильтрация» скрываем — цена применяется сразу (AJAX) при отпускании ползунка */
.catalog-filters .widget_price_filter .price_slider_amount .button {
	display: none !important;
}

/* Индикатор загрузки во время AJAX-фильтрации */
.catalog-page.is-loading .catalog-products {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s;
}

/* Сетка товаров */
.catalog-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px 59px;
}
.catalog-page .product__media,
.recommend .product__media {
	aspect-ratio: 376 / 395;
	background: #d9d9d9 center / cover no-repeat;
}
.catalog-page .product__title,
.recommend .product__title {
	margin-top: 30px;
}
.product__price {
	margin: 10px 0 0;
	font-size: 24px;
	line-height: 1.3;
	color: #2e5edb;
}
.product__stock {
	margin: 20px 0 0;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: #37a45c;
}
.catalog-page .product__actions,
.recommend .product__actions {
	margin-top: 30px;
}
.catalog__more {
	margin-top: 60px;
}

/* Блок «Мы рекомендуем» (низ карточки товара) */
.recommend {
	margin-top: 100px;
}
.recommend__title {
	margin: 0 0 50px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.recommend__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 59px;
}

@media (max-width: 1024px) {
	.recommend {
		margin-top: 56px;
	}
	.recommend__title {
		margin-bottom: 32px;
		font-size: clamp(26px, 5vw, 40px);
	}
	.recommend__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}
@media (max-width: 600px) {
	.recommend__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.catalog-page {
		padding-top: 32px;
		padding-bottom: 56px;
	}
	.catalog-page__title {
		margin-bottom: 32px;
		font-size: clamp(26px, 5vw, 40px);
	}
	.catalog-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.catalog-products {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}
@media (max-width: 600px) {
	.catalog-products {
		grid-template-columns: 1fr;
	}
}

/* ---------- Страница «Контакты» ---------- */
.contacts-page {
	background: #fff;
	color: #0d1126;
	padding-top: 60px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.contacts-page__title {
	margin: 0 0 50px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.contacts-info {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 80px;
	margin-bottom: 50px;
}
.contact-item {
	display: flex;
	flex-direction: column;
}
.contact-item__head {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #0d1126;
}
.contact-item__head svg {
	width: 24px;
	height: 24px;
	flex: none;
}
.contact-item__label {
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.contact-item__value {
	margin: 20px 0 0;
	font-size: 20px;
	line-height: 1.5;
	color: #0d1126;
	text-decoration: none;
}
a.contact-item__value:hover {
	text-decoration: underline;
}
.contact-item__socials {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
/* соцсети на этой странице — тёмные круги по макету */
.contacts-page .social {
	background: #0d1126;
}
.contacts-page .social:hover {
	background: #23283a;
}

/* Голубая полоса с центрированной формой */
.contacts-cta {
	background: #f6fbff;
	padding-block: 100px;
}
.contacts-cta .directions__form {
	margin: 0 auto;
	max-width: 1097px;
}

@media (max-width: 1024px) {
	.contacts-page {
		padding-top: 32px;
	}
	.contacts-page__title {
		margin-bottom: 32px;
		font-size: clamp(26px, 5vw, 40px);
	}
	.contacts-info {
		gap: 28px 40px;
	}
	.contact-item__label,
	.contact-item__value {
		font-size: 18px;
	}
	.contacts-cta {
		padding-block: 56px;
	}
}

/* ---------- Страница «Портфолио» ---------- */
.portfolio-page {
	background: #fff;
	color: #0d1126;
	padding-top: 60px;
	padding-bottom: 100px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.portfolio-page__title {
	margin: 0 0 50px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.portfolio-page__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 50px;
}
/* «Шахматная» сетка: два ряда с разным распределением ширин колонок */
.portfolio-rows {
	display: flex;
	flex-direction: column;
	gap: 58px;
}
.portfolio-row {
	display: grid;
	gap: 58px;
}
.portfolio-row--a {
	grid-template-columns: 375fr 520fr 665fr;
}
.portfolio-row--b {
	grid-template-columns: 665fr 375fr 520fr;
}
/* иконка «развернуть» крупнее по макету (42px) */
.portfolio-page .pf-card__expand svg {
	width: 42px;
	height: 42px;
}

@media (max-width: 1024px) {
	.portfolio-page {
		padding-top: 32px;
		padding-bottom: 56px;
	}
	.portfolio-page__title {
		margin-bottom: 32px;
		font-size: clamp(26px, 5vw, 40px);
	}
	.portfolio-page__filters {
		margin-bottom: 32px;
	}
	.portfolio-rows {
		gap: 24px;
	}
	.portfolio-row--a,
	.portfolio-row--b {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ---------- Газификация промышленных объектов + форма ---------- */
.gas-promo {
	position: relative;
	overflow: hidden;
	background: #fff;
	color: #0d1126;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.gas-promo__text {
	max-width: 951px;
	padding-block: 100px;
}
.gas-promo__title {
	margin: 0 0 40px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.gas-promo__text p {
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}
.gas-promo__text p:first-of-type {
	margin-top: 0;
}
/* Светло-голубая полоса с формой */
.gas-promo__contact {
	background: #f6fbff;
	padding-block: 90px;
}
.gas-promo__contact .directions__form {
	margin-top: 0;
}
/* Изображение справа — проходит через белую зону и голубую полосу.
   right выравнивает правый край по контенту (1690px), заглушка — серый фон. */
.gas-promo__media {
	position: absolute;
	top: 0;
	right: max(20px, calc((100% - 1690px) / 2));
	width: 520px;
	height: 902px;
	overflow: hidden;
	background-color: #d9d9d9;
}
.gas-promo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media (max-width: 1200px) {
	.gas-promo__media {
		display: none;
	}
	.gas-promo__text {
		max-width: none;
	}
}
/* 1200–1700: картинка (520px) прижата к правому краю — резервируем под неё место
   справа, сдвигая контент (текст и форму) влево, чтобы не было наложения. */
@media (min-width: 1201px) and (max-width: 1700px) {
	.gas-promo > .container,
	.gas-promo__contact > .container {
		padding-right: 580px;
	}
	.gas-promo__contact .directions__form {
		flex-wrap: wrap;
	}
}
@media (max-width: 1024px) {
	.gas-promo__text {
		padding-block: 56px;
	}
	.gas-promo__contact {
		padding-block: 56px;
	}
	.gas-promo__title {
		font-size: clamp(26px, 5vw, 40px);
	}
}

/* ---------- Текстовый блок страницы услуги (2 колонки) ---------- */
.service-info {
	background: #fff;
	color: #0d1126;
	padding-block: 100px 80px;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.service-info__title {
	margin: 0 0 50px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0d1126;
}
.service-info__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.service-info__cols p {
	margin: 0;
	max-width: 811px;
	font-size: 18px;
	line-height: 1.5;
	color: #0d1126;
}

@media (max-width: 1024px) {
	.service-info {
		padding-block: 56px;
	}
	.service-info__title {
		margin-bottom: 32px;
		font-size: clamp(26px, 5vw, 40px);
	}
	.service-info__cols {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ---------- Хиро страницы услуги ---------- */
.service-hero {
	position: relative;
	min-height: 632px;
	overflow: hidden;
	background: #d9d9d9; /* заглушка под фон */
	color: #fff;
	font-family: "Museo Sans Cyrl 500", "Segoe UI", system-ui, sans-serif;
}
.service-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	/* тёмный оверлей 75% + фото из миниатюры записи (--service-hero-bg задаётся в шаблоне);
	   без миниатюры остаётся тёмная заливка поверх серого фона секции */
	background:
		linear-gradient(0deg, rgba(47, 52, 58, 0.75), rgba(47, 52, 58, 0.75)),
		var(--service-hero-bg, none) center / cover no-repeat;
}
.service-hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	min-height: 632px;
	display: flex;
	flex-direction: column;
	gap: 107px;
	padding-block: 40px;
}
.service-hero .breadcrumbs {
	margin: 0;
}
.service-hero__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.service-hero__title {
	margin: 0;
	max-width: 900px;
	font-family: "Museo Sans Cyrl 700", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.service-hero__text {
	margin: 24px 0 0;
	max-width: 960px;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
}
.service-hero__btn {
	margin-top: 40px;
	align-self: flex-start;
}

/* Светлый вариант хлебных крошек — на тёмном фоне */
.breadcrumbs--light .breadcrumbs__link {
	color: #fff;
}
.breadcrumbs--light .breadcrumbs__link--current {
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) {
	.service-hero,
	.service-hero__inner {
		min-height: 460px;
	}
	.service-hero__title {
		font-size: clamp(32px, 6vw, 64px);
	}
}

/* ---------- Карта ---------- */
@media (max-width: 1024px) {
	.map {
		height: 360px;
	}
	.footer__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.footer__nav {
		position: static;
		transform: none;
		flex-wrap: wrap;
	}
	.footer .socials {
		margin-left: 0;
	}
	.footer__contacts {
		justify-content: flex-start;
		gap: 24px;
	}
}