/* =====================================================================
   03 · ЦИФРЫ — вертикальный скролл двигает карточки по горизонтали
   (на телефоне — обычная лента со свайпом)
   ===================================================================== */
.stats { position: relative; height: 340vh; background: var(--bg-2); }
.stats__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.stats__track { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); padding-left: var(--pad-l); padding-right: var(--pad-r); will-change: transform; }

.stats__intro { flex: 0 0 min(560px, 80vw); padding-right: clamp(20px, 4vw, 80px); }
.stats__intro p { margin-top: 24px; color: var(--muted); max-width: 36ch; }

.stat {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 clamp(270px, 28vw, 420px); aspect-ratio: 3 / 4; max-width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: clamp(22px, 2.4vw, 36px); border-radius: 28px;
  background: var(--surface); border: 1px solid var(--line);
}
.stat--violet { --c: var(--violet); }
.stat--cyan   { --c: var(--cyan); }
.stat--lime   { --c: var(--lime); }
.stat--amber  { --c: var(--amber); }
.stat--coral  { --c: var(--coral); }
.stat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 60% at 80% 0%, color-mix(in srgb, var(--c) 38%, transparent), transparent 70%); }

/* «3D»-шары */
.stat__orb {
  position: absolute; right: 12%; top: 12%; z-index: -1; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--c) 22%, color-mix(in srgb, var(--c) 40%, #000) 70%);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--c) 60%, transparent);
  animation: stat-float 6s ease-in-out infinite;
}
.stat__orb--small { width: 14%; right: auto; left: 14%; top: 30%; animation-duration: 7.5s; }
.stat:nth-of-type(2) .stat__orb { animation-delay: -1.3s; }
.stat:nth-of-type(3) .stat__orb { animation-delay: -2.6s; }
.stat:nth-of-type(4) .stat__orb { animation-delay: -3.9s; }
.stat:nth-of-type(5) .stat__orb { animation-delay: -5.2s; }

.stat__num {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(68px, 8vw, 132px); line-height: .9; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--c) 70%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__num small { font-size: .38em; letter-spacing: 0; margin-left: .12em; }
.stat p { max-width: 28ch; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

@keyframes stat-float { 50% { transform: translateY(-18px) rotate(8deg); } }

@media (width <= 800px) {
  .stats { height: auto; padding-block: 90px; }
  .stats__sticky { position: static; height: auto; display: block; }
  .stats__track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-bottom: 12px; scrollbar-width: none; }
  .stats__track::-webkit-scrollbar { display: none; }
  .stats__intro { flex: 0 0 85vw; }
  .stat { flex: 0 0 78vw; aspect-ratio: 4 / 5; scroll-snap-align: center; }
}