<div class="stat-card">
  <div class="stat-header">
    <span class="stat-label">Total Visitors</span>
    <span class="stat-trend positive">+12.4%</span>
  </div>
  <div class="stat-value">24,830</div>
  <div class="stat-sub">Up by 2,430 vs last month</div>
</div>

<style>
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.75rem; padding: 1.5rem;
}
.stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.stat-label  { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stat-trend  { font-size: 0.75rem; font-weight: 500; padding: 0.2rem 0.5rem; border-radius: 9999px; }
.stat-trend.positive { background: rgba(34,197,94,.12); color: #16A34A; }
.stat-trend.negative { background: rgba(239,68,68,.12); color: #DC2626; }
.stat-value  { font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; line-height: 1; margin-bottom: 0.5rem; }
.stat-sub    { font-size: 0.8125rem; color: var(--muted); }
</style>