/* ==========================================================
   BASE — скидання стилів, типографіка, глобальні правила
   ========================================================== */

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

html {
	scroll-behavior: smooth;
}

/* Повага до налаштувань користувача — вимикаємо анімації, якщо він їх не хоче */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-gray-700);
	background-color: var(--color-cream);
	-webkit-font-smoothing: antialiased;
}

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

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

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

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	color: var(--color-black);
}

p { margin: 0; }

button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

input, select, textarea {
	font: inherit;
}

/* Фокус-стани для клавіатурної навігації — доступність, не декор */
:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* Ховаємо skip-link, поки він не в фокусі — стандартний a11y-патерн */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	background: var(--color-black);
	color: var(--color-white);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	z-index: 1000;
	transition: top var(--transition-base);
}
.skip-link:focus {
	top: var(--space-4);
}

/* ---------- Утиліти, що повторюються по секціях ---------- */

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	margin-bottom: var(--space-4);
}

.section-title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-4);
}

.section-lead {
	font-size: var(--fs-lead);
	color: var(--color-gray-500);
	max-width: 640px;
	margin-bottom: var(--space-12);
}

/* Inline жовтий хайлайт частини заголовка — прийом з референсу */
.highlight {
	background: linear-gradient(180deg, transparent 55%, var(--color-accent) 55%);
	padding-inline: 0.1em;
}

/* ---------- Кнопки ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-full);
	font-weight: 700;
	font-size: var(--fs-body);
	transition: transform var(--transition-base), background-color var(--transition-base);
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--accent {
	background-color: var(--color-accent);
	color: var(--color-black);
}
.btn--accent:hover { background-color: var(--color-accent-dark); }

.btn--ghost {
	background-color: transparent;
	color: var(--color-black);
	border: 2px solid var(--color-black);
}
.btn--ghost:hover { background-color: var(--color-black); color: var(--color-white); }