平衡

构建一个全屏单页 React + TypeScript + Vite + Tailwind CSS Hero 区域，在循环播放的背景视频上呈现“液态玻璃”美学效果。使用 `lucide-react` 提供图标。不要使用其他 UI 库。

**字体与全局 CSS（`src/index.css`）：**
- 从 Google Fonts 导入 Geist：`https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap`
- 通过 `* { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }` 在全局应用 `Geist`
- 包含 `@tailwind base; @tailwind components; @tailwind utilities;`
- 定义一个 `.liquid-glass` 类：
  - `background: rgba(255,255,255,0.01);`
  - `background-blend-mode: luminosity;`
  - `backdrop-filter: blur(4px);`，外加 `-webkit-backdrop-filter`
  - `border: none;`
  - `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);`
  - `position: relative; overflow: hidden;`
- 添加 `.liquid-glass::before` 伪元素，通过遮罩合成创建渐变边框：
  - `content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;`
  - `background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);`
  - `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;`

**组件（`src/App.tsx`）：**
- 从 `lucide-react` 导入：`ChevronDown`、`Infinity`、`Menu`、`X`。从 React 导入 `useState`。
- 常量 `BG_VIDEO = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_230229_7c9bc431-46cf-489a-948d-e8144d8eb5d4.mp4'`
- `navLinks` 数组：`{ label: '首页', active: true }`、`{ label: '身心健康', dropdown: true }`、`{ label: '日常计划' }`、`{ label: '我们的团队' }`。
- 通过 `useState(false)` 创建 `menuOpen` 状态。

**布局：**
- 根元素：`<div class="relative w-full h-screen overflow-hidden">`。
- 背景 `<video>` 使用绝对定位，`w-full h-full object-cover`、`autoPlay muted loop playsInline`、`src={BG_VIDEO}`。

**导航栏**（`absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-5 sm:px-8 py-5`）：
- Logo（左侧）：flex，使用 `gap-2 text-white font-medium text-base`。`<Infinity size={22} strokeWidth={1.5} />` 后接 `<span>Equilibrium</span>`。
- 导航胶囊（中间，`hidden md:flex`）：`liquid-glass items-center gap-1 rounded-xl px-2 py-2`。映射 `navLinks`。每个按钮：`flex items-center gap-0.5 px-3 py-1.5 rounded-md text-sm transition-colors`；激活项使用 `bg-white/15 text-white`，其他项使用 `text-white/70 hover:text-white`。下拉项渲染 `<ChevronDown size={13} class="mt-px" />`。
- CTA（右侧，`hidden md:flex items-center gap-3`）：
  - “登录”：`liquid-glass text-white text-sm font-medium px-4 py-2.5 rounded-full hover:bg-white/5 transition-colors`
  - “立即开始”：`bg-white text-black text-sm font-medium px-4 py-2.5 rounded-full hover:bg-white/90 transition-colors`
- 移动端开关（`md:hidden`）：`liquid-glass text-white p-2 rounded-lg`；打开时显示 `X`，否则显示 `Menu`（size 18）。

**移动端菜单**（当 `menuOpen` 为 true 时）：`absolute top-[72px] left-4 right-4 z-30 md:hidden liquid-glass rounded-2xl p-4 flex flex-col gap-1`。导航链接与按钮使用相同内容，样式为 `flex items-center justify-between w-full px-4 py-3 rounded-lg text-sm`。底部 CTA 行：`flex gap-2 mt-2 pt-3 border-t border-white/10`，包含两个 `flex-1` 按钮（“登录”、“立即开始”），样式与桌面端一致。

**Hero 内容（左下方）** `absolute bottom-0 left-0 z-20 px-6 sm:px-12 pb-10 sm:pb-16 max-w-2xl`：
- `<h1>`：`text-white text-4xl sm:text-5xl lg:text-6xl font-medium leading-tight tracking-tight mb-4` — 文本：`每天活得更好，感受完整自我`。
- `<p>`：`text-white/60 text-sm leading-relaxed mb-7 max-w-md` — 文本：`与专为你的旅程打造的伙伴一起掌控自身感受——建立日常计划、追踪成长，并获得个性化洞察，让每一天的生活更加稳定、更有活力。`
- 按钮行 `flex flex-wrap items-center gap-3`：
  - “从今天开始”：`bg-white text-black text-sm sm:text-base font-medium px-6 sm:px-7 py-3 rounded-full hover:bg-white/90 transition-colors`
  - “了解方法”：`liquid-glass text-white text-sm sm:text-base font-medium px-6 sm:px-7 py-3 rounded-full hover:bg-white/5 transition-colors`

**动画／交互：**所有按钮均使用 Tailwind `transition-colors`；液态玻璃效果使用 `backdrop-filter: blur(4px)` 和具有动态观感的渐变边框伪元素。不要添加额外的关键帧动画。背景视频本身提供动态效果。

**依赖项：**`react`、`react-dom`、`lucide-react`、`tailwindcss`、`vite`、`@vitejs/plugin-react`、TypeScript。Tailwind 使用默认内容 glob，覆盖 `./index.html` 和 `./src/**/*.{ts,tsx}`。