/* ==========================================================
   SERVICES — три блоки: Розробка / Просування / Контент
   ========================================================== */

.services {
	padding-block: var(--space-24);
}

/* Альтернативний фон для середнього блоку — легкий спосіб
   візуально розділити три послідовні секції без зайвих рамок */
.services--alt {
	background-color: var(--color-black);
}
.services--alt .section-title,
.services--alt h3 { color: var(--color-white); }
.services--alt .eyebrow,
.services--alt .section-lead { color: var(--color-gray-200); }
.services--alt .service-card {
	background-color: #1A1A1A;
}
.services--alt .service-card__text { color: var(--color-gray-200); }

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.service-card {
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	padding: var(--space-8);
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-base);
}
.service-card:hover { transform: translateY(-4px); }

.service-card__number {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--color-accent);
	margin-bottom: var(--space-4);
}

.service-card__title {
	font-size: 1.25rem;
	margin-bottom: var(--space-3);
}

.service-card__text {
	color: var(--color-gray-500);
	font-size: var(--fs-small);
}

@media (max-width: 900px) {
	.service-grid { grid-template-columns: 1fr; }
}