提示词
将此页面完全一致地复刻为单个静态 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 方面保持一致。不得擅自添加额外区段、卡片、统计数据、紫色主题或图库摄影。
```
---原文提示词（English）
Recreate this page EXACTLY as a single static HTML file (no frameworks, no React, no Tailwind, no GSAP). Two full-viewport dark sections stacked vertically. Smooth scroll. Antialiased text. Reference canvas feel: polished AI product landing, near-black #0c0c0c.
════════════════════════════════════
EXTERNAL ASSETS (ONLY THESE)
════════════════════════════════════
Fonts (must load exactly):
- 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
Section 1 font stack: "Inter","Helvetica Neue",Arial,system-ui,sans-serif
Section 2 font stack: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif
NO external images, videos, favicons, JS libraries, or CDN icon packs. All marks are inline SVG. Logo rays are generated at runtime with JS (24 radial lines).
════════════════════════════════════
PAGE TITLE / META
════════════════════════════════════
<title>Think clearly. Decide confidently</title>
viewport: width=device-width, initial-scale=1, viewport-fit=cover
html lang="en", base font-size 16px, scroll-behavior:smooth (auto if prefers-reduced-motion)
════════════════════════════════════
GLOBAL / BODY
════════════════════════════════════
body background #0c0c0c, color #fff
body.menu-open { overflow:hidden } when mobile menu open
════════════════════════════════════
SECTION 1 — HERO (class section-one, id="home")
min-height: 100dvh, background #0c0c0c
CSS variables (exact):
--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%)
Layout shell (.page):
min-height 100dvh, flex column
padding: clamp(14px,1.55vw,26px) clamp(16px,1.7vw,28px) 0
–––– NAV TOPBAR ––––
3-column grid: 1fr auto 1fr (desktop)
LEFT: logo link href="#home" aria-label="Home"
Logo SVG viewBox="0 0 52 52":
- empty <g class="rays" stroke="#f4f4f4" stroke-width="1.4" stroke-linecap="round">
- white circle cx=26 cy=26 r=7.4 fill="#fbfbfb"
JS fills rays: 24 lines, center 26,26, inner radius 10.4, outer 22.6, angles from -π/2 around full circle
Logo size: clamp(34px,3.1vw,52px)
CENTER nav links (ul.nav-links), gap clamp(1.6rem,2.63vw,2.75rem):
Features → #features
Benefits → #benefits
Pricing → #pricing
FAQ → #faq
Link style: color #bcbcbc, weight 400, size clamp(1rem,1.435vw,1.5rem), letter-spacing 0.005em, hover #f2f2f2, transition color .18s ease
RIGHT: white pill button "Start Free"
bg #ffffff, text #0c0c0c, weight 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 only): 3 hairline bars, morphs to X when aria-expanded=true
–––– HERO COPY ––––
Centered flex column
H1 (weight 500, color #fafafa, line-height 1.04, letter-spacing -0.021em,
font-size clamp(2rem,5.263vw,5.5rem); desktop ≥1025: clamp(3.25rem,4.6vw,4.75rem)):
TWO masked lines (NOT a single br):
Line1: "Think clearly."
Line2: "Decide confidently"
Structure each line as:
<span class="hl-mask"><span class="hl-line">…</span></span>
.hl-mask: display block; padding-bottom 0.16em; margin-bottom -0.16em
(during entrance overflow:hidden on mask)
Subtitle (data-enter), color #9e9e9e, weight 400,
size clamp(0.95rem,1.435vw,1.5rem), line-height 1.3, letter-spacing 0.004em,
margin-top clamp(1.1rem,2.9vw,3rem):
"An AI workspace that structures your reasoning,<br>not just your answers."
(On ≤680px: hide the <br>, width min(100%,22rem))
–––– COMPOSER CARD ––––
.composer-shell: full width, centered, isolation:isolate, transform translate3d(0,0,0)
.composer: width clamp(300px,55vw,913px) (desktop ≥1025: clamp(560px,52vw,820px); tablet: clamp(320px,72vw,760px); mobile: 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) (desktop: clamp(170px,15vw,250px))
flex column
INSIDE composer:
1) .composer-glow (absolute, z-index -1, behind card but above section via 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
Creates yellow→teal underglow hugging bottom edge of composer
2) Placeholder text: "Break down a decision, problem, or idea…"
color #aeaeae, size clamp(0.95rem,1.435vw,1.5rem)
3) Controls row (margin-top auto, flex, gap clamp(8px,1.08vw,18px)):
a) ROUND + chip button (aria-label "Add attachment"):
size clamp(38px,3.23vw,54px), circle, white + icon SVG path M12 5v14M5 12h14, stroke 1.9
chip fill + masked 1px gradient ring via ::before with --chip-edge (mask-composite xor/exclude); flat border fallback
b) DeepThink pill chip: lightbulb SVG + label "DeepThink"
height same as round, radius 999, padding 0 clamp(12px,1.4vw,23px), text white ~clamp(0.9rem,1.316vw,1.375rem)
c) spacer flex 1
d) Mic button (no chip ring): mic SVG, color #e1e1e1
e) SEND button (the only continuous ambient motion):
size clamp(40px,3.35vw,56px), circle
--send-ring: clamp(1.1px,0.092vw,1.53px)
padding = ring thickness; outer bg --grad-solid
::before absolute inset 0 circle with same --grad-solid (animated layer)
INNER .send-inner: flex 1, circle, bg #141414, up-arrow SVG stroke #fafafa ~44% size
hover: filter brightness(1.08); active: scale(.95)
AFTER hero entrance completes (html.hero-ready): animate ::before with
@keyframes send-ring-sweep { from rotate(0) to rotate(360) }
10s linear infinite — gradient light sweeps around ring; button body never moves
–––– TRUST LOGOS FOOTER ––––
4 brands in a row (≤600px: 2×2), color #5c5c5c, gap clamp(1.6rem,5.6vw,5.9rem)
Each: small SVG mark + word "logoipsum" (2nd has ® superscript)
All placeholder logoipsum marks (inline SVG only — no logo URLs)
–––– MOBILE NAV OVERLAY (≤1024) ––––
Fixed fullscreen dialog #navOverlay
bg: radial yellow/teal tint + dark translucent gradient
backdrop-filter: blur(22px) saturate(120%)
opacity 0 / hidden → .open: opacity 1, transition .34s
Links: Features, Benefits, Pricing, FAQ — huge type clamp(2rem,9vw,3.4rem) weight 500
Staggered fade+lift on open (delays .08/.14/.20/.26s), ease cubic-bezier(.22,1,.36,1)
Hover underline grows with --grad (transparent→yellow→teal)
Footer: 2px --grad bar + full-width white "Start Free" CTA
Burger/Escape/resize>1024 closes menu
════════════════════════════════════
SECTION 2 — FEATURES (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)
On desktop ≥1025: padding-top clamp(130px,12.6vw,210px) — deliberate pause after logos
wrap max-width 1300px
Variables:
--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 (weight 400, letter-spacing -0.02em, size clamp(1.6rem,4.1vw,3.3rem), line-height 1.11)
TWO masked lines:
"Built for human thinking."
"Powered by structured intelligence."
Subcopy (data-enter):
"Ask complex questions. Explore multiple perspectives.<br>Get structured, reliable answers — instantly."
color #8b8b8d, size clamp(0.82rem,1.25vw,1.125rem)
(hide on max-height 520px)
GRADIENT PANEL (.panel):
border-radius clamp(10px,1vw,14px)
EXACT multi-layer background:
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 vignette: radial-gradient(135% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.30) 100%)
Inside panel:
- "Live reasoning" row: glowing green radial dot (box-shadow 0 0 6px rgba(45,220,55,.65)) + dark label #0b0c07
- Chat card max-width 814px, bg #0d0d0d, radius clamp(12px,1.4vw,18px)
Conversation (exact copy, alternating user/ai):
1 USER: "Should we expand into the European market next quarter?"
User avatar: grey person SVG (circle head + shoulders path stroke #f2f2f2)
2 AI: avatar = circle with gradient linear-gradient(105deg,#f5c40a 0%,#dcae3f 40%,#6ac6a0 62%,#22c0cf 100%)
Bubble:
"Let's evaluate this across four dimensions:" + 0.75em gap
"• Market demand & competition"
"• Regulatory complexity"
"• Operational cost impact"
"• Long-term strategic value" + gap
"Would you like to prioritize speed or profitability?"
3 USER: "Analyze the Q3 sales data. Why did revenue drop in August?"
4 AI: "I've reviewed the Q3 database. The drop in August correlates with a 15% decrease in enterprise renewals. I've drafted a retention strategy below."
5 USER: "Analyze our churn rate for February and draft a re-engagement email for inactive users"
(no AI reply after this — ends on user message)
Bubbles: bg #1c1c1c, color #efefef, radius clamp(11px,1.1vw,15px), max-width 78%,
font-size clamp(0.8rem,1.12vw,1.06rem), line-height 1.42
User msgs justify end; AI msgs justify start
White pill input bar at bottom of chat:
placeholder "What should we build today?" color #6b6b6d
mic SVG (filled dark #111) + black circle send with white up-arrow SVG
height clamp(40px,4.4vh,48px), bg #fdfdfd, radius 999
════════════════════════════════════
ANIMATIONS — EXACT CHOREOGRAPHY
════════════════════════════════════
NO animation libraries. Use Web Animations API (Element.animate) + CSS.
HEAD SCRIPT (before paint):
If NOT prefers-reduced-motion: add classes html.entrance AND html.entrance-s2
Failsafe: remove .entrance after 3500ms
Under entrance: [data-enter] opacity 0; .hl-line opacity 0; .hl-mask overflow hidden
Under entrance-s2: same for section-two
Easing constants:
REVEAL = cubic-bezier(0.16, 1, 0.3, 1)
LIFT = cubic-bezier(0.22, 1, 0.36, 1)
On mobile ≤680: multiply travel distances by D=0.7 (desktop D=1)
Wait for document.fonts.ready OR 400ms max before starting section-1 timeline
(Inter display:swap — avoid FOUT mid-tween)
SECTION 1 MASTER TIMELINE (once on load, ~1.8s then teardown):
0.00 logo: opacity 0→1, scale 0.92→1, dur 0.60s, LIFT
0.10 nav links: lift 10px, dur 0.50, stagger +0.05 each
0.16 burger (if visible): lift 10px
0.26 Start Free: lift 10px
0.20 / 0.29 headline lines: masked reveal —
from {opacity:0, translateY(108%)} → opacity 1 at offset 0.14 → translateY(0)
duration 950ms, delay 200+i*90ms, REVEAL
0.52 subtitle: 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 placeholder: lift 10px, dur 0.55
0.84+ control buttons: 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 trust brands: lift 12px, stagger 0.06
COMPLETE → remove html.entrance, cancel all WAAPI fills, add html.hero-ready
→ starts send-ring-sweep 10s linear infinite
SECTION 2 ENTRANCE (once, IntersectionObserver rootMargin '0px 0px -20% 0px', threshold 0; disconnect after first play):
0.00 / 0.09 two h2 lines: same masked reveal as hero (delay i*90ms, no +200 base)
0.30 subhead: lift 14px, dur 0.65
0.40 panel: translateY(26*D)+scale(0.985)→identity, opacity 0→1, dur 1.00, REVEAL
0.68 Live reasoning: lift 10px
0.72 chat card: translateY(18*D)→0 ONLY (no opacity — inherits panel fade), dur 0.85
0.88+ messages: lift 10px stagger 0.065
1.24 inputbar: lift 10px
COMPLETE → remove entrance-s2, cancel animations; never replay on scroll back
REDUCED MOTION:
Do not arm entrance classes. Disable all transitions. Force visible. No send ring sweep.
════════════════════════════════════
RESPONSIVE BREAKPOINTS (exact architecture)
════════════════════════════════════
≥1025 desktop: quieter type scales; section-two large top padding
≤1024: hide center links + Start Free; show burger; composer wider clamp
≤680: tighter hero type, full-width composer, fixed control sizes ~44px
≤600: logos 2 columns
≤360: tighter chips
max-height 520: hide section-two subhead
════════════════════════════════════
INTERACTIONS
════════════════════════════════════
Chip hover: fill rgba(255,255,255,0.06)
Nav link hover: #f2f2f2
Mobile overlay open/close as specified
Composer is decorative UI (no real chat backend required)
All icons inline SVG as described — zero image URLs
════════════════════════════════════
OUTPUT
════════════════════════════════════
One self-contained index.html matching pixel-level layout, colors, gradients, typography, copy, SVGs, entrance timelines, ambient send-ring sweep, mobile overlay, and responsive clamps above. Do not invent extra sections, cards, stats, purple themes, or stock photography.
```
---
