Enterprise AI Testimonial & Stats Grid Section

<section class="overflow-hidden bg-neutral-100/50 border-neutral-200 border-t pt-24 pb-24 relative">
  <div class="container lg:px-12 z-10 mr-auto ml-auto pr-6 pl-6 relative">
    <!-- Section Header -->
    <div class="flex flex-col lg:flex-row justify-between items-start mb-20 gap-10">
      <h2 class="text-4xl lg:text-5xl font-medium tracking-tight text-neutral-900 max-w-3xl leading-[1.05]">
        Helping visionary enterprises engineer <span class="text-neutral-400">neural intelligence</span> that reshapes industries globally
      </h2>
      <a href="#" class="group flex items-center gap-2 text-sm font-medium text-neutral-900 border-b border-neutral-300 pb-1 hover:border-neutral-900 transition-all mt-2">
        Start a Project
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-bold-duotone" class=""><path fill="currentColor" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5" class=""></path></svg>
      </a>
    </div>

    <!-- Grid Layout -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

      <!-- Card 1: Testimonial -->
      <div class="bg-white p-8 rounded-2xl flex flex-col justify-between h-[520px] shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] border border-neutral-100 hover:border-neutral-200 transition-colors">
        <div class="">
          <h3 class="text-lg font-semibold text-neutral-900 mb-6 leading-tight tracking-tight">
            Algorithms that adapt.Scale you can measure.
          </h3>
          <p class="text-neutral-500 leading-relaxed text-sm">
            “Cognitive captured the logic of our infrastructure and translated it into a workflow that's predictive, efficient, and undeniably powerful across all our verticals.”
          </p>
        </div>
        <div class="mt-8 border-t border-neutral-100 pt-6">
          <div class="flex items-center justify-between mb-4">
             <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="simple-icons:stripe" class=""><path fill="currentColor" d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409c0-.831.683-1.305 1.901-1.305c2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0C9.667 0 7.589.654 6.104 1.872C4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219c2.585.92 3.445 1.574 3.445 2.583c0 .98-.84 1.545-2.354 1.545c-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813c1.664-1.305 2.525-3.236 2.525-5.732c0-4.128-2.524-5.851-6.594-7.305z" class=""></path></svg>
          </div>
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="User" class="w-10 h-10 rounded-full object-cover grayscale">
            <div>
              <div class="text-sm font-semibold text-neutral-900 leading-none mb-1">Sarah Jenkins</div>
              <div class="text-xs text-neutral-400 font-medium">Head of Product</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2: Brand Image -->
      <div class="relative rounded-2xl overflow-hidden h-[520px] group bg-neutral-900 shadow-lg">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1d2241ec-29a1-4d88-bb90-f7ec7293e8a2_800w.jpg" alt="Mood" class="transition-transform duration-1000 group-hover:scale-110 group-hover:opacity-100 opacity-90 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
        <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div>
        <div class="flex flex-col z-10 text-white pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0 justify-between">
          <div class="flex justify-between items-start">
            <span class="text-sm font-medium tracking-wide">Neural Lab©</span>
          </div>
          <span class="text-[10px] font-mono opacity-60 uppercase tracking-widest ml-auto">Est '21</span>
        </div>
      </div>

      <!-- Card 3: Stats -->
      <div class="bg-white p-8 rounded-2xl flex flex-col items-center justify-between h-[520px] shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] border border-neutral-100 hover:border-neutral-200 transition-colors relative overflow-hidden group">
        <!-- Decorative Background Rings -->
        <div class="absolute inset-0 pointer-events-none opacity-[0.03]">
           <svg viewBox="0 0 100 100" class="w-full h-full stroke-neutral-900 fill-none" stroke-width="0.5">
             <circle cx="50" cy="50" r="20" class=""></circle>
             <circle cx="50" cy="50" r="35" class=""></circle>
             <circle cx="50" cy="50" r="48" class=""></circle>
           </svg>
        </div>

        <div class="text-center relative z-10 mt-4">
          <span class="text-sm text-neutral-400 font-medium block mb-2">Optimization in</span>
          <span class="text-base font-semibold text-neutral-900 tracking-tight">Workforce Efficiency</span>
        </div>
        
        <!-- Circle Chart -->
        <div class="relative w-56 h-56 flex items-center justify-center" style="">
           
           <div class="flex flex-col absolute top-0 right-0 bottom-0 left-0 items-center justify-center" style="">
             <div class="text-5xl font-medium text-neutral-900 tracking-tighter mb-8">+88%</div>
           </div>
        </div>

        <button class="w-full bg-neutral-900 text-white text-sm font-medium py-3.5 rounded-lg hover:bg-orange-600 hover:shadow-lg hover:shadow-orange-500/20 transition-all duration-300 transform group-hover:-translate-y-1">
          View Case Study
        </button>
      </div>

      <!-- Card 4: Contact -->
      <div class="flex flex-col overflow-hidden group bg-center text-white bg-neutral-950 h-[520px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c5e5b92f-da68-4c11-b017-0b53b6bfa008_800w.webp)] bg-cover rounded-2xl pt-8 pr-8 pb-8 pl-8 relative shadow-xl justify-between">
        <!-- Gradient Glow -->
        <div class="absolute top-0 right-0 w-64 h-64 bg-orange-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:bg-orange-500/20 transition-colors duration-500"></div>

        <div class="flex justify-between items-start relative z-10">
          <span class="text-lg font-medium tracking-tight">Inquiries</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-bold-duotone" class=""><path fill="currentColor" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5" class=""></path></svg>
        </div>
        
        <div class="relative z-10">
          <p class="leading-relaxed text-xl text-gray-950 max-w-[260px]">
            Let’s initialize a sequence — whether you have a large dataset, a complex problem, or just curiosity, we’re here to help shape what’s next.
          </p>
        </div>

        <div class="space-y-1.5 text-sm text-neutral-400 relative z-10">
          <div class="hover:text-white cursor-pointer transition-colors flex group/link text-lg text-neutral-950 gap-x-2 gap-y-2 items-center">
            <span class="w-1 h-1 rounded-full bg-orange-500 opacity-0 group-hover/link:opacity-100 transition-opacity"></span>
            hello@cognitive.future
          </div>
          <div class="hover:text-white cursor-pointer transition-colors flex gap-2 group/link text-lg text-neutral-950 gap-x-2 gap-y-2 items-center">
            <span class="w-1 h-1 rounded-full bg-orange-500 opacity-0 group-hover/link:opacity-100 transition-opacity"></span>
            +1 (555) 019-2834
          </div>
          <div class="hover:text-white cursor-pointer transition-colors flex group/link text-lg text-neutral-950 pt-4 gap-x-2 gap-y-2 items-center">
            <span class="w-1 h-1 rounded-full bg-orange-500 opacity-0 group-hover/link:opacity-100 transition-opacity"></span>
            www.cognitive.ai
          </div>
        </div>
      </div>

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