/* JetBrains Mono */

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-100.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 200;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-200.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-300.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-regular.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-500.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 600;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-600.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-700.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 800;
	src: url(../fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-800.woff2) format("woff2");
}

/* Saar SP Demo */

@font-face {
	font-display: swap;
	font-family: "Saar SP Demo";
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/SaarSPDemo/SaarSPDemoRegular.woff2) format("woff2");
}

@layer global-styles {
	:root {
		/* Цветовая палитра */
		--clr-accent-400: #da5729;
		/* Основной акцентный цвет (кнопки, ссылки, активные элементы) */
		--clr-accent-500: #b13e15;
		/* Акцентный цвет при наведении или нажатии */

		--clr-neutral-100: #363533;
		/* Цвет основного текста на светлом фоне (самый темный из темной темы) */
		--clr-neutral-400: #7b7974;
		/* Светлый оттенок для границ, разделителей или фона (светлее, чем 500) */
		--clr-neutral-500: #898682;
		/* Оттенок для границ, теней или фона */
		--clr-neutral-500-a: #89868280;
		--clr-neutral-700: #c3bfbc;
		--clr-neutral-800: #d0ccc8;
		/* Светлый фон — для карточек, панелей и т.д. (соответствует темному 1b1b1b) */
		--clr-neutral-900: #e4dfd9;
		/* Базовый светлый фон — основной фон страницы (соответствует темному 0f0f0f) */
		--clr-neutral-999: #ffffff;

		--clr-white: #ffffff;
		--clr-white-100: #f2f1f0;

		/* Шрифты */
		--ff-primary: "JetBrains Mono", sans-serif;
		--ff-heading: "Saar SP Demo", sans-serif;

		/* Размеры шрифтов */
		--fs-body-sm: clamp(0.75rem, 0.25vi + 0.7rem, 1rem);
		--fs-body-md: clamp(0.875rem, 0.375vi + 0.8rem, 1.25rem);
		--fs-heading-sm: clamp(1rem, 2.27vi + 0.43rem, 2.25rem);
		--fs-heading-md: clamp(1.25rem, 1.875vi + 0.875rem, 3.125rem);
		--fs-heading-lg: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);

		/* Жирность шрифтов */
		--fw-sm: 400;
		--fw-md: 500;

		/* Межстрочные интервалы */
		--lh-sm: 1.1;
		--lh-md: 1.2;

		/* Переходы */
		--transition-ease-sm: 0.2s ease;
		--transition-ease-md: 0.4s ease;
		--transition-ease-lg: 0.6s ease;
	}

	html.dark-theme {
		--clr-neutral-100: #f2f1f0;
		/* Цвет основного текста на тёмном фоне */
		--clr-neutral-400: #414141;
		/* Светлый оттенок для границ, разделителей или фона */
		--clr-neutral-500: #393939;
		--clr-neutral-500-a: #39393980;
		/* Тёмный оттенок для границ, теней или фона */
		--clr-neutral-700: #272525;
		--clr-neutral-800: #1b1b1b;
		/* Светлый тёмный фон — для карточек, панелей и т.д. */
		--clr-neutral-900: #0f0f0f;
		/* Базовый тёмный фон — основной фон страницы */
		--clr-neutral-999: #000000;
	}

}

@layer global-styles {
	/* Global styles */

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

	html,
	body {
		height: 100%;
		scrollbar-gutter: stable;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		margin: 0;
		overflow-x: hidden;
		background-color: var(--clr-neutral-900);
		color: var(--clr-neutral-100);
		font-family: var(--ff-primary);
		font-size: var(--fs-body-md);
		font-weight: var(--fw-md);
		line-height: var(--lh-md);
	}

	body.is-menu-open {
		overflow: hidden;
	}

	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin-block-end: 0;
	}

	h1,
	h2,
	h3,
	h4,
	button,
	input,
	label {
		line-height: 1.1;
	}

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
	}

	input,
	button,
	textarea,
	select {
		font-family: inherit;
		font-size: inherit;
	}

	a:not([class]) {
		-webkit-text-decoration-skip: ink;
		text-decoration-skip-ink: auto;
		color: currentColor;
	}

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

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
		}
	}

}

/* Heading styles */

.heading-sm,
.heading-md,
.heading-lg {
	margin-block-start: 0;
	font-family: var(--ff-heading);
	font-weight: var(--fw-sm);
	line-height: var(--lh-sm);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.heading-sm {
	font-size: var(--fs-heading-sm);
}

.heading-md {
	font-size: var(--fs-heading-md);
}

.heading-lg {
	font-size: var(--fs-heading-lg);
}

/* Button styles */

.button {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: flex-end;
	gap: 0.75em;
	padding: 0.5em 2em;
	border: 1px solid var(--clr-accent-400);
	border-radius: 999em;
	background-color: var(--clr-accent-400);
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.button--blur {
	border: 1px solid var(--clr-neutral-400);
	background-color: rgb(211, 210, 210, 0.1);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.button:hover,
.button:focus {
	border-color: var(--clr-accent-500);
	background-color: var(--clr-accent-500);
}

.button--blur:hover,
.button--blur:focus {
	color: var(--clr-white);
}

.button:active {
	transform: scale(0.95);
}

.button__text {
	color: var(--clr-white);
	line-height: var(--lh-sm);
}

.button--blur .button__text {
	color: inherit;
}

.button__icon {
	width: 1.1em;
	height: 1.1em;
	transform: translateY(-0.02em);
	fill: var(--clr-white);
}

.button--blur .button__icon {
	fill: currentColor;
}

@media (max-width: 36em) {
	.button {
		padding-inline: 1em;
	}
}

.js-order-cart-button {
	position: relative;
}

.js-order-cart-button.is-active::before {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: var(--clr-accent-400);
	content: "";
	transform: translate(50%, 50%);
}

.link {
	display: flex;
	align-items: center;
	gap: 0.75em;
	color: inherit;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.link:focus,
.link:hover {
	color: var(--clr-accent-400);
}

.link__icon {
	width: 1.1em;
	height: 1.1em;
	transform: translateY(-0.02em);
	fill: currentColor;
}

/* Button icon styles */

.button-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-999);
	cursor: pointer;
}

.button-icon:focus,
.button-icon:hover {
	background-color: var(--clr-neutral-800);
}

.button-icon__icon {
	width: 1.1em;
	height: 1.1em;
	fill: var(--clr-neutral-100);
}

/* Logo styles */

.logo {
	flex: 0 0 auto;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.logo__image {
	aspect-ratio: 136/48;
	width: 8.5rem;
}

@media (max-width:48em) {
	.logo__image {
		width: 6rem;
	}
}

/* Menu styles */

.menu {
	z-index: 1000;
	display: flex;
	flex-direction: column;
}

.menu__button {
	position: relative;
	padding: 0.5em 1em;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-800);
	cursor: pointer;
}

.menu__button-text {
	color: var(--clr-neutral-100);
	text-transform: uppercase;
}

.menu__button:is(.is-open) .menu__button-text-open {
	display: none;
}

.menu__button:not(.is-open) .menu__button-text-close {
	display: none;
}

/* Theme styles */

.theme {
	--clip: polygon(calc(100% - 0.625em) 0, 100% 0.625em, 100% 100%, 0.625em 100%, 0 calc(100% - 0.625em), 0 0);

	position: relative;
}

.theme::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.theme__inner {
	position: relative;
	display: flex;
	align-items: center;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-999);
}

.theme__button {
	padding: 0.5em;
	border: none;
	background: none;
	opacity: 0.5;
	color: var(--clr-neutral-100);
	cursor: pointer;
}

.theme__button:focus,
.theme__button:hover {
	opacity: 1;
	color: var(--clr-accent-500);
}

.theme__button.is-active {
	opacity: 1;
	color: var(--clr-neutral-100);
	pointer-events: none;
}

.theme__button-text {
	display: none;
}

.theme__button-icon {
	display: block;
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

.dark-theme [data-theme="light"] {
	display: none;
}

.light-theme [data-theme="dark"] {
	display: none;
}

/* Banner styles */

.banner {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip-banner: polygon(calc(80% - var(--size)) 0,
			80% var(--size),
			100% var(--size),
			100% 100%,
			calc(20% + var(--size)) 100%,
			20% calc(100% - var(--size)),
			0 calc(100% - var(--size)),
			0 0);

	position: relative;
	display: flex;
}

.banner::after {
	content: "";
	padding-bottom: 50%;
}

.banner::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip-banner);
	background-color: var(--clr-neutral-500);
}

