@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   Hero Statistics
   ========================================================================== */

.tc-hero__statistics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	width: 100%;
	max-width: 620px;
}

/* ==========================================================================
   Statistic Card
   ========================================================================== */

.tc-stat {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	padding: 1rem 1.25rem;

	background: rgba(255, 255, 255, 0.65);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 18px;

	transition:
		transform .3s ease,
		box-shadow .3s ease,
		border-color .3s ease;
}

.tc-stat:hover {

	transform: translateY(-4px);

	border-color: rgba(236, 105, 31, .18);

	box-shadow:
		0 18px 40px rgba(15, 23, 42, .08);

}

/* ==========================================================================
   Optional Icon
   ========================================================================== */

.tc-stat__icon {

	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	margin-bottom: .9rem;

	border-radius: 12px;

	background: rgba(236, 105, 31, .08);

}

.tc-stat__image {

	width: 22px;
	height: 22px;

	object-fit: contain;

}

/* ==========================================================================
   Number
   ========================================================================== */

.tc-stat__number {

	display: flex;
	align-items: baseline;
	gap: .15rem;

	margin-bottom: .35rem;

	font-weight: 800;

	line-height: 1;

	color: var(--tc-heading);

}

.tc-counter {

	font-size: clamp(2rem, 3vw, 2.75rem);

	font-weight: inherit;

	letter-spacing: -.03em;

}

.tc-stat__suffix {

	font-size: 1.2rem;

	font-weight: 700;

	color: var(--tc-primary);

}

/* ==========================================================================
   Label
   ========================================================================== */

.tc-stat__label {

	font-size: .95rem;

	font-weight: 500;

	line-height: 1.5;

	color: var(--tc-text-light);

	max-width: 14ch;

}

/* ==========================================================================
   Decorative Accent
   ========================================================================== */

.tc-stat::before {

	content: "";

	position: absolute;

	left: 0;
	top: 20px;
	bottom: 20px;

	width: 4px;

	border-radius: 999px;

	background: linear-gradient(
		180deg,
		var(--tc-primary),
		var(--tc-secondary)
	);

	opacity: .85;

}

/* ==========================================================================
   Large Desktop
   ========================================================================== */

@media (min-width: 1400px) {

	.tc-hero__statistics {

		max-width: 700px;
		gap: 2rem;

	}

}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 991px) {

	.tc-hero__statistics {

		max-width: 100%;
		justify-content: center;

	}

	.tc-stat {

		align-items: center;
		text-align: center;

	}

	.tc-stat__number {

		justify-content: center;

	}

	.tc-stat::before {

		display: none;

	}

}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {

	.tc-hero__statistics {

		grid-template-columns: 1fr;
		gap: 1rem;

	}

	.tc-stat {

		padding: 1rem;

	}

	.tc-counter {

		font-size: 2rem;

	}

	.tc-stat__label {

		max-width: none;

	}

}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.tc-stat {

		transition: none;

	}

	.tc-stat:hover {

		transform: none;

	}

}

/* Premium two-stat layout */
.tc-hero__statistics {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 560px;
	gap: .9rem;
}

.tc-stat {
	min-height: 104px;
	padding: 1rem 1.15rem 1rem 1.35rem;
	background: rgba(255, 255, 255, .78);
	border-color: rgba(15, 23, 42, .08);
	box-shadow: 0 12px 30px rgba(15, 23, 42, .035);
}

.tc-stat__label { font-size: .84rem; }

@media (max-width: 767px) {
	.tc-hero__statistics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tc-stat { min-height: 96px; padding-inline: 1rem; }
	.tc-stat__label { font-size: .8rem; }
}