Glass Pricing Trio

Create an ultra-premium pricing section with three glass cards, inspired by Stripe, Linear and Apple.

Layout:
- Centered header block: pill badge "PRICING" with a star icon, huge two-line headline ("Simple pricing," / "powerful results." with the second line in a violet-to-pink gradient), a two-line subtitle, then the billing toggle
- A three-column grid below: Starter, Professional (highlighted, centered), Enterprise
- The middle card is visually elevated: brighter glass, violet border, outer violet glow, slight scale (1.04) and a floating "Most Popular" pill sitting above the card border
- Under the grid, a full-width glass trust bar split in 4 columns with icon + title + one line of text

Global art direction:
- Deep black canvas (#0a0a0f) with a subtle violet radial light leak behind the main content
- Glassmorphism surfaces: rgba(255,255,255,0.05) fill, 1px rgba(255,255,255,0.09) border, backdrop-blur(28px), inner top highlight
- Violet (#8b5cf6) to magenta (#d946ef) gradients reserved for the primary plan only
- Tiny star-dust particles and long soft light streaks in the far background, extremely low opacity
- Everything must feel expensive, calm and cinematic — never neon, never flashy

Content (French or English, keep it consistent):
- Section eyebrow pill with an icon
- Two-line headline where the second line is gradient violet
- One short supporting sentence
- Plans with: icon tile, name, one-line positioning, big price, period, feature list with circular check icons, CTA button, small reassurance line under the CTA
- A bottom trust bar with 4 items: money-back guarantee, secure payments, 24/7 support, social proof

Interactions:
- Billing toggle (Monthly / Yearly / Lifetime) with a sliding violet pill using layoutId and spring physics
- Prices must animate between billing modes with an animated number counter (no instant swap)
- A "Save up to 35%" badge that pops in with a spring when yearly is selected
- Each card lifts on hover with a violet glow and a cursor-tracked light reflection across the glass
- Feature rows fade and slide in with a 0.05s stagger when the section enters the viewport
- The recommended plan pulses very slowly (scale 1 -> 1.01) and carries a floating "Most Popular" badge

Do not:
- Use flat cards without depth
- Use fast, bouncy or distracting animation
- Ship non-responsive layouts or clipped badges (badges must live outside overflow-hidden containers)


---

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.