From 466507b38898595eddb68cef4a32a35cf2e0de97 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Tue, 27 Oct 2026 14:58:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E9=80=90=E5=83=8F=E7=B4=A0?=
 =?UTF-8?q?=E7=A7=BB=E6=A4=8D=20vivid=20=E6=97=A7=E7=89=88=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=20+=20=E6=82=AC=E6=B5=AE=E8=83=B6=E5=9B=8A=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

整页按 vivid commit 8b16666 的 HomeView 复刻：
- Hero 左文右图：模型在线徽章、「让想象/即刻成画」渐变标题、
  渐变描边魔法输入框、提示词胶囊、三项统计
- 右侧四格作品拼贴（带错位旋转/悬停浮层/shimmer 占位）
- 01·能力矩阵(bento 网格)、02·灵感作品墙(编号卡+引导卡)
- 紫色 CTA 横幅 + 分栏页脚(社交图标接 site.contact)
- 顶栏改 vivid 胶囊：999px 毛玻璃、滚动展开通栏、
  游客态单个渐变「登录/注册」按钮
- 页面局部覆盖 vivid 原版色板(--bg #fafafb、accent #6d4df2)，
  隐藏 aurora 背景
- Icon 组件补 size prop 与缺失图标，修复 SVG 无尺寸撑爆布局

数据接本站 /managed-models(sellable) 与 /showcase(hero→拼贴,work→作品墙)

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 frontend/src/components/Icon.vue      |   14 +-
 frontend/src/layouts/PublicLayout.vue |  105 +-
 frontend/src/views/HomeView.vue       | 1790 ++++++++++++++-----------
 3 files changed, 1105 insertions(+), 804 deletions(-)

diff --git a/frontend/src/components/Icon.vue b/frontend/src/components/Icon.vue
index 738e55b..4fdcc02 100644
--- a/frontend/src/components/Icon.vue
+++ b/frontend/src/components/Icon.vue
@@ -28,12 +28,24 @@ const PATHS = {
   music: '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
   play: '<path d="m6 3 14 9-14 9V3Z"/>',
   pause: '<rect x="14" y="4" width="4" height="16" rx="1"/><rect x="6" y="4" width="4" height="16" rx="1"/>',
+  arrow: '<path d="M5 12h14"/><path d="m13 6 6 6-6 6"/>',
+  image: '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/>',
+  chat: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
+  layers: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.84Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
+  key: '<path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l3-3a1 1 0 0 0 0-1.4l-2.3-2.3a1 1 0 0 0-1.4 0l-3 3a1 1 0 0 0 0 1.4z"/><path d="m15.5 7.5-8 8"/><circle cx="7.5" cy="15.5" r="5.5"/>',
+  mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/>',
+  team: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  wallet: '<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/>',
 }
 
-defineProps({ name: { type: String, required: true } })
+defineProps({
+  name: { type: String, required: true },
+  size: { type: [Number, String], default: null },
+})
 </script>
 
 <template>
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+       :width="size || undefined" :height="size || undefined"
        stroke-linecap="round" stroke-linejoin="round" v-html="PATHS[name] || ''" />
 </template>
diff --git a/frontend/src/layouts/PublicLayout.vue b/frontend/src/layouts/PublicLayout.vue
index 7c21d96..d894153 100644
--- a/frontend/src/layouts/PublicLayout.vue
+++ b/frontend/src/layouts/PublicLayout.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { auth, isAuthed, isAdmin, openLogin, openRegister, logout } from '../auth'
 import { isDark, toggleTheme } from '../theme'
@@ -39,6 +39,12 @@ const menuOpen = ref(false)     // avatar dropdown
 const mobileOpen = ref(false)   // hamburger panel
 watch(() => route.fullPath, () => { menuOpen.value = false; mobileOpen.value = false })
 
+// 悬浮胶囊顶栏：静止时浮在页面上方（999px 圆角），滚动后展开为通栏。
+const scrolled = ref(false)
+function onScroll() { scrolled.value = window.scrollY > 4 }
+onMounted(() => { onScroll(); window.addEventListener('scroll', onScroll, { passive: true }) })
+onUnmounted(() => window.removeEventListener('scroll', onScroll))
+
 // credits — the logged-in user's real server-side balance (auth.user.credits)
 const credits = computed(() => Number(auth.user?.credits || 0))
 const creditsLabel = computed(() => pointsLabel(credits.value))
@@ -71,9 +77,9 @@ async function onLogout() {
 
 <template>
   <div class="theme-x min-h-screen bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-400/30">
-    <!-- ===== Top bar ===== -->
-    <header class="fixed top-0 inset-x-0 z-40 backdrop-blur-xl top-bar">
-      <div class="mx-auto max-w-[1400px] px-4 md:px-8 h-[58px] flex items-center gap-3">
+    <!-- ===== Top bar：悬浮胶囊，滚动展开为通栏 ===== -->
+    <header class="top-nav fixed top-0 inset-x-0 z-40" :class="{ scrolled }">
+      <div class="nav-inner mx-auto flex items-center gap-3">
         <!-- brand -->
         <router-link to="/" class="flex items-center gap-2.5 shrink-0 transition-transform hover:scale-[1.03]">
           <img v-if="site.logo" :src="site.logo" :alt="site.title" class="w-8 h-8 object-contain" />
@@ -98,8 +104,8 @@ async function onLogout() {
           余额 <span class="text-[color:var(--fg)] font-semibold">{{ creditsLabel }}</span>
         </router-link>
 
-        <!-- theme -->
-        <button type="button" @click="toggleTheme" class="round-btn"
+        <!-- theme（登录后可见，游客态与 vivid 一致只留登录入口） -->
+        <button v-if="isAuthed()" type="button" @click="toggleTheme" class="round-btn"
                 :title="isDark ? '切换到亮色' : '切换到暗色'">
           <svg v-if="isDark" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
           <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
@@ -118,10 +124,7 @@ async function onLogout() {
 
         <!-- guest actions -->
         <template v-if="!isAuthed()">
-          <button type="button" class="hidden sm:inline-flex top-link" @click="openLogin('/user')">登录</button>
-          <button type="button" class="solid-btn" @click="openRegister('', '/user')">
-            免费开始 <span aria-hidden="true">→</span>
-          </button>
+          <button type="button" class="login-pill" @click="openLogin('/user')">登录 / 注册</button>
         </template>
 
         <!-- signed-in: avatar menu -->
@@ -145,7 +148,7 @@ async function onLogout() {
       </div>
 
       <!-- mobile panel -->
-      <div v-if="mobileOpen" class="md:hidden border-t border-[color:var(--ink-soft)] px-3 py-3 bg-[var(--menu-bg)]">
+      <div v-if="mobileOpen" class="mobile-panel md:hidden px-3 py-3">
         <router-link v-for="n in nav" :key="n.to" :to="n.to"
                      :exact-active-class="n.to === '/' ? 'm-on' : ''"
                      :active-class="n.to === '/' ? '' : 'm-on'"
@@ -167,8 +170,8 @@ async function onLogout() {
 
     <!-- ===== Main column ===== -->
     <div class="relative">
-      <!-- aurora backdrop: drifting gradient orbs + faint grain -->
-      <div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden">
+      <!-- aurora backdrop: drifting gradient orbs + faint grain (首页用平铺浅色底，不渲染) -->
+      <div v-if="!isHome" aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden">
         <div class="memphis-dots absolute inset-0 opacity-50"></div>
         <div class="absolute -top-40 left-1/4 w-[42rem] h-[42rem] rounded-full opacity-[0.5]"
              style="background: radial-gradient(circle, rgb(139 92 246 / 0.35), transparent 60%); filter: blur(100px)"></div>
@@ -180,12 +183,12 @@ async function onLogout() {
       </div>
 
       <!-- Route label header — the home page brings its own hero instead. -->
-      <header v-if="!isHome" class="relative z-10 mx-auto max-w-[1400px] px-4 md:px-8 pt-[86px] pb-4">
+      <header v-if="!isHome" class="relative z-10 mx-auto max-w-[1400px] px-4 md:px-8 pt-[104px] pb-4">
         <span class="text-[22px] font-bold tracking-tight text-[color:var(--fg)]">{{ currentLabel }}</span>
       </header>
 
       <main :class="['relative z-10 mx-auto max-w-[1400px] pb-24',
-                     isHome ? 'pt-[58px] px-0' : 'px-4 md:px-8 pt-2',
+                     isHome ? 'pt-0 px-0' : 'px-4 md:px-8 pt-2',
                      { 'public-dark': isDark }]">
         <router-view v-slot="{ Component, route: viewRoute }">
           <component :is="Component" v-if="viewRoute.path === '/canvas'" />
@@ -199,30 +202,66 @@ async function onLogout() {
 </template>
 
 <style scoped>
-.top-bar {
-  background: color-mix(in srgb, var(--app-bg) 62%, transparent);
+/* 悬浮胶囊导航：不压满宽黑线，毛玻璃胶囊浮在页面上方；滚动后展开为通栏 */
+.top-nav {
+  padding-top: 10px;
+  background: transparent;
+  pointer-events: none;
+  transition: padding-top 0.22s ease;
+}
+.nav-inner {
+  pointer-events: auto;
+  height: 64px;
+  width: min(1200px, calc(100% - 40px));
+  padding: 0 14px 0 20px;
+  border-radius: 999px;
+  background: var(--menu-bg);
+  -webkit-backdrop-filter: blur(20px) saturate(1.7);
+  backdrop-filter: blur(20px) saturate(1.7);
+  border: 1px solid var(--ink-soft);
+  box-shadow: 0 8px 30px -14px rgb(15 23 42 / 0.18);
+  transition: width 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease,
+    box-shadow 0.25s ease, background 0.25s ease;
+}
+.top-nav.scrolled { padding-top: 0; }
+.top-nav.scrolled .nav-inner {
+  width: 100%;
+  border-radius: 0;
+  border-color: transparent;
   border-bottom: 1px solid var(--ink-soft);
-  transition: border-color 0.2s ease;
+  box-shadow: 0 10px 30px -12px rgb(15 23 42 / 0.12);
+}
+html.dark .nav-inner { box-shadow: 0 8px 30px -14px rgb(0 0 0 / 0.5); }
+
+.mobile-panel {
+  pointer-events: auto;
+  width: min(1200px, calc(100% - 32px));
+  margin: 6px auto 0;
+  border-radius: 1rem;
+  background: var(--menu-bg);
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+  border: 1px solid var(--ink-soft);
+  box-shadow: var(--glass-shadow-lg);
 }
 
 .top-link {
-  padding: 0.45rem 0.8rem;
-  border-radius: 0.6rem;
-  font-size: 13.5px;
+  padding: 0.55rem 1.1rem;
+  border-radius: 999px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--fg-2);
   background: transparent;
-  border: 1px solid transparent;
+  border: none;
   cursor: pointer;
-  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
 }
-.top-link:hover { color: var(--fg); background: var(--hover); border-color: rgb(124 92 252 / 0.3); }
+.top-link:active { transform: scale(0.95); }
+.top-link:hover { color: var(--fg); background: var(--hover); }
 .top-link.on {
-  color: #fff;
+  color: var(--m-orange);
   font-weight: 700;
-  background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
-  border-color: transparent;
-  box-shadow: 0 4px 14px var(--accent-glow);
+  background: rgb(124 92 252 / 0.12);
 }
 
 .brand-spark {
@@ -272,6 +311,16 @@ async function onLogout() {
   transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
 }
 .round-btn:hover { color: var(--fg); background: var(--hover); border-color: rgb(124 92 252 / 0.4); box-shadow: 0 4px 14px rgb(124 92 252 / 0.16); transform: translateY(-1px); }
+/* 游客登录入口：vivid 同款渐变胶囊 */
+.login-pill {
+  display: inline-flex; align-items: center;
+  padding: 8px 18px; border: none; border-radius: 999px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%);
+  color: #fff; font-family: inherit; font-size: 13px; font-weight: 700;
+  cursor: pointer; box-shadow: 0 10px 26px -8px rgba(109, 77, 242, 0.55);
+  transition: transform 0.15s ease, filter 0.2s ease;
+}
+.login-pill:hover { transform: translateY(-1px); filter: brightness(1.08); }
 .round-btn:active { transform: scale(0.95) translateY(1px); box-shadow: none; }
 
 /* mobile-only: .round-btn's display:grid outranks Tailwind's md:hidden, so
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 456240e..86c687f 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,169 +1,278 @@
+<template>
+  <div class="home">
+
+    <!-- Hero：左文右图，右侧为 AI 作品拼贴 -->
+    <section class="hero">
+      <div class="hero-bg"></div>
+
+      <div class="hero-wrap">
+        <div class="hero-copy">
+          <span class="badge">
+            <i class="badge-dot"></i>
+            {{ onlineModels.length }} 个模型在线 · {{ hasVideo ? '图像与视频' : '图像与文本' }}一站创作
+          </span>
+
+          <h1 class="title">让想象<br /><span class="outline">即刻成画</span></h1>
+
+          <p class="subtitle">输入一句话，或拖入一张图，生成你的专属视觉作品</p>
+
+          <div class="composer">
+            <Icon name="spark" :size="18" class="composer-icon" />
+            <input
+              ref="inputRef"
+              v-model="prompt"
+              type="text"
+              placeholder="描述你想要的画面，如：黄昏麦田里奔跑的金毛…"
+              @keydown.enter="go"
+            />
+            <button class="composer-go" @click="go" aria-label="生成">
+              生成
+              <Icon name="arrow" :size="15" />
+            </button>
+          </div>
+
+          <div class="tips">
+            <span class="tips-label">试试</span>
+            <button v-for="t in tips" :key="t" class="tip" @click="prompt = t; go()">{{ t }}</button>
+          </div>
+
+          <div class="hero-stats">
+            <div class="hstat">
+              <strong>{{ onlineModels.length }}</strong>
+              <span>在线模型</span>
+            </div>
+            <div class="hstat">
+              <strong>{{ imageQualities.length }}</strong>
+              <span>图像档位</span>
+            </div>
+            <div class="hstat">
+              <strong>/v1</strong>
+              <span>开放 API</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Hero 拼贴：展示后台轮播位（最多 4 张，点击带入提示词去创作）；
+             数据未到时先渲染同比例 shimmer 占位卡，保证首帧行高稳定、文字不跳 -->
+        <div v-if="heroSlots.length" class="hero-art" :class="{ linked: heroArts.length }">
+          <figure
+            v-for="(a, i) in heroSlots"
+            :key="a.id"
+            class="art"
+            :class="[a.ph ? 'ph' : '', 'a' + (i + 1)]"
+            role="button"
+            tabindex="0"
+            :title="a.prompt ? `用「${a.title}」的提示词去创作` : a.title"
+            @click="!a.ph && goStudio(a.prompt)"
+            @keydown.enter="!a.ph && goStudio(a.prompt)"
+          >
+            <img v-if="!a.ph" :src="imgSrc(a.image)" :alt="a.title" />
+            <figcaption v-if="a.title">{{ a.title }}</figcaption>
+          </figure>
+        </div>
+      </div>
+    </section>
+
+    <!-- 能力矩阵 -->
+    <section class="features reveal">
+      <div class="section-head">
+        <span class="eyebrow">01 · 能力</span>
+        <h2>一站式创作引擎</h2>
+      </div>
+      <div class="feature-grid">
+        <div v-for="f in features" :key="f.title" class="feature">
+          <span class="f-icon"><Icon :name="f.icon" :size="18" /></span>
+          <h3>{{ f.title }}</h3>
+          <p>{{ f.desc }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 精选作品 -->
+    <section class="gallery reveal">
+      <div class="section-head">
+        <div>
+          <span class="eyebrow">02 · 灵感</span>
+          <h2>看看别人在画什么</h2>
+        </div>
+        <router-link to="/user" class="more">
+          去创作
+          <Icon name="arrow" :size="13" />
+        </router-link>
+      </div>
+      <div v-if="inspireItems.length" class="work-grid">
+        <figure
+          v-for="(w, i) in inspireItems"
+          :key="w.id"
+          class="work-card"
+          role="button"
+          tabindex="0"
+          @click="goStudio(w.prompt)"
+          @keydown.enter="goStudio(w.prompt)"
+        >
+          <img :src="imgSrc(w.image)" :alt="w.title" loading="lazy" />
+          <span class="work-idx">{{ String(i + 1).padStart(2, '0') }}</span>
+          <figcaption>
+            <span class="work-name">{{ w.title }}</span>
+            <span class="work-model">{{ w.prompt ? w.prompt : '点击用这张的提示词创作' }}</span>
+          </figcaption>
+        </figure>
+        <router-link to="/user" class="work-cta">
+          <Icon name="spark" :size="22" />
+          <span>创作你的第一张</span>
+          <Icon name="arrow" :size="14" />
+        </router-link>
+      </div>
+      <p v-else class="gallery-empty">暂无灵感作品</p>
+    </section>
+
+    <!-- CTA -->
+    <section class="cta reveal">
+      <h2>准备好开始创作了吗？</h2>
+      <p>注册账号，即刻体验 AI 图像、视频与文字创作</p>
+      <router-link to="/user" class="cta-btn">
+        立即开始
+        <Icon name="arrow" :size="15" />
+      </router-link>
+    </section>
+
+    <footer class="foot">
+      <div class="foot-inner">
+        <div class="f-grid">
+          <div class="f-brand">
+            <div class="f-logo">
+              <img v-if="site.logo" :src="site.logo" :alt="site.title" class="f-logo-img" />
+              <Logo v-else :size="30" />
+              <span class="f-word">{{ site.title }}</span>
+            </div>
+            <p class="f-desc">按需计费的 AI 视觉创作平台——{{ onlineModels.length }} 个模型在线，按真实模型档位计费，只为实际生成的内容付费。</p>
+            <div class="f-social">
+              <a v-if="site.contact?.qq_link" :href="site.contact.qq_link" target="_blank" rel="noopener" class="fs-item" title="客服 QQ"><Icon name="chat" :size="15" /></a>
+              <button v-if="site.contact?.qq_group" type="button" class="fs-item" title="点击复制 QQ 群号" @click="copyQqGroup"><Icon name="team" :size="15" /></button>
+              <a v-if="site.contact?.email" :href="`mailto:${site.contact.email}`" class="fs-item" :title="site.contact.email"><Icon name="mail" :size="15" /></a>
+              <a v-if="site.contact?.shop" :href="site.contact.shop" target="_blank" rel="noopener" class="fs-item" title="小铺"><Icon name="wallet" :size="15" /></a>
+            </div>
+          </div>
+          <nav class="f-col">
+            <span class="f-col-h">产品</span>
+            <router-link to="/user" class="f-link">创作</router-link>
+            <router-link to="/canvas" class="f-link">无限画布</router-link>
+            <router-link to="/logs" class="f-link">我的作品</router-link>
+          </nav>
+          <nav class="f-col">
+            <span class="f-col-h">开发者</span>
+            <router-link to="/docs" class="f-link">API 文档</router-link>
+            <router-link to="/mylogs" class="f-link">调用日志</router-link>
+          </nav>
+          <nav class="f-col">
+            <span class="f-col-h">支持</span>
+            <router-link to="/about" class="f-link">关于我们</router-link>
+            <router-link to="/orders" class="f-link">我的订单</router-link>
+          </nav>
+        </div>
+        <div class="f-bottom">
+          <span>© {{ new Date().getFullYear() }} {{ site.title }} · 保留所有权利</span>
+          <span class="f-slogan">让想象即刻成画</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
+import Icon from '../components/Icon.vue'
+import Logo from '../components/Logo.vue'
 import { api, generatedUrl } from '../api'
 import { site } from '../site'
 import { isAuthed, openLogin } from '../auth'
-const router = useRouter()
 
-// Navigate to a signed-in page, or pop the login modal (remembering the
-// destination) when the visitor isn't logged in yet.
-function go(path, query) {
-  const target = query ? { path, query } : { path }
+const router = useRouter()
+const prompt = ref('')
+const inputRef = ref(null)
+const onlineModels = ref([])
+const hasVideo = computed(() => onlineModels.value.some(model => model.type === 'video'))
+const imageModels = computed(() => onlineModels.value.filter(model => model.type === 'image'))
+const textModels = computed(() => onlineModels.value.filter(model => model.type === 'text'))
+const imageQualities = computed(() => [...new Set(imageModels.value.flatMap(model => model.resolutions || []))])
+const maxRefImages = computed(() => Math.max(0, ...imageModels.value.map(model => Number(model.max_reference_images || 0))))
+
+// 展示位：轮播类型渲染为 Hero 拼贴（最多 4 格，点击带提示词去创作）+ 灵感类型渲染为作品墙
+const carouselItems = ref([])
+const carouselLoading = ref(true) // 首屏先渲染拼贴占位，行高稳定，文字不跳
+const PH_SLOTS = [
+  { id: 'ph-1', ph: true }, { id: 'ph-2', ph: true },
+  { id: 'ph-3', ph: true }, { id: 'ph-4', ph: true }
+]
+const heroSlots = computed(() => (carouselLoading.value && !carouselItems.value.length) ? PH_SLOTS : carouselItems.value.slice(0, 4))
+const inspireItems = ref([])
+// Hero 拼贴固定 4 格；后端已限制轮播最多 4 张，此处 slice 兜底
+const heroArts = computed(() => carouselItems.value.slice(0, 4))
+
+// 区块入场动画：滚动到视口时渐显一次，之后不再观察
+let revealObs = null
+
+onMounted(async () => {
+  try {
+    const [m, sc] = await Promise.all([
+      api('/managed-models'),
+      api('/showcase'),
+    ])
+    onlineModels.value = (m.data?.data || []).filter(model => model.sellable)
+    const data = sc.data?.data || {}
+    // hero 拼贴优先取 hero 位，不足 4 张用 bento 补齐
+    carouselItems.value = [...(data.hero || []), ...(data.bento || [])].filter(i => i.image).slice(0, 4)
+    inspireItems.value = data.work || []
+    carouselLoading.value = false
+  } catch { carouselLoading.value = false /* 展示位加载失败不阻塞首页 */ }
+  await nextTick()
+  if (typeof IntersectionObserver === 'undefined') return
+  revealObs = new IntersectionObserver((entries) => {
+    for (const en of entries) {
+      if (en.isIntersecting) {
+        en.target.classList.add('in')
+        revealObs.unobserve(en.target)
+      }
+    }
+  }, { threshold: 0.12 })
+  document.querySelectorAll('.home .reveal').forEach(el => revealObs.observe(el))
+})
+
+onBeforeUnmount(() => revealObs?.disconnect())
+
+// 统一的"去创作"入口：带提示词跳转到画图台；未登录弹登录框
+function goStudio(withPrompt = '') {
+  const text = String(withPrompt || '').trim()
+  const target = text ? { path: '/user', query: { prompt: text } } : { path: '/user' }
   if (isAuthed()) { router.push(target); return }
   openLogin(router.resolve(target).fullPath)
 }
 
-const stats = ref({ generated_count: 0, recent: [] })
-const managed = ref([])     // managed model records (type, resolutions, ...)
-const showcase = ref({ hero: [], bento: [], work: [] })
-// heroDeck holds the top-3 hero cards in a RANDOMIZED order, so a different card
-// fronts the deck on each page load. It's reshuffled only when the hero set first
-// loads or its members change — not on every 30s poll, so the deck stays put.
-const heroDeck = ref([])
-function shuffleArr(arr) {
-  const a = [...arr]
-  for (let i = a.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1))
-    ;[a[i], a[j]] = [a[j], a[i]]
-  }
-  return a
+function go() {
+  goStudio(prompt.value)
 }
-let timer = null
 
-async function refresh() {
-  try {
-    // No /logs here — that endpoint requires a login and only returns the
-    // caller's own entries. The latency KPI comes from /stats (aggregate,
-    // prompt-free) so the public home page exposes nothing per-user.
-    const [s, m, sc] = await Promise.all([
-      api('/stats'),
-      api('/managed-models'),
-      api('/showcase'),
-    ])
-    stats.value = s.data || { generated_count: 0, recent: [] }
-    managed.value = (m.data?.data || []).filter((x) => x.sellable)
-    showcase.value = sc.data?.data || { hero: [], bento: [], work: [] }
-    const top3 = (showcase.value.hero || []).slice(0, 3)
-    const sameSet = heroDeck.value.length === top3.length
-      && top3.every((c) => heroDeck.value.some((d) => d.id === c.id))
-    if (!sameSet) heroDeck.value = shuffleArr(top3)
-  } catch {}
-}
-onMounted(() => { refresh(); timer = setInterval(refresh, 30000) })
-onUnmounted(() => clearInterval(timer))
+const tips = ['雨夜东京小巷', '雪山极光', '和服少女', '水墨神龙', '深海幻境']
 
-// ---- showcase groups: all three kinds are used ----
-const bento = computed(() => showcase.value.bento || [])
-const works = computed(() => showcase.value.work || [])
-// hero + bento imagery, flattened into one strip for the scrolling gallery
-// marquee under the hero. Duplicated inline in the template so the loop reads
-// seamlessly when it wraps around.
-const gallery = computed(() => {
-  const seen = new Set()
-  const out = []
-  for (const c of [...(showcase.value.hero || []), ...bento.value]) {
-    if (c && !seen.has(c.id)) { seen.add(c.id); out.push(c) }
+const features = computed(() => {
+  const items = [{
+    icon: 'image', title: '图像生成',
+    desc: `${imageModels.value.length} 个图像模型，支持 ${imageQualities.value.join(' / ') || '已配置'} 档位`
+  }]
+  if (hasVideo.value) {
+    items.push({ icon: 'video', title: '视频生成', desc: '按模型配置支持视频时长与参考素材控制' })
   }
-  return out
-})
-
-// ---- KPI strip — real signals only ----
-const imageModels = computed(() => managed.value.filter((m) => m.type !== 'video'))
-const videoModels = computed(() => managed.value.filter((m) => m.type === 'video'))
-const modelCount = computed(() => managed.value.length)
-
-// Resolution range across image models, e.g. "1K–4K" (or a single tier).
-const RES_ORDER = ['1K', '2K', '4K']
-const resRange = computed(() => {
-  const seen = new Set()
-  for (const m of imageModels.value) for (const r of m.resolutions || []) seen.add(r)
-  const tiers = RES_ORDER.filter((r) => seen.has(r))
-  if (!tiers.length) return '—'
-  return tiers.length === 1 ? tiers[0] : `${tiers[0]}–${tiers[tiers.length - 1]}`
-})
-
-// Show the 24h average (matches the admin overview); fall back to the all-time
-// average on a quiet day so the KPI isn't blank.
-const avgElapsed = computed(() => stats.value?.avg_elapsed_ms_24h ?? stats.value?.avg_elapsed_ms ?? null)
-const avgLabel = computed(() => {
-  if (avgElapsed.value == null) return '—'
-  if (avgElapsed.value < 1000) return avgElapsed.value + 'ms'
-  return Math.round(avgElapsed.value / 1000) + 's'
-})
-
-// ---- capability cards, derived from the sellable models ----
-function refs(m) { return m.image_to_image === true || Number(m.max_reference_images || 0) > 0 }
-const durationRange = computed(() => {
-  const secs = []
-  for (const m of videoModels.value) {
-    for (const d of m.durations || []) {
-      const n = parseInt(String(d), 10)
-      if (Number.isFinite(n)) secs.push(n)
-    }
+  if (textModels.value.length) {
+    items.push({ icon: 'chat', title: '文字生成', desc: `${textModels.value.length} 个文本模型，按次计费` })
   }
-  if (!secs.length) return ''
-  const lo = Math.min(...secs), hi = Math.max(...secs)
-  return lo === hi ? `${lo}s` : `${lo}–${hi}s`
+  items.push({
+    icon: 'layers', title: '参考素材创作',
+    desc: maxRefImages.value > 0 ? `当前图像模型最多支持 ${maxRefImages.value} 张参考图` : '按模型能力支持参考素材'
+  })
+  items.push({ icon: 'key', title: '开放 API', desc: '/v1/* 接口支持 Key 鉴权、流式结果与失败自动退款' })
+  return items
 })
-const videoRes = computed(() => {
-  const seen = new Set()
-  for (const m of videoModels.value) for (const r of m.resolutions || []) seen.add(r)
-  return [...seen].sort().join(' / ')
-})
-// Each card deep-links into the workbench with ?model=<id> (the only intent
-// PlaygroundView reads besides ?prompt), picking the first model that actually
-// offers that capability — a card with no model behind it is dropped.
-const caps = computed(() => {
-  const i2iModels = imageModels.value.filter(refs)
-  const i2vModels = videoModels.value.filter(refs)
-  return [
-    {
-      key: 't2i', title: '文字生图', model: imageModels.value[0]?.id,
-      desc: '一句话出图，画幅与分辨率按所选模型的可用范围给出。',
-      tint: 'linear-gradient(135deg,#34d399,#2dd4bf)', color: '#fff',
-      metas: [resRange.value, `${imageModels.value.length} 个模型`].filter(Boolean),
-    },
-    {
-      key: 'i2i', title: '参考图生图', model: i2iModels[0]?.id,
-      desc: '上传参考图换风格、改构图、做变体，支持多张参考。',
-      tint: 'linear-gradient(135deg,#e879f9,#f472b6)', color: '#fff',
-      metas: ['多图参考', `${i2iModels.length} 个模型`],
-    },
-    {
-      key: 't2v', title: '文字生视频', model: videoModels.value[0]?.id,
-      desc: '一段描述生成短片，时长与分辨率按模型能力可选。',
-      tint: 'linear-gradient(135deg,#38bdf8,#22d3ee)', color: '#fff',
-      metas: [durationRange.value, videoRes.value, `${videoModels.value.length} 个模型`].filter(Boolean),
-    },
-    {
-      key: 'i2v', title: '图生视频', model: i2vModels[0]?.id,
-      desc: '给参考图或首帧，让静态画面动起来。',
-      tint: 'linear-gradient(135deg,#7c5cfc,#a855f7)', color: '#fff',
-      metas: ['参考图', `${i2vModels.length} 个模型`],
-    },
-  ].filter((c) => c.model)
-})
-
-// ---- model cards: the admin-set alias wins, so no upstream naming leaks ----
-const MODEL_TINT = ['#7c5cfc', '#22d3ee', '#e879f9', '#34d399', '#a78bfa', '#38bdf8', '#94a3b8']
-const modelCards = computed(() => managed.value.map((m, i) => {
-  const bits = []
-  if (m.resolutions?.length) bits.push(m.resolutions.join(' / '))
-  if (m.type === 'video' && m.durations?.length) {
-    const lo = parseInt(m.durations[0], 10)
-    const hi = parseInt(m.durations[m.durations.length - 1], 10)
-    bits.push(lo === hi ? `${lo}s` : `${lo}–${hi}s`)
-  }
-  if (m.type !== 'video') bits.push(refs(m) ? '支持参考图' : '文字生图')
-  return {
-    id: m.id,
-    name: m.alias || m.name || m.id,
-    spec: bits.join(' · '),
-    video: m.type === 'video',
-    glow: MODEL_TINT[i % MODEL_TINT.length],
-  }
-}))
 
 // Resolve an image reference: external URLs pass through, relative paths
 // (like "user/abc.png") are served from /images by the backend.
@@ -171,681 +280,812 @@ function imgSrc(image) {
   if (!image) return ''
   return /^https?:\/\//i.test(image) ? image : generatedUrl(image)
 }
-// Background style for a showcase card. Prefers a real image (the new shape);
-// falls back to the legacy CSS gradient so seed entries still render.
-// background-image (not <img>) keeps Edge's 视觉搜索 overlay off the artwork.
-function cardBg(card) {
-  if (card.image) {
-    return {
-      backgroundImage: `url("${imgSrc(card.image)}")`,
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-    }
-  }
-  return { background: card.gradient }
-}
 
-const prompt = ref('')
-function submitPrompt() {
-  const p = prompt.value.trim()
-  go('/user', p ? { prompt: p } : null)
-}
-function useExample(ex) {
-  go('/user', ex.prompt ? { prompt: ex.prompt } : null)
+async function copyQqGroup() {
+  const g = (site.contact?.qq_group || '').trim()
+  if (!g) return
+  try {
+    await navigator.clipboard.writeText(g)
+  } catch { /* clipboard 不可用时静默 */ }
 }
 </script>
 
-<template>
-  <div class="px-4 md:px-8">
-    <!-- ============ HERO (centered, memphis deco) ============ -->
-    <section class="hero-band relative overflow-hidden pt-14 md:pt-20 pb-12">
-      <div class="anime-stars"></div>
-
-      <!-- floating aurora shapes (desktop only) -->
-      <div aria-hidden="true" class="pointer-events-none absolute inset-0 hidden lg:block">
-        <span class="deco deco-a">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z"/></svg>
-        </span>
-        <span class="deco deco-b">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>
-        </span>
-        <span class="deco deco-c">4K</span>
-        <span class="deco deco-d">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h13v12H3z"/><path d="M16 10l5-3v10l-5-3"/></svg>
-        </span>
-        <span class="deco deco-star">✦</span>
-        <span class="deco deco-star deco-star-2">✦</span>
-      </div>
-
-      <div class="relative flex flex-col items-center text-center">
-        <span class="sticker">
-          <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500 border border-[#111]"></span>
-          {{ modelCount }} 个模型在线 · 图像与视频一站生成
-        </span>
-
-        <h1 class="mt-5 font-black tracking-tight leading-[1.05] text-[clamp(2.6rem,6vw,4.6rem)] text-[color:var(--fg)]">
-          把想象 <span class="anime-grad-text">说给 AI 听</span>
-        </h1>
-
-        <p class="mt-5 text-[15px] md:text-base font-medium text-[color:var(--fg-2)] max-w-xl leading-relaxed">
-          写一句话，剩下的交给我们：自动选模型、自动排队，图像与视频都在同一个工作台里出片。
-        </p>
-
-        <!-- prompt composer — the shortest path into the workbench -->
-        <form class="composer mt-9 !max-w-2xl w-full" @submit.prevent="submitPrompt">
-          <input v-model="prompt" class="composer-input" type="text"
-                 placeholder="描述你想要的画面，比如：雨夜的东京小巷，霓虹倒映在湿滑路面…" />
-          <button type="submit" class="composer-go">✦ 生成</button>
-        </form>
-
-        <!-- quick starters come from the curated bento set -->
-        <div v-if="bento.length" class="mt-5 flex flex-wrap justify-center gap-2 max-w-2xl">
-          <button v-for="ex in bento.slice(0, 5)" :key="ex.id" type="button" class="chip"
-                  @click="useExample(ex)">{{ ex.title }}</button>
-        </div>
-      </div>
-    </section>
-
-    <!-- ============ GALLERY MARQUEE (hero + bento imagery) ============ -->
-    <section v-if="gallery.length" class="mt-6 -mx-4 md:-mx-8 overflow-hidden marquee-mask border-y border-y-[color:var(--ink-soft)] bg-[var(--surface)] py-4">
-      <div class="marquee flex gap-4 px-4 md:px-8 w-max">
-        <button v-for="(card, i) in [...gallery, ...gallery]" :key="card.id + '-' + i" type="button"
-                class="gcard" :style="cardBg(card)" :aria-label="card.title" @click="useExample(card)">
-          <span class="tile-veil"></span>
-          <span class="tile-cap">
-            <i>{{ card.subtitle }}</i>
-            <b>{{ card.title }}</b>
-          </span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ============ KPI STRIP ============ -->
-    <section class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-3">
-      <div v-for="k in [
-              { v: modelCount, l: '在线模型', i: 'models', tint: 'linear-gradient(135deg,#7c5cfc,#a855f7)' },
-              { v: caps.length, l: '创作方式', i: 'wand', tint: 'linear-gradient(135deg,#e879f9,#f472b6)' },
-              { v: resRange, l: '输出分辨率', i: 'image', tint: 'linear-gradient(135deg,#38bdf8,#22d3ee)' },
-              { v: avgLabel, l: '平均出片 · 近 24h', i: 'bolt', tint: 'linear-gradient(135deg,#34d399,#2dd4bf)' },
-            ]" :key="k.l"
-           class="kpi-card px-5 py-4">
-        <div class="flex items-center gap-2.5">
-          <span class="kpi-ico" :style="{ background: k.tint }">
-            <svg v-if="k.i === 'models'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
-            <svg v-else-if="k.i === 'wand'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 4 5 5L7 22l-5-5z"/><path d="m14 7 3 3"/><path d="M9 6V4M7 8H5M9 10v2M11 8h2"/></svg>
-            <svg v-else-if="k.i === 'image'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 16 5-5 3 3 4-4 6 6"/><circle cx="9" cy="9" r="1.4"/></svg>
-            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>
-          </span>
-          <span class="text-[26px] font-black tabular-nums text-[color:var(--fg)]">{{ k.v }}</span>
-        </div>
-        <div class="mt-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-[color:var(--fg-3)]">{{ k.l }}</div>
-      </div>
-    </section>
-
-    <!-- ============ CAPABILITIES ============ -->
-    <section class="mt-24">
-      <div class="anime-eyebrow text-[var(--m-orange)]">能力</div>
-      <h2 class="mt-3 text-[clamp(1.65rem,3vw,2.3rem)] font-extrabold tracking-tight text-[color:var(--fg)]">
-        {{ caps.length }} 种方式开始创作
-      </h2>
-      <p class="mt-2.5 text-[13.5px] text-[color:var(--fg-3)] max-w-lg leading-relaxed">
-        分辨率与时长直接读取模型配置，页面上写的就是你实际能选的。
-      </p>
-
-      <div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
-        <button v-for="c in caps" :key="c.key" type="button" class="cap-card"
-                @click="go('/user', { model: c.model })">
-          <span class="cap-arrow">↗</span>
-          <span class="cap-icon" :style="{ background: c.tint, color: c.color }">
-            <svg v-if="c.key === 't2i'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 5h16v14H4z"/><path d="M4 15l4.5-4.5 3 3L15 10l5 5"/><circle cx="9" cy="9" r="1.3"/></svg>
-            <svg v-else-if="c.key === 'i2i'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 7h11v11H3z"/><path d="M10 4h11v11"/></svg>
-            <svg v-else-if="c.key === 't2v'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h13v12H3z"/><path d="M16 10l5-3v10l-5-3"/></svg>
-            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 5h16v14H4z"/><path d="M9 9l6 3-6 3z"/></svg>
-          </span>
-          <span class="block text-[15.5px] font-bold text-[color:var(--fg)]">{{ c.title }}</span>
-          <span class="mt-2 block text-[12.5px] leading-relaxed text-[color:var(--fg-3)]">{{ c.desc }}</span>
-          <span class="mt-3.5 flex flex-wrap gap-1.5">
-            <i v-for="mt in c.metas" :key="mt" class="cap-meta">{{ mt }}</i>
-          </span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ============ INSPIRATION (kind=bento) ============ -->
-    <section v-if="bento.length" id="bento" class="mt-24">
-      <div class="anime-eyebrow text-rose-500">灵感</div>
-      <h2 class="mt-3 text-[clamp(1.65rem,3vw,2.3rem)] font-extrabold tracking-tight text-[color:var(--fg)]">点一下，套用同款提示词</h2>
-      <p class="mt-2.5 text-[13.5px] text-[color:var(--fg-3)] max-w-lg leading-relaxed">
-        任选一张，自动进入画图工作台并预填提示词。
-      </p>
-
-      <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 grid-flow-row-dense gap-3 auto-rows-[170px]">
-        <button v-for="ex in bento" :key="ex.id" type="button" class="tile" :class="ex.span"
-                :style="cardBg(ex)" @click="useExample(ex)">
-          <span class="tile-veil"></span>
-          <span class="tile-cap">
-            <i>{{ ex.subtitle }}</i>
-            <b>{{ ex.title }}</b>
-            <em>{{ ex.prompt }}</em>
-          </span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ============ WORKS (kind=work) ============ -->
-    <section v-if="works.length" class="mt-24">
-      <div class="anime-eyebrow text-sky-600">作品</div>
-      <h2 class="mt-3 text-[clamp(1.65rem,3vw,2.3rem)] font-extrabold tracking-tight text-[color:var(--fg)]">大家都在生成什么</h2>
-      <p class="mt-2.5 text-[13.5px] text-[color:var(--fg-3)] max-w-lg leading-relaxed">
-        精选公开作品，点开即用同一条提示词继续创作。
-      </p>
-
-      <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-        <button v-for="w in works" :key="w.id" type="button" class="work" @click="useExample(w)">
-          <span class="work-img" :style="cardBg(w)"></span>
-          <span class="work-overlay">
-            <b>{{ w.title }}</b>
-            <em>{{ w.prompt }}</em>
-            <i class="work-reuse">套用提示词</i>
-          </span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ============ MODELS ============ -->
-    <section v-if="modelCards.length" class="mt-24">
-      <div class="anime-eyebrow text-emerald-600">模型</div>
-      <h2 class="mt-3 text-[clamp(1.65rem,3vw,2.3rem)] font-extrabold tracking-tight text-[color:var(--fg)]">在线模型</h2>
-      <p class="mt-2.5 text-[13.5px] text-[color:var(--fg-3)] max-w-lg leading-relaxed">
-        每个模型的分辨率、时长与参考图能力都写在卡片上，选之前就知道能做什么。
-      </p>
-
-      <div class="mt-8 flex gap-3 overflow-x-auto pb-2 model-row">
-        <div v-for="m in modelCards" :key="m.id" class="model-card">
-          <span class="model-glow" :style="{ background: m.glow }"></span>
-          <div class="relative text-[15px] font-bold text-[color:var(--fg)]">{{ m.name }}</div>
-          <div class="relative mt-1.5 text-[11px] text-[color:var(--fg-3)]">{{ m.spec }}</div>
-          <div class="relative mt-3.5">
-            <span :class="['model-tag', m.video ? 'is-video' : 'is-image']">{{ m.video ? '视频' : '图像' }}</span>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- ============ CTA ============ -->
-    <section class="mt-24 cta-band relative overflow-hidden rounded-[1.4rem] p-10 md:p-16">
-      <div class="relative max-w-xl">
-        <h3 class="text-[clamp(1.7rem,3.4vw,2.8rem)] font-extrabold tracking-tight leading-[1.2] text-[color:var(--fg)]">
-          与其继续想，<br />不如现在写一句。
-        </h3>
-        <p class="mt-4 text-[15px] text-[color:var(--fg-2)] max-w-md leading-relaxed">
-          注册即可开始，图像与视频都能试；不满意就换个模型，额度按次计费。
-        </p>
-        <button type="button" @click="go('/user')"
-                class="mt-7 group inline-flex items-center gap-3 rounded-xl text-white pl-6 pr-3 py-3 text-sm font-extrabold transition-all cta-go">
-          免费开始
-          <span class="w-8 h-8 rounded-lg bg-white/20 border border-white/30 grid place-items-center font-black group-hover:translate-x-1 transition-transform">→</span>
-        </button>
-      </div>
-    </section>
-
-    <!-- thin footer line -->
-    <footer class="mt-16 pt-10 border-t border-t-[color:var(--ink-soft)] flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-[color:var(--fg-3)]">
-      <div class="flex items-center gap-3">
-        <span class="font-semibold text-[color:var(--fg-2)]">{{ site.title }}</span>
-        <span>·</span>
-        <span>AI 生图与生视频平台</span>
-      </div>
-      <div class="flex items-center gap-4">
-        <router-link to="/docs" class="hover:text-[color:var(--fg)] transition-colors">文档</router-link>
-        <router-link to="/about" class="hover:text-[color:var(--fg)] transition-colors">关于</router-link>
-      </div>
-    </footer>
-  </div>
-</template>
-
 <style scoped>
-/* ---------- composer ---------- */
+/* vivid 旧版色板（原版 :root 值，局部覆盖使页面与 vivid 完全一致） */
+.home {
+  --fg: #0f172a;
+  --fg-2: #3f4b5f;
+  --fg-3: #475569;
+  --fg-faint: #5a6a7d;
+  --surface: #ffffff;
+  --surface-solid: #ffffff;
+  --surface-2: #f4f4f6;
+  --surface-3: #e9e9ec;
+  --hairline: rgba(15, 23, 42, 0.08);
+  --hover: rgba(15, 23, 42, 0.05);
+  --accent: #6d4df2;
+  --accent-strong: #4f2fd8;
+  --primary-soft: rgba(109, 77, 242, 0.09);
+  --grad: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%);
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
+  --shadow-glow: 0 10px 26px -8px rgba(109, 77, 242, 0.55);
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --font-display: ui-sans-serif, system-ui, sans-serif;
+  position: relative;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+/* 平铺浅色底盖掉全局 aurora 配色，与 vivid --bg: #fafafb 一致 */
+.home::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: #fafafb;
+  pointer-events: none;
+}
+
+/* Hero：左文右图 */
+.hero {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  padding: 118px 20px 64px;
+}
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(700px 420px at 10% 0%, rgba(124, 92, 245, 0.09), transparent 70%),
+    radial-gradient(640px 420px at 90% 14%, rgba(59, 130, 246, 0.07), transparent 70%);
+}
+.hero-wrap {
+  position: relative;
+  width: min(1200px, 100%);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1.02fr 0.98fr;
+  gap: 56px;
+  align-items: center;
+}
+.hero-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+}
+
+/* 右侧作品拼贴 */
+.hero-art {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  animation: fadeUp 0.7s var(--ease) 0.25s both;
+}
+.hero-art::before {
+  content: '';
+  position: absolute;
+  inset: 8% -6% 6% -4%;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgba(124, 92, 245, 0.16), transparent);
+  filter: blur(30px);
+  z-index: -1;
+}
+.art {
+  position: relative;
+  margin: 0;
+  border-radius: 22px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.65);
+  box-shadow: 0 24px 56px -22px rgba(30, 20, 90, 0.38);
+  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
+}
+html.dark .art { border-color: var(--ink-soft); }
+.art img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.art.a1 { aspect-ratio: 3 / 4; transform: translateY(22px) rotate(-1.6deg); }
+.art.a2 { aspect-ratio: 3 / 4; transform: translateY(-12px) rotate(1.4deg); }
+.art.a3 { aspect-ratio: 1 / 1; transform: translateY(14px) rotate(1.6deg); }
+.art.a4 { aspect-ratio: 3 / 4; margin-top: -34px; transform: translateY(-6px) rotate(-1.4deg); }
+/* 数据未到时的 shimmer 占位卡：同尺寸占住拼贴区域 */
+.art.ph {
+  position: relative;
+  border-style: solid;
+  border-color: transparent;
+  background: var(--surface-2);
+  animation: fadeUp 0.7s var(--ease) 0.25s both;
+  box-shadow: none;
+  cursor: default;
+  overflow: hidden;
+}
+.art.ph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(100deg, rgba(242, 241, 247, 0) 30%, rgba(234, 230, 251, 0.95) 44%, rgba(231, 236, 252, 0.95) 52%, rgba(242, 241, 247, 0) 68%);
+  transform: translateX(-100%);
+  animation: imgSweep 1.6s ease-in-out infinite;
+  will-change: transform;
+  pointer-events: none;
+}
+@keyframes imgSweep { to { transform: translateX(100%); } }
+.art:hover {
+  transform: translateY(-4px) rotate(0deg) scale(1.02);
+  box-shadow: 0 30px 64px -20px rgba(30, 20, 90, 0.45);
+}
+/* 轮播位图片：可点击，悬停显示标题浮层 */
+.hero-art.linked .art {
+  cursor: pointer;
+}
+.hero-art.linked .art figcaption {
+  position: absolute;
+  inset: auto 0 0 0;
+  padding: 26px 14px 12px;
+  background: linear-gradient(to top, rgba(15, 23, 42, 0.72), transparent);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0;
+  translate: 0 6px;
+  transition: opacity 0.28s ease, translate 0.28s var(--ease);
+}
+.hero-art.linked .art:hover figcaption,
+.hero-art.linked .art:focus-visible figcaption {
+  opacity: 1;
+  translate: 0 0;
+}
+
+/* Hero 入场节奏 */
+@keyframes fadeUp {
+  from { opacity: 0; translate: 0 14px; }
+  to { opacity: 1; translate: 0 0; }
+}
+.badge { animation: fadeUp 0.55s var(--ease) 0.05s both; }
+.title { animation: fadeUp 0.55s var(--ease) 0.13s both; }
+.subtitle { animation: fadeUp 0.55s var(--ease) 0.21s both; }
+.composer { animation: fadeUp 0.55s var(--ease) 0.29s both; }
+.tips { animation: fadeUp 0.55s var(--ease) 0.37s both; }
+.hero-stats { animation: fadeUp 0.55s var(--ease) 0.45s both; }
+
+.badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 16px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid rgba(109, 77, 242, 0.22);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--fg-2);
+  box-shadow: 0 2px 10px rgba(109, 77, 242, 0.08);
+}
+.badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+}
+
+.title {
+  position: relative;
+  margin-top: 26px;
+  font-size: clamp(42px, 4.8vw, 66px);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.045em;
+  color: var(--fg);
+}
+.outline {
+  color: transparent;
+  background: linear-gradient(115deg, #7c5cf5, #4f46e5);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.subtitle {
+  position: relative;
+  margin-top: 18px;
+  font-size: 16px;
+  line-height: 1.7;
+  color: var(--fg-2);
+  max-width: 460px;
+}
+
+/* 输入框：渐变描边的"魔法输入框" */
 .composer {
+  position: relative;
+  margin-top: 32px;
+  width: 100%;
+  max-width: 560px;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  max-width: 36rem;
-  padding: 0.5rem;
-  border-radius: 1.1rem;
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow-lg);
-  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+  gap: 10px;
+  padding: 8px 8px 8px 18px;
+  border-radius: 999px;
+  border: 1.5px solid transparent;
+  background:
+    linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
+    linear-gradient(100deg, #8b5cf6, #6366f1 55%, #ec4899) border-box;
+  box-shadow: 0 16px 44px -14px rgba(109, 77, 242, 0.35);
+  transition: box-shadow 0.25s ease;
 }
 .composer:focus-within {
-  transform: translateY(-2px);
-  border-color: rgb(124 92 252 / 0.5);
-  box-shadow: 0 18px 50px var(--accent-glow), var(--glass-shadow);
+  box-shadow: 0 0 0 4px rgba(109, 77, 242, 0.1), 0 20px 54px -12px rgba(109, 77, 242, 0.45);
 }
-.composer-input {
+.composer-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--fg-3);
+  flex-shrink: 0;
+}
+.composer input {
   flex: 1;
   min-width: 0;
-  background: transparent;
   border: none;
   outline: none;
-  color: var(--fg);
+  background: transparent;
+  padding: 12px 0;
   font-size: 15px;
-  font-weight: 500;
-  padding: 0.7rem 0.85rem;
+  font-family: inherit;
+  color: var(--fg);
 }
