feat(docs): redesign FAQ with hero, section chips, icons, and live search

The FAQ was functional but plain after the previous accordion pass --
just a list of cards under generic section headings. Rebuilds it as a
dedicated page with its own visual identity:

- Hero block with gradient background, eyebrow chip, large title, and
  a pill-shaped search input that filters questions live
- Six topic chips below the hero (Getting started, Frameworks,
  Customization, Versions, Licensing, Troubleshooting) -- click to
  smooth-scroll to that section. Each chip has a tone-specific hover
  accent (primary, info, warning, success, secondary, danger).
- Per-section header cards with a colored left border + tinted icon
  square. Icons mirror the chips, and the tone accent cascades into
  the FAQ-item question icons within that section.
- Each Q/A keeps the native <details>/<summary> accordion but now
  includes a question-mark icon prefix and a chevron suffix that
  rotates 180deg when open. Subtle translate-x on hover, hairline
  shadow when expanded.
- Live search: filters questions in real time, hides empty sections,
  auto-opens matching items so the user sees the context, and shows
  an empty-state message + clear button when nothing matches.
- Bottom CTA card with a chat icon, "Still need help?" heading, and
  two action buttons (GitHub Discussions + browse docs).

The FAQ content lives inline in faq.astro as a typed `Section[]` data
structure (replaces the old MDX import) which made the per-item icons
and the section-tone variants straightforward to wire up.

CSS budget bumped 48->50 KB unminified and 44->46 KB minified to fit
the new FAQ styles. Other pages unaffected -- the entire FAQ stylesheet
is scoped under body.faq-page.