feat(landing): 首页主图升级 + 补 og:image 社交分享图（用 Agnes Image 生成）

## 主图：906KB 平淡白底照 → 146KB 影棚级产品图

原 `hero-bg.png` 是 1312×736 的产品照，柜子偏在画面右侧、左侧大片死白，
且被 `background-size:100% 100%` 横向拉伸 34%（见上一提交的分栏改造）。

本次用 **Agnes Image 2.5 Flash 图生图**升级：
- 输入：原图压缩到 1024 宽（51KB）作 Data URI
- 提示词：保持 6×6 共 36 仓的矩阵布局（**产品规格是真的，不能改**），
  柜体居中构图，换成干净现代的商业影棚环境，品牌蓝 #0366e6 轮廓光，
  玻璃仓门反光、地面投影与倒影，明亮浅色基调
- 输出 2K 4:3（2304×1728）→ 压到 1800 宽 JPEG q87 = **145.9KB**

## og:image：从缺失到补齐

原页面**完全没有** og/Twitter 元信息 —— 链接被分享到微信/Twitter 时没有预览图。
现补全 `og:type/site_name/title/description/image/url` + `twitter:card=summary_large_image`
等，配图用 2K 16:9 生成后压到标准 1200×630 = 68.6KB。

## 文件

| 文件 | 变化 |
|---|---|
| `deploy/landing/hero.jpg` | 新增（145.9KB，1800×1350） |
| `deploy/landing/og-image.jpg` | 新增（68.6KB，1200×673） |
| `deploy/landing/index.html` | 主图 `hero-bg.png`→`hero.jpg`；补 og/Twitter 元信息 |
| `deploy/landing/hero-bg.png` | **删除**（905.9KB，已无人引用） |

首屏图片总体积：905.9KB → **214.5KB**（-76%）。

## 实测（发布后打真实 URL）

```
200  145.9KB image/jpeg   app.anzhizhichong.com/hero.jpg
200   68.6KB image/jpeg   app.anzhizhichong.com/og-image.jpg
200   21.1KB image/svg+xml favicon.svg
200   12.3KB image/svg+xml logo.svg
404  text/html            hero-bg.png   （文件确已删除）
```
HTML 已确认引用 `hero.jpg` 且含 `og:image` / `twitter:card`。

## 过程中修掉的 CLI 缺陷

生成时撞到 Windows **进程命令行 32KB 上限**（Data URI base64 走参数直接 `WinError 206`）。
已给两个 CLI 补上本地文件入参：`--image-file`（图像）、
`--image-file`/`--first-frame-file`/`--last-frame-file`/`--audio-file`（视频），
内部转 Data URI，不再走命令行。

## 备注

生成按 Agnes 的**串行**要求执行：两个任务一次一个，顺序完成（主图 → og 图）。

deploy/landing/index.html

@@ -6,166 +6,238 @@
 <!-- 全站统一 favicon：与 web 管理端同源（logo/favicon.svg） -->
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <title>艾动智能 — 智能充电柜矩阵系统</title>
+<!-- 社交分享（og / Twitter）：此前完全缺失，链接被分享时没有预览图 -->
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="艾动智能">
+<meta property="og:title" content="艾动智能 — 为换电场景打造的下一代智能充电">
+<meta property="og:description" content="36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。从硬件到云端，全栈自研的智能充电解决方案。">
+<meta property="og:image" content="https://app.anzhizhichong.com/og-image.jpg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:url" content="https://app.anzhizhichong.com/">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="艾动智能 — 为换电场景打造的下一代智能充电">
+<meta name="twitter:description" content="36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。从硬件到云端，全栈自研。">
+<meta name="twitter:image" content="https://app.anzhizhichong.com/og-image.jpg">
 <style>
+/* ==========================================================================
+   艾动智能 · 产品介绍页（单屏不滚动 / 明亮浅色）
+   —— 设计口径见 AGENTS.md「操作规则」：偏好明亮浅色、单屏不滚动，⛔ 不做暗色科技风
+   —— 品牌色直接取自 logo：logo/纯色横向.svg 的 .cls-1 = #0366e6
+   ========================================================================== */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
+:root {
+  --brand: #0366e6;        /* 取自 logo 的蓝，全站强调色统一用它 */
+  --brand-dark: #0354c4;   /* hover 加深 */
+  --brand-soft: #eaf2fe;   /* 极浅蓝底，用于标签/弱化背景 */
+  --ink: #0F1419;          /* 主标题 */
+  --body: #454B58;         /* 正文 */
+  --muted: #8B92A5;        /* 辅助文字 */
+  --line: rgba(15,20,25,0.08);
+}
+
 html, body {
   height: 100%;
-  overflow: hidden;
+  overflow: hidden;        /* 单屏不滚动（AGENTS.md 口径） */
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
-  color: #1A1C20;
+  color: var(--body);
+  -webkit-font-smoothing: antialiased;
 }
 
 a { color: inherit; text-decoration: none; }
 
