V2 抽卡 — 大间距对角线设计

这次修了什么：上一版把内容用 flex center 堆在屏幕中央，导致 OpenClaw 和 Hermes 的字挤在分割线两侧重叠。 新版用 absolute 定位把内容明确放在各自三角形的「重心」——左上 11%/6%，右下 11%/6%，间距大幅拉开，分割线清晰。
OPENCLAW HERMES
A · BOLD SPLIT

黑白巨字

瑞士设计风。两侧都是巨大产品名（180px），黑底 vs 白底强烈反差。hover 让另一侧变暗，专注感强。
最强反差，第一眼就抓住视线
极简、最稳、最快
永不过时（二十年后仍漂亮）
B · CINEMATIC

电影级双世界

深紫蓝（OpenClaw 冷）vs 暖橙琥珀（Hermes 暖）双世界。发光中线 + 玻璃 chips + 大图标 logo + 角标版本号。
视觉冲击最强，沉浸感最高
两个引擎气质对比鲜明（冷 vs 暖）
细节层次最丰富
C · MONOLITH

巨碑感（Linear / Vercel 风）

石墨黑 vs 象牙白，每边都有微妙网格纹 + 角落 glow。左上 logo + 序号 + 巨字 + 特性列表 + 实心 CTA。
最专业、信息密度最高
B2B / SaaS 一线产品的常用风格
两侧都有完整 CTA 按钮（点击意图明确）
D · AURORA

极光大字（Stripe / Apple 风）

底层动态极光 + 噪声纹理 + 玻璃覆盖层。两侧都是统一暗色调，但 hover 时该侧的玻璃会变亮、另一侧变暗。最高级感。
沉浸感最强，"未来感" 拉满
背景与展开后的主页可无缝衔接
动态背景延伸到整个产品的视觉体系

核心修复：用 absolute 定位（top/left & bottom/right）替代 flex center，让 OpenClaw 内容在左上 ~25% 重心，Hermes 内容在右下 ~75% 重心，永不重叠。

新增交互：用 CSS :has() 实现 hover 联动 — 鼠标在哪一边，那一边变亮 + 内容浮起；另一边自动变暗 + 模糊 + 内容缩小，专注感很强。

动画三阶段（每个版本统一）：hover 联动 → 三角形扩满 → 中心圆扩散 → 进入主页 mock。

挑选指引：
· 想要 极简永恒 → A · Bold Split
· 想要 视觉冲击 → B · Cinematic
· 想要 专业 SaaS → C · Monolith
· 想要 未来高级感 → D · Aurora

挑好告诉我编号（A/B/C/D），我把它接进真实的 /engine-select 替换现有卡片网格。