Build a full-screen dark hero section landing page in React + Vite + Tailwind CSS v4 + Motion (framer-motion) + Lucide React icons + hls.js. The page should be a single screen (100vh, no scroll) with a black background, a fullscreen background video, a glassmorphism navbar, and a centered hero with an email capture CTA. > > **Dependencies:** `react`, `react-dom`, `motion`, `hls.js`, `lucide-react`, `tailwindcss` v4 with `@tailwindcss/vite`, `@vitejs/plugin-react` > > **Fonts:** Import Google Fonts: > - `Inter` (weights 300, 400, 500, 600) -- used as the base sans-serif font > - `Instrument Serif` (regular and italic) -- used for the hero heading > > **CSS (`index.css`):** > - Import both Google Font URLs, then `@import "tailwindcss";` > - Set `@theme { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; }` > - `:root` variables: `--background: #000000; --foreground: #ffffff;` > - `body`: background-color var(--background), color var(--foreground), font-family var(--font-sans), `-webkit-font-smoothing: antialiased`, `letter-spacing: -0.01em` > - `.liquid-glass` class: `background: rgba(255,255,255,0.01)`, `background-blend-mode: luminosity`, `backdrop-filter: blur(4px)`, `-webkit-backdrop-filter: blur(4px)`, `border: none`, `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`, `position: relative`, `overflow: hidden`. It has a `::before` pseudo-element for a gradient border effect: `padding: 1.4px`, `background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(25
……（完整源码请在站内查看）