diff --git a/docs/visual-proposal/home-hero-options.html b/docs/visual-proposal/home-hero-options.html
new file mode 100644
index 0000000..9594a4c
--- /dev/null
+++ b/docs/visual-proposal/home-hero-options.html
@@ -0,0 +1,491 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>VMall 首页 Hero 区视觉方案对比</title>
+<style>
+  :root {
+    --red: #ca151e;
+    --ink: #1a1a1a;
+    --muted: #888;
+    --line: #e5e5e5;
+    --bg: #f5f5f5;
+    --chrome-bg: #fafaf7;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+    background: var(--chrome-bg);
+    color: var(--ink);
+    line-height: 1.6;
+  }
+  a { color: inherit; }
+  :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
+
+  /* ---------- proposal chrome ---------- */
+  .page-head {
+    max-width: 1240px; margin: 0 auto; padding: 48px 20px 24px;
+  }
+  .page-head .kicker {
+    font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--red);
+    font-weight: 700;
+  }
+  .page-head h1 { font-size: 30px; margin: 8px 0 10px; letter-spacing: -0.01em; }
+  .page-head p.decision { max-width: 760px; color: #555; font-size: 15px; }
+  .page-head p.decision strong { color: var(--ink); }
+
+  .overview {
+    max-width: 1240px; margin: 28px auto 8px; padding: 0 20px;
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
+  }
+  .ov-card {
+    display: block; text-decoration: none; background: #fff;
+    border: 1px solid var(--line); border-radius: 10px; padding: 18px;
+    transition: border-color .15s, transform .15s;
+  }
+  .ov-card:hover { border-color: var(--red); transform: translateY(-2px); }
+  .ov-card .tag { font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: .12em; }
+  .ov-card h2 { font-size: 17px; margin: 4px 0 6px; }
+  .ov-card p { font-size: 13px; color: var(--muted); }
+  .ov-card .pick {
+    display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700;
+    color: #fff; background: var(--red); border-radius: 999px; padding: 2px 10px;
+  }
+  .ov-card .pick.alt { background: #999; }
+
+  .option { max-width: 1240px; margin: 56px auto; padding: 0 20px; }
+  .option > header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
+  .option > header .num {
+    font-size: 13px; font-weight: 800; color: #fff; background: var(--ink);
+    border-radius: 6px; padding: 3px 10px; letter-spacing: .08em;
+  }
+  .option > header h2 { font-size: 24px; }
+  .option .thesis { margin: 10px 0 18px; max-width: 820px; color: #444; font-size: 14.5px; }
+  .option .thesis em { font-style: normal; color: var(--red); font-weight: 600; }
+
+  .meta {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+    gap: 12px; margin: 18px 0 26px;
+  }
+  .meta .cell { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
+  .meta .cell h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
+  .meta .cell ul { list-style: none; font-size: 13px; color: #444; }
+  .meta .cell li { padding: 2px 0 2px 14px; position: relative; }
+  .meta .cell li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: .7; }
+
+  .frame-wrap { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; overflow-x: auto; }
+  .frame-label { font-size: 11px; color: var(--muted); margin-bottom: 10px; letter-spacing: .08em; }
+
+  /* ---------- mall mock shared ---------- */
+  .mall { width: 1200px; flex: none; font-size: 14px; background: var(--bg); }
+  .topbar { height: 30px; background: #f7f7f7; border-bottom: 1px solid var(--line);
+    display: flex; align-items: center; justify-content: space-between; padding: 0 0; font-size: 12px; color: #666; }
+  .topbar span { padding: 0 8px; }
+  .hdr-main { display: flex; align-items: center; gap: 40px; padding: 18px 0; background: #fff; }
+  .logo { font-size: 30px; font-weight: 800; color: var(--red); letter-spacing: -0.02em; }
+  .search { flex: 1; max-width: 560px; display: flex; height: 36px; border: 2px solid var(--red); }
+  .search .input { flex: 1; padding: 0 12px; color: #bbb; font-size: 13px; display: flex; align-items: center; background:#fff; }
+  .search .btn { width: 88px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
+  .hdr-links { margin-left: auto; font-size: 13px; color: #555; display: flex; gap: 18px; }
+  .nav { background: #2b2b2b; color: #fff; display: flex; align-items: stretch; height: 40px; }
+  .nav .cats-title { width: 240px; background: var(--red); display: flex; align-items: center; padding: 0 16px; font-weight: 600; }
+  .nav ul { list-style: none; display: flex; align-items: stretch; }
+  .nav li { display: flex; align-items: center; padding: 0 26px; font-size: 14px; }
+  .nav li.on { background: rgba(255,255,255,.12); }
+
+  .hero { display: flex; background: #fff; }
+
+  /* sidebar */
+  .side { width: 240px; flex: none; background: rgba(30,30,30,.92); color: #fff; padding: 8px 0; position: relative; }
+  .side li { list-style: none; padding: 9px 16px; cursor: pointer; }
+  .side li.on, .side li:hover { background: #fff; }
+  .side li.on .c1, .side li:hover .c1 { color: var(--red); }
+  .side li.on .c2, .side li:hover .c2 { color: var(--red); }
+  .side .c1 { display: block; font-size: 14px; font-weight: 500; }
+  .side .c2 { font-size: 12px; color: #bbb; margin-right: 8px; }
+
+  /* flyout */
+  .flyout {
+    position: absolute; left: 240px; top: 0; width: 700px; min-height: 100%;
+    background: #fff; color: var(--ink); box-shadow: 0 4px 18px rgba(0,0,0,.18);
+    padding: 18px 26px; display: none; z-index: 5;
+  }
+  .flyout.show { display: block; }
+  .flyout .row { display: flex; border-bottom: 1px solid var(--line); padding: 10px 0; }
+  .flyout .row:last-child { border-bottom: 0; }
+  .flyout .rt { width: 110px; font-weight: 700; font-size: 13px; }
+  .flyout .ri { font-size: 12.5px; color: #777; }
+  .flyout .ri span { display: inline-block; margin: 0 16px 6px 0; }
+  .flyout .ri span:hover { color: var(--red); }
+
+  /* banners */
+  .banner { position: relative; overflow: hidden; flex: 1; }
+  .banner .slide { position: absolute; inset: 0; display: flex; flex-direction: column;
+    align-items: flex-start; justify-content: center; padding: 0 70px; color: #fff; }
+  .slide .big { font-size: 42px; font-weight: 800; letter-spacing: .02em; }
+  .slide .sub { font-size: 17px; opacity: .92; margin-top: 8px; }
+  .slide .cta { margin-top: 22px; background: #fff; color: var(--ink); font-size: 13px;
+    font-weight: 700; padding: 8px 22px; border-radius: 999px; }
+  .g1 { background: linear-gradient(105deg, #b11018 0%, #e0412a 55%, #f2832f 100%); }
+  .g2 { background: linear-gradient(105deg, #173a6b 0%, #2456a6 60%, #3d8bd4 100%); }
+  .g3 { background: linear-gradient(105deg, #0c5c4c 0%, #14957a 60%, #4cc39a 100%); }
+  .dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
+  .dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.45); }
+  .dots i.on { background: #fff; }
+  .crop-note {
+    position: absolute; right: 12px; top: 10px; font-size: 10.5px; color: rgba(255,255,255,.85);
+    background: rgba(0,0,0,.28); padding: 2px 8px; border-radius: 999px;
+  }
+
+  /* option B right rail */
+  .rail { width: 240px; flex: none; background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
+  .rail .user { padding: 18px 16px; border-bottom: 1px solid var(--line); text-align: center; }
+  .rail .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#f3b,#ca151e); margin: 0 auto 8px; }
+  .rail .user p { font-size: 12.5px; color: #666; }
+  .rail .user .btns { margin-top: 8px; display: flex; gap: 8px; justify-content: center; }
+  .rail .user .btns b { font-size: 12px; padding: 3px 14px; border-radius: 999px; font-weight: 600; }
+  .rail .user .btns .login { background: var(--red); color: #fff; }
+  .rail .user .btns .reg { border: 1px solid var(--line); color: #555; }
+  .rail .entries { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
+  .rail .entries i { background: #fff; font-style: normal; font-size: 11px; color: #666; padding: 12px 0; text-align: center; display:block; }
+  .rail .notice { margin-top: auto; padding: 12px 14px; font-size: 12px; color: #888; border-top: 1px solid var(--line); }
+  .rail .notice b { color: var(--ink); display: block; margin-bottom: 4px; font-size: 12.5px; }
+
+  /* option C lower fill */
+  .hero-c { display: grid; grid-template-columns: 240px 1fr 1fr; grid-template-rows: 300px 150px; background: #fff; }
+  .hero-c .side { grid-row: 1 / 3; }
+  .hero-c .banner { grid-column: 2 / 4; }
+  .tile { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
+  .tile + .tile { border-left: 1px solid var(--line); }
+  .tile .t-in { padding: 26px; }
+  .tile h4 { font-size: 19px; }
+  .tile p { font-size: 12.5px; color: #888; margin-top: 4px; }
+  .tile .go { color: var(--red); font-size: 12px; font-weight: 700; margin-top: 10px; display: inline-block; }
+  .tile.t1 { background: linear-gradient(120deg, #fff 55%, #fdeaea); }
+  .tile.t2 { background: linear-gradient(120deg, #fff 55%, #e9f3fd); }
+
+  /* option D stacked banners */
+  .hero-d { display: flex; background: #fff; }
+  .stack { flex: 1; display: grid; grid-template-rows: 290px 160px; }
+  .stack .banner { border-bottom: 4px solid #fff; }
+  .stack .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+  .stack .duo .mini { position: relative; overflow: hidden; color: #fff; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
+  .stack .duo .mini h4 { font-size: 20px; }
+  .stack .duo .mini p { font-size: 12px; opacity: .9; margin-top: 4px; }
+
+  /* strip under hero (shared, shown in A) */
+  .strip { display: flex; gap: 20px; margin-top: 16px; }
+  .quick { width: 240px; flex: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
+    background: var(--line); border: 1px solid var(--line); }
+  .quick i { background: #fff; font-style: normal; font-size: 11.5px; color: #777; text-align: center; padding: 12px 0; display: block; }
+  .promos { flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
+  .promos .p { height: 120px; border-radius: 2px; display: flex; align-items: flex-end; padding: 10px 14px; color: #fff; font-size: 13px; font-weight: 700; }
+
+  footer.close { max-width: 1240px; margin: 60px auto 40px; padding: 24px 20px; border-top: 1px solid var(--line);
+    color: #666; font-size: 13.5px; }
+  footer.close b { color: var(--ink); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ov-card { transition: none; }
+  }
+</style>
+</head>
+<body>
+
+<header class="page-head">
+  <div class="kicker">Visual Proposal · VMall Home Hero</div>
+  <h1>类目侧栏常驻后，banner 轮播怎么摆？</h1>
+  <p class="decision">
+    已定决策：<strong>类目侧栏首页常驻左侧、不自动隐藏；头部不再随滚动收起；banner 保持 450px 高、左右裁切</strong>。
+    本页比较的是这 1200×450 黄金区域内的四种构图。四个方案共享同一份类目数据（6 个一级类目）与 3 张 banner，差异只在布局与信息层级。
+    方案 A 是上次讨论确认的方向，其余三个用于验证它是否真的是最优。
+  </p>
+</header>
+
+<nav class="overview" aria-label="方案总览">
+  <a class="ov-card" href="#opt-a">
+    <span class="tag">OPTION A</span>
+    <h2>左栏通栏 · JD 式</h2>
+    <p>侧栏 240 + banner 950 同高 450，banner 居中裁切。最经典的 B2B2C 首页。</p>
+    <span class="pick">已确认方向</span>
+  </a>
+  <a class="ov-card" href="#opt-b">
+    <span class="tag">OPTION B</span>
+    <h2>三段式 · 加右侧用户栏</h2>
+    <p>侧栏 240 + banner 700 + 240 用户栏（登录入口/快捷入口/公告），信息密度最高。</p>
+    <span class="pick alt">对比项</span>
+  </a>
+  <a class="ov-card" href="#opt-c">
+    <span class="tag">OPTION C</span>
+    <h2>矮 banner · 侧栏下沉</h2>
+    <p>banner 缩到 300 高，侧栏 450 贯穿，下方补两张促销瓷贴。类目存在感最强。</p>
+    <span class="pick alt">对比项</span>
+  </a>
+  <a class="ov-card" href="#opt-d">
+    <span class="tag">OPTION D</span>
+    <h2>侧栏 + 双层 banner</h2>
+    <p>右侧上下两层：主 banner 290 + 两张活动位 160。一屏承载更多营销位。</p>
+    <span class="pick alt">对比项</span>
+  </a>
+</nav>
+
+<!-- ================= OPTION A ================= -->
+<section class="option" id="opt-a">
+  <header><span class="num">A</span><h2>左栏通栏 · JD 式（已确认方向）</h2></header>
+  <p class="thesis">
+    侧栏与 banner 同高 450 并排放满 1200 网格，banner 等比缩到约 950 宽后<em>居中裁切左右两侧</em>。
+    hover 一级类目时白色面板向右展开、盖住 banner（对应你给的图 2）。下方的快捷入口条 240px 宽，恰好与侧栏列宽对齐，页面左缘形成一条整齐的纵向轨道。
+  </p>
+
+  <div class="frame-wrap">
+    <div class="frame-label">LIVE MOCK · 1200px · hover 侧栏第一行可看到展开面板</div>
+    <div class="mall">
+      <div class="topbar"><span>欢迎来到 VMall</span><span>我的订单 · 我的收藏 · 客户服务 · 网站导航</span></div>
+      <div class="hdr-main">
+        <div class="logo">VMall</div>
+        <div class="search"><div class="input">iphone</div><div class="btn">搜索</div></div>
+        <div class="hdr-links"><span>我的商城</span><span>我的购物车</span></div>
+      </div>
+      <div class="nav">
+        <div class="cats-title">全部商品分类</div>
+        <ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
+      </div>
+
+      <div class="hero" style="height:450px">
+        <ul class="side" id="sideA">
+          <li data-fly="flyA1"><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
+          <li data-fly="flyA2"><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
+          <li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
+          <li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
+          <li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
+          <li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
+          <div class="flyout" id="flyA1">
+            <div class="row"><span class="rt">智能手机</span><span class="ri"><span>旗舰机型</span><span>千元机</span></span></div>
+            <div class="row"><span class="rt">影音娱乐</span><span class="ri"><span>真无线耳机</span><span>蓝牙音箱</span></span></div>
+          </div>
+          <div class="flyout" id="flyA2">
+            <div class="row"><span class="rt">笔记本电脑</span><span class="ri"><span>轻薄本</span><span>游戏本</span></span></div>
+            <div class="row"><span class="rt">外设产品</span><span class="ri"><span>键盘</span><span>显示器</span></span></div>
+          </div>
+        </ul>
+        <div class="banner">
+          <div class="slide g1"><span class="crop-note">1200×450 原图 · 居中裁切至 950</span>
+            <div class="big">手机数码节</div><div class="sub">旗舰机型低至 5 折起</div><span class="cta">立即抢购</span></div>
+          <div class="dots"><i class="on"></i><i></i><i></i></div>
+        </div>
+      </div>
+
+      <div class="strip">
+        <div class="quick"><i>充值</i><i>机票</i><i>电影票</i><i>酒店</i><i>火车票</i><i>礼品卡</i></div>
+        <div class="promos">
+          <div class="p g2">品牌闪购</div><div class="p g3">生鲜特惠</div><div class="p g1">新品首发</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="meta">
+    <div class="cell"><h3>优势</h3><ul>
+      <li>改动最小：现有 CategoryMenu 加 pinned 模式即可，DOM 结构基本不动</li>
+      <li>与 tigshop 参考一致，用户心智成本为零</li>
+      <li>banner 视觉面积最大，营销冲击力最强</li>
+      <li>侧栏 240 与下方 quick 条对齐，左缘整齐</li>
+    </ul></div>
+    <div class="cell"><h3>代价</h3><ul>
+      <li>banner 从 1200 缩到 950，左右各裁 ~125px，设计图需保证主体居中</li>
+      <li>首屏没有用户/公告位的位置</li>
+    </ul></div>
+    <div class="cell"><h3>最适合</h3><ul>
+      <li>营销驱动、banner 是核心转化位的商城</li>
+      <li>追求与成熟 B2B2C 一致的稳妥落地</li>
+    </ul></div>
+  </div>
+</section>
+
+<!-- ================= OPTION B ================= -->
+<section class="option" id="opt-b">
+  <header><span class="num">B</span><h2>三段式 · 右侧加用户栏</h2></header>
+  <p class="thesis">
+    同样是侧栏常驻，但右侧再切出 240px 给用户栏：登录/注册入口、六个快捷入口、公告。
+    banner 只剩约 700px 宽。这是京东首页的经典三段式，<em>信息密度最高</em>，但 banner 被压缩得最狠。
+  </p>
+
+  <div class="frame-wrap">
+    <div class="frame-label">MOCK · 1200px</div>
+    <div class="mall">
+      <div class="nav">
+        <div class="cats-title">全部商品分类</div>
+        <ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
+      </div>
+      <div class="hero" style="height:450px">
+        <ul class="side">
+          <li><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
+          <li><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
+          <li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
+          <li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
+          <li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
+          <li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
+        </ul>
+        <div class="banner">
+          <div class="slide g2"><span class="crop-note">banner 压缩至 ~700px</span>
+            <div class="big" style="font-size:34px">电脑办公季</div><div class="sub">轻薄本直降千元</div><span class="cta">去看看</span></div>
+          <div class="dots"><i class="on"></i><i></i><i></i></div>
+        </div>
+        <aside class="rail">
+          <div class="user">
+            <div class="avatar"></div>
+            <p>Hi，欢迎来 VMall</p>
+            <div class="btns"><b class="login">登录</b><b class="reg">注册</b></div>
+          </div>
+          <div class="entries"><i>优惠券</i><i>积分</i><i>收藏</i><i>足迹</i><i>发票</i><i>客服</i></div>
+          <div class="notice"><b>商城公告</b>国庆大促 9.28 开启，全场满 300 减 50…</div>
+        </aside>
+      </div>
+    </div>
+  </div>
+
+  <div class="meta">
+    <div class="cell"><h3>优势</h3><ul>
+      <li>首屏放下登录转化 + 快捷入口 + 公告，功能密度最高</li>
+      <li>未登录用户的引导路径最短</li>
+    </ul></div>
+    <div class="cell"><h3>代价</h3><ul>
+      <li>banner 只剩 700px，营销位严重缩水，450 高下显得局促</li>
+      <li>多一块全新组件（用户栏），mock 数据和状态都要新增</li>
+      <li>首屏信息噪声大，与"突出 banner"的目标冲突</li>
+    </ul></div>
+    <div class="cell"><h3>最适合</h3><ul>
+      <li>用户运营重于品牌营销的阶段</li>
+      <li>有强公告/通知诉求的 B 端占比高的商城</li>
+    </ul></div>
+  </div>
+</section>
+
+<!-- ================= OPTION C ================= -->
+<section class="option" id="opt-c">
+  <header><span class="num">C</span><h2>矮 banner · 侧栏下沉贯穿</h2></header>
+  <p class="thesis">
+    banner 压到 300 高，侧栏保持 450 贯穿整个 hero；banner 下方的 150px 空隙用两张促销瓷贴填平。
+    <em>类目成为 hero 的视觉主轴</em>，banner 退居其次——适合把类目导航当核心入口的商城。
+    注意：这与已确认的"banner 保持 450"不一致，选它意味着推翻第 3 条决策。
+  </p>
+
+  <div class="frame-wrap">
+    <div class="frame-label">MOCK · 1200px</div>
+    <div class="mall">
+      <div class="nav">
+        <div class="cats-title">全部商品分类</div>
+        <ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
+      </div>
+      <div class="hero-c" style="height:450px">
+        <ul class="side">
+          <li><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
+          <li><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
+          <li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
+          <li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
+          <li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
+          <li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
+        </ul>
+        <div class="banner">
+          <div class="slide g3"><span class="crop-note">banner 缩至 300 高</span>
+            <div class="big" style="font-size:30px">生鲜特惠周</div><div class="sub">产地直供 · 次日达</div><span class="cta">去逛逛</span></div>
+          <div class="dots" style="bottom:10px"><i class="on"></i><i></i><i></i></div>
+        </div>
+        <div class="tile t1"><div class="t-in"><h4>秒杀专场</h4><p>每日 10 点更新 · 低至 1 折</p><span class="go">立即开抢 ›</span></div></div>
+        <div class="tile t2"><div class="t-in"><h4>拼团广场</h4><p>2 人成团 · 好物拼着买</p><span class="go">去拼团 ›</span></div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="meta">
+    <div class="cell"><h3>优势</h3><ul>
+      <li>类目导航存在感最强，引导深逛</li>
+      <li>多两个直达秒杀/拼团的营销入口，与导航条形成呼应</li>
+    </ul></div>
+    <div class="cell"><h3>代价</h3><ul>
+      <li>banner 只有 300 高，主视觉被明显削弱</li>
+      <li>推翻已确认的 450 高决策</li>
+      <li>hero 区视觉碎成三块，不如 A 整体</li>
+    </ul></div>
+    <div class="cell"><h3>最适合</h3><ul>
+      <li>类目 SKU 极多、搜索之外的浏览主要靠类目树</li>
+      <li>营销位预算少、banner 只有一两张时</li>
+    </ul></div>
+  </div>
+</section>
+
+<!-- ================= OPTION D ================= -->
+<section class="option" id="opt-d">
+  <header><span class="num">D</span><h2>侧栏 + 双层 banner</h2></header>
+  <p class="thesis">
+    侧栏 450 不变，右侧纵向切成两层：主 banner 290 高（保持裁切策略），下面两张 160 高的活动位。
+    轮播仍是主角，但<em>首屏多承载两个固定营销位</em>，活动位的图不需要轮播、常显。
+  </p>
+
+  <div class="frame-wrap">
+    <div class="frame-label">MOCK · 1200px</div>
+    <div class="mall">
+      <div class="nav">
+        <div class="cats-title">全部商品分类</div>
+        <ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
+      </div>
+      <div class="hero-d" style="height:450px">
+        <ul class="side">
+          <li><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
+          <li><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
+          <li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
+          <li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
+          <li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
+          <li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
+        </ul>
+        <div class="stack">
+          <div class="banner">
+            <div class="slide g1"><span class="crop-note">主 banner 290 高</span>
+              <div class="big" style="font-size:30px">服饰新风尚</div><div class="sub">秋装新品满 299 减 60</div><span class="cta">选购</span></div>
+            <div class="dots" style="bottom:10px"><i class="on"></i><i></i><i></i></div>
+          </div>
+          <div class="duo">
+            <div class="mini g2"><h4>家电焕新季</h4><p>以旧换新补贴 10%</p></div>
+            <div class="mini g3"><h4>美妆超级品类日</h4><p>爆款精华买一赠一</p></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="meta">
+    <div class="cell"><h3>优势</h3><ul>
+      <li>首屏营销位最多（1 轮播 + 2 常显），运营位不打架</li>
+      <li>常显活动位不受轮播切换影响，曝光稳定</li>
+    </ul></div>
+    <div class="cell"><h3>代价</h3><ul>
+      <li>与下方 promos 条功能重叠，首屏上下都是瓷贴</li>
+      <li>主 banner 被压到 290，比 C 还矮</li>
+      <li>多一组 mock 数据与组件</li>
+    </ul></div>
+    <div class="cell"><h3>最适合</h3><ul>
+      <li>运营活动密集、常显位需求强的商城</li>
+      <li>愿意牺牲主视觉高度换曝光位</li>
+    </ul></div>
+  </div>
+</section>
+
+<footer class="close">
+  <b>我的建议：维持方案 A。</b>它零新增组件、与参考站一致、banner 面积最大；B/C/D 的额外营销位在当前 mock 阶段没有真实内容支撑，且 B/C/D 都以压缩 banner 为代价，与"优化 banner 轮播"的初衷相悖。
+  如果看完想改方向，告诉我选哪个（或组合，如 A + D 的常显位）；确认后我把最终决策写进 <b>pin-home-category-menu</b> 这个 OpenSpec change。
+</footer>
+
+<script>
+  // Option A flyout interaction
+  document.querySelectorAll('#sideA li[data-fly]').forEach(function (li) {
+    var panel = document.getElementById(li.getAttribute('data-fly'));
+    li.addEventListener('mouseenter', function () { panel.classList.add('show'); });
+    li.addEventListener('mouseleave', function () { panel.classList.remove('show'); });
+    li.addEventListener('focusin', function () { panel.classList.add('show'); });
+    li.addEventListener('focusout', function () { panel.classList.remove('show'); });
+    li.setAttribute('tabindex', '0');
+  });
+</script>
+</body>
+</html>
