Stats Software Modern

                <!--
@type: Stats
@industry: Software
@style: Modern
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&family=JetBrains+Mono:wght@400;500&display=swap');
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0a0a0a;
    background-color: #fafafa;
    background-image: 
      radial-gradient(at 0% 0%, rgba(20, 184, 166, 0.08) 0px, transparent 50%),
      radial-gradient(at 100% 0%, rgba(20, 184, 166, 0.05) 0px, transparent 50%),
      radial-gradient(at 50% 100%, rgba(20, 184, 166, 0.03) 0px, transparent 50%);
  }
  body:before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(
      ellipse 60% 50% at 50% 0%,
      #000 70%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 60% 50% at 50% 0%,
      #000 70%,
      transparent 100%
    );
  }
  .mono { font-family: 'JetBrains Mono', monospace; }
</style>

<section class="relative py-24 px-6 overflow-hidden">
  <div class="max-w-[1200px] mx-auto">
    <div class="grid lg:grid-cols-12 gap-16 items-center">

      <div class="lg:col-span-5 space-y-6">
        <h2 class="text-xs font-bold uppercase tracking-[0.3em] text-teal-600 mb-4">Performance Metrics</h2>
        <h3 class="text-4xl font-extrabold text-zinc-900 tracking-tight leading-tight">
          Quantifiable velocity <br />
          <span class="text-zinc-400">for elite engineers.</span>
        </h3>
        <p class="text-lg text-zinc-500 font-medium leading-relaxed">
          We didn't just build a better interface; we re-engineered the way macOS interacts with your infrastructure.
          The result is a measurable reduction in cognitive load and a massive leap in system responsiveness.
        </p>
      </div>

      <div class="lg:col-span-7 grid grid-cols-1 md:grid-cols-2 gap-4">

        <div
          class="p-8 rounded-[2rem] bg-zinc-50 border border-zinc-300 flex flex-col justify-between group hover:border-teal-500 transition-colors">
          <p class="text-[11px] font-black text-zinc-400 uppercase tracking-widest mb-8">Context Switch Speed</p>
          <div>
            <div class="flex items-baseline gap-1">
              <span class="text-5xl font-extrabold text-zinc-900 tracking-tighter">0.14</span>
              <span class="text-xl font-bold text-teal-600">ms</span>
            </div>
            <p class="text-sm text-zinc-500 font-medium mt-2">Zero-latency buffer switching across unlimited production
              clusters.</p>
          </div>
        </div>

        <div class="p-8 rounded-[2rem] bg-zinc-900 border border-zinc-800 flex flex-col justify-between shadow-2xl">
          <p class="text-[11px] font-black text-teal-500 uppercase tracking-widest mb-8">Resource Efficiency</p>
          <div>
            <div class="flex items-baseline gap-1 text-white">
              <span class="text-5xl font-extrabold tracking-tighter">92</span>
              <span class="text-xl font-bold text-teal-400">%</span>
            </div>
            <p class="text-sm text-zinc-400 font-medium mt-2">Less RAM usage than Electron-based monitoring
              alternatives.</p>
          </div>
        </div>

        <div
          class="p-8 rounded-[2rem] bg-zinc-50 border border-zinc-300 flex flex-col justify-between hover:border-teal-500 transition-colors">
          <p class="text-[11px] font-black text-zinc-400 uppercase tracking-widest mb-8">Daily Time Saved</p>
          <div>
            <div class="flex items-baseline gap-1">
              <span class="text-5xl font-extrabold text-zinc-900 tracking-tighter">45</span>
              <span class="text-xl font-bold text-teal-600">min</span>
            </div>
            <p class="text-sm text-zinc-500 font-medium mt-2">Average time reclaimed daily by eliminating tab-hunting
              fatigue.</p>
          </div>
        </div>

        <div
          class="p-8 rounded-[2rem] bg-zinc-50 border border-zinc-300 flex flex-col justify-between hover:border-teal-500 transition-colors">
          <p class="text-[11px] font-black text-zinc-400 uppercase tracking-widest mb-8">Rendering Rate</p>
          <div>
            <div class="flex items-baseline gap-1">
              <span class="text-5xl font-extrabold text-zinc-900 tracking-tighter">120</span>
              <span class="text-xl font-bold text-teal-600">Hz</span>
            </div>
            <p class="text-sm text-zinc-500 font-medium mt-2">ProMotion native rendering for butter-smooth log
              scrolling.</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>