/* ==========================================================================
   Services Section ("What we build") — Home
   ========================================================================== */

.fae-services__grid {
	display: grid;
	gap: 20px;
	align-items: stretch;
}

.fae-services__grid > .fae-reveal {
	height: 100%;
}

@media (min-width: 768px) {
	.fae-services__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fae-services-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	min-height: 280px;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: #0f0f10;
	padding: 28px;
}

@media (min-width: 640px) {
	.fae-services-card {
		padding: 36px;
	}
}

.fae-services-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 64px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: rgba(255, 255, 255, 0.02);
}

.fae-services-card__icon svg {
	width: 20px;
	height: 20px;
}

/* CSS-drawn shapes for the first two cards (source used plain divs with
   Tailwind border/rounded utilities, not icon glyphs) */
.fae-services-card__shape {
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid #c6f135;
}

.fae-services-card__shape--circle {
	border-radius: 9999px;
}

.fae-services-card__shape--diamond {
	border-radius: 2px;
	transform: rotate(45deg);
}

.fae-services-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.fae-services-card__text {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: #a8a8b0;
}

/* "Learn more" CTA below the 3 cards — per project brief, not in source JSX */
.fae-services__cta {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}