Bento Stats Cards

# Bento Stats Card Components

## Overview
Create a stunning, production-ready bento stats card components with a bento grid aesthetic. The design should feel like an Awwwards-winning site: bold typography, generous whitespace, smooth scroll-triggered animations and a cohesive design system.

## Design System
- **Typography**: Use a modern grotesque font (e.g. Inter or Geist). Display headings at 64-96px with -0.03em letter-spacing, body at 16-18px.
- **Colors**: Dark theme base (#0A0A0A background, #FAFAFA text) with a single vibrant accent color. Use subtle zinc-800 borders.
- **Spacing**: 8px base grid. Sections padded 120px vertical on desktop, 64px on mobile.
- **Radius**: 12px for cards, 8px for buttons, 9999px for pills.

## Layout & Sections
1. **Navbar**: Sticky, glassmorphism backdrop-blur, logo left, links center, CTA button right. Shrinks on scroll.
2. **Hero**: Full-viewport. Oversized headline with word-by-word reveal animation, subtitle, dual CTA buttons, social proof logos row.
3. **Features**: Bento grid layout (3 columns, mixed card sizes) with icon, title, description and subtle hover lift.
4. **Testimonials**: Horizontal marquee, pause on hover, avatar + quote cards.
5. **Pricing**: 3 tiers, middle tier highlighted with gradient border and "Most Popular" badge.
6. **FAQ**: Accordion with smooth height animation.
7. **CTA**: Full-width section with animated gradient background.
8. **Footer**: 4 columns, newsletter input, social icons.

## Animations
- Use GSAP ScrollTrigger for section reveals (fade-up 40px, stagger 0.08s).
- Framer Motion for micro-interactions: buttons scale 0.97 on tap, cards lift 4px on hover.
- Hero headline: split-text word reveal with 0.6s duration, power3.out easing.
- Respect prefers-reduced-motion.

## Tech Requirements
- Next.js 15 App Router + TypeScript + TailwindCSS.
- Fully responsive: mobile-first, test at 375px / 768px / 1440px.
- Semantic HTML, WCAG AA contrast, alt text on all images.
- Lighthouse performance score 90+.