FAQ Accordion

Create an accessible FAQ section with instant search and topic filters as ONE self-contained snippet (HTML + <style> + <script>, every class prefixed "faq-").

CONTENT
- Business: [Your business name]
- Write 7 realistic FAQs for my business across 4 topics: Orders, Payments, Delivery and Returns (mention ₹ amounts and Indian payment methods like UPI where relevant). I'll edit them later.
- At the bottom, a "Still have a question?" strip with a WhatsApp button for [Your WhatsApp number]

BEHAVIOUR & DESIGN
- A large search input with a magnifier icon; typing filters questions and answers live, highlights matches with <mark> and automatically opens matching answers
- Topic pills (All + the 4 topics) that work together with the search
- Only one answer open at a time, a smooth height animation using grid-template-rows (0fr → 1fr), a "+" icon that rotates into "×", and aria-expanded on every question button
- A friendly empty state when nothing matches
- Generate FAQPage JSON-LD from the questions on the page with JavaScript
- White cards (18px radius) on a soft gradient, "Outfit" for the heading and "Inter" for text, accent colour #2563eb

Return the snippet in one code block.