DeepThink

将此页面完全一致地复刻为单个静态 HTML 文件（不使用框架、不使用 React、不使用 Tailwind、不使用 GSAP）。两个全视口深色区段垂直堆叠。平滑滚动。文字抗锯齿。参考画布质感：精致的 AI 产品落地页，近黑色 #0c0c0c。

════════════════════════════════════
外部资源（仅限以下资源）
════════════════════════════════════
字体（必须完全按要求加载）：
- Preconnect: https://fonts.googleapis.com
- Preconnect: https://fonts.gstatic.com (crossorigin)
- Stylesheet: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap

区段 1 字体栈："Inter","Helvetica Neue",Arial,system-ui,sans-serif
区段 2 字体栈：-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif

不得使用外部图片、视频、favicon、JS 库或 CDN 图标包。所有标记均使用内联 SVG。Logo 光线在运行时通过 JS 生成（24 条径向线）。

════════════════════════════════════
页面标题 / META
════════════════════════════════════
<title>清晰思考。自信决策</title>
viewport: width=device-width, initial-scale=1, viewport-fit=cover
html lang="en"，基础字号 16px，scroll-behavior:smooth（若 prefers-reduced-motion 则为 auto）

════════════════════════════════════
全局 / BODY
════════════════════════════════════
body 背景 #0c0c0c，颜色 #fff
移动端菜单打开时 body.menu-open { overflow:hidden }

════════════════════════════════════
区段 1 — HERO（class section-one，id="home"）
min-height: 100dvh，背景 #0c0c0c
CSS 变量（精确）：
--bg:#0c0c0c
--box:#111111
--hairline:rgba(255,255,255,0.065)
--heading:#fafafa
--subtitle:#9e9e9e
--nav:#bcbcbc
--placeholder:#aeaeae
--chip-fill:rgba(255,255,255,0.028)
--chip-border:rgba(255,255,255,0.30)
--chip-edge: linear-gradient(135deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,0.94) 22%,
  rgba(255,255,255,0.44) 38%,
  rgba(255,255,255,0.28) 50%,
  rgba(255,255,255,0.11) 63%,
  rgba(255,255,255,0.04) 75%,
  rgba(255,255,255,0.02) 100%)
--icon:#e8e8e8
--mic:#e1e1e1
--strip:#5c5c5c
--grad: linear-gradient(90deg,
  rgba(255,232,120,0) 0%, #ffe776 6%, #ffd400 26%, #ffd000 42%,
  #c9c93c 60%, #86ca8a 74%, #78d0cd 88%, rgba(120,208,205,0.55) 100%)
--grad-solid: linear-gradient(90deg,
  #ffe776 0%, #ffd400 22%, #ffd000 40%, #c9c93c 60%, #86ca8a 76%, #78d0cd 100%)

布局外壳（.page）：
min-height 100dvh，flex column
padding: clamp(14px,1.55vw,26px) clamp(16px,1.7vw,28px) 0

–––– 顶部导航栏 ––––
3 列网格：1fr auto 1fr（桌面端）
左侧：Logo 链接 href="#home" aria-label="主页"
Logo SVG viewBox="0 0 52 52"：
- 空的 <g class="rays" stroke="#f4f4f4" stroke-width="1.4" stroke-linecap="round">
- 白色圆形 cx=26 cy=26 r=7.4 fill="#fbfbfb"
JS 填充光线：24 条线，中心 26,26，内半径 10.4，外半径 22.6，角度从 -π/2 开始环绕一整圈
Logo 尺寸：clamp(34px,3.1vw,52px)

中间导航链接（ul.nav-links），间距 clamp(1.6rem,2.63vw,2.75rem)：
功能 → #features
优势 → #benefits
定价 → #pricing
常见问题 → #faq
链接样式：颜色 #bcbcbc，字重 400，字号 clamp(1rem,1.435vw,1.5rem)，letter-spacing 0.005em，hover #f2f2f2，transition color .18s ease

右侧：白色胶囊按钮“免费开始”
bg #ffffff，文字 #0c0c0c，字重 500，border-radius 999px，
padding clamp(0.55em,0.9vw,0.62em) clamp(1.1em,2vw,1.35em)，
hover bg #ededed，active scale(.98)

Burger（仅 ≤1024）：3 条发丝细线，aria-expanded=true 时变形为 X

–––– HERO 文案 ––––
居中的 flex column
H1（字重 500，颜色 #fafafa，line-height 1.04，letter-spacing -0.021em，
font-size clamp(2rem,5.263vw,5.5rem)；桌面端 ≥1025：clamp(3.25rem,4.6vw,4.75rem)）：
两行遮罩文本（不是单个 br）：
  第 1 行：“清晰思考。”
  第 2 行：“自信决策”
每行结构如下：
<span class="hl-mask"><span class="hl-line">…</span></span>
.hl-mask: display block; padding-bottom 0.16em; margin-bottom -0.16em
（入场期间在遮罩上设置 overflow:hidden）

副标题（data-enter），颜色 #9e9e9e，字重 400，
字号 clamp(0.95rem,1.435vw,1.5rem)，line-height 1.3，letter-spacing 0.004em，
margin-top clamp(1.1rem,2.9vw,3rem)：
“一个帮你梳理推理过程的 AI 工作空间，<br>而不只是给出答案。”
（在 ≤680px 时：隐藏 <br>，宽度 min(100%,22rem)）

–––– COMPOSER 卡片 ––––
.composer-shell：全宽、居中、isolation:isolate、transform translate3d(0,0,0)
.composer：宽度 clamp(300px,55vw,913px)（桌面端 ≥1025：clamp(560px,52vw,820px)；平板端：clamp(320px,72vw,760px)；移动端：100%）
margin-top clamp(1.2rem,2.9vw,3.05rem)
bg: linear-gradient(180deg,rgba(255,255,255,0.028),rgba(255,255,255,0) 42%), #111111
border 1px solid rgba(255,255,255,0.065)
radius clamp(14px,1.32vw,22px)
box-shadow: 0 2px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04)
padding clamp(16px,1.9vw,32px)
min-height clamp(150px,17.2vw,288px)（桌面端：clamp(170px,15vw,250px)）
flex column

composer 内部：
1) .composer-glow（absolute，z-index -1，位于卡片后方，但通过 isolation 保持在区段上方）：
   left/right/top 0，bottom calc(-1 * clamp(3px,0.35vw,6px))
   border-radius inherit，background --grad-solid，filter blur(0.4px)，opacity 0.95
   创建紧贴 composer 底边的黄色→青色底部辉光

