feat(site): pro hero with animated ring and floating stat chips

- hero-ring: continuously shifting gradient hairline around the hero
  frame (mask-drawn, reduced-motion safe).
- glass-chip: frosted floating pills under the CTAs that bob on a
  staggered loop, live online counter keeps ticking for the Online chip.
- Taller hero for more presence on desktop.

src/app/(site)/page.tsx

@@ -248,8 +248,9 @@ export default async function Home() {
 						}}
 					/>
 					<AmbientOrbs />
+					<div className="hero-ring" aria-hidden="true" style={{ zIndex: 3 }} />
 					<div
-						className="relative flex flex-col items-center gap-5 px-4 py-10 text-center sm:gap-8 sm:px-6 sm:py-12 md:px-12 md:py-20"
+						className="relative flex flex-col items-center gap-5 px-4 py-12 text-center sm:gap-8 sm:px-6 sm:py-14 md:px-12 md:py-24"
 						style={{ zIndex: 2 }}
 					>
 						<div
@@ -331,6 +332,66 @@ export default async function Home() {
 								{th("login")}
 							</Link>
 						</div>
+						<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
+							{[
+								{
+									value: users,
+									label: tp("statsCitizens"),
+									icon: ICON_FRIENDS,
+									live: false,
+								},
+								{
+									value: rooms,
+									label: tp("statsRooms"),
+									icon: ICON_CATALOG,
+									live: false,
+								},
+								{
+									value: online,
+									label: tp("statsOnline"),
+									icon: ICON_NAV_ME,
+									live: true,
+								},
+							].map((s) => (
+								<div key={s.label} className="glass-chip">
+									<Image
+										src={s.icon}
+										alt=""
+										width={12}
+										height={12}
+										unoptimized
+										className="opacity-70"
+									/>
+									<span
+										className="glass-chip-dot"
+										style={{
+											background: s.live
+												? "var(--color-primary)"
+												: "color-mix(in srgb, var(--color-text-muted) 55%, transparent)",
+											boxShadow: s.live
+												? "0 0 10px color-mix(in srgb, var(--color-primary) 70%, transparent)"
+												: "none",
+										}}
+									/>
+									<span
+										className="glass-chip-value"
+										style={{
+											color: "var(--color-text-readable)",
+											fontSize: "13px",
+										}}
+									>
+										{s.value === null ? (
+											<span className="text-xs">{te("unavailable")}</span>
+										) : s.live ? (
+											<LiveOnlineCounter initial={s.value} />
+										) : (
+											<AnimatedCounter value={s.value} />
+										)}
+									</span>
+									<span className="glass-chip-label">{s.label}</span>
+								</div>
+							))}
+						</div>
 					</div>
 				</div>
 			</Reveal>