/* ==========================================================================
   stats.css — "Trusted by 40+ Brands" stats section (Figma-matched)
   ========================================================================== */

.ada-stats {
	background: var(--ada-bg);
	padding: clamp( 48px, 8vw, 96px ) clamp( 16px, 8vw, 120px );
}

.ada-stats__inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: clamp( 32px, 5vw, 64px );
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

/* ---- Left column -------------------------------------------------------- */
/* The column stretches to the cards' height; content sits at the top and the
   note + avatars are pushed to the bottom (Figma: fixed 568px, space-between),
   so there's a large gap after "Explore the full demo". */
.ada-stats__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	flex: 0 0 392px;
	max-width: 392px;
}

.ada-stats__content { display: flex; flex-direction: column; gap: 32px; }
.ada-stats__head { display: flex; flex-direction: column; gap: 16px; }
/* Stats is the only left-aligned head, so its badge stays flush-left. */
.ada-stats__head .ada-badge { align-self: flex-start; }

/* Badge default = centered (most section heads are centre-aligned). */
.ada-badge {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	background: var(--ada-badge-bg);
	border-radius: 9px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--ada-footer-ink);
}

.ada-stats__title {
	margin: 0;
	font-family: var(--ada-font-display);
	font-weight: 550;
	font-size: clamp( 30px, 4vw, 40px );
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ada-hero-title);
}

/* "40+ Brands." — blue → green gradient, matching the design. */
.ada-stats__title .ada-grad {
	background: linear-gradient( 90deg, var(--ada-announce-from) 0%, var(--ada-announce-to) 60% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ada-stats__sub {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-ink-muted);
}

.ada-stats__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--ada-link);
}

.ada-stats__link:hover { color: var(--ada-link); text-decoration: underline; }
.ada-stats__link svg { display: block; width: 16px; height: 16px; }

.ada-stats__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

/* Avatar proof strip — keep its intrinsic size; the flex column would
   otherwise stretch it to the full container width. */
.ada-avatars { flex: none; width: 116px; height: auto; }

.ada-stats__note {
	margin: 0;
	max-width: 288px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--ada-footer-ink);
}
/* "All in real time," reads in the primary ink; the rest stays muted. */
.ada-stats__note strong { color: var(--ada-hero-title); font-weight: 500; }

/* ---- Right column: stat cards ------------------------------------------- */
.ada-stats__cards {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
	flex: 0 1 700px;
	max-width: 700px;
}

.ada-statcard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 304px;
	padding: 32px;
	background: var(--ada-card-bg);
	border-radius: 32px;
}

.ada-statcard__tag {
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-footer-ink);
}

.ada-statcard__text { display: flex; flex-direction: column; gap: 8px; }

.ada-statcard__num {
	font-family: var(--ada-font);
	font-weight: 600;
	font-size: clamp( 44px, 5vw, 56px );
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ada-hero-title);
}

.ada-statcard__desc {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-footer-ink);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
	.ada-stats__inner { flex-direction: column; align-items: stretch; }
	.ada-stats__text { flex-basis: auto; max-width: none; }
	.ada-stats__cards { flex-basis: auto; max-width: none; }
}

@media (max-width: 560px) {
	.ada-stats__cards { grid-template-columns: 1fr; }
	.ada-statcard { min-height: 0; }
}