-.composer-input::placeholder { color: var(--fg-faint); }
+.composer input::placeholder { color: var(--fg-3); }
 .composer-go {
-  flex: none;
-  border: 1px solid rgb(255 255 255 / 0.16);
-  cursor: pointer;
-  color: #fff;
+  height: 48px;
+  padding: 0 24px;
+  border: none;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-family: inherit;
   font-size: 14px;
-  font-weight: 800;
-  padding: 0.65rem 1.2rem;
-  border-radius: 0.75rem;
-  background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
-  box-shadow: 0 6px 18px var(--accent-glow);
-  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+  font-weight: 700;
+  color: #fff;
+  background: var(--grad);
+  cursor: pointer;
+  flex-shrink: 0;
+  box-shadow: var(--shadow-glow);
+  transition: transform 0.15s ease, filter 0.2s ease;
 }
-.composer-go:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); filter: brightness(1.07); }
-.composer-go:active { transform: scale(0.96) translateY(1px); box-shadow: 0 3px 10px var(--accent-glow); }
+.composer-go:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+.composer-go svg { width: 15px; height: 15px; }
 
-.chip {
+.tips {
+  position: relative;
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 8px;
+}
+.tips-label {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--fg-3);
+}
+.tip {
+  padding: 6px 14px;
+  border: 1px solid var(--surface-3);
+  border-radius: 999px;
+  background: var(--surface);
   font-size: 12.5px;
   font-weight: 600;
   color: var(--fg-2);
   cursor: pointer;
-  border: 1px solid var(--ink-soft);
-  padding: 0.4rem 0.8rem;
-  border-radius: 999px;
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
+  font-family: inherit;
+  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
 }
