Floating 3D Pricing Cards

Create a cinematic pricing section where the cards float in 3D space.

Layout:
- Left column: eyebrow "FLEXIBLE PRICING", a two-line headline with "your ambition." in a violet-to-pink gradient, a two-line subtitle, the billing toggle with a green "Save up to 35%" tab floating above it, three benefit rows with glass icon tiles, then an avatar stack with "Trusted by 10,000+ businesses worldwide"
- Right: four pricing cards arranged on a shared 3D perspective plane (perspective: 1600px), each rotated slightly on Y and staggered on Z so they overlap like fanned playing cards. The Professional card is the tallest, most forward and brightest, with a floating "Most Popular" pill and a green "14-day free trial" chip beneath it
- Bottom: a wide glass bar with accepted payment logos and a "Contact sales" CTA

Signature effects:
- Small 3D spheres (violet and blue, with specular highlights) float in the background at different depths, drifting slowly
- A thin luminous elliptical orbit passes behind and in front of the cards
- The whole card group tilts with the cursor (max 6deg), each card reacting with a different intensity for real parallax
- On hover, a card comes forward (translateZ), straightens toward 0deg and gains a violet rim glow while the others dim slightly

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.