/* ============================================================
   Stat band — the claim and its prose on one side, the numbers that back it
   on the other. Everything lives under .srw-statband so no other section can
   pick up the dark ground or the glass cards.
   ============================================================ */

/* The band paints its own full-bleed ground, the way the closing CTA does:
   the <section> is already the full width of its Elementor container. */
.srweb .srw-statband {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	background: linear-gradient(160deg, var(--c-ink) -20%, var(--c-ink-deep) 60%);
}
/* Two soft washes, cyan from the top right and amber from the bottom left, so
   the ground reads as depth rather than a flat rectangle. */
.srweb .srw-statband::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(760px 460px at 84% 0%, rgba(34, 211, 238, .15), transparent 62%),
		radial-gradient(560px 380px at 0% 100%, rgba(249, 115, 22, .08), transparent 62%);
}

/* ---------- the two columns ---------- */
.srweb .srw-sb-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(1.6rem, 4vw, 3.4rem);
	align-items: start;
}
@media (max-width: 900px) {
	.srweb .srw-sb-grid { grid-template-columns: 1fr; }
}

/* ---------- copy column ---------- */
/* A touch more air under the eyebrow than the shared default: this band opens a
   page block, so its heading needs the extra beat. */
.srweb .srw-statband .eyebrow { color: var(--c-glow); margin-bottom: clamp(.9rem, 1.6vw, 1.25rem); }
.srweb .srw-statband .eyebrow::before { background: var(--c-glow); }

/* The heading level is an editorial choice (where the module lands on the
   page), not a size choice: the metric is stated here so an h3 or an h4 still
   opens the band at the same weight. */
.srweb .srw-sb-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #fff;
	max-width: none;
	margin: 0;
}
.srweb .srw-statband .srw-sb-title em { font-style: normal; color: var(--c-glow); }
/* The ® would otherwise keep the fill colour of a gradient h1. */
.srweb .srw-statband .srw-sb-title sup.sr-reg { -webkit-text-fill-color: #fff; color: #fff; }

.srweb .srw-sb-paras {
	display: grid;
	gap: .9rem;
	margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.srweb .srw-sb-paras p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(223, 234, 248, .78);
}
/* The first paragraph carries the lead-in. */
.srweb .srw-sb-paras p:first-child { color: rgba(255, 255, 255, .92); font-size: 1.08rem; }
/* Prose links: the shared blue is unreadable on ink. */
.srweb .srw-statband .srw-sb-paras a { color: #fff; border-bottom-color: var(--c-glow); }
.srweb .srw-statband .srw-sb-paras a:hover { color: var(--c-glow); border-bottom-color: var(--c-glow); }

/* The button, on ink. The base outline button is transparent; here it gets a
   faint fill so it does not disappear into the wash. */
.srweb .srw-sb-btn { margin-top: var(--sp-lg); }
.srweb .srw-sb-paras + .srw-sb-btn { margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.srweb .srw-statband .btn-ghost {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	border-color: rgba(255, 255, 255, .34);
}
.srweb .srw-statband .btn-ghost:hover,
.srweb .srw-statband .btn-ghost:focus {
	background: rgba(255, 255, 255, .12);
	border-color: var(--c-glow);
	color: #fff;
}

/* ---------- figures column ---------- */
.srweb .srw-sb-figs { display: grid; gap: var(--sp-md); }
.srweb .srw-sb-fig {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	border-radius: var(--r-xl);
	padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.7rem);
	background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(34, 211, 238, .04));
	border: 1px solid rgba(255, 255, 255, .14);
	transition: transform var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out);
}
.srweb .srw-sb-fig:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, .45); }

.srweb .srw-sb-num {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 3.7vw, 3.1rem);
	line-height: .95;
	letter-spacing: -.035em;
	color: var(--c-glow);
	/* Fixed-width digits: the count-up would otherwise shuffle the card sideways
	   on every frame. */
	font-variant-numeric: tabular-nums;
}
.srweb .srw-sb-fig--hot .srw-sb-num { color: var(--c-accent); }
.srweb .srw-sb-lbl { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(223, 234, 248, .85); }

