Hero Section with Customer Proof and Glow CTA

<section class="flex flex-col lg:px-8 lg:pt-20 animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] max-w-6xl mr-auto ml-auto pt-16 pr-6 pl-6 items-center">
        <div class="overflow-hidden sm:px-8 sm:py-10 bg-gradient-to-br from-blue-500/10 to-blue-500/0 rounded-none pt-8 pr-4 pb-8 pl-4 relative" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 0">
          <!-- Top label (EYEBROW) WITH BOTTOM BORDER -->
          <div class="flex border-slate-900 border-b pb-4 gap-x-4 gap-y-4 items-center justify-between">
            <span class="text-[11px] uppercase font-medium text-sky-300 tracking-[0.2em]" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
              OUR PRODUCT · WORKFLOWS
            </span>
            <button class="hidden text-[11px] font-medium text-slate-300 hover:text-slate-50 sm:inline-flex items-center gap-1" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              Read more
              <span class="flex h-4 w-4 items-center justify-center rounded-full bg-slate-800/80">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M5 12h14" class=""></path>
                  <path d="m12 5 7 7-7 7" class=""></path>
                </svg>
              </span>
            </button>
          </div>

          <!-- Heading row -->
          <div class="mt-6 grid gap-6 md:grid-cols-[minmax(0,2.2fr)_minmax(0,1.4fr)] items-start">
            <div class="text-left">
              <h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight text-slate-50" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                You control the targets. Mira compounds the growth.
              </h2>
            </div>
            <p class="sm:text-sm md:text-right md:ml-auto text-xs text-slate-300 max-w-md" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
              Mira watches every signal across your stack, 24/7. No
              spreadsheets, no guesswork—just a clear lane from insight to
              impact.
            </p>
          </div>

          <!-- Cards -->
          <div class="grid md:grid-cols-3 mt-10 gap-x-4 gap-y-4 sm:gap-x-6 sm:gap-y-6">
            <!-- Feature 1 -->
            <div class="overflow-hidden bg-gradient-to-br from-blue-500/10 to-blue-500/0 rounded-sm pt-5 pr-5 pb-5 pl-5 relative" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 2px">
              <!-- Top label -->
              <div class="flex items-center justify-between text-[10px] text-slate-400" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                <span class="uppercase tracking-[0.16em] text-slate-300">
                  ACTIVE SIGNALS
                </span>
                <span class="text-slate-500">#1</span>
              </div>

              <!-- Image visual (fills card width) -->
              <div class="overflow-hidden sm:h-56 bg-center w-full h-52 bg-cover border-0 rounded-2xl mt-4" style="background-image: url('https://cdn.midjourney.com/46310446-fa52-4b6b-a02e-ec8293b13acf/0_2.png?w=800&amp;q=80')"></div>

              <!-- Text content -->
              <h3 class="mt-5 text-sm font-medium tracking-tight text-slate-50">
                Stay informed, always.
              </h3>
              <p class="mt-2 text-xs sm:text-sm text-slate-300">
                Get instant alerts when usage spikes, risk behavior appears, or
                expansion intent crosses your threshold.
              </p>

              <div class="mt-4 flex items-center gap-2 text-[11px] text-slate-300">
                <span class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-slate-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M20 6 9 17l-5-5" class=""></path>
                  </svg>
                </span>
                Automated trading-style alerts for your pipeline.
              </div>
            </div>

            <!-- Feature 2 -->
            <div class="overflow-hidden bg-gradient-to-br from-blue-500/10 to-blue-500/0 rounded-sm pt-5 pr-5 pb-5 pl-5 relative" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 2px">
              <div class="flex items-center justify-between text-[10px] text-slate-400">
                <span class="uppercase tracking-[0.16em] text-slate-300">
                  ADVANCED ENGINE
                </span>
                <span class="text-slate-500">#2</span>
              </div>

              <div class="overflow-hidden sm:h-56 bg-center w-full h-52 bg-cover border-0 rounded-2xl mt-4" style="background-image: url('https://cdn.midjourney.com/9342fab6-af2f-477a-93c9-7ec9543783ca/0_1.png?w=800&amp;q=80')"></div>

              <h3 class="mt-5 text-sm font-medium tracking-tight text-slate-50">
                AI-powered precision.
              </h3>
              <p class="mt-2 text-xs sm:text-sm text-slate-300">
                Let Mira handle the split-second decisions—so reps and CSMs stay
                focused on conversations, not configuration.
              </p>

              <ul class="mt-4 space-y-1.5 text-[11px] text-slate-300">
                <li class="flex items-center gap-2">
                  <span class="inline-flex h-1.5 bg-sky-400 w-4 rounded-full"></span>
                  Real-time health &amp; expansion scoring
                </li>
                <li class="flex items-center gap-2">
                  <span class="inline-flex h-1.5 w-4 rounded-full bg-blue-400"></span>
                  SLA-aware task generation
                </li>
              </ul>
            </div>

            <!-- Feature 3 -->
            <div class="overflow-hidden bg-gradient-to-br from-blue-500/10 to-blue-500/0 rounded-sm pt-5 pr-5 pb-5 pl-5 relative" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 2px">
              <div class="flex items-center justify-between text-[10px] text-slate-400">
                <span class="uppercase tracking-[0.16em] text-slate-300">
                  REAL-TIME TRIGGERS
                </span>
                <span class="text-slate-500">#3</span>
              </div>

              <div class="overflow-hidden sm:h-56 bg-center w-full h-52 bg-cover border-0 rounded-2xl ring-0 mt-4" style="background-image: url('https://cdn.midjourney.com/bad59b7f-e21e-48bd-910b-ca59e24c2644/0_0.png?w=800&amp;q=80')"></div>

              <h3 class="mt-5 text-sm font-medium tracking-tight text-slate-50">
                Tailor your experience.
              </h3>
              <p class="mt-2 text-xs sm:text-sm text-slate-300">
                Customize triggers, thresholds, and owners to match how your
                team really works—no engineering ticket required.
              </p>

              <div class="mt-4 flex items-center gap-2 text-[11px] text-slate-300">
                <span class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-slate-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="m9 18 6-6-6-6" class=""></path>
                  </svg>
                </span>
                Multi-channel actions: tasks, emails, webhooks, and more.
              </div>
            </div>
          </div>

          <!-- Bottom meta -->
          <div class="grid gap-4 text-[11px] sm:grid-cols-3 text-slate-400 border-slate-900 border-t mt-8 pt-4 gap-x-4 gap-y-4">
            <div class="flex items-start gap-2">
              <span class="mt-1 inline-flex h-1.5 w-1.5 rounded-full bg-sky-400"></span>
              <p class="">
                Automated workflows keep your revenue motion running—even while
                you sleep.
              </p>
            </div>
            <div class="flex items-start gap-2">
              <span class="mt-1 inline-flex h-1.5 w-1.5 rounded-full bg-blue-400"></span>
              <p class="">
                SOC2-ready, enterprise secure, and live in under 14 days for
                most teams.
              </p>
            </div>
            <div class="flex items-start gap-2">
              <span class="mt-1 inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
              <p class="">
                Trusted by growth teams at 100+ modern B2B companies.
              </p>
            </div>
          </div>
        </div>
      </section>