From 747405dc963c65359ebb9f6104f19956e356a422 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Mon, 4 May 2026 00:00:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4hero=E6=B0=B4?=
 =?UTF-8?q?=E5=A2=A8=E5=8A=A8=E7=94=BB=EF=BC=8C=E4=BC=98=E5=8C=96=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F=E4=B8=8E=E7=BB=84=E4=BB=B6=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../39838-1777791603/.server-stopped          |   1 +
 .../39838-1777791603/animation-style.html     |  52 ++
 .../hero-animation-demos.html                 | 332 ++++++++
 .../39838-1777791603/hero-ink-demos.html      | 447 ++++++++++
 .../39838-1777791603/hero-refined-demos.html  | 779 ++++++++++++++++++
 ...26-05-03-particle-visual-upgrade-design.md |  55 ++
 public/apple-touch-icon.png                   | Bin 0 -> 10809 bytes
 public/favicon-16x16.png                      | Bin 0 -> 664 bytes
 public/favicon-32x32.png                      | Bin 0 -> 1418 bytes
 public/favicon.ico                            | Bin 0 -> 1440 bytes
 public/site.webmanifest                       |  26 +
 scripts/generate-favicons.js                  |  42 +
 src/app/globals.css                           |   6 +-
 src/app/layout.tsx                            |   7 +-
 src/components/layout/breadcrumb.tsx          |   4 +-
 src/components/layout/page-nav.tsx            |  10 +-
 src/components/sections/hero-section-v2.tsx   |   7 -
 src/components/ui/back-to-top.tsx             |   2 +-
 src/components/ui/flip-clock.tsx              |   6 +-
 19 files changed, 1757 insertions(+), 19 deletions(-)
 create mode 100644 .superpowers/brainstorm/39838-1777791603/.server-stopped
 create mode 100644 .superpowers/brainstorm/39838-1777791603/animation-style.html
 create mode 100644 .superpowers/brainstorm/39838-1777791603/hero-animation-demos.html
 create mode 100644 .superpowers/brainstorm/39838-1777791603/hero-ink-demos.html
 create mode 100644 .superpowers/brainstorm/39838-1777791603/hero-refined-demos.html
 create mode 100644 docs/superpowers/specs/2026-05-03-particle-visual-upgrade-design.md
 create mode 100644 public/apple-touch-icon.png
 create mode 100644 public/favicon-16x16.png
 create mode 100644 public/favicon-32x32.png
 create mode 100644 public/favicon.ico
 create mode 100644 public/site.webmanifest
 create mode 100644 scripts/generate-favicons.js