2) 占位文本：“拆解一个决策、问题或想法……”
   颜色 #aeaeae，字号 clamp(0.95rem,1.435vw,1.5rem)

3) 控件行（margin-top auto，flex，间距 clamp(8px,1.08vw,18px)）：
   a) 圆形 + chip 按钮（aria-label “添加附件”）：
      尺寸 clamp(38px,3.23vw,54px)，圆形，白色 + 图标 SVG path M12 5v14M5 12h14，stroke 1.9
      chip 填充 + 通过 ::before 和 --chip-edge 创建的 1px 渐变遮罩环（mask-composite xor/exclude）；纯色边框作为回退
   b) DeepThink 胶囊 chip：灯泡 SVG + 标签“DeepThink”
      高度与圆形按钮相同，radius 999，padding 0 clamp(12px,1.4vw,23px)，白色文字约 clamp(0.9rem,1.316vw,1.375rem)
   c) spacer flex 1
   d) Mic 按钮（无 chip 环）：mic SVG，颜色 #e1e1e1
   e) SEND 按钮（唯一持续进行环境动画的元素）：
      尺寸 clamp(40px,3.35vw,56px)，圆形
      --send-ring: clamp(1.1px,0.092vw,1.53px)
      padding = 环厚度；外层 bg --grad-solid
      ::before absolute inset 0 圆形，使用相同的 --grad-solid（动画层）
      内层 .send-inner：flex 1，圆形，bg #141414，向上箭头 SVG stroke #fafafa，尺寸约 44%
      hover：filter brightness(1.08)；active：scale(.95)
      HERO 入场完成后（html.hero-ready）：使用以下设置让 ::before 动画：
      @keyframes send-ring-sweep { from rotate(0) to rotate(360) }
      10s linear infinite — 渐变光沿环形扫动；按钮主体绝不移动

–––– 信任品牌 LOGO 页脚 ––––
4 个品牌横向排列（≤600px：2×2），颜色 #5c5c5c，间距 clamp(1.6rem,5.6vw,5.9rem)
每个品牌：小型 SVG 标记 + 单词“logoipsum”（第 2 个带 ® 上标）
全部使用 logoipsum 占位标记（仅内联 SVG — 不使用 Logo URL）

