سؤالات متداول

<section class="faq-accordion-1 bg-white py-24 dark:bg-gray-950 sm:py-32">
  <div class="mx-auto max-w-3xl px-6 lg:px-8">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Frequently asked questions</h2>
    <div class="mt-10 space-y-2">
      <details class="group rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 text-right font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
          <span>How do I get started?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <div class="border-t border-gray-200 dark:border-gray-700 px-5 py-4 text-gray-600 dark:text-gray-300">
          Sign up for a free account and follow the onboarding guide. You can import your data or start from a template.
        </div>
      </details>
      <details class="group rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 text-right font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
          <span>Can I change my plan later?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <div class="border-t border-gray-200 dark:border-gray-700 px-5 py-4 text-gray-600 dark:text-gray-300">
          Yes. You can upgrade or downgrade at any time from your account settings. Changes take effect immediately.
        </div>
      </details>
      <details class="group rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 text-right font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
          <span>Do you offer support?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <div class="border-t border-gray-200 dark:border-gray-700 px-5 py-4 text-gray-600 dark:text-gray-300">
          We offer email support for all plans. Pro and Enterprise include priority support with faster response times.
        </div>
      </details>
    </div>
  </div>
</section>
<script>
  (function () {
    const section = document.querySelector('.faq-accordion-1');
    if (!section) return;
    const details = section.querySelectorAll('details');
    details.forEach((d) => {
      d.addEventListener('toggle', function () {
        if (!this.open) return;
        details.forEach((other) => { if (other !== this) other.removeAttribute('open'); });
      });
    });
  })();
