diff --git a/example/ExampleApeart.Application.Contracts/usermodels/GradeInfoDto.cs b/example/ExampleApeart.Application.Contracts/usermodels/GradeInfoDto.cs
index 5cfd175..a142604 100644
--- a/example/ExampleApeart.Application.Contracts/usermodels/GradeInfoDto.cs
+++ b/example/ExampleApeart.Application.Contracts/usermodels/GradeInfoDto.cs
@@ -17,6 +17,7 @@ namespace ExampleApeart.usermodels
         ///</summary>
         [MaxLength(8)]
         [Required]
+        [PasteOrderby]
         [Description("代码 最大8个字符，用于系统内标识，标识权限模块等")]
         public string Code { get; set; }
 
@@ -25,6 +26,7 @@ namespace ExampleApeart.usermodels
         ///</summary>
         [MaxLength(16)]
         [Required]
+        [PasteOrderby]
         [Description("名称 只要是系统内不重复即可，必填")]
         public string Name { get; set; }
 
@@ -32,6 +34,7 @@ namespace ExampleApeart.usermodels
         ///描述 对这个角色的补充说明 64
         ///</summary>
         [MaxLength(64)]
+        [PasteOrderby]
         [Description("描述 对这个角色的补充说明 64")]
         public string Desc { get; set; }
 
@@ -39,6 +42,7 @@ namespace ExampleApeart.usermodels
         ///备注 这个角色的内部备注，desc一般表示外部备注 64
         ///</summary>
         [MaxLength(64)]
+        [PasteOrderby]
         [Description("备注 这个角色的内部备注，desc一般表示外部备注 64")]
         public string Mark { get; set; }
 
@@ -46,30 +50,31 @@ namespace ExampleApeart.usermodels
         ///状态
         ///</summary>
         [Description("状态")]
+        [PasteOrderby]
         public bool IsEnable { get; set; } = true;
 
-        /// <summary>
-        /// int 模拟输入多个int,使用,分割
-        /// </summary>
-        [PasteSplit(",")]
-        public int[] ids { get; set; }
-
-        /// <summary>
-        /// DateTime 模拟输入多个DateTime,使用;分割
-        /// </summary>
-        [PasteSplit(";")]
-        public DateTime[] dates { get; set; }
-
-        /// <summary>
-        /// 测试 测试全部/无的枚举功能
-        /// </summary>
-        public EnumRoleType roletype { get; set; } = EnumRoleType.Menu;
-
-        /// <summary>
-        /// DataList
-        /// </summary>
-        [PasteDatalist("","0")]
-        public EnumRoleType datalist { get; set; }
+        ///// <summary>
+        ///// int 模拟输入多个int,使用,分割
+        ///// </summary>
+        //[PasteSplit(",")]
+        //public int[] ids { get; set; }
+
+        ///// <summary>
+        ///// DateTime 模拟输入多个DateTime,使用;分割
+        ///// </summary>
+        //[PasteSplit(";")]
+        //public DateTime[] dates { get; set; }
+
+        ///// <summary>
+        ///// 测试 测试全部/无的枚举功能
+        ///// </summary>
+        //public EnumRoleType roletype { get; set; } = EnumRoleType.Menu;
+
+        ///// <summary>
+        ///// DataList
+        ///// </summary>
+        //[PasteDatalist("","0")]
+        //public EnumRoleType datalist { get; set; }
 
     }
 

diff --git a/example/ExampleApeart.Application.Contracts/usermodels/UserInfoDto.cs b/example/ExampleApeart.Application.Contracts/usermodels/UserInfoDto.cs
index 4569f9c..7e0ecec 100644
--- a/example/ExampleApeart.Application.Contracts/usermodels/UserInfoDto.cs
+++ b/example/ExampleApeart.Application.Contracts/usermodels/UserInfoDto.cs
@@ -244,6 +244,16 @@ namespace ExampleApeart.usermodels
     [Description("查询")]
     public class InputQueryUserInfo : InputSearchBase
     {
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public InputQueryUserInfo()
+        {
+            sdate = DateTime.Parse(DateTime.Now.ToString("yyyy-MM-01"));
+            edate = sdate.Value.AddMonths(1);
+        }
+
         /// <summary>
         /// 注册区间
         /// </summary>
@@ -274,4 +284,9 @@ namespace ExampleApeart.usermodels
 
 
     }
+
+
+
+
+
 }
\ No newline at end of file

diff --git a/example/ExampleApeart.HttpApi.Host/Controllers/TestController.cs b/example/ExampleApeart.HttpApi.Host/Controllers/TestController.cs
index 6502ce0..34d50cb 100644
--- a/example/ExampleApeart.HttpApi.Host/Controllers/TestController.cs
+++ b/example/ExampleApeart.HttpApi.Host/Controllers/TestController.cs
@@ -5,6 +5,7 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using PasteApeart.Handler;
 using PasteApeart.Helper;
+using System.Dynamic;
 using System.Text;
 
 namespace ExampleApeart.HttpApi.Host.Controllers