.banner__inner {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 1.875rem;
	width: 100%;
	clip-path: var(--clip-banner);
}

.banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	clip-path: var(--clip-banner);
}

.banner__body {
	--clip: polygon(2rem 0%,
			calc(100% - 2rem) 0%,
			100% 2rem,
			100% calc(100% - 2rem),
			calc(100% - 2rem) 100%,
			2rem 100%,
			0% calc(100% - 2rem),
			0% 2rem);

	position: relative;
	width: min(48rem, 100%);
	color: var(--clr-white);
}

.banner__body::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background: rgb(57, 57, 57, 0.8);
}

.banner__body-inner {
	padding: 1.875rem;
	clip-path: var(--clip);
	background-color: rgb(0, 0, 0, 0.6);
}

.banner__body-text {
	color: var(--clr-white-100) !important;
	text-transform: uppercase;
}

@media (max-width: 48em) {
	.banner__inner {
		padding: 1.25rem 0.625rem;
	}

	.banner__body-inner {
		padding: 1.25rem 1.875rem;
	}
}

/* Card category styles */

.card-category {
	--size: clamp(1.25rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(var(--size) 0,
			calc(100% - var(--size) * 4) 0%,
			calc(100% - var(--size) * 3) var(--size),
			calc(100% - var(--size)) var(--size),
			100% calc(var(--size) * 2),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 var(--size));

	position: relative;
	display: flex;
}

.card-category::after {
	content: "";
	position: absolute;
	top: 0;
	right: calc(var(--size) * 1.5);
	width: calc(var(--size) * 0.75);
	height: calc(var(--size) * 0.75);
	background: url(../images/icons/icon-star.svg) center/contain no-repeat;
	filter: grayscale(1);
	transition: all var(--transition-ease-sm) 0s;
}

.card-category:focus-within::after,
.card-category:hover::after {
	filter: grayscale(0);
}

.card-category::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-category__inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 1.875rem;
	min-height: 15rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-category__col {
	display: flex;
	flex: 1 1 calc(50% - 0.625rem);
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
}

.card-category__img {
	width: 100%;
	height: 12.5rem;
	object-fit: contain;
	object-position: center;
}

.card-category__heading {
	margin-block-start: 0;
}

@media (max-width:48em) {

	.card-category__inner,
	.card-category__col {
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		text-align: center;
	}

	.card-category__col {
		flex: 1 1 auto;
		gap: 1.25rem;
	}

	.card-category__heading {
		width: auto;
	}

	.card-category__img {
		width: min(20rem, 100%);
	}
}

/* Card clip styles */

.card-clip {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(var(--size) 0,
			calc(80% - var(--size)) 0%,
			80% var(--size),
			calc(100% - var(--size)) var(--size),
			100% calc(var(--size) * 2),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 var(--size));

	position: relative;
	display: flex;
}

.card-clip::before {
	content: "";
	float: left;
	padding-bottom: 55%;
}

.card-clip::after {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-clip__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	clip-path: var(--clip);
}

.card-clip__image {
	aspect-ratio: 10/7;
	width: 100%;
	min-width: auto;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.card-clip__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.875rem;
	background-color: var(--clr-neutral-800);
}

.card-clip__body-heading {
	position: relative;
	z-index: 1;
	width: 50%;
}

.card-clip__body-image {
	position: absolute;
	top: 50%;
	right: 0;
	width: 50%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
	transform: translate(2rem, -45%);
}

.card-clip__body-text {
	position: relative;
	z-index: 1;
	margin-block-start: auto;
	width: 50%;
}

@media (max-width:64em) {
	.card-clip__image {
		aspect-ratio: 10/5;
	}

	.card-clip::before {
		padding-bottom: 40%;
	}
}

@media (max-width:48em) {
	.card-clip__body-image {
		width: 40%;
	}

	.card-clip__body-heading,
	.card-clip__body-text {
		width: 70%;
	}
}

@media (max-width:36em) {
	.card-clip__body {
		padding: 1.25rem 0.625rem;
	}

	.card-clip__body-image {
		width: 30%;
	}

	.card-clip__body-heading,
	.card-clip__body-text {
		width: 80%;
	}
}

/* Card counter styles */

.card-counter {
	--size: 0.625rem;
	--clip: polygon(var(--size) 0,
			calc(80% - var(--size)) 0%,
			80% var(--size),
			calc(100% - var(--size)) var(--size),
			100% calc(var(--size) * 2),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 var(--size));

	position: relative;
}

.card-counter::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-counter__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	min-height: 12.5rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-counter__label {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-block-start: 0;
}

.card-counter__label--clr-accent {
	color: var(--clr-accent-400);
}

.card-counter__counter {
	margin-block-start: auto;
}

/* Counter */

.counter {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.counter>*+* {
	margin-block-start: 0.2em;
}

.counter__value {
	font-size: 2.5rem;
	line-height: 1;
}

.counter__label {
	opacity: 0.75;
	line-height: 1;
}

/* Card box styles */

.card-cover {
	--offset: 1.875rem;

	position: relative;
	display: flex;
	padding: var(--offset);
	overflow: hidden;
	border: 1px solid var(--clr-neutral-400);
	color: var(--clr-white);
}

.card-cover::before {
	content: "";
	padding-bottom: 80%;
	width: 0;
}

.card-cover__wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.card-cover__image {
	position: absolute;
	inset: var(--offset);
	width: calc(100% - var(--offset) * 2);
	height: calc(100% - var(--offset) * 2);
	object-fit: cover;
	object-position: center;
}

.card-cover__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--offset);
	width: 100%;
	height: 100%;
	background: rgb(0, 0, 0, 0.2) linear-gradient(106deg, rgb(0, 0, 0, 0.2) 0%, rgb(0, 0, 0, 0.2) 70%);
	color: var(--clr-white);
	text-align: center;
}

