Verified Customer Badge

<article class="nuda-verified">
  <p class="nuda-verified__quote">
    &ldquo;The migration took 11 minutes. We expected 11 days.&rdquo;
  </p>
  <div class="nuda-verified__footer">
    <span class="nuda-verified__avatar" aria-hidden="true">DM</span>
    <div class="nuda-verified__id">
      <div class="nuda-verified__name">
        Dani Mendez
        <span class="nuda-verified__badge" title="Verified customer">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2l2.39 2.06 3.13-.45.45 3.13L20.03 9.61 18.06 12l1.97 2.39-2.06 3.13-3.13.45-.45 3.13L12 22.03l-2.39-1.97-3.13.45-.45-3.13L3.97 14.39 5.94 12 3.97 9.61l2.06-3.13 3.13-.45.45-3.13z" fill="#62b6ff"/>
            <path d="M9 12l2 2 4-4" fill="none" stroke="#0c0c10" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
      </div>
      <div class="nuda-verified__role">Verified buyer &middot; 14 mo</div>
    </div>
  </div>
</article>

/* Verified Customer Badge
   Customer testimonial with a pop-in verification checkmark. */

.nuda-verified {
  max-width: 380px;
  padding: 1.5rem;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #fafafa;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-verified__quote {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.nuda-verified__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nuda-verified__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #62b6ff, #6ee7b7);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0c0c10;
  flex-shrink: 0;
}

.nuda-verified__name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.nuda-verified__badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  animation: nuda-vb-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.nuda-verified__badge svg { width: 16px; height: 16px; }

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

.nuda-verified__role {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: #a0a0a8;
}

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