Build a single-page fullscreen hero section for a brand call

English Prompt

Build a single-page fullscreen hero section for a brand called "SynapseX" using React, Vite, Tailwind CSS v4, and Framer Motion (`motion/react`). Use the `lenis` library for smooth scrolling on desktop. The page is a dark, cinematic fullscreen video-backed landing with scroll-driven animations and text scramble effects.

--- **Tech stack:**
- React 19, Vite, TypeScript
- Tailwind CSS v4 (via `@tailwindcss/vite` plugin)
- `motion` (Framer Motion v12+, imported from `motion/react`)
- `lenis` for smooth scroll on desktop only
- Font: "Space Mono" monospace from Google Fonts (used for ALL font families: sans, serif, mono)
- Bootstrap Icons CDN for the Apple icon (`bi bi-apple`)

--- **Font / CSS setup (`index.css`):**
- Import Google Fonts: `Space Mono` (400, 700, italic variants)
- Import Bootstrap Icons CSS from jsdelivr CDN
- Import `tailwindcss`
- Override all Tailwind font theme vars (`--font-sans`, `--font-serif`, `--font-inter`, `--font-mono`) to "Space Mono", monospace
- `html, body`: font-family var(--font-sans), bg black, color white, no margin/padding, overflow-x hidden, overflow-y auto
- Lenis compatibility classes (`.lenis.lenis-smooth`, `.lenis.lenis-stopped`, `.lenis.lenis-scrolling iframe`)

--- **Background video (CRITICAL - read carefully):**
- URL: `https://t.co/cvkGVS5C0E`
- Rendered in a `LiquidVideoCanvas` component: a fixed fullscreen `<video>` element (loop, muted, playsInline, preload="auto", object-cover)
**IMPORTANT - NO DARK OVERLAY:** The video container must have NO dark overlay, NO semi-transparent black layer, NO `bg-black/50`, NO `::after` pseudo-element with opacity, and NO gradient overlay on top of the video. The video should be fully visible at its natural brightness. The only container background should be `bg-black` on the wrapper div itself (visible only before the video loads). Do NOT add any darkening filter, overlay div, or tint on top of the video.
**IMPORTANT - Z-INDEX LAYERING (must follow exactly):**
- Video container: `fixed inset-0 z-[1]` - this is the LOWEST layer
- Progressive blur: `fixed bottom-0 z-30`
- Main content (text, headings): `z-10` (above video, below header)
- Header: `z-50` (topmost)
- The root wrapper is `relative` with `overflow-x-hidden`. The main content area must NOT have a background color that would obscure the video. The video must always be VISIBLE through the content layers. Do NOT set `bg-black` on any element that sits above the video container.

**Video scroll-scrubbing (CRITICAL - frame seeking logic):**
- The video is NOT autoplayed. Its `currentTime` is driven by scroll progress via requestAnimationFrame with LERP smoothing (factor 0.12).
- **Frame-accurate seeking with `if (!video.seeking)` guard:** Only request a new video frame seek when the browser has completely finished rendering the previous frame. This prevents frame-skipping, jank, and black flashes. The pattern: