Vertical Pricing Timeline

Create a pricing section built as a glowing vertical timeline.

Layout:
- Left sticky column: eyebrow "PRICING JOURNEY", a three-line headline with two violet lines, a subtitle, the Monthly / Yearly / Lifetime toggle, a green savings pill, three benefit rows with icon tiles, a divider, then a 2-column logo wall
- Right column: a vertical glowing line with 4 large circular icon nodes (rocket, chart, layers, crown), each attached to a wide glass pricing card labeled STEP 1 to STEP 4
- Each card: plan name and description on the left, price block on the right (big price, /month, yearly total, green "Save €X" chip), a divider, features in two columns with check icons, and a full-width CTA with an arrow
- Small chevron markers between nodes
- Bottom: 4-item guarantee bar

Signature effects:
- The vertical line fills with a violet gradient as the user scrolls, using useScroll + useTransform on scaleY
- Each node ignites (glow, scale spring) exactly when its card enters the viewport
- Cards slide in from the right with opacity and a slight rotateY, staggered
- CTA arrows translate 4px right on hover

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.