Stats Colored Blocks

<section class="ws-stats-display bg-[var(--ws-stats-display-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-stats-display-accent)]">By the numbers</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-stats-display-text)] sm:text-4xl">The scale of the problem</h2>
    </div>

    <div class="mt-16 grid gap-6 sm:grid-cols-3">
      <!-- Stat 1: Amber -->
      <div class="relative overflow-hidden rounded-3xl bg-amber-400 p-8 text-center">
        <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 80% 20%, white 1px, transparent 1px); background-size: 24px 24px;"></div>
        <p class="relative text-5xl font-black tracking-tight text-amber-950 sm:text-6xl">85%</p>
        <p class="relative mt-3 text-sm font-semibold text-amber-900">of organizations experience data loss events each year</p>
      </div>

      <!-- Stat 2: Dark slate -->
      <div class="relative overflow-hidden rounded-3xl bg-slate-900 p-8 text-center"> <!-- ws-ok: semantic colored block -->
        <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 20% 80%, white 1px, transparent 1px); background-size: 24px 24px;"></div>
        <p class="relative text-5xl font-black tracking-tight text-white sm:text-6xl">90%</p>
        <p class="relative mt-3 text-sm font-semibold text-slate-400">of enterprise data is unstructured and growing</p>
      </div>

      <!-- Stat 3: Teal -->
      <div class="relative overflow-hidden rounded-3xl bg-teal-500 p-8 text-center">
        <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 50% 50%, white 1px, transparent 1px); background-size: 24px 24px;"></div>
        <p class="relative text-5xl font-black tracking-tight text-teal-950 sm:text-6xl">$4.9M</p>
        <p class="relative mt-3 text-sm font-semibold text-teal-900">average cost of a data breach in 2024</p>
      </div>
    </div>
  </div>
</section>