Nucleus — AI / LLM theme prompt

You are a senior creative front-end & WebGL engineer who ships award-winning (Awwwards / FWA level) landing pages. Build a premium, sellable landing-page theme called "Nucleus" for AI / LLM startups. This is a reusable template that a founder will buy and rebrand, so keep ALL copy, colors, icons, pricing, metrics, and WebGL parameters in a single config file (`/config/theme.ts`).

## Tech Stack Requirements
- Next.js 14 (App Router) + TypeScript
- Tailwind CSS (v3 syntax) for layout and styling
- Three.js via `@react-three/fiber`, `@react-three/drei`, and `@react-three/postprocessing` for the signature hero orb
- `framer-motion` for scroll, spring physics, and reveal animations
- `lenis` for smooth scrolling
- `lucide-react` for icons
- No external image assets or API calls required. Fully self-contained.

---

## Design System & Theme Config (`/config/theme.ts`)
- **Mood**: Dark, cinematic, intelligent, ultra-expensive.
- **Background**: Near-black `#060507` with a fixed vignette overlay (`::after` radial gradient).
- **Color Palette**: 
  - Neon Crimson Red: `#FF0055`
  - Electric Hot Pink: `#EC4899`
  - Deep Violet: `#7C3AED`
- **Surfaces**: Glassmorphic cards with `rgba(255,255,255,0.04)` fill, `rgba(255,255,255,0.08)` border, backdrop blur, 3D cursor tilt, and dynamic cursor spotlight tracking.
- **Typography**: Inter for body text; tight display font (`-0.03em` or `-0.04em` tracking) for headlines.
- **Corner Radius**: 18px (`rounded-glass`).

---

## The Signature Element — The Nucleus Orb (`/components/three/`)
A GPU particle system rendered with custom GLSL shaders inside `@react-three/fiber`:

1. **Geometry & Density**:
   - Core Fibonacci sphere with **12,000 points** placed at radius R = 1.6.
   - Concentric outer orbital particle dust ring (**2,500 points**) rotating around the core.

2. **Custom GLSL Shaders**:
   - **Vertex Shader**: Multi-layered 3D Simplex Noise (`snoise`) with micro-surface displacement (amplitude capped at `0.06` so the orb retains a **crisp, glowing spherical ball shape** without warping out of shape). Includes liquid mouse wave interaction (`uMouse` uniform).
   - **Fragment Shader**: Multi-tone gradient color ramp mixing `#FF0055` → `#EC4899` → `#7C3AED` based on noise and depth. Smooth circular particle alpha fade (`smoothstep(0.5, 0.0, dist)`) with `AdditiveBlending`.

3. **Motion & Interactivity**:
   - Smooth liquid mouse interpolation (`0.04` lerp step in frame loop).
   - Scroll-synced spring physics (`useSpring` in `app/page.tsx` with stiffness `80`, damping `25`) to scale the orb down (1 → 0.48) and drift it upper-right as the user scrolls.

4. **Post-Processing & Fallback**:
   - `@react-three/postprocessing` `EffectComposer` + `Bloom` (`luminanceThreshold: 0.2`, `intensity: 1.8`, `enableNormalPass={false}`).
   - Disable Bloom on mobile/reduced-motion.
   - CSS radial-gradient fallback (`OrbFallback.tsx`) if WebGL is unavailable.

---

## Page Sections Breakdown (11 Standalone Components in `/components/sections/`)

1. **Sticky Navbar (`Navbar.tsx`)**:
   - Logo left with gradient mark, nav links center with crimson underline hover wipes, glowing pill CTA right, mobile drawer.
   - Shrinks and adds backdrop blur on scroll using `useMotionValueEvent`.

2. **Hero Section (`Hero.tsx`)**:
   - Glowing badge pill (`"Nucleus Engine v3.4 Active"`), display headline with crimson-pink gradient text, subhead, dual glowing CTAs.
   - Live telemetry indicators (`Sub-20ms SLA`, `SOC2 Type II`) and trusted brand marquee preview.

3. **Logo Marquee (`LogoMarquee.tsx`)**:
   - Infinite horizontal scroll of grayscale brand wordmarks with gradient edge fades, pausing on hover.

4. **Feature Grid (`FeatureGrid.tsx`)**:
   - 3-column grid of `GlassCard`s with glowing pink Lucide icon badges and 3D cursor tilt.

5. **Bento Showcase (`BentoShowcase.tsx`)**:
   - Asymmetric bento grid featuring:
     - Crimson terminal typewriter streaming TypeScript AI code.
     - Auto Model Routing toggle switch.
     - Real-time live token counter incrementing in real time.
     - Dynamic 10-bar latency graph with animated height keyframes.
     - Multimodal Agent progress meter. Zero green tones!

6. **How It Works (`HowItWorks.tsx`)**:
   - 3 scroll-pinned steps with glowing crimson step badges. Vertical progress line fills with a Crimson-to-Pink gradient on scroll.

7. **Metrics Band (`MetricsBand.tsx`)**:
   - Animated count-up text gradient numbers (`18ms`, `99.99%`, `25B+`) inside glass cards.

8. **Pricing (`Pricing.tsx`)**:
   - 3 tiers with Monthly/Annual billing toggle (save 20%).
   - Middle plan elevated with neon crimson border aura and `"Most Popular"` badge. Hot pink feature checkmarks.

9. **FAQ (`FAQ.tsx`)**:
   - Accordion with glowing crimson borders when expanded, smooth `framer-motion` height transitions, rotating chevrons.

10. **Big CTA (`BigCTA.tsx`)**:
    - Giant radial crimson aura background, huge display headline, glowing primary button.

11. **Footer (`Footer.tsx`)**:
    - Top rule with `from-transparent via-nucleus-crimson to-transparent`, multi-column links, social hover highlights.

---

## Smooth Scroll & Motion System
- Wrap `children` in layout with a Lenis provider (`SmoothScrollProvider.tsx`) configured with duration `1.4` and exponential easing curve `(t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))`.
- All scroll reveals use staggered blur-up + slide variants (`fadeBlurUp` in `lib/motion.ts`).
- Respect `prefers-reduced-motion` everywhere.

---

## Implementation Steps
1. Scaffold Next.js 14 project, install dependencies (`@react-three/fiber`, `@react-three/drei`, `@react-three/postprocessing`, `three`, `framer-motion`, `lenis`, `lucide-react`).
2. Create `/config/theme.ts` with all text, colors, metrics, and orb configuration.
3. Configure `globals.css` (with vignette overlay `::after`) and `tailwind.config.ts` (with `nucleus-crimson`, `nucleus-pink`, `nucleus-violet`).
4. Build `NucleusOrb.tsx`, `Scene.tsx`, and `OrbFallback.tsx`.
5. Build UI components (`Button.tsx`, `GlassCard.tsx`, `SectionHeading.tsx`, `RevealWrapper.tsx`, `AnimatedCounter.tsx`).
6. Build all 11 page section components under `/components/sections/`.
7. Wire page assembly in `app/page.tsx` with `useSpring` progress for orb scaling and dynamic `Scene` import (`ssr: false`).
8. Run `npm run build` to verify clean build.