Vertical Metrics Stats Section

<section
  style="max-width: 900px; margin: 0 auto; padding: 0 2rem; border-bottom: 1px solid #1C1C1B; background-color: #F2F0EB; color: #1C1C1B; font-family: 'Inter', sans-serif;">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300&family=JetBrains+Mono:wght@400;500&display=swap');

    .metric-value {
      font-family: 'Fraunces', serif;
      font-size: 3rem;
      color: #C9A690;
      line-height: 1;
    }

    .metric-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }
  </style>

  <div class="vertical-grid">
    <!-- Metric 01 -->
    <div
      style="padding: 4rem 0; border-bottom: 1px solid rgba(28, 28, 27, 0.15); display: grid; grid-template-columns: 120px 1fr; align-items: start;">
      <div class="metric-value">94%</div>
      <div style="padding-left: 1rem;">
        <div class="metric-label">Efficiency Gain</div>
        <p style="color: #4B5563; font-size: 1rem; line-height: 1.5;">Average reduction in processing overhead for
          enterprise-scale financial reconciliation.</p>
      </div>
    </div>

    <!-- Metric 02 -->
    <div
      style="padding: 4rem 0; border-bottom: 1px solid rgba(28, 28, 27, 0.15); display: grid; grid-template-columns: 120px 1fr; align-items: start;">
      <div class="metric-value">12ms</div>
      <div style="padding-left: 1rem;">
        <div class="metric-label">Neural Sync</div>
        <p style="color: #4B5563; font-size: 1rem; line-height: 1.5;">Sub-millisecond validation latency across our
          global distributed ledger network.</p>
      </div>
    </div>

    <!-- Metric 03 -->
    <div
      style="padding: 4rem 0; border-bottom: 1px solid rgba(28, 28, 27, 0.15); display: grid; grid-template-columns: 120px 1fr; align-items: start;">
      <div class="metric-value">1.2B</div>
      <div style="padding-left: 1rem;">
        <div class="metric-label">Logic Points</div>
        <p style="color: #4B5563; font-size: 1rem; line-height: 1.5;">Heuristic data nodes cross-referenced per second
          during forensic audit simulations.</p>
      </div>
    </div>

    <!-- Metric 04 -->
    <div style="padding: 4rem 0; display: grid; grid-template-columns: 120px 1fr; align-items: start;">
      <div class="metric-value">Zero</div>
      <div style="padding-left: 1rem;">
        <div class="metric-label">Security Decay</div>
        <p style="color: #4B5563; font-size: 1rem; line-height: 1.5;">Total integrity maintained via quantum-resistant
          encryption since protocol inception.</p>
      </div>
    </div>
  </div>
</section>