-/* ===== 整体布局：上中下三块 ===== */
+/* ===== 整体：上 / 中 / 下 三块，中块自适应 ===== */
-.layout {
+.layout { display: flex; flex-direction: column; height: 100vh; }
-  display: flex;
+
-  flex-direction: column;
+/* ===== 背景：白底 + 右上角极淡的品牌蓝光晕（保持明亮，不搞暗色）===== */
-  height: 100vh;
+.bg {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  background:
+    radial-gradient(900px 620px at 82% 18%, rgba(3,102,230,0.055), transparent 68%),
+    radial-gradient(700px 480px at 96% 88%, rgba(3,102,230,0.035), transparent 70%);
 }
 
 /* ===== TOP: 顶部导航 ===== */
 .top {
+  position: relative; z-index: 2;
   flex-shrink: 0;
-  display: flex;
+  display: flex; align-items: center; justify-content: space-between;
-  align-items: center;
+  padding: 14px 48px;
-  justify-content: space-between;
-  padding: 10px 48px;
-  z-index: 10;
 }
+.top-brand { display: flex; align-items: center; }
+/* 横版锁标 1511.75×413.59（≈3.65:1）；48px 高 ⇒ 约 175px 宽 */
+.logo { height: 46px; width: auto; display: block; }
 
-.top-brand { display: flex; align-items: center; gap: 8px; }
+.top-links { display: flex; align-items: center; gap: 6px; }
-.logo {
-  /* 横版锁标 1511.75x413.59（≈3.65:1）：48px 高 ⇒ 约 175px 宽，
-     锁标内部的"艾动智能"字样约 24px，与页头原有文字观感一致 */
-  height: 48px;
-  width: auto;
-  display: block;
-}
-
-.top-links { display: flex; gap: 8px; }
 .top-link {
-  font-size: 13px; font-weight: 500;
+  font-size: 13px; font-weight: 500; color: var(--body);
-  color: #4A5060;
+  padding: 8px 16px; border-radius: 8px; transition: all .2s;
-  padding: 7px 16px;
-  border-radius: 8px;
-  transition: all 0.2s;
 }
-.top-link:hover { background: rgba(37,99,235,0.07); color: #2563EB; }
+.top-link:hover { background: var(--brand-soft); color: var(--brand); }
-.top-link--cta { background: #1A1C20; color: #fff; }
+.top-link--cta { background: var(--ink); color: #fff; }
-.top-link--cta:hover { background: #2D3038; color: #fff; }
+.top-link--cta:hover { background: #23272F; color: #fff; }
 
-/* ===== MID: 中部背景图，填满 ===== */
+/* ===== MID: 左文右图 分栏 ===== */
 .mid {
-  flex: 1;
+  position: relative; z-index: 1;
-  min-height: 0;
+  flex: 1; min-height: 0;
-  background: url("hero-bg.png") no-repeat right center;
+  display: flex; align-items: center;
-  background-size: 100% 100%;
+  gap: 40px;
-  display: flex;
+  padding: 0 64px;
-  align-items: center;
-  padding: 0 80px;
 }
 
-/* ===== COPY: 文字区域 ===== */
+/* ---- 左：文案 ---- */
 .copy {
-  max-width: 580px;
+  flex: 1 1 52%;
-  display: flex;
+  max-width: 620px;
-  flex-direction: column;
+  display: flex; flex-direction: column; gap: 20px;
-  gap: 22px;
 }
 
+/* 小标签：品牌蓝 + 呼吸圆点 */
 .tag {
-  display: inline-flex; align-items: center; gap: 7px;
+  display: inline-flex; align-items: center; gap: 8px;
-  padding: 5px 14px;
+  padding: 6px 14px 6px 12px;
-  border: 1px solid rgba(37,99,235,0.25);
+  background: var(--brand-soft);
+  border: 1px solid rgba(3,102,230,0.16);
   border-radius: 100px;
-  font-size: 13px; font-weight: 600;
+  font-size: 13px; font-weight: 600; color: var(--brand);
-  color: #2563EB;
   width: fit-content;
 }
 .tag .dot {
-  width: 6px; height: 6px;
+  width: 7px; height: 7px; border-radius: 50%;
-  background: #2563EB;
+  background: var(--brand);
-  border-radius: 50%;
+  box-shadow: 0 0 0 0 rgba(3,102,230,0.45);
+  animation: pulse 2.4s ease-out infinite;
+}
+@keyframes pulse {
+  0%   { box-shadow: 0 0 0 0 rgba(3,102,230,0.40); }
+  70%  { box-shadow: 0 0 0 7px rgba(3,102,230,0); }
+  100% { box-shadow: 0 0 0 0 rgba(3,102,230,0); }
 }
 
 h1 {
-  font-size: clamp(40px, 4.5vw, 60px);
+  font-size: clamp(38px, 4.2vw, 58px);
-  font-weight: 900;
+  font-weight: 800;
-  line-height: 1.15;
+  line-height: 1.18;
   letter-spacing: -0.02em;
-  color: #1A1C20;
+  color: var(--ink);
 }
-h1 .accent { color: #2563EB; }
+h1 .accent { color: var(--brand); }
 
 .subhead {
-  font-size: clamp(15px, 1.3vw, 18px);
+  font-size: clamp(15px, 1.25vw, 17px);
-  font-weight: 300;
+  font-weight: 400;
-  color: #4A5060;
+  line-height: 1.8;
-  line-height: 1.75;
+  color: var(--body);
-  max-width: 480px;
+  max-width: 500px;
 }
 
+/* 能力标签：只放 stats 里没有的，避免信息重复 */
 .pills { display: flex; flex-wrap: wrap; gap: 8px; }
 .pill {
-  padding: 5px 12px;
+  padding: 5px 13px;
-  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  border: 1px solid var(--line);
   border-radius: 100px;
-  font-size: 13px; font-weight: 500;
+  font-size: 13px; font-weight: 500; color: var(--body);
-  color: #4A5060;
+  box-shadow: 0 1px 2px rgba(15,20,25,0.03);
 }
 
-.ctas { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
+/* 行动按钮（此前只有 CSS、HTML 里从未渲染过）*/
+.ctas { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
 .btn {
   display: inline-flex; align-items: center; gap: 8px;
-  padding: 13px 28px;
+  padding: 13px 26px;
   font-size: 15px; font-weight: 600;
-  border-radius: 10px;
+  border-radius: 10px; transition: all .2s;
-  transition: all 0.2s;
+  white-space: nowrap;
 }
 .btn-primary {
-  background: #1A1C20; color: #fff;
+  background: var(--brand); color: #fff;
-  box-shadow: 0 4px 24px rgba(26,28,32,0.10);
+  box-shadow: 0 6px 20px rgba(3,102,230,0.24);
 }
-.btn-primary:hover { background: #2D3038; transform: translateY(-2px); }
+.btn-primary:hover {
-.btn-ghost {
+  background: var(--brand-dark);
-  color: #4A5060;
+  transform: translateY(-2px);
-  border: 1.5px solid rgba(0,0,0,0.12);
+  box-shadow: 0 10px 26px rgba(3,102,230,0.30);
 }
-.btn-ghost:hover { border-color: #8B92A5; color: #1A1C20; }
+.btn-ghost { color: var(--body); border: 1.5px solid rgba(15,20,25,0.13); background: #fff; }
+.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
+.btn .arrow { transition: transform .2s; }
+.btn-primary:hover .arrow { transform: translateX(3px); }
 
+/* 数据条 */
 .stats {
-  display: flex; gap: 32px;
+  display: flex; gap: 40px;
-  padding-top: 14px;
+  padding-top: 18px; margin-top: 4px;
-  border-top: 1px solid rgba(0,0,0,0.08);
+  border-top: 1px solid var(--line);
-  margin-top: 4px;
 }
-.stat-num { font-size: 28px; font-weight: 700; color: #1A1C20; line-height: 1.2; }
+.stat-num {
-.stat-label { font-size: 12px; font-weight: 500; color: #8B92A5; margin-top: 2px; }
+  font-size: 30px; font-weight: 800; color: var(--ink);
+  line-height: 1.1; letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;   /* 数字等宽，四个数据对齐 */
+}
+.stat-num .unit { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 2px; }
+.stat-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 5px; }
 
-/* ===== BOT: 底部 ICP ===== */
+/* ---- 右：产品图 ---- */
-.bot {
+.hero {
-  flex-shrink: 0;
+  position: relative;
-  text-align: center;
+  flex: 1 1 48%;
-  padding: 14px;
+  height: 100%;
-  font-size: 12px;
+  display: flex; align-items: center; justify-content: center;
-  color: #6B7280;
-  z-index: 10;
 }
-.bot a { color: #2563EB; }
+/* 柜子背后的柔光 + 地面投影，给纯白背景加点纵深（仍是浅色）*/
+.hero::before {
+  content: ''; position: absolute; z-index: 0;
+  width: 78%; aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(3,102,230,0.10), transparent 62%);
+}
+.hero img {
+  position: relative; z-index: 1;
+  /* ⛔ 绝不用 background-size:100% 100%（那会把 1.78 的图横向拉爆）；
+       contain = 保持原始宽高比，永不变形 */
+  max-width: 100%; max-height: 100%;
+  width: auto; height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 26px 44px rgba(15,20,25,0.13));
+}
+
+/* ===== BOT: 底部备案 ===== */
+.bot {
+  position: relative; z-index: 2;
+  flex-shrink: 0;
+  text-align: center; padding: 14px;
+  font-size: 12px; color: var(--muted);
+}
+.bot a { color: var(--brand); }
 .bot a:hover { text-decoration: underline; }
+
+/* ===== 自适应：窄屏时收紧，保证仍然单屏不滚动 ===== */
+@media (max-width: 1180px) {
+  .mid { padding: 0 40px; gap: 28px; }
+  .stats { gap: 28px; }
+  .stat-num { font-size: 26px; }
+}
+/* 到更窄/更矮时让图片让位给文字，避免文字被挤出屏幕 */
+@media (max-width: 900px), (max-height: 620px) {
+  .hero { display: none; }
+  .copy { flex-basis: 100%; max-width: 720px; }
+}
 </style>
 </head>
 <body>
 
+<div class="bg"></div>
+
 <div class="layout">
 
   <!-- 上：顶部导航 -->
   <div class="top">
     <div class="top-brand">
-      <!-- 横版锁标（图标 + "艾动智能"字样，文字已转为路径、无字体依赖）。
+      <!-- 横版锁标（图标 + "艾动智能"字样，文字已转为路径、无字体依赖）-->
-           与 tab 图标同源：logo/纯色横向.svg → favicon 用其方形变体 -->
       <img class="logo" src="logo.svg" alt="艾动智能">
     </div>
     <div class="top-links">
@@ -174,32 +246,54 @@ h1 .accent { color: #2563EB; }
     </div>
   </div>
 
-  <!-- 中：背景图填满 -->
+  <!-- 中：左文右图 -->
   <div class="mid">
     <div class="copy">
       <div class="tag"><span class="dot"></span>智能充电矩阵系统</div>
-      <h1>为换电场景打造的<br><span class="accent">下一代智能充电</span></h1>
-      <p class="subhead">36仓独立直流快充，4G远程实时管控，多重安全防护体系。从硬件到云端，全栈自研的智能充电解决方案。</p>
 
+      <h1>为换电场景打造的<br><span class="accent">下一代智能充电</span></h1>
+
+      <p class="subhead">
+        36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。<br>
+        从硬件到云端，全栈自研的智能充电解决方案。
+      </p>
+
+      <!-- 只放 stats 未覆盖的能力点，"36仓独立"已由下方数据条表达，不再重复 -->
       <div class="pills">
-        <span class="pill">36仓独立</span>
         <span class="pill">多重防护</span>
         <span class="pill">4G 在线</span>
         <span class="pill">BMS 适配</span>
       </div>
 
+      <!-- 首屏行动按钮 -->
+      <div class="ctas">
+        <a href="/pms/" class="btn btn-primary">
+          进入管理后台
+          <svg class="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14M13 6l6 6-6 6"/>
+          </svg>
+        </a>
+        <a href="/doc/" class="btn btn-ghost">开发文档</a>
+      </div>
+
       <div class="stats">
         <div><div class="stat-num">36</div><div class="stat-label">独立仓体</div></div>
-        <div><div class="stat-num">&lt;0.5s</div><div class="stat-label">指令响应</div></div>
+        <div><div class="stat-num">&lt;0.5<span class="unit">s</span></div><div class="stat-label">指令响应</div></div>
-        <div><div class="stat-num">8000h</div><div class="stat-label">MTBF</div></div>
+        <div><div class="stat-num">8000<span class="unit">h</span></div><div class="stat-label">MTBF</div></div>
-        <div><div class="stat-num">99%</div><div class="stat-label">可用率</div></div>
+        <div><div class="stat-num">99<span class="unit">%</span></div><div class="stat-label">可用率</div></div>
-      </div>
       </div>
     </div>
 
-  <!-- 下：底部 ICP -->
+    <!-- 产品图：object-fit:contain 保证不变形；窄屏时隐藏让位给文字 -->
+    <div class="hero">
+      <img src="hero.jpg" alt="艾动智能 36 仓智能充电柜">
+    </div>
+  </div>
+
+  <!-- 下：备案 -->
   <div class="bot">
-    © 2026 艾动智能 · <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备2025198376号-1</a>
+    © 2026 艾动智能 · <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">苏ICP备2025198376号-1</a>
   </div>
 
 </div>