/* ==========================================================
   HERO
   ========================================================== */

.hero {
	padding-block: var(--space-24) var(--space-16);
	background-color: var(--color-cream);
}

.hero__inner {
	max-width: 900px;
}

.hero__title {
	font-size: var(--fs-h1);
	font-weight: 800;
	margin-block: var(--space-4) var(--space-6);
}

.hero__lead {
	font-size: var(--fs-lead);
	color: var(--color-gray-500);
	max-width: 620px;
	margin-bottom: var(--space-8);
}

.hero__actions {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* ---------- USP-карусель ----------
   Навмисно БЕЗ h1/h2 всередині слайдів — див. обговорення
   про єдиний H1 на сторінку. Це прості <p>, що прокручуються. */

.hero-carousel {
	margin-top: var(--space-16);
	overflow: hidden;
	border-top: 1px solid var(--color-gray-200);
	border-bottom: 1px solid var(--color-gray-200);
}

.hero-carousel__track {
	display: flex;
	gap: var(--space-16);
	padding-block: var(--space-4);
	animation: scroll-track 24s linear infinite;
	width: max-content;
}

.hero-carousel__slide { flex-shrink: 0; }

.hero-carousel__text {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 500;
	color: var(--color-gray-500);
	white-space: nowrap;
}

@keyframes scroll-track {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-carousel__track { animation: none; }
}