智能层

严格按照以下规范重建一个单文件、深色电影感的 AI 基础设施落地页。交付一个独立完整的 index.html（内联 CSS + JS，无需构建步骤）。像素级忠实还原经过测量的 Figma 风格设计稿。不要卡片、不要紫色、不要光晕球体，也不要把装饰性抽象渐变作为主视觉——首屏主视觉是一个全出血循环视频。

════════════════════════════════════════
页面元信息 / 品牌标识
════════════════════════════════════════
- 文档标题："下一层智能"
- 品牌：抽象几何 S 形标记（闪电/电光几何造型），header 中不要使用文字标识。
- 产品氛围：高端 AI 基础设施 / “下一层智能”；纯黑虚空舞台；克制的银白色字体；白色药丸形 CTA。
- Viewport：固定全屏舞台；html/body height 100%；overflow hidden；background #050505。
- 使用抗锯齿 Manrope UI；text-rendering: geometricPrecision。

════════════════════════════════════════
字体（必需）
════════════════════════════════════════
1) 主要 UI 字体：Manrope（variable / range font-weight 200–800），normal style。
   - 通过 @font-face woff2 或等效 Google Fonts 加载：
     https://fonts.google.com/specimen/Manrope
     覆盖 400、500、700 字重（首选 variable 200–800）。
   - body font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif

2) 合作伙伴 logo 文字标识字体：名为 "IpsumMark" 的自定义 display face，weight 700。
   - 仅用于底部四个 “logoipsum” 文字标识。
   - 如果 IpsumMark 二进制文件不可用，使用接近 logoipsum 标记的粗体几何无衬线字体近似呈现（仍需设置 font-family stack: 'IpsumMark','Manrope',sans-serif）——不要以 Inter/Roboto/Arial 作为主要字体。

════════════════════════════════════════
颜色 TOKEN（CSS VARIABLES）
════════════════════════════════════════
--ink: #fafafa          /* 标题 / 主要文字 */
--muted: #a7a6a6        /* 辅助文案 */
--nav: #b6b5b5          /* header 链接 */
--strip: #8b8a8a        /* 合作伙伴 logo */
--pill: #ffffff         /* CTA 填充 */
--pill-ink: #050505     /* CTA 文字 */
舞台 / 页面黑色：#050505

════════════════════════════════════════
响应式单位系统（关键——必须精确匹配）
════════════════════════════════════════
参考画布：1487 × 1058。

:root {
  --u: calc(100vh / 1058);                 /* 1 个设计像素锁定到高度 */
  --uw: calc(100vw / 1487);
  --h: clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));
}
@supports (height: 100dvh) { :root { --u: calc(100dvh / 1058); } }

含义：
- 垂直节奏始终铺满屏幕（nav ~27u、标题顶部 ~230.5u、logo ~995u、基线 1058u）。
- 左侧栏距左侧约 75u；header CTA 距右侧约 75–76u；nav + logo 条居中。
- --h 在超宽屏上略微放大字体（最大 +16%），绝不缩小到低于按高度锁定的 --u。

Portrait / 窄屏（max-aspect-ratio: 11/10）：
- 切换为 flow layout（flex column），单位 --m: min(100vw/430, 1.34px)；--u: var(--m)
- Tablet 区间（≥600px AND max-aspect-ratio 11/10）：
  --m: min(100vw/860, 100vh/760, 1.25px)

════════════════════════════════════════
背景——CLOUDFRONT 视频（强制 URL）
════════════════════════════════════════
精确视频 URL（必须使用，不得替换）：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260808_112712_da9d53df-6d27-4b12-bdf6-aa9dc2622bdf.mp4

覆盖舞台的 absolute .plate 内部标记：
<video class="plate-video" autoplay muted loop playsinline preload="auto" aria-hidden="true">
  <source src="[URL ABOVE]" type="video/mp4">
</video>

Desktop 视频几何尺寸（匹配 photo-plate 尺寸）：
- position absolute
- left: 50%; top: calc(1 * var(--u))
- width: calc(1492 * var(--u)); height: calc(1054 * var(--u))
- transform: translateX(calc(-50% - calc(0.5 * var(--u))))
- object-fit: cover; pointer-events: none

Portrait：inset 0；full width/height；transform none；object-fit cover；object-position 43% center
Tablet portrait：object-position 44% center

视频主体（确保艺术指导忠实度）：深色电影感场景——人物剪影走向一道高耸、发出白色强光的竖直 portal/door of light，地面笼罩薄雾，底部有烟雾，四周纯黑。无缝循环。