.card-cover__body>*+* {
	margin-top: 0.875em;
}

@media (max-width: 64em) {
	.card-cover {
		--offset: 1.25rem;
	}

	.card-cover::before {
		padding-bottom: 50%;
	}
}

@media (max-width: 48em) {
	.card-cover {
		--offset: 0.625rem;
	}
}

/* Card docs styles */

.card-docs-group {
	display: flex;
	flex-direction: column;
}

.card-docs-group>*+* {
	margin-top: 1em;
}

.card-docs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
	gap: 1.25rem;
}

.card-docs {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
	padding: 0.625rem;
	overflow: hidden;
	border: 1px solid var(--clr-neutral-500);
	background-color: var(--clr-neutral-800);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.card-docs:hover {
	background-color: var(--clr-accent-500);
}

.card-docs__icon {
	align-self: flex-end;
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--clr-neutral-100);
}

.card-docs__heading {
	align-self: flex-start;
	margin-block-start: auto;
	opacity: 0.8;
	color: var(--clr-neutral-100);
	font-size: 0.9em;
	text-transform: uppercase;
}

/* Card order styles */

.card-order {
	display: flex;
	gap: 1.25rem;
	padding-block-start: 1rem;
	border-top: 1px solid var(--clr-neutral-500);
}

.card-order__head {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	padding: 0.625rem;
	border: 1px solid var(--clr-neutral-500);
}

.card-order__image {
	flex: 0 0 auto;
	width: 8.75rem;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.card-order__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
}

.card-order__name {
	margin-block-start: 0;
	color: inherit;
}

.card-order__counter {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.card-order__counter-button {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--clr-neutral-500);
	background: transparent;
	color: inherit;
	line-height: 0.5;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.card-order__counter-button:focus,
.card-order__counter-button:hover {
	background-color: var(--clr-accent-400);
	color: var(--clr-white);
}

.card-order__counter-button:active {
	background-color: var(--clr-accent-500);
}

.card-order__counter-count {
	color: inherit;
}

@media (max-width: 36em) {
	.card-order {
		flex-direction: column;
	}

	.card-order__image {
		margin-inline: auto;
	}
}

/* Card product styles */

.card-product {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(var(--size) 0,
			calc(80% - var(--size)) 0%,
			80% var(--size),
			calc(100% - var(--size)) var(--size),
			100% calc(var(--size) * 2),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 var(--size));

	position: relative;
	display: flex;
}

.card-product::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-product__inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 1.875rem;
	min-height: 12rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-product__heading {
	margin-block-end: auto;
}

.card-product__img {
	flex: 0 0 auto;
	margin-inline: auto;
	width: min(80%, 54em);
}

@media (max-width: 48em) {
	.card-product__inner {
		align-items: center;
	}

	.card-product__img {
		width: 100%;
	}
}

.card-branches {
	--size: 1.25rem;
	--clip: polygon(var(--size) 0,
			calc(80% - var(--size)) 0%,
			80% var(--size),
			calc(100% - var(--size)) var(--size),
			100% calc(var(--size) * 2),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 var(--size));

	position: relative;
	display: flex;
	flex-direction: column;
	filter: drop-shadow(0 9px 7px rgb(0, 0, 0, 0.1));
	transition: all var(--transition-ease-sm);
}

.card-branches::after {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-branches__wrap {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	row-gap: 1.25rem;
	padding: 1.25rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-branches__heading {
	font-family: var(--ff-heading);
	font-size: var(--fs-heading-sm);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.card-branches__body {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--clr-neutral-500);
}

.card-branches__item {
	display: flex;
}

.card-branches__label {
	flex: 0 0 auto;
	width: 7em;
	color: var(--clr-accent-400);
}

.card-branches__value {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
}

.card-branches__value>*+* {
	margin-block-start: 0.25em;
}

.card-branches__link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.card-branches__link:hover {
	color: var(--clr-accent-500);
}

.card-branches__addr {
	color: inherit;
}

/* Contact card styles */

.card-contact {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--clr-neutral-500);
	background-color: var(--clr-neutral-800);
	filter: drop-shadow(0 9px 7px rgb(0, 0, 0, 0.1));
	transition: all var(--transition-ease-sm);
}

@media (max-width: 47.999em) {
	.card-contact {
		row-gap: 0.625rem;
		padding-inline: 0.625rem;
	}
}

.card-contact__head {
	display: flex;
	gap: 0.625rem;
}

.card-contact__heading {
	margin-block-start: 0;
	font-family: var(--ff-heading);
	font-size: var(--fs-heading-md);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.card-contact__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 63.999em) {
	.card-contact__body {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

@media (max-width: 47.999em) {
	.card-contact {
		gap: 0.625rem;
	}
}

.card-contact__item {
	display: flex;
	flex-direction: column;
}

.card-contact__item>*+* {
	margin-block-start: 0.5em;
}

.card-contact__item-head {
	flex: 0 0 auto;
	margin-block-start: 0;
	color: var(--clr-accent-400);
}

.card-contact__item-addr {
	margin-block-start: 0.625rem;
	color: inherit;
}

.card-contact__item-list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	margin-block: 0.625rem 0;
}

.card-contact__item-list>*+* {
	margin-block-start: 0.5em;
}

.card-contact__item-link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.card-contact__item-link:hover {
	color: var(--clr-accent-500);
}

.product-counter {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.product-counter__button {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--clr-neutral-500);
	background: transparent;
	color: inherit;
	line-height: 0.5;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.product-counter__button:focus,
.product-counter__button:hover {
	background-color: var(--clr-accent-400);
	color: var(--clr-white);
}

.product-counter__button:active {
	background-color: var(--clr-accent-500);
}

.product-counter__count {
	color: inherit;
}

/* Form styles */

.form {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(calc(70% - var(--size)) 0,
			calc(100% - var(--size)) 0,
			100% var(--size),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 calc(var(--size) * 2),
			var(--size) var(--size),
			calc(70% - var(--size) * 2) var(--size));

	position: relative;
}

.form:is(.is-loading) {
	opacity: 0.75;
	pointer-events: none;
}

.form::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.form__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-block: calc(var(--size) * 2) var(--size);
	padding-inline: var(--size);
	height: 100%;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-999);
}

.form__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--clr-neutral-500);
}