diff --git a/.superpowers/brainstorm/39838-1777791603/.server-stopped b/.superpowers/brainstorm/39838-1777791603/.server-stopped
new file mode 100644
index 0000000..96d1744
--- /dev/null
+++ b/.superpowers/brainstorm/39838-1777791603/.server-stopped
@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1777795204433}
diff --git a/.superpowers/brainstorm/39838-1777791603/animation-style.html b/.superpowers/brainstorm/39838-1777791603/animation-style.html
new file mode 100644
index 0000000..94ffd30
--- /dev/null
+++ b/.superpowers/brainstorm/39838-1777791603/animation-style.html
@@ -0,0 +1,52 @@
+<h2>Hero 动画风格偏好</h2>
+<p class="subtitle">你希望 Hero 区域传达什么样的品牌气质？选择最接近你期望的方向</p>
+
+<div class="options">
+  <div class="option" data-choice="a" onclick="toggleSelect(this)">
+    <div class="letter">A</div>
+    <div class="content">
+      <h3>沉稳专业 — 微妙渐变 + 文字动效</h3>
+      <p>暖白/浅灰渐变背景，文字依次淡入上浮，极简装饰元素（如细线圆圈）。类似 Atlassian、Stripe 的克制风格。强调品牌可信度与专业感。</p>
+      <div class="pros-cons">
+        <div class="pros"><h4>优势</h4><ul><li>加载快，性能开销极低</li><li>适配所有设备</li><li>与现有品牌色（朱砂红 #C41E3A）自然融合</li></ul></div>
+        <div class="cons"><h4>注意</h4><ul><li>视觉冲击力相对温和</li><li>需要文字排版功底支撑</li></ul></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="option" data-choice="b" onclick="toggleSelect(this)">
+    <div class="letter">B</div>
+    <div class="content">
+      <h3>科技动感 — 流光渐变 + 粒子/网格</h3>
+      <p>深色或渐变背景，数据粒子流动、科技网格线、光晕效果。强调数字化转型与科技实力。类似 Vercel、Linear 的科技美学。</p>
+      <div class="pros-cons">
+        <div class="pros"><h4>优势</h4><ul><li>视觉冲击力强</li><li>与"数字化转型"定位高度契合</li><li>项目已有 DataParticleFlow、TechGridFlow 等组件</li></ul></div>
+        <div class="cons"><h4>注意</h4><ul><li>性能开销中等</li><li>需要控制粒子数量避免喧宾夺主</li></ul></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="option" data-choice="c" onclick="toggleSelect(this)">
+    <div class="letter">C</div>
+    <div class="content">
+      <h3>东方韵味 — 水墨/印章 + 现代排版</h3>
+      <p>融合中国传统元素（水墨晕染、印章动画）与现代极简排版。强调文化底蕴与创新融合。项目已有 InkBackground、SealAnimation 等组件。</p>
+      <div class="pros-cons">
+        <div class="pros"><h4>优势</h4><ul><li>品牌辨识度极高</li><li>差异化明显，同行少有</li><li>与 Novalon（诺华麟）品牌名呼应</li></ul></div>
+        <div class="cons"><h4>注意</h4><ul><li>设计难度高，容易"土味"</li><li>需要精准控制水墨效果的克制度</li></ul></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="option" data-choice="d" onclick="toggleSelect(this)">
+    <div class="letter">D</div>
+    <div class="content">
+      <h3>融合创新 — 克制科技 + 品牌印记</h3>
+      <p>以方案 A 的沉稳为底色，融入方案 B 的微妙科技光效（如渐变光晕），点缀方案 C 的品牌印章元素。三者取精华，克制融合。</p>
+      <div class="pros-cons">
+        <div class="pros"><h4>优势</h4><ul><li>兼顾专业感、科技感、品牌辨识度</li><li>层次丰富但不杂乱</li><li>与之前的设计方向（品牌融合重构）一致</li></ul></div>
+        <div class="cons"><h4>注意</h4><ul><li>实现复杂度最高</li><li>需要精心调校各元素的视觉权重</li></ul></div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/.superpowers/brainstorm/39838-1777791603/hero-animation-demos.html b/.superpowers/brainstorm/39838-1777791603/hero-animation-demos.html
new file mode 100644
index 0000000..dfd1ffe
--- /dev/null
+++ b/.superpowers/brainstorm/39838-1777791603/hero-animation-demos.html
@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Hero 动画风格 Demo</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111; color: #fff; }
+
+  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; gap: 8px; padding: 16px 24px; background: rgba(0,0,0,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); }
+  .nav button { padding: 8px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font-size: 14px; transition: all 0.3s; }
+  .nav button:hover { background: rgba(255,255,255,0.1); }
+  .nav button.active { background: #C41E3A; border-color: #C41E3A; }
+
+  .demo-section { display: none; position: relative; min-height: 100vh; overflow: hidden; }
+  .demo-section.active { display: flex; }
+
+  .hero-content { position: relative; z-index: 10; max-width: 720px; padding: 0 48px; }
+  .hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; margin-bottom: 24px; }
+  .hero-title { font-size: 64px; font-weight: 400; line-height: 1.1; margin-bottom: 20px; letter-spacing: -0.02em; }
+  .hero-subtitle { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
+  .hero-desc { font-size: 18px; line-height: 1.7; margin-bottom: 36px; opacity: 0.7; }
+  .hero-buttons { display: flex; gap: 16px; }
+  .btn-primary { padding: 14px 32px; background: #C41E3A; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
+  .btn-outline { padding: 14px 32px; background: transparent; color: #1C1C1C; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 16px; cursor: pointer; }
+
+  .style-label { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 8px 24px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.6); z-index: 100; }
+
+  /* ========== Style A: 沉稳专业 ========== */
+  #style-a { background: linear-gradient(180deg, #FFFBF5 0%, #FFFFFF 100%); color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 20vh; }
+  #style-a .hero-tag { background: #FEF2F4; color: #C41E3A; border: 1px solid rgba(196,30,58,0.1); }
+  #style-a .hero-subtitle { color: #C41E3A; }
+  #style-a .btn-primary { background: #C41E3A; color: #fff; }
+  #style-a .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
+
+  #style-a .deco-circle-1 { position: absolute; top: 80px; right: 120px; width: 96px; height: 96px; border: 1px solid rgba(196,30,58,0.08); border-radius: 50%; }
+  #style-a .deco-circle-2 { position: absolute; bottom: 120px; left: 80px; width: 72px; height: 72px; border: 1px solid rgba(196,30,58,0.06); border-radius: 50%; }
+  #style-a .deco-line { position: absolute; top: 200px; right: 200px; width: 200px; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,30,58,0.1), transparent); }
+
+  /* A animations */
+  @keyframes a-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes a-circle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+  @keyframes a-line-shimmer { 0% { opacity: 0.3; } 50% { opacity: 0.8; } 100% { opacity: 0.3; } }
+
+  #style-a .hero-tag { animation: a-fade-up 0.6s ease-out 0.1s both; }
+  #style-a .hero-title { animation: a-fade-up 0.6s ease-out 0.2s both; }
+  #style-a .hero-subtitle { animation: a-fade-up 0.6s ease-out 0.3s both; }
+  #style-a .hero-desc { animation: a-fade-up 0.6s ease-out 0.4s both; }
+  #style-a .hero-buttons { animation: a-fade-up 0.6s ease-out 0.5s both; }
+  #style-a .deco-circle-1 { animation: a-circle-float 6s ease-in-out infinite; }
+  #style-a .deco-circle-2 { animation: a-circle-float 8s ease-in-out 1s infinite; }
+  #style-a .deco-line { animation: a-line-shimmer 4s ease-in-out infinite; }
+
+  /* ========== Style B: 科技动感 ========== */
+  #style-b { background: #0A0A0A; color: #fff; align-items: center; justify-content: flex-start; padding-top: 20vh; }
+  #style-b .hero-tag { background: rgba(196,30,58,0.15); color: #ff6b7a; border: 1px solid rgba(196,30,58,0.3); }
+  #style-b .hero-title { color: #fff; }
+  #style-b .hero-subtitle { color: #ff6b7a; }
+  #style-b .hero-desc { color: rgba(255,255,255,0.6); }
+  #style-b .btn-primary { background: #C41E3A; color: #fff; }
+  #style-b .btn-outline { color: #fff; border-color: rgba(255,255,255,0.2); }
+
+  #style-b .grid-bg { position: absolute; inset: 0; background-image:
+    linear-gradient(rgba(196,30,58,0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(196,30,58,0.05) 1px, transparent 1px);
+    background-size: 60px 60px;
+    mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 20%, transparent 70%);
+  }
+  #style-b .glow-1 { position: absolute; top: 10%; right: 15%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(196,30,58,0.15) 0%, transparent 70%); filter: blur(60px); border-radius: 50%; }
+  #style-b .glow-2 { position: absolute; bottom: 20%; left: 10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(100,100,255,0.1) 0%, transparent 70%); filter: blur(60px); border-radius: 50%; }
+
+  /* B particles */
+  #style-b .particles { position: absolute; inset: 0; }
+  #style-b .particle { position: absolute; width: 3px; height: 3px; background: rgba(196,30,58,0.6); border-radius: 1px; }
+
+  @keyframes b-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes b-particle-float {
+    0% { transform: translate(0, 0) scale(1); opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; }
+  }
+  @keyframes b-glow-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
+  @keyframes b-grid-flow { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
+
+  #style-b .grid-bg { animation: b-grid-flow 8s linear infinite; }
+  #style-b .glow-1 { animation: b-glow-pulse 6s ease-in-out infinite; }
+  #style-b .glow-2 { animation: b-glow-pulse 8s ease-in-out 2s infinite; }
+  #style-b .hero-tag { animation: b-fade-up 0.6s ease-out 0.2s both; }
+  #style-b .hero-title { animation: b-fade-up 0.6s ease-out 0.3s both; }
+  #style-b .hero-subtitle { animation: b-fade-up 0.6s ease-out 0.4s both; }
+  #style-b .hero-desc { animation: b-fade-up 0.6s ease-out 0.5s both; }
+  #style-b .hero-buttons { animation: b-fade-up 0.6s ease-out 0.6s both; }
+
+  /* ========== Style C: 东方韵味 ========== */
+  #style-c { background: #FAFAF5; color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 18vh; }
+  #style-c .hero-tag { background: rgba(196,30,58,0.08); color: #C41E3A; border: 1px solid rgba(196,30,58,0.15); }
+  #style-c .hero-title { font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif; font-size: 72px; font-weight: 400; }
+  #style-c .hero-subtitle { color: #C41E3A; }
+  #style-c .btn-primary { background: #C41E3A; color: #fff; }
+  #style-c .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
+
+  /* C ink effects */
+  #style-c .ink-bg { position: absolute; inset: 0; overflow: hidden; }
+  #style-c .ink-blob { position: absolute; border-radius: 50%; filter: blur(80px); }
+
+  @keyframes c-ink-spread {
+    0% { transform: scale(0); opacity: 0; }
+    30% { opacity: 0.15; }
+    100% { transform: scale(1); opacity: 0.08; }
+  }
+  @keyframes c-ink-drift {
+    0%, 100% { transform: translate(0, 0) rotate(0deg); }
+    25% { transform: translate(10px, -15px) rotate(2deg); }
+    50% { transform: translate(-5px, 10px) rotate(-1deg); }
+    75% { transform: translate(-10px, -5px) rotate(1deg); }
+  }
+  @keyframes c-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes c-seal-stamp {
+    0% { transform: scale(2) rotate(-15deg); opacity: 0; }
+    60% { transform: scale(0.9) rotate(2deg); opacity: 1; }
+    80% { transform: scale(1.05) rotate(-1deg); }
+    100% { transform: scale(1) rotate(0deg); opacity: 1; }
+  }
+
+  #style-c .ink-blob-1 { top: 5%; right: 10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(28,28,28,0.12) 0%, transparent 70%); animation: c-ink-spread 2s ease-out 0.3s both, c-ink-drift 20s ease-in-out 2.3s infinite; }
+  #style-c .ink-blob-2 { bottom: 10%; left: 5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(196,30,58,0.1) 0%, transparent 70%); animation: c-ink-spread 2.5s ease-out 0.6s both, c-ink-drift 25s ease-in-out 2.6s infinite; }
+  #style-c .ink-blob-3 { top: 40%; right: 30%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(28,28,28,0.06) 0%, transparent 70%); animation: c-ink-spread 1.8s ease-out 0.9s both, c-ink-drift 18s ease-in-out 2s infinite; }
+
+  #style-c .seal { position: absolute; top: 15%; right: 12%; width: 80px; height: 80px; border: 3px solid #C41E3A; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-size: 28px; color: #C41E3A; transform: rotate(-8deg); animation: c-seal-stamp 0.8s ease-out 1.2s both; opacity: 0; }
+
+  #style-c .hero-tag { animation: c-fade-up 0.6s ease-out 0.2s both; }
+  #style-c .hero-title { animation: c-fade-up 0.8s ease-out 0.4s both; }
+  #style-c .hero-subtitle { animation: c-fade-up 0.6s ease-out 0.6s both; }
+  #style-c .hero-desc { animation: c-fade-up 0.6s ease-out 0.7s both; }
+  #style-c .hero-buttons { animation: c-fade-up 0.6s ease-out 0.8s both; }
+
+  /* ========== Style D: 融合创新 ========== */
+  #style-d { background: linear-gradient(170deg, #FFFBF5 0%, #FFF5F6 40%, #FFFFFF 100%); color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 20vh; }
+  #style-d .hero-tag { background: #FEF2F4; color: #C41E3A; border: 1px solid rgba(196,30,58,0.1); }
+  #style-d .hero-title { font-size: 64px; }
+  #style-d .hero-subtitle { color: #C41E3A; }
+  #style-d .btn-primary { background: #C41E3A; color: #fff; }
+  #style-d .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
+
+  /* D fusion effects */
+  #style-d .glow-bg { position: absolute; inset: 0; overflow: hidden; }
+  #style-d .glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
+
+  @keyframes d-glow-move {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(30px, -20px) scale(1.1); }
+    66% { transform: translate(-20px, 15px) scale(0.95); }
+  }
+  @keyframes d-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes d-line-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
+  @keyframes d-seal-appear {
+    0% { transform: scale(1.8) rotate(-12deg); opacity: 0; }
+    70% { transform: scale(0.95) rotate(1deg); opacity: 0.9; }
+    100% { transform: scale(1) rotate(-4deg); opacity: 0.85; }
+  }
+  @keyframes d-dot-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.5); } }
+
+  #style-d .glow-orb-1 { top: 5%; right: 10%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(196,30,58,0.08) 0%, transparent 70%); animation: d-glow-move 15s ease-in-out infinite; }
+  #style-d .glow-orb-2 { bottom: 15%; left: 8%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(196,30,58,0.05) 0%, transparent 70%); animation: d-glow-move 20s ease-in-out 3s infinite; }
+  #style-d .glow-orb-3 { top: 30%; left: 40%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(100,100,200,0.04) 0%, transparent 70%); animation: d-glow-move 18s ease-in-out 6s infinite; }
+
+  #style-d .seal-small { position: absolute; bottom: 25%; right: 15%; width: 56px; height: 56px; border: 2px solid rgba(196,30,58,0.6); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-size: 20px; color: rgba(196,30,58,0.6); animation: d-seal-appear 0.7s ease-out 1s both; opacity: 0; }
+
+  #style-d .tech-dots { position: absolute; top: 20%; right: 25%; }
+  #style-d .tech-dot { position: absolute; width: 4px; height: 4px; background: rgba(196,30,58,0.3); border-radius: 50%; animation: d-dot-pulse 3s ease-in-out infinite; }
+
+  #style-d .deco-line-svg { position: absolute; top: 15%; right: 8%; width: 200px; height: 200px; }
+  #style-d .deco-line-svg line { stroke: rgba(196,30,58,0.1); stroke-width: 1; stroke-dasharray: 200; animation: d-line-draw 2s ease-out 0.5s both; }
+
+  #style-d .hero-tag { animation: d-fade-up 0.5s ease-out 0.1s both; }
+  #style-d .hero-title { animation: d-fade-up 0.6s ease-out 0.2s both; }
+  #style-d .hero-subtitle { animation: d-fade-up 0.5s ease-out 0.3s both; }
+  #style-d .hero-desc { animation: d-fade-up 0.5s ease-out 0.4s both; }
+  #style-d .hero-buttons { animation: d-fade-up 0.5s ease-out 0.5s both; }
+
+  /* Replay button */
+  .replay-btn { position: fixed; bottom: 24px; right: 24px; z-index: 100; padding: 10px 20px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; backdrop-filter: blur(8px); }
+  .replay-btn:hover { background: rgba(0,0,0,0.8); }
+</style>
+</head>
+<body>
+
+<div class="nav">
+  <button class="active" onclick="switchStyle('a')">A 沉稳专业</button>
+  <button onclick="switchStyle('b')">B 科技动感</button>
+  <button onclick="switchStyle('c')">C 东方韵味</button>
+  <button onclick="switchStyle('d')">D 融合创新</button>
+</div>
+
+<!-- Style A: 沉稳专业 -->
+<section id="style-a" class="demo-section active">
+  <div class="deco-circle-1"></div>
+  <div class="deco-circle-2"></div>
+  <div class="deco-line"></div>
+  <div class="hero-content">
+    <div class="hero-tag">✦ 智连未来，成长伙伴</div>
+    <h1 class="hero-title">睿新致遠</h1>
+    <p class="hero-subtitle">企业数字化转型服务商</p>
+    <p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="hero-buttons">
+      <button class="btn-primary">立即咨询 →</button>
+      <button class="btn-outline">探索产品</button>
+    </div>
+  </div>
+</section>
+
+<!-- Style B: 科技动感 -->
+<section id="style-b" class="demo-section">
+  <div class="grid-bg"></div>
+  <div class="glow-1"></div>
+  <div class="glow-2"></div>
+  <div class="particles" id="particles-b"></div>
+  <div class="hero-content">
+    <div class="hero-tag">✦ 智连未来，成长伙伴</div>
+    <h1 class="hero-title">睿新致遠</h1>
+    <p class="hero-subtitle">企业数字化转型服务商</p>
+    <p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="hero-buttons">
+      <button class="btn-primary">立即咨询 →</button>
+      <button class="btn-outline">探索产品</button>
+    </div>
+  </div>
+</section>
+
+<!-- Style C: 东方韵味 -->
+<section id="style-c" class="demo-section">
+  <div class="ink-bg">
+    <div class="ink-blob ink-blob-1"></div>
+    <div class="ink-blob ink-blob-2"></div>
+    <div class="ink-blob ink-blob-3"></div>
+  </div>
+  <div class="seal">睿</div>
+  <div class="hero-content">
+    <div class="hero-tag">✦ 智连未来，成长伙伴</div>
+    <h1 class="hero-title">睿新致遠</h1>
+    <p class="hero-subtitle">企业数字化转型服务商</p>
+    <p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="hero-buttons">
+      <button class="btn-primary">立即咨询 →</button>
+      <button class="btn-outline">探索产品</button>
+    </div>
+  </div>
+</section>
+
+<!-- Style D: 融合创新 -->
+<section id="style-d" class="demo-section">
+  <div class="glow-bg">
+    <div class="glow-orb glow-orb-1"></div>
+    <div class="glow-orb glow-orb-2"></div>
+    <div class="glow-orb glow-orb-3"></div>
+  </div>
+  <svg class="deco-line-svg" viewBox="0 0 200 200">
+    <line x1="20" y1="20" x2="180" y2="180" />
+    <line x1="180" y1="20" x2="20" y2="180" />
+  </svg>
+  <div class="tech-dots">
+    <div class="tech-dot" style="top:0;left:0;animation-delay:0s"></div>
+    <div class="tech-dot" style="top:0;left:20px;animation-delay:0.5s"></div>
+    <div class="tech-dot" style="top:20px;left:10px;animation-delay:1s"></div>
+    <div class="tech-dot" style="top:20px;left:30px;animation-delay:1.5s"></div>
+    <div class="tech-dot" style="top:40px;left:5px;animation-delay:0.3s"></div>
+  </div>
+  <div class="seal-small">睿</div>
+  <div class="hero-content">
+    <div class="hero-tag">✦ 智连未来，成长伙伴</div>
+    <h1 class="hero-title">睿新致遠</h1>
+    <p class="hero-subtitle">企业数字化转型服务商</p>
+    <p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="hero-buttons">
+      <button class="btn-primary">立即咨询 →</button>
+      <button class="btn-outline">探索产品</button>
+    </div>
+  </div>
+</section>
+
+<div class="style-label" id="style-label">当前：A 沉稳专业 — 微妙渐变 + 文字动效</div>
+<button class="replay-btn" onclick="replayAnimation()">↻ 重播动画</button>
+
+<script>
+  const labels = {
+    a: 'A 沉稳专业 — 微妙渐变 + 文字动效',
+    b: 'B 科技动感 — 流光渐变 + 粒子/网格',
+    c: 'C 东方韵味 — 水墨/印章 + 现代排版',
+    d: 'D 融合创新 — 克制科技 + 品牌印记'
+  };
+
+  function switchStyle(style) {
+    document.querySelectorAll('.demo-section').forEach(s => s.classList.remove('active'));
+    document.querySelectorAll('.nav button').forEach(b => b.classList.remove('active'));
+    document.getElementById('style-' + style).classList.add('active');
+    document.querySelectorAll('.nav button')[['a','b','c','d'].indexOf(style)].classList.add('active');
+    document.getElementById('style-label').textContent = '当前：' + labels[style];
+    replayAnimation();
+  }
+
+  function replayAnimation() {
+    const active = document.querySelector('.demo-section.active');
+    const clone = active.cloneNode(true);
+    active.parentNode.replaceChild(clone, active);
+    if (active.id === 'style-b') initParticles();
+  }
+
+  // Particles for Style B
+  function initParticles() {
+    const container = document.getElementById('particles-b');
+    if (!container) return;
+    container.innerHTML = '';
+    for (let i = 0; i < 30; i++) {
+      const p = document.createElement('div');
+      p.className = 'particle';
+      const x = Math.random() * 100;
+      const y = Math.random() * 100;
+      const dx = (Math.random() - 0.5) * 200;
+      const dy = (Math.random() - 0.5) * 200;
+      const dur = Math.random() * 6 + 4;
+      const delay = Math.random() * 4;
+      p.style.cssText = `left:${x}%;top:${y}%;--dx:${dx}px;--dy:${dy}px;animation:b-particle-float ${dur}s ease-in-out ${delay}s infinite;`;
+      container.appendChild(p);
+    }
+  }
+
+  initParticles();
+</script>
+</body>
+</html>
diff --git a/.superpowers/brainstorm/39838-1777791603/hero-ink-demos.html b/.superpowers/brainstorm/39838-1777791603/hero-ink-demos.html
new file mode 100644
index 0000000..fab6a97
--- /dev/null
+++ b/.superpowers/brainstorm/39838-1777791603/hero-ink-demos.html
@@ -0,0 +1,447 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>东方韵味 Hero — 水墨扩散 Demo</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0a; color: #fff; overflow-x: hidden; }
+
+  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; gap: 8px; padding: 16px 24px; background: rgba(0,0,0,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); }
+  .nav button { padding: 8px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font-size: 14px; transition: all 0.3s; }
+  .nav button:hover { background: rgba(255,255,255,0.1); }
+  .nav button.active { background: #C41E3A; border-color: #C41E3A; }
+
+  .demo-section { display: none; position: relative; min-height: 100vh; overflow: hidden; }
+  .demo-section.active { display: flex; }
+
+  .hero-content { position: relative; z-index: 10; max-width: 720px; padding: 0 48px; }
+  .hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; margin-bottom: 24px; }
+  .hero-title { font-size: 72px; font-weight: 400; line-height: 1.1; margin-bottom: 20px; letter-spacing: 0.05em; }
+  .hero-subtitle { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
+  .hero-desc { font-size: 18px; line-height: 1.7; margin-bottom: 36px; opacity: 0.6; }
+  .hero-buttons { display: flex; gap: 16px; }
+  .btn-primary { padding: 14px 32px; background: #C41E3A; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
+  .btn-outline { padding: 14px 32px; background: transparent; color: #1C1C1C; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 16px; cursor: pointer; }
+
+  .replay-btn { position: fixed; bottom: 24px; right: 24px; z-index: 100; padding: 10px 20px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; backdrop-filter: blur(8px); }
+  .replay-btn:hover { background: rgba(0,0,0,0.8); }
+  .style-label { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 8px 24px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.6); z-index: 100; }
+
+  /* ========== Variant 1: 宣纸底色 + 真实水墨扩散 ========== */
+  #v1 { background: #F7F4EE; color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 20vh; }
+  #v1 .hero-tag { background: rgba(196,30,58,0.08); color: #C41E3A; border: 1px solid rgba(196,30,58,0.15); }
+  #v1 .hero-title { font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif; color: #1a1a1a; }
+  #v1 .hero-subtitle { color: #C41E3A; }
+  #v1 .btn-primary { background: #C41E3A; color: #fff; }
+  #v1 .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
+
+  #v1 .ink-canvas { position: absolute; inset: 0; pointer-events: none; }
+  #v1 .seal { position: absolute; top: 18%; right: 14%; width: 72px; height: 72px; border: 2.5px solid #C41E3A; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-size: 26px; color: #C41E3A; opacity: 0; }
+  #v1 .paper-texture { position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
+
+  @keyframes v1-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes v1-seal-stamp {
+    0% { transform: scale(2.5) rotate(-15deg); opacity: 0; }
+    50% { transform: scale(0.85) rotate(3deg); opacity: 1; }
+    70% { transform: scale(1.1) rotate(-2deg); }
+    100% { transform: scale(1) rotate(-5deg); opacity: 0.9; }
+  }
+
+  #v1 .hero-tag { animation: v1-fade-up 0.6s ease-out 1.5s both; }
+  #v1 .hero-title { animation: v1-fade-up 0.8s ease-out 1.8s both; }
+  #v1 .hero-subtitle { animation: v1-fade-up 0.6s ease-out 2.1s both; }
+  #v1 .hero-desc { animation: v1-fade-up 0.6s ease-out 2.3s both; }
+  #v1 .hero-buttons { animation: v1-fade-up 0.6s ease-out 2.5s both; }
+  #v1 .seal { animation: v1-seal-stamp 0.8s ease-out 2.8s both; }
+
+  /* ========== Variant 2: 深色 + 金墨扩散 ========== */
+  #v2 { background: #0D0D0D; color: #F5F0E8; align-items: center; justify-content: flex-start; padding-top: 20vh; }
+  #v2 .hero-tag { background: rgba(196,30,58,0.2); color: #ff8a95; border: 1px solid rgba(196,30,58,0.3); }
+  #v2 .hero-title { font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif; color: #F5F0E8; }
+  #v2 .hero-subtitle { color: #C41E3A; }
+  #v2 .hero-desc { color: rgba(245,240,232,0.5); }
+  #v2 .btn-primary { background: #C41E3A; color: #fff; }
+  #v2 .btn-outline { color: #F5F0E8; border-color: rgba(245,240,232,0.2); }
+
+  #v2 .ink-canvas { position: absolute; inset: 0; pointer-events: none; }
+  #v2 .seal { position: absolute; top: 18%; right: 14%; width: 72px; height: 72px; border: 2.5px solid rgba(196,30,58,0.8); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-size: 26px; color: rgba(196,30,58,0.8); opacity: 0; }
+  #v2 .ambient-glow { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(196,30,58,0.06) 0%, transparent 60%); filter: blur(40px); }
+
+  @keyframes v2-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes v2-seal-stamp {
+    0% { transform: scale(2.5) rotate(-15deg); opacity: 0; }
+    50% { transform: scale(0.85) rotate(3deg); opacity: 1; }
+    70% { transform: scale(1.1) rotate(-2deg); }
+    100% { transform: scale(1) rotate(-5deg); opacity: 0.85; }
+  }
+
+  #v2 .hero-tag { animation: v2-fade-up 0.6s ease-out 1.5s both; }
+  #v2 .hero-title { animation: v2-fade-up 0.8s ease-out 1.8s both; }
+  #v2 .hero-subtitle { animation: v2-fade-up 0.6s ease-out 2.1s both; }
+  #v2 .hero-desc { animation: v2-fade-up 0.6s ease-out 2.3s both; }
+  #v2 .hero-buttons { animation: v2-fade-up 0.6s ease-out 2.5s both; }
+  #v2 .seal { animation: v2-seal-stamp 0.8s ease-out 2.8s both; }
+
+  /* ========== Variant 3: 半透明水墨 + 现代极简 ========== */
+  #v3 { background: linear-gradient(170deg, #FAFAF5 0%, #FFF8F0 50%, #FFFFFF 100%); color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 20vh; }
+  #v3 .hero-tag { background: #FEF2F4; color: #C41E3A; border: 1px solid rgba(196,30,58,0.1); }
+  #v3 .hero-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 64px; letter-spacing: -0.02em; }
+  #v3 .hero-subtitle { color: #C41E3A; }
+  #v3 .btn-primary { background: #C41E3A; color: #fff; }
+  #v3 .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
+
+  #v3 .ink-canvas { position: absolute; inset: 0; pointer-events: none; }
+  #v3 .seal { position: absolute; bottom: 28%; right: 16%; width: 48px; height: 48px; border: 2px solid rgba(196,30,58,0.5); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-size: 18px; color: rgba(196,30,58,0.5); opacity: 0; }
+  #v3 .deco-dots { position: absolute; top: 22%; right: 20%; display: grid; grid-template-columns: repeat(3, 6px); gap: 12px; }
+  #v3 .deco-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(196,30,58,0.15); }
+
+  @keyframes v3-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes v3-seal-appear {
+    0% { transform: scale(1.8) rotate(-10deg); opacity: 0; }
+    70% { transform: scale(0.95) rotate(1deg); opacity: 0.8; }
+    100% { transform: scale(1) rotate(-3deg); opacity: 0.7; }
+  }
+  @keyframes v3-dot-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
+
+  #v3 .hero-tag { animation: v3-fade-up 0.5s ease-out 1.5s both; }
+  #v3 .hero-title { animation: v3-fade-up 0.6s ease-out 1.7s both; }
+  #v3 .hero-subtitle { animation: v3-fade-up 0.5s ease-out 1.9s both; }
+  #v3 .hero-desc { animation: v3-fade-up 0.5s ease-out 2.1s both; }
+  #v3 .hero-buttons { animation: v3-fade-up 0.5s ease-out 2.3s both; }
+  #v3 .seal { animation: v3-seal-appear 0.6s ease-out 2.5s both; }
+  #v3 .deco-dot { animation: v3-dot-pulse 3s ease-in-out infinite; }
+  #v3 .deco-dot:nth-child(2) { animation-delay: 0.4s; }
+  #v3 .deco-dot:nth-child(3) { animation-delay: 0.8s; }
+  #v3 .deco-dot:nth-child(4) { animation-delay: 0.2s; }
+  #v3 .deco-dot:nth-child(5) { animation-delay: 0.6s; }
+  #v3 .deco-dot:nth-child(6) { animation-delay: 1s; }
+</style>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+
+<div class="nav">
+  <button class="active" onclick="switchStyle('v1')">V1 宣纸水墨</button>
+  <button onclick="switchStyle('v2')">V2 深色金墨</button>
+  <button onclick="switchStyle('v3')">V3 水墨极简</button>
+</div>
+
+<!-- V1: 宣纸底色 + 真实水墨扩散 -->
+<section id="v1" class="demo-section active">
+  <div class="paper-texture"></div>
+  <canvas class="ink-canvas" id="ink-canvas-v1"></canvas>
+  <div class="seal">睿</div>
+  <div class="hero-content">
+    <div class="hero-tag">✦ 智连未来，成长伙伴</div>
+    <h1 class="hero-title">睿新致遠</h1>
+    <p class="hero-subtitle">企业数字化转型服务商</p>
+    <p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="hero-buttons">
+      <button class="btn-primary">立即咨询 →</button>
+      <button class="btn-outline">探索产品</button>
+    </div>
+  </div>
+</section>
+
+<!-- V2: 深色 + 金墨扩散 -->
+<section id="v2" class="demo-section">
+  <div class="ambient-glow"></div>
+  <canvas class="ink-canvas" id="ink-canvas-v2"></canvas>
+  <div class="seal">睿</div>
+  <div class="hero-content">
+    <div class="hero-tag">✦ 智连未来，成长伙伴</div>
+    <h1 class="hero-title">睿新致遠</h1>
+    <p class="hero-subtitle">企业数字化转型服务商</p>
+    <p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="hero-buttons">
+      <button class="btn-primary">立即咨询 →</button>
+      <button class="btn-outline">探索产品</button>
+    </div>
+  </div>
+</section>
+
+<!-- V3: 水墨极简 -->
+<section id="v3" class="demo-section">
+  <canvas class="ink-canvas" id="ink-canvas-v3"></canvas>
+  <div class="deco-dots">
+    <div class="deco-dot"></div><div class="deco-dot"></div><div class="deco-dot"></div>
+    <div class="deco-dot"></div><div class="deco-dot"></div><div class="deco-dot"></div>
+  </div>
+  <div class="seal">睿</div>
+  <div class="hero-content">
+    <div class="hero-tag">✦ 智连未来，成长伙伴</div>
+    <h1 class="hero-title">睿新致遠</h1>
+    <p class="hero-subtitle">企业数字化转型服务商</p>
+    <p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="hero-buttons">
+      <button class="btn-primary">立即咨询 →</button>
+      <button class="btn-outline">探索产品</button>
+    </div>
+  </div>
+</section>
+
+<div class="style-label" id="style-label">V1 宣纸水墨 — 传统宣纸底色 + 水墨扩散 + 印章</div>
+<button class="replay-btn" onclick="replayAnimation()">↻ 重播动画</button>
+
+<script>
+const labels = {
+  v1: 'V1 宣纸水墨 — 传统宣纸底色 + 水墨扩散 + 印章',
+  v2: 'V2 深色金墨 — 深色背景 + 金色/朱砂水墨 + 印章',
+  v3: 'V3 水墨极简 — 浅色现代 + 半透明水墨 + 微装饰',
+};
+
+let currentStyle = 'v1';
+let animFrames = {};
+
+function switchStyle(style) {
+  currentStyle = style;
+  document.querySelectorAll('.demo-section').forEach(s => s.classList.remove('active'));
+  document.querySelectorAll('.nav button').forEach(b => b.classList.remove('active'));
+  document.getElementById(style).classList.add('active');
+  document.querySelectorAll('.nav button')[['v1','v2','v3'].indexOf(style)].classList.add('active');
+  document.getElementById('style-label').textContent = labels[style];
+  replayAnimation();
+}
+
+function replayAnimation() {
+  Object.values(animFrames).forEach(id => cancelAnimationFrame(id));
+  animFrames = {};
+
+  const active = document.querySelector('.demo-section.active');
+  const clone = active.cloneNode(true);
+  active.parentNode.replaceChild(clone, active);
+
+  const canvasId = 'ink-canvas-' + currentStyle;
+  const canvas = document.getElementById(canvasId);
+  if (canvas) {
+    if (currentStyle === 'v1') startInkAnimationV1(canvas);
+    else if (currentStyle === 'v2') startInkAnimationV2(canvas);
+    else if (currentStyle === 'v3') startInkAnimationV3(canvas);
+  }
+}
+
+// ==========================================
+// Ink Spread Animation Engine
+// ==========================================
+
+class InkDroplet {
+  constructor(x, y, maxRadius, color, speed, canvas) {
+    this.x = x;
+    this.y = y;
+    this.maxRadius = maxRadius;
+    this.color = color;
+    this.speed = speed;
+    this.canvas = canvas;
+    this.radius = 0;
+    this.opacity = 0;
+    this.phase = 'spreading'; // spreading -> settling -> done
+    this.wobble = Math.random() * Math.PI * 2;
+    this.wobbleSpeed = 0.02 + Math.random() * 0.02;
+    this.wobbleAmp = 0.15 + Math.random() * 0.1;
+    this.edgeParticles = [];
+    this.settleTimer = 0;
+    this.branches = [];
+
+    const branchCount = 3 + Math.floor(Math.random() * 4);
+    for (let i = 0; i < branchCount; i++) {
+      const angle = (Math.PI * 2 / branchCount) * i + (Math.random() - 0.5) * 0.5;
+      this.branches.push({
+        angle,
+        length: 0,
+        maxLength: maxRadius * (0.3 + Math.random() * 0.5),
+        width: 2 + Math.random() * 4,
+        speed: speed * (0.6 + Math.random() * 0.4),
+        wobble: Math.random() * Math.PI * 2,
+      });
+    }
+  }
+
+  update() {
+    if (this.phase === 'spreading') {
+      this.radius += this.speed;
+      this.wobble += this.wobbleSpeed;
+      this.opacity = Math.min(0.6, this.radius / this.maxRadius * 0.6);
+
+      for (const b of this.branches) {
+        if (b.length < b.maxLength) {
+          b.length += b.speed;
+          b.wobble += 0.03;
+        }
+      }
+
+      if (this.radius >= this.maxRadius) {
+        this.phase = 'settling';
+      }
+    } else if (this.phase === 'settling') {
+      this.settleTimer++;
+      this.opacity = Math.max(0.08, this.opacity - 0.003);
+      this.wobble += this.wobbleSpeed * 0.5;
+      if (this.settleTimer > 120) {
+        this.phase = 'done';
+      }
+    }
+  }
+
+  draw(ctx) {
+    if (this.opacity <= 0) return;
+
+    // Main ink body with organic edge
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+
+    // Draw organic ink shape
+    ctx.beginPath();
+    const segments = 60;
+    for (let i = 0; i <= segments; i++) {
+      const angle = (Math.PI * 2 / segments) * i;
+      const wobbleOffset = Math.sin(angle * 3 + this.wobble) * this.wobbleAmp
+                         + Math.sin(angle * 5 + this.wobble * 1.3) * this.wobbleAmp * 0.5;
+      const r = this.radius * (1 + wobbleOffset);
+      const px = this.x + Math.cos(angle) * r;
+      const py = this.y + Math.sin(angle) * r;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.closePath();
+
+    // Radial gradient for ink density
+    const grad = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius * 1.2);
+    grad.addColorStop(0, this.color);
+    grad.addColorStop(0.6, this.color);
+    grad.addColorStop(1, 'transparent');
+    ctx.fillStyle = grad;
+    ctx.fill();
+
+    // Draw branches (毛细扩散)
+    for (const b of this.branches) {
+      if (b.length <= 0) continue;
+      ctx.beginPath();
+      ctx.lineWidth = b.width;
+      ctx.lineCap = 'round';
+      const startR = this.radius * 0.6;
+      const sx = this.x + Math.cos(b.angle) * startR;
+      const sy = this.y + Math.sin(b.angle) * startR;
+      const wobbleX = Math.sin(b.wobble) * 8;
+      const wobbleY = Math.cos(b.wobble * 0.7) * 8;
+      const ex = this.x + Math.cos(b.angle) * (startR + b.length) + wobbleX;
+      const ey = this.y + Math.sin(b.angle) * (startR + b.length) + wobbleY;
+      const cpx = (sx + ex) / 2 + wobbleX * 0.5;
+      const cpy = (sy + ey) / 2 + wobbleY * 0.5;
+      ctx.moveTo(sx, sy);
+      ctx.quadraticCurveTo(cpx, cpy, ex, ey);
+      ctx.strokeStyle = this.color;
+      ctx.globalAlpha = this.opacity * 0.5;
+      ctx.stroke();
+    }
+
+    ctx.restore();
+  }
+}
+
+function startInkAnimationV1(canvas) {
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  const droplets = [];
+  const inkColor = 'rgba(28, 28, 28, 0.7)';
+
+  // Main large droplet
+  droplets.push(new InkDroplet(canvas.width * 0.7, canvas.height * 0.35, 250, inkColor, 2.5, canvas));
+  // Secondary droplets
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.25, canvas.height * 0.7, 150, inkColor, 1.8, canvas));
+  }, 400);
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.8, canvas.height * 0.75, 100, inkColor, 1.5, canvas));
+  }, 700);
+  // Red accent droplet
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.72, canvas.height * 0.32, 60, 'rgba(196, 30, 58, 0.5)', 1.2, canvas));
+  }, 600);
+
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (const d of droplets) {
+      d.update();
+      d.draw(ctx);
+    }
+    animFrames['v1'] = requestAnimationFrame(animate);
+  }
+  animate();
+}
+
+function startInkAnimationV2(canvas) {
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  const droplets = [];
+  const goldColor = 'rgba(212, 165, 116, 0.5)';
+  const redColor = 'rgba(196, 30, 58, 0.4)';
+
+  // Gold ink spread
+  droplets.push(new InkDroplet(canvas.width * 0.65, canvas.height * 0.3, 300, goldColor, 2, canvas));
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.3, canvas.height * 0.65, 180, goldColor, 1.5, canvas));
+  }, 500);
+  // Red accent
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.67, canvas.height * 0.28, 80, redColor, 1, canvas));
+  }, 800);
+  // Subtle dark ink
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.8, canvas.height * 0.7, 120, 'rgba(245, 240, 232, 0.15)', 1.2, canvas));
+  }, 600);
+
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (const d of droplets) {
+      d.update();
+      d.draw(ctx);
+    }
+    animFrames['v2'] = requestAnimationFrame(animate);
+  }
+  animate();
+}
+
+function startInkAnimationV3(canvas) {
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  const droplets = [];
+  const lightInk = 'rgba(28, 28, 28, 0.12)';
+  const redHint = 'rgba(196, 30, 58, 0.15)';
+
+  // Very subtle, translucent ink
+  droplets.push(new InkDroplet(canvas.width * 0.7, canvas.height * 0.3, 200, lightInk, 1.8, canvas));
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.2, canvas.height * 0.7, 120, lightInk, 1.2, canvas));
+  }, 600);
+  setTimeout(() => {
+    droplets.push(new InkDroplet(canvas.width * 0.72, canvas.height * 0.28, 50, redHint, 0.8, canvas));
+  }, 900);
+
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (const d of droplets) {
+      d.update();
+      d.draw(ctx);
+    }
+    animFrames['v3'] = requestAnimationFrame(animate);
+  }
+  animate();
+}
+
+// Init
+startInkAnimationV1(document.getElementById('ink-canvas-v1'));
+
+window.addEventListener('resize', () => {
+  replayAnimation();
+});
+</script>
+</body>
+</html>
diff --git a/.superpowers/brainstorm/39838-1777791603/hero-refined-demos.html b/.superpowers/brainstorm/39838-1777791603/hero-refined-demos.html
new file mode 100644
index 0000000..302d7da
--- /dev/null
+++ b/.superpowers/brainstorm/39838-1777791603/hero-refined-demos.html
@@ -0,0 +1,779 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Hero 动画 — 精选方案</title>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body { background: #0a0a0a; color: #fff; overflow-x: hidden; }
+
+.nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
+  display: flex; gap: 6px; padding: 14px 20px;
+  background: rgba(0,0,0,0.85); backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+.nav button {
+  padding: 8px 18px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
+  background: transparent; color: rgba(255,255,255,0.6); cursor: pointer;
+  font-size: 13px; font-weight: 500; transition: all 0.3s; letter-spacing: 0.02em;
+}
+.nav button:hover { background: rgba(255,255,255,0.06); color: #fff; }
+.nav button.active { background: #C41E3A; border-color: #C41E3A; color: #fff; }
+
+.scene { display: none; position: relative; width: 100vw; height: 100vh; overflow: hidden; }
+.scene.active { display: block; }
+
+.replay-btn {
+  position: fixed; bottom: 20px; right: 20px; z-index: 1000;
+  padding: 10px 18px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
+  border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; cursor: pointer;
+  font-size: 12px; backdrop-filter: blur(12px); transition: all 0.3s;
+}
+.replay-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
+
+.hint {
+  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
+  padding: 8px 20px; background: rgba(0,0,0,0.6); backdrop-filter: blur(12px);
+  border-radius: 999px; font-size: 12px; color: rgba(255,255,255,0.4);
+}
+
+/* ============================================ */
+/* Scene 1: 墨韵流光 — Cinematic Ink Flow       */
+/* ============================================ */
+#s1 { background: #080808; }
+#s1 canvas { position: absolute; inset: 0; }
+
+#s1 .content {
+  position: absolute; inset: 0; z-index: 10;
+  display: flex; flex-direction: column; justify-content: center;
+  padding: 0 8vw;
+}
+#s1 .tag {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 16px; border-radius: 999px;
+  font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
+  background: rgba(196,30,58,0.12); color: #e85d6f;
+  border: 1px solid rgba(196,30,58,0.2);
+  opacity: 0; transform: translateY(16px);
+}
+#s1 h1 {
+  font-family: 'Noto Serif SC', serif; font-size: clamp(48px, 7vw, 88px);
+  font-weight: 300; letter-spacing: 0.12em; line-height: 1.15;
+  color: #F5F0E8; margin: 20px 0 16px;
+  opacity: 0; transform: translateY(20px);
+}
+#s1 .accent { color: #C41E3A; font-weight: 500; }
+#s1 .sub {
+  font-size: clamp(16px, 2vw, 22px); color: rgba(245,240,232,0.45);
+  font-weight: 300; letter-spacing: 0.04em; line-height: 1.6;
+  max-width: 520px; margin-bottom: 36px;
+  opacity: 0; transform: translateY(16px);
+}
+#s1 .btns { display: flex; gap: 14px; opacity: 0; transform: translateY(16px); }
+#s1 .btn-p {
+  padding: 13px 28px; background: #C41E3A; color: #fff; border: none;
+  border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer;
+  letter-spacing: 0.04em; transition: all 0.3s;
+}
+#s1 .btn-p:hover { background: #d4213f; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(196,30,58,0.3); }
+#s1 .btn-o {
+  padding: 13px 28px; background: transparent; color: rgba(245,240,232,0.7);
+  border: 1px solid rgba(245,240,232,0.15); border-radius: 6px;
+  font-size: 15px; cursor: pointer; letter-spacing: 0.04em; transition: all 0.3s;
+}
+#s1 .btn-o:hover { border-color: rgba(245,240,232,0.3); color: #F5F0E8; }
+
+#s1 .seal {
+  position: absolute; top: 18%; right: 12%; z-index: 10;
+  width: 64px; height: 64px; border: 2px solid rgba(196,30,58,0.7);
+  border-radius: 4px; display: flex; align-items: center; justify-content: center;
+  font-family: 'Noto Serif SC', serif; font-size: 24px; color: rgba(196,30,58,0.7);
+  opacity: 0; transform: scale(2) rotate(-15deg);
+}
+
+/* ============================================ */
+/* Scene 2: 山水意境 — Layered Mountain Mist     */
+/* ============================================ */
+#s2 { background: linear-gradient(180deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #1a1a2e 100%); }
+#s2 canvas { position: absolute; inset: 0; }
+
+#s2 .content {
+  position: absolute; inset: 0; z-index: 10;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center; padding: 0 6vw;
+}
+#s2 .tag {
+  display: inline-flex; padding: 6px 16px; border-radius: 999px;
+  font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
+  background: rgba(196,30,58,0.15); color: #ff8a95;
+  border: 1px solid rgba(196,30,58,0.25);
+  opacity: 0; transform: translateY(16px);
+}
+#s2 h1 {
+  font-family: 'Noto Serif SC', serif; font-size: clamp(52px, 8vw, 96px);
+  font-weight: 300; letter-spacing: 0.15em; line-height: 1.1;
+  color: #F5F0E8; margin: 24px 0 16px;
+  opacity: 0; transform: translateY(20px);
+}
+#s2 .accent { color: #C41E3A; }
+#s2 .sub {
+  font-size: clamp(15px, 1.8vw, 20px); color: rgba(245,240,232,0.4);
+  font-weight: 300; letter-spacing: 0.06em; line-height: 1.7;
+  max-width: 480px; margin-bottom: 36px;
+  opacity: 0; transform: translateY(16px);
+}
+#s2 .btns { display: flex; gap: 14px; opacity: 0; transform: translateY(16px); }
+#s2 .btn-p {
+  padding: 13px 28px; background: #C41E3A; color: #fff; border: none;
+  border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer;
+  letter-spacing: 0.04em; transition: all 0.3s;
+}
+#s2 .btn-p:hover { background: #d4213f; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(196,30,58,0.3); }
+#s2 .btn-o {
+  padding: 13px 28px; background: transparent; color: rgba(245,240,232,0.6);
+  border: 1px solid rgba(245,240,232,0.15); border-radius: 6px;
+  font-size: 15px; cursor: pointer; transition: all 0.3s;
+}
+#s2 .btn-o:hover { border-color: rgba(245,240,232,0.3); color: #F5F0E8; }
+
+/* ============================================ */
+/* Scene 3: 数字水墨 — Ink-to-Data Morphing      */
+/* ============================================ */
+#s3 { background: #FAFAF5; }
+#s3 canvas { position: absolute; inset: 0; }
+
+#s3 .content {
+  position: absolute; inset: 0; z-index: 10;
+  display: flex; flex-direction: column; justify-content: center;
+  padding: 0 8vw;
+}
+#s3 .tag {
+  display: inline-flex; padding: 6px 16px; border-radius: 999px;
+  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
+  background: #FEF2F4; color: #C41E3A; border: 1px solid rgba(196,30,58,0.1);
+  opacity: 0; transform: translateY(16px);
+}
+#s3 h1 {
+  font-family: 'Inter', -apple-system, sans-serif;
+  font-size: clamp(44px, 6.5vw, 80px); font-weight: 600;
+  letter-spacing: -0.03em; line-height: 1.05;
+  color: #1C1C1C; margin: 20px 0 12px;
+  opacity: 0; transform: translateY(20px);
+}
+#s3 .accent { color: #C41E3A; font-weight: 600; }
+#s3 .sub {
+  font-size: clamp(16px, 1.8vw, 20px); color: rgba(28,28,28,0.5);
+  font-weight: 400; line-height: 1.7; max-width: 520px; margin-bottom: 36px;
+  opacity: 0; transform: translateY(16px);
+}
+#s3 .btns { display: flex; gap: 14px; opacity: 0; transform: translateY(16px); }
+#s3 .btn-p {
+  padding: 13px 28px; background: #C41E3A; color: #fff; border: none;
+  border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer;
+  transition: all 0.3s;
+}
+#s3 .btn-p:hover { background: #d4213f; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(196,30,58,0.2); }
+#s3 .btn-o {
+  padding: 13px 28px; background: transparent; color: #1C1C1C;
+  border: 1px solid rgba(28,28,28,0.15); border-radius: 8px;
+  font-size: 15px; cursor: pointer; transition: all 0.3s;
+}
+#s3 .btn-o:hover { border-color: rgba(28,28,28,0.3); }
+</style>
+</head>
+<body>
+
+<div class="nav">
+  <button class="active" onclick="go('s1')">壹 · 墨韵流光</button>
+  <button onclick="go('s2')">贰 · 山水意境</button>
+  <button onclick="go('s3')">叁 · 数字水墨</button>
+</div>
+
+<!-- Scene 1: 墨韵流光 -->
+<div id="s1" class="scene active">
+  <canvas id="c1"></canvas>
+  <div class="seal">睿</div>
+  <div class="content">
+    <div class="tag">✦ 智连未来，成长伙伴</div>
+    <h1>睿新<span class="accent">致遠</span></h1>
+    <p class="sub">以智慧连接数字趋势，以伙伴身份陪您成长<br/>——您的数字化转型同行者</p>
+    <div class="btns">
+      <button class="btn-p">立即咨询 →</button>
+      <button class="btn-o">探索产品</button>
+    </div>
+  </div>
+</div>
+
+<!-- Scene 2: 山水意境 -->
+<div id="s2" class="scene">
+  <canvas id="c2"></canvas>
+  <div class="content">
+    <div class="tag">✦ 智连未来，成长伙伴</div>
+    <h1>睿新<span class="accent">致遠</span></h1>
+    <p class="sub">以智慧连接数字趋势<br/>以伙伴身份陪您成长</p>
+    <div class="btns">
+      <button class="btn-p">立即咨询 →</button>
+      <button class="btn-o">探索产品</button>
+    </div>
+  </div>
+</div>
+
+<!-- Scene 3: 数字水墨 -->
+<div id="s3" class="scene">
+  <canvas id="c3"></canvas>
+  <div class="content">
+    <div class="tag">✦ 智连未来，成长伙伴</div>
+    <h1>睿新<span class="accent">致遠</span></h1>
+    <p class="sub">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
+    <div class="btns">
+      <button class="btn-p">立即咨询 →</button>
+      <button class="btn-o">探索产品</button>
+    </div>
+  </div>
+</div>
+
+<div class="hint" id="hint">壹 · 墨韵流光 — 流动水墨 + 光晕 + 印章</div>
+<button class="replay-btn" onclick="replay()">↻ 重播</button>
+
+<script>
+const hints = {
+  s1: '壹 · 墨韵流光 — 流动水墨 + 光晕 + 印章',
+  s2: '贰 · 山水意境 — 层叠山峦 + 云雾 + 星点',
+  s3: '叁 · 数字水墨 — 墨粒扩散 + 数据化消融',
+};
+let current = 's1';
+let rafs = {};
+
+function go(id) {
+  current = id;
+  document.querySelectorAll('.scene').forEach(s => s.classList.remove('active'));
+  document.getElementById(id).classList.add('active');
+  document.querySelectorAll('.nav button').forEach((b, i) => {
+    b.classList.toggle('active', ['s1','s2','s3'][i] === id);
+  });
+  document.getElementById('hint').textContent = hints[id];
+  replay();
+}
+
+function replay() {
+  Object.values(rafs).forEach(id => cancelAnimationFrame(id));
+  rafs = {};
+
+  const scene = document.getElementById(current);
+  const clone = scene.cloneNode(true);
+  scene.parentNode.replaceChild(clone, scene);
+
+  if (current === 's1') initS1();
+  else if (current === 's2') initS2();
+  else if (current === 's3') initS3();
+
+  animateContent(current);
+}
+
+function animateContent(id) {
+  const scene = document.getElementById(id);
+  const els = scene.querySelectorAll('.tag, h1, .sub, .btns, .seal');
+  const delays = [1.6, 1.9, 2.2, 2.5, 2.8];
+
+  els.forEach((el, i) => {
+    if (i >= delays.length) return;
+    setTimeout(() => {
+      el.style.transition = 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1)';
+      el.style.opacity = '1';
+      el.style.transform = el.classList.contains('seal') ? 'scale(1) rotate(-5deg)' : 'translateY(0)';
+    }, delays[i] * 1000);
+  });
+}
+
+/* ============================================= */
+/* Scene 1: 墨韵流光 — Flowing Ink Streams        */
+/* ============================================= */
+function initS1() {
+  const canvas = document.getElementById('c1');
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth * 2;
+  canvas.height = window.innerHeight * 2;
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+  ctx.scale(2, 2);
+
+  const W = window.innerWidth;
+  const H = window.innerHeight;
+
+  // Ink streams
+  class InkStream {
+    constructor() {
+      this.reset();
+    }
+    reset() {
+      this.x = W * (0.5 + Math.random() * 0.5);
+      this.y = -50;
+      this.vx = (Math.random() - 0.6) * 0.8;
+      this.vy = 0.5 + Math.random() * 1.5;
+      this.width = 1 + Math.random() * 3;
+      this.opacity = 0;
+      this.targetOpacity = 0.08 + Math.random() * 0.15;
+      this.trail = [];
+      this.maxTrail = 80 + Math.floor(Math.random() * 60);
+      this.hue = Math.random() > 0.7 ? 0 : 0; // black or red tint
+      this.sat = Math.random() > 0.7 ? 60 : 0;
+      this.light = this.sat > 0 ? 25 : 10 + Math.random() * 8;
+      this.delay = Math.random() * 120;
+      this.age = 0;
+      this.wobblePhase = Math.random() * Math.PI * 2;
+      this.wobbleSpeed = 0.01 + Math.random() * 0.02;
+      this.wobbleAmp = 0.3 + Math.random() * 0.5;
+    }
+    update() {
+      this.age++;
+      if (this.age < this.delay) return;
+
+      this.wobblePhase += this.wobbleSpeed;
+      this.vx += Math.sin(this.wobblePhase) * this.wobbleAmp * 0.02;
+      this.vy += 0.01;
+
+      this.x += this.vx;
+      this.y += this.vy;
+
+      this.trail.push({ x: this.x, y: this.y, w: this.width });
+      if (this.trail.length > this.maxTrail) this.trail.shift();
+
+      this.opacity = Math.min(this.targetOpacity, this.opacity + 0.002);
+
+      if (this.y > H + 100) this.reset();
+    }
+    draw(ctx) {
+      if (this.age < this.delay || this.trail.length < 3) return;
+
+      ctx.save();
+      ctx.globalAlpha = this.opacity;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+
+      for (let i = 1; i < this.trail.length; i++) {
+        const p0 = this.trail[i - 1];
+        const p1 = this.trail[i];
+        const t = i / this.trail.length;
+        const alpha = t * this.opacity;
+        const w = p1.w * (0.3 + t * 0.7);
+
+        ctx.beginPath();
+        ctx.moveTo(p0.x, p0.y);
+        ctx.lineTo(p1.x, p1.y);
+        ctx.strokeStyle = `hsla(${this.hue}, ${this.sat}%, ${this.light}%, ${alpha})`;
+        ctx.lineWidth = w;
+        ctx.stroke();
+
+        // Ink bleed effect
+        if (Math.random() < 0.03 && t > 0.3) {
+          ctx.beginPath();
+          ctx.arc(p1.x, p1.y, w * 3 + Math.random() * 8, 0, Math.PI * 2);
+          ctx.fillStyle = `hsla(${this.hue}, ${this.sat}%, ${this.light}%, ${alpha * 0.3})`;
+          ctx.fill();
+        }
+      }
+
+      ctx.restore();
+    }
+  }
+
+  // Glow orbs
+  class GlowOrb {
+    constructor() {
+      this.x = W * (0.3 + Math.random() * 0.5);
+      this.y = H * (0.2 + Math.random() * 0.4);
+      this.radius = 150 + Math.random() * 200;
+      this.vx = (Math.random() - 0.5) * 0.3;
+      this.vy = (Math.random() - 0.5) * 0.2;
+      this.isRed = Math.random() > 0.6;
+      this.opacity = 0;
+      this.targetOpacity = this.isRed ? 0.06 : 0.04;
+      this.phase = Math.random() * Math.PI * 2;
+    }
+    update() {
+      this.phase += 0.005;
+      this.x += this.vx + Math.sin(this.phase) * 0.2;
+      this.y += this.vy + Math.cos(this.phase * 0.7) * 0.15;
+      this.opacity = Math.min(this.targetOpacity, this.opacity + 0.0005);
+      if (this.x < -200 || this.x > W + 200) this.vx *= -1;
+      if (this.y < -200 || this.y > H + 200) this.vy *= -1;
+    }
+    draw(ctx) {
+      const grad = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
+      const color = this.isRed ? '196, 30, 58' : '180, 160, 140';
+      grad.addColorStop(0, `rgba(${color}, ${this.opacity})`);
+      grad.addColorStop(0.5, `rgba(${color}, ${this.opacity * 0.4})`);
+      grad.addColorStop(1, `rgba(${color}, 0)`);
+      ctx.fillStyle = grad;
+      ctx.fillRect(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
+    }
+  }
+
+  const streams = Array.from({ length: 8 }, () => new InkStream());
+  const orbs = Array.from({ length: 4 }, () => new GlowOrb());
+
+  // Initial big ink splash
+  let splashProgress = 0;
+  const splashCenter = { x: W * 0.7, y: H * 0.35 };
+
+  function drawSplash(ctx) {
+    if (splashProgress >= 1) return;
+    splashProgress = Math.min(1, splashProgress + 0.008);
+
+    const maxR = 280;
+    const r = maxR * easeOutQuart(splashProgress);
+    const alpha = 0.12 * (1 - splashProgress * 0.5);
+
+    ctx.save();
+    ctx.globalAlpha = alpha;
+
+    // Main splash
+    const grad = ctx.createRadialGradient(splashCenter.x, splashCenter.y, 0, splashCenter.x, splashCenter.y, r);
+    grad.addColorStop(0, 'rgba(28, 28, 28, 0.6)');
+    grad.addColorStop(0.4, 'rgba(28, 28, 28, 0.3)');
+    grad.addColorStop(0.7, 'rgba(28, 28, 28, 0.1)');
+    grad.addColorStop(1, 'transparent');
+    ctx.fillStyle = grad;
+    ctx.beginPath();
+    ctx.arc(splashCenter.x, splashCenter.y, r, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Red accent splash
+    const redR = r * 0.4;
+    const redGrad = ctx.createRadialGradient(splashCenter.x + 20, splashCenter.y - 10, 0, splashCenter.x + 20, splashCenter.y - 10, redR);
+    redGrad.addColorStop(0, 'rgba(196, 30, 58, 0.4)');
+    redGrad.addColorStop(0.5, 'rgba(196, 30, 58, 0.15)');
+    redGrad.addColorStop(1, 'transparent');
+    ctx.fillStyle = redGrad;
+    ctx.beginPath();
+    ctx.arc(splashCenter.x + 20, splashCenter.y - 10, redR, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.restore();
+  }
+
+  function animate() {
+    ctx.fillStyle = 'rgba(8, 8, 8, 0.04)';
+    ctx.fillRect(0, 0, W, H);
+
+    drawSplash(ctx);
+
+    for (const orb of orbs) { orb.update(); orb.draw(ctx); }
+    for (const stream of streams) { stream.update(); stream.draw(ctx); }
+
+    rafs['s1'] = requestAnimationFrame(animate);
+  }
+
+  ctx.fillStyle = '#080808';
+  ctx.fillRect(0, 0, W, H);
+  animate();
+}
+
+/* ============================================= */
+/* Scene 2: 山水意境 — Layered Mountains + Mist    */
+/* ============================================= */
+function initS2() {
+  const canvas = document.getElementById('c2');
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth * 2;
+  canvas.height = window.innerHeight * 2;
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+  ctx.scale(2, 2);
+
+  const W = window.innerWidth;
+  const H = window.innerHeight;
+
+  // Mountain layers
+  function drawMountain(ctx, baseY, height, color, offset, segments) {
+    ctx.beginPath();
+    ctx.moveTo(-10, H);
+    for (let i = 0; i <= segments; i++) {
+      const x = (W / segments) * i;
+      const noise = Math.sin(i * 0.3 + offset) * height * 0.4
+                  + Math.sin(i * 0.7 + offset * 1.5) * height * 0.3
+                  + Math.sin(i * 1.3 + offset * 0.8) * height * 0.15;
+      const y = baseY - Math.abs(noise);
+      ctx.lineTo(x, y);
+    }
+    ctx.lineTo(W + 10, H);
+    ctx.closePath();
+    ctx.fillStyle = color;
+    ctx.fill();
+  }
+
+  // Stars
+  const stars = Array.from({ length: 80 }, () => ({
+    x: Math.random() * W,
+    y: Math.random() * H * 0.5,
+    r: 0.5 + Math.random() * 1.5,
+    twinkle: Math.random() * Math.PI * 2,
+    speed: 0.02 + Math.random() * 0.03,
+  }));
+
+  // Mist particles
+  const mist = Array.from({ length: 20 }, () => ({
+    x: Math.random() * W,
+    y: H * (0.4 + Math.random() * 0.3),
+    w: 200 + Math.random() * 400,
+    h: 30 + Math.random() * 60,
+    speed: 0.15 + Math.random() * 0.3,
+    opacity: 0.02 + Math.random() * 0.04,
+  }));
+
+  // Red accent light
+  let redGlowProgress = 0;
+
+  let time = 0;
+
+  function animate() {
+    time += 0.003;
+    ctx.clearRect(0, 0, W, H);
+
+    // Sky gradient
+    const skyGrad = ctx.createLinearGradient(0, 0, 0, H);
+    skyGrad.addColorStop(0, '#0a0a1a');
+    skyGrad.addColorStop(0.4, '#16213e');
+    skyGrad.addColorStop(0.7, '#1a1a3e');
+    skyGrad.addColorStop(1, '#0a0a1a');
+    ctx.fillStyle = skyGrad;
+    ctx.fillRect(0, 0, W, H);
+
+    // Stars
+    for (const s of stars) {
+      s.twinkle += s.speed;
+      const alpha = 0.3 + Math.sin(s.twinkle) * 0.3;
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(245, 240, 232, ${alpha})`;
+      ctx.fill();
+    }
+
+    // Red glow behind mountains
+    redGlowProgress = Math.min(1, redGlowProgress + 0.005);
+    const glowAlpha = 0.08 * redGlowProgress;
+    const glowGrad = ctx.createRadialGradient(W * 0.5, H * 0.35, 0, W * 0.5, H * 0.35, 400);
+    glowGrad.addColorStop(0, `rgba(196, 30, 58, ${glowAlpha})`);
+    glowGrad.addColorStop(0.5, `rgba(196, 30, 58, ${glowAlpha * 0.3})`);
+    glowGrad.addColorStop(1, 'transparent');
+    ctx.fillStyle = glowGrad;
+    ctx.fillRect(0, 0, W, H);
+
+    // Mountains (back to front)
+    drawMountain(ctx, H * 0.55, 120, 'rgba(15, 20, 40, 0.9)', time * 0.5, 30);
+    drawMountain(ctx, H * 0.62, 100, 'rgba(20, 25, 50, 0.85)', time * 0.8 + 2, 25);
+    drawMountain(ctx, H * 0.7, 80, 'rgba(25, 30, 55, 0.8)', time * 1.2 + 4, 20);
+    drawMountain(ctx, H * 0.78, 60, 'rgba(30, 35, 60, 0.75)', time * 1.5 + 6, 18);
+
+    // Mist
+    for (const m of mist) {
+      m.x += m.speed;
+      if (m.x > W + m.w) m.x = -m.w;
+      ctx.save();
+      ctx.globalAlpha = m.opacity;
+      const mistGrad = ctx.createRadialGradient(m.x, m.y, 0, m.x, m.y, m.w * 0.5);
+      mistGrad.addColorStop(0, 'rgba(200, 210, 230, 0.3)');
+      mistGrad.addColorStop(1, 'transparent');
+      ctx.fillStyle = mistGrad;
+      ctx.fillRect(m.x - m.w * 0.5, m.y - m.h, m.w, m.h * 2);
+      ctx.restore();
+    }
+
+    // Foreground mountain
+    drawMountain(ctx, H * 0.88, 40, 'rgba(10, 12, 25, 0.95)', time * 2 + 8, 15);
+
+    rafs['s2'] = requestAnimationFrame(animate);
+  }
+
+  animate();
+}
+
+/* ============================================= */
+/* Scene 3: 数字水墨 — Ink Particles → Data       */
+/* ============================================= */
+function initS3() {
+  const canvas = document.getElementById('c3');
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth * 2;
+  canvas.height = window.innerHeight * 2;
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+  ctx.scale(2, 2);
+
+  const W = window.innerWidth;
+  const H = window.innerHeight;
+
+  // Ink particles that spread and then morph into data dots
+  class InkParticle {
+    constructor(cx, cy) {
+      this.cx = cx;
+      this.cy = cy;
+      const angle = Math.random() * Math.PI * 2;
+      const dist = Math.random() * 10;
+      this.x = cx + Math.cos(angle) * dist;
+      this.y = cy + Math.sin(angle) * dist;
+
+      const speed = 0.3 + Math.random() * 1.5;
+      this.vx = Math.cos(angle) * speed;
+      this.vy = Math.sin(angle) * speed;
+
+      this.radius = 1.5 + Math.random() * 4;
+      this.targetRadius = this.radius;
+      this.opacity = 0.4 + Math.random() * 0.4;
+      this.isRed = Math.random() > 0.75;
+
+      this.phase = 'spreading'; // spreading -> settling -> morphing
+      this.spreadTime = 0;
+      this.maxSpreadTime = 60 + Math.random() * 80;
+      this.settleTime = 0;
+      this.morphProgress = 0;
+
+      // Target position for data morph
+      this.targetX = W * (0.55 + Math.random() * 0.35);
+      this.targetY = H * (0.15 + Math.random() * 0.6);
+      this.dataRadius = 1 + Math.random() * 2;
+    }
+
+    update() {
+      if (this.phase === 'spreading') {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.vx *= 0.98;
+        this.vy *= 0.98;
+        this.spreadTime++;
+        if (this.spreadTime >= this.maxSpreadTime) {
+          this.phase = 'settling';
+        }
+      } else if (this.phase === 'settling') {
+        this.settleTime++;
+        this.opacity = Math.max(0.15, this.opacity - 0.003);
+        if (this.settleTime > 60) {
+          this.phase = 'morphing';
+        }
+      } else if (this.phase === 'morphing') {
+        this.morphProgress = Math.min(1, this.morphProgress + 0.008);
+        const t = easeInOutCubic(this.morphProgress);
+        this.x = lerp(this.x, this.targetX, t * 0.02);
+        this.y = lerp(this.y, this.targetY, t * 0.02);
+        this.radius = lerp(this.radius, this.dataRadius, t * 0.02);
+        this.opacity = lerp(this.opacity, 0.2 + Math.random() * 0.1, t * 0.01);
+      }
+    }
+
+    draw(ctx) {
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, Math.max(0.5, this.radius), 0, Math.PI * 2);
+      if (this.isRed) {
+        ctx.fillStyle = `rgba(196, 30, 58, ${this.opacity})`;
+      } else {
+        ctx.fillStyle = `rgba(28, 28, 28, ${this.opacity})`;
+      }
+      ctx.fill();
+
+      // Glow for larger particles
+      if (this.radius > 3 && this.phase === 'spreading') {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius * 2.5, 0, Math.PI * 2);
+        ctx.fillStyle = this.isRed
+          ? `rgba(196, 30, 58, ${this.opacity * 0.1})`
+          : `rgba(28, 28, 28, ${this.opacity * 0.08})`;
+        ctx.fill();
+      }
+    }
+  }
+
+  // Connection lines between nearby data particles
+  function drawConnections(ctx, particles) {
+    const morphed = particles.filter(p => p.phase === 'morphing' && p.morphProgress > 0.3);
+    ctx.save();
+    for (let i = 0; i < morphed.length; i++) {
+      for (let j = i + 1; j < morphed.length; j++) {
+        const dx = morphed[i].x - morphed[j].x;
+        const dy = morphed[i].y - morphed[j].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < 80) {
+          const alpha = (1 - dist / 80) * 0.08 * Math.min(morphed[i].morphProgress, morphed[j].morphProgress);
+          ctx.beginPath();
+          ctx.moveTo(morphed[i].x, morphed[i].y);
+          ctx.lineTo(morphed[j].x, morphed[j].y);
+          ctx.strokeStyle = `rgba(196, 30, 58, ${alpha})`;
+          ctx.lineWidth = 0.5;
+          ctx.stroke();
+        }
+      }
+    }
+    ctx.restore();
+  }
+
+  // Create particles in batches
+  const particles = [];
+  const center1 = { x: W * 0.7, y: H * 0.35 };
+  const center2 = { x: W * 0.25, y: H * 0.65 };
+
+  for (let i = 0; i < 120; i++) {
+    particles.push(new InkParticle(center1.x, center1.y));
+  }
+  setTimeout(() => {
+    for (let i = 0; i < 60; i++) {
+      particles.push(new InkParticle(center2.x, center2.y));
+    }
+  }, 500);
+
+  // Subtle background gradient orbs
+  function drawBgOrbs(ctx) {
+    const orbData = [
+      { x: W * 0.65, y: H * 0.3, r: 300, color: 'rgba(196, 30, 58, 0.03)' },
+      { x: W * 0.3, y: H * 0.7, r: 250, color: 'rgba(28, 28, 28, 0.02)' },
+    ];
+    for (const o of orbData) {
+      const grad = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, o.r);
+      grad.addColorStop(0, o.color);
+      grad.addColorStop(1, 'transparent');
+      ctx.fillStyle = grad;
+      ctx.fillRect(o.x - o.r, o.y - o.r, o.r * 2, o.r * 2);
+    }
+  }
+
+  function animate() {
+    ctx.clearRect(0, 0, W, H);
+    ctx.fillStyle = '#FAFAF5';
+    ctx.fillRect(0, 0, W, H);
+
+    drawBgOrbs(ctx);
+
+    for (const p of particles) {
+      p.update();
+      p.draw(ctx);
+    }
+
+    drawConnections(ctx, particles);
+
+    rafs['s3'] = requestAnimationFrame(animate);
+  }
+
+  animate();
+}
+
+/* ============================================= */
+/* Utilities                                      */
+/* ============================================= */
+function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }
+function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
+function lerp(a, b, t) { return a + (b - a) * t; }
+
+// Init first scene
+initS1();
+animateContent('s1');
+
+window.addEventListener('resize', () => {
+  if (current === 's1') initS1();
+  else if (current === 's2') initS2();
+  else if (current === 's3') initS3();
+});
+</script>
+</body>
+</html>
diff --git a/docs/superpowers/specs/2026-05-03-particle-visual-upgrade-design.md b/docs/superpowers/specs/2026-05-03-particle-visual-upgrade-design.md
new file mode 100644
index 0000000..8a2e7a9
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-03-particle-visual-upgrade-design.md
@@ -0,0 +1,55 @@
+# 粒子束视觉升级与移动端适配设计
+
+日期: 2026-05-03
+状态: 已批准
+
+## 目标
+
+提升 InkDataMorph 粒子动画的视觉美观度，并确保移动端展示体验。
+
+## 核心改动
+
+### 1. 多色调系统（5级水墨色调）
+
+| 色调 | 色值 | 用途 | 分配比例 |
+|------|------|------|----------|
+| 浓墨 | #1C1C1C | 核心墨点 | 15% |
+| 淡墨 | #4A4A4A | 中间层次 | 25% |
+| 浅墨 | #8C8C8C | 氛围渲染 | 30% |
+| 朱砂 | #C41E3A | 点缀焦点 | 10% |
+| 淡朱 | #E8707A | 淡雅扩散 | 20% |
+
+### 2. 粒子形态升级
+
+- 椭圆粒子 + 随机旋转角度（ctx.ellipse 替代 ctx.arc）
+- 浓墨粒子：纵横比 0.8-1.0（近圆）
+- 淡墨/浅墨粒子：纵横比 0.5-0.9（椭圆）
+- 墨迹飞溅：10% 粒子为飞溅粒子（更快速度、更小半径、不参与 morphing）
+
+### 3. 响应式适配
+
+| 参数 | 移动端 (<768px) | 平板 (768-1023px) | 桌面 (≥1024px) |
+|------|-----------------|-------------------|----------------|
+| 粒子数量 | 80 | 140 | 220 |
+| 墨点起始 | 单墨点（右侧中上） | 双墨点（缩小间距） | 双墨点（当前） |
+| 目标区域X | W*(0.55-0.9) | W*(0.5-0.9) | W*(0.5-0.9) |
+| 目标区域Y | H*(0.1-0.5) | H*(0.12-0.6) | H*(0.12-0.65) |
+| 连接距离 | 60px | 80px | 100px |
+| 光晕缩放 | 0.5x | 0.75x | 1.0x |
+| 渐变层数 | 2 | 2 | 3 |
+| 拖尾效果 | 关闭 | 5帧 | 8帧 |
+| 飞溅粒子 | 无 | 5% | 10% |
+
+### 4. 技术实现
+
+- Particle 接口新增: rotation, scaleX, scaleY, isSplash, toneIndex
+- 新增 InkTone 枚举和 TONES 常量数组
+- 新增 getResponsiveConfig(W) 函数根据屏幕宽度返回配置
+- resize 监听（debounced 300ms）重新初始化粒子系统
+- DPR 适配: Math.min(window.devicePixelRatio, 2)
+- 移动端性能优化: 减少渐变层、关闭拖尾、减少粒子数
+
+## 文件影响
+
+- src/components/effects/ink-data-morph.tsx — 主要改动文件
+- src/components/effects/ink-data-morph.test.tsx — 测试更新
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff5ae84c313bf6de277ba10ffc4c9677baaf9f9e
GIT binary patch
literal 10809
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
a*z0wZsx*ggdoV31K=GrRY=yLO;Qs+a<y(OO

literal 0
HcmV?d00001

diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..131df7d7d678f57ad0e014249245a2f81b444b27
GIT binary patch
literal 664
zcmV;J0%!e+P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkQN=ZaPRCt`FQ(I3HK@{E?U;Gd36llCu6vbP2W?R}qg<4T70xiW9
zeK3HRXix&F`e2H+peDvdeKaQi4+FE??QOwW4Td)8ix2(+d@wm?&bn(i(I+Q4$(%hi
z-}%08&PtLbNruPYzDnp2mz60_=sYL%p+;DN6S^pJO=i<pUF|BiDZ8ZBwMrCKBlM?6
z7-$|93||x~$Id|I_*p0)8Nyue2msba$aGsH>={VX4g}C-meV_X;eGrvn2~X)_!Ce%
zIB3P8Q&3eBV1`q$)}O|x1x65vd(>eB;4*zsRnCL4ukTM6!dzWN1AAZYi6cXeutydH
z!sZ0s(t!czP?cSP##|n1!BM=tF_ne-*fl8bwVIfHY2buDwLEB}S4-V7)N2ELp1B9j
zyN|)}^~3sL2AT^?(9AAFt#`};&}8=Hw*)04kgIeUi^l$wuz7nC8LY=9p>pCJe4Mxm
z_2hL&7BZ0OvIXE#(z-W<bZrI#q;eE>I$_gy7!X#lJ-Arh9d_JxKzvbGE?(vD05Y2{
z?unprc%VH1o3lCCxUzt=AZp@5W4?f%v;bJIzzMzI>VYtGEB724ck-CmQ#Wu9zAnA8
zWO!8D#H<bQ5~t6fzzahAhmje4wojQ^Fhfb)f62dqwde%sok1|eNda)l_TY{6G3C<y
zufUn<j=>5Eb~q-YuE@AEs^y;3NLT2$!{{2o&f**=^tJ1U5>Lrx`j!(`*1e%`rNi+b
y!c+lf#prfbNqjGQLn~ZXZoQL2J6!<(vwi{7+S4Dh$~`my0000<MNUMnLSTZM=PPCa

literal 0
HcmV?d00001

diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce44132abbc0a435e9d62e3b1ebccc4e718f1fd1
GIT binary patch
literal 1418
zcmV;51$Fv~P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkTJV``BRCt`#SA9&CWfZ@w&04xzAI^ci4}=JYrXpoL&%Ja36$K$u
zBoOff1tc}`1C%dYfl89tbpBykt>rM+n%UeKu0KfL_g=ogFCSjOQc%mb@{iVPwN5(+
z-^+d9_g>7TKYF&ayXT(wd7j@n=XcI?9+T-l2AE6_$;|R3O5JqpG}B}bMG~`QX5Jx7
z{D>^^GYS*mC`>pN#($C}@w>tVcoJC>cVxzI;J32G?K0!%6ecQU#&cvAu@v`3;1eD$
z2bdSgO#JHYkOvojTV}kfF=+AQo~>u%YflSpfiFYjf;eb3Cqw(vbp~mRUJES|tDtFN
z9N2@S{|T5bL+Bi#p;Huz|E7M_!dF9oZVB|~6hYsXebDpTcIb%PG<IN2I<#8WxTJka
zI&>y(p>KLO?4dOz*@e)ZoC|H%RItyE(u1hb0Jt<`{!~?o*7j!?f$dq#1Gya6H!Vtl
zj^!Jme`_&x#%GRmhKUgkfI5HcqpA{7H-{%qItLu<@+eg5yw1n^jE)2R4+5~}b!ZBU
z_r6(x#cQk^=Ej08Fw&#W9%O~S%>}M`y{{!$mxBCfRCFa}LG$9I2?5+X^Cfh?l4a20
zx}lPH$^Fh<WzZItrqN?4#=~F<)TSX5qp0Xuu@PD$Q#>Ay#Ohp`3C{dOaAoIPaO3nj
zaOci&=}~a*E{Ch-Cp;Q~<aEs?;j0B8@c~p|S|QsF0Q}9w^1iJ7aQ*nlV?@2{Ze;qv
zwo<ru>_h0?lutmut2_n62dbcPUaUs|O};Nat@8kHp%fI!WTht$bgkM7*WddHuH?N<
z2edEC0C(~tu-=V($<>1ehlvy3JYc8=ip1+Ej^T-Pkby+Aqo_8FzF$o#g#d<%E5W&^
zob-eFhiQ&pa-`>hbMHa0hs1aVP!qJ`5gh<=kzzS77JAa&FaSV8A-P6Qd_wLXIr*s;
zU~n|_Wfr(%kAN_2-T<`vgg>Sa!3EkVB!;Z;mIYm}=8%^r`UV9n<U}Mi+zHBE51=LY
z+Wg;&I{>?1#8Y|>)TjjmnfzY^@Q?+fR=xe)E0#BLukCuljKF;+0$?n~5^tEu1DFNF
zrBx&i&n<z`56)`zn7+6ULx?)8sQ2rEK~yx%i2=v@-5xE&GK(qZ$k;_`HdIupxixLG
ztdt3Z`zm1g&0_{HxdXtKPFD%V9Re^n794ALdPIM#`T|)wRCt7{p39oBmGJ%9uc%k(
zO3H?7M^95x^6mltr=~@7goaL$nfQw~TNp>pg?=%*9c#aOAAEc8q;~V{LW(<Djk>}8
z?-(zmaR5JRtgmO5P?t4}5}<o^t^okL8bg3O?10c>_0q!Mt7XT@GgzJnwjZGT1iL8r
z^$3#OFNr>#`^|~!hgiwbjd}oB|MB4F7ZS-z^vDli)KFE#D;ldF5*6p8r>f!h`C7UU
z8lPY8A~D_*w4Wp{Y5>^$c$&-A$bs~{Nv{D2+~rwG6ze^(OcSfzl1T@EnT4Gea?R$?
z=V$=528KW3{_yBY-2rV;sgrg%Hl{AGO5(icaCOKMuXHU6uuvvYYo1+1X^G5ty#d1F
zDYjU2G!ha+|6_NA26U%vBSKR9=5MBM_%e(1F?kxFn^GQ@89$^j{)@(f01NQ~-wK%L
zoe7(1V=74Lc~lp$bYlTh|HH<%J$C(AbBhEWYsG8rei1WG_ZpXG%%566)AEwSM1~@X
zGMS0bWF{`lO!O!czv=#f(F;B8Bz_aq3`;w{5oN|pZT>vWG?}Arx^<fRLRQ7l;ryS*
Y-zH}p**ZF9)&Kwi07*qoM6N<$g7b`~FaQ7m

literal 0
HcmV?d00001

diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..5345f00627a83b8190575ce23f492e9b9663d0a1
GIT binary patch
literal 1440
zcmV;R1z-9A0096203aX$0096X0Ez_w02TlM0EtjeM-2)Z3IG5A4M|8uQUCw|AOHXW
zAP5Ek0047(dh`GQ010qNS#tmY3ljhU3ljkVnw%H_00lfrL_t(|oYhx-OqFF6zpKq!
zx>_I3fxHid2!^I2WjxQlbO99wAyOm|@dE`UHSq(KFI$01lGt?qVOg!^FxQ&d+!(Gu
zNZ$8ezP~RYUcgdN%eL~5)@rp*I|tv(ec$(9%%nehwzIqEp7(j4-#O=Z&T}4<={^RS
zOb^M-@+3;#bn7(JWDZ3Vvt(x8Axr#-Eb%i66W=III2Fc!k|puG!UT8{SrT_-#&6)a
zvc&B&<L4A6DrClUWEQa$_eJ0n9xex%7syQf>g|vR7k*o2ys9y1@#CJYXX0y53vGcf
zL*s%tXf-E8`_gp=X^UP9EfK4rX<;1LgQNcmm@Y%;9HF686p8<)e$>KOLw{}w^yd^o
z-<EyQ^V)Xkh}$%FU`#r+TGqIveMvfWCT^i`dN=H$H6+=E(4CwMZPrw<&yLcAsL%ko
zG-Li$Rf*R2XBUC(S<3^t9M?B3N`Q{#8=!w{F?7afj&p{I5e<Mkf9s>F5>YpYCr&yC
z9P9EZRO-CW$NG$p1N;vHu;z7W3XAu?S%AfBtQ+RWf-Nx8qs|^=g}%)Nu6ez$C0Lh&
z{AW~jC1pYL;-m=y+&c3mbiR^h(BZnFl6T4d&Ru2D7L}&aV<^VMU<uTwArqsh=vc84
zS|d|D9*)H7T$u^Z{6lbM=UZ^&^f_?n&T#2baPBULtK}y=8iC|=%_ZTh1t9SORA5>m
z+YJEx&BXG)to?BP_{U>Jz3Xmd`oOkQxOVJA=-rf0K)$Oy1;YobpmAQTM*vN}FFvjF
z0B@lb6v<?zCl7S3+6vd-`v|V&y-f$SFUtUT@*=R_jeE(}g9V3)6W%;vs0E6|>nM)l
ziFA;GM6;u)HjKVsO(}%{hKeh}xu=};gZYPPj$U%4=YezYL9mC!cm+@swBivR0CACG
zIWHD^(%vutKtdt8MoxS}?jAY$sTN>xH1uT_xMGihFl^ocwEBcUrVqgd+9)K3tniiv
zU9aYlmnQlK1uNu4BsAO!%3TkjCHLC=--<f`yI;gpdJfd61p}G<Ujy)v1)^5H{oE^-
zH*v4+dclmqeI^26EX5LUn8*W|1;eFPBn{6kfzc1nYV?@CxDG>zI;^Po>w!U3G|Y(s
z$NJqKEyFU4Ddx!7MQJuvRH?Z&ZL_SD34{A8VED~r1~0h-z?M!|3B?@(FgF$)Yj=7?
zf2;ZeSvgdAgsPs)ny{7d{n@XmSLjO0hHFPpQ&IBn0sg0^MRSCPPLY}Ti#A&rN6m$P
zF}fXVzj_~hd+?-o^Xx*3J6esp!Ts+TFQah)KWeP6XO>WxHH#9Udv&e>0J<7OfI94e
z&|>w{!r!Z9$H_BTo(Hxcp!)>7DEIXUlH4zeKAro`iRy<~$<U2@09gO=;N}++$x8Id
z4`0+!Rm3YAs~!>+=cA{p;r97jx(^zkU+y9?-V?N+Bra+I*!*~!%hkw%^t?&00SMgX
zSxFS@J+Mp@tK5=F2Y{J{ofdM<=FjJ70JH{%KjHrH=t<oHZBeO{b~rYsF0V@ByykFq
z$P%w~EefzuCQxghT|{Y#%y+#3!s02mSadWJ5<~xEcZ3FXr)(oaQv2p_rf&E$i}W#h
z8lRg|9+nwDq%i)A#)1F~@dDopnCG1dn`vVzNa=Z07qE0=0aE|N#<o3n{aAC01RZO|
zYwdm!GfnpzmuAeLT0hhBlEOrWB8f7YiO*yvF3U{xC=$Qv{(#X7J?$iZ6VnV!JH8QR
u#!GGfJj^tiqi(u&n)*Uk#n9pWpT^%NXB*i%I%U=X0000<MNUMnLSTZlX{R^<

literal 0
HcmV?d00001

diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..fa731cf
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,26 @@
+{
+  "name": "四川睿新致远科技有限公司",
+  "short_name": "睿新致远",
+  "description": "专注于企业数字化转型服务",
+  "icons": [
+    {
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#C41E3A",
+  "background_color": "#FFFFFF",
+  "display": "standalone",
+  "start_url": "/"
+}
diff --git a/scripts/generate-favicons.js b/scripts/generate-favicons.js
new file mode 100644
index 0000000..8d78873
--- /dev/null
+++ b/scripts/generate-favicons.js
@@ -0,0 +1,42 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+const svgPath = path.join(__dirname, '..', 'public', 'favicon.svg');
+const svg = fs.readFileSync(svgPath);
+
+async function generate() {
+  await sharp(svg).resize(180, 180).png().toFile(path.join(__dirname, '..', 'public', 'apple-touch-icon.png'));
+  console.log('apple-touch-icon.png (180x180) generated');
+
+  await sharp(svg).resize(32, 32).png().toFile(path.join(__dirname, '..', 'public', 'favicon-32x32.png'));
+  console.log('favicon-32x32.png generated');
+
+  await sharp(svg).resize(16, 16).png().toFile(path.join(__dirname, '..', 'public', 'favicon-16x16.png'));
+  console.log('favicon-16x16.png generated');
+
+  const png32 = await sharp(svg).resize(32, 32).png().toBuffer();
+
+  const header = Buffer.alloc(6);
+  header.writeUInt16LE(0, 0);
+  header.writeUInt16LE(1, 2);
+  header.writeUInt16LE(1, 4);
+
+  const entry = Buffer.alloc(16);
+  entry.writeUInt8(32, 0);
+  entry.writeUInt8(32, 1);
+  entry.writeUInt8(0, 2);
+  entry.writeUInt8(0, 3);
+  entry.writeUInt16LE(1, 4);
+  entry.writeUInt16LE(32, 6);
+  entry.writeUInt32LE(png32.length, 8);
+  entry.writeUInt32LE(22, 12);
+
+  const ico = Buffer.concat([header, entry, png32]);
+  fs.writeFileSync(path.join(__dirname, '..', 'public', 'favicon.ico'), ico);
+  console.log('favicon.ico generated');
+
+  console.log('All favicon files generated!');
+}
+
+generate().catch(err => console.error(err));
diff --git a/src/app/globals.css b/src/app/globals.css
index 2bdb055..34033ce 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1152,10 +1152,14 @@ body {
   }
   
   /* 优化移动端按钮和链接的触摸目标 */
-  a, button {
+  a:not(nav[aria-label="breadcrumb"] a), button {
     min-height: 44px;
     min-width: 44px;
   }
+  nav[aria-label="breadcrumb"] a {
+    min-height: 0;
+    min-width: 0;
+  }
   
   /* 防止长文本溢出 */
   p, li, span {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 95da4cf..61c1e18 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -124,7 +124,12 @@ export default function RootLayout({
     <html lang="zh-CN" className="scroll-smooth" suppressHydrationWarning>
       <head>
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <link rel="apple-touch-icon" href="/favicon.svg" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="theme-color" content="#C41E3A" />
         <OrganizationSchema />
         <WebsiteSchema />
       </head>
diff --git a/src/components/layout/breadcrumb.tsx b/src/components/layout/breadcrumb.tsx
index 8e4522f..f682d55 100644
--- a/src/components/layout/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb.tsx
@@ -14,7 +14,7 @@ interface BreadcrumbProps {
 
 export function Breadcrumb({ items }: BreadcrumbProps) {
   return (
-    <nav aria-label="breadcrumb" className="flex items-center space-x-2 text-sm text-[#5C5C5C] py-4">
+    <nav aria-label="breadcrumb" className="flex items-center space-x-1 text-sm text-[#5C5C5C] py-4">
       <StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
         <Home className="w-4 h-4" />
       </StaticLink>
@@ -23,7 +23,7 @@ export function Breadcrumb({ items }: BreadcrumbProps) {
           <ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
           <StaticLink
             href={item.href}
-            className="ml-2 hover:text-[#C41E3A] transition-colors"
+            className="ml-1 hover:text-[#C41E3A] transition-colors"
           >
             {item.label}
           </StaticLink>
diff --git a/src/components/layout/page-nav.tsx b/src/components/layout/page-nav.tsx
index f74d073..325e2fc 100644
--- a/src/components/layout/page-nav.tsx
+++ b/src/components/layout/page-nav.tsx
@@ -14,15 +14,15 @@ interface PageNavProps {
 
 export function PageNav({ items }: PageNavProps) {
   return (
-    <nav aria-label="breadcrumb" className="flex items-center gap-1.5 text-sm text-[#A3A3A3] mb-8">
-      <StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
-        <Home className="w-3.5 h-3.5" />
+    <nav aria-label="breadcrumb" className="flex items-center gap-[3px] md:gap-1 text-[11px] md:text-sm text-[#A3A3A3] mb-2 md:mb-8 -ml-0.5">
+      <StaticLink href="/" className="flex items-center w-fit hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
+        <Home className="w-2.5 h-2.5 md:w-3.5 md:h-3.5" />
       </StaticLink>
       {items.map((item, index) => {
         const isLast = index === items.length - 1;
         return (
-          <div key={index} className="flex items-center gap-1.5">
-            <ChevronRight className="w-3.5 h-3.5 text-[#D4D4D4]" />
+          <div key={index} className="flex items-center gap-[3px] md:gap-1">
+            <ChevronRight className="w-2.5 h-2.5 md:w-3.5 md:h-3.5 text-[#D4D4D4]" />
             {isLast || !item.href ? (
               <span className={isLast ? 'text-[#1C1C1C] font-medium' : ''}>
                 {item.label}
diff --git a/src/components/sections/hero-section-v2.tsx b/src/components/sections/hero-section-v2.tsx
index 20e9bc6..ac95094 100644
--- a/src/components/sections/hero-section-v2.tsx
+++ b/src/components/sections/hero-section-v2.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import dynamic from 'next/dynamic';
 import { motion } from 'framer-motion';
 import { StaticLink } from '@/components/ui/static-link';
 import { Button } from '@/components/ui/button';
@@ -9,11 +8,6 @@ import { COMPANY_INFO } from '@/lib/constants';
 import { ArrowRight } from 'lucide-react';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
 
-const InkDataMorph = dynamic(
-  () => import('@/components/effects/ink-data-morph').then(mod => ({ default: mod.InkDataMorph })),
-  { ssr: false }
-);
-
 export function HeroSectionV2() {
   const [isVisible, setIsVisible] = useState(false);
   const sectionRef = useRef<HTMLElement>(null);
@@ -48,7 +42,6 @@ export function HeroSectionV2() {
       aria-labelledby="hero-heading"
       className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-white"
     >
-      <InkDataMorph />
       <div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
         <div className="max-w-3xl">
           <motion.div
diff --git a/src/components/ui/back-to-top.tsx b/src/components/ui/back-to-top.tsx
index 3f70c6d..d5bd789 100644
--- a/src/components/ui/back-to-top.tsx
+++ b/src/components/ui/back-to-top.tsx
@@ -35,7 +35,7 @@ export function BackToTop() {
           exit={shouldReduceMotion ? {} : { opacity: 0, y: 20, scale: 0.8 }}
           transition={{ duration: 0.2, ease: 'easeOut' }}
           onClick={scrollToTop}
-          className="fixed bottom-8 right-8 z-50 p-3 bg-[#C41E3A] text-white rounded-full shadow-lg hover:bg-[#A01830] hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2"
+          className="fixed right-4 bottom-20 md:bottom-8 md:right-8 z-40 p-3 bg-[#C41E3A] text-white rounded-full shadow-lg hover:bg-[#A01830] hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2"
           aria-label="返回顶部"
           title="返回顶部"
           style={{
diff --git a/src/components/ui/flip-clock.tsx b/src/components/ui/flip-clock.tsx
index 5864da5..a22a0fb 100644
--- a/src/components/ui/flip-clock.tsx
+++ b/src/components/ui/flip-clock.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useReducer } from 'react';
+import { useReducer, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
 interface FlipCardProps {
@@ -93,7 +93,9 @@ function FlipCard({ value, label, maxDigits = 2 }: FlipCardProps) {
     },
     { current: value, previous: value }
   );
-  dispatch(value);
+  useEffect(() => {
+    dispatch(value);
+  }, [value]);
 
   const formatNumber = (num: number) => {
     const str = num.toString().padStart(maxDigits, '0');