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

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

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

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

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

figure figcaption {
	display: none;
}

address {
	font-style: normal;
}

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

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

@media (max-width: 1200px) {
	.container {
		padding: 0 var(--pad);
	}
}

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

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