Bento Feature Grid

# Bento Feature Grid — Landing Page Section

## Goal
Build a 6-cell bento grid features section (4 cols × 2 rows on desktop): one 2×2 hero cell, one 2×1 wide cell, four 1×1 cells. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Cells: rounded-2xl, bg-white/[0.03], border-white/[0.08]; inner padding 24-28px; title 18px semibold + 1-2 line muted description pinned bottom.
- Each cell's upper area holds a live UI fragment, not an icon: hero cell = mini dashboard with 2 animated bars + sparkline; wide cell = fake terminal line typing; small cells = toggle flipping, avatar stack expanding, notification badge counting, progress ring filling.
- Fragments are built with divs/SVG — no images, no lorem screenshots.
- Grid collapses 2-col tablet / 1-col mobile, hero cell always first.

## Motion Spec
- Cells reveal with 70ms stagger scale 0.97→1 + fade.
- Hover: hovered cell border brightens to accent at 40%, siblings dim to 70% opacity — spotlight choreography.
- Each fragment loops its micro-animation on a 4-8s randomized cycle so the grid always has one thing moving, never everything.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<BentoGrid features={BentoFeature[]} accent?: string />` — fragment chosen via `variant` enum per feature.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.