404 星球

为一家名为“NEXOVA”的托管公司构建一个全屏 404 错误页面。整个页面采用单视口高度布局，包含循环播放的背景视频、导航栏、居中的 hero/404 区域和多栏页脚。使用 React + Tailwind CSS + Lucide React icons。不要使用其他 UI 库。

---

**字体**

在 `index.html` 中通过以下样式表加载“Helvetica Now Var”：
```
<link href="https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var" rel="stylesheet">
```
通过内联样式将其全局应用于根容器：
```
fontFamily: '"Helvetica Now Var", Helvetica, Arial, sans-serif'
```

---

**背景视频**

使用一个带有 `autoPlay muted loop playsInline` 的 `<video>` 元素，将其置于所有内容之后，并设置为 `absolute inset-0 w-full h-full object-cover`。视频源 URL 为：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.mp4
```
这是一段电影感的深蓝色太空视角地球画面。

---

**布局结构**

根元素为 `relative min-h-screen flex flex-col`。其内部包含：
1. 背景 `<video>`（绝对定位，位于所有内容之后）
2. 一个 `relative z-10 flex flex-col min-h-screen` 内容容器，包含 nav、hero 和 footer

---

**导航栏**

- Flex 横向布局，`items-center justify-between`，内边距 `px-6 md:px-12 lg:px-16 py-5`
- **Logo（左侧）：** 一个自定义 SVG 图标（4 个四分之一圆叶片形状组成一个圆，白色填充，`w-8 h-8`），旁边是“NEXOVA”文字，样式为 `text-white text-xl font-bold tracking-wider`。准确的 SVG path 为：
  ```
  M480 240a240 240 0 0 0-240 240 240 240 0 0 0 240-240Z
  M240 0A240 240 0 0 0 0 240 240 240 0 0 0 240 0Z
  M480 240A240 240 0 0 0 240 0a240 240 0 0 0 240 240Z
  M240 480A240 240 0 0 0 0 240a240 240 0 0 0 240 240Z
  ```
  viewBox `0 0 480 480`
- **桌面端导航链接（中间）：** 在 `lg` 以下隐藏。链接：域名、服务器、云服务、托管、电子邮件、隐私。样式为 `text-white/80 hover:text-white text-sm tracking-wide`，带 200ms 颜色过渡，`gap-8`。
- **登录按钮（右侧）：** 在 `lg` 以下隐藏。渐变按钮 `bg-gradient-to-r from-emerald-400 to-cyan-500`，白色文字，`text-sm font-semibold px-6 py-2.5 rounded-full`。文字为“登录”，旁边放置一个 Lucide `ArrowRight` icon（w-4 h-4）。
- **移动端汉堡菜单：** 在 `lg` breakpoint 以下可见。一个带 `z-[60]` 的按钮，显示 Lucide `Menu` / `X` icons，并通过旋转实现交叉淡入淡出：当前 icon 为 `opacity-100 rotate-0 scale-100`，非当前 icon 为 `opacity-0 rotate-90 scale-75`（或 `-rotate-90`），全部使用 `transition-all duration-300`。

---

**移动端菜单**

使用两个状态变量：`mobileMenuOpen`（控制挂载）和 `menuVisible`（控制动画）。打开时，将 `mobileMenuOpen` 设为 true，然后通过 `useEffect` 将 `menuVisible` 设为 true。关闭时，先将 `menuVisible` 设为 false，然后在 500ms timeout 后将 `mobileMenuOpen` 设为 false。

- **背景遮罩：** 固定覆盖层 `inset-0 z-40 bg-black/40 backdrop-blur-md`，通过 400ms 不透明度过渡淡入/淡出。点击遮罩关闭菜单。
- **菜单面板：** 绝对定位为 `left-0 right-0 top-[68px] z-50`。包含一个仅用于背景的模糊层（`backdrop-blur-xl`，无背景色，`rounded-b-2xl`），内容置于其上方（`relative z-10`）。
- **菜单项：** 每个导航链接居中，样式为 `text-lg sm:text-xl font-light tracking-[0.08em]`、`text-white/80 hover:text-white`。它们以错峰动画进入：出现时，每个链接的 `transitionDelay` 为 `350 + (index * 50)ms`（消失时为 0ms），使用 `ease-out` 在 400ms 内将 opacity 从 0 过渡到 1，并将 translateY 从 12px 过渡到 0。
- **登录按钮：** 与桌面端使用相同的渐变样式，在错峰序列中最后出现，延迟为 `350 + (linkCount * 50)ms`。

---

**HERO / 404 区域**

在剩余空间内垂直和水平居中：`flex-1 flex flex-col items-center justify-center text-center px-4 sm:px-6 py-12 sm:py-16 md:py-0`。

1. **副标题行（两个 h1 标签）：**
   - “这个页面似乎已经”和“溜出了我们的触及范围 :/”
   - 两者均为：`text-white/80 text-lg xs:text-2xl sm:text-3xl md:text-5xl font-light leading-snug tracking-tight`
   - 第一行：`mb-1 sm:mb-2`，第二行：`mb-8 sm:mb-12`

2. **巨大的“404”文字：**
   - 包裹在一个 `relative mb-8 sm:mb-12 w-full flex justify-center overflow-visible` div 中
   - `<span>`：`text-[80px] xs:text-[100px] sm:text-[140px] md:text-[200px] lg:text-[260px] font-black text-white leading-none tracking-tighter select-none`
   - 带有 `four-oh-four` class，应用以下 CSS 发光效果：
     ```css
     .four-oh-four {
       text-shadow: 0 0 80px rgba(255,255,255,0.3), 0 0 160px rgba(255,255,255,0.1);
     }
     ```

3. **“返回主页”按钮：**
   - 一个带有 `liquid-glass` class（玻璃拟态效果）的 `<a>` 标签，另加 `text-white text-[10px] xs:text-xs sm:text-sm tracking-[0.15em] sm:tracking-[0.2em] font-medium px-6 sm:px-8 py-3 sm:py-3.5 rounded-full uppercase`
   - `liquid-glass` CSS 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;
     }
     ```

