Compliance Badge Row Footer

<!-- Compliance Badge Row Footer -->
<footer class="nuda-ft2-compliance-badges">
  <span class="nuda-ft2-compliance-badges__label">Compliance</span>
  <ul class="nuda-ft2-compliance-badges__list">
    <li style="animation-delay:0ms">SOC 2</li>
    <li style="animation-delay:80ms">GDPR</li>
    <li style="animation-delay:160ms">ISO 27001</li>
    <li style="animation-delay:240ms">WCAG AA</li>
  </ul>
</footer>

.nuda-ft2-compliance-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  width: 100%;
  max-width: 340px;
  font-size: 11px;
}

.nuda-ft2-compliance-badges__label {
  color: #777;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}

.nuda-ft2-compliance-badges__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nuda-ft2-compliance-badges__list li {
  opacity: 0;
  padding: 5px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: #cfcfcf;
  font-weight: 500;
  animation: _nuda-ft2ComplianceBadgesIn .5s ease both;
}

.nuda-ft2-compliance-badges__list li:first-child {
  border-color: rgba(228,255,84,.4);
  color: #e4ff54;
  animation: _nuda-ft2ComplianceBadgesIn .5s ease both,_nuda-ft2ComplianceBadgesPulse 2.4s ease-in-out .6s infinite;
}

@keyframes _nuda-ft2ComplianceBadgesIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes _nuda-ft2ComplianceBadgesPulse {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(228,255,84,.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(228,255,84,0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ft2-compliance-badges__list li {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .nuda-ft2-compliance-badges__list li:first-child {
    animation: none;
    box-shadow: none;
  }
}