–––– 移动端导航遮罩层（≤1024）––––
固定全屏 dialog #navOverlay
bg：径向黄色/青色色调 + 深色半透明渐变
backdrop-filter: blur(22px) saturate(120%)
opacity 0 / hidden → .open：opacity 1，transition .34s
链接：功能、优势、定价、常见问题 — 超大字号 clamp(2rem,9vw,3.4rem)，字重 500
打开时交错淡入+上移（延迟 .08/.14/.20/.26s），ease cubic-bezier(.22,1,.36,1)
Hover 下划线使用 --grad（透明→黄色→青色）增长
页脚：2px --grad 横条 + 全宽白色“免费开始”CTA
Burger/Escape/resize>1024 关闭菜单

════════════════════════════════════
区段 2 — 功能（class section-two，id="features"）
════════════════════════════════════
min-height 100dvh，bg #0c0c0c
padding: clamp(20px,3.2vh,42px) clamp(16px,6vw,91px) clamp(16px,2.4vh,32px)
桌面端 ≥1025：padding-top clamp(130px,12.6vw,210px) — 在 Logo 后刻意留出停顿空间
wrap max-width 1300px

变量：
--heading:#ffffff
--subhead:#8b8b8d
--panel-bg:#0d0d0d
--bubble-bg:#1c1c1c
--msg-text:#efefef
--reason-text:#0b0c07
--green:#23d92c
--input-bg:#fdfdfd
--placeholder:#6b6b6d
--send-bg:#0c0c0c

H2（字重 400，letter-spacing -0.02em，字号 clamp(1.6rem,4.1vw,3.3rem)，line-height 1.11）
两行遮罩文本：
  “为人类思维而打造。”
  “由结构化智能驱动。”

辅助文案（data-enter）：
“提出复杂问题。探索多种视角。<br>即时获得结构化、可靠的答案。”
颜色 #8b8b8d，字号 clamp(0.82rem,1.25vw,1.125rem)
（在 max-height 520px 时隐藏）

