Customer Testimonial Section with Metrics Card

<section class="flex flex-col lg:px-8 lg:pt-20 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-6xl mr-auto ml-auto pt-20 pr-4 pl-4">
        <div class="overflow-hidden sm:px-8 sm:py-10 bg-center bg-slate-950/95 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1ebff6d5-cc57-4279-972f-e83f6c19894e_1600w.jpg)] bg-cover 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 items-center justify-between gap-4 border-b border-white/10 pb-4">
            <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">
              REVIEWS FROM REAL PEOPLE
            </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="sm:text-3xl lg:text-4xl text-2xl font-semibold text-slate-50 tracking-tight" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
                What our customers are saying
              </h2>
            </div>
            <p class="sm:text-sm md:ml-auto md:text-right text-xs text-slate-300 max-w-md ml-auto" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
              Teams across product, revenue, and customer success rely on Mira
              to uncover opportunities faster, reduce risk earlier, and turn
              insight into action with confidence.
            </p>
          </div>

          <!-- Cards -->
          <div class="grid lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] bg-slate-950/70 border-white/5 border rounded-sm mt-8 mb-8 pt-6 pr-4 pb-6 pl-4 sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 gap-x-6 gap-y-6 sm:gap-x-10 sm:gap-y-10">
            <!-- Quote -->
            <div class="flex flex-col justify-center">
              <p class="mt-4 text-xl font-medium tracking-tight text-slate-50 sm:text-2xl" style="font-family: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif;">
                “Mira turned our scattered client data into a single growth map.
                We spotted 3 expansion plays in the first week and closed all of
                them within the quarter.”
              </p>
              <div class="mt-6 flex items-center gap-3">
                <div class="h-9 w-9 overflow-hidden rounded-full bg-slate-700">
                  <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&amp;fit=crop&amp;w=200&amp;q=80" alt="Customer" class="h-full w-full object-cover">
                </div>
                <div class="">
                  <p class="text-sm font-medium text-slate-100" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                    Head of Customer Success
                  </p>
                  <p class="text-[11px] text-slate-400" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                    B2B SaaS, Series C · +18% NRR in 90 days
                  </p>
                </div>
              </div>
            </div>

            <!-- Metrics card -->
            <div class="sm:p-6 bg-[#000000]/60 border-white/10 border rounded-sm pt-5 pr-5 pb-5 pl-5 space-y-5" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
              <!-- Eyebrow / Header -->
              <div class="flex items-center justify-between gap-3">
                <p class="text-[11px] font-medium tracking-[0.18em] uppercase text-slate-300">
                  Impact at a glance
                </p>
                <div class="hidden sm:inline-flex items-center gap-2 text-[11px] text-slate-400"></div>
              </div>

              <!-- Metrics -->
              <div class="grid gap-4 sm:grid-cols-3">
                <!-- Metric 1 -->
                <div class="space-y-1">
                  <p class="text-[11px] text-slate-400">
                    Net Revenue Retention
                  </p>
                  <p class="mt-1 text-2xl sm:text-3xl font-semibold tracking-tight text-sky-300">
                    +18%
                  </p>
                  <p class="text-[11px] text-slate-500">within 90 days</p>
                </div>

                <!-- Metric 2 -->
                <div class="space-y-1 sm:border-l sm:border-white/5 sm:pl-5">
                  <p class="text-[11px] text-slate-400">Expansion wins</p>
                  <p class="mt-1 text-2xl sm:text-3xl font-semibold tracking-tight text-sky-300">
                    3.7×
                  </p>
                  <p class="text-[11px] text-slate-500">per quarter</p>
                </div>

                <!-- Metric 3 -->
                <div class="space-y-1 sm:border-l sm:border-white/5 sm:pl-5">
                  <p class="text-[11px] text-slate-400">Time to insight</p>
                  <p class="mt-1 text-2xl sm:text-3xl font-semibold tracking-tight text-sky-300">
                    −74%
                  </p>
                  <p class="text-[11px] text-slate-500">faster decisions</p>
                </div>
              </div>

              <!-- CTA -->
              <div class="pt-2">
                <button class="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-sky-400 to-blue-500 px-5 py-2.5 text-[11px] font-medium tracking-tight text-slate-950 shadow-[0_14px_40px_rgba(56,189,248,0.45)] hover:from-sky-300 hover:to-blue-400 transition-colors">
                  VIEW FULL CASE STUDY
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 h-3.5 w-3.5">
                    <path d="M7 7h10v10" class=""></path>
                    <path d="M7 17 17 7" class=""></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Bottom meta -->
          <div class="grid gap-8 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,2.2fr)] mt-8 gap-x-8 gap-y-8">
            <!-- Left copy + controls -->
            <div class="flex flex-col gap-x-0 gap-y-0 justify-between">
              <div class="space-y-4">
                <div class="flex items-center gap-3 text-slate-400"></div>
              </div>

              <div class="flex items-center gap-4 text-[11px] text-slate-400" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                <button class="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-slate-900/70 text-slate-200 hover:bg-slate-900" aria-label="Previous testimonial">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="m15 18-6-6 6-6" class=""></path>
                  </svg>
                </button>
                <div class="flex flex-1 items-center gap-2">
                  <span class="h-[2px] w-10 rounded-full bg-sky-400"></span>
                  <span class="h-[2px] flex-1 rounded-full bg-slate-700"></span>
                </div>
                <button class="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-slate-900/70 text-slate-200 hover:bg-slate-900" aria-label="Next testimonial">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="m9 18 6-6-6-6" class=""></path>
                  </svg>
                </button>
              </div>
            </div>

            <!-- Cards row -->
          </div>
        </div>
      </section>