Stat Reveal

<!-- Stat Reveal -->
<div class="nuda-statrev">
  <div class="nuda-statrev__value">99.9<i>%</i></div>
  <div class="nuda-statrev__line"></div>
  <div class="nuda-statrev__label">Uptime SLA</div>
  <div class="nuda-statrev__sub">Last 90 days · zero incidents</div>
</div>

/* Stat Reveal
   Hero stat that fades up, followed by a drawing accent line and label.
   Customize: --stat-accent, --stat-text */

.nuda-statrev {
  --stat-accent: #e4ff54;
  --stat-text: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  width: 100%;
  max-width: 220px;
}

.nuda-statrev__value {
  font: 800 2.5rem ui-sans-serif, system-ui, sans-serif;
  color: var(--stat-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, var(--stat-text) 30%, var(--stat-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nuda-statrev-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.nuda-statrev__value i {
  font-size: 1.4rem;
  font-style: normal;
  color: var(--stat-accent);
  -webkit-text-fill-color: var(--stat-accent);
  margin-left: 2px;
}

.nuda-statrev__line {
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--stat-accent), transparent);
  border-radius: 2px;
  animation: nuda-statrev-line 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.nuda-statrev__label {
  font: 600 0.75rem ui-sans-serif, system-ui, sans-serif;
  color: var(--stat-text);
  opacity: 0;
  animation: nuda-statrev-fade 0.6s ease 0.5s forwards;
}

.nuda-statrev__sub {
  font: 500 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: #63636e;
  opacity: 0;
  animation: nuda-statrev-fade 0.6s ease 0.65s forwards;
}

@keyframes nuda-statrev-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nuda-statrev-line { to { width: 60px; } }
@keyframes nuda-statrev-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-statrev__value,
  .nuda-statrev__line,
  .nuda-statrev__label,
  .nuda-statrev__sub { animation: none; opacity: 1; width: 60px; transform: none; }
  .nuda-statrev__line { width: 60px; }
}