@@ -86,6 +87,9 @@ namespace ExampleApeart.HttpApi.Host.Controllers
         public async Task<string> TestAdaptAsync()
         {
             var first = await _dbContext.UserInfo.OrderBy(x => x.Id).AsNoTracking().FirstOrDefaultAsync();
+            ExpandoObject abd = new ExpandoObject();
+            dynamic dobj = new ExpandoObject();
+            dobj.abc = "123";
 
             var newone = new UserInfo { };
             first.Adapt(newone);

diff --git a/example/ExampleApeart.HttpApi.Host/ExampleApeart.Application.Contracts.xml b/example/ExampleApeart.HttpApi.Host/ExampleApeart.Application.Contracts.xml
index f61cea0..992274e 100644
--- a/example/ExampleApeart.HttpApi.Host/ExampleApeart.Application.Contracts.xml
+++ b/example/ExampleApeart.HttpApi.Host/ExampleApeart.Application.Contracts.xml
@@ -104,26 +104,6 @@
             状态
             </summary>
         </member>
-        <member name="P:ExampleApeart.usermodels.GradeInfoAddDto.ids">
-            <summary>
-            int 模拟输入多个int,使用,分割
-            </summary>
-        </member>
-        <member name="P:ExampleApeart.usermodels.GradeInfoAddDto.dates">
-            <summary>
-            DateTime 模拟输入多个DateTime,使用;分割
-            </summary>
-        </member>
-        <member name="P:ExampleApeart.usermodels.GradeInfoAddDto.roletype">
-            <summary>
-            测试 测试全部/无的枚举功能
-            </summary>
-        </member>
-        <member name="P:ExampleApeart.usermodels.GradeInfoAddDto.datalist">
-            <summary>
-            DataList
-            </summary>
-        </member>
         <member name="T:ExampleApeart.usermodels.GradeInfoUpdateDto">
             <summary>
             角色信息 一个账号可以绑定多个角色,角色绑定权限
@@ -909,6 +889,11 @@
              查询
             </summary>
         </member>
+        <member name="M:ExampleApeart.usermodels.InputQueryUserInfo.#ctor">
+            <summary>
+            
+            </summary>
+        </member>
         <member name="P:ExampleApeart.usermodels.InputQueryUserInfo.sdate">
             <summary>
             注册区间

diff --git a/framework/Directory.Build.props b/framework/Directory.Build.props
index 6250c4d..4864674 100644
--- a/framework/Directory.Build.props
+++ b/framework/Directory.Build.props
@@ -1,7 +1,7 @@
 <Project>
   <PropertyGroup>
-    <Version>26.9.24</Version>
-    <FileVersion>26.9.24</FileVersion>
-    <AssemblyVersion>26.9.24</AssemblyVersion>
+    <Version>26.10.01</Version>
+    <FileVersion>26.10.01</FileVersion>
+    <AssemblyVersion>26.10.01</AssemblyVersion>
   </PropertyGroup>
 </Project>
\ No newline at end of file

diff --git a/framework/PasteApeart.Application/PasteDefaultHelper.cs b/framework/PasteApeart.Application/PasteDefaultHelper.cs
index 736db2f..bd90232 100644
--- a/framework/PasteApeart.Application/PasteDefaultHelper.cs
+++ b/framework/PasteApeart.Application/PasteDefaultHelper.cs
@@ -2044,8 +2044,11 @@ namespace PasteApeart.Application
                 //    actionOrderby = true;
                 //}
                 #endregion
+
+                //Console.WriteLine(orderby);
                 //支持多个查询，比如id,name desc
                 query = PasteOrder(query, orderby);
+                actionOrderby = true;
             }
             if (!actionOrderby)
             {

diff --git a/framework/PasteApeart.Application/readme.md b/framework/PasteApeart.Application/readme.md
index 0e955d4..c55074b 100644
--- a/framework/PasteApeart.Application/readme.md
+++ b/framework/PasteApeart.Application/readme.md
@@ -1,5 +1,8 @@
 ## 版本说明
 
+## 26.10.01
+	1.修复排序不生效的问题
+
 ## 26.09.17
 	1.orderby 忽略大小写
 

diff --git a/website/README.md b/website/README.md
new file mode 100644
index 0000000..d0dea36
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,134 @@
+# PasteApeart 官网
+
+> **All in Dto + All in Handler** —— DTO 元数据驱动 UI，Handler 聚合业务场景。
+
+原生静态站点：`HTML + 原生 JS + LESS`，无框架、无构建工具依赖，双击 `index.html` 即可浏览。
+
+---
+
+## 文件结构
+
+```
+pasteapeart-website/
+├── index.html      # 单页站点，15 个 section
+├── styles.less     # 样式源文件（LESS）
+├── styles.css      # 编译产物 —— 页面实际加载的就是它
+├── main.js         # 交互脚本（原生 JS，无依赖）
+└── README.md
+```
+
+> ⚠️ **修改样式请改 `styles.less`，然后重新编译出 `styles.css`。**
+> 页面通过 `<link rel="stylesheet" href="styles.css">` 加载样式，**不会**在浏览器里
+> 运行时编译 LESS。原因：浏览器端 `less.js` 需要 XHR 拉取 `.less` 文件，用 `file://`
+> 直接打开页面时会被 CORS 拦截，导致页面完全没有样式。
+
+---
+
+## 本地预览
+
+直接双击 `index.html` 即可（无需服务器）。
+
+需要本地服务器时（例如想用 http 调试）：
+
+```bash
+# 任选其一
+npx serve pasteapeart-website
+python -m http.server -d pasteapeart-website 8080
+```
+
+---
+
+## 编译 LESS
+
+```bash
+npm install less            # 一次性
+npx lessc styles.less styles.css
+```
+
+或全局安装：
+
+```bash
+npm i -g less
+lessc styles.less styles.css
+```
+
+### LESS 踩坑提醒
+
+`.container` 的宽度写法必须转义，否则 LESS 会把它当算术式计算：
+
+```less
+// ❌ 错误：LESS 算出 100% - 40 = 60，编译成 min(60%, 1200px)
+width: min(100% - 40px, @container-width);
+
+// ✅ 正确：用 ~"" 转义字符串，LESS 原样输出
+width: min(@container-width, ~"calc(100% - 40px)");
+```
+
+`calc()` 内的运算 LESS 不会计算，但 `min()` / `max()` / `clamp()` 会。
+
+---
+
+## 页面板块
+
+| # | id | 内容 |
+|---|----|----|
+| 1 | `hero` | 首屏：`All in Dto + All in Handler` + 浏览器窗口预览 |
+| 2 | `pillars` | 双支柱：PasteForm（All in Dto）/ PasteApeart（All in Dto + All in Handler） |
+| 3 | `evolution` | PasteForm 演进路径 |
+| 4 | `problem` | 痛点 |
+| 5 | `solution` | 方案对照 |
+| 6 | `architecture` | 三层架构：`Host → Application → Handler` |
+| 7 | `multihost` | 6 种宿主：HTTP / MQ / Timer / Job / Event / Background |
+| 8 | `features` | 核心特性 |
+| 9 | `attributes` | 特性系统，51 个特性、12 个分组，支持实时搜索 |
+| 10 | `eventmodel` | 事件模型 IEventModel + 代码示例 + 事件流程 |
+| 11 | `toolchain` | 工具链 |
+| 12 | `howitworks` | 工作流 |
+| 13 | `usecases` | 适用场景 |
+| 14 | `ecosystem` | 生态与链接 |
+| 15 | `cta` | CTA + Footer |
+
+---
+
+## 交互说明（`main.js`）
+
+| 功能 | 说明 |
+|------|------|
+| 移动端导航 | 汉堡按钮展开/收起；支持点击外部、Esc、窗口 > 1080px 自动关闭 |
+| 平滑滚动 | 锚点跳转带 72px 导航栏偏移 |
+| 滚动入场 | `IntersectionObserver` 给 `.fade-up` 加 `.in`，逐个触发后自动取消观察 |
+| 导航高亮 | 当前板块对应的导航项高亮 |
+| 特性搜索 | 按名称 / 说明 / `data-keywords` 实时过滤；无结果显示空状态；一键清空 |
+| 代码复制 | `navigator.clipboard`，不可用时回退 `execCommand('copy')` |
+| 回顶按钮 | 滚动超过 400px 出现 |
+| 年份 | Footer 自动取当前年份 |
+
+无障碍：`nav-toggle` 带 `aria-expanded`，`prefers-reduced-motion: reduce` 下关闭所有过渡与位移动画。
+
+---
+
+## 外部依赖（CDN）
+
+- Google Fonts：Inter、JetBrains Mono
+- Bootstrap Icons 1.11.3
+- Prism.js 1.29.0（代码高亮）
+
+离线环境下以上三项会失效，页面结构与样式不受影响（图标会缺失、代码块无高亮）。
+
+---
+
+## 已验证
+
+- `lessc` 编译 exit 0；`node --check main.js` exit 0
+- 360 / 390 / 768 / 820 / 1024 / 1440 六个断点**均无页面级横向滚动**
+- 控制台报错 0、页面异常 0
+- 特性搜索：51 → 搜 `image` 剩 1 项且只显示 1 个分组 → 无匹配显示空状态 → 清空恢复 51 项
+- 移动端汉堡菜单可正常展开
+
+---
+
+## 相关链接
+
+- README：<https://gita.pastecode.cn/apeart/paste-apeart/full/master/readme.md>
+- 特性文档：<https://gita.pastecode.cn/apeart/paste-apeart/full/master/framework/PasteApeart.Helper/docs/md.md>
+- PasteForm 源码：<https://gitee.com/pastecode/paste-form>
\ No newline at end of file

diff --git a/website/index.html b/website/index.html
new file mode 100644
index 0000000..0b35649
--- /dev/null
+++ b/website/index.html
@@ -0,0 +1,1087 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PasteApeart · All in Dto + All in Handler - DTO 驱动 UI + Handler 聚合业务场景</title>
+  <meta name="description"
+    content="PasteApeart（PasteForm 进阶版）是 All in Dto + All in Handler 的管理后台开发框架。DTO 元数据驱动 UI，Handler 聚合业务场景，实现管理端 0 代码与业务逻辑多宿主复用。" />
+  <meta name="keywords"
+    content="PasteApeart, PasteForm, All in Dto, All in Handler, DTO驱动, Handler聚合, CRUD框架, 管理后台极速开发, ABP, 元数据驱动UI, 业务场景复用, 6种宿主" />
+  <meta property="og:title" content="PasteApeart · All in Dto + All in Handler" />
+  <meta property="og:description" content="DTO 定义 UI，Handler 聚合业务场景。管理端 0 代码，业务逻辑一次编写、多宿主复用。" />
+  <meta property="og:type" content="website" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
+    rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <!-- Header -->
+  <header class="nav" id="nav">
+    <div class="container nav-inner">
+      <a href="#hero" class="logo">
+        <div class="logo-mark"><span>P</span></div>
+        <span class="logo-text">PasteApeart</span>
+      </a>
+      <nav class="nav-links" id="navLinks">
+        <a href="#pillars">双支柱</a>
+        <a href="#architecture">架构设计</a>
+        <a href="#multihost">多宿主复用</a>
+        <a href="#features">核心特性</a>
+        <a href="#attributes">特性系统</a>
+        <a href="#eventmodel">事件模型</a>
+        <a href="#toolchain">工具链</a>
+        <a href="#ecosystem">生态</a>
+      </nav>
+      <div class="nav-actions">
+        <a href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/readme.md" target="_blank" rel="noopener"
+          class="btn btn-ghost">
+          <i class="bi bi-journal-text"></i> README
+        </a>
+        <a href="https://gitee.com/pastecode/paste-apeart" target="_blank" rel="noopener" class="btn btn-primary">
+          <i class="bi bi-git"></i> Gitee 源码
+        </a>
+        <button class="nav-toggle" id="navToggle" aria-label="切换导航" aria-expanded="false">
+          <i class="bi bi-list"></i>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <!-- Hero -->
+    <section id="hero" class="hero">
+      <div class="container hero-inner">
+        <div class="hero-content fade-up">
+          <div class="badge"><span class="dot"></span>All in Dto + All in Handler</div>
+          <h1 class="hero-title">
+            <span class="gradient">DTO</span> 定义 UI · <span class="gradient">Handler</span> 聚合业务场景
+          </h1>
+          <p class="hero-subtitle">
+            PasteApeart 是 <strong>PasteForm（All in Dto）</strong> 的进阶版。<br />
+            通过 DTO 元数据驱动管理端 UI，并以<strong>业务场景（Business Scenario）</strong>聚合业务逻辑，<br />
+            实现<strong>管理端 0 代码</strong> + <strong>业务逻辑一次编写、多宿主复用</strong>。
+          </p>
+          <div class="hero-actions">
+            <a href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/readme.md" target="_blank" rel="noopener"
+              class="btn btn-primary btn-lg">
+              <i class="bi bi-rocket-takeoff"></i> 快速开始
+            </a>
+            <a href="https://gitee.com/pastecode/paste-apeart" target="_blank" rel="noopener" class="btn btn-ghost btn-lg">
+              <i class="bi bi-code-slash"></i> 查看源码
+            </a>
+          </div>
+          <div class="hero-tags">
+            <span class="tag">All in Dto</span>
+            <span class="tag">All in Handler</span>
+            <span class="tag">DTO 元数据驱动 UI</span>
+            <span class="tag">业务场景聚合（Handler）</span>
+            <span class="tag">6 种宿主复用</span>
+            <span class="tag">IEventModel · 幂等·延迟</span>
+          </div>
+        </div>
+        <div class="hero-visual fade-up delay-1">
+          <div class="mockup">
+            <div class="mockup-header">
+              <span class="dot red"></span>
+              <span class="dot yellow"></span>
+              <span class="dot green"></span>
+              <span class="mockup-title">PasteApeart · All in Dto + All in Handler</span>
+            </div>
+            <div class="mockup-body">
+              <div class="pillars-preview">
+                <div class="pillar-pill dto">
+                  <span class="pillar-dot"></span>All in Dto · UI 由 DTO 元数据驱动
+                </div>
+                <div class="pillar-pill handler">
+                  <span class="pillar-dot"></span>All in Handler · 业务按场景聚合到 Handler
+                </div>
+              </div>
+              <div class="hosts-preview">
+                <div class="hosts-label">业务场景一次编写 · 多宿主复用</div>
+                <div class="hosts-chips">
+                  <span class="host-chip">HTTP</span>
+                  <span class="host-chip">MQ</span>
+                  <span class="host-chip">Timer</span>
+                  <span class="host-chip">Job</span>
+                  <span class="host-chip">Event</span>
+                  <span class="host-chip">Background</span>
+                </div>
+              </div>
+              <div class="arch-preview">
+                <div class="arch-layer host">Host · 视图聚合接口</div>
+                <div class="arch-line"></div>
+                <div class="arch-layer app">Application · 单表 CRUD（大部分 0 代码）</div>
+                <div class="arch-line"></div>
+                <div class="arch-layer handler">Handler · 业务场景聚合（可多宿主复用）</div>
+              </div>
+            </div>
+          </div>
+          <div class="glow"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Pillars -->
+    <section id="pillars" class="section">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>双支柱 · UI + 业务双收敛</h2>
+          <p>
+            PasteApeart 的核心是两条平行的收敛原则：<strong>All in Dto</strong> 收敛 UI 呈现，<strong>All in Handler</strong>
+            收敛业务规则，<br />
+            将管理后台开发从“重复适配”提升到“范式约束”。
+          </p>
+        </div>
+        <div class="pillars-grid fade-up delay-1">
+          <div class="card pillar-card dto">
+            <div class="pillar-header">
+              <div class="card-icon"><i class="bi bi-braces-asterisk"></i></div>
+              <div class="pillar-title">
+                <h3>All in Dto</h3>
+                <span class="pillar-tag">UI 由 DTO 元数据驱动</span>
+              </div>
+            </div>
+            <p>
+              将表格、搜索区、表单、新增/编辑/详情页的控件类型、布局、交互规则，都定义在 DTO 的特性（Attributes）与注释中。框架通过反射读取
+              <code>VoloModelInfo</code> 元数据，由通用前端统一渲染。
+            </p>
+            <ul class="pillar-list">
+              <li><i class="bi bi-check-circle"></i> DTO 改动即 UI 改动，前后端一次对齐</li>
+              <li><i class="bi bi-check-circle"></i> 管理端近乎 0 代码，页面骨架 <code>index.html / view.html / detail.html</code> 通用复用</li>
+              <li><i class="bi bi-check-circle"></i> 元数据驱动（<code>VoloModelInfo</code>），思想可跨语言平移</li>
+              <li><i class="bi bi-check-circle"></i> 统一 UI 范式，杜绝管理端风格割裂</li>
+            </ul>
+          </div>
+          <div class="card pillar-card handler">
+            <div class="pillar-header">
+              <div class="card-icon handler"><i class="bi bi-diagram-3"></i></div>
+              <div class="pillar-title">
+                <h3>All in Handler</h3>
+                <span class="pillar-tag handler">业务按场景聚合到 Handler</span>
+              </div>
+            </div>
+            <p>
+              将业务逻辑按<strong>业务场景（Business Scenario）</strong>聚合到 <code>Handler</code>
+              层，而不是按单表散落。<code>Application</code> 只做单表 CRUD 协调（大部分场景 0 代码），<code>Host</code>
+              只做跨表视图聚合。
+            </p>
+            <ul class="pillar-list">
+              <li><i class="bi bi-check-circle"></i><strong>业务收敛中心</strong>：一个业务场景的所有规则只写一次</li>
+              <li><i class="bi bi-check-circle"></i><strong>多宿主复用</strong>：一次编写，可被 6 种宿主反复调用</li>
+              <li><i class="bi bi-check-circle"></i><strong>职责清晰</strong>：Host → Application → Handler 严格单向引用（硬约束）</li>
+              <li><i class="bi bi-check-circle"></i><strong>杜绝业务扩散</strong>：强制业务收敛，架构更清晰、更易维护</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Evolution -->
+    <section id="evolution" class="section section-alt">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>从 PasteForm 到 PasteApeart</h2>
+          <p>
+            PasteApeart 是 PasteForm 的<strong>进阶版</strong>，并非推翻，而是进一步把“业务逻辑该放在哪”这个问题收敛到了
+            <code>Handler</code> 层。
+          </p>
+        </div>
+        <div class="evolution-grid fade-up delay-1">
+          <div class="evo-card form">
+            <div class="evo-badge">PasteForm</div>
+            <h3>All in Dto</h3>
+            <p>专注解决“管理端重复开发、前后端字段不一致”的问题。通过 DTO 元数据驱动 UI，实现管理端自动化。</p>
+            <div class="evo-focus">聚焦：UI 自动化 · 管理端 0 代码</div>
+          </div>
+          <div class="evo-arrow"><i class="bi bi-arrow-right"></i></div>
+          <div class="evo-card apeart">
+            <div class="evo-badge apeart">PasteApeart</div>
+            <h3>All in Dto + All in Handler</h3>
+            <p>在 All in Dto 的基础上，进一步解决“业务逻辑复用、职责边界混乱”的问题。将业务按场景聚合到 Handler，实现业务规则的多宿主复用。</p>
+            <div class="evo-focus">聚焦：UI 自动化 + 业务场景聚合 + 架构硬约束</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Problem -->
+    <section id="problem" class="section">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>痛点：重复的不是业务，是适配与组织方式</h2>
+          <p>
+            管理后台不仅面临字段同步的重复劳动，更面临<strong>复杂业务逻辑该写在哪、如何复用</strong>这个长期困扰团队的架构问题。
+          </p>
+        </div>
+        <div class="grid grid-4 fade-up delay-1">
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-arrow-repeat"></i></div>
+            <h3>管理端重复开发</h3>
+            <p>数十张表的 CRUD，结构雷同却要反复适配，字段增删需要多处同步。</p>
+          </div>
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-shuffle"></i></div>
+            <h3>前后端字段脱节</h3>
+            <p>DTO、API、前端表单难以保持一致，维护成本随表数量线性增长。</p>
+          </div>
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-layers"></i></div>
+            <h3>业务逻辑复用困难</h3>
+            <p>同一段跨表业务规则，常被复制到 Controller、Job、MQ、定时任务等不同入口，导致重复与不一致。</p>
+          </div>
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-diagram-2"></i></div>
+            <h3>代码放置混乱，难以收敛</h3>
+            <p>复杂业务堆砌在 AppService，职责不清，项目久了容易腐化，架构约束不够明确。</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Solution -->
+    <section id="solution" class="section section-alt">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>解决方案：<span class="gradient">DTO 定义 UI · Handler 聚合业务场景</span></h2>
+          <p>
+            PasteApeart 用两条收敛原则解决这两个层面的重复：<strong>UI 呈现收敛到 DTO 元数据</strong>，<strong>业务规则收敛到
+            Handler 场景</strong>。
+          </p>
+        </div>
+        <div class="compare fade-up delay-1">
+          <div class="compare-item">
+            <h3>传统方式</h3>
+            <ul>
+              <li>手写列表页、表单页、详情页 → 字段多处同步</li>
+              <li>业务逻辑按入口/单表散落（Controller、Job、MQ 重复实现）</li>
+              <li>跨表复杂逻辑难以复用，容易出现逻辑不一致</li>
+              <li>缺乏明确的架构硬约束，职责边界模糊</li>
+            </ul>
+          </div>
+          <div class="compare-arrow"><i class="bi bi-arrow-right"></i></div>
+          <div class="compare-item highlight">
+            <h3>PasteApeart（All in Dto + All in Handler）</h3>
+            <ul>
+              <li><strong>DTO + 特性定义 UI</strong> → 元数据自动渲染，改动一处即全局生效</li>
+              <li><strong>Handler 按业务场景聚合</strong> → 业务规则一次编写，到处复用</li>
+              <li><strong>多宿主复用</strong>（HTTP/MQ/Timer/Job/Event/Background）→ 逻辑永远一致</li>
+              <li><strong>Host → Application → Handler</strong> 单向引用硬约束 → 职责清晰、可维护</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Architecture -->
+    <section id="architecture" class="section">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>架构设计 · Handler 是业务收敛中心</h2>
+          <p>
+            PasteApeart 将职责严格划分为 <strong>Host · Application · Handler</strong> 三层，<br />
+            强制 <strong>Host → Application → Handler</strong> 单向引用（编译器级硬约束），将业务逻辑彻底收敛到 Handler 层。
+          </p>
+        </div>
+        <div class="arch-wrap fade-up delay-1">
+          <div class="arch-flow">
+            <div class="arch-node host">
+              <div class="arch-title">Host（视图接口层）</div>
+              <div class="arch-desc">为前端提供跨表聚合视图（View）接口，不污染核心业务逻辑</div>
+              <div class="arch-sub">职责：视图聚合 · 展示数据适配</div>
+            </div>
+            <div class="arch-arrow"><i class="bi bi-arrow-down"></i></div>
+            <div class="arch-node app">
+              <div class="arch-title">Application（单表 CRUD 协调层）</div>
+              <div class="arch-desc">围绕单张表，继承 <code>DefaultAppService</code> 可实现 <strong>0 代码</strong> CRUD</div>
+              <div class="arch-sub">职责：单表协调 · 薄层，不承载跨表复杂业务</div>
+            </div>
+            <div class="arch-arrow"><i class="bi bi-arrow-down"></i></div>
+            <div class="arch-node handler">
+              <div class="arch-title">Handler（业务场景聚合层）</div>
+              <div class="arch-desc"><strong>业务收敛中心</strong> —— 按业务场景（Scenario）组织，支持<strong>6 种宿主复用</strong></div>
+              <div class="arch-sub">职责：核心业务规则 · 跨表/跨领域 · 场景级复用</div>
+            </div>
+            <div class="arch-note">
+              引用方向：<strong>Host → Application → Handler</strong>（严格单向，不可逆向引用）—— 编译器级物理硬约束
+            </div>
+          </div>
+          <div class="arch-table">
+            <div class="arch-row head">
+              <div>对比维度</div>
+              <div>Handler</div>
+              <div>Application</div>
+              <div>Host</div>
+            </div>
+            <div class="arch-row">
+              <div>组织维度</div>
+              <div><strong>业务场景（Scenario）· 跨表</strong></div>
+              <div>单张数据库表</div>
+              <div>前端视图（View）· 跨表聚合</div>
+            </div>
+            <div class="arch-row">
+              <div>核心职责</div>
+              <div><strong>业务规则聚合与复用（All in Handler）</strong></div>
+              <div>标准增删改查协调</div>
+              <div>视图接口聚合，不污染业务</div>
+            </div>
+            <div class="arch-row">
+              <div>复用性</div>
+              <div><strong>最高</strong>（HTTP、MQ、Timer、Job、Event、Background · 6 种宿主）</div>
+              <div>单表维度</div>
+              <div>视图维度</div>
+            </div>
+            <div class="arch-row">
+              <div>代码量</div>
+              <div>按业务场景复杂度</div>
+              <div><strong>大部分场景 0 代码</strong>（继承 DefaultAppService）</div>
+              <div>按视图聚合需要</div>
+            </div>
+            <div class="arch-row">
+              <div>定位</div>
+              <div><strong>业务收敛中心</strong></div>
+              <div>CRUD 协调层（薄层）</div>
+              <div>展示适配层</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Multi-host Reuse -->
+    <section id="multihost" class="section section-alt">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>6 种宿主复用 · 一次编写，到处复用</h2>
+          <p>
+            在 PasteApeart 中，业务场景被聚合到 <strong>Handler</strong>。<br />
+            同一个 Handler 方法，不需要复制粘贴，就能被以下 6 种宿主调用，实现<strong>业务逻辑 100% 复用</strong>。
+          </p>
+        </div>
+        <div class="hosts-grid fade-up delay-1">
+          <div class="host-card">
+            <div class="host-icon"><i class="bi bi-globe2"></i></div>
+            <div class="host-name">HTTP</div>
+            <div class="host-desc">REST API 接口，Host/Application 对外暴露的 Web 接口</div>
+          </div>
+          <div class="host-card">
+            <div class="host-icon"><i class="bi bi-diagram-2"></i></div>
+            <div class="host-name">MQ</div>
+            <div class="host-desc">消息队列（Message Queue），异步消息消费场景</div>
+          </div>
+          <div class="host-card">
+            <div class="host-icon"><i class="bi bi-clock-history"></i></div>
+            <div class="host-name">Timer</div>
+            <div class="host-desc">定时器（Timer），周期性/定时执行的任务</div>
+          </div>
+          <div class="host-card">
+            <div class="host-icon"><i class="bi bi-briefcase"></i></div>
+            <div class="host-name">Job</div>
+            <div class="host-desc">后台作业（Background Job），离线批处理任务</div>
+          </div>
+          <div class="host-card">
+            <div class="host-icon"><i class="bi bi-lightning-charge"></i></div>
+            <div class="host-name">Event</div>
+            <div class="host-desc">领域事件（Domain Event），事件驱动的业务处理</div>
+          </div>
+          <div class="host-card">
+            <div class="host-icon"><i class="bi bi-cpu"></i></div>
+            <div class="host-name">Background</div>
+            <div class="host-desc">后台服务（Background Service），常驻后台处理任务</div>
+          </div>
+        </div>
+        <div class="hosts-quote fade-up delay-2">
+          <i class="bi bi-quote"></i>
+          <p>一个业务场景（Scenario）只在 Handler 写一次，所有入口共用同一套业务规则，避免逻辑重复和不一致。</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section id="features" class="section">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>核心特性</h2>
+          <p>
+            PasteApeart 将 UI 自动化（All in Dto）与业务场景聚合（All in Handler）有机结合，<br />
+            在减少重复劳动的同时，强化了架构的可维护性与业务复用性。
+          </p>
+        </div>
+        <div class="grid grid-3 fade-up delay-1">
+          <div class="card feature-card highlight">
+            <div class="card-icon handler"><i class="bi bi-diagram-3-fill"></i></div>
+            <h3>All in Handler · 业务场景聚合</h3>
+            <p>按业务场景组织 Handler，业务规则一次编写即可被 <strong>HTTP、MQ、Timer、Job、Event、Background</strong> 等 6
+              种宿主复用，实现业务逻辑 100% 复用。</p>
+          </div>
+          <div class="card feature-card highlight">
+            <div class="card-icon"><i class="bi bi-braces-asterisk"></i></div>
+            <h3>All in Dto · 元数据驱动 UI</h3>
+            <p>DTO + 特性定义 UI，框架输出 <code>VoloModelInfo</code> 元数据，由通用前端统一渲染表格、搜索、表单、详情，实现管理端近乎 0
+              代码。</p>
+          </div>
+          <div class="card feature-card">
+            <div class="card-icon"><i class="bi bi-shield-check"></i></div>
+            <h3>IEventModel · 事件模型</h3>
+            <p>内置延迟执行（<code>ExpireSecond</code>）、绝对时间（<code>ExpireTime</code>）、自动幂等（<code>MutexKey</code>），配合
+              <code>EventActionHandler</code> 统一调度，优雅解决异步、延迟、幂等三大痛点。</p>
+          </div>
+          <div class="card feature-card">
+            <div class="card-icon"><i class="bi bi-bezier2"></i></div>
+            <h3>三层架构 · 硬约束</h3>
+            <p><strong>Host → Application → Handler</strong> 严格单向引用（编译器级物理约束）。职责边界清晰，强制业务收敛，有效防止架构腐化。</p>
+          </div>
+          <div class="card feature-card">
+            <div class="card-icon"><i class="bi bi-sliders"></i></div>
+            <h3>config.json · 批量规则</h3>
+            <p>支持动态字段注入、特性批量预设（<code>attribute.all</code>），减少 DTO 重复标注，让全局规则集中可维护。</p>
+          </div>
+          <div class="card feature-card">
+            <div class="card-icon"><i class="bi bi-file-earmark-code"></i></div>
+            <h3>Liquid 模板 · 可定制生成</h3>
+            <p>通过 <code>*.html.liquid</code> 自定义 DTO、Service 等代码生成模板，配合 PasteBuilder 满足团队不同的代码风格偏好。</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Attributes -->
+    <section id="attributes" class="section section-alt">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>特性系统 · 用 DTO 特性控制 UI 呈现</h2>
+          <p>
+            PasteApeart 的特性系统（Attributes）源自 <code>PasteApeart.Helper</code>，<br />
+            一行特性即可决定字段的控件类型、校验、布局、交互、显隐等行为，真正做到“<strong>All in Dto</strong>”。
+          </p>
+        </div>
+
+        <div class="attr-toolbar fade-up">
+          <div class="attr-search">
+            <i class="bi bi-search"></i>
+            <input type="text" id="attrSearch" placeholder="搜索特性名称或说明（如 image、select、outer...）"
+              aria-label="搜索特性" />
+            <button class="attr-clear" id="attrClear" type="button" title="清空搜索" aria-label="清空搜索">
+              <i class="bi bi-x-lg"></i>
+            </button>
+          </div>
+          <div class="attr-count">共 <span id="attrTotal">0</span> 个特性</div>
+        </div>
+
+        <div class="attr-group fade-up" data-group="基础信息">
+          <h3 class="attr-group-title"><i class="bi bi-info-circle"></i> 基础信息（Model Meta）</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste display 显示 名称 字段名">
+              <div class="attr-name">PasteDisplay</div>
+              <div class="attr-desc">设置字段显示名称</div>
+            </div>
+            <div class="attr-item" data-keywords="paste desc 描述 说明 字段描述">
+              <div class="attr-name">PasteDesc</div>
+              <div class="attr-desc">字段描述说明</div>
+            </div>
+            <div class="attr-item" data-keywords="paste title 标题 模型标题 页面标题">
+              <div class="attr-name">PasteTitle</div>
+              <div class="attr-desc">模型/页面标题</div>
+            </div>
+            <div class="attr-item" data-keywords="paste class 类路径 模型标识">
+              <div class="attr-name">PasteClass</div>
+              <div class="attr-desc">指定类路径/模型标识</div>
+            </div>
+            <div class="attr-item" data-keywords="paste path 路径 访问路径">
+              <div class="attr-name">PastePath</div>
+              <div class="attr-desc">指定访问路径</div>
+            </div>
+            <div class="attr-item" data-keywords="paste model 模型 标识">
+              <div class="attr-name">PasteModel</div>
+              <div class="attr-desc">模型标识配置</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="布局分组">
+          <h3 class="attr-group-title"><i class="bi bi-layout-three-columns"></i> 布局、分组与自定义</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste group 分组 表单分组">
+              <div class="attr-name">PasteGroup</div>
+              <div class="attr-desc">表单字段分组</div>
+            </div>
+            <div class="attr-item" data-keywords="paste template 模板 自定义 列模板 表单模板">
+              <div class="attr-name">PasteTemplate</div>
+              <div class="attr-desc">自定义列/表单模板（Template）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste style 样式 行内样式 css">
+              <div class="attr-name">PasteStyle</div>
+              <div class="attr-desc">字段行内样式</div>
+            </div>
+            <div class="attr-item" data-keywords="paste mark 提示 说明 tooltip">
+              <div class="attr-name">PasteMark</div>
+              <div class="attr-desc">字段说明、提示标记（Mark/Tooltip）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste tips 提示信息">
+              <div class="attr-name">PasteTips</div>
+              <div class="attr-desc">字段提示信息</div>
+            </div>
+            <div class="attr-item" data-keywords="paste help 帮助 帮助说明">
+              <div class="attr-name">PasteHelp</div>
+              <div class="attr-desc">字段帮助说明</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="选择控件">
+          <h3 class="attr-group-title"><i class="bi bi-menu-button-wide"></i> 选择控件</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste select 单选 下拉 下拉框">
+              <div class="attr-name">PasteSelect</div>
+              <div class="attr-desc">单选下拉框</div>
+            </div>
+            <div class="attr-item" data-keywords="paste selects 多选 多选下拉">
+              <div class="attr-name">PasteSelects</div>
+              <div class="attr-desc">多选下拉框</div>
+            </div>
+            <div class="attr-item" data-keywords="paste lselect 枚举 枚举过滤 过滤 ignore">
+              <div class="attr-name">PasteLselect</div>
+              <div class="attr-desc">枚举/列表过滤选择（支持 ignore 过滤选项）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste reload 联动 联动刷新 字段联动">
+              <div class="attr-name">PasteReload</div>
+              <div class="attr-desc">选项联动刷新（字段联动重载表单）</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="关联数据">
+          <h3 class="attr-group-title"><i class="bi bi-diagram-2"></i> 关联数据（外表、嵌套对象）</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste outer 外表 外表关联 关联">
+              <div class="attr-name">PasteOuter</div>
+              <div class="attr-desc">外表关联（单选外表对象）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste outers 外表多选 多选外表">
+              <div class="attr-name">PasteOuters</div>
+              <div class="attr-desc">外表多选（多选外表对象）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste outerdisplay 外表显示 显示字段 友好名称">
+              <div class="attr-name">PasteOuterDisplay</div>
+              <div class="attr-desc">外表显示字段（列表/表单显示友好名称）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste object 嵌套对象 对象">
+              <div class="attr-name">PasteObject</div>
+              <div class="attr-desc">嵌套对象</div>
+            </div>
+            <div class="attr-item" data-keywords="paste objects 嵌套对象数组 对象数组">
+              <div class="attr-name">PasteObjects</div>
+              <div class="attr-desc">嵌套对象数组</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="上传">
+          <h3 class="attr-group-title"><i class="bi bi-cloud-upload"></i> 上传控件</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste image 图片 图片上传 多图 单图">
+              <div class="attr-name">PasteImage</div>
+              <div class="attr-desc">图片上传（支持单图/多图、数量、尺寸、分组目录）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste file 文件 文件上传 多文件">
+              <div class="attr-name">PasteFile</div>
+              <div class="attr-desc">文件上传（支持多文件、类型限制）</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="内容编辑">
+          <h3 class="attr-group-title"><i class="bi bi-type"></i> 富文本 / 内容编辑</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste richtext 富文本 富文本编辑器 html">
+              <div class="attr-name">PasteRichText</div>
+              <div class="attr-desc">富文本编辑器（HTML）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste markdown markdown编辑器 md">
+              <div class="attr-name">PasteMarkdown</div>
+              <div class="attr-desc">Markdown 编辑器</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="日期时间">
+          <h3 class="attr-group-title"><i class="bi bi-calendar3"></i> 日期时间</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste datetime 日期 时间 日期时间">
+              <div class="attr-name">PasteDatetime</div>
+              <div class="attr-desc">日期时间选择</div>
+            </div>
+            <div class="attr-item" data-keywords="paste daterange 日期范围 范围">
+              <div class="attr-name">PasteDateRange</div>
+              <div class="attr-desc">日期范围选择</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="查询联动">
+          <h3 class="attr-group-title"><i class="bi bi-search"></i> 查询、联动</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste query 查询 搜索 搜索参数">
+              <div class="attr-name">PasteQuery</div>
+              <div class="attr-desc">查询参数绑定（Search/Query 区域）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste linkquery 联动查询 查询联动">
+              <div class="attr-name">PasteLinkQuery</div>
+              <div class="attr-desc">字段联动查询（LinkQuery）</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="按钮菜单">
+          <h3 class="attr-group-title"><i class="bi bi-menu-app"></i> 操作按钮、菜单</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste button 按钮 操作按钮">
+              <div class="attr-name">PasteButton</div>
+              <div class="attr-desc">单个操作按钮</div>
+            </div>
+            <div class="attr-item" data-keywords="paste buttons 多个按钮 按钮组">
+              <div class="attr-name">PasteButtons</div>
+              <div class="attr-desc">多个操作按钮</div>
+            </div>
+            <div class="attr-item" data-keywords="paste menu 菜单 操作菜单">
+              <div class="attr-name">PasteMenu</div>
+              <div class="attr-desc">操作菜单</div>
+            </div>
+            <div class="attr-item" data-keywords="paste menus 多个菜单 菜单组">
+              <div class="attr-name">PasteMenus</div>
+              <div class="attr-desc">多个操作菜单</div>
+            </div>
+            <div class="attr-item" data-keywords="paste ifmenu 条件菜单 条件">
+              <div class="attr-name">PasteIfMenu</div>
+              <div class="attr-desc">条件菜单（按条件显示隐藏）</div>
+            </div>
+            <div class="attr-item" data-keywords="paste bitch 批量 批量操作 batch">
+              <div class="attr-name">PasteBitch</div>
+              <div class="attr-desc">批量操作（Batch）</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="校验">
+          <h3 class="attr-group-title"><i class="bi bi-shield-check"></i> 校验、限制</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste required 必填 校验">
+              <div class="attr-name">PasteRequired</div>
+              <div class="attr-desc">必填校验</div>
+            </div>
+            <div class="attr-item" data-keywords="paste maxlength 最大长度 长度">
+              <div class="attr-name">PasteMaxLength</div>
+              <div class="attr-desc">最大长度</div>
+            </div>
+            <div class="attr-item" data-keywords="paste minlength 最小长度">
+              <div class="attr-name">PasteMinLength</div>
+              <div class="attr-desc">最小长度</div>
+            </div>
+            <div class="attr-item" data-keywords="paste range 范围 数值范围">
+              <div class="attr-name">PasteRange</div>
+              <div class="attr-desc">数值范围校验</div>
+            </div>
+            <div class="attr-item" data-keywords="paste regex 正则 正则表达式">
+              <div class="attr-name">PasteRegex</div>
+              <div class="attr-desc">正则表达式校验</div>
+            </div>
+            <div class="attr-item" data-keywords="paste email 邮箱 邮箱校验">
+              <div class="attr-name">PasteEmail</div>
+              <div class="attr-desc">邮箱格式校验</div>
+            </div>
+            <div class="attr-item" data-keywords="paste phone 手机 手机号 手机号校验">
+              <div class="attr-name">PastePhone</div>
+              <div class="attr-desc">手机号格式校验</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="显示控制">
+          <h3 class="attr-group-title"><i class="bi bi-eye"></i> 显示控制</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste hidden 隐藏 显隐">
+              <div class="attr-name">PasteHidden</div>
+              <div class="attr-desc">字段隐藏</div>
+            </div>
+            <div class="attr-item" data-keywords="paste disable 禁用">
+              <div class="attr-name">PasteDisable</div>
+              <div class="attr-desc">字段禁用</div>
+            </div>
+            <div class="attr-item" data-keywords="paste readonly 只读">
+              <div class="attr-name">PasteReadonly</div>
+              <div class="attr-desc">字段只读</div>
+            </div>
+            <div class="attr-item" data-keywords="paste switch 开关">
+              <div class="attr-name">PasteSwitch</div>
+              <div class="attr-desc">开关控件（支持 view/bind 等展示模式）</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-group fade-up delay-1" data-group="数据转换">
+          <h3 class="attr-group-title"><i class="bi bi-braces"></i> 数据转换</h3>
+          <div class="attrs-grid">
+            <div class="attr-item" data-keywords="paste splitarray 分隔符 数组 分隔符数组">
+              <div class="attr-name">PasteSplitArray</div>
+              <div class="attr-desc">分隔符字符串转数组</div>
+            </div>
+            <div class="attr-item" data-keywords="paste array 数组">
+              <div class="attr-name">PasteArray</div>
+              <div class="attr-desc">数组类型处理</div>
+            </div>
+            <div class="attr-item" data-keywords="paste json json处理">
+              <div class="attr-name">PasteJson</div>
+              <div class="attr-desc">JSON 数据处理</div>
+            </div>
+            <div class="attr-item" data-keywords="paste default 默认值">
+              <div class="attr-name">PasteDefault</div>
+              <div class="attr-desc">字段默认值</div>
+            </div>
+            <div class="attr-item" data-keywords="paste order 排序 顺序">
+              <div class="attr-name">PasteOrder</div>
+              <div class="attr-desc">字段排序/顺序控制</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="attr-empty" id="attrEmpty" hidden>
+          <i class="bi bi-search"></i>
+          <p>未找到匹配的特性，请尝试其他关键词</p>
+        </div>
+
+        <div class="attr-more fade-up delay-2">
+          <p>
+            完整特性说明与参数详情见：
+            <a href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/framework/PasteApeart.Helper/docs/md.md"
+              target="_blank" rel="noopener">
+              <i class="bi bi-book"></i> PasteApeart.Helper 特性文档（md.md）
+            </a>
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Event Model -->
+    <section id="eventmodel" class="section">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>事件模型（IEventModel）· 与 Handler 场景深度结合</h2>
+          <p>
+            基于 <code>IEventModel</code>，PasteApeart 将<strong>延迟执行、绝对时间、自动幂等</strong>内置到事件体系中。<br />
+            配合 Handler 的业务场景聚合，使得异步任务、延时处理同样能做到<strong>一次定义、多宿主复用</strong>。
+          </p>
+        </div>
+        <div class="grid grid-4 fade-up delay-1">
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-hourglass-split"></i></div>
+            <h3>延迟执行</h3>
+            <p>通过 <code>ExpireSecond</code> 配置，轻松实现“X 秒后执行”，适用于延时关闭、超时处理等场景。</p>
+          </div>
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-calendar-event"></i></div>
+            <h3>绝对时间</h3>
+            <p>通过 <code>ExpireTime</code> 配置，支持指定时间点执行（如每天凌晨 3 点），满足定时/计划任务场景。</p>
+          </div>
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-shield-check"></i></div>
+            <h3>自动幂等</h3>
+            <p>通过 <code>MutexKey</code> 配置，由 <code>EventActionHandler</code> 统一基于 Redis/DB 做排重，确保事件<strong>永远只执行一次</strong>。</p>
+          </div>
+          <div class="card">
+            <div class="card-icon"><i class="bi bi-recycle"></i></div>
+            <h3>多宿主复用</h3>
+            <p>事件可与 Handler 场景配合使用，在不同宿主入口触发同一业务处理逻辑，<strong>只需实现一次</strong>。</p>
+          </div>
+        </div>
+
+        <div class="event-flow fade-up delay-2">
+          <div class="flow-step">
+            <div class="flow-num">1</div>
+            <div class="flow-title">定义事件模型</div>
+            <div class="flow-desc">继承 <code>AbsBaseModel</code> 并实现 <code>IEventModel</code></div>
+          </div>
+          <div class="flow-arrow"><i class="bi bi-arrow-right"></i></div>
+          <div class="flow-step">
+            <div class="flow-num">2</div>
+            <div class="flow-title">配置幂等与时效</div>
+            <div class="flow-desc">设置 <code>MutexKey</code>、<code>ExpireSecond</code> / <code>ExpireTime</code></div>
+          </div>
+          <div class="flow-arrow"><i class="bi bi-arrow-right"></i></div>
+          <div class="flow-step">
+            <div class="flow-num">3</div>
+            <div class="flow-title">统一调度</div>
+            <div class="flow-desc">由 <code>EventActionHandler</code> 统一调度、排重与执行</div>
+          </div>
+          <div class="flow-arrow"><i class="bi bi-arrow-right"></i></div>
+          <div class="flow-step">
+            <div class="flow-num">4</div>
+            <div class="flow-title">Handler 场景处理</div>
+            <div class="flow-desc">事件触发对应的 Handler 业务场景，保障处理逻辑一致</div>
+          </div>
+        </div>
+
+        <div class="code-block fade-up delay-2">
+          <div class="code-header">
+            <span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
+            <span class="code-title">IEventModel · 事件定义示意</span>
+            <button class="code-copy" id="codeCopy" type="button" title="复制代码" aria-label="复制代码">
+              <i class="bi bi-clipboard"></i>
+            </button>
+          </div>
+          <pre><code class="language-csharp">public class OrderCreatedEvent : AbsBaseModel, IEventModel
+{
+    public string OrderId { get; set; } = string.Empty;
+    public string UserId  { get; set; } = string.Empty;
+
+    // 延迟 30 分钟执行（ExpireSecond：秒）
+    public int ExpireSecond { get; set; } = 1800;
+
+    // 绝对执行时间（可选，用于指定时间点执行）
+    public DateTime? ExpireTime { get; set; }
+
+    // 自动幂等键（按业务唯一键生成，确保只执行一次）
+    public string MutexKey =&gt; $"order:created:expire:{OrderId}";
+}</code></pre>
+        </div>
+      </div>
+    </section>
+
+    <!-- Toolchain -->
+    <section id="toolchain" class="section section-alt">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>工具链 · 配套生态，开箱即用</h2>
+          <p>PasteApeart 不止是框架，更是一套围绕“All in Dto + All in Handler”的生产力工具链。</p>
+        </div>
+        <div class="grid grid-2 fade-up delay-1">
+          <div class="card tool-card">
+            <div class="tool-header">
+              <div class="card-icon"><i class="bi bi-magic"></i></div>
+              <h3>PasteBuilder · 代码生成器</h3>
+            </div>
+            <p>CodeFirst，一键生成 DTO（Add/Update/List/InputQuery）、AppService、EF 配置等骨架代码。配合 Liquid 模板与
+              <code>config.json</code> 可深度定制生成风格。</p>
+            <ul class="tool-list">
+              <li><i class="bi bi-check-circle"></i> 统一团队代码规范，减少重复骨架代码</li>
+              <li><i class="bi bi-check-circle"></i> 支持 Liquid 模板（<code>*.html.liquid</code>）自定义</li>
+              <li><i class="bi bi-check-circle"></i> 配合 <code>config.json</code> 批量预设特性，减少标注</li>
+            </ul>
+          </div>
+          <div class="card tool-card">
+            <div class="tool-header">
+              <div class="card-icon"><i class="bi bi-cloud-arrow-up"></i></div>
+              <h3>PasteSpider · 智能部署</h3>
+            </div>
+            <p>智能差异发布、热更新、无感部署、多环境隔离、平滑升级，让发布流程更简单、更安全、更可控。</p>
+            <ul class="tool-list">
+              <li><i class="bi bi-check-circle"></i> 只上传变更文件，提升发布效率</li>
+              <li><i class="bi bi-check-circle"></i> 热更新无感生效，降低服务中断风险</li>
+              <li><i class="bi bi-check-circle"></i> 开发/测试/生产环境一键切换</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- How It Works -->
+    <section id="howitworks" class="section">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>如何工作 · 3 步极速上手</h2>
+          <p>将 All in Dto + All in Handler 的理念，落到实践只需简单 3 步。</p>
+        </div>
+        <div class="steps fade-up delay-1">
+          <div class="step">
+            <div class="step-num">01</div>
+            <h3>定义 DTO 并标注特性</h3>
+            <p>编写 Add/List/Update/InputQuery DTO，在字段上添加 Paste* 特性（Attributes），描述控件类型、校验、布局、交互等 UI 规则。</p>
+          </div>
+          <div class="step-arrow"><i class="bi bi-arrow-right"></i></div>
+          <div class="step">
+            <div class="step-num">02</div>
+            <h3>按业务场景编写 Handler</h3>
+            <p>将跨表复杂业务按<strong>业务场景</strong>聚合到 <code>Handler</code> 层，单表 CRUD 则继承 <code>DefaultAppService</code>
+              （大部分 0 代码）。框架自动暴露 <code>VoloModelInfo</code> 元数据。</p>
+          </div>
+          <div class="step-arrow"><i class="bi bi-arrow-right"></i></div>
+          <div class="step">
+            <div class="step-num">03</div>
+            <h3>自动渲染管理端 + 多宿主复用</h3>
+            <p>通用页面 <code>index.html / view.html / detail.html</code> 根据元数据自动渲染管理端。Handler 业务场景可按需被
+              <strong>6 种宿主</strong>复用。</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Use Cases -->
+    <section id="usecases" class="section section-alt">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>适用场景</h2>
+          <p>清晰的边界，帮你判断是否适合你的项目。</p>
+        </div>
+        <div class="usecases fade-up delay-1">
+          <div class="usecase fit">
+            <h3><i class="bi bi-check-circle-fill"></i> 推荐使用</h3>
+            <ul>
+              <li>后台管理系统、运营后台、CMS、CRM、ERP 等内部管理平台</li>
+              <li><strong>CRUD 密集 + 业务复杂</strong>（表较多、字段频繁变化、且存在大量跨表业务场景）</li>
+              <li>需要<strong>统一管理端 UI</strong> 与<strong>统一业务架构约束</strong>的团队</li>
+              <li>希望业务逻辑能<strong>跨 HTTP/MQ/Timer/Job/Event/Background 多入口复用</strong>的项目</li>
+              <li>基于 ABP vNext 的项目，想进一步提升管理端效率与架构规范</li>
+            </ul>
+          </div>
+          <div class="usecase notfit">
+            <h3><i class="bi bi-x-circle-fill"></i> 暂不推荐</h3>
+            <ul>
+              <li>高度定制的 C 端复杂交互（复杂动画、自由度极高的图形编辑等）</li>
+              <li>纯前端驱动、对 UI 自由度要求极高的可视化大屏</li>
+              <li>业务逻辑极简单且一次性、不需要管理后台与多入口复用的场景</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Ecosystem -->
+    <section id="ecosystem" class="section">
+      <div class="container">
+        <div class="section-header fade-up">
+          <h2>生态与资源</h2>
+          <p>获取文档、源码、示例项目，快速开始你的 PasteApeart 之旅。</p>
+        </div>
+        <div class="ecosystem-grid fade-up delay-1">
+          <a class="eco-card" href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/readme.md" target="_blank"
+            rel="noopener">
+            <div class="eco-icon"><i class="bi bi-book"></i></div>
+            <div class="eco-content">
+              <h3>README · 项目介绍</h3>
+              <p>核心思想、架构说明、快速入门（All in Dto + All in Handler）</p>
+            </div>
+            <i class="bi bi-arrow-right eco-arrow"></i>
+          </a>
+          <a class="eco-card"
+            href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/framework/PasteApeart.Helper/docs/md.md"
+            target="_blank" rel="noopener">
+            <div class="eco-icon"><i class="bi bi-list-columns-reverse"></i></div>
+            <div class="eco-content">
+              <h3>特性文档（md.md）</h3>
+              <p>PasteApeart.Helper 全部特性（Attributes）详细说明与参数</p>
+            </div>
+            <i class="bi bi-arrow-right eco-arrow"></i>
+          </a>
+          <a class="eco-card" href="https://gitee.com/pastecode/paste-apeart" target="_blank" rel="noopener">
+            <div class="eco-icon"><i class="bi bi-git"></i></div>
+            <div class="eco-content">
+              <h3>Gitee 源码</h3>
+              <p>PasteForm / PasteApeart 相关源码、Issues、PR</p>
+            </div>
+            <i class="bi bi-arrow-right eco-arrow"></i>
+          </a>
+          <a class="eco-card" href="https://gitee.com/pastecode/paste-template" target="_blank" rel="noopener">
+            <div class="eco-icon"><i class="bi bi-layout-text-sidebar-reverse"></i></div>
+            <div class="eco-content">
+              <h3>示例项目（PasteTemplate）</h3>
+              <p>All in Dto + All in Handler 最佳实践示例，开箱即用</p>
+            </div>
+            <i class="bi bi-arrow-right eco-arrow"></i>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section id="cta" class="section cta-section">
+      <div class="container">
+        <div class="cta-inner fade-up">
+          <h2>All in Dto + All in Handler</h2>
+          <p>
+            DTO 定义 UI，Handler 聚合业务场景。<br />
+            把管理端还给框架，把业务收敛到 Handler，让你的代码更清晰、更可复用、更易维护。
+          </p>
+          <div class="hero-actions">
+            <a href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/readme.md" target="_blank" rel="noopener"
+              class="btn btn-primary btn-lg">
+              <i class="bi bi-rocket-takeoff"></i> 开始使用 PasteApeart
+            </a>
+            <a href="https://gitee.com/pastecode/paste-apeart" target="_blank" rel="noopener" class="btn btn-white btn-lg">
+              <i class="bi bi-code-slash"></i> 查看 Gitee 源码
+            </a>
+          </div>
+          <div class="cta-note">PasteForm → PasteApeart · All in Dto + All in Handler</div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="container footer-inner">
+      <div class="footer-brand">
+        <div class="logo">
+          <div class="logo-mark"><span>P</span></div>
+          <span class="logo-text">PasteApeart</span>
+        </div>
+        <p class="footer-desc">
+          All in Dto + All in Handler<br />
+          DTO 元数据驱动 UI · Handler 聚合业务场景<br />
+          管理端 0 代码 · 业务逻辑 6 种宿主复用
+        </p>
+      </div>
+      <div class="footer-links">
+        <div class="footer-col">
+          <h4>核心理念</h4>
+          <a href="#pillars">All in Dto</a>
+          <a href="#pillars">All in Handler</a>
+          <a href="#evolution">PasteForm → PasteApeart</a>
+          <a href="#architecture">三层架构</a>
+        </div>
+        <div class="footer-col">
+          <h4>能力</h4>
+          <a href="#multihost">6 种宿主复用</a>
+          <a href="#features">核心特性</a>
+          <a href="#attributes">特性系统（Attributes）</a>
+          <a href="#eventmodel">事件模型（IEventModel）</a>
+        </div>
+        <div class="footer-col">
+          <h4>工具链</h4>
+          <a href="#toolchain">PasteBuilder</a>
+          <a href="#toolchain">PasteSpider</a>
+          <a href="#toolchain">Liquid 模板</a>
+          <a href="#toolchain">config.json</a>
+        </div>
+        <div class="footer-col">
+          <h4>资源</h4>
+          <a href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/readme.md" target="_blank"
+            rel="noopener">README</a>
+          <a href="https://gita.pastecode.cn/apeart/paste-apeart/full/master/framework/PasteApeart.Helper/docs/md.md"
+            target="_blank" rel="noopener">特性文档（md.md）</a>
+          <a href="https://gitee.com/pastecode/paste-apeart" target="_blank" rel="noopener">Gitee 源码</a>
+          <a href="https://gitee.com/pastecode/paste-template" target="_blank" rel="noopener">示例项目</a>
+        </div>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <div class="container">
+        <p>© <span id="year"></span> PasteApeart · All in Dto + All in Handler</p>
+      </div>
+    </div>
+  </footer>
+
+  <button class="back-to-top" id="backToTop" type="button" aria-label="回到顶部">
+    <i class="bi bi-arrow-up"></i>
+  </button>
+
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-csharp.min.js"></script>
+  <script src="main.js"></script>
+</body>
+
+</html>

diff --git a/website/main.js b/website/main.js
new file mode 100644
index 0000000..f74ba3c
--- /dev/null
+++ b/website/main.js
@@ -0,0 +1,326 @@
+/**
+ * PasteApeart 官网 · 交互脚本
+ * 原生 JS，无依赖
+ */
+(function () {
+  'use strict';
+
+  document.addEventListener('DOMContentLoaded', init);
+
+  function init() {
+    initYear();
+    const nav = document.getElementById('nav');
+    const backToTop = document.getElementById('backToTop');
+
+    initScrollEffects(nav, backToTop);
+    initMobileNav();
+    initSmoothScroll();
+    initRevealOnScroll();
+    initActiveNavLink();
+    initAttrSearch();
+    initCodeCopy();
+  }
+
+  // ---------- 年份 ----------
+  function initYear() {
+    const el = document.getElementById('year');
+    if (el) el.textContent = String(new Date().getFullYear());
+  }
+
+  // ---------- 滚动：导航栏样式 + 回顶按钮 ----------
+  function initScrollEffects(nav, backToTop) {
+    if (!nav && !backToTop) return;
+
+    let ticking = false;
+
+    function update() {
+      const y = window.scrollY || window.pageYOffset;
+
+      if (nav) {
+        if (y > 8) nav.classList.add('scrolled');
+        else nav.classList.remove('scrolled');
+      }
+
+      if (backToTop) {
+        if (y > 400) backToTop.classList.add('show');
+        else backToTop.classList.remove('show');
+      }
+
+      ticking = false;
+    }
+
+    window.addEventListener(
+      'scroll',
+      function () {
+        if (!ticking) {
+          ticking = true;
+          window.requestAnimationFrame(update);
+        }
+      },
+      { passive: true }
+    );
+
+    update();
+
+    if (backToTop) {
+      backToTop.addEventListener('click', function () {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      });
+    }
+  }
+
+  // ---------- 移动端导航 ----------
+  function initMobileNav() {
+    const toggle = document.getElementById('navToggle');
+    const links = document.getElementById('navLinks');
+    if (!toggle || !links) return;
+
+    const ICON_OPEN = '<i class="bi bi-list"></i>';
+    const ICON_CLOSE = '<i class="bi bi-x-lg"></i>';
+
+    function close() {
+      links.classList.remove('active');
+      toggle.innerHTML = ICON_OPEN;
+      toggle.setAttribute('aria-expanded', 'false');
+    }
+
+    toggle.addEventListener('click', function (e) {
+      e.stopPropagation();
+      const opened = links.classList.toggle('active');
+      toggle.innerHTML = opened ? ICON_CLOSE : ICON_OPEN;
+      toggle.setAttribute('aria-expanded', opened ? 'true' : 'false');
+    });
+
+    links.addEventListener('click', function (e) {
+      const a = e.target.closest('a');
+      if (a) close();
+    });
+
+    document.addEventListener('click', function (e) {
+      if (!links.contains(e.target) && !toggle.contains(e.target)) close();
+    });
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') close();
+    });
+
+    window.addEventListener('resize', function () {
+      if (window.innerWidth > 1080) close();
+    });
+  }
+
+  // ---------- 平滑滚动（带导航栏偏移） ----------
+  function initSmoothScroll() {
+    var NAV_OFFSET = 72;
+
+    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
+      anchor.addEventListener('click', function (e) {
+        var href = anchor.getAttribute('href');
+        if (!href || href === '#') return;
+
+        var target = document.querySelector(href);
+        if (!target) return;
+
+        e.preventDefault();
+
+        var top = target.getBoundingClientRect().top + (window.scrollY || window.pageYOffset) - NAV_OFFSET;
+        window.scrollTo({ top: top, behavior: 'smooth' });
+
+        // 更新 URL hash（不触发额外跳转）
+        if (window.history && window.history.replaceState) {
+          window.history.replaceState(null, '', href);
+        }
+      });
+    });
+  }
+
+  // ---------- 滚动入场动画 ----------
+  function initRevealOnScroll() {
+    var els = document.querySelectorAll('.fade-up');
+    if (!els.length) return;
+
+    if (!('IntersectionObserver' in window)) {
+      els.forEach(function (el) {
+        el.classList.add('in');
+      });
+      return;
+    }
+
+    var observer = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('in');
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.08, rootMargin: '0px 0px -20px 0px' }
+    );
+
+    els.forEach(function (el) {
+      observer.observe(el);
+    });
+  }
+
+  // ---------- 导航高亮当前板块 ----------
+  function initActiveNavLink() {
+    var links = document.querySelectorAll('#navLinks a[href^="#"]');
+    if (!links.length) return;
+
+    var map = {};
+    var sections = [];
+
+    links.forEach(function (link) {
+      var id = link.getAttribute('href').slice(1);
+      var section = document.getElementById(id);
+      if (!section) return;
+      map[id] = link;
+      sections.push(section);
+    });
+
+    if (!sections.length) return;
+
+    if (!('IntersectionObserver' in window)) return;
+
+    var observer = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (entry) {
+          if (!entry.isIntersecting) return;
+          var id = entry.target.id;
+          links.forEach(function (l) {
+            l.classList.remove('active');
+          });
+          if (map[id]) map[id].classList.add('active');
+        });
+      },
+      { rootMargin: '-45% 0px -50% 0px', threshold: 0 }
+    );
+
+    sections.forEach(function (section) {
+      observer.observe(section);
+    });
+  }
+
+  // ---------- 特性系统搜索 ----------
+  function initAttrSearch() {
+    var input = document.getElementById('attrSearch');
+    var clearBtn = document.getElementById('attrClear');
+    var totalEl = document.getElementById('attrTotal');
+    var emptyEl = document.getElementById('attrEmpty');
+    var groups = Array.prototype.slice.call(document.querySelectorAll('.attr-group'));
+    if (!input || !groups.length) return;
+
+    var items = [];
+    groups.forEach(function (group) {
+      var groupItems = Array.prototype.slice.call(group.querySelectorAll('.attr-item'));
+      groupItems.forEach(function (item) {
+        var nameEl = item.querySelector('.attr-name');
+        var descEl = item.querySelector('.attr-desc');
+        var name = nameEl ? nameEl.textContent : '';
+        var desc = descEl ? descEl.textContent : '';
+        var keywords = item.getAttribute('data-keywords') || '';
+        items.push({
+          el: item,
+          group: group,
+          haystack: (name + ' ' + desc + ' ' + keywords).toLowerCase()
+        });
+      });
+    });
+
+    if (totalEl) totalEl.textContent = String(items.length);
+
+    function apply(keyword) {
+      var kw = keyword.trim().toLowerCase();
+      var visible = 0;
+
+      if (clearBtn) clearBtn.classList.toggle('show', kw.length > 0);
+
+      items.forEach(function (entry) {
+        var matched = kw === '' || entry.haystack.indexOf(kw) !== -1;
+        entry.el.hidden = !matched;
+        if (matched) visible++;
+      });
+
+      // 分组内无可见项时隐藏整个分组
+      groups.forEach(function (group) {
+        var anyVisible = group.querySelectorAll('.attr-item:not([hidden])').length > 0;
+        group.hidden = kw !== '' && !anyVisible;
+      });
+
+      if (emptyEl) {
+        emptyEl.hidden = visible !== 0;
+      }
+    }
+
+    input.addEventListener('input', function () {
+      apply(input.value);
+    });
+
+    if (clearBtn) {
+      clearBtn.addEventListener('click', function () {
+        input.value = '';
+        apply('');
+        input.focus();
+      });
+    }
+
+    // 支持从 URL hash 之外的方式触发：#attributes?image 之类不做处理，保持简单
+    apply('');
+  }
+
+  // ---------- 代码复制 ----------
+  function initCodeCopy() {
+    var btn = document.getElementById('codeCopy');
+    var block = document.querySelector('.code-block');
+    if (!btn || !block) return;
+
+    var codeEl = block.querySelector('code');
+    if (!codeEl) return;
+
+    var ICON_COPY = btn.innerHTML;
+
+    btn.addEventListener('click', function () {
+      var text = codeEl.innerText;
+
+      function done(ok) {
+        btn.classList.toggle('copied', ok);
+        btn.innerHTML = ok ? '<i class="bi bi-check-lg"></i>' : '<i class="bi bi-x-lg"></i>';
+        setTimeout(function () {
+          btn.classList.remove('copied');
+          btn.innerHTML = ICON_COPY;
+        }, 1800);
+      }
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(
+          function () {
+            done(true);
+          },
+          function () {
+            done(fallbackCopy(text));
+          }
+        );
+      } else {
+        done(fallbackCopy(text));
+      }
+    });
+
+    function fallbackCopy(text) {
+      try {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.setAttribute('readonly', '');
+        ta.style.position = 'absolute';
+        ta.style.left = '-9999px';
+        document.body.appendChild(ta);
+        ta.select();
+        var ok = document.execCommand('copy');
+        document.body.removeChild(ta);
+        return ok;
+      } catch (err) {
+        return false;
+      }
+    }
+  }
+})();

