feat: 添加 XCodeClaw 飞书机器人配置指南与产品介绍页

docs/.vitepress/config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     nav: [
       { text: "首页", link: "/" },
       { text: "快速开始", link: "/guide/" },
-      // { text: 'API 状态', link: '/status' }
+      { text: "XCodeClaw", link: "/xcodeclaw" },
     ],
 
     sidebar: [
@@ -26,6 +26,13 @@ export default defineConfig({
           { text: "Codex", link: "/guide/codex" },
         ],
       },
+      {
+        text: "XCodeClaw",
+        items: [
+          { text: "产品介绍", link: "/xcodeclaw" },
+          { text: "飞书机器人配置", link: "/guide/feishu-bot" },
+        ],
+      },
       {
         text: "参考",
         items: [

docs/guide/feishu-bot.md

@@ -0,0 +1,277 @@
+---
+title: XCodeClaw 飞书机器人配置指南
+---
+
+# XCodeClaw 飞书机器人配置指南
+
+本指南帮助您在飞书开放平台创建并配置机器人应用，完成后将 App ID 和 App Secret 提供给管理员即可开通服务。
+
+> **您只需完成飞书侧配置**，模型配置、服务部署由管理员完成，无需关心。
+
+## 1. 概述
+
+XCodeClaw 是一个 AI 学术助手，通过飞书机器人与您交互。您需要在飞书开放平台创建一个机器人应用，并完成权限和事件订阅的配置。
+
+:::tip 整体流程
+1. 在飞书开放平台创建企业自建应用
+2. 添加机器人能力
+3. 导入权限配置
+4. 获取凭证（App ID 和 App Secret），发送给管理员
+5. 等待管理员创建服务实例
+6. 配置事件订阅与回调（需要服务实例已运行）
+7. 发布应用
+:::
+
+:::warning 流程顺序很重要
+事件订阅和回调使用「长连接」模式，即由服务端主动与飞书建立 WebSocket 连接。因此必须先让管理员创建服务实例，待服务启动后再配置长连接，否则连接无法建立。
+:::
+
+完成以上步骤后，在飞书中搜索您创建的机器人即可开始使用。
+
+## 2. 创建飞书应用
+
+### 第一步：登录飞书开放平台
+
+1. 打开浏览器，访问飞书开放平台：[https://open.feishu.cn/app](https://open.feishu.cn/app)
+2. 使用您的飞书账号登录。
+3. 点击页面上的「**创建企业自建应用**」按钮：
+
+![创建企业自建应用](../assets/feishu/01-create-app.png)
+
+填写应用信息，包括应用名称、描述和图标，然后点击「**创建**」：
+
+![填写应用信息](../assets/feishu/02-app-info.png)
+
+:::tip 建议
+应用名称建议使用易于辨识的名称，如「XCodeClaw 助手」或「AI 学术助手」。
+:::
+
+## 3. 添加机器人能力
+
+### 第二步：启用机器人功能
+
+进入刚创建的应用，在左侧菜单中操作：
+
+1. 点击左侧菜单「**应用能力**」→「**机器人**」。
+2. 点击「**启用机器人能力**」。
+3. 机器人名称会自动填充应用名称，确认即可。
+
+![添加机器人](../assets/feishu/03-add-bot.png)
+
+## 4. 配置权限
+
+### 第三步：批量导入权限
+
+1. 在左侧菜单中点击「**开发配置**」→「**权限管理**」。
+2. 点击页面右上角的「**批量开通**」按钮（如下图所示）。
+3. 将下方的 JSON 内容完整复制并粘贴到输入框中，点击确认。
+
+![批量导入权限](../assets/feishu/04-import-perms.png)
+
+需要导入的权限 JSON：
+
+```json
+{
+  "scopes": {
+    "tenant": [
+      "aily:file:read",
+      "aily:file:write",
+      "application:application.app_message_stats.overview:readonly",
+      "application:application:self_manage",
+      "application:bot.menu:write",
+      "cardkit:card:write",
+      "contact:user.employee_id:readonly",
+      "corehr:file:download",
+      "docs:document.content:read",
+      "event:ip_list",
+      "im:chat",
+      "im:chat.access_event.bot_p2p_chat:read",
+      "im:chat.members:bot_access",
+      "im:message",
+      "im:message.group_at_msg:readonly",
+      "im:message.group_msg",
+      "im:message.p2p_msg:readonly",
+      "im:message:readonly",
+      "im:message:send_as_bot",
+      "im:resource",
+      "sheets:spreadsheet",
+      "wiki:wiki:readonly"
+    ],
+    "user": [
+      "aily:file:read",
+      "aily:file:write",
+      "im:chat.access_event.bot_p2p_chat:read"
+    ]
+  }
+}
+```
+
+:::warning 注意
+请确保 JSON 内容完整复制，不要遗漏任何权限项。权限不全会导致机器人功能受限。
+:::
+
+导入成功后，权限列表应显示如下：
+
+![权限导入完成](../assets/feishu/05-perms-done.png)
+
+下表列出了主要权限的用途说明：
+
+| 权限标识 | 用途 |
+| :--- | :--- |
+| `im:message:send_as_bot` | 以机器人身份发送消息 |
+| `im:message.p2p_msg:readonly` | 读取私聊消息 |
+| `im:message.group_at_msg:readonly` | 读取群聊中 @机器人 的消息 |
+| `im:chat` | 管理群聊（创建/更新群信息） |
+| `im:resource` | 读取和发送文件、图片等资源 |
+| `docs:document.content:read` | 读取飞书文档内容 |
+| `sheets:spreadsheet` | 读写飞书电子表格 |
+| `wiki:wiki:readonly` | 读取知识库内容 |
+| `cardkit:card:write` | 发送和更新卡片消息（流式输出） |
+
+## 5. 获取凭证并交给管理员
+
+### 第四步：获取 App ID 和 App Secret
+
+1. 在左侧菜单中点击「**基础信息**」→「**凭证与基础信息**」。
+2. 复制以下两个值：
+   - **App ID**：格式为 `cli_xxxxxxxxxxxxxxxx`
+   - **App Secret**：一串字母数字组合
+3. 将这两个值发送给管理员，用于开通您的 XCodeClaw 服务。
+
+:::warning 安全提示
+App Secret 是应用的密钥，请妥善保管，不要在公开场合泄露。仅通过安全渠道发送给管理员。
+:::
+
+## 6. 等待管理员开通服务
+
+### 第五步：等待服务实例创建
+
+将凭证发送给管理员后，管理员会在后台为您创建服务实例并启动容器。
+
+**请等待管理员确认服务已启动**，然后再进行下一步的事件订阅与回调配置。
+
+:::tip 为什么要等待？
+事件订阅和回调使用「长连接」（WebSocket）模式，由服务端主动与飞书建立连接。如果服务实例尚未启动，长连接无法建立，事件订阅将无法正常工作。
+:::
+
+## 7. 配置事件订阅与回调
+
+:::warning 前置条件
+请确认管理员已通知您服务实例已启动，再进行本步骤的配置。
+:::
+
+本步骤包含三个部分：事件订阅、回调配置和安全设置。
+
+### 7.1 事件订阅
+
+#### 第六步 A：配置事件订阅
+
+1. 在左侧菜单中点击「**开发配置**」→「**事件与回调**」。
+2. **事件请求方式**：选择「**使用长连接接收事件**」（如下图）。
+
+![选择长连接](../assets/feishu/06-event-longconn.png)
+
+3. 点击「**添加事件**」，搜索并添加以下事件：
+
+| 事件名称 | 事件标识 |
+| :--- | :--- |
+| 接收消息 | `im.message.receive_v1` |
+| 添加表情回复 | `im.message.reaction.created_v1` |
+| 删除表情回复 | `im.message.reaction.deleted_v1` |
+
+![添加事件](../assets/feishu/07-event-subscribe.png)
+
+![事件详情](../assets/feishu/08-event-detail.png)
+
+### 7.2 回调配置
+
+#### 第六步 B：配置回调
+
+1. 在同一页面中，找到「**回调配置**」区域。
+2. 回调请求方式同样选择「**使用长连接**」。
+3. 点击「**添加回调**」，搜索并添加卡片操作相关回调。
+
+![回调长连接](../assets/feishu/09-callback-longconn.png)
+
+![添加回调](../assets/feishu/10-callback-add.png)
+
+### 7.3 安全设置
+
+#### 第六步 C：启用用户凭证
+
+在「**安全设置**」区域，如果看到「**user_access_token**」开关，请将其**开启**。
+
+![安全设置](../assets/feishu/11-security-token.png)
+
+## 8. 发布应用
+
+### 第七步：创建版本并发布
+
+1. 在左侧菜单中点击「**版本管理与发布**」。
+2. 点击「**创建版本**」。
+
+![创建版本](../assets/feishu/12-create-version.png)
+
+3. 填写版本号（如 `1.0.0`）和更新说明，选择可用范围，点击「**保存**」：
+
+![版本信息](../assets/feishu/13-version-info.png)
+
+4. 点击「**申请发布**」，确认发布：
+
+![发布](../assets/feishu/14-publish.png)
+
+:::tip 配置完成 🎉
+应用发布后，在飞书中搜索您创建的机器人名称，发送任意消息即可开始使用。
+:::
+
+## 9. 授权飞书资源访问
+
+### 第八步：完成飞书授权
+
+机器人上线后，建议立即完成飞书资源授权，以解锁文档读写、表格操作等高级功能。
+
+1. 在飞书中找到您的机器人，发送：`/feishu auth`
+2. 机器人会返回一个**授权链接**，点击链接并在弹出页面中同意授权。
+3. 授权成功后，机器人即可代您访问飞书文档、多维表格、知识库等资源。
+
+:::tip 授权说明
+此授权基于飞书 `user_access_token` 机制，仅在您主动授权后生效。授权范围包括：读取文档内容、操作电子表格、访问知识库等（即前面配置的 user 级权限）。不授权不影响基本的对话功能，但文档相关能力将不可用。
+:::
+
+## 10. 配置检查清单
+
+请对照以下清单确认所有配置已完成：
+
+| | 检查项 | 说明 |
+| :---: | :--- | :--- |
+| ☐ | 创建应用 | 已在飞书开放平台创建企业自建应用 |
+| ☐ | 机器人能力 | 已启用机器人能力 |
+| ☐ | 权限导入 | 已通过 JSON 批量导入全部权限 |
+| ☐ | 获取凭证 | 已复制 App ID 和 App Secret 并发送给管理员 |
+| ☐ | 服务开通 | 管理员已确认服务实例启动 |
+| ☐ | 事件订阅 | 已添加 3 个事件，使用长连接模式 |
+| ☐ | 回调配置 | 已配置回调，使用长连接模式 |
+| ☐ | 安全设置 | 已开启 user_access_token 开关 |
+| ☐ | 发布应用 | 已创建版本并发布上线 |
+| ☐ | 飞书授权 | 已发送 `/feishu auth` 并完成授权 |
+
+## 11. 常见问题
+
+### 机器人没有响应消息
+
+- 确认管理员已开通服务（服务实例已启动）
+- 确认应用已发布（状态为「已上线」）
+- 确认事件订阅和回调都已配置为「长连接」模式
+- 确认权限已全部导入（检查「权限管理」页面）
+
+### 权限批量导入失败
+
+- 检查 JSON 格式是否正确（注意逗号和引号）
+- 部分权限可能需要企业管理员审批后才能开通
+- 如果批量导入不可用，可手动搜索并逐个添加权限
+
+### 如何在群聊中使用机器人
+
+- 将机器人添加到群聊中
+- 在群聊中 @机器人名称 后输入您的问题
+- 机器人默认只响应 @它 的消息

docs/xcodeclaw.md

@@ -0,0 +1,345 @@
+---
+title: XCodeClaw - AI 学术助手
+---
+
+<div class="xclaw-page">
+
+<!-- Hero -->
+<div class="xclaw-hero">
+  <img class="xclaw-hero-bg" src="./assets/feishu/promo-hero.jpg" alt="">
+  <div class="xclaw-hero-overlay">
+    <div class="xclaw-hero-inner">
+      <div class="xclaw-badge">POWERED BY CLAUDE OPUS 4.6</div>
+      <h1 class="xclaw-title">XCodeClaw</h1>
+      <div class="xclaw-tagline">你的 AI 学术助手</div>
+      <p class="xclaw-desc">满血 Opus 4.6 大模型 + 联网搜索 + 图像生成 + 完整科研工具链，<br>开箱即用，飞书直达。</p>
+      <div class="xclaw-chips">
+        <div class="xclaw-chip"><span class="chip-dot" style="background:#7c3aed;"></span> Claude Opus 4.6</div>
+        <div class="xclaw-chip"><span class="chip-dot" style="background:#0ea5e9;"></span> Tavily 搜索</div>
+        <div class="xclaw-chip"><span class="chip-dot" style="background:#f43f5e;"></span> Banana 画图</div>
+        <div class="xclaw-chip"><span class="chip-dot" style="background:#16a34a;"></span> LaTeX 排版</div>
+        <div class="xclaw-chip"><span class="chip-dot" style="background:#f97316;"></span> 飞书集成</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 核心优势 -->
+<div class="xclaw-section xclaw-section-alt">
+  <div class="xclaw-inner">
+    <div class="xclaw-slabel">Core Advantages</div>
+    <div class="xclaw-stitle">为什么选择 XCodeClaw？</div>
+    <p class="xclaw-sdesc">不只是一个聊天机器人，而是一个真正懂学术的 AI 科研伙伴。</p>
+    <div class="xclaw-grid">
+      <div class="xclaw-card">
+        <div class="xclaw-icon" style="background: linear-gradient(135deg, #2B5CE6, #7c3aed);">AI</div>
+        <h3>满血大模型</h3>
+        <p>搭载 Claude Opus 4.6，当前最强推理模型之一。200K 超长上下文窗口，轻松处理长篇论文和复杂分析任务。</p>
+      </div>
+      <div class="xclaw-card">
+        <div class="xclaw-icon" style="background: linear-gradient(135deg, #F97316, #f43f5e);">S</div>
+        <h3>实时联网搜索</h3>
+        <p>集成 Tavily 学术搜索引擎，实时检索最新文献和资料。告别信息滞后，紧跟学术前沿。</p>
+      </div>
+      <div class="xclaw-card">
+        <div class="xclaw-icon" style="background: linear-gradient(135deg, #16A34A, #0ea5e9);">G</div>
+        <h3>AI 画图</h3>
+        <p>内置 Banana 图像生成能力（Gemini 4K），可直接生成流程图、示意图、架构图等学术插图，论文配图一步到位。</p>
+      </div>
+      <div class="xclaw-card">
+        <div class="xclaw-icon" style="background: linear-gradient(135deg, #8b5cf6, #ec4899);">T</div>
+        <h3>LaTeX 全家桶</h3>
+        <p>预装 TeX Live 完整版 + 中文字体（宋体/黑体/雅黑/Noto），直接生成专业排版学术文档并编译输出 PDF。</p>
+      </div>
+      <div class="xclaw-card">
+        <div class="xclaw-icon" style="background: linear-gradient(135deg, #0ea5e9, #06b6d4);">D</div>
+        <h3>科学计算栈</h3>
+        <p>内置 NumPy、SciPy、Pandas、Matplotlib、Scikit-learn、Seaborn 等全套数据分析与可视化工具。</p>
+      </div>
+      <div class="xclaw-card">
+        <div class="xclaw-icon" style="background: linear-gradient(135deg, #f43f5e, #f97316);">F</div>
+        <h3>开箱即用</h3>
+        <p>在飞书中直接对话使用，无需安装任何软件。管理员一键部署，用户零学习成本，即开即用。</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 学术场景 -->
+<div class="xclaw-section">
+  <div class="xclaw-inner">
+    <div class="xclaw-slabel">Academic Scenarios</div>
+    <div class="xclaw-stitle">专为科研场景打造</div>
+    <p class="xclaw-sdesc">从文献调研到论文写作，从数据分析到报告排版，覆盖科研全流程。</p>
+
+    <div class="xclaw-showcase">
+      <div class="xclaw-showcase-text">
+        <h3>深度学术调研</h3>
+        <p>内置 Deep Research Pro 技能，可自主进行多源深度检索，综合分析后生成带引用的结构化研究报告。严格引用学术来源——期刊论文、会议论文、学术专著，拒绝博客和百科，杜绝编造引用。</p>
+        <div class="xclaw-tags">
+          <span class="xclaw-tag">多源检索</span>
+          <span class="xclaw-tag">自动引用</span>
+          <span class="xclaw-tag">结构化报告</span>
+        </div>
+      </div>
+      <div class="xclaw-showcase-img">
+        <img src="./assets/feishu/promo-research.jpg" alt="深度学术调研">
+      </div>
+    </div>
+
+    <div class="xclaw-showcase xclaw-showcase-reverse">
+      <div class="xclaw-showcase-text">
+        <h3>论文写作与润色</h3>
+        <p>专业的学术写作能力，自动消除 AI 写作痕迹，产出地道流畅的中英文学术表达。数学公式自动 LaTeX 格式化，引用格式严格规范。支持直接生成 LaTeX 源文件并编译为高质量 PDF。</p>
+        <div class="xclaw-tags">
+          <span class="xclaw-tag">去 AI 痕迹</span>
+          <span class="xclaw-tag">公式排版</span>
+          <span class="xclaw-tag">PDF 输出</span>
+        </div>
+      </div>
+      <div class="xclaw-showcase-img">
+        <img src="./assets/feishu/promo-latex.jpg" alt="论文写作与排版">
+      </div>
+    </div>
+
+    <div class="xclaw-showcase">
+      <div class="xclaw-showcase-text">
+        <h3>数据分析与可视化</h3>
+        <p>完整的 Python 科学计算环境，直接在对话中处理数据、运行统计分析、生成专业图表。上传数据文件即可开始，结果以图表形式直接返回到飞书。</p>
+        <div class="xclaw-tags">
+          <span class="xclaw-tag">NumPy</span>
+          <span class="xclaw-tag">Pandas</span>
+          <span class="xclaw-tag">Matplotlib</span>
+          <span class="xclaw-tag">Scikit-learn</span>
+          <span class="xclaw-tag">SciPy</span>
+        </div>
+      </div>
+      <div class="xclaw-showcase-img">
+        <img src="./assets/feishu/promo-data.jpg" alt="数据分析与可视化">
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 对比 -->
+<div class="xclaw-section xclaw-section-alt">
+  <div class="xclaw-inner">
+    <div class="xclaw-slabel">Comparison</div>
+    <div class="xclaw-stitle">与通用 AI 工具的区别</div>
+    <p class="xclaw-sdesc">通用 AI 工具缺乏科研专业性，XCodeClaw 专为学术场景深度定制。</p>
+    <table class="xclaw-compare">
+      <thead>
+        <tr><th>能力</th><th>XCodeClaw</th><th>通用 AI 助手</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>满血 Opus 4.6 模型</td><td class="xc-yes">✓ 完整版</td><td class="xc-no">— 通常为低配版本</td></tr>
+        <tr><td>实时联网检索</td><td class="xc-yes">✓ Tavily 学术搜索</td><td class="xc-no">— 无或受限</td></tr>
+        <tr><td>AI 画图（4K）</td><td class="xc-yes">✓ Banana / Gemini</td><td class="xc-no">— 无或需额外付费</td></tr>
+        <tr><td>LaTeX 编译输出 PDF</td><td class="xc-yes">✓ TeX Live 完整版</td><td class="xc-no">— 仅输出代码片段</td></tr>
+        <tr><td>科学计算环境</td><td class="xc-yes">✓ 完整 Python 数据分析栈</td><td class="xc-no">— 无执行环境</td></tr>
+        <tr><td>学术引用规范</td><td class="xc-yes">✓ 严格学术来源</td><td class="xc-no">— 可能编造引用</td></tr>
+        <tr><td>AI 写作痕迹消除</td><td class="xc-yes">✓ 专项优化</td><td class="xc-no">— 无</td></tr>
+        <tr><td>飞书原生集成</td><td class="xc-yes">✓ 流式回复 + 多轮对话</td><td class="xc-no">— 需切换应用</td></tr>
+        <tr><td>独立容器隔离</td><td class="xc-yes">✓ 每用户独享环境</td><td class="xc-no">— 共享环境</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<!-- 三步开始使用 -->
+<div class="xclaw-section xclaw-section-dark">
+  <div class="xclaw-inner">
+    <div class="xclaw-slabel xclaw-slabel-accent">Quick Start</div>
+    <div class="xclaw-stitle" style="color: #fff;">三步开始使用</div>
+    <p class="xclaw-sdesc">无需安装软件，无需配置环境，飞书里直接用。</p>
+    <div class="xclaw-steps">
+      <div class="xclaw-step">
+        <div class="xclaw-step-num">1</div>
+        <h3>创建飞书应用</h3>
+        <p>在飞书开放平台创建应用，添加机器人能力，导入权限配置。跟着指南操作，10 分钟搞定。</p>
+      </div>
+      <div class="xclaw-step">
+        <div class="xclaw-step-num">2</div>
+        <h3>交给管理员</h3>
+        <p>将 App ID 和 App Secret 发送给管理员。管理员一键创建您的专属服务实例，独立容器，安全隔离。</p>
+      </div>
+      <div class="xclaw-step">
+        <div class="xclaw-step-num">3</div>
+        <h3>开始使用</h3>
+        <p>在飞书中搜索机器人名称，发送消息即可。支持私聊和群聊 @，流式实时回复，多轮上下文记忆。</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 技术架构 -->
+<div class="xclaw-section">
+  <div class="xclaw-inner">
+    <div class="xclaw-slabel">Tech Stack</div>
+    <div class="xclaw-stitle">技术架构</div>
+    <p class="xclaw-sdesc">基于 OpenClaw 构建，企业级多租户架构，安全可靠。</p>
+    <div class="xclaw-grid">
+      <div class="xclaw-card">
+        <h3>多租户容器隔离</h3>
+        <p>每位用户独享一个 Docker 容器，数据完全隔离，互不干扰。支持独立配置和资源管控。</p>
+      </div>
+      <div class="xclaw-card">
+        <h3>自愈配置系统</h3>
+        <p>启动时自动检测和修复配置问题，插件自动更新，无需人工维护，持续保持最佳状态。</p>
+      </div>
+      <div class="xclaw-card">
+        <h3>流式实时响应</h3>
+        <p>飞书消息流式输出，边生成边展示，无需等待。支持耗时任务状态显示和进度追踪。</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- CTA -->
+<div class="xclaw-cta">
+  <h2>开始使用 XCodeClaw</h2>
+  <p>让 AI 成为你的科研伙伴，从今天开始提升学术生产力。</p>
+  <a href="/guide/feishu-bot" class="xclaw-cta-btn">查看配置指南 →</a>
+</div>
+
+</div>
+
+<style scoped>
+.xclaw-page { max-width: 100vw; overflow-x: hidden; }
+
+/* Hero */
+.xclaw-hero {
+  position: relative; background: #0f1629; color: #f1f5f9;
+  text-align: center; overflow: hidden; margin: -24px -24px 0;
+}
+.xclaw-hero-bg { width: 100%; display: block; opacity: 0.6; }
+.xclaw-hero-overlay {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(180deg, rgba(15,22,41,0.3) 0%, rgba(15,22,41,0.85) 70%, rgba(15,22,41,1) 100%);
+  display: flex; align-items: center; justify-content: center;
+}
+.xclaw-hero-inner { position: relative; z-index: 1; max-width: 800px; padding: 60px 24px; }
+.xclaw-badge {
+  display: inline-block; background: rgba(43,92,230,0.2); border: 1px solid rgba(43,92,230,0.4);
+  border-radius: 20px; padding: 6px 20px; font-size: 0.85em; color: #FDBA74;
+  margin-bottom: 24px; letter-spacing: 1px;
+}
+.xclaw-title {
+  font-size: 3.2em !important; font-weight: 800; margin-bottom: 12px;
+  background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+  border: none !important;
+}
+.xclaw-tagline { font-size: 1.5em; color: #F97316; font-weight: 600; margin-bottom: 20px; }
+.xclaw-desc { font-size: 1.1em; color: #94a3b8; max-width: 600px; margin: 0 auto 36px; }
+.xclaw-chips { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
+.xclaw-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 8px; padding: 10px 20px; font-size: 0.95em; color: #f1f5f9;
+}
+.chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+
+/* Section */
+.xclaw-section { padding: 80px 24px; }
+.xclaw-section-alt { background: var(--vp-c-bg-soft); }
+.xclaw-section-dark { background: #0f1629; color: #f1f5f9; }
+.xclaw-inner { max-width: 960px; margin: 0 auto; }
+.xclaw-slabel {
+  display: inline-block; font-size: 0.8em; font-weight: 700; letter-spacing: 2px;
+  text-transform: uppercase; color: #2B5CE6; margin-bottom: 10px;
+}
+.xclaw-slabel-accent { color: #FDBA74; }
+.xclaw-stitle {
+  font-size: 2em; font-weight: 800; margin-bottom: 16px; line-height: 1.3; border: none !important;
+}
+.xclaw-sdesc { font-size: 1.05em; color: var(--vp-c-text-2); max-width: 640px; margin-bottom: 40px; }
+.xclaw-section-dark .xclaw-sdesc { color: #94a3b8; }
+
+/* Feature Grid */
+.xclaw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+.xclaw-card {
+  background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 14px;
+  padding: 28px 24px; transition: box-shadow 0.2s, transform 0.2s;
+}
+.xclaw-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); transform: translateY(-2px); }
+.xclaw-card h3 { font-size: 1.1em; font-weight: 700; margin-bottom: 8px; border: none !important; }
+.xclaw-card p { font-size: 0.92em; color: var(--vp-c-text-2); line-height: 1.6; }
+.xclaw-icon {
+  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center;
+  justify-content: center; font-size: 1.3em; font-weight: 800; margin-bottom: 16px; color: #fff;
+}
+
+/* Showcase */
+.xclaw-showcase {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
+  align-items: center; margin-bottom: 64px;
+}
+.xclaw-showcase:last-child { margin-bottom: 0; }
+.xclaw-showcase-reverse { direction: rtl; }
+.xclaw-showcase-reverse > * { direction: ltr; }
+.xclaw-showcase-text h3 { font-size: 1.5em; font-weight: 700; margin-bottom: 12px; border: none !important; }
+.xclaw-showcase-text p { color: var(--vp-c-text-2); margin-bottom: 16px; line-height: 1.7; }
+.xclaw-showcase-img {
+  border-radius: 14px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+}
+.xclaw-showcase-img img { width: 100%; display: block; }
+.xclaw-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
+.xclaw-tag {
+  display: inline-block; background: rgba(43,92,230,0.08); color: #2B5CE6;
+  border-radius: 6px; padding: 5px 14px; font-size: 0.85em; font-weight: 600;
+}
+
+/* Compare Table */
+.xclaw-compare { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95em; }
+.xclaw-compare th {
+  background: #2B5CE6; color: #fff; padding: 14px 20px; text-align: left; font-weight: 600;
+}
+.xclaw-compare th:first-child { border-radius: 10px 0 0 0; }
+.xclaw-compare th:last-child { border-radius: 0 10px 0 0; }
+.xclaw-compare td { padding: 12px 20px; border-bottom: 1px solid var(--vp-c-divider); }
+.xclaw-compare tr:last-child td { border-bottom: none; }
+.xclaw-compare tr:nth-child(even) { background: var(--vp-c-bg-soft); }
+.xc-yes { color: #16A34A; font-weight: 700; }
+.xc-no { color: #d1d5db; }
+
+/* Steps */
+.xclaw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+.xclaw-step { background: #1a2240; border-radius: 14px; padding: 28px 24px; }
+.xclaw-step-num {
+  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
+  background: linear-gradient(135deg, #2B5CE6, #7c3aed); border-radius: 10px;
+  font-weight: 800; font-size: 1em; margin-bottom: 14px; color: #fff;
+}
+.xclaw-step h3 { font-size: 1.05em; margin-bottom: 8px; color: #f1f5f9; border: none !important; }
+.xclaw-step p { font-size: 0.9em; color: #94a3b8; }
+
+/* CTA */
+.xclaw-cta {
+  text-align: center; padding: 80px 24px;
+  background: linear-gradient(180deg, var(--vp-c-bg) 0%, #eff6ff 100%);
+}
+.xclaw-cta h2 { font-size: 2em; font-weight: 800; margin-bottom: 16px; border: none !important; }
+.xclaw-cta p { color: var(--vp-c-text-2); max-width: 500px; margin: 0 auto 32px; font-size: 1.05em; }
+.xclaw-cta-btn {
+  display: inline-block; background: linear-gradient(135deg, #2B5CE6, #7c3aed);
+  color: #fff !important; padding: 14px 36px; border-radius: 10px; font-size: 1.05em;
+  font-weight: 700; text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s;
+}
+.xclaw-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43,92,230,0.3); }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .xclaw-hero-inner { padding: 40px 16px; }
+  .xclaw-title { font-size: 2.2em !important; }
+  .xclaw-tagline { font-size: 1.2em; }
+  .xclaw-grid { grid-template-columns: 1fr; }
+  .xclaw-showcase { grid-template-columns: 1fr; }
+  .xclaw-showcase-reverse { direction: ltr; }
+  .xclaw-steps { grid-template-columns: 1fr; }
+  .xclaw-section { padding: 50px 20px; }
+}
+@media (min-width: 769px) and (max-width: 1024px) {
+  .xclaw-grid { grid-template-columns: repeat(2, 1fr); }
+}
+</style>