/* Home page: "At a glance" bento grid (template-parts/home/stats.php). Scoped to .hs-section. */

.hs-section {
	position: relative;
	overflow: hidden;
	padding: 100px 0 110px;
	color: #0b1437;
	font-size: 16px;
	line-height: 1.6;
	background:
		radial-gradient(760px 380px at 100% 0%, rgba(43, 71, 242, .07), transparent 62%),
		radial-gradient(640px 360px at 0% 100%, rgba(124, 58, 237, .06), transparent 62%),
		linear-gradient(180deg, #fff 0%, #f5f7ff 100%);
}
.hs-section *, .hs-section *::before, .hs-section *::after { box-sizing: border-box; }
.hs-section h2, .hs-section p, .hs-section ul { margin: 0; padding: 0; }
.hs-section ul { list-style: none; }
.hs-section svg { display: block; flex: none; }

/* 1358px box + 24px gutters = 1310px of content, the same width as the other home sections */
.hs-wrap { width: 100%; max-width: 1358px; margin: 0 auto; padding: 0 24px; }

/* Heading */
.hs-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.hs-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
	font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: #2b47f2; background: rgba(43, 71, 242, .08);
}
.hs-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hs-section .hs-head h2 { margin-top: 18px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.015em; color: #0b1437; }
.hs-section .hs-head p { margin-top: 16px; font-size: 18px; color: #5b6485; }

/* Bento grid */
.hs-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.hs-tile--years, .hs-tile--customers, .hs-tile--models { grid-column: span 4; }
.hs-tile--services, .hs-tile--industries { grid-column: span 6; }

.hs-section .hs-tile {
	position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; overflow: hidden;
	background: #fff; border: 1px solid #e3e8f8; box-shadow: 0 18px 44px -30px rgba(18, 36, 120, .4);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.hs-section .hs-tile::before {
	content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
}
.hs-section .hs-tile::after {
	content: ""; position: absolute; right: -60px; top: -60px; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.hs-section .hs-tile:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 35%, #e3e8f8); box-shadow: 0 28px 56px -30px rgba(18, 36, 120, .5); }

.hs-tile__label { position: relative; z-index: 1; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.hs-tile__num {
	position: relative; z-index: 1; display: block; margin-top: 8px; font-size: clamp(3.2rem, 5.4vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em;
	font-variant-numeric: tabular-nums; color: #0b1437;
	background: linear-gradient(135deg, #0b1437 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hs-tile__num--sm { margin-top: 0; font-size: clamp(2.6rem, 4vw, 3.4rem); }
.hs-section .hs-tile__note { position: relative; z-index: 1; margin-top: 8px; font-size: 15px; color: #5b6485; }

/* Years: ten-step timeline */
.hs-years { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 30px; }
.hs-years::before { content: ""; position: absolute; left: 7px; right: 22px; top: calc(50% + 15px); height: 2px; background: #e3e8f8; }
.hs-years i { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #dfe4fb; border: 2px solid #fff; box-shadow: 0 0 0 1px #dfe4fb; }
.hs-years b { position: relative; font-size: 18px; font-weight: 800; color: var(--accent); line-height: 1; }
.hs-years__labels { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; font-weight: 500; color: #5b6485; }

/* Customers: 200 dots */
.hs-dots { display: grid; grid-template-columns: repeat(25, 1fr); gap: 5px; margin-top: auto; padding-top: 26px; }
.hs-dots i { aspect-ratio: 1; border-radius: 50%; background: #e8defb; }

/* Models: three pills */
.hs-section .hs-models { display: grid; gap: 9px; margin-top: auto; padding-top: 22px; }
.hs-models li {
	display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: #0b1437;
	background: #f1f9fc; border: 1px solid #d6eef6;
}
.hs-models li span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* Services / industries tiles */
.hs-tile__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.hs-tile__head > div { flex: 1; min-width: 0; }
.hs-tile__head .hs-tile__note { margin-top: 2px; }
.hs-section a.hs-tile__all {
	display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
	color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #fff); text-decoration: none; transition: background .25s ease, color .25s ease;
}
.hs-section a.hs-tile__all svg { width: 16px; height: 16px; transition: transform .25s ease; }
.hs-section a.hs-tile__all:hover { color: #fff; background: var(--accent); }
.hs-section a.hs-tile__all:hover svg { transform: translateX(3px); }

.hs-section .hs-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.hs-section .hs-chips a {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.2;
	color: #0b1437; text-decoration: none; background: #f5f7ff; border: 1px solid #e3e8f8;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.hs-chips svg { width: 18px; height: 18px; padding: 0; color: var(--accent); stroke-width: 1.9; transition: color .25s ease; }
.hs-section .hs-chips a:hover, .hs-section .hs-chips a:focus-visible { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.hs-chips a:hover svg, .hs-chips a:focus-visible svg { color: #fff; }
.hs-section .hs-chips a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Motion (only when JS is running) */
.hs-js .hs-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.hs-js .hs-reveal.is-in { opacity: 1; transform: none; }
.hs-js .hs-section .hs-tile.is-in:hover { transform: translateY(-6px); }

.hs-js .hs-years i { transition: background .4s ease, box-shadow .4s ease, transform .4s ease; transition-delay: calc(var(--i) * 90ms + 300ms); transform: scale(.6); }
.hs-js .hs-years b { opacity: 0; transition: opacity .4s ease; transition-delay: 1.3s; }
.hs-js .is-in .hs-years i { background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 10px -2px color-mix(in srgb, var(--accent) 60%, transparent); transform: none; }
.hs-js .is-in .hs-years b { opacity: 1; }

.hs-js .hs-dots i { transition: background .35s ease, transform .35s ease; transition-delay: calc(var(--i) * 7ms + 300ms); transform: scale(.4); }
.hs-js .is-in .hs-dots i { background: var(--accent); transform: none; }
.hs-js .is-in .hs-dots i:nth-child(7n+2) { background: color-mix(in srgb, var(--accent) 75%, #fff); }
.hs-js .is-in .hs-dots i:nth-child(5n+4) { background: color-mix(in srgb, var(--accent) 55%, #fff); }

.hs-js .hs-models li, .hs-js .hs-chips li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 60ms + 350ms); }
.hs-js .is-in .hs-models li, .hs-js .is-in .hs-chips li { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1000px) {
	.hs-tile--years, .hs-tile--customers { grid-column: span 6; }
	.hs-tile--models { grid-column: span 12; }
	.hs-tile--services, .hs-tile--industries { grid-column: span 12; }
	.hs-models { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.hs-section { padding: 76px 0 84px; }
	.hs-wrap { padding: 0 18px; }
	.hs-bento { gap: 16px; }
	.hs-tile--years, .hs-tile--customers, .hs-tile--models { grid-column: span 12; }
	.hs-section .hs-tile { padding: 24px 22px; }
	.hs-models { grid-template-columns: 1fr; }
	.hs-tile__head { flex-wrap: wrap; row-gap: 14px; }
	.hs-tile__head > div { flex: 1 1 160px; }
	.hs-section a.hs-tile__all { margin-left: 0; padding: 11px 16px; }
	.hs-section .hs-chips a { padding: 10px 14px 10px 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.hs-js .hs-reveal, .hs-js .hs-years i, .hs-js .hs-years b, .hs-js .hs-dots i, .hs-js .hs-models li, .hs-js .hs-chips li { opacity: 1; transform: none; transition: none; }
	.hs-js .hs-years i { background: var(--accent); }
	.hs-js .hs-dots i { background: var(--accent); }
	.hs-section * { transition-duration: .01ms !important; }
}