Responsive Tailwind FAQ Section

<section
  class="relative z-10 sm:p-8 animate-scaleIn animation-delay-600 bg-zinc-950/10 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
  <!-- Header -->
  <div class="flex gap-6 sm:px-0 pr-1 pl-1 items-center animate-fadeInUp">
    <span class="inline-flex items-center gap-2 text-sm">
      <span class="text-4xl font-medium text-white">Frequently Asked</span>
    </span>
    <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px h-10 bg-white/10"></span>
    <span class="text-sm text-neutral-300">common questions</span>
  </div>
  <div class="h-px bg-white/10 mt-4 animate-fadeIn animation-delay-100"></div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
    <div class="space-y-6 stagger-animation">

      <!-- FAQ 1 -->
      <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6">
        <h3 class="text-lg font-medium text-white mb-3">How long does a typical project take?</h3>
        <p class="text-sm text-neutral-400 leading-relaxed">Project timelines vary based on scope and complexity. Simple
          websites take 2-4 weeks, while complex applications can take 2-4 months. I'll provide a detailed timeline
          during our initial consultation.</p>
      </div>

      <!-- FAQ 2 -->
      <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6">
        <h3 class="text-lg font-medium text-white mb-3">Do you work with international clients?</h3>
        <p class="text-sm text-neutral-400 leading-relaxed">Absolutely! I work with clients worldwide and am comfortable
          with different time zones. Most communication happens via email, video calls, and project management tools.
        </p>
      </div>

      <!-- FAQ 3 -->
      <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6">
        <h3 class="text-lg font-medium text-white mb-3">What's your payment structure?</h3>
        <p class="text-sm text-neutral-400 leading-relaxed">I typically work with a 50% upfront deposit and 50% upon
          completion for smaller projects. Larger projects are broken into milestone-based payments for better cash flow
          management.</p>
      </div>
    </div>

    <div class="space-y-6 stagger-animation">

      <!-- FAQ 4 -->
      <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6">
        <h3 class="text-lg font-medium text-white mb-3">Do you provide ongoing support?</h3>
        <p class="text-sm text-neutral-400 leading-relaxed">Yes! All projects include a warranty period for bug fixes. I
          also offer ongoing maintenance packages for updates, security monitoring, and continued optimization.</p>
      </div>

      <!-- FAQ 5 -->
      <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6">
        <h3 class="text-lg font-medium text-white mb-3">Can you work with my existing team?</h3>
        <p class="text-sm text-neutral-400 leading-relaxed">Definitely! I collaborate seamlessly with internal teams,
          agencies, and other freelancers. I can adapt to your existing workflows and communication preferences.</p>
      </div>

      <!-- FAQ 6 -->
      <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6">
        <h3 class="text-lg font-medium text-white mb-3">What if I need revisions?</h3>
        <p class="text-sm text-neutral-400 leading-relaxed">All projects include a set number of revisions. I believe in
          getting it right, so we'll work together until you're completely satisfied with the final result.</p>
      </div>
    </div>
  </div>
</section>