.form__label {
	opacity: 0.8;
	text-transform: uppercase;
}

.form__contacts-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.form__contacts-list>*+* {
	margin-block-start: 0.4em;
}

.form__contacts-item {
	color: var(--clr-accent-400);
	text-transform: uppercase;
	transition: all var(--transition-ease-sm) 0s;
}

.form__contacts-item:focus-within,
.form__contacts-item:hover {
	color: var(--clr-accent-500);
}

.form__contacts-item>a {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.form__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-block-start: 1.25rem;
}

.form__input {
	padding-block: 0.5em;
	width: 100%;
	outline: none;
	border: none;
	border-block-end: 1px solid var(--clr-neutral-500);
	background: none;
	color: inherit;
	text-transform: uppercase;
}

.form__input--no-border-bottom {
	border-block-end: none;
}

.form__input:focus {
	border-block-end-color: var(--clr-accent-500);
}

.form__select {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--clr-neutral-500);
}

.form__select:focus-within {
	border-block-end-color: var(--clr-accent-500);
}

.form__select-button {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	background: none;
}

.form__select-button-icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--clr-neutral-500);
}

.form__select-data-list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	display: none;
	/* flex */
	flex-direction: column;
	padding: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	width: 100%;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-999);
	list-style: none;
}

.form__select-data-list>*+* {
	margin-block-start: 0.75em;
}

.form__select-data-item {
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	text-transform: uppercase;
	transition: all var(--transition-ease-sm);
	cursor: pointer;
}

.form__select-data-item:focus,
.form__select-data-item:hover {
	color: var(--clr-accent-500);
}

.form__foot {
	display: flex;
	justify-content: flex-end;
	margin-block-start: auto;
}

.form__foot-loader {
	width: 2.2em;
	height: 2.2em;
	fill: var(--clr-accent-400);
}

.form__foot-button:is(.is-loading),
.form__foot-loader:not(.is-loading) {
	display: none;
}

@media (max-width: 36em) {
	.form__foot {
		justify-content: center;
	}
}

/* Modal styles */

.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transition: all var(--transition-ease-sm) 0s;
}

.modal-backdrop:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

.modal-backdrop:is(.is-active) {
	opacity: 1;
	visibility: visible;
}

.modal-backdrop::before {
	content: "";
	position: fixed;
	inset: 0;
	background-color: var(--clr-neutral-400);
	opacity: 0.5;
}

.modal {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0.625rem;
	width: 100%;
	height: 100%;
	overflow: hidden scroll;
	transition: all var(--transition-ease-sm);
	pointer-events: none;
}

.modal:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

.modal:is(.is-active) {
	opacity: 1;
	visibility: visible;
}

.modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3.125rem;
	padding: 3.125rem;
	width: min(100%, 64rem);
	border: 1px solid var(--clr-neutral-400);
	background-color: var(--clr-neutral-800);
	pointer-events: all;
}

.modal__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
}

.modal__heading {
	line-height: 1;
}

.modal__close {
	flex: 0 0 auto;
	margin-block-start: 0.5em;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-family: var(--ff-heading);
	text-transform: uppercase;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.modal__close:hover,
.modal__close:focus {
	color: var(--clr-accent-400);
}

.modal__close:active {
	color: var(--clr-accent-500);
}

.modal__body {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.modal__order {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.modal__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.modal__order:is(.is-loading),
.modal__form:is(.is-loading) {
	opacity: 0.75;
	pointer-events: none;
}

.modal__form-row {
	display: flex;
	gap: 1.25rem;
}

.modal__form-row>* {
	flex: 1 1 100%;
}

.modal__textarea {
	resize: vertical;
}

.modal__input,
.modal__textarea {
	padding: 0.5em;
	width: 100%;
	outline: none;
	border: none;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-900);
	color: inherit;
	text-transform: uppercase;
}

.modal__input:focus,
.modal__textarea:focus {
	border-color: var(--clr-accent-500);
}

.modal__text>*:first-child {
	margin-block-start: 0;
}

.modal__foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.modal__foot-loader {
	width: 2.2em;
	height: 2.2em;
	fill: var(--clr-accent-400);
}

.modal__foot-button:is(.is-loading),
.modal__foot-loader:not(.is-loading) {
	display: none;
}

@media (max-width: 64em) {
	.modal__dialog {
		gap: 1.875rem;
		padding: 1.875rem;
	}
}

@media (max-width: 48em) {
	.modal__dialog {
		padding: 1.25rem;
	}

	.modal__form,
	.modal__form-row {
		gap: 0.625rem;
	}

	.modal__form-row {
		flex-direction: column;
	}
}

@media (max-width: 36em) {
	.modal__foot {
		flex-direction: column;
	}
}

/* Wrapper styles */

.wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
}

.wrapper>header,
.wrapper>footer {
	flex: 0 0 auto;
}

.wrapper>main {
	position: relative;
	flex: 1 1 auto;
}

.wrapper__bg-line-page-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	width: 100dvw;
	height: max(100vh, 100%);
	height: max(100dvh, 100%);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000000ff, #00000000);
	mask-image: linear-gradient(to bottom, #000000ff, #00000000);
}

.wrapper__bg-line-page {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	object-fit: cover;
	object-position: center top;
	max-width: none;
}

/* Header styles */

.header {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid transparent;
	transition: background-color var(--transition-ease-sm) 0s;
}

.header.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 2000;
}

.header.scrolled,
.header.is-menu-open {
	border-color: var(--clr-neutral-400);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.header__container {
	display: flex;
	flex-direction: column;
}

.header__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	padding-block: 1.25rem;
}