.plate::after 上的 FADE OVERLAYS（保留两个渐变）：
Desktop：
1) 底部淡出：
linear-gradient(to bottom,
  rgba(5,5,5,0) 78.8%, rgba(5,5,5,.23) 79.6%, rgba(5,5,5,.45) 81.4%,
  rgba(5,5,5,.75) 83.3%, rgba(5,5,5,.84) 85.2%, rgba(5,5,5,.888) 88%,
  rgba(5,5,5,.905) 91%, rgba(5,5,5,.96) 95%, #050505 100%)
2) 两侧 letterbox：
linear-gradient(to right,
  #050505 calc(50% - 746u),
  transparent calc(50% - 676u),
  transparent calc(50% + 676u),
  #050505 calc(50% + 746u))
  其中 u = var(--u)

Portrait overlays（替换 Desktop 设置）：
- to-right: rgba(5,5,5,.86)→.66@42%→.20@78%→.10@100%
- to-bottom: .72@0%→.34@24%→.34@56%→.80@82%→.97@94%→#050505
Tablet portrait 的侧面/顶部数值略浅（.84/.60/.16/.06 和 .66/.28/.30/.78/.96）。

════════════════════════════════════════
结构（DOM ORDER）
════════════════════════════════════════
.stage
  .plate > video.plate-video
  header.topbar
    a.brand (aria-label Home) > brand SVG
    nav.links (aria-label Primary): 关于 | 功能 | 常见问题 | 联系我们
    a.pill.pill-nav > span “立即开始”
    button.burger#burger (two <i> bars) — 仅在 portrait 中视觉显示
  nav.menu#menu (mobile overlay)
    .menu-inner
      p.menu-eyebrow “菜单”
      ul.menu-list: 关于、功能、常见问题、联系我们
      .menu-foot: pill “立即开始” + ghost “查看架构”
  main.hero
    h1.headline: <span>下一层</span> <span>智能</span>
    p.sub: <span>一个统一的基础设施平台，帮助团队满怀信心地构建、</span>
           <span>发布和扩展 AI 系统。</span>
    .actions
      a.pill.pill-cta > span “立即开始”
      a.ghost “查看架构”
  .logos
    .lg.lg1 … .lg.lg4  (icon SVG + 文字 “logoipsum”；lg2 的文字后有一个微小的凸起圆点)

════════════════════════════════════════
DESKTOP ABSOLUTE LAYOUT（使用 --u / --h 单位）
════════════════════════════════════════
品牌标记：
- left 75u, top 27u, size 31.5u × 48.5u

Nav links (.links)：
- left 50%, top 51u, transform translate(-50%, -50%)
- font 19.0u / weight 400 / color --nav
- 链接间距 ≈ 24.5u、23.5u（第 3 个）、26.0u（第 4 个）
- 项目：关于、功能、常见问题、联系我们——纯文字链接，无下划线

Header pill (.pill-nav)：
- right 75.4u, top 27u, 175u × 49u
- 白色 pill，radius 999px，文字 #050505，font 20.6u weight 500
- 内部 span translateY(1u) 以实现视觉居中
- 标签：“立即开始”

标题 (.headline)：
- left 75.5u, top 230.5u
- font-size 71.6h, line-height 80.5h, weight 400, letter-spacing 0.3h
- color --ink；white-space nowrap；每个 span display:block（两行）：
  Line1：“下一层”
  Line2：“智能”

辅助文案 (.sub)：
- left 75.5u
- top: 230.5u + 189.0h
- font 20.7h / lh 23.5h / weight 400 / word-spacing 1.8h / color --muted
- 两个 nowrap 行，使用 span：
  “一个统一的基础设施平台，帮助团队满怀信心地构建、”
  “发布和扩展 AI 系统。”

主要 CTA (.pill-cta)：
- left 74.9u
- top: 230.5u + 264.5h
- size 175.6h × 50h, font 20.6h
- 标签：“立即开始”

Ghost link (.ghost)：
- left: 74.9u + 220.6h
- top: 230.5u + 279.5h
- font 20.6h weight 500 letter-spacing 0.12h color #fff
- 标签：“查看架构”（无下划线）

合作伙伴条 (.logos)：
- width 741u, left 50%, transform translateX(-50% + 20u)
- color --strip (#8b8a8a)
- 四个标记，absolute positions：
  lg1: left -0.5u, top 994.7u; mark 30.5×31u; word left 37u top ~5.6u size 18.1u “logoipsum”
  lg2: left 206.5u, top 995.7u; mark 24.5×30u; word left 31u top ~7.3u size 18.5u “logoipsum” + .dot (inline 0.09em circle, vertical-align 0.62em, margin-left 0.06em)
  lg3: left 416.5u, top 996.7u; mark 28.5×28u; word left 35u top ~7.3u size 16.15u “logoipsum”
  lg4: left 620.5u, top 998.7u; mark 28.5×25.5u; word left 37u top ~8.3u size 15.3u “logoipsum”
- 文字标识使用 font-family IpsumMark, weight 700

════════════════════════════════════════
品牌 SVG（精确几何形状）
════════════════════════════════════════
viewBox="0 0 31.5 48.5"
- LinearGradient id bg1 from (8,0)→(34.1,28.9) stops:
  0 #9e9e9e, .28 #a6a6a6, .34 #a3a3a3, .40 #3a3a3a, .55 #414141,
  .60 #7a7a7a, .68 #8e8e8e, .80 #a9a9a9, .95 #c4c4c4, 1 #cccccc
- Path: M21.5 0 L21.5 19.5 L31.5 19.5 L31.5 29 L10 48.5 L10 28.5 L0.5 28.5 L0.5 18.5 Z fill url(#bg1)
- Rect 0.5,18.5 9×10 fill #fdfdfd
- Rect 22,19.5 9.5×9.5 fill #fdfdfd
形状看起来像一个风格化的棱角 “S” / bolt，并带有两个明亮的矩形缺口。

════════════════════════════════════════
合作伙伴 ICON SVG（currentColor = --strip）
════════════════════════════════════════
1) viewBox 0 0 30 31 — 带圆形缺口的方框（mask circle at 19.5,10.5 r5.1）+ circle path
2) viewBox 0 0 25 30 — 竖条 + circle yin-yang mask split（经典 logoipsum 双形态）
3) viewBox 0 0 28 28 — circle stroke r12.35 sw 3.1 + 两条 curved stroke paths（漩涡）
4) viewBox 0 0 28 25.5 — filled wavy “mound” path + 下方两条 stroked wave lines（sw ~3.05）

