/* benefits.css — "Почему выбирают нас" (Section 8, WHY CHOOSE US) of
 * MASTER_PROJECT.md. Built directly in front-page.php using real content
 * from the Figma screenshot (6 cards, 3-column grid).
 */

.benefits__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

.benefits__title {
	color: var(--color-accent);
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 32px; /* TODO: confirm against Figma */
	margin: 0 0 16px;
}

.benefits__desc {
	color: var(--color-white);
	font-family: var(--font-primary);
	max-width: 640px;
	margin: 0 0 40px;
	line-height: 1.5;
}

.benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* confirmed: 3-column grid shown in Figma */
	gap: 24px; /* TODO: confirm against Figma */
}

.ontop360-benefit-card {
	background-color: var(--color-card-bg);
	border-radius: 16px; /* TODO: confirm against Figma */
	padding: 32px 24px; /* TODO: confirm against Figma */
	transition: transform 250ms ease, box-shadow 250ms ease; /* confirmed: 8.6, 250ms */
}

.ontop360-benefit-card:hover {
	transform: translateY(-4px); /* confirmed: 8.6 */
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); /* TODO: exact shadow value not given */
}

.ontop360-benefit-card__icon {
	display: inline-flex;
	color: var(--color-accent);
	margin-bottom: 16px;
}

.ontop360-benefit-card__icon svg {
	width: 28px; /* TODO: confirm against Figma */
	height: 28px;
}

.ontop360-benefit-card__title {
	font-family: var(--font-primary);
	font-weight: 700;
	color: var(--color-white);
	font-size: 16px; /* TODO: confirm against Figma */
	margin: 0 0 8px;
}

.ontop360-benefit-card__desc {
	font-family: var(--font-primary);
	color: var(--color-text-muted);
	font-size: 14px; /* TODO: confirm against Figma */
	margin: 0;
}