.about-section {
	background: var(--green-950);
	color: #fff;
}
.about-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 52px;
}
.about-intro p {
	color: rgba(255, 255, 255, 0.65);
	font-size: 18px;
	max-width: 540px;
}
.benefit-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.benefit-card {
	position: relative;
	min-height: 300px;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
	transition: 0.3s ease;
}
.benefit-card:hover {
	transform: translateY(-7px);
	border-color: rgba(255, 100, 38, 0.55);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
}
.benefit-number {
	position: absolute;
	right: 22px;
	top: 20px;
	color: rgba(255, 255, 255, 0.2);
	font:
		700 13px 'Space Grotesk',
		sans-serif;
}
.benefit-icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: rgba(255, 100, 38, 0.16);
	color: #ff8b5b;
	font-size: 23px;
	margin-bottom: 50px;
}
.benefit-card h3 {
	font-size: 21px;
	margin-bottom: 12px;
}
.benefit-card p {
	color: rgba(255, 255, 255, 0.58);
	font-size: 14px;
}
@media (max-width: 900px) {
	.about-intro {
		grid-template-columns: 1fr;
		gap: 25px;
	}
	.benefit-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.benefit-grid {
		grid-template-columns: 1fr;
	}
	.benefit-card {
		min-height: auto;
	}
	.benefit-icon {
		margin-bottom: 30px;
	}
}