/* Systical — Stat Boxes */

.sys-sb {
	--sb-accent: #9afd0d;
	--sb-line: rgba(255, 255, 255, 0.3);
	--sb-solid: rgba(255, 255, 255, 0.13);
	--sb-max: 1320px;
	--sb-cols: 3;
	--sb-gap: 18px;
	--sb-art: 160px;
	--sb-speed: 3s;
	--sb-head-max: 1050px;

	position: relative;
	padding: 100px 0 110px;
	background: #070707;
}

.sys-sb__inner {
	max-width: var(--sb-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- heading ---------- */

.sys-sb__head {
	max-width: var(--sb-head-max);
	margin: 0 auto 60px;
	text-align: center;
}

.sys-sb__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 8px 16px;
	border-radius: 40px;
	background: #1a1a1a;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.sys-sb__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sb-accent);
}

.sys-sb__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(37.5px, 5.8vw, 80px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #fff;
}

/* ---------- grid ---------- */

.sys-sb__grid {
	display: grid;
	grid-template-columns: repeat(var(--sb-cols), minmax(0, 1fr));
	gap: var(--sb-gap);
}

.sys-sb__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 28px 26px 26px;
	border-radius: 18px;
	background: #111;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	transition: background-color 0.25s ease;
}

/* ---------- text ---------- */

.sys-sb__value {
	display: block;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.sys-sb__label {
	display: block;
	margin-top: 8px;
	color: #a6a6a6;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

.sys-sb__desc {
	margin: 0;
	color: #b4b4b4;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
}

/* ---------- artwork ---------- */

.sys-sb__art {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Takes the slack so the description sits on the card floor whatever the
	   figure and label wrap to. */
	flex: 1 1 auto;
	min-height: var(--sb-art);
	margin: 22px 0 24px;
}

.sys-sb__svg,
.sys-sb__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--sb-art);
	max-height: var(--sb-art);
	object-fit: contain;
}

/* ---------- motion ----------
   Every moving part declares its animation up front but sits paused; the
   `--always` modifier (on by default) sets them running, and without it they
   wait for hover. Each keyframe set starts and ends at the rest pose, which is
   what lets a paused illustration sit still rather than mid-gesture. */

.sys-sb--animated .sb-anim {
	animation-duration: var(--sb-speed);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-play-state: paused;
	transform-box: fill-box;
	transform-origin: center;
}

.sys-sb--animated .sys-sb__card:hover .sb-anim,
.sys-sb--always .sb-anim {
	animation-play-state: running;
}

/* Stagger, so the parts of one illustration do not pulse in lockstep. */
.sys-sb--animated .sb-d1 { animation-delay: 0s; }
.sys-sb--animated .sb-d2 { animation-delay: calc(var(--sb-speed) * 0.16); }
.sys-sb--animated .sb-d3 { animation-delay: calc(var(--sb-speed) * 0.32); }

.sys-sb--animated .sb-rise { animation-name: sb-rise; }
.sys-sb--animated .sb-plus { animation-name: sb-pulse; }
.sys-sb--animated .sb-tag { animation-name: sb-nudge; }
.sys-sb--animated .sb-spin { animation-name: sb-spin; animation-timing-function: linear; transform-origin: 80px 62px; transform-box: view-box; }
.sys-sb--animated .sb-spin-slow { animation-name: sb-spin-rev; animation-timing-function: linear; animation-duration: calc(var(--sb-speed) * 2); transform-origin: 80px 62px; transform-box: view-box; }
.sys-sb--animated .sb-pop { animation-name: sb-pop; }
.sys-sb--animated .sb-slide { animation-name: sb-slide; }
.sys-sb--animated .sb-bob { animation-name: sb-bob; }
.sys-sb--animated .sb-in-left { animation-name: sb-in-left; }
.sys-sb--animated .sb-in-right { animation-name: sb-in-right; }
.sys-sb--animated .sb-dash { animation-name: sb-dash; animation-timing-function: linear; }
.sys-sb--animated .sb-row { animation-name: sb-nudge; }
.sys-sb--animated .sb-drop { animation-name: sb-drop; }
.sys-sb--animated .sb-tick { animation-name: sb-pop; }

@keyframes sb-rise {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(4px, -10px); }
}

@keyframes sb-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.16); opacity: 0.75; }
}

@keyframes sb-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(6px); }
}

@keyframes sb-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes sb-spin-rev {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

@keyframes sb-pop {
	0%, 100% { transform: scale(1); }
	40% { transform: scale(1.3); }
}

@keyframes sb-slide {
	0%, 100% { transform: translateX(0); opacity: 1; }
	50% { transform: translateX(10px); opacity: 0.55; }
}

@keyframes sb-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes sb-in-left {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-8px, -5px); }
}

@keyframes sb-in-right {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(8px, -5px); }
}

@keyframes sb-dash {
	from { stroke-dashoffset: 36; }
	to { stroke-dashoffset: 0; }
}

@keyframes sb-drop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-sb {
		--sb-art: 140px;
		padding: 80px 0 88px;
	}

	.sys-sb__card {
		padding: 24px 22px 22px;
	}

	.sys-sb__value {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.sys-sb {
		--sb-art: 130px;
		--sb-gap: 14px;
		padding: 64px 0 70px;
	}

	.sys-sb__inner {
		padding: 0 18px;
	}

	.sys-sb__head {
		margin-bottom: 30px;
	}

	.sys-sb__art {
		margin: 18px 0 20px;
	}

	.sys-sb__value {
		font-size: 26px;
	}

	/* No hover on a touch screen, so the artwork would never move — run it. */
	.sys-sb--animated .sb-anim {
		animation-play-state: running;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sys-sb--animated .sb-anim,
	.sys-sb--always .sb-anim,
	.sys-sb--animated .sys-sb__card:hover .sb-anim {
		animation: none;
	}
}