Avatar Stack Hero

<!-- Avatar Stack Hero — pops in avatars left → right with social proof line -->
<div class="nuda-avhero">
  <div class="nuda-avhero__stack">
    <span class="nuda-avhero__av" style="background: linear-gradient(135deg, #e4ff54, #a8c93a)">JS</span>
    <span class="nuda-avhero__av" style="background: linear-gradient(135deg, #a78bfa, #8b5cf6)">RC</span>
    <span class="nuda-avhero__av" style="background: linear-gradient(135deg, #fb7185, #e11d48)">MK</span>
    <span class="nuda-avhero__av" style="background: linear-gradient(135deg, #38bdf8, #0284c7)">SG</span>
    <span class="nuda-avhero__av nuda-avhero__more">+2k</span>
  </div>
  <p class="nuda-avhero__text">Loved by 2,000+ devs</p>
</div>

/* Avatar Stack Hero
   Overlapping avatars pop in sequence + social-proof line fades after.
   Customize: avatar gradients via inline background, --av-bg (page bg). */

.nuda-avhero {
  --av-bg: #09090b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}

.nuda-avhero__stack { display: flex; }

.nuda-avhero__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #09090b;
  font: 800 0.7rem ui-sans-serif, system-ui, sans-serif;
  border: 2px solid var(--av-bg);
  margin-left: -10px;
  animation: nuda-av-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.nuda-avhero__av:first-child   { margin-left: 0;     animation-delay: 0s; }
.nuda-avhero__av:nth-child(2)  { animation-delay: 0.08s; }
.nuda-avhero__av:nth-child(3)  { animation-delay: 0.16s; }
.nuda-avhero__av:nth-child(4)  { animation-delay: 0.24s; }
.nuda-avhero__av:nth-child(5)  { animation-delay: 0.32s; }

.nuda-avhero__more {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fafafa !important;
  font-weight: 700;
  font-size: 0.625rem;
}

.nuda-avhero__text {
  font: 600 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  margin: 0;
  animation: nuda-av-fade 0.5s ease 0.4s backwards;
}

@keyframes nuda-av-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes nuda-av-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-avhero__av,
  .nuda-avhero__text { animation: none; }
}