/* Premium Counters (JustNew) */
.hpc-wrap { width: 100%; box-sizing: border-box; position: relative; }
.hpc-wrap *, .hpc-wrap *::before, .hpc-wrap *::after { box-sizing: border-box; }
.hpc-panel { overflow: hidden; }
.hpc-pattern {
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 46px 46px;
}
.hpc-grid {
	--hpc-cols: 3; --hpc-gap: 36px; --hpc-lgap: 18px; --hpc-size: 100px; --hpc-stroke: 8;
	--hpc-ring: #5AD636; --hpc-track: rgba(255,255,255,.2);
	display: grid; grid-template-columns: repeat(var(--hpc-cols), minmax(0, 1fr)); gap: var(--hpc-gap);
	align-items: start;
}
.hpc-item { display: flex; align-items: center; gap: var(--hpc-lgap); min-width: 0; }
.hpc-layout-below .hpc-item { flex-direction: column; text-align: center; }

.hpc-ring { position: relative; width: var(--hpc-size); height: var(--hpc-size); flex: none; display: flex; align-items: center; justify-content: center; }
.hpc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hpc-ring circle { fill: none; stroke-width: var(--hpc-stroke); }
.hpc-track { stroke: var(--hpc-track); }
.hpc-bar {
	stroke: var(--hpc-ring); stroke-dasharray: 100 100;
	stroke-dashoffset: calc(100 - var(--hpc-fill, 75));
	transition: stroke-dashoffset var(--hpc-dur, 1800ms) cubic-bezier(.2,.7,.2,1);
}
.hpc-round .hpc-bar { stroke-linecap: round; }
.hpc-glow .hpc-bar { filter: drop-shadow(0 0 6px var(--hpc-ring)); }

.hpc-num {
	position: relative; z-index: 1; display: inline-flex; align-items: baseline; justify-content: center;
	color: #fff; font-weight: 700; line-height: 1; white-space: nowrap;
	font-size: calc(var(--hpc-size) * var(--hpc-fs, .26)); font-variant-numeric: tabular-nums;
}
.hpc-pre, .hpc-suf { font-size: .8em; }
.hpc-label { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35; min-width: 0; max-width: 220px; }

/* animation: ring starts empty, fills when scrolled into view */
.hpc-grid[data-animate="yes"] .hpc-bar { stroke-dashoffset: 100; }
.hpc-grid[data-animate="yes"].is-in .hpc-bar { stroke-dashoffset: calc(100 - var(--hpc-fill, 75)); }
.hpc-grid[data-animate="yes"] .hpc-label { opacity: 0; transform: translateY(8px); transition: opacity .8s ease .3s, transform .8s ease .3s; }
.hpc-grid[data-animate="yes"].is-in .hpc-label { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.hpc-bar, .hpc-label { transition: none !important; }
}

@media (max-width: 767px) {
	.hpc-label { font-size: 15px; max-width: none; }
}
