Responsive Feature Card Grid Section

<section class="max-w-7xl sm:px-6 lg:px-8 sm:py-10 md:py-12 mr-auto ml-auto pt-8 pr-4 pb-8 pl-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 lg:grid-cols-12 gap-3 sm:gap-4 md:gap-5 lg:gap-6">
    <!-- 01 - AI Intelligence -->
    <article class="relative overflow-hidden sm:rounded-3xl col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 min-h-[380px] sm:min-h-[440px] md:min-h-[500px] sm:p-6 md:p-7 flex flex-col text-white bg-orange-500 border-zinc-900 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
      <div class="flex items-center justify-between text-white/90">
        <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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-5 h-5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        <span class="text-3xl sm:text-4xl font-semibold tracking-tight">01</span>
      </div>
      <h3 class="mt-4 sm:mt-5 text-2xl sm:text-3xl tracking-tight font-semibold">AI Intelligence</h3>
      <p class="mt-2 text-sm sm:text-base text-white/90">
        An advanced AI system that analyzes patterns, predicts outcomes, and automates complex workflows to maximize efficiency across your entire organization.
      </p>
      <div class="mt-5 sm:mt-6 rounded-xl sm:rounded-2xl overflow-hidden bg-white/10 ring-1 ring-white/20">
        <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&amp;w=1200&amp;auto=format&amp;fit=crop" alt="3D industrial render showcasing precision components" class="w-full h-44 sm:h-56 md:h-64 object-cover">
      </div>
      <div class="mt-auto pt-6 flex items-center gap-2 text-white/90">
        <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" data-lucide="waves" class="lucide lucide-waves w-4 h-4"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path></svg>
        <span class="text-sm font-medium">adaptive</span>
      </div>
    </article>

    <!-- 02 - Smart Infrastructure -->
    <article class="relative overflow-hidden sm:rounded-3xl col-span-2 md:col-span-3 lg:col-span-4 min-h-[220px] sm:min-h-[280px] md:min-h-[500px] flex flex-col bg-zinc-950 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d30527df-7416-4ead-affa-cf9a2d9e3729_800w.jpg)] bg-cover border-zinc-900 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
      <div class="flex items-center justify-between text-zinc-300">
        <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" data-lucide="arrow-down" class="lucide lucide-arrow-down w-4 h-4"><path d="M12 5v14" class=""></path><path d="m19 12-7 7-7-7" class=""></path></svg></div>
      <div class="mt-auto text-zinc-400 text-sm">
        smart infrastructure
      </div>
    </article>

    <!-- 03 - Protection -->
    

    <!-- 04 - Growth -->
    

    <!-- Enterprise Solutions -->
    <aside class="relative overflow-hidden sm:rounded-3xl col-span-1 sm:col-span-2 md:col-span-6 lg:col-span-4 sm:p-6 md:p-7 flex flex-col bg-zinc-950 border-zinc-900 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
      <div class="flex items-center justify-between text-xs sm:text-sm text-zinc-400">
        <span class="">Enterprise Solutions</span>
        <span class="">03</span>
      </div>
      <h4 class="mt-3 sm:mt-4 text-2xl sm:text-3xl md:text-4xl tracking-tight font-semibold text-zinc-100">
        Scalable, intelligent systems for tomorrow's digital landscape
      </h4>
      <p class="mt-3 text-sm md:text-base text-zinc-300">
        We build next-generation platforms that evolve with your business, delivering intelligent automation and seamless integration across your entire tech ecosystem.
      </p>

      <!-- Dot Matrix -->
      <div class="mt-6 md:mt-8">
        <div class="grid grid-cols-7 gap-4">
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-orange-500"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>

          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-orange-500"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>

          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-orange-500"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-orange-500"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>

          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-orange-500"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>

          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-orange-500"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-zinc-700"></span>
          <span class="size-1.5 rounded-full bg-orange-500"></span>
        </div>
      </div>

      <div class="mt-6 flex items-center gap-2 text-zinc-300 text-sm">
        <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" data-lucide="grid-2x2" class="lucide lucide-grid-2x2 w-4 h-4 text-orange-500"><path d="M12 3v18" class=""></path><path d="M3 12h18" class=""></path><rect x="3" y="3" width="18" height="18" rx="2" class=""></rect></svg>
        <span class="font-medium">Automate, analyze, optimize, and scale.</span>
      </div>
    </aside>
  </div>
</section>