FAQ Section with Accordion & Support CTA

<section class="sm:px-6 lg:px-8 md:py-20 w-full max-w-7xl mr-auto ml-auto pt-14 pr-4 pb-14 pl-4">
    <!-- Eyebrow -->
    <div class="flex items-center justify-center scroll-fade visible">
      <span class="inline-flex items-center gap-2 text-[11px] uppercase tracking-wide border rounded-full px-3 py-1 text-slate-300/80 bg-white/5 border-white/10" style="">
        <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="help-circle" class="lucide lucide-help-circle h-3.5 w-3.5 text-cyan-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path><path d="M12 17h.01" class=""></path></svg>
        Common Questions
      </span>
    </div>

    <!-- Heading -->
    <div class="max-w-3xl text-center mx-auto mt-6 scroll-fade scroll-fade-delay visible">
      <h1 class="text-4xl md:text-6xl font-semibold tracking-tight text-slate-50" style="">
        Everything You <span class="bg-clip-text italic font-['Playfair_Display'] bg-gradient-to-r from-slate-200 via-cyan-300 to-indigo-300" style="">Need to Know</span>
      </h1>
      <p class="mt-4 text-base md:text-lg text-slate-400" style="">
        Quick answers to help you get started with confidence
      </p>
    </div>

    <!-- Content -->
    <div class="grid gap-6 lg:grid-cols-2 mt-12">
      <!-- Left Support Card -->
      <div class="relative overflow-hidden rounded-[1.2em] ring-1 ring-white/10 bg-white/5 hover:bg-white/10 hover:ring-white/20 transition-all self-start scroll-fade scroll-fade-delay-2 visible" style="backdrop-filter: blur(16px);">
        <div class="relative p-6 md:p-8 text-center flex flex-col items-center">
          <div class="h-12 w-12 flex ring-white/10 ring-1 bg-black/40 rounded-xl items-center justify-center">
            <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="message-circle-question" class="lucide lucide-message-circle-question h-6 w-6 text-slate-300"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path><path d="M12 17h.01" class=""></path></svg>
          </div>
          <h3 class="text-xl font-semibold tracking-tight text-slate-100 mt-4" style="">Need Personal Guidance?</h3>
          <p class="mt-2 text-sm md:text-base text-slate-400 max-w-md" style="">
            Our AI automation experts are here to help you find the perfect solution for your specific business needs.
          </p>
          <a href="#contact" class="mt-6 inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-white hover:bg-white/10 transition" style="">
            <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="calendar" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
            Schedule Consultation
          </a>
        </div>
      </div>

      <!-- Right Accordion -->
      <div class="scroll-fade scroll-fade-delay-3 space-y-4 visible">
        <!-- FAQ Items -->
        <div class="faq-item rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition">
          <button type="button" class="w-full flex gap-4 focus:outline-none text-left pt-3 pr-4 pb-3 pl-4 items-center justify-between" data-faq-toggle="">
            <span class="text-sm md:text-base text-slate-200 font-medium" style="">How quickly can I see results with your AI automation?</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 h-5 w-5 text-slate-300 transition-transform duration-300 rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </button>
          <div class="faq-content overflow-hidden transition-all duration-300 text-sm text-slate-400 pt-0 pr-4 pb-0 pl-4" style="max-height: 84px;">
            <div class="pb-6">
              Most clients see initial improvements within the first week of implementation. Our AI algorithms begin optimizing workflows immediately, with significant productivity gains typically visible within 30 days. Full ROI is usually achieved within 3-6 months.
            </div>
          </div>
        </div>

        <div class="faq-item rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition">
          <button type="button" class="w-full flex gap-4 focus:outline-none text-left pt-3 pr-4 pb-3 pl-4 items-center justify-between" data-faq-toggle="">
            <span class="text-sm md:text-base text-slate-200 font-medium" style="">What makes your AI different from other automation tools?</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 transition-transform duration-300 h-5 w-5 text-slate-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </button>
          <div class="faq-content px-4 pt-0 text-sm text-slate-400 overflow-hidden transition-all duration-300" style="max-height: 0px;">
            <div class="pb-6">
              Our platform uses advanced machine learning that continuously learns from your business patterns. Unlike static automation tools, our AI adapts and improves over time, providing contextual decision-making and predictive insights that traditional tools simply cannot match.
            </div>
          </div>
        </div>

        <div class="faq-item rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition">
          <button type="button" class="w-full flex gap-4 focus:outline-none text-left pt-3 pr-4 pb-3 pl-4 items-center justify-between" data-faq-toggle="">
            <span class="text-sm md:text-base text-slate-200 font-medium" style="">Is my business data secure with your platform?</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 h-5 w-5 text-slate-300 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </button>
          <div class="faq-content px-4 pt-0 text-sm text-slate-400 overflow-hidden transition-all duration-300" style="max-height: 0px;">
            <div class="pb-6">
              Absolutely. We maintain enterprise-grade security with SOC 2 Type II compliance, end-to-end encryption, and GDPR compliance. Your data is encrypted at rest and in transit using AES-256 encryption. We never access or store sensitive business data without explicit permission.
            </div>
          </div>
        </div>

        <div class="faq-item rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition">
          <button type="button" class="w-full flex gap-4 focus:outline-none text-left pt-3 pr-4 pb-3 pl-4 items-center justify-between" data-faq-toggle="">
            <span class="text-sm md:text-base text-slate-200 font-medium" style="">Can I integrate this with my existing business tools?</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 h-5 w-5 text-slate-300 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </button>
          <div class="faq-content px-4 pt-0 text-sm text-slate-400 overflow-hidden transition-all duration-300" style="max-height: 0px;">
            <div class="pb-6">
              Yes, we support 500+ popular integrations including CRM systems, project management tools, communication platforms, and accounting software. Our RESTful API also enables custom integrations, and our team can help build specific connections for enterprise clients.
            </div>
          </div>
        </div>

        <div class="faq-item rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition">
          <button type="button" class="w-full flex gap-4 focus:outline-none text-left pt-3 pr-4 pb-3 pl-4 items-center justify-between" data-faq-toggle="">
            <span class="text-sm md:text-base text-slate-200 font-medium" style="">What level of support do you provide?</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 h-5 w-5 text-slate-300 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </button>
          <div class="faq-content px-4 pt-0 text-sm text-slate-400 overflow-hidden transition-all duration-300" style="max-height: 0px;">
            <div class="pb-6">
              We provide comprehensive support including detailed documentation, video tutorials, community forums, and email support for all plans. Professional users get priority support with guaranteed response times, while Enterprise customers receive 24/7 dedicated support with assigned success managers.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>