Rolling Pricing

# Build: "Rolling Pricing" section

You are a senior creative front-end engineer. Build this pricing section exactly as specified.

## Target stack
React + Tailwind CSS v4 + Framer Motion

## Concept
A dark three-plan pricing section. A monthly/yearly switch has a white pill that slides between the two options. When the price changes, each digit rolls vertically like a mechanical counter. The featured plan has a light that keeps circling its border.

## Content (use verbatim)
- Title (h2, centered): "Pick a plan, change it anytime"
- Plans: Starter ($12/mo), Pro ($39/mo), Scale ($129/mo)
  - Starter: "For side projects and first launches." Features: 3 projects · Core blocks · Community support
  - Pro: "For freelancers shipping every week." Features: Unlimited projects · All blocks and prompts · Figma source · Priority support
  - Scale: "For teams with a design system to feed." Features: Everything in Pro · Team seats · Custom block requests · Private registry
- Button on every card: "Get started"
- Featured plan: **Pro**. It gets a "Most popular" gradient chip, gradient check icons and a gradient button.

## Pricing logic
- Yearly price per month = round(monthly × (1 − 20/100)).
- Under the price, show "Billed monthly" or "Billed yearly".
- The yearly option shows a small chip reading "−20%" in the second accent.

## Layout
- Container max ~1152px. Centered header, then the switch 32px below it.
- Cards: one column on mobile, three columns at ≥768px container width, 20px gap, all the same height.
- On desktop the featured card extends 16px above and below the others.
- Price: 60px semibold with tabular numbers, a muted currency before it and "/ mo" after it.

## Design tokens
- Background: #08080C · Card surface: #121219
- Accent: #FF6B3D · Second accent: #FFD23F. Gradient = 90° accent → second accent.
- Radius: 22px. Regular card border: 1.5px, white at 8%.

## Motion
1. **Switch pill:** a single white pill element shared between the two options, animated with a spring (stiffness 400, damping 32). In Framer Motion, use a shared `layoutId`.
2. **Rolling digits:** split the price into digits and key them by place value from the right. On change, the old digit exits to y −100% and the new one enters from y 100%, with a spring (stiffness 320, damping 28) and 50ms stagger per digit. Each digit sits in an overflow-hidden slot that is 1.1em tall.
3. **Circling border light (featured card only):** the card has 1.5px padding. Behind the surface, a square at 250% of the card width is centered and rotates 360° linearly every 4s, filled with `conic-gradient(from 0deg, transparent 0 55%, accent 75%, accent2 88%, transparent)`. The card clips it.
4. **Entrance:** cards fade up 30px, staggered 0.1s. Checklist items slide in 10px from the left, staggered 60ms.
5. **Buttons:** scale 1.02 on hover and 0.97 on press.

## Accessibility
- The switch is a radiogroup with `aria-checked`.
- The rolling number exposes its full value through `aria-label`.
- Respect `prefers-reduced-motion`.

## Deliverable
One self-contained component with a config object holding every value above.