Neon Metrics Hero Section with Product Vision

<main class="w-full max-w-5xl mr-auto ml-auto relative m-12 px-8">
  <!-- Outer circuit-style nodes (adapted) -->
  <div class="pointer-events-none hidden xl:block absolute top-0 right-0 bottom-0 left-0">
    <!-- Left upper node -->
    <div class="flex gap-2 text-neutral-700 absolute top-1/4 left-4 items-center">
      <div class="h-px flex-1 bg-neutral-800 translate-x-2"></div>
      <div
        class="flex bg-neutral-900/80 w-16 h-9 rounded-xl relative shadow-[0_0_0_1px_rgba(82,82,91,0.4)] items-center justify-center">
        <div class="bg-neutral-700 w-10 h-1 rounded-full"></div>
        <span class="-left-1 animate-pulse bg-emerald-400 w-1 h-1 rounded-full absolute shadow-[0_0_12px_rgba(52,211,153,0.65)]"></span>
      </div>
      <div class="h-px bg-neutral-800 w-12"></div>
    </div>
    <!-- Left bottom node -->
    <div class="flex gap-2 text-neutral-700 absolute bottom-10 left-10 items-center">
      <div class="h-px flex-1 bg-neutral-800 translate-x-2"></div>
      <div
        class="flex bg-neutral-900/80 w-20 h-9 rounded-xl relative shadow-[0_0_0_1px_rgba(82,82,91,0.4)] items-center justify-center">
        <div class="flex gap-1">
          <span class="bg-neutral-700 w-2 h-1 rounded"></span>
          <span class="h-1 w-2 rounded bg-neutral-700/60"></span>
          <span class="h-1 w-2 rounded bg-neutral-700/40"></span>
        </div>
        <span class="-left-1 animate-pulse bg-emerald-400 w-1 h-1 rounded-full absolute shadow-[0_0_12px_rgba(52,211,153,0.65)]"></span>
      </div>
      <div class="h-px bg-neutral-800 w-16"></div>
    </div>
    <!-- Right upper node -->

    <!-- Right bottom node -->
    <div class="absolute right-8 bottom-16 flex items-center gap-2 text-neutral-700">
      <div class="h-px w-10 bg-neutral-800"></div>
      <div
        class="relative h-9 w-16 rounded-xl shadow-[0_0_0_1px_rgba(82,82,91,0.4)] flex items-center justify-center bg-neutral-900/80">
        <div class="h-1 w-8 rounded-full bg-neutral-700"></div>
        <span class="absolute -right-1 h-1 w-1 rounded-full shadow-[0_0_12px_rgba(52,211,153,0.65)] animate-pulse bg-emerald-400"></span>
      </div>
      <div class="h-px flex-1 -translate-x-2 bg-neutral-800"></div>
    </div>
  </div>

  <!-- Main card adapted to NeonGrid surface -->
  <section
    class="overflow-hidden px-5 py-6 sm:px-8 sm:py-8 lg:px-12 lg:py-10 bg-gradient-to-b from-neutral-900 via-neutral-900 to-neutral-800 w-full border-neutral-800 border rounded-2xl sm:rounded-3xl relative shadow-xl">
    <!-- Top glow bars -->



    <!-- Subtle inner gradient overlay -->
    <div class="pointer-events-none absolute inset-0">
      <div class="absolute inset-0 bg-gradient-to-b via-transparent to-transparent opacity-60 from-white/5"></div>
    </div>

    <div class="relative space-y-6 sm:space-y-8">
      <!-- Top bar -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
        <div
          class="inline-flex items-center gap-2 rounded-full border px-3 py-1 shadow-inner bg-neutral-900/90 border-neutral-800 shadow-black/40">
          <span class="flex h-5 w-5 items-center justify-center rounded-full border bg-neutral-950 border-neutral-700/80">
                <!-- lucide-home -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 10.75 12 4l9 6.75M5 10.5V19a1 1 0 0 0 1 1h4v-4.25a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2V20h4a1 1 0 0 0 1-1v-8.5" class=""></path>
                </svg>
              </span>
          <span class="text-xs font-medium tracking-[0.16em] uppercase text-neutral-300">
                Product vision
              </span>
        </div>

        <div class="flex items-center gap-2 text-neutral-300/80">
          <!-- lucide-zap -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-400" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 2 4 14h6l-1 8 9-12h-6z" class=""></path>
          </svg>
          <span class="text-xs font-medium">
                Precision tuned. Effortlessly fast.
              </span>
        </div>
      </div>

      <!-- Hero copy -->
      <div class="grid gap-6 sm:gap-8 lg:grid-cols-2 lg:gap-10 items-start">
        <div class="space-y-3 sm:space-y-4">
          <p class="text-base sm:text-lg md:text-xl lg:text-2xl font-light italic tracking-tight text-neutral-100/90">
            Crafted to clear the static.
          </p>
          <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-semibold text-neutral-50 tracking-tight">
            Signal keeps your workflow sharp.
          </h1>
        </div>

        <div class="max-w-md lg:ml-auto">
          <p class="leading-relaxed text-sm sm:text-base md:text-lg font-normal text-neutral-300">
            Every interaction is tuned for clarity and control. Signal pairs
            measured automation with human nuance, so you move faster
            without losing the details that matter.
          </p>
        </div>
      </div>

      <!-- Metrics row -->
      <div class="grid gap-3 sm:gap-4 md:gap-5 lg:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Card 1 -->
        <article
          class="relative rounded-xl sm:rounded-2xl border backdrop-filter backdrop-blur-2xl px-4 py-5 sm:px-5 sm:py-5 md:px-6 md:py-6 flex flex-col justify-between overflow-hidden shadow-inner border-neutral-800 bg-neutral-950/60 shadow-black/40">
          <div class="absolute inset-0 pointer-events-none">
            <div class="absolute inset-0 bg-gradient-to-br via-transparent to-transparent opacity-60 from-white/10">
            </div>
            <div class="absolute -bottom-12 -right-10 h-32 w-32 rounded-full blur-3xl bg-emerald-400/15"></div>
          </div>
          <div class="relative space-y-1.5">
            <p class="text-xs font-medium tracking-[0.16em] uppercase text-neutral-400">
              Throughput
            </p>
            <p class="text-xs font-medium text-neutral-500">
              Interaction speed
            </p>
          </div>
          <div class="relative mt-4 sm:mt-6 space-y-1">
            <p class="text-3xl sm:text-4xl font-semibold tracking-tight text-neutral-50">
              6×
            </p>
            <p class="text-xs sm:text-sm font-normal text-neutral-400">
              Faster task completion across your entire stack.
            </p>
          </div>
        </article>

        <!-- Card 2 -->
        <article
          class="relative rounded-xl sm:rounded-2xl border backdrop-filter backdrop-blur-2xl px-4 py-5 sm:px-5 sm:py-5 md:px-6 md:py-6 flex flex-col justify-between overflow-hidden shadow-inner border-neutral-800 bg-neutral-950/60 shadow-black/40">
          <div class="absolute inset-0 pointer-events-none">
            <div class="absolute inset-0 bg-gradient-to-br via-transparent to-transparent opacity-60 from-white/10">
            </div>
            <div class="absolute -bottom-10 -right-6 h-28 w-28 rounded-full blur-3xl bg-emerald-400/18"></div>
          </div>
          <div class="relative space-y-1.5">
            <p class="text-xs font-medium tracking-[0.16em] uppercase text-neutral-400">
              Focus time
            </p>
            <p class="text-xs font-medium text-neutral-500">
              Deep-work reclaimed
            </p>
          </div>
          <div class="relative mt-4 sm:mt-6 space-y-1">
            <p class="text-3xl sm:text-4xl font-semibold tracking-tight text-neutral-50">
              4.1
              <span class="ml-1 text-xs font-medium text-neutral-400">
                    hrs/day
                  </span>
            </p>
            <p class="text-xs sm:text-sm font-normal text-neutral-400">
              Less micromanaging, more time on meaningful work.
            </p>
          </div>
        </article>

        <!-- Card 3 -->
        <article
          class="relative rounded-xl sm:rounded-2xl border backdrop-filter backdrop-blur-2xl px-4 py-5 sm:px-5 sm:py-5 md:px-6 md:py-6 flex flex-col justify-between overflow-hidden shadow-inner border-neutral-800 bg-neutral-950/60 shadow-black/40 sm:col-span-2 lg:col-span-1">
          <div class="absolute inset-0 pointer-events-none">
            <div class="absolute inset-0 bg-gradient-to-br via-transparent to-transparent opacity-60 from-white/10">
            </div>
            <div class="absolute -bottom-12 -right-10 h-32 w-32 rounded-full blur-3xl bg-emerald-400/20"></div>
          </div>
          <div class="relative space-y-1.5">
            <p class="text-xs font-medium tracking-[0.16em] uppercase text-neutral-400">
              Alignment
            </p>
            <p class="text-xs font-medium text-neutral-500">
              Voice consistency
            </p>
          </div>
          <div class="relative mt-4 sm:mt-6 space-y-1">
            <p class="text-3xl sm:text-4xl font-semibold tracking-tight text-neutral-50">
              99%
            </p>
            <p class="text-xs sm:text-sm font-normal text-neutral-400">
              Outputs that read exactly like your best work, every time.
            </p>
          </div>
        </article>
      </div>
    </div>
  </section>
</main>