/* The brand mark sits on the card floor, whatever the label's length. */
.srweb .srw-sb-mark { margin: auto 0 0; padding-top: var(--sp-md); }
.srweb .srw-sb-mark img {
	display: block;
	height: 46px;
	width: auto;
	background: #fff;
	border-radius: 8px;
	padding: 6px 12px;
}

.srweb .srw-statband :focus-visible { outline-color: var(--c-glow); }

/* ============================================================
   Light tone — the same band where the page is already open and bright: no
   ground of its own, glass cards over whatever the section background is.
   ============================================================ */
.srweb .srw-statband--light { background: none; color: var(--c-text); }
.srweb .srw-statband--light::before { content: none; }
.srweb .srw-statband--light .eyebrow { color: var(--c-ink); }
.srweb .srw-statband--light .eyebrow::before { background: var(--c-accent); }
.srweb .srw-statband--light .srw-sb-title { color: var(--c-ink); }
.srweb .srw-statband--light .srw-sb-title em { color: var(--c-accent); }
.srweb .srw-statband--light .srw-sb-title sup.sr-reg { -webkit-text-fill-color: var(--c-ink); color: var(--c-ink); }
.srweb .srw-statband--light .srw-sb-paras p { color: var(--c-text-soft); }
.srweb .srw-statband--light .srw-sb-paras p:first-child { color: var(--c-ink); font-weight: 500; }
.srweb .srw-statband--light .srw-sb-paras a { color: var(--c-ink); border-bottom-color: var(--c-glow); }
.srweb .srw-statband--light .srw-sb-paras a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.srweb .srw-statband--light .srw-sb-fig {
	background: rgba(255, 255, 255, .62);
	border-color: rgba(255, 255, 255, .9);
	box-shadow: 0 18px 40px rgba(20, 29, 55, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(16px) saturate(1.25);
	backdrop-filter: blur(16px) saturate(1.25);
	/* A glass card lifts more slowly than the ink one: the shadow has further to
	   travel, and at the shared micro time (.22s) the rise reads as a flicker. */
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.srweb .srw-statband--light .srw-sb-fig:hover {
	border-color: rgba(14, 116, 144, .45);
	box-shadow: 0 26px 56px rgba(20, 29, 55, .16);
}
.srweb .srw-statband--light .srw-sb-num { color: #0e7490; }
.srweb .srw-statband--light .srw-sb-fig--hot .srw-sb-num { color: var(--c-accent); }
/* The closing figure of a band — the one that carries a product mark — reads in
   ink rather than teal, so the three numbers step down in weight instead of
   repeating the same colour twice. The accent figure still wins over it. */
.srweb .srw-statband--light .srw-sb-fig--ink .srw-sb-num { color: var(--c-ink); }
.srweb .srw-statband--light .srw-sb-fig--ink.srw-sb-fig--hot .srw-sb-num { color: var(--c-accent); }
.srweb .srw-statband--light .srw-sb-lbl { color: var(--c-text); }
.srweb .srw-statband--light .btn-ghost {
	background: rgba(255, 255, 255, .7);
	color: var(--c-ink);
	border-color: var(--c-border);
}
.srweb .srw-statband--light .btn-ghost:hover,
.srweb .srw-statband--light .btn-ghost:focus {
	background: #fff;
	border-color: #0e7490;
	color: var(--c-ink);
}
.srweb .srw-statband--light :focus-visible { outline-color: var(--c-accent); }



/* ---------- the section's own breathing room ----------
   The approved layout gives every section «padding: clamp(3.4rem, 7vw, 5.4rem)»
   of its own — 86px at a desktop width. The Layout tab's spacing steps top out
   at 40px, so a section built only from those reads visibly more cramped than
   the design. The padding lives here, and those steps are set to "None" in the
   page content so the two do not add up. */
.srweb .srw-statband {
	padding-top: clamp(3.4rem, 7vw, 5.4rem);
	/* The approved layout closes this band wider than it opens it — 104px against
	   86 — because the seam of the section below lands right after it. */
	padding-bottom: clamp(4rem, 9vw, 6.5rem);
}