---

**页脚**

位于底部：`relative z-10 px-4 sm:px-6 md:px-12 lg:px-16 pb-8 sm:pb-10 pt-10 sm:pt-16`。

网格：`grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 sm:gap-8 lg:gap-6`。

**4 个链接栏**（通过数据迭代生成）：
- 服务器：Web 服务器、VPS 服务器、云服务器、托管实例、裸金属服务器
- 域名：查找域名、迁移域名、DNS 管理器、域名费用
- 帮助：提交工单、常见问题、文档、教程、论坛
- 关于：我们的故事、领导团队、新闻中心、加入我们、合作伙伴、博客

每栏标题：`text-white text-[10px] sm:text-xs font-bold tracking-[0.15em] mb-3 sm:mb-4`。链接：`text-white/50 hover:text-white/80 text-[10px] sm:text-xs`，带 200ms 过渡，位于 `space-y-2 sm:space-y-2.5` 列表中。

**Newsletter + 社交栏**（`col-span-2 lg:col-span-2`）：
- 标题“加入以获取独家优惠”（与其他标题样式相同）
- 邮箱输入框和“发送”按钮在一个 flex 行中并排放置，`max-w-sm`。输入框：白色背景，`rounded-l-md`，placeholder 为“输入您的邮箱以注册”。按钮：同样使用 emerald-to-cyan 渐变，`rounded-r-md`、`font-bold tracking-wider`。
- 标题“联系我们”，样式为 `mt-5 sm:mt-6 mb-3`
- 6 个社交 icons（Lucide：Facebook、Twitter、Dribbble、Youtube、Linkedin、Instagram），每个为 `w-4 h-4`、`text-white/50 hover:text-white`、`gap-3`。

---

**响应式 BREAKPOINTS**
- `xs` 不是默认的 Tailwind breakpoint——如果使用，需要添加它，或替换为 `sm`。设计采用移动端优先的尺寸，并在 `sm`（640px）、`md`（768px）和 `lg`（1024px）处逐级放大。
- 移动端：2 栏页脚网格、汉堡菜单、较小的文字尺寸
- 平板端（md）：4 栏页脚网格，使 newsletter 位于最后一个链接栏旁边
- 桌面端（lg）：6 栏页脚网格、完整的水平 nav、显示登录按钮