Responsive Features Grid Section with CTA

<section id="features" class="bg-gray-950 pt-16 pb-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-end justify-between gap-6">
      <div class="">
        <p class="text-sm uppercase tracking-wider text-blue-300/90">
          Features
        </p>
        <h2 class="mt-2 text-3xl lg:text-4xl tracking-tight text-white" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 600">
          Everything you need to move work forward
        </h2>
      </div>
      <a href="#product" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm bg-white/5 text-gray-100 hover:bg-white/10 border border-white/10 transition-all hover:scale-[1.02]">
        Explore product
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
      </a>
    </div>

    <div class="mt-8 grid md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
        <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="columns-3" class="lucide lucide-columns-3 w-5 h-5 text-gray-300"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path><path d="M15 3v18"></path></svg>
        </div>
        <h3 class="mt-4 text-lg tracking-tight">Boards &amp; lists</h3>
        <p class="mt-2 text-sm text-gray-400">
          Switch seamlessly between Kanban and list to match your focus.
        </p>
      </div>

      <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
        <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar w-5 h-5 text-gray-300"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
        </div>
        <h3 class="mt-4 text-lg tracking-tight">Calendar</h3>
        <p class="mt-2 text-sm text-gray-400">
          Deadlines you can trust, with automatic reminders.
        </p>
      </div>

      <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
        <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bolt" class="lucide lucide-bolt w-5 h-5 text-gray-300"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><circle cx="12" cy="12" r="4"></circle></svg>
        </div>
        <h3 class="mt-4 text-lg tracking-tight">Automation</h3>
        <p class="mt-2 text-sm text-gray-400">
          Reduce busywork with rules and templates that scale.
        </p>
      </div>

      <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
        <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plug" class="lucide lucide-plug w-5 h-5 text-gray-300"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg>
        </div>
        <h3 class="mt-4 text-lg tracking-tight">Integrations</h3>
        <p class="mt-2 text-sm text-gray-400">
          Connect tools you already use: Git, Slack, Docs, and more.
        </p>
      </div>
    </div>
  </div>
</section>