refactor(landing): 改为全屏主视觉 + 毛玻璃文案面板（消除"贴图硬边"）

## 问题

分栏布局里，产品图是 4:3 矩形、自带浅灰蓝背景，贴在页面白底上有一道
**明显的竖直硬边**；上一提交用径向遮罩缓解了，但本质上"图在盒子里"这个
结构仍会让人觉得过渡生硬（用户指出，并建议：做成一张全图，左边没内容或
少量内容，或者左边用毛玻璃、背后能稍微看到内容）。

## 方案（按用户建议）

**一张全图做底 + 左侧毛玻璃面板**，从结构上消除"过渡"这件事：

1. **重新生成主视觉图**（Agnes Image 图生图，2K 16:9）：
   - 柜子置于画面**右侧约四成**，左侧约六成是**纯净负空间**（无物体/阴影/文字）
   - ⛔ 明确声明画面内**不出现任何文字、数字、字母、水印、logo**
     （v1 的教训：提示词里写了十六进制色值和"36"，模型把它们**当文字画进了图里**，
     左侧出现"36 智能充电电柜 / #0366e6"。故颜色只描述为"品牌蓝"，绝不写 hex）
2. **全屏背景**：`.bg` 用 `background-size: cover` 铺满视口（保持宽高比、永不变形）
3. **左侧白纱**：`.bg::after` 叠一层从左到右渐淡的白色轻纱，保证文字对比度
4. **毛玻璃面板**（核心）：
   ```css
   background: rgba(255,255,255,0.58);
   backdrop-filter: blur(26px) saturate(1.5);
   border: 1px solid rgba(255,255,255,0.72);
   border-radius: 22px;
   box-shadow: 0 24px 60px rgba(15,20,25,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
   ```
   背后的柜子与渐变会**隐约透出**，边界从"贴图的硬边"变成"玻璃的质感"。

## 清理

- 删除 `deploy/landing/hero.jpg`（分栏布局废弃，146KB）
- 删除 `.hero` / `.hero::before` / `.hero img` 全部 CSS 与 HTML（含此前的 mask 方案）
- 媒体查询改为：窄屏收紧面板宽度、减弱白纱让图更多露出

## 文件

| 文件 | 变化 |
|---|---|
| `deploy/landing/hero-full.jpg` | 新增（1920×1077，114.7KB） |
| `deploy/landing/index.html` | 全屏背景 + 毛玻璃面板；删 hero 相关 |
| `deploy/landing/hero.jpg` | **删除** |

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

```
200  114.7KB image/jpeg    hero-full.jpg
200   68.6KB image/jpeg    og-image.jpg
200   21.1KB image/svg+xml favicon.svg
200   12.3KB image/svg+xml logo.svg
404  text/html             hero.jpg      （已删）
```
HTML 已确认含 `background: url("hero-full.jpg")`、两条 `backdrop-filter`、
`<div class="copy">`，且不再有 `class="hero"` / `mask-image`。

## 备注

生成按 Agnes **串行**要求执行：全程一次一个任务（v1 失败 → v2 成功）。

deploy/landing/index.html

@@ -50,12 +50,21 @@ a { color: inherit; text-decoration: none; }
 /* ===== 整体：上 / 中 / 下 三块，中块自适应 ===== */
 .layout { display: flex; flex-direction: column; height: 100vh; }
 
-/* ===== 背景：白底 + 右上角极淡的品牌蓝光晕（保持明亮，不搞暗色）===== */
+/* ===== 背景：一张全屏产品主视觉图（cover 填满，永不变形）=====
+   图是专门为这个布局生成的：柜子在画面右侧约四成，左侧是纯净负空间。
+   ::after 再叠一层从左到右渐淡的白色轻纱，保证左侧文字对比度。 */
 .bg {
   position: fixed; inset: 0; z-index: 0; pointer-events: none;
-  background:
+  background: url("hero-full.jpg") no-repeat center center;
-    radial-gradient(900px 620px at 82% 18%, rgba(3,102,230,0.055), transparent 68%),
+  background-size: cover;
-    radial-gradient(700px 480px at 96% 88%, rgba(3,102,230,0.035), transparent 70%);
+}
+.bg::after {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(to right,
+    rgba(255,255,255,0.62) 0%,
+    rgba(255,255,255,0.34) 38%,
+    rgba(255,255,255,0.06) 58%,
+    transparent 72%);
 }
 
 /* ===== TOP: 顶部导航 ===== */
