Responsive Pricing Section Header with Badge

<div class="text-center space-y-4 mb-16">
      <div class="mb-2">
        <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-zinc-200 backdrop-blur font-sans">
          <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="h-3.5 w-3.5 text-violet-300"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
          Simple, transparent pricing
        </span>
      </div>
      <h2 class="text-4xl sm:text-5xl md:text-6xl tracking-tight text-white font-bricolage font-light">
        Plans that scale with your team
      </h2>
      <p class="max-w-2xl mx-auto text-lg text-zinc-300 font-sans">
        Start free, upgrade when you need more. All plans include end-to-end encryption and unlimited message history.
      </p>
    </div>