Animated KPI Metrics Section with CTA

<section class="sm:px-6 lg:px-8 lg:ml-auto lg:mr-auto max-w-7xl mt-10 mr-auto ml-auto pr-4 pl-4">
  <!-- Heading + side CTA -->
  <div class="flex flex-col lg:flex-row lg:items-end gap-4 gap-x-4 gap-y-4 justify-between">
    <h2 class="leading-tight animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.05s_both] sm:text-5xl lg:text-8xl text-3xl font-light text-white tracking-tighter">
      Metrics That Earn Confidence
    </h2>
    <div class="max-w-sm animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.1s_both]">
      <p class="text-xs sm:text-sm text-neutral-400 leading-relaxed">
        Data, rigor, and outcomes — the fuel behind every release.
      </p>
      <div class="mt-3">
        <a href="#" class="btn-wrapper" style="--dot-size: 8px; --line-weight: 1px; --line-distance: 0.8rem 1rem; --animation-speed: 0.35s; --dot-color: #fffa; --line-color: #fffa; --grid-color: #fff3; position: relative; display: inline-flex; justify-content: center; align-items: center; width: auto; height: auto; padding: var(--line-distance); background-color: rgba(0, 0, 0, 0); user-select: none">
          <div class="line horizontal top"></div>
          <div class="line vertical right"></div>
          <div class="line horizontal bottom"></div>
          <div class="line vertical left"></div>
          <div class="dot top left"></div>
          <div class="dot top right"></div>
          <div class="dot bottom right"></div>
          <div class="dot bottom left"></div>
          <button class="btn bg-transparent">
            <span class="btn-text">Explore metrics</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="btn-svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-left:.5rem;flex-shrink:0;">
              <path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </button>
        </a>
      </div>
    </div>
  </div>

  <!-- KPI Cards -->
  <div class="sm:mt-8 grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4 mt-6 gap-x-3 gap-y-3">
    <!-- Big orange card -->
    <div class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.05s_both] bg-orange-400/90 text-neutral-900 rounded-[20px] sm:rounded-[28px] p-4 sm:p-6 md:col-span-2">
      <div class="flex items-baseline gap-2">
        <p class="text-4xl sm:text-6xl font-semibold tracking-tight">1.2M</p>
        <span class="text-base sm:text-lg font-medium">Checks/day</span>
      </div>
      <p class="mt-3 text-xs sm:text-sm text-neutral-900/80 leading-relaxed">
        Automated policy evaluations executed across customer fleets every day.
      </p>
    </div>

    <!-- White card -->
    <div class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] bg-white text-neutral-900 rounded-[20px] sm:rounded-[28px] p-4 sm:p-6">
      <div class="flex items-baseline gap-1">
        <p class="text-4xl sm:text-6xl font-semibold tracking-tight">99.8</p>
        <span class="text-2xl sm:text-4xl font-medium">%</span>
      </div>
      <p class="mt-3 text-xs sm:text-sm text-neutral-600 leading-relaxed">
        Requests resolved within SLO — verified across the last four quarters.
      </p>
    </div>

    <!-- Dark card -->
    <div class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.15s_both] bg-neutral-900/60 rounded-[20px] sm:rounded-[28px] p-4 sm:p-6">
      <div class="flex items-baseline gap-1">
        <p class="text-4xl sm:text-6xl font-semibold tracking-tight text-white">2.6</p>
        <span class="text-2xl sm:text-4xl font-medium text-white/90">K</span>
      </div>
      <p class="mt-3 text-xs sm:text-sm text-neutral-400 leading-relaxed">
        Active teams relying on Sentra for identity and API protection.
      </p>
    </div>

    <!-- Monotone big card -->
    <div class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] bg-neutral-900/60 text-white rounded-[20px] sm:rounded-[28px] p-4 sm:p-6 md:col-span-2">
      <div class="flex items-baseline gap-2">
        <p class="text-4xl sm:text-6xl font-semibold tracking-tight">14.6B</p>
        <span class="text-base sm:text-lg font-medium text-white/90">Signals/month</span>
      </div>
      <p class="mt-3 text-xs sm:text-sm text-neutral-400 leading-relaxed">
        Normalized telemetry scored and retained for continuous verification.
      </p>
    </div>
  </div>
</section>