-.chip:hover {
-  color: var(--fg);
-  background: var(--hover);
-  border-color: rgb(124 92 252 / 0.45);
-  box-shadow: 0 4px 14px rgb(124 92 252 / 0.18);
+.tip:hover {
+  color: var(--accent);
+  border-color: rgba(109, 77, 242, 0.45);
+  background: rgba(109, 77, 242, 0.04);
   transform: translateY(-1px);
 }
 
-/* ---------- hero cards (kind=hero) ---------- */
-.fcard {
-  position: absolute;
-  border: 1px solid var(--glass-border);
-  padding: 0;
-  cursor: pointer;
-  border-radius: 1.1rem;
-  overflow: hidden;
-  box-shadow: var(--glass-shadow-lg);
-  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
-  animation: fcardIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
-}
-.fcard-1 { width: 58%; height: 72%; top: 4%; right: 0; z-index: 3; transform: rotate(1.5deg); }
-.fcard-2 { width: 46%; height: 44%; bottom: 2%; left: 4%; z-index: 2; transform: rotate(-2.5deg); animation-delay: 0.1s; }
-.fcard-3 { width: 34%; height: 36%; top: 0; left: 0; z-index: 1; transform: rotate(4deg); opacity: 0.92; animation-delay: 0.2s; }
-/* the back card is partly covered — keep only its title legible */
-.fcard-3 .fcard-cap em { display: none; }
-.fcard:hover { transform: translateY(-8px) rotate(0deg) scale(1.02); z-index: 4; }
-@keyframes fcardIn {
-  from { opacity: 0; transform: translateY(28px) scale(0.95); }
-}
-.fcard-veil {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgb(0 0 0 / 0.82), transparent 58%);
-}
-.fcard-cap {
-  position: absolute;
-  left: 1rem;
-  right: 1rem;
-  bottom: 0.9rem;
-  text-align: left;
-  color: rgb(255 255 255 / 0.82);
-}
-.fcard-cap i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: 0.18em; color: rgb(255 255 255 / 0.6); }
-.fcard-cap b { display: block; font-size: 14px; margin-top: 0.2rem; color: #fff; }
-.fcard-cap em {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-style: normal;
-  font-size: 11.5px;
-  line-height: 1.5;
-  margin-top: 0.25rem;
-}
-
-/* ---------- capability cards ---------- */
-.cap-card {
+/* Hero 统计 */
+.hero-stats {
   position: relative;
-  overflow: hidden;
-  text-align: left;
-  cursor: pointer;
-  border: 1px solid var(--glass-border);
-  padding: 1.35rem;
-  border-radius: 1.1rem;
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(14px);
-  backdrop-filter: blur(14px);
-  box-shadow: var(--glass-shadow);
-  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+  gap: 40px;
 }
-.cap-card::before {
-  content: '';
-  position: absolute;
-  top: -3rem;
-  right: -3rem;
-  width: 9rem;
-  height: 9rem;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgb(124 92 252 / 0.22), transparent 65%);
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-.cap-card:hover {
-  transform: translateY(-4px);
-  border-color: rgb(124 92 252 / 0.45);
-  box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(124 92 252 / 0.14);
-}
-.cap-card:hover::before { opacity: 1; }
-.cap-arrow { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--fg-3); transition: color 0.15s ease, transform 0.15s ease; }
-.cap-card:hover .cap-arrow { color: var(--m-orange); transform: translate(2px, -2px); }
-.cap-icon {
-  position: relative;
-  width: 2.6rem;
-  height: 2.6rem;
-  border-radius: 0.8rem;
-  border: 1px solid var(--ink-soft);
-  display: grid;
-  place-items: center;
-  margin-bottom: 0.9rem;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-}
-.cap-icon svg { width: 1.25rem; height: 1.25rem; }
-.cap-meta {
-  font-style: normal;
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--fg-2);
-  padding: 0.18rem 0.5rem;
-  border-radius: 0.4rem;
-  border: 1px solid var(--ink-soft);
-  background: var(--surface-2);
-}
-
-/* ---------- bento tiles (kind=bento) ---------- */
-.tile {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--glass-border);
-  padding: 0;
-  cursor: pointer;
-  border-radius: 1.1rem;
-  box-shadow: var(--glass-shadow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-}
-.tile:hover { transform: translateY(-3px); border-color: rgb(34 211 238 / 0.5); box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(34 211 238 / 0.14); }
-.tile-veil {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgb(0 0 0 / 0.82) 0%, rgb(0 0 0 / 0.28) 45%, transparent 72%);
-}
-.tile-cap { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; text-align: left; color: #fff; }
-.tile-cap i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: 0.2em; color: rgb(255 255 255 / 0.66); }
-.tile-cap b { display: block; font-size: 15px; margin-top: 0.2rem; }
-.tile-cap em {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-style: normal;
-  font-size: 11.5px;
-  line-height: 1.55;
-  margin-top: 0.3rem;
-  color: rgb(255 255 255 / 0.72);
-}
-
-/* ---------- works (kind=work) ---------- */
-.work {
-  position: relative;
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  border: 1px solid var(--glass-border);
-  padding: 0;
-  cursor: pointer;
-  border-radius: 1.1rem;
-  box-shadow: var(--glass-shadow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-}
-.work:hover { transform: translateY(-3px); border-color: rgb(232 121 249 / 0.5); box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(232 121 249 / 0.14); }
-.work-img { display: block; width: 100%; aspect-ratio: 4 / 5; transition: transform 0.5s ease; }
-.work:hover .work-img { transform: scale(1.04); }
-.work-overlay {
-  position: absolute;
-  inset: 0;
+.hstat {
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-start;
-  text-align: left;
-  padding: 1rem;
-  background: linear-gradient(to top, rgb(0 0 0 / 0.86) 0%, rgb(0 0 0 / 0.3) 50%, transparent 78%);
+  gap: 3px;
+}
+.hstat strong {
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--fg);
+  font-variant-numeric: tabular-nums;
+}
+.hstat span {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--fg-3);
+}
+.hstat + .hstat {
+  padding-left: 40px;
+  border-left: 1px solid var(--surface-3);
+}
+
+/* 区块入场：滚动渐显 */
+.reveal {
+  opacity: 0;
+  translate: 0 26px;
+  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
+}
+.reveal.in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal { opacity: 1; translate: none; transition: none; }
+}
+
+/* 能力矩阵 */
+.features {
+  width: min(1200px, 100%);
+  margin: 0 auto;
+  padding: 72px 20px 24px;
+}
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  color: var(--accent);
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+.eyebrow::before {
+  content: '';
+  width: 22px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--grad);
+}
+.section-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.section-head h2 {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--fg);
+}
+/* Bento 网格：3 列，首尾卡片跨两列 */
+.feature-grid {
+  margin-top: 28px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.feature {
+  padding: 28px 26px;
+  border-radius: 22px;
+  background: var(--surface);
+  border: 1px solid var(--surface-3);
+  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s ease;
+}
+.feature:nth-child(1) {
+  grid-column: span 2;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.07), rgba(99, 102, 241, 0.03) 60%, var(--surface));
+}
+.feature:nth-child(5) {
+  background: linear-gradient(315deg, rgba(236, 72, 153, 0.05), rgba(245, 158, 11, 0.04) 60%, var(--surface));
+}
+.feature:hover {
+  transform: translateY(-4px);
+  border-color: rgba(109, 77, 242, 0.35);
+  box-shadow: 0 18px 40px rgba(109, 77, 242, 0.12);
+}
+.f-icon {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: rgba(139, 92, 246, 0.12);
+  color: #7c3aed;
+}
+.feature:nth-child(2) .f-icon { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
+.feature:nth-child(3) .f-icon { background: rgba(236, 72, 153, 0.1); color: #db2777; }
+.feature:nth-child(4) .f-icon { background: rgba(245, 158, 11, 0.12); color: #d97706; }
+.feature h3 {
+  margin-top: 16px;
+  font-size: 15.5px;
+  font-weight: 700;
+  color: var(--fg);
+}
+.feature p {
+  margin-top: 7px;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--fg-2);
+}
+
+/* 精选作品 */
+.gallery {
+  width: min(1200px, 100%);
+  margin: 0 auto;
+  padding: 48px 20px 8px;
+}
+.more {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg-2);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+.more:hover { color: var(--accent); }
+.work-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+.work-card {
+  position: relative;
+  margin: 0;
+  aspect-ratio: 3 / 2;
+  border-radius: 18px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid var(--hairline);
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
+}
+.work-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 18px 40px rgba(109, 77, 242, 0.16);
+}
+.work-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.5s ease;
+}
+.work-card:hover img {
+  transform: scale(1.05);
+}
+.work-idx {
+  position: absolute;
+  top: 12px;
+  left: 14px;
+  font-family: 'SF Mono', Consolas, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.4);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+/* 灵感区尾部的创作引导卡 */
+.work-cta {
+  aspect-ratio: 3 / 2;
+  border-radius: 18px;
+  border: 1.5px dashed rgba(109, 77, 242, 0.35);
+  background: rgba(109, 77, 242, 0.04);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--accent);
+  font-size: 13.5px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
+}
+.work-cta:hover {
+  background: rgba(109, 77, 242, 0.08);
+  border-color: rgba(109, 77, 242, 0.55);
+  border-style: solid;
+  transform: translateY(-3px);
+}
+.work-cta svg:first-child { width: 22px; height: 22px; }
+
+.work-card figcaption {
+  position: absolute;
+  inset: auto 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 14px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
   opacity: 0;
   transition: opacity 0.25s ease;
 }
