/* Homepage hero: website visitors + their countries (hero-visitors.js). */
.hero-visitors { margin-top: 18px; max-width: 620px; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.hero-visitors.hv-on { opacity: 1; transform: none; }
.hv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; font-size: 1rem; color: var(--text-muted); }
.hv-ic { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; margin-right: 4px;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 45%, transparent); }
.hv-ic svg { width: 17px; height: 17px; }
.hv-num { font-size: 1.45rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hv-cgroup { white-space: nowrap; }
.hv-cnum { font-size: 1.15rem; font-weight: 800; color: var(--accent-2); }
.hv-strip { position: relative; margin-top: 10px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hv-track { display: flex; gap: 8px; width: max-content; animation: hv-scroll var(--hv-dur, 60s) linear infinite; }
.hv-strip:hover .hv-track { animation-play-state: paused; }
.hv-still .hv-track { animation: none; flex-wrap: wrap; width: auto; }
.hv-chip { white-space: nowrap; padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--surface-2, #12204a) 80%, transparent); border: 1px solid var(--border); }
@keyframes hv-scroll { to { transform: translateX(calc(-50% - 4px)); } }
@media (max-width: 640px) { .hero-visitors { margin-top: 14px; } .hv-head { font-size: 0.92rem; } .hv-num { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .hero-visitors { transition: none; } }
.hv-plus { display: inline-block; font-size: 0.85rem; font-weight: 800; color: #3ddc97; opacity: 0; margin-left: -2px; }
.hv-plus.hv-pop { animation: hv-pop 2.4s ease forwards; }
@keyframes hv-pop { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }