Wellbeing OS

使用 React、Tailwind CSS 和 Lucide React icons，为名为 "flowpath" 的 SaaS 产品创建一个 fullscreen hero section。该区域应为单个填满 viewport 的 `<section>`（`h-screen w-full overflow-hidden`）。

**背景：**
- 一个循环、静音、自动播放的 `<video>` 元素，使用 `object-cover` 覆盖整个区域。视频 URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260703_053131_1ec3dd1c-d627-44fb-ab20-6e1fce41b0d5.mp4`
- 在视频上方添加一层轻微的深色遮罩：`bg-black/10`

**字体：**
- 使用 "Helvetica Now Text" 作为主字体，从此地址加载：`https://db.onlinewebfonts.com/c/08e020de1811ec4489f82d1247a42c09?family=Helvetica+Now+Text`
- 后备字体栈：`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- 通过 CSS 中的 `* { font-family: ... }` 全局应用

**导航栏（顶部，非 fixed/sticky）：**
- 占据全宽，使用响应式水平 padding（`px-5 sm:px-6 md:px-12 lg:px-16`）和垂直 padding（`py-4 sm:py-5`）
- Logo：一个 inline SVG 菱形图案（28x28），包含两条重叠的菱形 path，opacity 分别为 0.9 和 0.5；其后是白色文字 "flowpath"，使用 `text-lg sm:text-xl font-medium tracking-tight`
- Desktop nav（在 mobile 隐藏）：横向 flex，包含 "Product"（dropdown：Connections、Workflows、Insights）、"Solutions"（dropdown：Guides、Use cases、API reference）、"About"（dropdown：Our story、Open roles、Reach us）、"Plans"（无 dropdown）
- Nav buttons：`text-white/90 hover:text-white text-sm font-medium`，搭配一个 `ChevronDown` icon（3.5x3.5），dropdown 打开时旋转 180 度
- Dropdowns 在 hover 时打开（onMouseEnter/onMouseLeave），定位为 `absolute top-full left-0`，使用自定义 `.liquid-glass` class，以及 `rounded-xl py-3 px-2 min-w-[160px] shadow-xl`。Dropdown items：`text-white/80 hover:text-white text-sm rounded-lg hover:bg-white/5`
- Desktop CTA："Log in" link（`text-white/90 hover:text-white text-sm font-medium`）和使用 `.liquid-glass rounded-full px-5 py-2 text-white text-sm font-medium` 的 "Try it free" button
- Mobile menu button：在 `Menu` 和 `X` icons 之间进行动画切换，带有 rotation/scale/opacity transitions（duration-300）
- Mobile menu：绝对定位在 nav 下方，以 `cubic-bezier(0.16,1,0.3,1)` easing 在 400ms 内滑入。背景：`bg-[#2C221C]/95 backdrop-blur-xl rounded-2xl p-6`。显示所有 nav items，并缩进显示 sub-items，底部还包含带边框的 Log in 和 Try it free

**Hero Content（位于 nav 下方，顶部对齐，非垂直居中）：**
- Container：`flex-1 flex items-start justify-center`，使用 `pt-16 sm:pt-20 md:pt-24` 设置与 nav 的间距
- Text wrapper：`text-center max-w-3xl`
- Heading `<h1>`：`text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] tracking-[-0.02em]`
  - 内容（保留换行）：
    ```
    跨越
    鸿沟。<span class="text-white/60">告别</span>
    <span class="text-white/60">繁琐工作。</span>
    ```
- Subheading `<p>`：`text-white/80 text-sm sm:text-base md:text-lg leading-relaxed max-w-md mx-auto mt-6 sm:mt-8`
  - 文本："Flowpath 整合你的全部健康工具，让团队少花精力填补缺口，将更多精力投入真正的进步。"
- 两个并排的 CTA buttons（`flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-6 sm:mt-8`）：
  1. "开启你的旅程" - 纯白 button：`px-5 sm:px-6 py-2.5 sm:py-3 bg-white text-gray-900 text-sm font-semibold rounded-full hover:bg-white/90`
  2. "观看演示" - glass button：`px-5 sm:px-6 py-2.5 sm:py-3 liquid-glass rounded-full text-white text-sm font-semibold hover:bg-white/10`

**自定义 CSS（`.liquid-glass` class）：**
```css
.liquid-glass {
  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;
}

.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;
}
```

**其他 CSS utilities：**
```css
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-dropdown { animation: dropdown-in 0.2s ease-out; }
.duration-400 { transition-duration: 400ms; }
```

**重要说明：**
- Dropdown elements 需要使用 `!absolute`（Tailwind important modifier），以覆盖 `.liquid-glass` 中的 `position: relative`
- 整个 section 完全响应式，breakpoints 为 sm、md、lg、xl
- 除 Lucide React icons 外，不使用任何外部 UI libraries
- Tailwind config 使用默认配置，不进行扩展