-.work:hover .work-overlay, .work:focus-visible .work-overlay { opacity: 1; }
-/* touch devices have no hover — keep the caption visible there */
-@media (hover: none) { .work-overlay { opacity: 1; } }
-.work-overlay b { color: #fff; font-size: 14px; }
-.work-overlay em {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-style: normal;
-  font-size: 11.5px;
-  line-height: 1.6;
-  margin-top: 0.3rem;
-  color: rgb(255 255 255 / 0.8);
+.work-card:hover figcaption {
+  opacity: 1;
 }
-.work-reuse {
-  margin-top: 0.7rem;
-  font-style: normal;
-  font-size: 12px;
-  font-weight: 800;
+.work-name {
+  font-size: 13.5px;
+  font-weight: 700;
   color: #fff;
-  background: linear-gradient(120deg, #7c5cfc, #22d3ee);
-  border: 1px solid rgb(255 255 255 / 0.25);
-  border-radius: 0.5rem;
-  padding: 0.4rem 0.8rem;
-  box-shadow: 0 4px 14px rgb(124 92 252 / 0.4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.work-model {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.75);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gallery-empty {
+  padding: 40px 0;
+  text-align: center;
+  font-size: 13.5px;
+  color: var(--fg-3);
 }
 
-/* ---------- model row ---------- */
-.model-row::-webkit-scrollbar { height: 6px; }
-.model-row::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
-.model-card {
+/* CTA */
+.cta {
+  width: min(1200px, calc(100% - 40px));
+  margin: 40px auto 0;
+  padding: 72px 32px;
+  border-radius: 28px;
+  background: linear-gradient(135deg, #7c5cf5 0%, #4f46e5 100%);
+  text-align: center;
   position: relative;
-  flex: none;
-  width: 14.5rem;
   overflow: hidden;
-  padding: 1.25rem;
-  border-radius: 1.1rem;
-  border: 1px solid var(--glass-border);
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(14px);
-  backdrop-filter: blur(14px);
-  box-shadow: var(--glass-shadow);
-  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
 }
-.model-card:hover { transform: translateY(-3px); border-color: rgb(124 92 252 / 0.45); box-shadow: var(--glass-shadow-lg); }
-.model-glow {
+.cta::before {
+  content: '';
   position: absolute;
-  top: -2.5rem;
-  right: -2.5rem;
-  width: 8rem;
-  height: 8rem;
+  width: 560px;
+  height: 560px;
+  left: 50%;
+  top: -320px;
+  transform: translateX(-50%);
   border-radius: 50%;
-  filter: blur(40px);
-  opacity: 0.35;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%);
+  pointer-events: none;
 }
-.model-tag {
-  font-size: 10.5px;
-  font-weight: 800;
-  padding: 0.18rem 0.55rem;
-  border-radius: 0.4rem;
-  border: 1px solid var(--ink-soft);
-}
-.model-tag.is-image { background: rgb(52 211 153 / 0.16); color: rgb(5 150 105); border-color: rgb(52 211 153 / 0.4); }
-.model-tag.is-video { background: rgb(34 211 238 / 0.16); color: rgb(8 145 178); border-color: rgb(34 211 238 / 0.4); }
-html.dark .model-tag.is-image { color: rgb(110 231 183); }
-html.dark .model-tag.is-video { color: rgb(103 232 249); }
-
-/* ---------- hero band + aurora deco ---------- */
-.hero-band {
-  border-radius: 2rem;
-}
-/* Floating glass chips scattered around the headline — each is a small
-   frosted tile with a soft shadow and its own idle animation. */
-.deco {
+.cta::after {
+  content: '';
   position: absolute;
-  display: grid;
-  place-items: center;
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-  font-weight: 900;
-  color: var(--fg);
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(12px);
-  backdrop-filter: blur(12px);
+  width: 420px;
+  height: 420px;
+  right: -140px;
+  bottom: -260px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
+  pointer-events: none;
 }
-.deco svg { width: 45%; height: 45%; color: var(--m-orange); }
-.deco-a {
-  left: 7%; top: 22%;
-  width: 3.6rem; height: 3.6rem;
-  border-radius: 1rem;
-  transform: rotate(-8deg);
-  animation: memphis-float 6s ease-in-out infinite;
-}
-.deco-b {
-  right: 8%; top: 16%;
-  width: 3rem; height: 3rem;
-  border-radius: 999px;
-  transform: rotate(6deg);
-  animation: memphis-wiggle 3.5s ease-in-out infinite;
-}
-.deco-b svg { color: var(--m-orange-2); }
-.deco-c {
-  left: 13%; bottom: 16%;
-  width: 3.2rem; height: 2.4rem;
-  border-radius: 0.7rem;
-  font-size: 0.95rem;
-  letter-spacing: 0.05em;
-  color: var(--m-orange);
-  transform: rotate(9deg);
-  animation: memphis-float 7s ease-in-out infinite reverse;
-}
-.deco-d {
-  right: 13%; bottom: 20%;
-  width: 3.4rem; height: 2.6rem;
-  border-radius: 0.8rem;
-  transform: rotate(-7deg);
-  animation: memphis-bounce 4s ease-in-out infinite;
-}
-.deco-d svg { color: #34d399; }
-.deco-star {
-  left: 22%; top: 10%;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-  font-size: 1.7rem;
-  color: var(--m-orange);
-  animation: memphis-wiggle 4s ease-in-out infinite;
-}
-.deco-star-2 {
-  left: auto; right: 22%; top: auto; bottom: 10%;
-  font-size: 1.3rem;
-  color: var(--m-pink);
-  animation: memphis-wiggle 5s ease-in-out infinite reverse;
-}
-@media (prefers-reduced-motion: reduce) { .deco { animation: none; } }
-
-/* KPI tiles — frosted cards with a gradient icon chip. */
-.kpi-card {
-  border: 1px solid var(--glass-border);
-  border-radius: 1.1rem;
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(14px);
-  backdrop-filter: blur(14px);
-  box-shadow: var(--glass-shadow);
-  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
-}
-.kpi-card:hover { transform: translateY(-3px); border-color: rgb(124 92 252 / 0.4); box-shadow: var(--glass-shadow-lg); }
-.kpi-ico {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.6rem;
-  display: grid;
-  place-items: center;
-  color: #fff;
-  flex: none;
-  box-shadow: 0 4px 12px rgb(124 92 252 / 0.3);
-}
-.kpi-ico svg { width: 1.05rem; height: 1.05rem; }
-
-/* ---------- CTA button ---------- */
-.cta-go {
-  background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
-  border: 1px solid rgb(255 255 255 / 0.2);
-  box-shadow: 0 10px 30px var(--accent-glow);
-}
-.cta-go:hover { transform: translateY(-2px); box-shadow: 0 14px 38px var(--accent-glow); filter: brightness(1.07); }
-.cta-go:active { transform: translateY(1px) scale(0.98); box-shadow: 0 4px 14px var(--accent-glow); }
-
-/* ---------- gallery marquee ---------- */
-.marquee-mask {
-  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
-  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
-}
-.marquee {
-  animation: marqueeScroll 42s linear infinite;
-}
-.marquee:hover { animation-play-state: paused; }
-@keyframes marqueeScroll {
-  from { transform: translateX(0); }
-  to { transform: translateX(-50%); }
-}
-.gcard {
+.cta h2 {
   position: relative;
-  flex: none;
-  width: 15rem;
-  height: 10rem;
-  overflow: hidden;
-  border: 1px solid var(--glass-border);
-  padding: 0;
-  cursor: pointer;
-  border-radius: 1rem;
-  background-size: cover;
-  background-position: center;
-  box-shadow: var(--glass-shadow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: #fff;
 }
-.gcard:hover {
-  transform: translateY(-3px);
-  border-color: rgb(124 92 252 / 0.5);
-  box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(124 92 252 / 0.16);
+.cta p {
+  position: relative;
+  margin-top: 12px;
+  font-size: 14.5px;
+  color: rgba(255, 255, 255, 0.82);
 }
-@media (prefers-reduced-motion: reduce) {
-  .marquee { animation: none; }
+.cta-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 30px;
+  padding: 14px 34px;
+  border-radius: 999px;
+  font-size: 14.5px;
+  font-weight: 700;
+  color: #4f46e5;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 14px 34px -10px rgba(30, 20, 90, 0.45);
+  transition: transform 0.15s ease, filter 0.2s ease;
+}
+.cta-btn:hover {
+  transform: translateY(-2px);
+  filter: brightness(0.96);
+}
+
+/* 页脚 */
+.foot {
+  position: relative;
+  margin-top: 96px;
+  background: transparent;
+  color: var(--fg);
+}
+.foot::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.14) 30%, rgba(15, 23, 42, 0.14) 70%, transparent);
+}
+.foot-inner {
+  max-width: 1264px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+.f-grid {
+  display: grid;
+  grid-template-columns: 1.6fr 1fr 1fr 1fr;
+  gap: 48px;
+  padding: 56px 0 48px;
+}
+.f-brand {
+  max-width: 340px;
+}
+.f-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.f-logo-img { width: 30px; height: 30px; object-fit: contain; }
+.f-word {
+  font-family: var(--font-display);
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--fg);
+}
+.f-desc {
+  color: var(--fg-3);
+  margin-top: 14px;
+  font-size: 13px;
+  line-height: 1.8;
+}
+.f-social {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+}
+.fs-item {
+  color: var(--fg-2);
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--surface-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
+}
+.fs-item:hover {
+  color: #fff;
+  background: var(--accent);
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 18px -6px rgba(109, 77, 242, 0.45);
+}
+.f-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.f-col-h {
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-faint);
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.f-link {
+  position: relative;
+  color: var(--fg-2);
+  width: fit-content;
+  font-size: 13.5px;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+.f-link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -3px;
+  width: 100%;
+  height: 1px;
+  background: var(--accent);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.25s var(--ease);
+}
+.f-link:hover {
+  color: var(--accent);
+}
+.f-link:hover::after {
+  transform: scaleX(1);
+}
+.f-bottom {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 28px;
+  padding-bottom: 36px;
+  border-top: 1px solid var(--hairline);
+  color: var(--fg-faint);
+  font-size: 13px;
+}
+.f-slogan {
+  color: var(--fg-3);
+}
+
+@media (max-width: 900px) {
+  .hero { padding: 92px 18px 44px; }
+  .hero-wrap { grid-template-columns: 1fr; gap: 44px; }
+  .hero-copy { align-items: center; text-align: center; }
+  .tips { justify-content: center; }
+  .hero-art { gap: 12px; }
+  .art.a1, .art.a2, .art.a3 { transform: none; }
+  .art.a4 { margin-top: 0; transform: none; }
+  .feature-grid { grid-template-columns: repeat(2, 1fr); }
+  .feature:nth-child(1) { grid-column: span 2; }
+  .work-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 520px) {
+  .title { font-size: 44px; }
+  .composer { padding: 6px 6px 6px 14px; }
+  .composer-go { height: 42px; padding: 0 16px; }
+  .feature:nth-child(1) { grid-column: auto; }
+  .hero-stats { flex-direction: row; gap: 16px; margin-top: 40px; }
+  .hstat strong { font-size: 17px; }
+  .hstat span { font-size: 11px; }
+  .hstat + .hstat { padding-left: 16px; border-left: 1px solid var(--surface-3); }
+  .feature-grid { grid-template-columns: 1fr; }
+  .features { padding: 36px 18px 16px; }
+  .gallery { padding: 20px 18px 8px; }
+  .section-head h2 { font-size: 21px; }
+  .cta { padding: 48px 20px; }
+  .cta h2 { font-size: 23px; }
+  .foot-inner { padding: 0 20px; }
+  .f-grid { grid-template-columns: 1fr; gap: 32px; padding: 44px 0 36px; }
+  .f-bottom { flex-direction: column; gap: 10px; padding-bottom: 30px; }
+}
+@media (max-width: 400px) {
+  .work-grid { grid-template-columns: 1fr; }
 }
 </style>