FAQ Accordion Pro

# FAQ Accordion Pro — Landing Page Section

## Goal
Build an FAQ section: sticky intro column left (title, sub, contact card), accordion list right — the layout serious products use. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Left (sticky, top-24): 'Questions? Answers.' headline, muted sub, then a contact card: small avatar trio, 'Still stuck? We reply in ~2h', 'Chat with us' button.
- Right: 6-8 items; each row: question 16px medium, plus-icon right that rotates to ×; answer 15px muted, max-w-prose, may contain links and a code-styled span.
- Dividers: border-b hairlines between items; no card boxes — typographic, clean.
- Open item: question color shifts to accent, background tints 2% — subtle current-state.
- Mobile: intro column stacks above, sticky disabled.

## Motion Spec
- Height animation must be measured (auto-height via layout animation or measured max-height) — zero jump, 300ms ease-[cubic-bezier(0.4,0,0.2,1)].
- Plus→× rotation 45° synced exactly to open state.
- Deep-link: on mount, if URL hash matches an item id, open it and smooth-scroll with a brief highlight flash.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<FaqSection items={{q,a,id}[]} single?: boolean />` — `single` collapses others on open (default true).

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.