Bold Studio

使用 React、Tailwind CSS 和 Vite，为名为“VANGUARD”的创意机构构建一个全屏 hero landing page。页面应为一个占满 viewport 高度的单区块，以循环视频为背景，所有内容叠加在其上方。

**背景视频：**
使用以下准确的 CloudFront URL，创建全屏 `<video>` element，带有 `autoPlay`、`muted`、`loop` 和 `playsInline` attributes，并设置为 `object-cover` 以填满整个 viewport：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_154941_df1a96e1-a06f-450c-bd02-d863414cc1a0.mp4
```

**字体（在 index.html 中加载）：**
1. “FSP DEMO - PODIUM Sharp 4.11”，来自 `https://db.onlinewebfonts.com/c/8b75d9dcff6a48c35a46656192adf019?family=FSP+DEMO+-+PODIUM+Sharp+4.11`——用于品牌名称和主标题。为其创建 `.font-podium` utility class，并在 tailwind.config.js 中将其注册为 `fontFamily.podium`。
2. “Inter”，来自 Google Fonts（weights 400、500、600、700）——用于正文、nav links、stats 和 CTAs。在 tailwind.config.js 中将其注册为 `fontFamily.inter`。

**图标：**所有图标均使用 `lucide-react`：`ArrowUpRight`、`Award`、`Crown` 和 `X`。

**Navbar：**
- 顶部水平栏，使用响应式 padding（`px-6 sm:px-10 lg:px-16`、`py-5 lg:py-7`）。
- 左侧：品牌名称“VANGUARD”，使用 `font-podium`、white、bold、uppercase、`text-2xl sm:text-3xl`、`tracking-wider`。
- 中间（低于 `md` 时隐藏）：四个 nav links——“Projects”“Studio”“Offerings”“Inquire”——使用 `font-inter`、`text-sm`、`text-white/80`、`tracking-widest`、uppercase，并带有 `hover:text-white` transition。
- 右侧（低于 `md` 时隐藏）：一个带 `ArrowUpRight` icon 的“GET IN TOUCH”link，样式为 bordered button（`border border-white/30 hover:border-white/60`、`px-6 py-3`、`text-xs`、`tracking-widest`、uppercase、`hover:bg-white/10`）。
- 右侧（低于 `md` 时显示）：由三个白色 `div` bars 组成的 hamburger button（`w-6 h-0.5`、`w-6 h-0.5`、`w-4 h-0.5`，使用 `space-y-1.5`）。

**Mobile Menu Overlay（仅低于 `md`）：**
- Fixed fullscreen overlay（`fixed inset-0 z-50`），使用 `bg-black/95 backdrop-blur-sm`。
- 通过 React `useState` 切换可见性——打开时：`opacity-100 visible`；关闭时：`opacity-0 invisible`；使用 `transition-all duration-500`。
- Header row 与 navbar 一致：左侧为品牌名称，右侧为 `X` close icon。
- 垂直居中：4 个 nav links 均使用 `font-podium`、`text-4xl sm:text-5xl`、white、uppercase，并通过 inline `style` 实现错峰 entrance animations——每个 item 获得 `transitionDelay: i * 80 + 100ms`，且 `opacity` 和 `translateY(20px)` transitions 根据打开状态变化。
- Links 下方：一个“GET IN TOUCH”bordered button，使用相同的错峰 animation pattern。
- 所有 links 点击时均调用 `setMenuOpen(false)`。

**Hero Content（垂直居中、左对齐）：**
所有 hero elements 均使用错峰 `animate-fade-up` animations（在 CSS 中定义为 `@keyframes fade-up`，在 `0.8s ease-out` 内从 `translateY(30px), opacity:0` 过渡到 `translateY(0), opacity:1`）。后续每个 element 增加 `0.2s` delay。Elements 初始设置为 `opacity: 0`，并使用 `animation-fill-mode: forwards`。

1. **Tagline：**一个 `Crown` icon（lucide、`w-4 h-4`、`text-white/70`），后接“World-Class Digital Collective”，使用 `text-white/70`、`text-xs sm:text-sm`、`font-inter`、`tracking-[0.3em]`、uppercase。使用 `animate-fade-up`（无 delay）。带有 `mb-6 lg:mb-8`。

2. **Main Heading：**三行文本，使用 `font-podium`、white、uppercase、`leading-[0.92]`、`tracking-tight`，每行均使用 `text-[clamp(2.8rem,8vw,7rem)]`：
   - “Design.”
   - “Disrupt.”
   - “Conquer.”
   使用 `animate-fade-up-delay-1`（0.2s delay）。

3. **Subtext：**“We build fierce brand identities”（换行）“that don't just turn heads --”，然后是 bold white 的“they lead.”，整体使用 `text-white/70`、`text-sm sm:text-base`、`font-inter`、`leading-relaxed`、`max-w-md`。使用 `animate-fade-up-delay-2`（0.4s delay）。`mt-6 lg:mt-8`。

4. **CTA Row：**使用 `animate-fade-up-delay-3`（0.6s delay）、`mt-8 lg:mt-10`、`flex flex-wrap items-center gap-4 sm:gap-6`。
   - 黑色 button“SEE OUR WORK”，带 `ArrowUpRight` icon。`bg-black hover:bg-neutral-900`、`px-5 sm:px-7 py-3 sm:py-4`、`text-[11px] sm:text-xs`、`tracking-widest`、uppercase。Arrow 带有 `group-hover:translate-x-0.5 group-hover:-translate-y-0.5` transition。
   - 位于其旁（移动端隐藏，`hidden sm:flex`）：一个 `Award` icon（`w-8 h-8`、`text-white/50`），配两行文本：“Top-Rated”/“Brand Studio”，使用 `text-white/60`、`text-xs`、`tracking-wider`、uppercase。

5. **Stats Row：**使用 `animate-fade-up-delay-4`（0.8s delay）、`mt-8 sm:mt-10 lg:mt-14`、`flex flex-wrap gap-6 sm:gap-12 lg:gap-16`。三个 stats：
   - “250+”/“Brands Transformed”
   - “95%”/“Client Retention”
   - “10+”/“Years in the Game”
   Values 使用 `font-inter`、white、`text-2xl sm:text-4xl lg:text-5xl`、bold、`tracking-tight`。Labels 使用 `text-white/50`、`text-[9px] sm:text-xs`、`tracking-widest`、uppercase、`mt-1`。

**CSS Animations（在 index.css 的 `@layer utilities` 下定义）：**
```css
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
```
包含以下 classes：`.animate-fade-up`（0s delay）、`.animate-fade-up-delay-1` 到 `.animate-fade-up-delay-4`（以 0.2s 递增，初始 `opacity: 0`）、`.animate-fade-in`、`.animate-fade-in-delay`。

**响应式行为：**
- 整体布局采用 mobile-first，breakpoints 为 `sm`（640px）、`md`（768px）和 `lg`（1024px）。
- Nav links 和“GET IN TOUCH”button 在 `md`+ 显示；hamburger 在低于 `md` 时显示。
- Award badge 在移动端隐藏（`hidden sm:flex`）。
- 所有 text sizes、paddings、gaps 和 margins 均通过 `sm:` 和 `lg:` prefixes 逐级放大。
- Stats 和 CTA row 使用 `flex-wrap`，防止在小屏幕上溢出。

确保所有内容都完全适配移动端。使用单个 `App.tsx` component，并通过 `useState` 切换 menu。无需 routing。