Responsive FAQ Accordion Section (Tailwind)

<div id="faq" class="sm:px-6 md:pb-14 border-white/10 border-t pt-10 pr-5 pb-10 pl-5 w-full max-w-5xl">
  <div class="max-w-3xl">
    <p class="text-xs uppercase tracking-wide text-gray-400 font-geist" data-animate=""
      style="opacity: 1; transform: none; filter: blur(0px);">FAQ</p>
    <h2 class="mt-1 text-3xl md:text-4xl tracking-tight font-space-grotesk font-medium" data-animate=""
      style="opacity: 1; transform: none; filter: blur(0px);">Answers to common questions</h2>
  </div>

  <div class="mt-6 divide-y divide-white/10 rounded-2xl border border-white/10 bg-white/[0.03]" data-accordion="faq"
    data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">
    <!-- Item 1 -->
    <div class="p-5">
      <button class="w-full flex items-center justify-between text-left group" data-accordion-target="faq-1" aria-expanded="false">
        <span class="text-sm md:text-base font-geist font-semibold tracking-tight">How do I migrate my existing validators?</span>
        <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="chevron-down" class="lucide lucide-chevron-down w-4.5 h-4.5 text-gray-400 transition-transform group-aria-expanded:rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
      </button>
      <div id="faq-1" class="mt-3 hidden">
        <p class="text-sm text-gray-300 font-geist leading-relaxed">
          Use qmctl to import keys and state snapshots. Our team provides guided cutover with no missed blocks using
          dual-signing safeguards and staged handoff.
        </p>
      </div>
    </div>
    <!-- Item 2 -->
    <div class="p-5">
      <button class="w-full flex items-center justify-between text-left group" data-accordion-target="faq-2" aria-expanded="false">
        <span class="text-sm md:text-base font-geist font-semibold tracking-tight">Do you support non-EVM chains?</span>
        <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="chevron-down" class="lucide lucide-chevron-down w-4.5 h-45 text-gray-400 transition-transform group-aria-expanded:rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
      </button>
      <div id="faq-2" class="mt-3 hidden">
        <p class="text-sm text-gray-300 font-geist leading-relaxed">
          Yes. We support Cosmos SDK chains (IBC-first) andana in addition to EVM networks. New networks are added on a
          rolling basis.
        </p>
      </div>
    </div>
    <!-- Item 3 -->
    <div class="p-5">
      <button class="w-full flex items-center justify-between text-left group" data-accordion-target="faq-3" aria-expanded="false">
        <span class="text-sm md:text-base font-geist font-semibold tracking-tight">What does “HSM-backed signing” mean in Pro?</span>
        <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="chevron-down" class="lucide lucide-chevron-down w-4.5 h-4.5 text-gray-400 transition-transform group-aria-expanded:rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
      </button>
      <div id="faq-3" class="mt-3 hidden">
        <p class="text-sm text-gray-300 font-geist leading-relaxed">
          Your private keys are generated and stored in FIPS-compliant hardware modules. Sign operations never leave the
          secure boundary, reducing attack surface.
        </p>
      </div>
    </div>
    <!-- Item 4 -->
    <div class="p-5">
      <button class="w-full flex items-center justify-between text-left group" data-accordion-target="faq-4" aria-expanded="false">
        <span class="text-sm md:text-base font-geist font-semibold tracking-tight">Can I run QuantaMesh on-prem?</span>
        <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="chevron-down" class="lucide lucide-chevron-down w-4.5 h-4.5 text-gray-400 transition-transform group-aria-expanded:rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
      </button>
      <div id="faq-4" class="mt-3 hidden">
        <p class="text-sm text-gray-300 font-geist leading-relaxed">
          Absolutely. Enterprise deployments support private regions, on-prem clusters, and BYO HSM/KMS with the same
          control plane and policy engine.
        </p>
      </div>
    </div>
    <!-- Item 5 -->
    <div class="p-5">
      <button class="w-full flex items-center justify-between text-left group" data-accordion-target="faq-5" aria-expanded="false">
        <span class="text-sm md:text-base font-geist font-semibold tracking-tight">Is there an SLA?</span>
        <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="chevron-down" class="lucide lucide-chevron-down w-4.5 h-4.5 text-gray-400 transition-transform group-aria-expanded:rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
      </button>
      <div id="faq-5" class="mt-3 hidden">
        <p class="text-sm text-gray-300 font-geist leading-relaxed">
          Pro includes standard SLOs and support. Enterprise offers custom SLAs with 24/7 response, defined RTO/RPO, and
          runbook-backed incident handling.
        </p>
      </div>
    </div>
  </div>
</div>