FAQ Page

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  background: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  min-height: 100vh;
}

.faq-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* Hero */
.faq-hero {
  text-align: center;
  padding: 64px 0 48px;
}

.faq-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin-bottom: 24px;
}

.search-wrapper {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  background: #fff;
  color: #1e293b;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Category Cards */
.category-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
}

.category-card:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
  transform: translateY(-2px);
}

/* FAQ Sections */
.faq-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

/* Accordion */
.accordion-item {
  border-bottom: 1px solid #f1f5f9;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1e293b;
  text-align: left;
  line-height: 1.5;
  transition: color 0.15s ease;
}

.accordion-trigger:hover {
  color: #3b82f6;
}

.accordion-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 16px;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  background: #94a3b8;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.accordion-icon::before {
  width: 14px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.accordion-icon::after {
  width: 2px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.accordion-item.open .accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-item.open .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 4px 18px;
  color: #64748b;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Hidden state for search */
.accordion-item.search-hidden {
  display: none;
}

.faq-section.section-hidden {
  display: none;
}

/* No Results */
.no-results {
  text-align: center;
  padding: 48px 24px;
  color: #64748b;
  font-size: 1rem;
}

.no-results-link {
  display: inline-block;
  margin-top: 8px;
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.no-results-link:hover {
  text-decoration: underline;
}

/* Contact CTA */
.contact-cta {
  text-align: center;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 48px 32px;
  margin-top: 24px;
}

.contact-cta h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.contact-cta p {
  color: #64748b;
  font-size: 0.9375rem;
  margin-bottom: 24px;
}

.contact-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.contact-btn-email {
  background: #0f172a;
  color: #fff;
}

.contact-btn-email:hover {
  background: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.contact-btn-chat {
  background: #fff;
  color: #0f172a;
  border: 1.5px solid #e2e8f0;
}

.contact-btn-chat:hover {
  border-color: #94a3b8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Responsive */
@media (max-width: 640px) {
  .faq-hero {
    padding: 40px 0 32px;
  }

  .faq-hero h1 {
    font-size: 1.75rem;
  }

  .category-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .category-card {
    padding: 18px 12px;
  }

  .contact-cta {
    padding: 32px 20px;
  }
}

(function () {
  var triggers = document.querySelectorAll(".accordion-trigger");
  var searchInput = document.querySelector(".search-input");
  var sections = document.querySelectorAll(".faq-section");
  var noResults = document.querySelector(".no-results");
  var categoryCards = document.querySelectorAll(".category-card");

  // Accordion toggle
  triggers.forEach(function (trigger) {
    trigger.addEventListener("click", function () {
      var item = trigger.closest(".accordion-item");
      var section = trigger.closest(".accordion");
      var isOpen = item.classList.contains("open");

      // Close other items in the same section
      section.querySelectorAll(".accordion-item.open").forEach(function (openItem) {
        if (openItem !== item) {
          openItem.classList.remove("open");
        }
      });

      if (isOpen) {
        item.classList.remove("open");
      } else {
        item.classList.add("open");
      }
    });
  });

  // Search filter
  searchInput.addEventListener("input", function () {
    var query = searchInput.value.toLowerCase().trim();
    var totalVisible = 0;

    sections.forEach(function (section) {
      var items = section.querySelectorAll(".accordion-item");
      var sectionVisible = 0;

      items.forEach(function (item) {
        var question = item
          .querySelector(".accordion-trigger span:first-child")
          .textContent.toLowerCase();
        var answer = item.querySelector(".accordion-content p").textContent.toLowerCase();

        if (!query || question.indexOf(query) !== -1 || answer.indexOf(query) !== -1) {
          item.classList.remove("search-hidden");
          sectionVisible++;
        } else {
          item.classList.add("search-hidden");
          item.classList.remove("open");
        }
      });

      if (sectionVisible === 0) {
        section.classList.add("section-hidden");
      } else {
        section.classList.remove("section-hidden");
      }

      totalVisible += sectionVisible;
    });

    if (totalVisible === 0 && query) {
      noResults.style.display = "block";
    } else {
      noResults.style.display = "none";
    }
  });

  // Category card click - scroll to section
  categoryCards.forEach(function (card) {
    card.addEventListener("click", function () {
      var targetId = card.getAttribute("data-target");
      var targetSection = document.getElementById(targetId);
      if (targetSection) {
        // Clear search
        searchInput.value = "";
        sections.forEach(function (section) {
          section.classList.remove("section-hidden");
          section.querySelectorAll(".accordion-item").forEach(function (item) {
            item.classList.remove("search-hidden");
          });
        });
        noResults.style.display = "none";

        targetSection.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    });
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FAQ - Help Center</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="faq-page">
    <!-- Hero -->
    <header class="faq-hero">
      <h1>How can we help?</h1>
      <div class="search-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" class="search-input" placeholder="Search for answers..." />
      </div>
    </header>

    <!-- Category Cards -->
    <div class="category-cards">
      <button class="category-card" data-target="general">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
        <span>General</span>
      </button>
      <button class="category-card" data-target="billing">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
        <span>Billing</span>
      </button>
      <button class="category-card" data-target="technical">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        <span>Technical</span>
      </button>
      <button class="category-card" data-target="account">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>Account</span>
      </button>
    </div>

    <!-- FAQ Sections -->
    <div class="faq-sections">
      <!-- General -->
      <section class="faq-section" id="general">
        <h2 class="section-title">General</h2>
        <div class="accordion">
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>What is this product?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Our product is an all-in-one platform that helps teams collaborate, manage projects, and track progress in real time. It combines task management, communication, and analytics into a single workspace that scales with your team.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>How do I get started?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Getting started is simple. Sign up for a free account, create your first workspace, and invite your team members. Our onboarding wizard will walk you through the key features and help you set up your first project in under five minutes.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>Is there a free trial?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Yes, we offer a 14-day free trial of our Pro plan with no credit card required. You get full access to all features during the trial period. At the end, you can choose to upgrade or continue with our generous free tier.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>What platforms do you support?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>We support all major platforms including web browsers (Chrome, Firefox, Safari, Edge), desktop apps for macOS and Windows, and mobile apps for iOS and Android. All platforms sync in real time so your data is always up to date.</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Billing -->
      <section class="faq-section" id="billing">
        <h2 class="section-title">Billing</h2>
        <div class="accordion">
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>How does pricing work?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>We offer three plans: Free, Pro, and Enterprise. The Free plan includes up to 5 users and basic features. Pro is billed per user per month and includes advanced analytics and integrations. Enterprise pricing is custom and includes dedicated support and SLAs.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>Can I change my plan?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Absolutely. You can upgrade or downgrade your plan at any time from your account settings. When upgrading, you only pay the prorated difference for the rest of your billing cycle. Downgrades take effect at the start of your next billing period.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>What payment methods do you accept?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>We accept all major credit and debit cards (Visa, Mastercard, American Express), as well as PayPal. Enterprise customers can also pay via invoice with NET 30 terms. All payments are securely processed through Stripe.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>How do I cancel my subscription?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>You can cancel your subscription at any time from your billing settings. Your account will remain active until the end of your current billing period. We do not charge cancellation fees, and you can export all your data before your account transitions to the free plan.</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Technical -->
      <section class="faq-section" id="technical">
        <h2 class="section-title">Technical</h2>
        <div class="accordion">
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>What are the system requirements?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>For the web app, any modern browser released in the last two years will work. Desktop apps require macOS 12 or later, or Windows 10 and above. Mobile apps support iOS 16+ and Android 12+. We recommend at least 4 GB of RAM for the best experience.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>How do I integrate the API?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Our REST API uses standard HTTP methods and returns JSON responses. You can generate an API key from your account settings and use it with Bearer token authentication. Full documentation with examples in cURL, Python, and JavaScript is available in our developer portal.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>Is there rate limiting?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Yes, our API enforces rate limits to ensure fair usage. Free plans are limited to 100 requests per minute, Pro plans get 1,000 per minute, and Enterprise plans have configurable limits. Rate limit headers are included in every response so you can monitor your usage.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>Do you support SSO?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Single Sign-On is available on our Enterprise plan. We support SAML 2.0 and OpenID Connect protocols, and integrate with popular identity providers like Okta, Azure AD, and Google Workspace. Our team will help you configure SSO during onboarding.</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Account -->
      <section class="faq-section" id="account">
        <h2 class="section-title">Account</h2>
        <div class="accordion">
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>How do I reset my password?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Click the "Forgot password" link on the login page and enter your email address. You will receive a reset link within a few minutes. The link expires after 24 hours for security. If you do not see the email, check your spam folder or contact support.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>Can I have multiple users on one account?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Yes, all plans support multiple users. The Free plan allows up to 5 team members, while Pro and Enterprise plans have no user limits. Each user gets their own login credentials, and you can assign roles and permissions to control access levels.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>How do I delete my account?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>You can request account deletion from the Account Settings page under the Privacy section. We will process your request within 48 hours and permanently remove all your data within 30 days. Please note that this action is irreversible, so make sure to export any data you want to keep.</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-trigger">
              <span>How do I export my data?</span>
              <span class="accordion-icon"></span>
            </button>
            <div class="accordion-content">
              <p>Go to Account Settings and click "Export Data." You can export your projects, tasks, and files in JSON or CSV format. The export is generated in the background and you will receive an email with a download link once it is ready, usually within a few minutes.</p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- No Results -->
    <div class="no-results" style="display: none;">
      <p>No matching questions found.</p>
      <a href="#contact" class="no-results-link">Contact our support team</a>
    </div>

    <!-- Contact CTA -->
    <section class="contact-cta" id="contact">
      <h2>Still need help?</h2>
      <p>Our support team is available Monday through Friday, 9 AM to 6 PM EST.</p>
      <div class="contact-buttons">
        <a href="mailto:support@example.com" class="contact-btn contact-btn-email">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          Email Support
        </a>
        <a href="#" class="contact-btn contact-btn-chat">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          Live Chat
        </a>
      </div>
    </section>
  </div>

  <script src="script.js"></script>
</body>
</html>