Bento Spotlight

# Build: "Bento Spotlight" features section

You are a senior creative front-end engineer. Build this features section exactly as specified. Do not invent extra cards or copy.

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

## Concept
A dark bento grid with four cards. As the cursor moves over a card, a light follows it: a colored glow travels along the 1px card border, and a softer glow lights the card surface. Cards tilt slightly in 3D toward the cursor. Each card has its own small looping illustration, built from code with no images.

## Content (use verbatim)
- Section title (h2): "Everything moves with intent"
- Intro: "Four reasons the work feels finished the moment you paste it in."
- Card 1 (wide): "Live preview": "Every tweak renders instantly, at any screen width."
- Card 2: "Prompt-ready": "Specs your AI agent can follow line by line."
- Card 3: "Any stack": "React today. Vue, Svelte or Flutter next."
- Card 4 (wide): "Motion presets": "Springs and easings tuned so nothing feels robotic."

## Layout
- Max width ~1152px. Title block on the left, max-width ~42rem.
- Grid with a 16px gap:
  - Mobile: one column.
  - At ≥672px container width: two columns, with cards 1 and 4 spanning both.
  - At ≥896px: three columns. Row 1 is card 1 (span 2) then card 2; row 2 is card 3 then card 4 (span 2).
- Each card is min-height 280px: the illustration is centered in the top area, and the title and text sit at the bottom with 24px padding.

## Design tokens
- Section background: #05060F
- Card surface: #0E1124
- Accent: #7C6CFF · Second accent: #2EE6A8
- Corner radius: 24px
- Resting card border: 1px, white at 8%.

## Card mechanics
- **Border glow:** render the card as a 1px-padded wrapper. Inside it, stack a static border layer and a layer whose background is `radial-gradient(320px × 0.6 circle at pointerX pointerY, accent, transparent 70%)`. The inner surface covers everything except the 1px edge, so only the border lights up.
- **Surface glow:** `radial-gradient(320px circle at pointer, accent at ~13% alpha, transparent 70%)` sits over the surface.
- On pointer leave, move the gradient center off-card (for example -1000px).
- **3D tilt:** rotateY = (x/width − 0.5) × 8°, rotateX = −(y/height − 0.5) × 8°, perspective 1000px, smoothed by a spring (stiffness 160, damping 16). Reset to 0 on leave.
- **Entrance:** each card fades up 24px once, when 30% of it is in view (0.7s, ease `[0.22, 1, 0.36, 1]`).

## Illustrations
1. **Orbit (card 1):** three concentric rings (white at 10%), each carrying one glowing dot that rotates at 8s, 12s and 16s, alternating direction. The middle dot uses the second accent. A pulsing accent radial core sits in the center.
2. **Typing lines (card 2):** a mini editor window with three dots and four bars at widths 86/64/92/48%. Each bar loops scaleX 0→1→1→0 from the left edge, staggered 0.35s. The first bar is accent-colored.
3. **Stack cycle (card 3):** a pill that cycles through "React, Vue, Svelte, Flutter, SwiftUI, HTML" every 1.6s. Each word flips in on the X axis (rotateX −80°→0, with blur) and the old word flips out upward, using a spring (stiffness 260, damping 22). Pill border is the second accent at 40%.
4. **Equalizer (card 4):** 28 rounded bars with a gradient from accent to second accent. Each bar loops scaleY from the bottom with its own pseudo-random amplitude and duration (1.6–3s).

## Accessibility
- All illustrations are `aria-hidden`.
- Respect `prefers-reduced-motion`: stop the loops, the tilt and the entrance animations.

## Deliverable
One self-contained component with every value above in a config object at the top.