/* ==========================================================================
   Base: шрифты, токены, reset, контейнер, утилиты.
   Брейкпоинты макета: 1920 (база) / 1440 / 1024 / 375.
   Схема desktop-first:
     ≥1920          — макет 1920
     1440…1919      — макет 1440   @media (max-width: 1919.98px)
     1024…1439      — макет 1024   @media (max-width: 1439.98px)
     <1024          — макет 375    @media (max-width: 1023.98px)
   ========================================================================== */

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

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
	/* Цвета (переменные Figma) */
	--c-orange: #e95024;          /* main orange */
	--c-orange-active: #dd3800;   /* active orange */
	--c-black: #17181b;           /* black */
	--c-grafit: #414141;          /* grafit */
	--c-text: #4c4c4c;            /* text color */
	--c-text-2: #5a5a5a;
	--c-grey: #e4e4e4;            /* grey */
	--c-grey-2: #f1f1f1;
	--c-grey-3: #929292;
	--c-light: #f8f8f8;           /* light grey */
	--c-light-2: #f9f9f9;
	--c-white: #fff;
	--c-red: #eb5757;             /* Red */
	--c-dark-1: #14161b;          /* фон хедера / меню */
	--c-dark-2: #1d1f24;          /* второй уровень хедера */
	--c-dark-3: #242529;
	--c-link-muted: rgba(228, 228, 228, 0.7);

	/* Сетка */
	--container-pad: 60px;

	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ls: -0.03em; /* letterSpacing: -3% из Figma */

	--t-fast: 0.2s ease;
}

@media (max-width: 1919.98px) {
	:root { --container-pad: 40px; }
}

@media (max-width: 1439.98px) {
	:root { --container-pad: 28px; }
}

@media (max-width: 1023.98px) {
	:root { --container-pad: 14px; }
}

/* Reset ------------------------------------------------------------------ */

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

/* −3% от размера шрифта КАЖДОГО элемента (как в Figma).
   На body нельзя: em вычислится от 16px и унаследуется как −0.48px. */
* {
	letter-spacing: var(--ls);
}

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

body {
	margin: 0;
	min-width: 320px;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--ls);
	color: var(--c-black);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* как в Figma: длинное слово или неразрывная цепочка рвётся, а не вылезает */
	word-break: break-word;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
	margin: 0;
}

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

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	font-size: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

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

img {
	height: auto;
}

button, input, textarea, select {
	margin: 0;
	font: inherit;
	color: inherit;
}

button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--c-orange);
	outline-offset: 2px;
}

/* Layout ----------------------------------------------------------------- */

.container {
	width: 100%;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.site-main {
	display: block;
}

body.is-locked {
	overflow: hidden;
}

/* Иконки через mask: цвет задаётся currentColor, геометрия — из SVG-файла
   (mask-image задаётся в CSS компонента). Размер маски — --icon-w / --icon-h
   (натуральный размер SVG из макета), размер бокса — width/height. */
.icon {
	display: inline-block;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: var(--icon-w, 100%) var(--icon-h, 100%);
	mask-size: var(--icon-w, 100%) var(--icon-h, 100%);
}

/* Секции ----------------------------------------------------------------- */

/* Внутренние отступы секций совпадают с боковыми полями: 60 / 40 / 28 / 14 */
.section {
	padding: var(--container-pad);
}

/* Заголовок секции: H1 64/1 · H2 48/1.1 · H3 36/1.1 · H6 24/1.1 */
.section-title {
	max-width: 890px;
	font-size: 64px;
	font-weight: 500;
	line-height: 1;
	color: var(--c-black);
}

/* Строка «заголовок + кнопка» */
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
}

.section-head .btn {
	flex-shrink: 0;
}

@media (max-width: 1919.98px) {
	.section-title {
		max-width: 680px;
		font-size: 48px;
		line-height: 1.1;
	}

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

@media (max-width: 1439.98px) {
	.section-title {
		max-width: 478px;
		font-size: 36px;
	}

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

@media (max-width: 1023.98px) {
	.section-title {
		max-width: none;
		font-size: 24px;
	}

	.section-head {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 20px;
	}
}

/* Утилиты ---------------------------------------------------------------- */

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