<section class="pt-32 pb-12 max-w-3xl mx-auto px-6">
  <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('page.faq.kicker')) ?></div>
  <h1 class="mt-4 text-5xl md:text-6xl font-display"><?= e(t('page.faq.title')) ?></h1>
</section>
<section class="max-w-3xl mx-auto px-6 pb-28 space-y-4" x-data>
  <?php for ($i = 1; $i <= 8; $i++): ?>
    <?php $q = t('page.faq.q' . $i); $a = t('page.faq.a' . $i); if ($q === 'page.faq.q' . $i) continue; ?>
    <details class="group border border-white/10 rounded-lg bg-ink/40">
      <summary class="cursor-pointer list-none flex items-center justify-between p-5 text-lg">
        <span><?= e($q) ?></span>
        <span class="text-gold group-open:rotate-45 transition">+</span>
      </summary>
      <div class="px-5 pb-5 text-bone/70"><?= e($a) ?></div>
    </details>
  <?php endfor; ?>
</section>
