Premium Particle Background

Create a premium particle background section.

Requirements:
- Multiple layers of small glowing particles (violet #8b5cf6)
- 3 depth layers with different sizes and speeds (parallax)
- Slow continuous flowing motion, wave-like paths
- Soft glow via CSS box-shadow / radial-gradient
- Deep black base (#0a0a0f)
- Canvas 2D for particles (optimized: max 200 particles)
- Mouse parallax — layers shift slightly with cursor
- Fully responsive
- 60fps on desktop, 30fps floor on mobile
- Zero jank

Include a centered hero content on top:
- Small pill badge
- Large headline with a colored word
- Short subtitle
- Primary + secondary CTA
- KPI row at the bottom (4 stats)

Feel: cinematic, luxurious, immersive. Inspired by Apple, Rolls-Royce digital, luxury fintech.

---

TECHNICAL SPEC (must be respected)

Stack:
- React 18 + TypeScript (strict), Tailwind CSS, Framer Motion
- No extra animation library, no canvas unless explicitly required

Design tokens:
- Base background #0a0a0f, surfaces rgba(255,255,255,0.04)
- Borders rgba(255,255,255,0.08), primary violet #8b5cf6, secondary #a855f7
- Radius 20-28px, backdrop-blur(24px), inner highlight inset 0 1px 0 rgba(255,255,255,0.12)
- Typography: tight tracking on headings (-0.02em), 15-16px body, muted text at 60% opacity

Motion rules:
- Entrance: opacity 0 -> 1, y 24 -> 0, duration 0.7s, ease [0.16, 1, 0.3, 1]
- Stagger children by 0.06s, trigger with useInView({ once: true, margin: "-80px" })
- Hover: translateY(-6px) + soft violet glow, 250ms
- Animate only transform, opacity and filter. 60fps, will-change on animated layers
- Respect prefers-reduced-motion: disable loops, keep final states

Quality bar:
- Fully responsive (mobile-first, no horizontal scroll)
- Accessible: semantic HTML, focus-visible rings, contrast AA
- No layout shift, no dummy lorem ipsum, realistic copy
- Clean, reusable, production-ready components with typed props

Deliver the complete code, ready to paste, with no placeholder comments.