（如果可用，请使用源页面中的精确 path data；否则精确匹配这些 logoipsum 剪影。）

════════════════════════════════════════
动画（仅限 prefers-reduced-motion: no-preference）
════════════════════════════════════════
Easing: cubic-bezier(.22, 1, .36, 1)

@keyframes rise:
  from { opacity:0; transform: translateY(14u) }

@keyframes riseNav:（用于居中的 nav——保留 translate(-50%,-50%) 结束状态）
  from { opacity:0; transform: translate(-50% + 0u, -50% + 14u) }
  to   { opacity:1; transform: translate(-50% + 0u, -50%) }

@keyframes fade:
  from { opacity:0 }

加载时错峰：
- .brand, .links, .pill-nav → rise / riseNav, 0.8s, both
- .headline → rise 0.9s, delay 0.06s
- .sub → rise 0.9s, delay 0.14s
- .pill-cta, .ghost → rise 0.9s, delay 0.22s
- .lg → fade 1.1s, delay 0.34s, ease

Reduced motion：将 menu/burger transitions 缩短至约 0.001s；跳过入场动画。

════════════════════════════════════════
PORTRAIT / MOBILE 行为
════════════════════════════════════════
- 隐藏 .links 和 .pill-nav；显示磨砂玻璃 pill burger（rgba white .06 / border .14, backdrop blur）。
- 当 .stage.is-open 时，Burger bars 变形为 X（rotate ±45deg with translateY ±4.3m）。
- Overlay .menu：全屏深色 gradient blur，opacity/visibility transition 0.42s。
- 错峰显示菜单（eyebrow、每个 li、foot），opacity+translateY，delays .06/.10/.16/.22/.28/.34s。
- Menu links 较大（~31m, min 25px），带小型 chevron ::after。
- Headline 在 phone 上以 inline 方式换行；在 tablet band 上恢复为两个 line spans。
- Logos：phone 上采用 2×2 grid；tablet ≥600px 上采用单行 4 个。
- stage 使用 safe-area padding。

════════════════════════════════════════
JS（最少量）
════════════════════════════════════════
点击 burger 时在 .stage 上切换 .is-open；同步 aria-expanded / aria-hidden / aria-label。
按 Escape、点击 menu link，以及调整为横屏 aspect > 1.1 时关闭。

════════════════════════════════════════
构图规则（不得违反）
════════════════════════════════════════
- 首个 viewport = 一个完整构图：品牌标记 + nav + 一个标题 + 一段辅助文案 + CTA 组合 + 全出血视频 + 底部合作伙伴条。不要 stats、cards、badge chips 或次要营销模块。
- 品牌标记是首屏层级的左侧视觉信号，而不只是 nav 中的小装饰。
- 视频是 edge-to-edge background plane（不是 inset card/media）。
- 除了经过测量的边缘/底部 fades，不要在视频上添加 overlays/stickers。
- 主要 CTA 仅使用白色全圆角 pills；次要操作使用 ghost text。
- 单个 HTML 文件；支持 desktop + mobile。

构建结果应确保在 1487×1058 的 desktop screenshot 中逐像素匹配此布局，CloudFront MP4 在左侧文字栏后方循环播放，四个灰色 logoipsum 标记位于底部 fade 中。
```

---