init: OBDX web landing (Bento Garage design)

- Vite + React + TS + Tailwind v4 + framer-motion + lucide
- 5 sections: Hero, Showcase (steps + 3 cases), Pricing, Comparison, Footer
- Brand assets local (logo v2 SVG, 3 mascots, 6 scenes) under public/brand/
- Dockerfile multi-stage (node 20 build → nginx 1.27 alpine)
- nginx /api/* reverse-proxy to obdx-api:8080, SPA fallback
- /healthz endpoint for Coolify

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

DESIGN-CANDIDATES.md

@@ -0,0 +1,67 @@
+# OBDX Landing — Design Candidates (Phase A2)
+
+4 套风格候选。每套都守 DESIGN-INPUTS.md 里的强约束（logo v2 SVG / 3 吉祥物 / 北美英文 / 5 品牌性格轴），软约束（色板/字体/布局）可自由解构。
+
+旧 VI 默认的 **Dark Garage** 用户已反馈"不过关"，候选里有意不包含其变体。
+
+---
+
+## 候选 1 — Under the Hood（引擎盖下）
+
+**调性**：精密机械美学 × 玻璃质感数据层。想象打开引擎盖看金属、活塞、管路，但所有数据漂浮在透明玻璃卡片里。
+
+- **色板**：`#0A0A0A` Jet Black / `#2563EB` Cobalt / `#F59E0B` Amber / `#C0C0C0` Titanium（金属感）
+- **字体**：Space Grotesk（标题，几何工程感）+ DM Sans + JetBrains Mono
+- **布局**：左右不对称，左边暗色金属肌理 + IP 角色场景图，右边透明玻璃卡（backdrop-blur）叠在金属上
+- **动效**：玻璃卡 hover 微微倾斜（3D tilt），数据从 IP 手里"流"到玻璃卡
+- **吉祥物**：Wrench Uncle 站 Hero 中心，Dash 作为小数据粒子飘浮
+- **风险**：深色本质没脱开 Dark Garage
+
+## 候选 2 — Bento Garage（便当车库）✅ **推荐 / 已实现 Hero 原型**
+
+**调性**：浅色 Bento grid × 日系 Kawaii + 工具感。从"车库暗房"反转到"明亮工作台"，温暖木质 + 每个信息点独立圆角格子。
+
+- **色板**：`#F5F1EA` Warm Beige / `#FAFAF7` Cream / `#2563EB` Cobalt / `#E07856` Terracotta / `#1A1A1A` Ink
+- **字体**：Outfit + DM Sans + JetBrains Mono（VI 继承）
+- **布局**：12 列 bento grid，大格 + 小格不对称堆叠，`rounded-3xl` 柔和圆角
+- **动效**：每格独立淡入（stagger），hover 放大轻微 tilt
+- **吉祥物**：Wrench Uncle 溢出大 Hero 格子右下角，Dash 钻进数据格子
+- **为什么推荐**：
+  - 彻底反转 Dark Garage（浅色 vs 深色）
+  - Bento 是 2026 主流模式，读起来有节奏
+  - 浅色系 + 吉祥物最大化 Pixar 温暖 + Apple 质感
+  - 保留 Electric Cobalt 品牌色做点缀
+  - 对比旧 HTML 的临时蓝色调差异化极强
+
+## 候选 3 — Diagnostic Runway（诊断跑道）
+
+**调性**：Apple 产品页 × F1 遥测。极简、巨字号、中心对齐，数据如赛车仪表盘实时跳动。
+
+- **色板**：`#000000` Racing Black / `#EF4444` Signal Red / `#FFFFFF` / `#4338CA` Deep Indigo
+- **字体**：Outfit ExtraBold 150px+（超大 Hero 标题）+ Inter + IBM Plex Mono
+- **布局**：全宽纵向 runway，每屏一个大主题，中心对齐，大量留白
+- **动效**：scroll-driven reveal，数字 counter 动画，横向滑动展示竞品对比
+- **吉祥物**：**几乎不用**（只 Hero 一尊 Wrench Uncle，其他屏纯 typography + 产品 UI 截图）
+- **风险**：弱化了 IP 依赖，品牌识别度下降
+
+## 候选 4 — Paper Workshop（纸上车间）
+
+**调性**：手绘 sketch + 纸肌理 + 工程图纸笔记。像打开老修车师傅的手写笔记本。
+
+- **色板**：`#F2EAD3` Aged Paper / `#1A1A1A` Dark Ink / `#2B6CB0` Blueprint Cyan / `#E07856` Caution Amber
+- **字体**：Instrument Serif（手写风标题）+ DM Mono（正文）+ Caveat 手写体点缀
+- **布局**:拼贴、不规则、手绘连线连接信息块
+- **动效**:笔迹描绘（SVG stroke dashoffset）、纸张翻页
+- **吉祥物**:改造成"纸质风"笔触描边插画
+- **风险**:需要把吉祥物 PNG 做二次艺术处理，工作量大
+
+---
+
+## 推荐：**候选 2 — Bento Garage**，已先出 Hero 原型让你看实物再定
+
+Hero 代码在 `web/src/components/Hero.tsx`，用候选 2 色板/字体/布局。
+
+如果 Hero 不对路，换到候选 1/3/4 的主要变更点：
+- → 候选 1：`index.css` 色板改深色金属；Hero 用 `backdrop-blur` 玻璃卡；背景换 IP 场景图
+- → 候选 3：`index.css` 色板改黑白红；Hero 去掉 bento grid 改全宽中心对齐；字号 6xl → 9xl；吉祥物用量减到 1 个
+- → 候选 4：`index.css` 色板改 paper；字体换 Instrument Serif；加 SVG 手绘描边 texture