渐变 PANEL（.panel）：
border-radius clamp(10px,1vw,14px)
精确的多层背景：
radial-gradient(120% 150% at 9% 52%, #d2ae1a 0%, #bf9f28 22%, rgba(175,155,55,0) 56%),
radial-gradient(120% 150% at 95% 50%, #64a3a2 0%, #4d9494 34%, rgba(70,140,140,0) 64%),
radial-gradient(80% 110% at 42% 6%, rgba(150,160,55,.55) 0%, rgba(150,160,60,0) 42%),
linear-gradient(96deg, #c6a119 0%, #b0972a 32%, #7ba184 62%, #509393 100%)
::after 暗角：radial-gradient(135% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.30) 100%)

Panel 内部：
- “实时推理”行：发光的绿色径向圆点（box-shadow 0 0 6px rgba(45,220,55,.65)）+ 深色标签 #0b0c07
- 聊天卡片 max-width 814px，bg #0d0d0d，radius clamp(12px,1.4vw,18px)

对话（精确文案，用户/AI 交替）：
1 用户：“我们应该在下个季度拓展欧洲市场吗？”
   用户头像：灰色人物 SVG（圆形头部 + 肩部 path stroke #f2f2f2）
2 AI：头像 = 使用 linear-gradient(105deg,#f5c40a 0%,#dcae3f 40%,#6ac6a0 62%,#22c0cf 100%) 的圆形
   气泡：
   “让我们从四个维度进行评估：” + 0.75em 间距
   “• 市场需求与竞争”
   “• 监管复杂度”
   “• 运营成本影响”
   “• 长期战略价值” + 间距
   “你想优先考虑速度还是盈利能力？”
3 用户：“分析 Q3 销售数据。为什么 8 月的营收下降了？”
4 AI：“我已审查 Q3 数据库。8 月的下降与企业续约量减少 15% 相关。我已在下方拟定一份留存策略。”
5 用户：“分析我们 2 月的流失率，并为不活跃用户起草一封再互动邮件”
   （此后没有 AI 回复 — 以用户消息结束）

气泡：bg #1c1c1c，颜色 #efefef，radius clamp(11px,1.1vw,15px)，max-width 78%，
font-size clamp(0.8rem,1.12vw,1.06rem)，line-height 1.42
用户消息 justify end；AI 消息 justify start

聊天底部的白色胶囊输入栏：
占位文本“今天我们应该构建什么？”颜色 #6b6b6d
mic SVG（深色填充 #111）+ 黑色圆形发送按钮，带白色向上箭头 SVG
高度 clamp(40px,4.4vh,48px)，bg #fdfdfd，radius 999

════════════════════════════════════
动画 — 精确编排
════════════════════════════════════
不得使用动画库。使用 Web Animations API (Element.animate) + CSS。

HEAD SCRIPT（首次绘制之前）：
若不是 prefers-reduced-motion：添加 class html.entrance 和 html.entrance-s2
故障保护：3500ms 后移除 .entrance
在 entrance 下：[data-enter] opacity 0；.hl-line opacity 0；.hl-mask overflow hidden
在 entrance-s2 下：区段 2 同上

缓动常量：
REVEAL = cubic-bezier(0.16, 1, 0.3, 1)
LIFT   = cubic-bezier(0.22, 1, 0.36, 1)
移动端 ≤680：将移动距离乘以 D=0.7（桌面端 D=1）

等待 document.fonts.ready 或最多 400ms，再启动区段 1 时间线
（Inter display:swap — 避免补间动画中途出现 FOUT）

区段 1 主时间线（加载时仅执行一次，约 1.8s 后清理）：
0.00  Logo：opacity 0→1，scale 0.92→1，dur 0.60s，LIFT
0.10  导航链接：lift 10px，dur 0.50，每项 stagger +0.05
0.16  Burger（若可见）：lift 10px
0.26  免费开始：lift 10px
0.20 / 0.29  标题行：遮罩显现 —
      from {opacity:0, translateY(108%)} → 在 offset 0.14 时 opacity 1 → translateY(0)
      duration 950ms，delay 200+i*90ms，REVEAL
0.52  副标题：lift 14px，dur 0.65
0.64  composer-shell：opacity 0→1，translateY(22*D) + scale(0.985)→1，dur 0.95，REVEAL
0.78  占位文本：lift 10px，dur 0.55
0.84+  控件按钮：lift 10px，stagger 0.055
0.94  composer-glow：clipPath inset(0 40% 0 40%) → inset(0 0% 0 0%)，opacity→0.95，dur 0.80，REVEAL
1.08  信任品牌：lift 12px，stagger 0.06
完成 → 移除 html.entrance，取消所有 WAAPI fills，添加 html.hero-ready
         → 启动 send-ring-sweep 10s linear infinite

区段 2 入场（仅一次，IntersectionObserver rootMargin '0px 0px -20% 0px'，threshold 0；首次播放后 disconnect）：
0.00 / 0.09  两行 h2：与 HERO 相同的遮罩显现（delay i*90ms，无 +200 基础延迟）
0.30  副标题：lift 14px，dur 0.65
0.40  Panel：translateY(26*D)+scale(0.985)→identity，opacity 0→1，dur 1.00，REVEAL
0.68  实时推理：lift 10px
0.72  聊天卡片：仅 translateY(18*D)→0（无 opacity — 继承 Panel 淡入），dur 0.85
0.88+ 消息：lift 10px，stagger 0.065
1.24  inputbar：lift 10px
完成 → 移除 entrance-s2，取消动画；滚动返回时绝不重播

REDUCED MOTION：
不启用 entrance class。禁用所有 transition。强制可见。不运行 send ring sweep。

════════════════════════════════════
响应式断点（精确架构）
════════════════════════════════════
≥1025 桌面端：更克制的字号缩放；区段 2 使用较大的顶部内边距
≤1024：隐藏中间链接 + 免费开始；显示 Burger；composer 使用更宽的 clamp
≤680：更紧凑的 HERO 字号，全宽 composer，控件尺寸固定在约 44px
≤600：Logo 分为 2 列
≤360：更紧凑的 chip
max-height 520：隐藏区段 2 副标题

════════════════════════════════════
交互
════════════════════════════════════
Chip hover：填充 rgba(255,255,255,0.06)
导航链接 hover：#f2f2f2
移动端遮罩层按规定打开/关闭
Composer 是装饰性 UI（不需要真实聊天后端）
所有图标均按上述说明使用内联 SVG — 零图片 URL

════════════════════════════════════
输出
════════════════════════════════════
一个自包含的 index.html，在像素级布局、颜色、渐变、排版、文案、SVG、入场时间线、环境 send-ring sweep、移动端遮罩层和上述响应式 clamp 方面保持一致。不得擅自添加额外区段、卡片、统计数据、紫色主题或图库摄影。
```

---