Left-aligned hero with stat strip

Build a left-aligned editorial hero with Tailwind CSS. A max-w-4xl column with a thin uppercase eyebrow above a rule, an oversized tight-tracking headline that wraps across two or three lines, a paragraph limited to about 60 characters per line, and a single primary CTA next to a text link with an arrow. Beneath, separated by a top border, a three-metric strip with large numbers and small muted labels. No imagery — let the typography carry it.

<section class="mx-auto max-w-4xl px-6 py-24">
  <p class="text-xs font-semibold uppercase tracking-[0.2em] text-neutral-400">Infrastructure for builders</p>
  <div class="mt-4 h-px w-16 bg-neutral-900"></div>
  <h1 class="mt-8 text-5xl font-semibold leading-[1.05] tracking-tight text-neutral-900 sm:text-7xl">
    Fewer moving parts.<br />Far more throughput.
  </h1>
  <p class="mt-6 max-w-md text-lg leading-relaxed text-neutral-500">
    One runtime, one deploy target, one bill. Replace the six services holding your stack together.
  </p>
  <div class="mt-8 flex flex-wrap items-center gap-6">
    <a href="#" class="rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white hover:bg-neutral-800">Deploy your first app</a>
    <a href="#" class="group text-sm font-medium text-neutral-900">Read the architecture <span class="inline-block transition group-hover:translate-x-1">→</span></a>
  </div>
  <dl class="mt-20 grid grid-cols-3 gap-8 border-t border-neutral-200 pt-8">
    <div>
      <dt class="text-3xl font-semibold text-neutral-900">42ms</dt>
      <dd class="mt-1 text-sm text-neutral-500">Median cold start</dd>
    </div>
    <div>
      <dt class="text-3xl font-semibold text-neutral-900">6→1</dt>
      <dd class="mt-1 text-sm text-neutral-500">Services replaced</dd>
    </div>
    <div>
      <dt class="text-3xl font-semibold text-neutral-900">31%</dt>
      <dd class="mt-1 text-sm text-neutral-500">Lower cloud spend</dd>
    </div>
  </dl>
</section>