diff --git a/website/styles.css b/website/styles.css
new file mode 100644
index 0000000..a8ff27b
--- /dev/null
+++ b/website/styles.css
@@ -0,0 +1,1796 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 80px;
+}
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
+  color: #0f172a;
+  background: #ffffff;
+  line-height: 1.8;
+  overflow-x: hidden;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+img {
+  max-width: 100%;
+  display: block;
+}
+code {
+  font-family: "JetBrains Mono", Consolas, "SFMono-Regular", monospace;
+  background: rgba(15, 23, 42, 0.06);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-size: 0.95em;
+  word-break: break-word;
+}
+.container {
+  width: min(1200px, calc(100% - 40px));
+  margin: 0 auto;
+}
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  backdrop-filter: saturate(140%) blur(10px);
+  background: rgba(255, 255, 255, 0.86);
+  border-bottom: 1px solid transparent;
+  transition: all 0.25s ease;
+}
+.nav.scrolled {
+  border-bottom-color: rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
+}
+.nav-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 72px;
+  gap: 24px;
+}
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  flex-shrink: 0;
+}
+.logo-mark {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: radial-gradient(120% 120% at 50% 0%, #818cf8 0%, #4f46e5 70%);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 40px -20px #4f46e5;
+}
+.logo-mark span {
+  font-size: 18px;
+  line-height: 1;
+}
+.logo-text {
+  font-size: 18px;
+}
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: clamp(12px, 2vw, 22px);
+}
+.nav-links a {
+  color: #475569;
+  font-size: 14.5px;
+  font-weight: 500;
+  padding: 8px 2px;
+  position: relative;
+  transition: all 0.25s ease;
+  white-space: nowrap;
+}
+.nav-links a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 4px;
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, transparent, #4f46e5, transparent);
+  transform: scaleX(0);
+  opacity: 0.8;
+  transition: all 0.25s ease;
+}
+.nav-links a:hover,
+.nav-links a.active {
+  color: #0f172a;
+}
+.nav-links a:hover::after,
+.nav-links a.active::after {
+  transform: scaleX(1);
+}
+@media (max-width: 1080px) {
+  .nav-links {
+    position: absolute;
+    top: 72px;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 16px 20px 20px;
+    gap: 4px;
+    transform: translateY(-10px);
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.25s ease;
+    box-shadow: 0 20px 60px -30px rgba(15, 23, 42, 0.4);
+    max-height: calc(100vh - 72px);
+    overflow-y: auto;
+  }
+  .nav-links.active {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .nav-links a {
+    width: 100%;
+    padding: 10px 6px;
+    font-size: 15px;
+  }
+}
+.nav-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .nav-actions .btn-ghost {
+    display: none;
+  }
+}
+@media (max-width: 420px) {
+  .nav-actions .btn {
+    padding: 0 12px;
+    font-size: 13.5px;
+  }
+}
+.nav-toggle {
+  display: none;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #ffffff;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #0f172a;
+  font-size: 18px;
+}
+@media (max-width: 1080px) {
+  .nav-toggle {
+    display: flex;
+  }
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 18px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 14.5px;
+  border: 1px solid transparent;
+  transition: all 0.25s ease;
+  white-space: nowrap;
+  cursor: pointer;
+  font-family: inherit;
+}
+.btn i {
+  font-size: 1.05em;
+}
+.btn:active {
+  transform: scale(0.995);
+}
+.btn-lg {
+  height: 48px;
+  padding: 0 22px;
+  font-size: 15px;
+  border-radius: 14px;
+}
+.btn-primary {
+  color: #fff;
+  background: radial-gradient(120% 120% at 50% 0%, #818cf8 0%, #4f46e5 70%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 40px -20px #4f46e5;
+}
+.btn-primary:hover {
+  filter: brightness(1.03);
+  transform: translateY(-1px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 50px -20px #4f46e5;
+}
+.btn-ghost {
+  color: #0f172a;
+  background: rgba(255, 255, 255, 0.92);
+  border-color: rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(6px);
+}
+.btn-ghost:hover {
+  background: #fff;
+  transform: translateY(-1px);
+}
+.btn-white {
+  color: #4f46e5;
+  background: #fff;
+}
+.btn-white:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 50px -20px rgba(255, 255, 255, 0.6);
+}
+.hero {
+  padding: clamp(96px, 12vw, 160px) 0 clamp(48px, 6vw, 88px);
+  background: radial-gradient(1200px 800px at 50% 0%, rgba(99, 102, 241, 0.08) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(800px 600px at 80% 10%, rgba(14, 165, 233, 0.06) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #ffffff 0%, #fbfbff 60%, #ffffff 100%);
+  overflow: clip;
+}
+.hero-inner {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: center;
+  gap: clamp(40px, 6vw, 80px);
+}
+@media (max-width: 992px) {
+  .hero-inner {
+    grid-template-columns: 1fr;
+  }
+}
+.hero-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: clamp(20px, 3vw, 28px);
+}
+@media (max-width: 992px) {
+  .hero-content {
+    align-items: center;
+    text-align: center;
+  }
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #4f46e5;
+  background: rgba(79, 70, 229, 0.08);
+  border: 1px solid rgba(79, 70, 229, 0.15);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.badge .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #4f46e5;
+  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
+}
+.hero-title {
+  font-size: clamp(34px, 5.2vw, 58px);
+  line-height: 1.12;
+  letter-spacing: -0.04em;
+  font-weight: 800;
+}
+.gradient {
+  background: linear-gradient(90deg, #4f46e5 0%, #818cf8 40%, #0ea5e9 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.hero-subtitle {
+  color: #475569;
+  font-size: clamp(15.5px, 2.2vw, 18px);
+  max-width: 660px;
+  line-height: 1.95;
+}
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+@media (max-width: 992px) {
+  .hero-actions {
+    justify-content: center;
+  }
+}
+.hero-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+@media (max-width: 992px) {
+  .hero-tags {
+    justify-content: center;
+  }
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12.5px;
+  color: #475569;
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+.hero-visual {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.mockup {
+  position: relative;
+  width: min(100%, 580px);
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 20px;
+  box-shadow: 0 40px 80px -30px rgba(79, 70, 229, 0.25);
+  overflow: hidden;
+  transform: perspective(1200px) rotateY(-5deg);
+  transition: all 0.25s ease;
+}
+.mockup:hover {
+  transform: perspective(1200px) rotateY(-3deg) translateY(-4px);
+}
+@media (max-width: 992px) {
+  .mockup {
+    transform: none;
+  }
+  .mockup:hover {
+    transform: translateY(-2px);
+  }
+}
+.mockup-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot.red {
+  background: #ff5f56;
+}
+.dot.yellow {
+  background: #ffbd2e;
+}
+.dot.green {
+  background: #27c93f;
+}
+.mockup-title {
+  margin-left: 8px;
+  font-size: 12px;
+  color: #64748b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mockup-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: clamp(14px, 2vw, 18px);
+  background: radial-gradient(600px 400px at 50% 0%, rgba(99, 102, 241, 0.04) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
+}
+.pillars-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pillar-pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  font-size: 12.5px;
+  font-weight: 600;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #f8f9ff;
+  color: #4f46e5;
+}
+.pillar-pill.handler {
+  color: #0369a1;
+  background: rgba(14, 165, 233, 0.08);
+  border-color: rgba(14, 165, 233, 0.25);
+}
+.pillar-pill .pillar-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+.hosts-preview {
+  padding: 10px;
+  border: 1px dashed rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.96);
+}
+.hosts-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: #64748b;
+  margin-bottom: 8px;
+}
+.hosts-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.host-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #0369a1;
+  background: rgba(14, 165, 233, 0.1);
+  border: 1px solid rgba(14, 165, 233, 0.25);
+}
+.arch-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 10px;
+  border: 1px dashed rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.96);
+}
+.arch-layer {
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11.5px;
+  font-weight: 600;
+  text-align: center;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #f8f9ff;
+}
+.arch-layer.handler {
+  color: #0369a1;
+  background: rgba(14, 165, 233, 0.08);
+  border-color: rgba(14, 165, 233, 0.25);
+}
+.arch-line {
+  width: 1px;
+  height: 8px;
+  background: rgba(15, 23, 42, 0.18);
+}
+.glow {
+  position: absolute;
+  inset: -20% -10% -10% -10%;
+  background: radial-gradient(600px 400px at 50% 20%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 70%);
+  filter: blur(40px);
+  pointer-events: none;
+  z-index: -1;
+}
+.section {
+  padding: clamp(64px, 8vw, 120px) 0;
+}
+.section-alt {
+  background: #f5f7fa;
+}
+.section-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(12px, 2vw, 18px);
+  margin-bottom: clamp(40px, 6vw, 64px);
+}
+.section-header h2 {
+  font-size: clamp(28px, 4.6vw, 44px);
+  line-height: 1.14;
+  letter-spacing: -0.04em;
+  font-weight: 800;
+}
+.section-header p {
+  color: #475569;
+  max-width: 840px;
+  font-size: clamp(15px, 2.2vw, 17.5px);
+  line-height: 1.95;
+}
+.grid > *,
+.pillars-grid > *,
+.evolution-grid > *,
+.compare > *,
+.hosts-grid > *,
+.attrs-grid > *,
+.event-flow > *,
+.steps > *,
+.usecases > *,
+.ecosystem-grid > *,
+.arch-row > *,
+.hero-inner > *,
+.footer-inner > *,
+.footer-links > * {
+  min-width: 0;
+}
+.card,
+.compare-item,
+.evo-card,
+.pillar-card,
+.host-card,
+.attr-item,
+.flow-step,
+.step,
+.usecase,
+.eco-card,
+.arch-node,
+.footer-col {
+  overflow-wrap: break-word;
+}
+.grid {
+  display: grid;
+  gap: clamp(18px, 2.5vw, 24px);
+}
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+@media (max-width: 992px) {
+  .grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 640px) {
+  .grid-3 {
+    grid-template-columns: 1fr;
+  }
+}
+.grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+@media (max-width: 1080px) {
+  .grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 640px) {
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (max-width: 768px) {
+  .grid-2 {
+    grid-template-columns: 1fr;
+  }
+}
+.card {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 2vw, 14px);
+  padding: clamp(20px, 2.5vw, 28px);
+}
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.card h3 {
+  font-size: clamp(17px, 2vw, 20px);
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+}
+.card p {
+  color: #475569;
+  line-height: 1.95;
+}
+.card.highlight {
+  border-color: rgba(79, 70, 229, 0.25);
+  box-shadow: 0 20px 60px -30px rgba(79, 70, 229, 0.35);
+}
+.card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: radial-gradient(120% 120% at 50% 0%, #818cf8 0%, #4f46e5 70%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px #4f46e5;
+  flex-shrink: 0;
+}
+.card-icon i {
+  font-size: 20px;
+}
+.card-icon.handler {
+  background: radial-gradient(120% 120% at 50% 0%, #38bdf8 0%, #0ea5e9 70%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px #0ea5e9;
+}
+.feature-card {
+  min-height: 230px;
+}
+.pillars-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: clamp(20px, 3vw, 28px);
+}
+@media (max-width: 880px) {
+  .pillars-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.pillar-card {
+  gap: clamp(16px, 2vw, 20px);
+  padding: clamp(24px, 3vw, 32px);
+}
+.pillar-card.dto {
+  background: radial-gradient(600px 400px at 50% 0%, rgba(99, 102, 241, 0.05) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
+}
+.pillar-card.handler {
+  background: radial-gradient(600px 400px at 50% 0%, rgba(14, 165, 233, 0.05) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
+  border-color: rgba(14, 165, 233, 0.25);
+}
+.pillar-header {
+  display: flex;
+  align-items: flex-start;
+  gap: clamp(14px, 2vw, 16px);
+}
+.pillar-title {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.pillar-title h3 {
+  font-size: clamp(20px, 2.4vw, 24px);
+  letter-spacing: -0.02em;
+}
+.pillar-tag {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #4f46e5;
+  background: rgba(79, 70, 229, 0.1);
+  border: 1px solid rgba(79, 70, 229, 0.25);
+}
+.pillar-tag.handler {
+  color: #0369a1;
+  background: rgba(14, 165, 233, 0.1);
+  border-color: rgba(14, 165, 233, 0.3);
+}
+.pillar-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  list-style: none;
+  color: #475569;
+}
+.pillar-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 1.95;
+}
+.pillar-list li i {
+  color: #22c55e;
+  margin-top: 5px;
+  flex-shrink: 0;
+}
+.evolution-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(16px, 3vw, 24px);
+}
+@media (max-width: 880px) {
+  .evolution-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.evo-card {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(12px, 2vw, 16px);
+  padding: clamp(20px, 3vw, 28px);
+}
+.evo-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.evo-card h3 {
+  font-size: clamp(18px, 2vw, 21px);
+  letter-spacing: -0.02em;
+}
+.evo-card p {
+  color: #475569;
+  line-height: 1.95;
+}
+.evo-card.form {
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
+}
+.evo-card.apeart {
+  background: radial-gradient(600px 400px at 50% 0%, rgba(14, 165, 233, 0.06) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
+  border-color: rgba(14, 165, 233, 0.3);
+  box-shadow: 0 20px 60px -30px rgba(14, 165, 233, 0.35);
+}
+.evo-badge {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #4f46e5;
+  background: rgba(79, 70, 229, 0.1);
+  border: 1px solid rgba(79, 70, 229, 0.25);
+}
+.evo-badge.apeart {
+  color: #0369a1;
+  background: rgba(14, 165, 233, 0.12);
+  border-color: rgba(14, 165, 233, 0.35);
+}
+.evo-focus {
+  margin-top: auto;
+  font-size: 13.5px;
+  color: #64748b;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+.evo-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748b;
+  font-size: 26px;
+}
+@media (max-width: 880px) {
+  .evo-arrow {
+    transform: rotate(90deg);
+  }
+}
+.compare {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(16px, 3vw, 24px);
+}
+@media (max-width: 880px) {
+  .compare {
+    grid-template-columns: 1fr;
+  }
+}
+.compare-item {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+  padding: clamp(20px, 3vw, 28px);
+  background: #fff;
+}
+.compare-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.compare-item h3 {
+  font-size: clamp(18px, 2vw, 20px);
+  letter-spacing: -0.02em;
+}
+.compare-item ul {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  list-style: none;
+  color: #475569;
+}
+.compare-item ul li {
+  padding-left: 20px;
+  position: relative;
+  line-height: 1.95;
+}
+.compare-item ul li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 11px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.25);
+}
+.compare-item.highlight {
+  border-color: rgba(79, 70, 229, 0.25);
+  box-shadow: 0 20px 60px -30px rgba(79, 70, 229, 0.4);
+  background: radial-gradient(600px 400px at 50% 0%, rgba(99, 102, 241, 0.06) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
+}
+.compare-item.highlight h3 {
+  color: #4f46e5;
+}
+.compare-item.highlight li::before {
+  background: #4f46e5;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+}
+.compare-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4f46e5;
+  font-size: 28px;
+}
+@media (max-width: 880px) {
+  .compare-arrow {
+    transform: rotate(90deg);
+  }
+}
+.arch-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(32px, 5vw, 48px);
+}
+.arch-flow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(12px, 2vw, 16px);
+  width: min(100%, 780px);
+}
+.arch-node {
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(6px, 1.5vw, 8px);
+  padding: clamp(18px, 2.5vw, 24px);
+}
+.arch-node:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.arch-node.handler {
+  background: radial-gradient(600px 400px at 50% 0%, rgba(14, 165, 233, 0.08) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
+  border-color: rgba(14, 165, 233, 0.3);
+}
+.arch-title {
+  font-weight: 700;
+  font-size: clamp(16px, 2vw, 18px);
+  letter-spacing: -0.02em;
+}
+.arch-desc {
+  color: #0f172a;
+  max-width: 620px;
+  font-weight: 500;
+}
+.arch-sub {
+  color: #475569;
+  font-size: 14px;
+}
+.arch-arrow {
+  color: #64748b;
+  font-size: 24px;
+}
+.arch-note {
+  margin-top: 4px;
+  font-size: 13.5px;
+  color: #64748b;
+  text-align: center;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+.arch-table {
+  width: 100%;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  background: #fff;
+}
+.arch-row {
+  display: grid;
+  grid-template-columns: 1.1fr repeat(3, 1.8fr);
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+.arch-row:last-child {
+  border-bottom: none;
+}
+.arch-row.head {
+  background: #f8f9ff;
+  font-weight: 700;
+  font-size: 13.5px;
+  color: #64748b;
+}
+.arch-row > div {
+  padding: clamp(10px, 2vw, 14px) clamp(12px, 2vw, 16px);
+  border-right: 1px solid rgba(15, 23, 42, 0.08);
+  line-height: 1.9;
+}
+.arch-row > div:last-child {
+  border-right: none;
+}
+@media (max-width: 880px) {
+  .arch-row {
+    grid-template-columns: 1fr;
+  }
+  .arch-row > div {
+    border-right: none;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  }
+  .arch-row > div:last-child {
+    border-bottom: none;
+  }
+  .arch-row.head {
+    display: none;
+  }
+}
+.hosts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: clamp(16px, 2.5vw, 22px);
+}
+@media (max-width: 992px) {
+  .hosts-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 560px) {
+  .hosts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.host-card {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: clamp(18px, 2.5vw, 24px);
+  background: radial-gradient(500px 300px at 50% 0%, rgba(14, 165, 233, 0.05) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
+}
+.host-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.host-card:hover {
+  border-color: rgba(14, 165, 233, 0.3);
+}
+.host-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: radial-gradient(120% 120% at 50% 0%, #38bdf8 0%, #0ea5e9 70%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px #0ea5e9;
+}
+.host-icon i {
+  font-size: 19px;
+}
+.host-name {
+  font-size: clamp(16px, 2vw, 18px);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  font-family: "JetBrains Mono", monospace;
+  color: #0369a1;
+}
+.host-desc {
+  color: #475569;
+  font-size: 14.5px;
+  line-height: 1.9;
+}
+.hosts-quote {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  max-width: 860px;
+  margin: clamp(28px, 4vw, 40px) auto 0;
+  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 26px);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+}
+.hosts-quote i {
+  font-size: 22px;
+  color: #0ea5e9;
+  opacity: 0.6;
+  line-height: 1.4;
+}
+.hosts-quote p {
+  color: #475569;
+  font-size: clamp(14.5px, 2vw, 16.5px);
+  line-height: 1.9;
+}
+.attr-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: clamp(24px, 3.5vw, 34px);
+  flex-wrap: wrap;
+}
+.attr-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 240px;
+  max-width: 460px;
+  height: 44px;
+  padding: 0 12px;
+  gap: 8px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+}
+.attr-search:focus-within {
+  border-color: rgba(79, 70, 229, 0.4);
+  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
+}
+.attr-search > i {
+  color: #64748b;
+  font-size: 15px;
+  flex-shrink: 0;
+}
+.attr-search input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14.5px;
+  color: #0f172a;
+}
+.attr-search input::placeholder {
+  color: #64748b;
+}
+.attr-clear {
+  border: none;
+  background: transparent;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 4px;
+  border-radius: 6px;
+  display: none;
+  transition: all 0.25s ease;
+}
+.attr-clear:hover {
+  color: #0f172a;
+  background: rgba(15, 23, 42, 0.06);
+}
+.attr-clear.show {
+  display: inline-flex;
+}
+.attr-count {
+  font-size: 13.5px;
+  color: #64748b;
+}
+.attr-count span {
+  font-weight: 700;
+  color: #4f46e5;
+}
+.attr-group {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+  margin-bottom: clamp(26px, 3.5vw, 38px);
+}
+.attr-group[hidden] {
+  display: none;
+}
+.attr-group-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: clamp(16px, 2vw, 18px);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.attr-group-title i {
+  color: #4f46e5;
+}
+.attrs-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: clamp(10px, 1.8vw, 14px);
+}
+@media (max-width: 1080px) {
+  .attrs-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (max-width: 780px) {
+  .attrs-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 480px) {
+  .attrs-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.attr-item {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: clamp(12px, 2vw, 15px);
+}
+.attr-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.attr-item[hidden] {
+  display: none;
+}
+.attr-name {
+  font-weight: 700;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13.5px;
+  letter-spacing: -0.01em;
+  color: #4338ca;
+}
+.attr-desc {
+  color: #475569;
+  font-size: 13.8px;
+  line-height: 1.85;
+}
+.attr-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: clamp(32px, 5vw, 56px) 0;
+  color: #64748b;
+}
+.attr-empty[hidden] {
+  display: none;
+}
+.attr-empty i {
+  font-size: 28px;
+  opacity: 0.5;
+}
+.attr-empty p {
+  font-size: 15px;
+}
+.attr-more {
+  text-align: center;
+  color: #475569;
+}
+.attr-more a {
+  color: #4f46e5;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.attr-more a:hover {
+  text-decoration: underline;
+}
+.event-flow {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(10px, 1.8vw, 14px);
+  margin-top: clamp(28px, 4vw, 40px);
+}
+@media (max-width: 992px) {
+  .event-flow {
+    grid-template-columns: 1fr;
+  }
+}
+.flow-step {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: clamp(18px, 2.5vw, 24px) clamp(14px, 2vw, 20px);
+}
+.flow-step:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.flow-num {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 15px;
+  color: #fff;
+  background: radial-gradient(120% 120% at 50% 0%, #818cf8 0%, #4f46e5 70%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px #4f46e5;
+}
+.flow-title {
+  font-weight: 700;
+  font-size: 15.5px;
+  letter-spacing: -0.01em;
+}
+.flow-desc {
+  color: #475569;
+  font-size: 13.5px;
+  line-height: 1.8;
+}
+.flow-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748b;
+  font-size: 20px;
+}
+@media (max-width: 992px) {
+  .flow-arrow {
+    transform: rotate(90deg);
+  }
+}
+.code-block {
+  margin-top: clamp(28px, 4vw, 40px);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 20px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  overflow: hidden;
+  background: #0f172a;
+}
+.code-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 16px;
+  background: linear-gradient(180deg, #0f172a 0%, #0b1226 100%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.code-header .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.code-title {
+  margin-left: 8px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.code-copy {
+  margin-left: auto;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.72);
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 13px;
+  flex-shrink: 0;
+  transition: all 0.25s ease;
+}
+.code-copy:hover {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+.code-copy.copied {
+  color: #4ade80;
+  border-color: rgba(74, 222, 128, 0.4);
+}
+pre {
+  margin: 0;
+  padding: clamp(16px, 2.5vw, 24px);
+  overflow: auto;
+  max-height: 440px;
+  background: radial-gradient(800px 600px at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(15, 23, 42, 0) 70%), #0f172a;
+}
+code.language-csharp {
+  color: #e2e8f0;
+  font-size: clamp(12.5px, 1.9vw, 14px);
+  line-height: 1.9;
+  white-space: pre;
+  display: block;
+  background: transparent;
+  padding: 0;
+}
+.tool-card {
+  gap: clamp(14px, 2vw, 18px);
+  min-height: 220px;
+}
+.tool-header {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 2vw, 12px);
+}
+.tool-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  color: #475569;
+}
+.tool-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 1.9;
+}
+.tool-list li i {
+  color: #22c55e;
+  margin-top: 5px;
+  flex-shrink: 0;
+}
+.steps {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(12px, 2vw, 16px);
+}
+@media (max-width: 992px) {
+  .steps {
+    grid-template-columns: 1fr;
+  }
+}
+.step {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(10px, 2vw, 14px);
+  padding: clamp(20px, 2.5vw, 28px);
+}
+.step:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.step h3 {
+  font-size: clamp(16px, 2vw, 18px);
+  letter-spacing: -0.02em;
+}
+.step p {
+  color: #475569;
+  line-height: 1.9;
+}
+.step-num {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 17px;
+  color: #fff;
+  background: radial-gradient(120% 120% at 50% 0%, #818cf8 0%, #4f46e5 70%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px #4f46e5;
+}
+.step-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748b;
+  font-size: 26px;
+}
+@media (max-width: 992px) {
+  .step-arrow {
+    transform: rotate(90deg);
+  }
+}
+.usecases {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: clamp(18px, 3vw, 24px);
+}
+@media (max-width: 880px) {
+  .usecases {
+    grid-template-columns: 1fr;
+  }
+}
+.usecase {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+  padding: clamp(20px, 3vw, 28px);
+}
+.usecase:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.usecase h3 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: clamp(18px, 2vw, 20px);
+}
+.usecase h3 i {
+  font-size: 22px;
+}
+.usecase ul {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  list-style: none;
+  color: #475569;
+}
+.usecase ul li {
+  padding-left: 22px;
+  position: relative;
+  line-height: 1.95;
+}
+.usecase ul li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 11px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.25);
+}
+.usecase.fit h3 i {
+  color: #22c55e;
+}
+.usecase.fit li::before {
+  background: #22c55e;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+}
+.usecase.notfit h3 i {
+  color: #ef4444;
+}
+.usecase.notfit li::before {
+  background: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+}
+.ecosystem-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: clamp(14px, 2.5vw, 18px);
+}
+@media (max-width: 880px) {
+  .ecosystem-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.eco-card {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  align-items: center;
+  gap: clamp(14px, 2vw, 18px);
+  padding: clamp(16px, 2.5vw, 20px);
+}
+.eco-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.eco-card:hover .eco-arrow {
+  transform: translateX(4px);
+}
+.eco-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: radial-gradient(120% 120% at 50% 0%, #818cf8 0%, #4f46e5 70%);
+  flex-shrink: 0;
+}
+.eco-icon i {
+  font-size: 22px;
+}
+.eco-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.eco-content h3 {
+  font-size: clamp(16px, 2vw, 18px);
+  letter-spacing: -0.01em;
+}
+.eco-content p {
+  color: #475569;
+  line-height: 1.85;
+}
+.eco-arrow {
+  margin-left: auto;
+  color: #64748b;
+  font-size: 20px;
+  flex-shrink: 0;
+  transition: all 0.25s ease;
+}
+.cta-section {
+  padding-bottom: clamp(64px, 8vw, 96px);
+}
+.cta-inner {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(16px, 2.5vw, 22px);
+  padding: clamp(28px, 5vw, 48px);
+  background: radial-gradient(1200px 800px at 50% 0%, rgba(99, 102, 241, 0.12) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(800px 600px at 50% 100%, rgba(14, 165, 233, 0.08) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
+  border-color: rgba(79, 70, 229, 0.25);
+  box-shadow: 0 40px 90px -40px rgba(79, 70, 229, 0.4);
+}
+.cta-inner:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.cta-inner:hover {
+  transform: none;
+}
+.cta-inner h2 {
+  font-size: clamp(24px, 4.2vw, 40px);
+  line-height: 1.14;
+  letter-spacing: -0.04em;
+  font-weight: 800;
+}
+.cta-inner p {
+  color: #475569;
+  max-width: 780px;
+  font-size: clamp(15px, 2.2vw, 17.5px);
+  line-height: 1.95;
+}
+.cta-note {
+  font-size: 13.5px;
+  color: #64748b;
+}
+.footer {
+  background: #0b1226;
+  color: rgba(255, 255, 255, 0.88);
+  padding-top: clamp(48px, 6vw, 64px);
+}
+.footer-inner {
+  display: grid;
+  grid-template-columns: 1.2fr 2fr;
+  gap: clamp(32px, 6vw, 64px);
+  padding-bottom: clamp(32px, 5vw, 48px);
+}
+@media (max-width: 880px) {
+  .footer-inner {
+    grid-template-columns: 1fr;
+  }
+}
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+}
+.footer-brand .logo {
+  justify-content: flex-start;
+}
+.footer-brand .logo-mark {
+  background: radial-gradient(120% 120% at 50% 0%, #a5b4fc 0%, #818cf8 70%);
+}
+.footer-brand .logo-text {
+  color: #fff;
+}
+.footer-desc {
+  color: rgba(255, 255, 255, 0.72);
+  line-height: 1.95;
+  max-width: 340px;
+}
+.footer-links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: clamp(20px, 3vw, 32px);
+}
+@media (max-width: 640px) {
+  .footer-links {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 2vw, 14px);
+}
+.footer-col h4 {
+  font-size: 14.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #fff;
+}
+.footer-col a {
+  color: rgba(255, 255, 255, 0.72);
+  width: fit-content;
+  transition: all 0.25s ease;
+}
+.footer-col a:hover {
+  color: #fff;
+}
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 18px 0;
+}
+.footer-bottom p {
+  color: rgba(255, 255, 255, 0.56);
+  font-size: 14px;
+  text-align: center;
+}
+.back-to-top {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 17px;
+  color: #0f172a;
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+  transition: all 0.25s ease;
+  z-index: 900;
+}
+.back-to-top.show {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.back-to-top:hover {
+  transform: translateY(-2px);
+}
+.fade-up {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.fade-up.in {
+  opacity: 1;
+  transform: translateY(0);
+}
+.delay-1 {
+  transition-delay: 0.08s;
+}
+.delay-2 {
+  transition-delay: 0.16s;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  .fade-up,
+  .mockup,
+  .card,
+  .btn,
+  .host-card,
+  .attr-item {
+    transition: none;
+    transform: none;
+  }
+  .fade-up {
+    opacity: 1;
+  }
+}

diff --git a/website/styles.less b/website/styles.less
new file mode 100644
index 0000000..cf4b439
--- /dev/null
+++ b/website/styles.less
@@ -0,0 +1,2000 @@
+// ============================================
+// PasteApeart 官网 · 样式表（LESS）
+// 设计：Indigo 主色 + Sky 辅色 / 技术文档感
+// ============================================
+
+// ---------- Variables ----------
+@color-primary: #4f46e5;
+@color-primary-light: #6366f1;
+@color-primary-dark: #4338ca;
+@color-handler: #0ea5e9;
+@color-handler-dark: #0369a1;
+
+@color-bg: #ffffff;
+@color-bg-alt: #f5f7fa;
+@color-surface: #ffffff;
+
+@color-text-primary: #0f172a;
+@color-text-secondary: #475569;
+@color-text-tertiary: #64748b;
+
+@color-border: rgba(15, 23, 42, 0.08);
+@color-success: #22c55e;
+@color-danger: #ef4444;
+
+@radius-sm: 6px;
+@radius-md: 10px;
+@radius-lg: 14px;
+@radius-xl: 20px;
+
+@shadow-sm: 0 1px 2px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.1);
+@shadow-md: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
+@shadow-lg: 0 40px 80px -30px rgba(79, 70, 229, 0.25);
+
+@container-width: 1200px;
+@nav-height: 72px;
+@transition-base: all 0.25s ease;
+
+// ---------- Mixins ----------
+.flex-center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between() {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-base() {
+  background: @color-surface;
+  border: 1px solid @color-border;
+  border-radius: @radius-lg;
+  box-shadow: @shadow-sm;
+  transition: @transition-base;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: @shadow-md;
+    border-color: rgba(79, 70, 229, 0.15);
+  }
+}
+
+.icon-gradient(@from: #818cf8, @to: @color-primary) {
+  background: radial-gradient(120% 120% at 50% 0%, @from 0%, @to 70%);
+}
+
+// ---------- Base ----------
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: @nav-height + 8px;
+}
+
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
+  color: @color-text-primary;
+  background: @color-bg;
+  line-height: 1.8;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+code {
+  font-family: "JetBrains Mono", Consolas, "SFMono-Regular", monospace;
+  background: rgba(15, 23, 42, 0.06);
+  padding: 2px 6px;
+  border-radius: @radius-sm;
+  font-size: 0.95em;
+  word-break: break-word;
+}
+
+.container {
+  // 注意：必须用 ~"" 转义，否则 LESS 会把 min() 里的 `100% - 40px` 当成算术计算成 60%
+  width: min(@container-width, ~"calc(100% - 40px)");
+  margin: 0 auto;
+}
+
+// ---------- Header ----------
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  backdrop-filter: saturate(140%) blur(10px);
+  background: rgba(255, 255, 255, 0.86);
+  border-bottom: 1px solid transparent;
+  transition: @transition-base;
+
+  &.scrolled {
+    border-bottom-color: @color-border;
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
+  }
+}
+
+.nav-inner {
+  .flex-between();
+  height: @nav-height;
+  gap: 24px;
+}
+
+.logo {
+  .flex-center();
+  gap: 10px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  flex-shrink: 0;
+}
+
+.logo-mark {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  .icon-gradient();
+  color: #fff;
+  .flex-center();
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 40px -20px @color-primary;
+
+  span {
+    font-size: 18px;
+    line-height: 1;
+  }
+}
+
+.logo-text {
+  font-size: 18px;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: clamp(12px, 2vw, 22px);
+
+  a {
+    color: @color-text-secondary;
+    font-size: 14.5px;
+    font-weight: 500;
+    padding: 8px 2px;
+    position: relative;
+    transition: @transition-base;
+    white-space: nowrap;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 4px;
+      width: 100%;
+      height: 2px;
+      border-radius: 2px;
+      background: linear-gradient(90deg, transparent, @color-primary, transparent);
+      transform: scaleX(0);
+      opacity: 0.8;
+      transition: @transition-base;
+    }
+
+    &:hover,
+    &.active {
+      color: @color-text-primary;
+
+      &::after {
+        transform: scaleX(1);
+      }
+    }
+  }
+
+  @media (max-width: 1080px) {
+    position: absolute;
+    top: @nav-height;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid @color-border;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 16px 20px 20px;
+    gap: 4px;
+    transform: translateY(-10px);
+    opacity: 0;
+    pointer-events: none;
+    transition: @transition-base;
+    box-shadow: 0 20px 60px -30px rgba(15, 23, 42, 0.4);
+    max-height: calc(100vh - @nav-height);
+    overflow-y: auto;
+
+    &.active {
+      transform: translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    a {
+      width: 100%;
+      padding: 10px 6px;
+      font-size: 15px;
+    }
+  }
+}
+
+.nav-actions {
+  .flex-center();
+  gap: 10px;
+  flex-shrink: 0;
+
+  // 窄屏优先保证 logo 与汉堡按钮完整可见，避免横向溢出
+  @media (max-width: 768px) {
+    .btn-ghost {
+      display: none;
+    }
+  }
+
+  @media (max-width: 420px) {
+    .btn {
+      padding: 0 12px;
+      font-size: 13.5px;
+    }
+  }
+}
+
+.nav-toggle {
+  display: none;
+  border: 1px solid @color-border;
+  background: @color-surface;
+  width: 40px;
+  height: 40px;
+  border-radius: @radius-md;
+  .flex-center();
+  cursor: pointer;
+  color: @color-text-primary;
+  font-size: 18px;
+
+  @media (max-width: 1080px) {
+    display: flex;
+  }
+}
+
+// ---------- Buttons ----------
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 18px;
+  border-radius: @radius-md;
+  font-weight: 600;
+  font-size: 14.5px;
+  border: 1px solid transparent;
+  transition: @transition-base;
+  white-space: nowrap;
+  cursor: pointer;
+  font-family: inherit;
+
+  i {
+    font-size: 1.05em;
+  }
+
+  &:active {
+    transform: scale(0.995);
+  }
+}
+
+.btn-lg {
+  height: 48px;
+  padding: 0 22px;
+  font-size: 15px;
+  border-radius: @radius-lg;
+}
+
+.btn-primary {
+  color: #fff;
+  .icon-gradient();
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 40px -20px @color-primary;
+
+  &:hover {
+    filter: brightness(1.03);
+    transform: translateY(-1px);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 50px -20px @color-primary;
+  }
+}
+
+.btn-ghost {
+  color: @color-text-primary;
+  background: rgba(255, 255, 255, 0.92);
+  border-color: @color-border;
+  backdrop-filter: blur(6px);
+
+  &:hover {
+    background: #fff;
+    transform: translateY(-1px);
+  }
+}
+
+.btn-white {
+  color: @color-primary;
+  background: #fff;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 14px 50px -20px rgba(255, 255, 255, 0.6);
+  }
+}
+
+// ---------- Hero ----------
+.hero {
+  padding: clamp(96px, 12vw, 160px) 0 clamp(48px, 6vw, 88px);
+  background:
+    radial-gradient(1200px 800px at 50% 0%, rgba(99, 102, 241, 0.08) 0%, rgba(255, 255, 255, 0) 70%),
+    radial-gradient(800px 600px at 80% 10%, rgba(14, 165, 233, 0.06) 0%, rgba(255, 255, 255, 0) 70%),
+    linear-gradient(180deg, #ffffff 0%, #fbfbff 60%, #ffffff 100%);
+  overflow: clip;
+}
+
+.hero-inner {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: center;
+  gap: clamp(40px, 6vw, 80px);
+
+  @media (max-width: 992px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.hero-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: clamp(20px, 3vw, 28px);
+
+  @media (max-width: 992px) {
+    align-items: center;
+    text-align: center;
+  }
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  color: @color-primary;
+  background: rgba(79, 70, 229, 0.08);
+  border: 1px solid rgba(79, 70, 229, 0.15);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: @color-primary;
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
+  }
+}
+
+.hero-title {
+  font-size: clamp(34px, 5.2vw, 58px);
+  line-height: 1.12;
+  letter-spacing: -0.04em;
+  font-weight: 800;
+}
+
+.gradient {
+  background: linear-gradient(90deg, #4f46e5 0%, #818cf8 40%, #0ea5e9 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.hero-subtitle {
+  color: @color-text-secondary;
+  font-size: clamp(15.5px, 2.2vw, 18px);
+  max-width: 660px;
+  line-height: 1.95;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+
+  @media (max-width: 992px) {
+    justify-content: center;
+  }
+}
+
+.hero-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+
+  @media (max-width: 992px) {
+    justify-content: center;
+  }
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12.5px;
+  color: @color-text-secondary;
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid @color-border;
+}
+
+// ---------- Hero Visual ----------
+.hero-visual {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.mockup {
+  position: relative;
+  width: min(100%, 580px);
+  background: @color-surface;
+  border: 1px solid @color-border;
+  border-radius: @radius-xl;
+  box-shadow: @shadow-lg;
+  overflow: hidden;
+  transform: perspective(1200px) rotateY(-5deg);
+  transition: @transition-base;
+
+  &:hover {
+    transform: perspective(1200px) rotateY(-3deg) translateY(-4px);
+  }
+
+  @media (max-width: 992px) {
+    transform: none;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+  }
+}
+
+.mockup-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
+  border-bottom: 1px solid @color-border;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+
+  &.red {
+    background: #ff5f56;
+  }
+  &.yellow {
+    background: #ffbd2e;
+  }
+  &.green {
+    background: #27c93f;
+  }
+}
+
+.mockup-title {
+  margin-left: 8px;
+  font-size: 12px;
+  color: @color-text-tertiary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mockup-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: clamp(14px, 2vw, 18px);
+  background:
+    radial-gradient(600px 400px at 50% 0%, rgba(99, 102, 241, 0.04) 0%, rgba(255, 255, 255, 0) 70%),
+    #ffffff;
+}
+
+.pillars-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pillar-pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: @radius-md;
+  font-size: 12.5px;
+  font-weight: 600;
+  border: 1px solid @color-border;
+  background: #f8f9ff;
+  color: @color-primary;
+
+  &.handler {
+    color: @color-handler-dark;
+    background: rgba(14, 165, 233, 0.08);
+    border-color: rgba(14, 165, 233, 0.25);
+  }
+
+  .pillar-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+  }
+}
+
+.hosts-preview {
+  padding: 10px;
+  border: 1px dashed @color-border;
+  border-radius: @radius-lg;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.hosts-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: @color-text-tertiary;
+  margin-bottom: 8px;
+}
+
+.hosts-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.host-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: @color-handler-dark;
+  background: rgba(14, 165, 233, 0.1);
+  border: 1px solid rgba(14, 165, 233, 0.25);
+}
+
+.arch-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 10px;
+  border: 1px dashed @color-border;
+  border-radius: @radius-lg;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.arch-layer {
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  .flex-center();
+  font-size: 11.5px;
+  font-weight: 600;
+  text-align: center;
+  border: 1px solid @color-border;
+  background: #f8f9ff;
+
+  &.handler {
+    color: @color-handler-dark;
+    background: rgba(14, 165, 233, 0.08);
+    border-color: rgba(14, 165, 233, 0.25);
+  }
+}
+
+.arch-line {
+  width: 1px;
+  height: 8px;
+  background: rgba(15, 23, 42, 0.18);
+}
+
+.glow {
+  position: absolute;
+  inset: -20% -10% -10% -10%;
+  background: radial-gradient(600px 400px at 50% 20%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 70%);
+  filter: blur(40px);
+  pointer-events: none;
+  z-index: -1;
+}
+
+// ---------- Sections ----------
+.section {
+  padding: clamp(64px, 8vw, 120px) 0;
+}
+
+.section-alt {
+  background: @color-bg-alt;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(12px, 2vw, 18px);
+  margin-bottom: clamp(40px, 6vw, 64px);
+
+  h2 {
+    font-size: clamp(28px, 4.6vw, 44px);
+    line-height: 1.14;
+    letter-spacing: -0.04em;
+    font-weight: 800;
+  }
+
+  p {
+    color: @color-text-secondary;
+    max-width: 840px;
+    font-size: clamp(15px, 2.2vw, 17.5px);
+    line-height: 1.95;
+  }
+}
+
+// ---------- Grid ----------
+// 栅格子项的自动最小尺寸是 min-content，若不给 min-width:0，
+// 中英混排或代码片段中的长串会把 1fr 轨道撑破，导致窄屏出现横向滚动。
+.grid > *,
+.pillars-grid > *,
+.evolution-grid > *,
+.compare > *,
+.hosts-grid > *,
+.attrs-grid > *,
+.event-flow > *,
+.steps > *,
+.usecases > *,
+.ecosystem-grid > *,
+.arch-row > *,
+.hero-inner > *,
+.footer-inner > *,
+.footer-links > * {
+  min-width: 0;
+}
+
+// 兜底：超长不可断词（英文标识、路径、代码）允许在必要时断行
+.card,
+.compare-item,
+.evo-card,
+.pillar-card,
+.host-card,
+.attr-item,
+.flow-step,
+.step,
+.usecase,
+.eco-card,
+.arch-node,
+.footer-col {
+  overflow-wrap: break-word;
+}
+
+.grid {
+  display: grid;
+  gap: clamp(18px, 2.5vw, 24px);
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+
+  @media (max-width: 992px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+
+  @media (max-width: 1080px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// ---------- Card ----------
+.card {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 2vw, 14px);
+  padding: clamp(20px, 2.5vw, 28px);
+
+  h3 {
+    font-size: clamp(17px, 2vw, 20px);
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+  }
+
+  p {
+    color: @color-text-secondary;
+    line-height: 1.95;
+  }
+
+  &.highlight {
+    border-color: rgba(79, 70, 229, 0.25);
+    box-shadow: 0 20px 60px -30px rgba(79, 70, 229, 0.35);
+  }
+}
+
+.card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  .flex-center();
+  color: #fff;
+  .icon-gradient();
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px @color-primary;
+  flex-shrink: 0;
+
+  i {
+    font-size: 20px;
+  }
+
+  &.handler {
+    .icon-gradient(#38bdf8, @color-handler);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px @color-handler;
+  }
+}
+
+.feature-card {
+  min-height: 230px;
+}
+
+// ---------- Pillars ----------
+.pillars-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: clamp(20px, 3vw, 28px);
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pillar-card {
+  gap: clamp(16px, 2vw, 20px);
+  padding: clamp(24px, 3vw, 32px);
+
+  &.dto {
+    background:
+      radial-gradient(600px 400px at 50% 0%, rgba(99, 102, 241, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
+      #ffffff;
+  }
+
+  &.handler {
+    background:
+      radial-gradient(600px 400px at 50% 0%, rgba(14, 165, 233, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
+      #ffffff;
+    border-color: rgba(14, 165, 233, 0.25);
+  }
+}
+
+.pillar-header {
+  display: flex;
+  align-items: flex-start;
+  gap: clamp(14px, 2vw, 16px);
+}
+
+.pillar-title {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  h3 {
+    font-size: clamp(20px, 2.4vw, 24px);
+    letter-spacing: -0.02em;
+  }
+}
+
+.pillar-tag {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  color: @color-primary;
+  background: rgba(79, 70, 229, 0.1);
+  border: 1px solid rgba(79, 70, 229, 0.25);
+
+  &.handler {
+    color: @color-handler-dark;
+    background: rgba(14, 165, 233, 0.1);
+    border-color: rgba(14, 165, 233, 0.3);
+  }
+}
+
+.pillar-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  list-style: none;
+  color: @color-text-secondary;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    line-height: 1.95;
+
+    i {
+      color: @color-success;
+      margin-top: 5px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// ---------- Evolution ----------
+.evolution-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(16px, 3vw, 24px);
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.evo-card {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  gap: clamp(12px, 2vw, 16px);
+  padding: clamp(20px, 3vw, 28px);
+
+  h3 {
+    font-size: clamp(18px, 2vw, 21px);
+    letter-spacing: -0.02em;
+  }
+
+  p {
+    color: @color-text-secondary;
+    line-height: 1.95;
+  }
+
+  &.form {
+    background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
+  }
+
+  &.apeart {
+    background:
+      radial-gradient(600px 400px at 50% 0%, rgba(14, 165, 233, 0.06) 0%, rgba(255, 255, 255, 0) 70%),
+      #ffffff;
+    border-color: rgba(14, 165, 233, 0.3);
+    box-shadow: 0 20px 60px -30px rgba(14, 165, 233, 0.35);
+  }
+}
+
+.evo-badge {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: @color-primary;
+  background: rgba(79, 70, 229, 0.1);
+  border: 1px solid rgba(79, 70, 229, 0.25);
+
+  &.apeart {
+    color: @color-handler-dark;
+    background: rgba(14, 165, 233, 0.12);
+    border-color: rgba(14, 165, 233, 0.35);
+  }
+}
+
+.evo-focus {
+  margin-top: auto;
+  font-size: 13.5px;
+  color: @color-text-tertiary;
+  padding: 8px 10px;
+  border-radius: @radius-md;
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid @color-border;
+}
+
+.evo-arrow {
+  .flex-center();
+  color: @color-text-tertiary;
+  font-size: 26px;
+
+  @media (max-width: 880px) {
+    transform: rotate(90deg);
+  }
+}
+
+// ---------- Compare ----------
+.compare {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(16px, 3vw, 24px);
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.compare-item {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+  padding: clamp(20px, 3vw, 28px);
+  background: #fff;
+
+  h3 {
+    font-size: clamp(18px, 2vw, 20px);
+    letter-spacing: -0.02em;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    list-style: none;
+    color: @color-text-secondary;
+
+    li {
+      padding-left: 20px;
+      position: relative;
+      line-height: 1.95;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 11px;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: rgba(15, 23, 42, 0.25);
+      }
+    }
+  }
+
+  &.highlight {
+    border-color: rgba(79, 70, 229, 0.25);
+    box-shadow: 0 20px 60px -30px rgba(79, 70, 229, 0.4);
+    background:
+      radial-gradient(600px 400px at 50% 0%, rgba(99, 102, 241, 0.06) 0%, rgba(255, 255, 255, 0) 70%),
+      #ffffff;
+
+    h3 {
+      color: @color-primary;
+    }
+
+    li::before {
+      background: @color-primary;
+      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+    }
+  }
+}
+
+.compare-arrow {
+  .flex-center();
+  color: @color-primary;
+  font-size: 28px;
+
+  @media (max-width: 880px) {
+    transform: rotate(90deg);
+  }
+}
+
+// ---------- Architecture ----------
+.arch-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(32px, 5vw, 48px);
+}
+
+.arch-flow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(12px, 2vw, 16px);
+  width: min(100%, 780px);
+}
+
+.arch-node {
+  width: 100%;
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(6px, 1.5vw, 8px);
+  padding: clamp(18px, 2.5vw, 24px);
+
+  &.handler {
+    background:
+      radial-gradient(600px 400px at 50% 0%, rgba(14, 165, 233, 0.08) 0%, rgba(255, 255, 255, 0) 70%),
+      #ffffff;
+    border-color: rgba(14, 165, 233, 0.3);
+  }
+}
+
+.arch-title {
+  font-weight: 700;
+  font-size: clamp(16px, 2vw, 18px);
+  letter-spacing: -0.02em;
+}
+
+.arch-desc {
+  color: @color-text-primary;
+  max-width: 620px;
+  font-weight: 500;
+}
+
+.arch-sub {
+  color: @color-text-secondary;
+  font-size: 14px;
+}
+
+.arch-arrow {
+  color: @color-text-tertiary;
+  font-size: 24px;
+}
+
+.arch-note {
+  margin-top: 4px;
+  font-size: 13.5px;
+  color: @color-text-tertiary;
+  text-align: center;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid @color-border;
+}
+
+.arch-table {
+  width: 100%;
+  border: 1px solid @color-border;
+  border-radius: @radius-lg;
+  overflow: hidden;
+  box-shadow: @shadow-sm;
+  background: #fff;
+}
+
+.arch-row {
+  display: grid;
+  grid-template-columns: 1.1fr repeat(3, 1.8fr);
+  border-bottom: 1px solid @color-border;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.head {
+    background: #f8f9ff;
+    font-weight: 700;
+    font-size: 13.5px;
+    color: @color-text-tertiary;
+  }
+
+  > div {
+    padding: clamp(10px, 2vw, 14px) clamp(12px, 2vw, 16px);
+    border-right: 1px solid @color-border;
+    line-height: 1.9;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+
+    > div {
+      border-right: none;
+      border-bottom: 1px solid @color-border;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    &.head {
+      display: none;
+    }
+  }
+}
+
+// ---------- Multi-host ----------
+.hosts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: clamp(16px, 2.5vw, 22px);
+
+  @media (max-width: 992px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: 560px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.host-card {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: clamp(18px, 2.5vw, 24px);
+  background:
+    radial-gradient(500px 300px at 50% 0%, rgba(14, 165, 233, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
+    #ffffff;
+
+  &:hover {
+    border-color: rgba(14, 165, 233, 0.3);
+  }
+}
+
+.host-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  .flex-center();
+  color: #fff;
+  .icon-gradient(#38bdf8, @color-handler);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px @color-handler;
+
+  i {
+    font-size: 19px;
+  }
+}
+
+.host-name {
+  font-size: clamp(16px, 2vw, 18px);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  font-family: "JetBrains Mono", monospace;
+  color: @color-handler-dark;
+}
+
+.host-desc {
+  color: @color-text-secondary;
+  font-size: 14.5px;
+  line-height: 1.9;
+}
+
+.hosts-quote {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  max-width: 860px;
+  margin: clamp(28px, 4vw, 40px) auto 0;
+  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 26px);
+  border-radius: @radius-lg;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid @color-border;
+  box-shadow: @shadow-sm;
+
+  i {
+    font-size: 22px;
+    color: @color-handler;
+    opacity: 0.6;
+    line-height: 1.4;
+  }
+
+  p {
+    color: @color-text-secondary;
+    font-size: clamp(14.5px, 2vw, 16.5px);
+    line-height: 1.9;
+  }
+}
+
+// ---------- Attributes ----------
+.attr-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: clamp(24px, 3.5vw, 34px);
+  flex-wrap: wrap;
+}
+
+.attr-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 240px;
+  max-width: 460px;
+  height: 44px;
+  padding: 0 12px;
+  gap: 8px;
+  border-radius: @radius-md;
+  background: #fff;
+  border: 1px solid @color-border;
+  box-shadow: @shadow-sm;
+  transition: @transition-base;
+
+  &:focus-within {
+    border-color: rgba(79, 70, 229, 0.4);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
+  }
+
+  > i {
+    color: @color-text-tertiary;
+    font-size: 15px;
+    flex-shrink: 0;
+  }
+
+  input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 14.5px;
+    color: @color-text-primary;
+
+    &::placeholder {
+      color: @color-text-tertiary;
+    }
+  }
+}
+
+.attr-clear {
+  border: none;
+  background: transparent;
+  color: @color-text-tertiary;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 4px;
+  border-radius: @radius-sm;
+  display: none;
+  transition: @transition-base;
+
+  &:hover {
+    color: @color-text-primary;
+    background: rgba(15, 23, 42, 0.06);
+  }
+
+  &.show {
+    display: inline-flex;
+  }
+}
+
+.attr-count {
+  font-size: 13.5px;
+  color: @color-text-tertiary;
+
+  span {
+    font-weight: 700;
+    color: @color-primary;
+  }
+}
+
+.attr-group {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+  margin-bottom: clamp(26px, 3.5vw, 38px);
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.attr-group-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: clamp(16px, 2vw, 18px);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+
+  i {
+    color: @color-primary;
+  }
+}
+
+.attrs-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: clamp(10px, 1.8vw, 14px);
+
+  @media (max-width: 1080px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media (max-width: 780px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.attr-item {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: clamp(12px, 2vw, 15px);
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.attr-name {
+  font-weight: 700;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13.5px;
+  letter-spacing: -0.01em;
+  color: @color-primary-dark;
+}
+
+.attr-desc {
+  color: @color-text-secondary;
+  font-size: 13.8px;
+  line-height: 1.85;
+}
+
+.attr-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: clamp(32px, 5vw, 56px) 0;
+  color: @color-text-tertiary;
+
+  &[hidden] {
+    display: none;
+  }
+
+  i {
+    font-size: 28px;
+    opacity: 0.5;
+  }
+
+  p {
+    font-size: 15px;
+  }
+}
+
+.attr-more {
+  text-align: center;
+  color: @color-text-secondary;
+
+  a {
+    color: @color-primary;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// ---------- Event Model ----------
+.event-flow {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(10px, 1.8vw, 14px);
+  margin-top: clamp(28px, 4vw, 40px);
+
+  @media (max-width: 992px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.flow-step {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: clamp(18px, 2.5vw, 24px) clamp(14px, 2vw, 20px);
+}
+
+.flow-num {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  .flex-center();
+  font-weight: 800;
+  font-size: 15px;
+  color: #fff;
+  .icon-gradient();
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px @color-primary;
+}
+
+.flow-title {
+  font-weight: 700;
+  font-size: 15.5px;
+  letter-spacing: -0.01em;
+}
+
+.flow-desc {
+  color: @color-text-secondary;
+  font-size: 13.5px;
+  line-height: 1.8;
+}
+
+.flow-arrow {
+  .flex-center();
+  color: @color-text-tertiary;
+  font-size: 20px;
+
+  @media (max-width: 992px) {
+    transform: rotate(90deg);
+  }
+}
+
+// ---------- Code Block ----------
+.code-block {
+  margin-top: clamp(28px, 4vw, 40px);
+  border: 1px solid @color-border;
+  border-radius: @radius-xl;
+  box-shadow: @shadow-sm;
+  overflow: hidden;
+  background: #0f172a;
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 16px;
+  background: linear-gradient(180deg, #0f172a 0%, #0b1226 100%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+}
+
+.code-title {
+  margin-left: 8px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-copy {
+  margin-left: auto;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.72);
+  width: 30px;
+  height: 30px;
+  border-radius: @radius-sm;
+  .flex-center();
+  cursor: pointer;
+  font-size: 13px;
+  flex-shrink: 0;
+  transition: @transition-base;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.14);
+    color: #fff;
+  }
+
+  &.copied {
+    color: #4ade80;
+    border-color: rgba(74, 222, 128, 0.4);
+  }
+}
+
+pre {
+  margin: 0;
+  padding: clamp(16px, 2.5vw, 24px);
+  overflow: auto;
+  max-height: 440px;
+  background:
+    radial-gradient(800px 600px at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(15, 23, 42, 0) 70%),
+    #0f172a;
+}
+
+code.language-csharp {
+  color: #e2e8f0;
+  font-size: clamp(12.5px, 1.9vw, 14px);
+  line-height: 1.9;
+  white-space: pre;
+  display: block;
+  background: transparent;
+  padding: 0;
+}
+
+// ---------- Toolchain ----------
+.tool-card {
+  gap: clamp(14px, 2vw, 18px);
+  min-height: 220px;
+}
+
+.tool-header {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 2vw, 12px);
+}
+
+.tool-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  color: @color-text-secondary;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    line-height: 1.9;
+
+    i {
+      color: @color-success;
+      margin-top: 5px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// ---------- Steps ----------
+.steps {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(12px, 2vw, 16px);
+
+  @media (max-width: 992px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.step {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(10px, 2vw, 14px);
+  padding: clamp(20px, 2.5vw, 28px);
+
+  h3 {
+    font-size: clamp(16px, 2vw, 18px);
+    letter-spacing: -0.02em;
+  }
+
+  p {
+    color: @color-text-secondary;
+    line-height: 1.9;
+  }
+}
+
+.step-num {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  .flex-center();
+  font-weight: 800;
+  font-size: 17px;
+  color: #fff;
+  .icon-gradient();
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 40px -20px @color-primary;
+}
+
+.step-arrow {
+  .flex-center();
+  color: @color-text-tertiary;
+  font-size: 26px;
+
+  @media (max-width: 992px) {
+    transform: rotate(90deg);
+  }
+}
+
+// ---------- Use Cases ----------
+.usecases {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: clamp(18px, 3vw, 24px);
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.usecase {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+  padding: clamp(20px, 3vw, 28px);
+
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: clamp(18px, 2vw, 20px);
+
+    i {
+      font-size: 22px;
+    }
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    list-style: none;
+    color: @color-text-secondary;
+
+    li {
+      padding-left: 22px;
+      position: relative;
+      line-height: 1.95;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 11px;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: rgba(15, 23, 42, 0.25);
+      }
+    }
+  }
+
+  &.fit {
+    h3 i {
+      color: @color-success;
+    }
+
+    li::before {
+      background: @color-success;
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+    }
+  }
+
+  &.notfit {
+    h3 i {
+      color: @color-danger;
+    }
+
+    li::before {
+      background: @color-danger;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+    }
+  }
+}
+
+// ---------- Ecosystem ----------
+.ecosystem-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: clamp(14px, 2.5vw, 18px);
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.eco-card {
+  .card-base();
+  display: flex;
+  align-items: center;
+  gap: clamp(14px, 2vw, 18px);
+  padding: clamp(16px, 2.5vw, 20px);
+
+  &:hover .eco-arrow {
+    transform: translateX(4px);
+  }
+}
+
+.eco-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  .flex-center();
+  color: #fff;
+  .icon-gradient();
+  flex-shrink: 0;
+
+  i {
+    font-size: 22px;
+  }
+}
+
+.eco-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  h3 {
+    font-size: clamp(16px, 2vw, 18px);
+    letter-spacing: -0.01em;
+  }
+
+  p {
+    color: @color-text-secondary;
+    line-height: 1.85;
+  }
+}
+
+.eco-arrow {
+  margin-left: auto;
+  color: @color-text-tertiary;
+  font-size: 20px;
+  flex-shrink: 0;
+  transition: @transition-base;
+}
+
+// ---------- CTA ----------
+.cta-section {
+  padding-bottom: clamp(64px, 8vw, 96px);
+}
+
+.cta-inner {
+  .card-base();
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(16px, 2.5vw, 22px);
+  padding: clamp(28px, 5vw, 48px);
+  background:
+    radial-gradient(1200px 800px at 50% 0%, rgba(99, 102, 241, 0.12) 0%, rgba(255, 255, 255, 0) 70%),
+    radial-gradient(800px 600px at 50% 100%, rgba(14, 165, 233, 0.08) 0%, rgba(255, 255, 255, 0) 70%),
+    linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
+  border-color: rgba(79, 70, 229, 0.25);
+  box-shadow: 0 40px 90px -40px rgba(79, 70, 229, 0.4);
+
+  &:hover {
+    transform: none;
+  }
+
+  h2 {
+    font-size: clamp(24px, 4.2vw, 40px);
+    line-height: 1.14;
+    letter-spacing: -0.04em;
+    font-weight: 800;
+  }
+
+  p {
+    color: @color-text-secondary;
+    max-width: 780px;
+    font-size: clamp(15px, 2.2vw, 17.5px);
+    line-height: 1.95;
+  }
+}
+
+.cta-note {
+  font-size: 13.5px;
+  color: @color-text-tertiary;
+}
+
+// ---------- Footer ----------
+.footer {
+  background: #0b1226;
+  color: rgba(255, 255, 255, 0.88);
+  padding-top: clamp(48px, 6vw, 64px);
+}
+
+.footer-inner {
+  display: grid;
+  grid-template-columns: 1.2fr 2fr;
+  gap: clamp(32px, 6vw, 64px);
+  padding-bottom: clamp(32px, 5vw, 48px);
+
+  @media (max-width: 880px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(14px, 2vw, 18px);
+
+  .logo {
+    justify-content: flex-start;
+  }
+
+  .logo-mark {
+    .icon-gradient(#a5b4fc, #818cf8);
+  }
+
+  .logo-text {
+    color: #fff;
+  }
+}
+
+.footer-desc {
+  color: rgba(255, 255, 255, 0.72);
+  line-height: 1.95;
+  max-width: 340px;
+}
+
+.footer-links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: clamp(20px, 3vw, 32px);
+
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 2vw, 14px);
+
+  h4 {
+    font-size: 14.5px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    color: #fff;
+  }
+
+  a {
+    color: rgba(255, 255, 255, 0.72);
+    width: fit-content;
+    transition: @transition-base;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 18px 0;
+
+  p {
+    color: rgba(255, 255, 255, 0.56);
+    font-size: 14px;
+    text-align: center;
+  }
+}
+
+// ---------- Back to Top ----------
+.back-to-top {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  border: 1px solid @color-border;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(8px);
+  box-shadow: @shadow-md;
+  .flex-center();
+  cursor: pointer;
+  font-size: 17px;
+  color: @color-text-primary;
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+  transition: @transition-base;
+  z-index: 900;
+
+  &.show {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+
+// ---------- Animations ----------
+.fade-up {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+
+  &.in {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.delay-1 {
+  transition-delay: 0.08s;
+}
+
+.delay-2 {
+  transition-delay: 0.16s;
+}
+
+// ---------- Reduced Motion ----------
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  .fade-up,
+  .mockup,
+  .card,
+  .btn,
+  .host-card,
+  .attr-item {
+    transition: none;
+    transform: none;
+  }
+
+  .fade-up {
+    opacity: 1;
+  }
+}