/* Animated silhouettes inside the stat cards */
.stat-card { position: relative; overflow: hidden; }
.stat-card > * { position: relative; z-index: 2; }
.stat-silhouette {
  position: absolute;
  right: 0.75rem;
  bottom: -0.35rem;
  width: 6.5rem;
  height: 6.5rem;
  z-index: 1;
  pointer-events: none;
  color: #1668b0;
  opacity: 0.16;
}
@media (min-width: 640px) { .stat-silhouette { width: 7.5rem; height: 7.5rem; } }

.stat-silhouette svg { width: 100%; height: 100%; display: block; }

/* 1 - experience: clock hands sweep */
.sil-hand-min { transform-origin: 32px 32px; animation: sil-spin 6s linear infinite; }
.sil-hand-hour { transform-origin: 32px 32px; animation: sil-spin 24s linear infinite; }
@keyframes sil-spin { to { transform: rotate(360deg); } }

/* 2 - customers: figures rise in sequence */
.sil-person { animation: sil-bob 2.6s ease-in-out infinite; }
.sil-person:nth-child(2) { animation-delay: 0.35s; }
.sil-person:nth-child(3) { animation-delay: 0.7s; }
@keyframes sil-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}

/* 3 - satisfaction: sparkles twinkle over a check */
.sil-check { stroke-dasharray: 46; stroke-dashoffset: 46; animation: sil-draw 3.2s ease-in-out infinite; }
@keyframes sil-draw {
  0% { stroke-dashoffset: 46; }
  35%, 75% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 46; }
}
.sil-spark { animation: sil-twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sil-spark-2 { animation-delay: 0.8s; }
.sil-spark-3 { animation-delay: 1.5s; }
@keyframes sil-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .stat-silhouette * { animation: none !important; }
}