/* ==========================================================================
   Stats counters — template-parts/home/stats.php · js/motion/counters.js
   ========================================================================== */

.stats {
	overflow: hidden;
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--dli-night-900);
}

.stats__glow {
	position: absolute;
	inset: -40% 20% auto;
	height: 120%;
	background: radial-gradient(50% 50% at 50% 50%, rgb(0 164 80 / 0.35), transparent 70%);
	pointer-events: none;
}

.stats__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 860px) {
	.stats__grid { grid-template-columns: repeat(2, 1fr); }
}

.stat {
	display: grid;
	gap: 6px;
	padding: var(--s-5);
	border: 1px solid rgb(255 255 255 / 0.1);
	border-radius: var(--r-lg);
	background: rgb(255 255 255 / 0.04);
}

.stat__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--s-2);
	border-radius: 14px;
	background: rgb(0 164 80 / 0.2);
	color: var(--dli-green-300);
}

.stat__value {
	color: #fff;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.stat__label {
	color: var(--color-on-dark-muted);
	font-weight: 600;
}