feat(web): mobile-fit hero tiles + voluminous calmer particle field + FAQ accordion

Three coordinated polish items requested:

1. **Hero step-rotator tiles fit mobile without horizontal scroll.**
   The previous snippets contained a 50+ char `Live at https://notion-x9.mcp.buildmymcpserver.com` URL that overflowed the ~295 px text area on a 375 px viewport. Rewrote all three snippets to be naturally short — same product story, no full URLs. The <pre> drops `overflow-x-auto` and gains `whitespace-pre-wrap break-words` so any token that does exceed the column wraps gracefully instead of forcing a scrollbar.

2. **ParticleHero — more volumetric, slower, steadier at load-in.**
   The "stuttery / too fast" feedback came from two issues compounding: tiny dots (1.8 px on 256-tier, with 0.42 base alpha) gave the eye too few pixels to track between frames, so individual particles read as snapping rather than drifting; and the simplex-noise drift evolved at 0.08 time-scale with 0.045 velocity, fast enough that frame-to-frame deltas exceeded a tracked particle's diameter.

   Render uniforms tuned:
   - `uPointSize` 1.8 → 2.8 (256-tier), 2.4 → 3.6 (128-tier)
   - `uBaseAlpha` 0.42 → 0.60

   Simulation shader tuned:
   - Drift noise time scale 0.08 → 0.045 (the most impactful single change — particles now move at half the previous speed)
   - Drift velocity magnitude 0.045 → 0.028
   - Ring breathing noise time scale 0.35 → 0.22
   - Ring polar-wave time scales 1.2 / 0.7 → 0.7 / 0.42

   Net effect: same number of particles (65k) but each individually larger, brighter, and moving more slowly. The cumulative additive bloom is denser without the jitter that read as visual stutter.

3. **FAQ collapsed into a native `<details>` accordion.**
   Crawlers and screen readers still see every Q+A in the SSR'd HTML — `<details><summary>...</summary><p>answer</p></details>` is the standard semantic pattern for disclosure widgets. Users see one question at a time and expand on demand, which keeps the page from feeling like an endless wall of marketing text below the fold.

   Container narrowed `max-w-6xl` → `max-w-3xl` for accordion typography (long-form prose reads better single-column). The default WebKit disclosure-triangle marker is suppressed with `list-none` + `[&_summary::-webkit-details-marker]:hidden`, and a `lucide-react` `ChevronDown` icon rotates 180° via `group-open:rotate-180` to indicate state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/particle-hero/ParticleField.tsx

@@ -169,11 +169,16 @@ export function ParticleField({ textureSize, motionScale = 1 }: ParticleFieldPro
 
     const renderUniforms = {
       uPositions: { value: rtB.texture },
-      uPointSize: { value: textureSize === 256 ? 1.8 : 2.4 },
+      // Bigger dots + higher base alpha = more volumetric "calm field"
+      // read at the load-in (was 1.8 / 0.42 — read as too thin, looked
+      // stuttery because individual particles were hard to track between
+      // frames). With these values the field has a denser cumulative
+      // glow without any change to the simulation itself.
+      uPointSize: { value: textureSize === 256 ? 2.8 : 3.6 },
       uDpr: { value: dpr },
       uColorCalm: { value: colorCalm },
       uColorHot: { value: colorHot },
-      uBaseAlpha: { value: 0.42 },
+      uBaseAlpha: { value: 0.6 },
     };
     const particleMat = new THREE.ShaderMaterial({
       vertexShader: renderVertex,