Dark Feature Card with Dot Matrix Decoration

<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 max-w-xl">
      <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="sm:mt-4 sm:text-3xl md:text-4xl text-2xl font-semibold text-zinc-100 tracking-tight mt-3">
        Scalable, intelligent systems for tomorrow's digital landscape
      </h4>
      <p class="md:text-base text-sm text-zinc-300 mt-3">
        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>