.header__coll {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.header__coll:nth-child(1) {
	justify-content: flex-start;
}

.header__coll:nth-child(2) {
	justify-content: center;
}

.header__coll:nth-child(3) {
	justify-content: flex-end;
}

.header__logo,
.header__theme {
	z-index: 1001;
}

.header__buttons {
	z-index: 1001;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.header__menu-list {
	position: relative;
	margin: 0;
	margin-bottom: 1.25rem;
	padding: 1.25rem;
	width: -moz-max-content;
	width: max-content;
	border: 1px solid var(--clr-neutral-400);
	background: var(--clr-neutral-800);
	list-style: none;
}

.header:not(.is-menu-open) .header__menu-list {
	display: none;
}

.header:is(.is-menu-open) .header__menu-list {
	display: block;
}

.header__menu-list>*+* {
	margin-block-start: 0.5em;
}

.header__menu-link {
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.header__menu-link:hover,
.header__menu-link:focus {
	color: var(--clr-accent-500);
}

@media (max-width:48em) {
	.header__row {
		display: flex;
		justify-content: space-between;
		padding-block: 1.25rem;
	}

	.header__coll:nth-child(2) {
		display: none;
	}

	.header__menu-list {
		width: 100%;
		max-height: 85vh;
		max-height: 85dvh;
		overflow: hidden auto;
	}

	.header__menu-list>*+* {
		margin-block-start: 0.75em;
	}

	.header__menu-link {
		font-size: 1.25rem;
	}
}

/* Footer styles */

.footer {
	position: relative;
	padding-block: clamp(1.875rem, 8.125vi + 0.25rem, 10rem) 1.875rem;
}

.footer__bg-line {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
}

.footer__bg-line-image {
	position: relative;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center bottom;
}

.footer__container {
	display: grid;
	grid-template-columns: 1fr 57.1875rem;
	gap: 1.875rem;
}

.footer__col {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.footer__contact {
	display: flex;
	flex-direction: column;
}

.footer__contact>*+* {
	margin-block-start: 0.5em;
}

.footer__contact-link {
	display: flex;
	align-items: center;
	-moz-column-gap: 0.5em;
	column-gap: 0.5em;
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__contact-link:focus,
.footer__contact-link:hover {
	color: var(--clr-accent-400);
}

.footer__contact-link::after,
.footer__contact-link::before {
	color: var(--clr-neutral-400);
}

.footer__contact-link::after {
	content: "}";
}

.footer__contact-link::before {
	content: "{";
}

.footer__social {
	display: flex;
	gap: 0.625rem;
	margin-block-start: auto;
}

.footer__social-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	background-color: var(--clr-neutral-400);
	color: var(--clr-neutral-100);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__social-link:focus,
.footer__social-link:hover {
	background-color: var(--clr-accent-400);
}

.footer__social-link:active {
	transform: scale(0.95);
}

.footer__menu {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
}

.footer__menu-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.footer__menu-col>*+* {
	margin-block-start: 0.5em;
}

.footer__menu-link {
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__menu-link:focus,
.footer__menu-link:hover {
	color: var(--clr-accent-400);
}

.footer__info {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: start;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
}

.footer__info-text {
	margin-block-start: 0;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
}

.footer__info-link {
	color: inherit;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__info-link:focus,
.footer__info-link:hover {
	color: var(--clr-accent-400);
}

@media (max-width: 90em) {
	.footer__container {
		grid-template-columns: 1fr 2fr;
	}

	.footer__info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

@media (max-width: 64em) {
	.footer__bg-line-image {
		left: -10%;
		width: 120%;
		max-width: none;
	}

	.footer__container {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.footer__col {
		gap: 2.5rem;
	}

	.footer__col:nth-child(1) {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.footer__menu-col {
		align-items: center;
		text-align: center;
	}
}

@media (max-width:48em) {
	.footer__bg-line-image {
		left: -120%;
		width: 240%;
	}

	.footer__container,
	.footer__col {
		gap: 1.875rem;
	}

	.footer__col,
	.footer__col:nth-child(1),
	.footer__contact,
	.footer__menu,
	.footer__info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer__info>*+*,
	.footer__menu-col>*:first-child {
		margin-block-start: 0.5em;
	}
}

/* Section styles */

.section {
	padding-block: clamp(1.875rem, 8.125vi + 0.25rem, 10rem);
}

.section--no-padding-top {
	padding-block-start: 0;
}

.section--padding-top-small {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section--no-padding-bottom {
	padding-block-end: 0;
}

.section--padding-bottom-small {
	padding-block-end: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section__head {
	display: flex;
	flex-direction: column;
}

.section__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
}

@media (max-width: 64em) {
	.section__body {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* Section 404 styles */

.section-404 {
	flex: 1 1 auto;
}

.section-404__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.section-404__heading span:nth-child(1) {
	color: var(--clr-accent-400);
	font-weight: 700;
}

.section-404__text {
	text-wrap: balance;
}

.section-404__link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.section-404__link:hover {
	color: var(--clr-accent-500);
}

/* Section about styles */

.section-about {
	position: relative;
}

.section-about__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-about__head {
	display: flex;
}

.section-about__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
}

.section-about__image {
	height: 100%;
}

.section-about__col {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.section-about__col-button {
	align-self: flex-start;
}

.section-about__text>*:first-child {
	margin-block-start: 0;
}

.section-about__col-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.25rem;
	margin-block-start: auto;
}

@media (max-width: 64em) {
	.section-about__body {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.section-about__col-row {
		grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	}
}

/* Section advantages styles */

/* section-callback styles */

.section-callback {
	position: relative;
}

.section-callback__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-callback__body {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.25rem;
}

@media (max-width: 48em) {
	.section-callback__body {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Section category styles */

.section-categories {
	padding-block: clamp(1.875rem, 3.125vi + 1.25rem, 5rem) clamp(1.875rem, 8.125vi + 0.25rem, 10rem);
}

.section-categories__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-categories__head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	gap: 1.875rem;
}

.section-categories__head-col {
	display: flex;
	flex-direction: column;
}

.section-categories__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	gap: 1.875rem;
	width: 100%;
}

@media (max-width:90em) {

	.section-categories__head,
	.section-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	}
}

@media (max-width:48em) {
	.section-categories__head {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.section-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: 1.25rem;
	}
}

/* Section consultation styles */

.section-consultation {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-consultation__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-consultation__body {
	display: flex;
	gap: 1.875rem;
}

.section-consultation__col {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 1.875rem;
	margin-inline: auto;
	padding-block-end: 2.5rem;
	width: min(48em, 100%);
}

.section-consultation__image-wrapper {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(calc(60% - var(--size)) 0,
			60% var(--size),
			100% var(--size),
			100% 100%,
			calc(40% + var(--size)) 100%,
			40% calc(100% - var(--size)),
			0 calc(100% - var(--size)),
			0 0);

	position: relative;
	flex: 1 1 auto;
}

.section-consultation__image-wrapper::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.section-consultation__image {
	height: 100%;
	clip-path: var(--clip);
	object-fit: cover;
	object-position: center;
}

.section-consultation__expert {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-block-start: 0.25em;
	text-transform: uppercase;
}

.section-consultation__expert::before {
	content: "";
	width: 1em;
	height: 1em;
	background: url(../images/icons/icon-star.svg) 100% center/cover no-repeat;
}

.section-consultation__form {
	flex: 1 1 auto;
}

@media (max-width: 64em) {
	.section-consultation__body {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Section development styles */

.section-development {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-development__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-development__head {
	display: flex;
}

.section-development__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.875rem, 8.125vi + 0.25rem, 10rem) 1.875rem;
	overflow: hidden;
	border: 1px solid var(--clr-neutral-500);
	background: rgb(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.section-development__image {
	position: absolute;
	top: 50%;
	right: -5%;
	width: 70%;
	transform: translateY(-45%);
	object-fit: contain;
	object-position: center;
}

.section-development__heading {
	width: 35%;
}

.section-development__button {
	margin-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

@media (max-width:48em) {
	.section-development__body {
		align-items: center;
	}

	.section-development__image {
		position: static;
		width: 100%;
		transform: translateY(0%);
	}

	.section-development__heading {
		width: auto;
		text-align: center;
	}
}

/* Section docs styles */

.section-docs {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-docs__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-docs__head {
	display: flex;
}

.section-docs__body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.875rem;
}

.section-docs__main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-docs__image-wrap {
	display: flex;
	flex-direction: column;
}

.section-docs__image {
	width: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.section-docs__text>*:first-child {
	margin-block-start: 0;
}

.section-docs__grid {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-docs__row {
	display: flex;
	gap: 1.25rem;
}

.section-docs__card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: calc(50% - 0.625rem);
	border: 1px solid var(--clr-neutral-500);
	background-color: var(--clr-neutral-800);
	opacity: 0;
	transition: all var(--transition-ease-sm);
}

.section-docs__card--large {
	max-width: 70%;
}

.section-docs__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0.625rem;
}

.section-docs__card-label {
	color: var(--clr-accent-400);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.section-docs__card-heading {
	text-wrap: balance;
	margin-block-start: 0.5em;
}

.section-docs__card-foot {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.section-docs__card-foot::before {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--clr-neutral-500);
}

.section-docs__card-more {
	display: flex;
	align-items: center;
	padding: 0;
	border: none;
	background: none;
	color: var(--clr-neutral-100);
	transition: all var(--transition-ease-sm);
	cursor: pointer;
}

.section-docs__card-more:focus,
.section-docs__card-more:hover {
	color: var(--clr-accent-500);
}

.section-docs__card-more-text {
	margin-inline-end: 0.5em;
	text-transform: uppercase;
}

.section-docs__card-more-icon {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
}

.section-docs__close {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.section-docs__close:not(.is-active) {
	display: none;
}

.section-docs__close-icon {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--clr-neutral-100);
}

.section-docs__info {
	margin-block-start: auto;
	padding-block-start: 2.5rem;
}

.section-docs__docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.625rem;
}

.section-docs__docs-link {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
	padding: 0.625rem;
	overflow: hidden;
	border: 1px solid var(--clr-neutral-500);
	background: transparent;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.section-docs__docs-link:not([style]) {
	display: none;
}

.section-docs__docs-link:focus,
.section-docs__docs-link:hover {
	background: var(--clr-accent-500);
}

.section-docs__docs-link-icon {
	align-self: flex-end;
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--clr-neutral-100);
}

.section-docs__docs-link-text {
	align-self: flex-start;
	margin-block-start: auto;
	opacity: 0.8;
	color: var(--clr-neutral-100);
	font-size: 0.9em;
	text-transform: uppercase;
}

@media (max-width:75em) {
	.section-docs__body {
		grid-template-columns: 1fr;
	}

	.section-docs__main {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 64em) {
	.section-docs__row {
		flex-direction: column;
	}

	.section-docs__card {
		width: 100% !important;
		max-width: none !important;
	}
}

@media (max-width:48em) {
	.section-docs__main {
		grid-template-columns: 1fr;
	}

	.section-docs__grid {
		flex-direction: column;
	}

	.section-docs__card,
	.section-docs__card--small,
	.section-docs__card--large {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Section history styles */

.section-history {
	position: relative;
}

.section-history__container {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
	margin: 0 auto;
	height: calc(100vh - 2.5rem);
	height: calc(100dvh - 2.5rem);
	overflow: hidden;
	-webkit-mask: linear-gradient(0deg, #000000ff 95%, #00000000);
	mask: linear-gradient(0deg, #000000ff 95%, #00000000);
}

.section-history__head {
	position: absolute;
	top: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
	z-index: 1;
	padding-block-start: 1.25rem;
}

.section-history__body {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.section-history__map {
	width: 100%;
	height: 100vh;
	height: 100dvh;
}

.section-history__map-region {
	fill: var(--clr-neutral-700);
	stroke: var(--clr-neutral-900);
	stroke-width: 1px;
}

.section-history__map-point {
	r: 5px;
	fill: var(--clr-accent-400);
}

.section-history__map-line {
	stroke: var(--clr-neutral-100);
	opacity: 0.5;
	stroke-width: 1px;
	stroke-dasharray: 5px;
}

.section-history__slider {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.section-history__slide {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.section-history__map-city {
	fill: var(--clr-neutral-100);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
}

.section-history__map-city::before {
	content: "1";
}

.section-history__city-name {
	display: none;
}

.section-history__city-name,
.section-history__city-year {
	position: relative;
	padding-inline-end: 0.625rem;
	opacity: 0;
	color: var(--clr-accent-400);
	text-transform: uppercase;
	transition: opacity var(--transition-ease-sm) 0s;
}

.section-history__city-line {
	display: flex;
	width: 100%;
	height: 1.25rem;
	overflow: hidden;
}

.section-history__city-line::after {
	content: "";
	flex: 1 1 auto;
	margin-inline: 1.25rem 1.125rem;
	background: repeating-linear-gradient(to right,
			var(--clr-accent-400),
			var(--clr-accent-400) 0.125rem,
			transparent 0.125rem,
			transparent 1.25rem);
}

.section-history__city-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.section-history__city-text {
	padding-inline-end: 0.625rem;
	opacity: 0;
	font-size: var(--fs-body-sm);
	transition: opacity var(--transition-ease-sm) 0s;
}

.section-history__slide.visible .section-history__city-name,
.section-history__slide.visible .section-history__city-year,
.section-history__slide.visible .section-history__city-text {
	opacity: 1;
}

.section-history__slider-arrows {
	display: none;
}

.section-history__slider-arrow {
	padding: 0;
	border: none;
	background: none;
}

.section-history__slider-arrow-icon {
	width: 1.875rem;
	height: 1.875rem;
	fill: var(--clr-accent-400);
}

.section-history__slider-arrow-grabbing {
	margin-right: auto;
	width: 1.875rem;
	height: 1.875rem;
	fill: var(--clr-accent-400);
}

@media (max-width: 64em) {
	.section-history__container {
		height: auto;
	}

	.section-history__head {
		position: static;
		margin-block-start: 0;
	}

	.section-history__map {
		display: none;
	}

	.section-history__slider {
		position: static;
	}

	.section-history__city-name {
		display: block;
	}

	.section-history__city-name,
	.section-history__city-year,
	.section-history__city-text {
		opacity: 1;
	}

	.section-history__slider-arrows {
		display: flex;
		justify-content: flex-end;
		gap: 1.25rem;
		padding-block-start: 1.25rem;
	}
}

/* Section map styles */

.section-map {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-block-start: -5%;
	padding-block-end: 0;
}

.section-map__lines {
	position: absolute;
	top: calc(50% - 5px);
	width: 100vw;
	opacity: 0.625;
}

@media (max-width: 64em) {
	.section-map {
		margin-block-start: 0;
	}
}

.main-map {
	aspect-ratio: 16/9;
	width: 100%;
	height: auto;
}

.main-map__region {
	fill: var(--clr-neutral-700);
	stroke: var(--clr-neutral-900);
	stroke-width: 1px;
}

.main-map__railway {
	stroke: var(--clr-neutral-100);
	stroke-width: 1px;
	stroke-dasharray: 5px;
	opacity: 0.25;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.section-map__button-wrap {
	display: none;
}

@media (max-width: 63.999em) {
	.section-map__button-wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: block;
		transform: translate(-50%, -40%);
	}
}

.main-map__root {
	transform: translate(calc(-0.625rem / 2), -50%);
}

.main-map__root:hover {
	z-index: 300 !important;
}

.main-map__city {
	display: flex;
	align-items: center;
	-moz-column-gap: 0.25rem;
	column-gap: 0.25rem;
	padding-block: 0.5rem;
	cursor: default;
}

@media (max-width: 63.999em) {

	.main-map__city,
	.main-map__railway {
		display: none;
	}
}

.main-map__city-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: var(--clr-accent-400);
}

.main-map__city-dot--dim {
	background-color: var(--clr-neutral-500);
	opacity: 0.75;
}

.main-map__city-name {
	display: flex;
	align-items: center;
	-moz-column-gap: 0.25em;
	column-gap: 0.25em;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
}

@media (max-width: 79.999em) {
	.main-map__city-name {
		font-size: var(--fs-body-sm);
	}
}

.main-map__city-name::before {
	content: "{";
	opacity: 0.5;
}

.main-map__city-name::after {
	content: "}";
	opacity: 0.5;
}

.main-map__card {
	--size: 1.25rem;
	--clip: polygon(var(--size) 0,
			calc(80% - var(--size)) 0%,
			80% var(--size),
			calc(100% - var(--size)) var(--size),
			100% calc(var(--size) * 2),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 var(--size));

	position: absolute;
	top: 0;
	left: 0;
	z-index: 1500;
	display: flex;
	flex-direction: column;
	width: -moz-max-content;
	width: max-content;
	max-width: 32rem;
	opacity: 0;
	visibility: hidden;
	filter: drop-shadow(0 9px 7px rgb(0, 0, 0, 0.1));
	transition: all var(--transition-ease-sm);
}

.main-map__root:hover>.main-map__card {
	z-index: 1000;
	opacity: 1;
	visibility: visible;
}

.main-map__wrap:hover .main-map__card {
	opacity: 1;
}

.main-map__card::after {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.main-map__card-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	row-gap: 1.25rem;
	padding: 1.25rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.main-map__card-heading {
	font-family: var(--ff-heading);
	font-size: var(--fs-heading-sm);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.main-map__card-body {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--clr-neutral-500);
}

.main-map__card-item {
	display: flex;
}

.main-map__card-label {
	flex: 0 0 auto;
	width: 7em;
	color: var(--clr-accent-400);
}

.main-map__card-value {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
}

.main-map__card-value>*+* {
	margin-block-start: 0.25em;
}

.main-map__card-link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.main-map__card-link:hover {
	color: var(--clr-accent-500);
}

.main-map__card-addr {
	color: inherit;
}

/* Section-product styles */

.section-product {
	display: flex;
	flex-direction: column;
	padding-block-start: 0;
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5.5rem);
}

.section-product__container {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-product__head {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.section-product__body {
	position: relative;
	display: flex;
	align-items: center;
}

.section-product__icon {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(4rem, 10vw);
	height: auto;
}

.section-product__lines {
	position: absolute;
	top: 50%;
	width: 100%;
	height: auto;
	transform: translateY(-40%);
}

.section-product__model {
	position: relative;
	margin-inline: auto;
	width: 100%;
}

.section-product__model-wrapper {
	position: relative;
	aspect-ratio: 4/1;
	width: 100%;
}

.section-product__model-container {
	width: 100%;
	height: 100%;
}

.section-product__model-container.is-load {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}

.section-product__model-container>canvas {
	cursor: grab;
}

.section-product__model-container>canvas:active {
	cursor: grabbing;
}

.section-product__foot {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.875rem;
	margin-block-start: auto;
}

.section-product__col:nth-child(1) {
	display: flex;
	align-items: flex-end;
	gap: 1.25rem;
}

.section-product__col:nth-child(2) {
	display: grid;
	grid-template-columns: 1fr auto;
	justify-content: flex-end;
	gap: 1.25rem;
}

.section-product__video {
	display: flex;
	justify-content: space-between;
	flex-shrink: 0;
	align-items: flex-end;
	gap: 1.25rem;
	padding: 1.25rem;
	min-width: 16.5rem;
	border: 1px solid var(--clr-neutral-500);
	background-color: rgb(0, 0, 0, 0);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.section-product__video-label {
	opacity: 0.8;
	text-transform: uppercase;
}

.section-product__video-play {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	border: none;
	border-radius: 50%;
	background: var(--clr-accent-400);
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.section-product__video-play:focus,
.section-product__video-play:hover {
	background: var(--clr-accent-500);
}

.section-product__video-play>svg {
	width: 1.5rem;
	height: 1.5rem;
}

.section-product__link {
	color: var(--clr-neutral-100);
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all 0.2s ease 0s;
}

a.section-product__link:hover,
a.section-product__link:hover>.section-product__link-text {
	color: var(--clr-accent-500);
}

.section-product__link-text {
	color: var(--clr-neutral-100);
	text-wrap: balance;
}

.section-product__link-icon {
	margin-block-end: -0.2em;
	width: 1.125em;
	height: 1.125em;
	fill: currentColor;
}

.section-product__sub-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.25rem;
}

.section-product__label {
	margin-block-start: 0;
	opacity: 0.8;
}

.section-product__chars {
	-moz-column-count: 2;
	column-count: 2;
	-moz-column-gap: 2.5rem;
	column-gap: 2.5rem;
	opacity: 0.8;
}

.section-product__chars>*+* {
	margin-block-start: 0.375em;
}

.section-product__chars>*:first-child {
	margin-block-start: 0;
}

@media (max-width: 80em) {
	.section-product__col:nth-child(1) {
		flex-direction: column;
		align-items: flex-start;
	}

	.section-product__col:nth-child(2) {
		grid-template-columns: 1fr;
	}

	.section-product__label {
		text-align: right;
	}
}

@media (max-width: 48em) {
	.section-product__foot {
		grid-template-columns: 1fr;
	}

	.section-product__col:nth-child(1) {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section-product__video-play {
		padding: 0.75rem;
	}

	.section-product__video-play>svg {
		width: 1rem;
		height: 1rem;
	}

	.section-product__sub-col {
		align-items: center;
	}

	.section-product__label {
		text-align: center;
	}
}

/* Section product banner styles */

.section-product-banner {
	position: relative;
	padding-block-end: 0;
}

.section-product-banner__container {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.section-product-banner__head {
	display: flex;
	align-items: flex-end;
}

.section-product-banner__body {
	display: flex;
	align-items: center;
	gap: 1.875rem;
	min-height: 50vh;
}

.section-product-banner__body-line {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: -1;
	width: 100%;
	height: auto;
	transform: translateY(-5%);
}

.section-product-banner__image {
	position: relative;
	margin-inline: auto;
	width: min(90rem, 85%);
}

/* Section product details styles */

.section-product-details {
	position: relative;
}

.section-product-details__container {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.section-product-details__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
}

.section-product-details__body-lines {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	width: 45%;
	transform: translateY(-50%);
	pointer-events: none;
}

.section-product-details__col {
	display: flex;
	flex-direction: column;
}

.section-product-details__models {
	width: min(100%, 36rem);
	color: var(--clr-accent-400);
}

.section-product-details__table {
	border-collapse: collapse;
}

/* stylelint-disable-next-line no-descending-specificity */
.section-product-details__table td>*,
/* stylelint-disable-next-line no-descending-specificity */
.section-product-details__table th>* {
	margin-block-start: 0.25em;
}

.section-product-details__table td,
.section-product-details__table th {
	padding: 0.5rem 0.25rem;
	text-align: left;
	vertical-align: top;
}

.section-product-details__table tr {
	border-bottom: 1px solid currentColor;
}

@media (max-width: 80em) {
	.section-product-details__body {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 48em) {
	.section-product__model-wrapper {
		aspect-ratio: 2/1;
	}

	.section-product-details__table {
		font-size: 0.875rem;
	}
}

@media (max-width: 36em) {
	.section-product-details__table {
		font-size: 0.625rem;
	}
}

/* Section products styles */

.section-products {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-products__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-products__head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	gap: 1.875rem;
}

.section-products__head-col {
	display: flex;
	flex-direction: column;
}

.section-products__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 1.25rem;
}

@media (max-width:90em) {
	.section-products__head {
		grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	}
}

@media (max-width:48em) {
	.section-products__head {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.section-products__grid {
		grid-template-columns: 1fr;
	}
}

/* Section video styles */

.section-video {
	overflow: hidden;
	color: var(--clr-white);
}

.section-video__container {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-video__head {
	position: absolute;
	top: 0;
	z-index: 1;
	padding-block-start: 1.25rem;
	width: 100%;
	text-shadow: 2px 2px 8px rgb(0, 0, 0, 0.75);
}

.section-video__body {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.section-video__player {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(calc(80% - var(--size)) 0,
			80% var(--size),
			100% var(--size),
			100% 100%,
			calc(20% + var(--size)) 100%,
			20% calc(100% - var(--size)),
			0 calc(100% - var(--size)),
			0 0);

	position: relative;
	display: flex;
	aspect-ratio: 16/7;
}

.section-video__player::before {
	content: "";
	position: absolute;
	inset: -2px 0;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.section-video__player-button {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	width: 5rem;
	height: 5rem;
	border: 1px solid var(--clr-neutral-400);
	border-radius: 50%;
	background-color: var(--clr-neutral-500-a);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transform: translate(-50%, -50%);
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.section-video__player-button:hover {
	border-color: var(--clr-accent-400);
	background-color: var(--clr-accent-400);
}

.section-video__player-button-icon {
	width: 2.5rem;
	height: 2.5rem;
	fill: var(--clr-accent-400);
	transition: all var(--transition-ease-sm) 0s;
}

.section-video__player-button:hover .section-video__player-button-icon {
	fill: var(--clr-white);
}

.section-video__player-inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	height: 100%;
	clip-path: var(--clip);
}

.section-video__player-video {
	aspect-ratio: 16 / 7;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width:64em) {
	.section-video__head {
		position: static;
		margin-block-start: 0;
	}
}

@layer utilities {
	/* Animation styles */

	.split-line,
	.split-char {
		transform: translateZ(0);
		/* форсит hardware acceleration */
		will-change: transform;
		backface-visibility: hidden;
	}

	.split-line p {
		margin-block-start: 0;
	}

	.split-line+.split-line {
		margin-block-start: 0;
	}

	.anim-lines svg,
	.anim-lines path {
		contain: strict;
		backface-visibility: hidden;
	}

	.anim-slide-top {
		opacity: 0;
	}

	.anim-text-typing p:first-child {
		margin-block-start: 0;
	}

	.anim-heading,
	.anim-text-typing,
	.anim-list-typing {
		opacity: 0;
	}

	.anim-text-typing .split-word {
		display: inline-flex !important;
	}

}

@layer utilities {
	/* Color utilities */

}

@layer utilities {
	/* Typography utilities */

	.text {
		opacity: 0.75;
		line-height: var(--lh-md);
		text-transform: uppercase;
	}

	.text>*+*,
	.list>*+*,
	.anim-text-typing ul>*+* {
		margin-block-start: 0.67em;
	}

	.text>*:first-child {
		margin-block-start: 0;
	}

	.list,
	.anim-text-typing ul {
		margin-inline: 0;
		padding-inline-start: 0;
		list-style: none;
	}

	.list>li,
	.anim-text-typing ul>li {
		position: relative;
		padding-inline-start: 1.5em;
	}

	.list>li::before,
	.anim-text-typing ul>li::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		flex: 0 0 auto;
		margin-block-start: 0.2em;
		width: 1em;
		height: 1em;
		background: url(../images/icons/icon-star.svg) 100% center/contain no-repeat;
	}

}

@layer utilities {
	/* Container utilities */

	.container {
		--offset: 1.875rem;

		margin-inline: auto;
		width: min(120rem, 100% - 2 * var(--offset));
	}

	@media (max-width: 62em) {
		.container {
			--offset: 1.25rem;
		}
	}

	@media (max-width: 48em) {
		.container {
			--offset: 1.25rem;
		}
	}

}

/* Vendors */



/* Globals */




/* Components */




















/* Layouts */


















/* Utils */