@@ -78,20 +87,30 @@ a { color: inherit; text-decoration: none; }
 .top-link--cta { background: var(--ink); color: #fff; }
 .top-link--cta:hover { background: #23272F; color: #fff; }
 
-/* ===== MID: 左文右图 分栏 ===== */
+/* ===== MID: 全屏图上叠一块毛玻璃文案面板 ===== */
 .mid {
   position: relative; z-index: 1;
   flex: 1; min-height: 0;
   display: flex; align-items: center;
-  gap: 40px;
+  padding: 0 56px;
-  padding: 0 64px;
 }
 
-/* ---- 左：文案 ---- */
+/* ---- 毛玻璃面板 ----
+   半透明白底 + 背景模糊：背后的柜子与渐变会隐约透出来，
+   边界从"贴图的硬边"变成"玻璃的质感"——这是消除突兀感的关键。 */
 .copy {
-  flex: 1 1 52%;
+  width: min(720px, 46vw);
-  max-width: 620px;
+  padding: 40px 44px;
   display: flex; flex-direction: column; gap: 20px;
+  background: rgba(255,255,255,0.58);
+  -webkit-backdrop-filter: blur(26px) saturate(1.5);
+  backdrop-filter: blur(26px) saturate(1.5);
+  border: 1px solid rgba(255,255,255,0.72);
+  border-radius: 22px;
+  box-shadow:
+    0 24px 60px rgba(15,20,25,0.10),
+    0 2px 8px rgba(15,20,25,0.04),
+    inset 0 1px 0 rgba(255,255,255,0.85);
 }
 
 /* 小标签：品牌蓝 + 呼吸圆点 */
@@ -181,35 +200,6 @@ h1 .accent { color: var(--brand); }
 .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; }
 
-/* ---- 右：产品图 ---- */
-.hero {
-  position: relative;
-  flex: 1 1 48%;
-  height: 100%;
-  display: flex; align-items: center; justify-content: center;
-}
-/* 柜子背后的柔光 + 地面投影，给纯白背景加点纵深（仍是浅色）*/
-.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;
-  /* 把图片的硬边框**融进页面白底**：径向遮罩让中心（柜体）保持不透明、四缘渐变透明。
-     否则 4:3 的图贴在白底上会有一道明显的"贴图"竖直硬边。
-     椭圆半径按柜体在画面里的占比取（柜体约占宽 50%、高 84%）⇒ 柜体完全在实心区内，
-     只有背景在边缘化开。图片自带地面投影，故移除 CSS 投影（否则影子会被遮罩切断）。 */
-  -webkit-mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
-  mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
-}
-
 /* ===== BOT: 底部备案 ===== */
 .bot {
   position: relative; z-index: 2;
@@ -222,14 +212,18 @@ h1 .accent { color: var(--brand); }
 
 /* ===== 自适应：窄屏时收紧，保证仍然单屏不滚动 ===== */
 @media (max-width: 1180px) {
-  .mid { padding: 0 40px; gap: 28px; }
+  .mid { padding: 0 32px; }
-  .stats { gap: 28px; }
+  .copy { width: min(640px, 62vw); padding: 32px 34px; }
+  .stats { gap: 26px; }
   .stat-num { font-size: 26px; }
 }
-/* 到更窄/更矮时让图片让位给文字，避免文字被挤出屏幕 */
+/* 更窄/更矮时：面板进一步收紧，并减弱背后的白纱让图更多露出来 */
-@media (max-width: 900px), (max-height: 620px) {
+@media (max-width: 820px), (max-height: 600px) {
-  .hero { display: none; }
+  .copy { width: 100%; padding: 26px 26px; }
-  .copy { flex-basis: 100%; max-width: 720px; }
+  .bg::after {
+    background: linear-gradient(to right,
+      rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.42) 55%, transparent 85%);
+  }
 }
 </style>
 </head>
@@ -289,11 +283,6 @@ h1 .accent { color: var(--brand); }
         <div><div class="stat-num">99<span class="unit">%</span></div><div class="stat-label">可用率</div></div>
       </div>
     </div>
-
-    <!-- 产品图：object-fit:contain 保证不变形；窄屏时隐藏让位给文字 -->
-    <div class="hero">
-      <img src="hero.jpg" alt="艾动智能 36 仓智能充电柜">
-    </div>
   </div>
 
   <!-- 下：备案 -->