</script>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-7xl px-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Frequently asked questions</h2>
    <div class="mt-12 grid gap-12 lg:grid-cols-2">
      <div class="transition-opacity duration-300 hover:opacity-100 opacity-95">
        <h3 class="font-semibold text-gray-900 dark:text-white transition-colors hover:text-gray-700 dark:hover:text-gray-200">How do I get started?</h3>
        <p class="mt-2 text-gray-600 dark:text-gray-300">Sign up for a free account and follow the onboarding guide.</p>
      </div>
      <div class="transition-opacity duration-300 hover:opacity-100 opacity-95">
        <h3 class="font-semibold text-gray-900 dark:text-white transition-colors hover:text-gray-700 dark:hover:text-gray-200">Can I change my plan?</h3>
        <p class="mt-2 text-gray-600 dark:text-gray-300">Yes. Upgrade or downgrade anytime from account settings.</p>
      </div>
      <div class="transition-opacity duration-300 hover:opacity-100 opacity-95">
        <h3 class="font-semibold text-gray-900 dark:text-white transition-colors hover:text-gray-700 dark:hover:text-gray-200">Do you offer support?</h3>
        <p class="mt-2 text-gray-600 dark:text-gray-300">Email support for all plans. Priority for Pro and Enterprise.</p>
      </div>
      <div class="transition-opacity duration-300 hover:opacity-100 opacity-95">
        <h3 class="font-semibold text-gray-900 dark:text-white transition-colors hover:text-gray-700 dark:hover:text-gray-200">What payment methods do you accept?</h3>
        <p class="mt-2 text-gray-600 dark:text-gray-300">We accept all major credit cards and PayPal.</p>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-3xl space-y-4 px-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">FAQ</h2>
    <details class="group rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 overflow-hidden transition-shadow hover:shadow-md">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-4 font-semibold text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
        <span>How do I get started?</span>
        <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
      </summary>
      <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4 text-gray-600 dark:text-gray-300">
        Sign up and follow the onboarding guide. You can import data or start from a template.
      </div>
    </details>
    <details class="group rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 overflow-hidden transition-shadow hover:shadow-md">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-4 font-semibold text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
        <span>Can I change my plan later?</span>
        <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
      </summary>
      <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4 text-gray-600 dark:text-gray-300">
        Yes. Upgrade or downgrade anytime. Changes take effect immediately.
      </div>
    </details>
    <details class="group rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 overflow-hidden transition-shadow hover:shadow-md">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-4 font-semibold text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
        <span>Do you offer support?</span>
        <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
      </summary>
      <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4 text-gray-600 dark:text-gray-300">
        We offer email support for all plans. Pro and Enterprise include priority support.
      </div>
    </details>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-2xl px-6">
    <h2 class="text-xl font-bold text-gray-900 dark:text-white">FAQ</h2>
    <div class="mt-8 space-y-2">
      <details class="group border-b border-gray-200 dark:border-gray-700">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-2 py-3 text-sm font-medium text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-200 transition-colors [&::-webkit-details-marker]:hidden">
          <span>How do I get started?</span>
          <span class="shrink-0 text-gray-400 text-xs transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="pb-3 text-sm text-gray-600 dark:text-gray-300">Sign up and follow the guide.</p>
      </details>
      <details class="group border-b border-gray-200 dark:border-gray-700">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-2 py-3 text-sm font-medium text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-200 transition-colors [&::-webkit-details-marker]:hidden">
          <span>Can I change my plan?</span>
          <span class="shrink-0 text-gray-400 text-xs transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="pb-3 text-sm text-gray-600 dark:text-gray-300">Yes, anytime from settings.</p>
      </details>
      <details class="group border-b border-gray-200 dark:border-gray-700">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-2 py-3 text-sm font-medium text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-200 transition-colors [&::-webkit-details-marker]:hidden">
          <span>Do you offer support?</span>
          <span class="shrink-0 text-gray-400 text-xs transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="pb-3 text-sm text-gray-600 dark:text-gray-300">Email support for all plans.</p>
      </details>
    </div>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-3xl px-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Frequently asked questions</h2>
    <dl class="mt-10 space-y-8">
      <div>
        <dt class="text-base font-semibold text-gray-900 dark:text-white">How do I get started?</dt>
        <dd class="mt-2 text-base text-gray-600 dark:text-gray-300">Sign up for a free account and follow the onboarding guide.</dd>
      </div>
      <div>
        <dt class="text-base font-semibold text-gray-900 dark:text-white">Can I change my plan?</dt>
        <dd class="mt-2 text-base text-gray-600 dark:text-gray-300">Yes. Upgrade or downgrade anytime from account settings.</dd>
      </div>
    </dl>
    <div class="mt-16 rounded-2xl bg-gray-50 p-8 text-center dark:bg-gray-900">
      <p class="font-medium text-gray-900 dark:text-white">Still have questions?</p>
      <a href="#" class="mt-4 inline-block rounded-full bg-gray-900 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Contact support</a>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-2xl px-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">FAQ</h2>
    <ol class="mt-10 space-y-8 list-decimal list-inside">
      <li class="transition-colors duration-200 hover:text-gray-800 dark:hover:text-gray-100">
        <span class="font-semibold text-gray-900 dark:text-white">How do I get started?</span>
        <p class="mt-1 text-gray-600 dark:text-gray-300">Sign up and follow the onboarding guide.</p>
      </li>
      <li class="transition-colors duration-200 hover:text-gray-800 dark:hover:text-gray-100">
        <span class="font-semibold text-gray-900 dark:text-white">Can I change my plan?</span>
        <p class="mt-1 text-gray-600 dark:text-gray-300">Yes. Change anytime from account settings.</p>
      </li>
      <li class="transition-colors duration-200 hover:text-gray-800 dark:hover:text-gray-100">
        <span class="font-semibold text-gray-900 dark:text-white">Do you offer support?</span>
        <p class="mt-1 text-gray-600 dark:text-gray-300">Email support for all. Priority for Pro and Enterprise.</p>
      </li>
    </ol>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-7xl px-6 lg:grid lg:grid-cols-2 lg:gap-16">
    <div>
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Frequently asked questions</h2>
      <p class="mt-4 text-gray-600 dark:text-gray-300">Can't find the answer you're looking for? Contact our support team.</p>
    </div>
    <div class="mt-12 lg:mt-0">
      <dl class="space-y-8">
        <div class="transition-colors duration-200 rounded-lg py-1 -my-1 hover:bg-gray-50 dark:hover:bg-gray-800/50 px-2 -mx-2">
          <dt class="text-base font-semibold text-gray-900 dark:text-white">How do I get started?</dt>
          <dd class="mt-2 text-base text-gray-600 dark:text-gray-300">Sign up and follow the guide. Import data or start from a template.</dd>
        </div>
        <div class="transition-colors duration-200 rounded-lg py-1 -my-1 hover:bg-gray-50 dark:hover:bg-gray-800/50 px-2 -mx-2">
          <dt class="text-base font-semibold text-gray-900 dark:text-white">Can I change my plan?</dt>
          <dd class="mt-2 text-base text-gray-600 dark:text-gray-300">Yes. Upgrade or downgrade anytime. Changes are immediate.</dd>
        </div>
        <div class="transition-colors duration-200 rounded-lg py-1 -my-1 hover:bg-gray-50 dark:hover:bg-gray-800/50 px-2 -mx-2">
          <dt class="text-base font-semibold text-gray-900 dark:text-white">Do you offer support?</dt>
          <dd class="mt-2 text-base text-gray-600 dark:text-gray-300">Email support for all. Pro and Enterprise get priority.</dd>
        </div>
      </dl>
    </div>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-2xl px-6">
    <h2 class="text-xl font-bold text-gray-900 dark:text-white">Quick answers</h2>
    <div class="mt-8 space-y-1">
      <details class="group rounded-lg bg-gray-50 dark:bg-gray-900/50 overflow-hidden">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
          <span>How do I get started?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="border-t border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-300">Sign up for a free account and follow the onboarding guide.</p>
      </details>
      <details class="group rounded-lg bg-gray-50 dark:bg-gray-900/50 overflow-hidden">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
          <span>What payment methods do you accept?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="border-t border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-300">We accept all major credit cards and PayPal.</p>
      </details>
      <details class="group rounded-lg bg-gray-50 dark:bg-gray-900/50 overflow-hidden">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors [&::-webkit-details-marker]:hidden">
          <span>Can I cancel anytime?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="border-t border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-300">Yes. Cancel from your account settings. No questions asked.</p>
      </details>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-3xl px-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Frequently asked questions</h2>
    <div class="mt-10 divide-y divide-gray-200 dark:divide-gray-700">
      <details class="group py-5 first:pt-0">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-right font-medium text-gray-900 dark:text-white [&::-webkit-details-marker]:hidden">
          <span>How do I get started?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="mt-3 text-gray-600 dark:text-gray-300">Sign up for a free account and follow the onboarding guide. You can import data or start from a template.</p>
      </details>
      <details class="group py-5">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-right font-medium text-gray-900 dark:text-white [&::-webkit-details-marker]:hidden">
          <span>Can I change my plan later?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="mt-3 text-gray-600 dark:text-gray-300">Yes. Upgrade or downgrade anytime from account settings. Changes take effect immediately.</p>
      </details>
      <details class="group py-5">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-right font-medium text-gray-900 dark:text-white [&::-webkit-details-marker]:hidden">
          <span>Do you offer support?</span>
          <span class="shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180">▼</span>
        </summary>
        <p class="mt-3 text-gray-600 dark:text-gray-300">We offer email support for all plans. Pro and Enterprise include priority support.</p>
      </details>
    </div>
  </div>
</section>