Interactive FAQ Accordion with CTA

<section class="ring-1 ring-white/10 md:p-10 bg-white/5 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-2xl backdrop-blur-xl">
        <!-- Header -->
        <div class="mb-8 flex items-center justify-between">
          <div class="flex items-center gap-3">
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/10">
              <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="aperture" class="lucide lucide-aperture h-5 w-5 text-cyan-300"><circle cx="12" cy="12" r="10"></circle><path d="m14.31 8 5.74 9.94"></path><path d="M9.69 8h11.48"></path><path d="m7.38 12 5.74-9.94"></path><path d="M9.69 16 3.95 6.06"></path><path d="M14.31 16H2.83"></path><path d="m16.62 12-5.74 9.94"></path></svg>
            </span>
            <div class="">
              <h1 class="text-3xl md:text-4xl font-semibold tracking-tight">OrbitFlow — Help &amp; FAQs</h1>
              <p class="mt-1 text-sm text-slate-400">Quick answers about our services, process, and support.</p>
            </div>
          </div>
        </div>

        <!-- FAQ Grid -->
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
          <!-- Item 1 (Open) -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="true">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">What does OrbitFlow build?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(226, 232, 240);"><path d="M5 12h14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 text-sm leading-6 text-slate-300">
              We craft fast, accessible websites, web apps, and design systems. From marketing sites to complex dashboards, we ship polished, production-ready experiences.
            </div>
          </div>

          <!-- Item 2 -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="false">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">How fast can you launch a project?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(226, 232, 240);"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 hidden text-sm leading-6 text-slate-300">
              Typical timelines range from 2–6 weeks depending on scope, integrations, and feedback cycles. We also offer sprints for time‑sensitive launches.
            </div>
          </div>

          <!-- Item 3 -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="false">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">Do you provide ongoing maintenance?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <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="plus" class="lucide lucide-plus h-4 w-4 text-slate-200"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 hidden text-sm leading-6 text-slate-300">
              Yes. We offer flexible retainers for updates, optimization, and monitoring. You'll have a dedicated channel and clear SLAs.
            </div>
          </div>

          <!-- Item 4 -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="false">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">Can you migrate an existing site?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <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="plus" class="lucide lucide-plus h-4 w-4 text-slate-200"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 hidden text-sm leading-6 text-slate-300">
              We handle migrations from platforms like WordPress, Webflow, and custom stacks. Content and redirects are planned to preserve SEO and analytics.
            </div>
          </div>

          <!-- Item 5 -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="false">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">What tech stack do you use?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <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="plus" class="lucide lucide-plus h-4 w-4 text-slate-200"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 hidden text-sm leading-6 text-slate-300">
              Modern, performant tools for the web. We select the stack to fit your goals—prioritizing speed, accessibility, and long‑term maintainability.
            </div>
          </div>

          <!-- Item 6 (Open, right middle) -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="true">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">What's your pricing model?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(226, 232, 240);"><path d="M5 12h14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 text-sm leading-6 text-slate-300">
              Fixed‑scope packages for clarity, or monthly retainers for ongoing work. Transparent proposals outline deliverables, timeline, and payment schedule.
            </div>
          </div>

          <!-- Item 7 -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="false">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">Do you work with startups and enterprises?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <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="plus" class="lucide lucide-plus h-4 w-4 text-slate-200"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 hidden text-sm leading-6 text-slate-300">
              Absolutely. We collaborate with funded startups, growing teams, and enterprise orgs—adapting process and governance to your environment.
            </div>
          </div>

          <!-- Item 8 -->
          <div data-accordion-item="" class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-5">
            <button type="button" class="flex w-full items-center justify-between gap-4 text-left" aria-expanded="false">
              <span class="text-base md:text-lg font-semibold leading-6 tracking-tight text-slate-100">How do I get a quote?</span>
              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10">
                <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="plus" class="lucide lucide-plus h-4 w-4 text-slate-200"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
              </span>
            </button>
            <div data-accordion-content="" class="mt-3 hidden text-sm leading-6 text-slate-300">
              Share goals, timeline, and any references. We'll review and send a tailored proposal within 2–3 business days.
            </div>
          </div>
        </div>

        <!-- Footer CTA -->
        <div class="mt-6 flex flex-col items-center justify-between gap-4 rounded-2xl border border-white/10 bg-white/5 p-4 sm:flex-row">
          <div class="flex items-center gap-3">
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/10">
              <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-5 w-5 text-sky-300"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
            </span>
            <p class="text-sm text-slate-300">Still have a question? We're here to help.</p>
          </div>
          <div class="flex items-center gap-3">
            <button class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-white/10">
              <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-square" class="lucide lucide-message-square h-4 w-4"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg>
              Contact Support
            </button>
            <a href="#" class="inline-flex items-center rounded-full bg-gradient-to-r from-cyan-400 to-indigo-500 px-4 py-2 text-sm font-medium text-slate-900 hover:from-cyan-300 hover:to-indigo-400">
              Ask a Question
            </a>
          </div>
        </div>
      </section>