/*
 * TOPOSEL Home – stats band ("Leveraging Analytics, Optimizing Profitability").
 * Scoped under .tsl-home; loaded ONLY on the approved test page.
 *
 * Sizes and colours are ESTIMATES from the reference screenshots:
 * near-black band with grey concentric rings (top right, bottom left),
 * three indigo→violet gradient cards with white text.
 */

.tsl-home .tsl-stats {
	--tsl-ring-1: #2d2e33;
	--tsl-ring-2: #25262b;
	--tsl-ring-3: #1b1c21;

	padding: 100px 0;
	background:
		radial-gradient(circle at 100% 0%, var(--tsl-ring-1) 0 170px, var(--tsl-ring-2) 170px 245px, var(--tsl-ring-3) 245px 310px, transparent 310px),
		radial-gradient(circle at 0% 100%, var(--tsl-ring-1) 0 175px, var(--tsl-ring-2) 175px 250px, var(--tsl-ring-3) 250px 328px, transparent 328px),
		#0b0c10;
}

.tsl-home .tsl-stats__inner {
	max-width: calc(1180px + 2 * var(--tsl-gutter)); /* Cards run slightly wider than other sections. */
}

.tsl-home .tsl-stats__title {
	color: #fff;
	text-align: center;
}

.tsl-home .tsl-stats__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 60px 0 0;
	padding: 0;
	list-style: none;
}

.tsl-home .tsl-stat {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	margin: 0;
	padding: 24px 20px;
	border-radius: 30px;
	background: linear-gradient(90deg, #4a2fd6 0%, #6b5bcf 100%);
	color: #fff;
	text-align: center;
}

.tsl-home .tsl-stat__value {
	margin: 0;
	font-size: 64px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums; /* Keeps the width steady while counting. */
}

.tsl-home .tsl-stat__label {
	margin: 8px 0 0;
	font-size: 18px;
	line-height: 1.35;
}

@media (max-width: 1024px) {
	.tsl-home .tsl-stats__title {
		max-width: 11em; /* Breaks after "Analytics," as in the reference. */
		margin: 0 auto;
		font-size: 40px;
		line-height: 1.3;
	}

	.tsl-home .tsl-stats__grid {
		flex-wrap: nowrap;
		gap: 21px;
	}

	.tsl-home .tsl-stat {
		flex: 1 1 0;
		min-height: 167px;
		padding: 24px;
	}

	.tsl-home .tsl-stat__value {
		font-size: 44px;
	}

	.tsl-home .tsl-stat__label {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.tsl-home .tsl-stats {
		padding: 70px 0;
	}

	.tsl-home .tsl-stats__title {
		font-size: clamp(24px, 8.2vw, 32px);
	}

	.tsl-home .tsl-stats__grid {
		flex-direction: column;
		gap: 19px;
		margin-top: 48px;
		padding: 0 7px;
	}

	.tsl-home .tsl-stat {
		min-height: 134px;
		border-radius: 25px;
	}

	.tsl-home .tsl-stat__value {
		font-size: 40px;
	}
}