diff --git a/website/src/styles/home.css b/website/src/styles/home.css
index 540d349..3a207e5 100644
--- a/website/src/styles/home.css
+++ b/website/src/styles/home.css
@@ -12,14 +12,31 @@
 .mk-display span { display: block; }
 .mk-display em { font-style: normal; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
 .mk-lede { max-width: 640px; margin-top: 26px; font-size: 17px; color: var(--text-soft); line-height: 1.75; }
+.ink-grad { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
 .mk-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
+
+/* Hero 下方的马赛克拼贴（portrait 照片网格的抽象化，用渐变tile替代无版权照片） */
+.pt-mosaic { width: 100%; max-width: 1040px; margin: clamp(40px, 6vh, 64px) auto 0; display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(64px, 9vh, 104px); }
+.mk-tile { border-radius: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm-border); display: grid; place-items: center; color: #fff; }
+.mk-tile .icon { opacity: .9; }
+.mk-tile span { font-family: var(--font-pixel); font-size: 13px; }
+.mk-tile.t1 { background: linear-gradient(135deg, #26c0ff, #7f62ff); grid-column: span 2; grid-row: span 2; }
+.mk-tile.t2 { background: linear-gradient(135deg, #ff7ab8, #ff6a3d); }
+.mk-tile.t3 { background: linear-gradient(135deg, #8be0c9, #00cc9e); }
+.mk-tile.t4 { background: linear-gradient(135deg, #ffd47a, #ff9f2e); grid-row: span 2; }
+.mk-tile.t5 { background: linear-gradient(135deg, #c9a8ff, #8a7bff); }
+.mk-tile.t6 { background: linear-gradient(135deg, #6fe0ff, #3f8bff); grid-column: span 2; }
+.mk-tile.t7 { background: linear-gradient(135deg, #ffb38a, #ff5f86); }
+.mk-tile.t8 { background: linear-gradient(135deg, #1b2a5e, #35507f); grid-column: span 2; grid-row: span 2; }
+.mk-tile.t9 { background: linear-gradient(135deg, #ffa13e, #ff494e); }
+@media (max-width: 720px) { .pt-mosaic { grid-template-columns: repeat(2, 1fr); } }
 .btn-ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); color: var(--text-soft); background: transparent; font-weight: 600; font-size: 14px; padding: 12px 26px; transition: border-color .2s ease, color .2s ease, transform .2s var(--ease); }
 .btn-ghost:hover { border-color: var(--heading); color: var(--heading); transform: translateY(-1px); }
 
 /* ---------- 通用小节 ---------- */
 .pt-section { margin-top: clamp(72px, 12vh, 150px); }
 .pt-h { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.802rem, 1.313rem + 2.17vw, 3.05rem); line-height: 1.04; letter-spacing: -.032em; color: var(--heading); }
-.pt-h .ac { color: var(--primary); }
+.pt-h .ac { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
 .pt-h.center { text-align: center; }
 .pt-p { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--text-soft); max-width: 560px; }
 .pt-p.dim { color: var(--muted); }
diff --git a/website/src/user/Home.jsx b/website/src/user/Home.jsx
index c6df176..2271b51 100644
--- a/website/src/user/Home.jsx
+++ b/website/src/user/Home.jsx
@@ -114,6 +114,17 @@ export default function Home() {
             <Button variant="cta" href={MK_HERO.ctaPrimary.href}>{MK_HERO.ctaPrimary.label} <Icon name="arrow-right" size="sm" /></Button>
             <Button variant="ghost" href={MK_HERO.ctaSecondary.href}>{MK_HERO.ctaSecondary.label}</Button>
           </div>
+          <div className="pt-mosaic anim" style={{ '--d': '0.55s' }} aria-hidden="true">
+            <div className="mk-tile t1"><Icon name="sparkles" size="xl" /></div>
+            <div className="mk-tile t2"><span>测</span></div>
+            <div className="mk-tile t3"><Icon name="home" size="xl" /></div>
+            <div className="mk-tile t4"><span>认</span></div>
+            <div className="mk-tile t5"><Icon name="book" size="xl" /></div>
+            <div className="mk-tile t6"><Icon name="trending-up" size="xl" /></div>
+            <div className="mk-tile t7"><span>单</span></div>
+            <div className="mk-tile t8"><Icon name="compass" size="xl" /></div>
+            <div className="mk-tile t9"><span>陪</span></div>
+          </div>
         </section>
 
         {/* 2 · 特征分栏 1：三件套 */}