Responsive Dark Feature Grid with Highlight Card

<section class="relative z-10">
      <div class="max-w-6xl sm:px-6 lg:px-8 mr-auto ml-auto pt-20 pr-4 pb-20 pl-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
          <!-- Feature 1 -->
          <div class="ring-1 ring-white/10 h-full flex flex-col bg-neutral-900/30 rounded-3xl backdrop-blur">
            <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6 space-y-3">
              <div class="flex items-center gap-2">
                <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" class="h-4.5 w-4.5 text-emerald-300"><path d="M2 12h20" class=""></path><path d="M2 6h20" class=""></path><path d="M2 18h20" class=""></path></svg>
                <span class="text-sm text-neutral-300 font-sans" style="">Realtime</span>
              </div>
              <h2 class="text-2xl tracking-tight text-white font-bricolage font-light" style="">Channels &amp; threads</h2>
              <p class="text-sm leading-relaxed text-neutral-300 font-sans" style="">
                Keep conversations organized with threads, mentions, and file attachments. Everything syncs instantly across devices.
              </p>
              <div class="mt-3 flex items-center gap-3">
                <span class="inline-flex items-center gap-1.5 rounded-md bg-emerald-400/10 px-2 py-1 text-xs text-emerald-300 ring-1 ring-emerald-400/20 font-sans" style="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M21 6h-7" class=""></path><path d="M14 6l-3-3 3-3" class=""></path><path d="M3 6h7" class=""></path><path d="M10 6l3 3-3 3" class=""></path></svg>
                  Low latency
                </span>
                <span class="inline-flex items-center gap-1.5 rounded-md bg-indigo-400/10 px-2 py-1 text-xs text-indigo-300 ring-1 ring-indigo-400/20 font-sans" style="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M2 12h20" class=""></path><path d="M12 2a15.3 15.3 0 0 1 0 20" class=""></path></svg>
                  Global
                </span>
              </div>
            </div>
          </div>

          <!-- Feature 2 (center highlight) -->
          <div class="relative ring-1 ring-white/10 bg-neutral-900/40 border-neutral-800/70 border rounded-3xl shadow-2xl backdrop-blur max-w-xl h-full flex flex-col">
            <div class="relative sm:p-6 lg:p-8 flex-1 flex flex-col pt-5 pr-5 pb-5 pl-5">
              <div class="flex items-center gap-2">
                <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-violet-500/20 ring-1 ring-violet-500/30">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-violet-300"><path d="m12 6 7 4-7 4-7-4 7-4Z" class=""></path><path d="m19 10v6l-7 4-7-4v-6" class=""></path></svg>
                </span>
                <h3 class="text-xl tracking-tight font-semibold text-white font-sans" style="">AI recaps &amp; actions</h3>
              </div>

              <div class="mt-4 rounded-2xl border border-neutral-800/80 bg-neutral-900/70 p-4 space-y-3">
                <div class="flex items-center gap-2 text-neutral-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-400"><path d="M3 5h18" class=""></path><path d="M3 10h18" class=""></path><path d="M3 15h18" class=""></path><path d="M3 20h18" class=""></path></svg>
                  <span class="text-sm font-sans" style="">Key decisions</span>
                </div>
                <div class="text-sm text-neutral-300 font-sans" style="">
                  • Launch copy approved • Add pricing screenshot • QA after embedding assets
                </div>
                <div class="flex gap-2 mt-1">
                  <button class="inline-flex items-center gap-1.5 rounded-lg bg-white text-neutral-900 px-3 py-1.5 text-xs font-medium hover:bg-neutral-100 font-sans" style="">
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M8 7v10l11-5Z" class=""></path></svg>
                    Summarize
                  </button>
                  <button class="inline-flex items-center gap-1.5 rounded-lg border border-neutral-800 bg-neutral-900/60 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-900 font-sans" style="">
                    Create tasks
                  </button>
                </div>
              </div>

              <div class="mt-4 rounded-2xl border border-neutral-800/80 bg-neutral-900/70 p-4">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-emerald-500/15 ring-1 ring-emerald-500/30">
                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-300"><path d="M12 22a10 10 0 1 1 10-10" class=""></path><path d="M22 12 12 22l-4-4" class=""></path></svg>
                    </span>
                    <p class="text-sm text-white font-sans" style="">Auto follow-ups</p>
                  </div>
                  <span class="text-[11px] text-neutral-400 font-sans" style="">Smart reminders</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Feature 3 -->
          <div class="ring-1 ring-white/10 h-full flex flex-col bg-neutral-900/30 rounded-3xl backdrop-blur">
            <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6 space-y-3">
              <div class="flex items-center gap-2">
                <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" class="h-4.5 w-4.5 text-cyan-300"><rect x="3" y="11" width="18" height="11" rx="2" class=""></rect><path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path></svg>
                <span class="text-sm text-neutral-300 font-sans" style="">Security</span>
              </div>
              <h2 class="text-2xl tracking-tight text-white font-bricolage font-light" style="">End‑to‑end encryption</h2>
              <p class="text-sm leading-relaxed text-neutral-300 font-sans" style="">
                Private by default. Messages and files are encrypted—keys never leave your devices.
              </p>
              <div class="mt-3 flex items-center gap-3">
                <span class="inline-flex items-center gap-1.5 rounded-md bg-cyan-400/10 px-2 py-1 text-xs text-cyan-300 ring-1 ring-cyan-400/20 font-sans" style="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><rect x="3" y="4" width="18" height="16" rx="2" class=""></rect><path d="M7 8h10" class=""></path></svg>
                  Audited
                </span>
                <span class="inline-flex items-center gap-1.5 rounded-md bg-emerald-400/10 px-2 py-1 text-xs text-emerald-300 ring-1 ring-emerald-400/20 font-sans" style="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="m9 12 2 2 4-4" class=""></path><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
                  Zero‑knowledge
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Use cases -->
        <div class="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 7h-9" class=""></path><path d="M14 17H5" class=""></path><path d="M14 7V3H6a2 2 0 0 0-2 2v16l4-4h8a2 2 0 0 0 2-2Z" class=""></path></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Customer support</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Shared inboxes, tags, and SLAs in channels.</p>
  </div>
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><rect x="3" y="3" width="7" height="7" class=""></rect><rect x="14" y="3" width="7" height="7" class=""></rect><rect x="14" y="14" width="7" height="7" class=""></rect><rect x="3" y="14" width="7" height="7" class=""></rect></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Engineering</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Incident channels, alerts, and on‑call flows.</p>
  </div>
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><rect x="3" y="3" width="7" height="7" class=""></rect><rect x="14" y="3" width="7" height="7" class=""></rect><rect x="14" y="14" width="7" height="7" class=""></rect><rect x="3" y="14" width="7" height="7" class=""></rect></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Design</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Threads for critiques with media previews.</p>
  </div>
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><path d="m21 15-5-5L5 21l-4 1 1-4L16 6z" class=""></path><path d="M20 7V3h-4" class=""></path></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Sales</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Account rooms with notes and recordings.</p>
  </div>
</div>
    </div></section>