Interactive FAQ Accordion

<div class="max-w-4xl mx-auto space-y-6">
  <div class="rounded-2xl border border-white/10 overflow-hidden bg-white/[0.02]">
    <button class="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-white/5 transition-all duration-300" onclick="toggleFaq(this)">
      <span class="text-lg font-medium text-white">What are the medical requirements for space travel?</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 transform transition-transform duration-300">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div class="px-8 pb-6 hidden">
      <p class="text-white/70 leading-relaxed">
        All space travelers must pass a comprehensive medical examination including cardiovascular screening, blood pressure checks, and psychological evaluation. Most healthy adults between 18-65 can qualify. Our medical team will guide you through the entire clearance process, which typically takes 2-4 weeks.
      </p>
    </div>
  </div>
  <script>
    function toggleFaq(button) {
    const content = button.nextElementSibling;
    const icon = button.querySelector('svg');
    
    if (content.classList.contains('hidden')) {
      content.classList.remove('hidden');
      icon.style.transform = 'rotate(180deg)';
    } else {
      content.classList.add('hidden');
      icon.style.transform = 'rotate(0deg)';
    }
  }
  </script>
</div>