diff --git a/web/docs.html b/web/docs.html
index 4277a38..bff373e 100644
--- a/web/docs.html
+++ b/web/docs.html
@@ -3,202 +3,1165 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>文档 — 岩美酒库管理系统</title>
+<title>文档 · 岩美酒库管理系统</title>
 <link rel="stylesheet" href="assets/colors_and_type.css" />
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
 <style>
 * { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans);
+  color: var(--fg-default);
+  background: var(--bg-surface);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "tnum" 1;
+  scroll-behavior: smooth;
+}
+img, svg { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }
-.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
+
+/* ---------------- Buttons (shared) ---------------- */
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  height: 40px; padding: 0 18px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-md); font-weight: 500;
+  border: 1px solid transparent;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
 .btn-primary { background: var(--brand-500); color: #fff; }
 .btn-primary:hover { background: var(--brand-600); }
-.icon { width: 18px; height: 18px; }
+.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
+.btn-secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }
+.btn-ghost { background: transparent; color: var(--fg-default); }
+.btn-ghost:hover { background: var(--gray-100); }
+.btn .icon { width: 18px; height: 18px; }
 
-.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
-.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
-.nav-brand img { height: 30px; }
-.nav-links { display: flex; gap: 2px; }
-.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
-.nav-links a:hover { background: var(--gray-100); }
-.nav-cta { display: flex; gap: 10px; }
+/* ---------------- Top Nav (shared) ---------------- */
+.topnav {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(255,255,255,0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.topnav-inner {
+  height: 64px;
+  display: flex; align-items: center; justify-content: space-between;
+  max-width: 1440px; margin: 0 auto; padding: 0 32px;
+}
+.topnav-brand { display: flex; align-items: center; gap: 10px; }
+.topnav-brand img { height: 32px; }
+.topnav-links { display: flex; align-items: center; gap: 4px; font-size: var(--text-md); color: var(--gray-700); }
+.topnav-links a {
+  padding: 8px 14px;
+  border-radius: var(--radius-md);
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.topnav-links a:hover { background: var(--gray-100); color: var(--brand-900); }
+.topnav-links a.active { color: var(--brand-500); background: var(--brand-50); }
+.topnav-cta { display: flex; gap: 10px; align-items: center; }
 
-.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 64px); }
-.docs-sidebar { border-right: 1px solid var(--border-default); padding: 32px 0; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
-.sidebar-group { margin-bottom: 28px; }
-.sidebar-group-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--fg-subtle); text-transform: uppercase; padding: 0 20px; margin-bottom: 8px; }
-.sidebar-link { display: block; padding: 6px 20px; font-size: 14px; color: var(--gray-700); border-radius: 0; transition: background 100ms; }
-.sidebar-link:hover { background: var(--gray-50); color: var(--brand-900); }
-.sidebar-link.active { color: var(--brand-500); font-weight: 500; background: var(--brand-50); }
+/* nav user dropdown */
+.nav-user { position: relative; }
+.nav-user-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-md); color: var(--gray-800); font-weight: 500; transition: border-color var(--duration-fast) var(--ease-standard); }
+.nav-user-btn:hover { border-color: var(--border-strong); }
+.nav-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-500); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
+.nav-user-btn .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 100; }
+.nav-dropdown.open { display: block; }
+.nav-dropdown a, .nav-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: var(--text-sm); color: var(--gray-800); background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background var(--duration-fast) var(--ease-standard); }
+.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--gray-50); }
+.nav-dropdown .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
+.nav-dropdown .logout { color: var(--danger-600); }
 
-.docs-content { padding: 48px 64px; max-width: 800px; }
-.docs-content h1 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 8px; }
-.docs-content .meta { font-size: 13px; color: var(--fg-muted); margin-bottom: 36px; }
-.docs-content h2 { font-size: 22px; font-weight: 600; color: var(--brand-900); margin: 48px 0 16px; padding-top: 48px; border-top: 1px solid var(--border-subtle); }
-.docs-content h2:first-of-type { border-top: none; }
-.docs-content h3 { font-size: 16px; font-weight: 600; color: var(--gray-800); margin: 28px 0 10px; }
-.docs-content p { font-size: 14px; line-height: 1.75; color: var(--fg-default); margin: 0 0 16px; }
-.docs-content ul, .docs-content ol { padding-left: 20px; margin: 0 0 16px; }
-.docs-content li { font-size: 14px; line-height: 1.75; color: var(--fg-default); margin-bottom: 6px; }
-.docs-content code { font-family: var(--font-mono); font-size: 12px; background: var(--gray-100); padding: 2px 5px; border-radius: 3px; color: var(--brand-700); }
-.tip { background: var(--brand-50); border-left: 3px solid var(--brand-400); border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 20px 0; }
-.tip p { margin: 0; font-size: 13px; color: var(--brand-800); }
-.warn { background: var(--warning-50); border-left: 3px solid var(--warning-500); border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 20px 0; }
-.warn p { margin: 0; font-size: 13px; color: var(--warning-700); }
-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
-th { background: var(--gray-50); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--gray-700); border: 1px solid var(--border-default); }
-td { padding: 8px 12px; border: 1px solid var(--border-default); color: var(--fg-default); vertical-align: top; }
+/* ====================================================================
+   DOCS SUB-HEADER
+   ==================================================================== */
+.docs-subnav {
+  background: var(--gray-25);
+  border-bottom: 1px solid var(--border-subtle);
+  position: sticky;
+  top: 64px;
+  z-index: 40;
+}
+.docs-subnav-inner {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 12px 32px;
+  display: flex; align-items: center; gap: 24px;
+}
+.breadcrumb {
+  display: flex; align-items: center; gap: 8px;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+.breadcrumb .sep { color: var(--gray-300); }
+.breadcrumb a { color: var(--fg-muted); }
+.breadcrumb a:hover { color: var(--brand-500); }
+.breadcrumb .current { color: var(--gray-900); font-weight: 500; }
 
-footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
-.footer-inner { display: flex; align-items: center; justify-content: space-between; }
-.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
-.footer-brand img { height: 24px; }
-.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+.docs-search {
+  flex: 1; max-width: 480px;
+  position: relative;
+}
+.docs-search input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px 0 38px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--gray-0);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  color: var(--gray-800);
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease-standard),
+              box-shadow var(--duration-fast) var(--ease-standard);
+}
+.docs-search input:focus { border-color: var(--brand-500); box-shadow: var(--ring-focus); }
+.docs-search input::placeholder { color: var(--fg-subtle); }
+.docs-search .search-icon {
+  position: absolute;
+  left: 12px; top: 50%;
+  transform: translateY(-50%);
+  width: 16px; height: 16px;
+  color: var(--fg-subtle);
+}
+.docs-search .kbd {
+  position: absolute;
+  right: 8px; top: 50%;
+  transform: translateY(-50%);
+  background: var(--gray-100);
+  border: 1px solid var(--border-default);
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 11px;
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+}
+
+.docs-version {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: 6px 12px;
+  font-size: var(--text-sm);
+  color: var(--gray-700);
+}
+.docs-version .icon { width: 14px; height: 14px; }
+.docs-version-label { color: var(--fg-subtle); font-size: var(--text-xs); }
+
+/* ====================================================================
+   DOCS LAYOUT
+   ==================================================================== */
+.docs-layout {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 32px;
+  display: grid;
+  grid-template-columns: 240px 1fr 240px;
+  gap: 48px;
+  align-items: start;
+}
+
+/* Left TOC */
+.docs-toc {
+  position: sticky;
+  top: 132px;
+  max-height: calc(100vh - 152px);
+  overflow-y: auto;
+  font-size: var(--text-sm);
+}
+.toc-section {
+  margin-bottom: 18px;
+}
+.toc-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--fg-subtle);
+  text-transform: uppercase;
+  margin: 0 0 10px;
+  padding-left: 12px;
+}
+.toc-link {
+  display: flex; align-items: center; gap: 10px;
+  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--gray-700);
+  font-weight: 400;
+  transition: background var(--duration-fast) var(--ease-standard),
+              color var(--duration-fast) var(--ease-standard);
+}
+.toc-link:hover { background: var(--gray-100); color: var(--brand-900); }
+.toc-link .toc-num {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--fg-subtle);
+  min-width: 16px;
+  font-weight: 500;
+}
+.toc-link.active {
+  background: var(--brand-50);
+  color: var(--brand-700);
+  font-weight: 500;
+}
+.toc-link.active .toc-num { color: var(--brand-500); }
+.toc-sub {
+  margin: 4px 0 4px 28px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border-subtle);
+  display: flex; flex-direction: column;
+  gap: 1px;
+}
+.toc-sub a {
+  display: block;
+  padding: 5px 10px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+.toc-sub a:hover { color: var(--brand-700); background: var(--gray-50); }
+.toc-sub a.active {
+  color: var(--brand-700);
+  font-weight: 500;
+  border-left: 2px solid var(--brand-500);
+  margin-left: -14px;
+  padding-left: 12px;
+  border-radius: 0;
+}
+
+/* ====================================================================
+   MAIN CONTENT
+   ==================================================================== */
+.docs-main { min-width: 0; max-width: 760px; }
+.docs-main h1 {
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900);
+  margin: 0 0 12px;
+  line-height: 1.2;
+}
+.docs-main .doc-section-num {
+  font-family: var(--font-mono);
+  font-size: var(--text-md);
+  font-weight: 500;
+  color: var(--brand-500);
+  margin-bottom: 8px;
+  letter-spacing: 0.04em;
+}
+.docs-main .lead {
+  font-size: var(--text-lg);
+  color: var(--gray-600);
+  line-height: 1.65;
+  margin: 0 0 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.docs-main h2 {
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--brand-900);
+  margin: 56px 0 16px;
+  letter-spacing: 0.02em;
+  scroll-margin-top: 132px;
+  display: flex; align-items: center; gap: 12px;
+}
+.docs-main h2 .anchor {
+  font-family: var(--font-mono);
+  font-size: var(--text-md);
+  font-weight: 500;
+  color: var(--brand-500);
+}
+.docs-main h2:first-of-type { margin-top: 0; }
+.docs-main h3 {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--gray-900);
+  margin: 36px 0 12px;
+}
+.docs-main p {
+  font-size: var(--text-md);
+  color: var(--gray-700);
+  line-height: 1.75;
+  margin: 0 0 16px;
+}
+.docs-main strong { color: var(--brand-900); font-weight: 600; }
+.docs-main em { color: var(--brand-700); font-style: normal; font-weight: 500; }
+.docs-main code {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+  background: var(--gray-100);
+  color: var(--brand-700);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+}
+.docs-main a {
+  color: var(--brand-500);
+  font-weight: 500;
+  border-bottom: 1px solid var(--brand-200);
+}
+.docs-main a:hover { color: var(--brand-700); border-color: var(--brand-500); }
+
+.docs-main ol, .docs-main ul {
+  margin: 0 0 16px;
+  padding-left: 24px;
+}
+.docs-main li {
+  font-size: var(--text-md);
+  color: var(--gray-700);
+  line-height: 1.75;
+  margin-bottom: 6px;
+}
+.docs-main ol li::marker {
+  color: var(--brand-500);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Callouts */
+.callout {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 14px;
+  padding: 16px 20px;
+  border-radius: var(--radius-md);
+  margin: 24px 0;
+  border-left: 3px solid;
+}
+.callout .icon { width: 20px; height: 20px; margin-top: 2px; }
+.callout-title {
+  font-weight: 600;
+  font-size: var(--text-sm);
+  margin-bottom: 4px;
+  letter-spacing: 0.02em;
+}
+.callout p { font-size: var(--text-sm); color: var(--gray-700); margin: 0; line-height: 1.6; }
+.callout.info { background: var(--info-50); border-color: var(--info-500); }
+.callout.info .icon, .callout.info .callout-title { color: var(--info-700); }
+.callout.warning { background: var(--warning-50); border-color: var(--warning-500); }
+.callout.warning .icon, .callout.warning .callout-title { color: var(--warning-700); }
+.callout.danger { background: var(--danger-50); border-color: var(--danger-500); }
+.callout.danger .icon, .callout.danger .callout-title { color: var(--danger-700); }
+.callout.success { background: var(--success-50); border-color: var(--success-500); }
+.callout.success .icon, .callout.success .callout-title { color: var(--success-700); }
+
+/* Code block */
+.code-block {
+  background: var(--gray-900);
+  color: #DCE2EB;
+  padding: 18px 20px;
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: 1.7;
+  margin: 16px 0 24px;
+  overflow-x: auto;
+  position: relative;
+  white-space: pre;
+}
+.code-block .copy {
+  position: absolute;
+  top: 12px; right: 12px;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.10);
+  color: #ADC9EA;
+  border-radius: var(--radius-sm);
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+}
+.code-block .copy:hover { background: rgba(255,255,255,0.12); color: #fff; }
+
+/* Tables */
+.docs-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0 24px;
+  font-size: var(--text-sm);
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.docs-table th, .docs-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid var(--border-subtle);
+  line-height: 1.55;
+}
+.docs-table thead th {
+  background: var(--gray-50);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--gray-700);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--border-default);
+}
+.docs-table tbody tr:last-child td { border-bottom: none; }
+.docs-table tbody tr:hover { background: var(--gray-25); }
+.docs-table td code { font-size: 12px; }
+.docs-table .status-pill {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: 500;
+}
+.docs-table .status-pill.draft { background: var(--gray-100); color: var(--gray-700); }
+.docs-table .status-pill.pending { background: var(--info-50); color: var(--info-700); }
+.docs-table .status-pill.approved { background: var(--success-50); color: var(--success-700); }
+.docs-table .status-pill.rejected { background: var(--danger-50); color: var(--danger-700); }
+
+/* Status flow visual */
+.status-flow {
+  background: var(--gray-25);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: 24px 20px;
+  margin: 16px 0 24px;
+  overflow-x: auto;
+}
+.status-flow-track {
+  display: flex; align-items: center; gap: 0;
+  min-width: max-content;
+  justify-content: center;
+}
+.flow-node {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 6px;
+  padding: 0 4px;
+}
+.flow-node .badge {
+  padding: 6px 14px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--gray-800);
+}
+.flow-node.draft .badge { color: var(--gray-700); }
+.flow-node.pending .badge { background: var(--info-50); border-color: var(--info-500); color: var(--info-700); }
+.flow-node.approved .badge { background: var(--success-50); border-color: var(--success-500); color: var(--success-700); font-weight: 600; }
+.flow-node.rejected .badge { background: var(--danger-50); border-color: var(--danger-500); color: var(--danger-700); }
+.flow-node small { font-size: 11px; color: var(--fg-subtle); }
+
+.flow-arrow {
+  color: var(--gray-300);
+  padding: 0 8px;
+  display: flex; align-items: center;
+}
+.flow-arrow .icon { width: 18px; height: 18px; }
+.flow-arrow.fork {
+  flex-direction: column;
+  align-items: center;
+  padding: 0 12px;
+  position: relative;
+}
+.flow-fork-wrap { display: flex; flex-direction: column; gap: 12px; }
+
+/* Steps list */
+.steps {
+  counter-reset: step;
+  list-style: none;
+  padding: 0;
+  margin: 16px 0 24px;
+}
+.steps li {
+  counter-increment: step;
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  gap: 16px;
+  margin-bottom: 14px;
+  align-items: flex-start;
+}
+.steps li::before {
+  content: counter(step);
+  width: 28px; height: 28px;
+  background: var(--brand-50);
+  color: var(--brand-700);
+  border-radius: 50%;
+  display: grid; place-items: center;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  margin-top: 1px;
+}
+.steps li > div { font-size: var(--text-md); color: var(--gray-700); line-height: 1.7; }
+.steps li strong { color: var(--brand-900); font-weight: 600; }
+
+/* Field reference list */
+.field-list {
+  background: var(--gray-25);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: 4px 0;
+  margin: 16px 0 24px;
+}
+.field-row {
+  display: grid;
+  grid-template-columns: 120px 80px 1fr;
+  gap: 16px;
+  padding: 10px 20px;
+  align-items: baseline;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.field-row:last-child { border-bottom: none; }
+.field-name { font-family: var(--font-mono); font-size: 13px; color: var(--brand-700); font-weight: 500; }
+.field-required {
+  display: inline-block;
+  font-size: 10px;
+  background: var(--danger-50);
+  color: var(--danger-700);
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+  font-weight: 500;
+  text-align: center;
+}
+.field-required.optional { background: var(--gray-100); color: var(--gray-700); }
+.field-desc { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.55; }
+
+/* Section divider with anchor */
+.section-anchor {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--fg-subtle); margin-left: 8px;
+  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
+}
+.docs-main h2:hover .section-anchor, .docs-main h3:hover .section-anchor { opacity: 1; }
+
+/* Prev/Next nav */
+.docs-pager {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 64px;
+  padding-top: 32px;
+  border-top: 1px solid var(--border-subtle);
+}
+.pager-link {
+  display: flex; flex-direction: column;
+  padding: 18px 22px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  transition: border-color var(--duration-base) var(--ease-standard),
+              box-shadow var(--duration-base) var(--ease-standard);
+}
+.pager-link:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
+.pager-label {
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  display: flex; align-items: center; gap: 6px;
+  margin-bottom: 6px;
+}
+.pager-label .icon { width: 14px; height: 14px; }
+.pager-title { font-size: var(--text-md); font-weight: 600; color: var(--brand-900); }
+.pager-link.next { text-align: right; }
+.pager-link.next .pager-label { justify-content: flex-end; }
+
+/* Feedback widget */
+.docs-feedback {
+  margin-top: 40px;
+  padding: 24px;
+  background: var(--gray-25);
+  border-radius: var(--radius-lg);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.feedback-q { font-size: var(--text-md); color: var(--gray-800); }
+.feedback-actions { display: flex; gap: 8px; }
+.feedback-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: 6px 14px;
+  font-size: var(--text-sm);
+  color: var(--gray-700);
+}
+.feedback-btn:hover { border-color: var(--brand-500); color: var(--brand-700); }
+.feedback-btn .icon { width: 14px; height: 14px; }
+
+/* ====================================================================
+   RIGHT RAIL — On this page
+   ==================================================================== */
+.docs-rail {
+  position: sticky;
+  top: 132px;
+  font-size: var(--text-sm);
+}
+.rail-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--fg-subtle);
+  text-transform: uppercase;
+  margin: 0 0 12px;
+}
+.rail-list { display: flex; flex-direction: column; gap: 2px; }
+.rail-list a {
+  padding: 5px 10px;
+  border-radius: var(--radius-sm);
+  color: var(--fg-muted);
+  font-size: 13px;
+  border-left: 2px solid transparent;
+}
+.rail-list a:hover { color: var(--brand-700); }
+.rail-list a.active {
+  color: var(--brand-700);
+  border-left-color: var(--brand-500);
+  font-weight: 500;
+}
+.rail-actions {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-subtle);
+  display: flex; flex-direction: column; gap: 6px;
+}
+.rail-action {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--fg-muted);
+  border-radius: var(--radius-sm);
+}
+.rail-action:hover { background: var(--gray-50); color: var(--brand-700); }
+.rail-action .icon { width: 14px; height: 14px; }
+
+/* ====================================================================
+   FOOTER (shared)
+   ==================================================================== */
+footer {
+  background: var(--gray-25);
+  border-top: 1px solid var(--border-subtle);
+  padding: 64px 0 32px;
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  margin-top: 96px;
+}
+.footer-grid {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(4, 1fr);
+  gap: 48px;
+  margin-bottom: 48px;
+  max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 32px;
+}
+.footer-brand img { height: 32px; margin-bottom: 16px; }
+.footer-brand p { margin: 0 0 16px; max-width: 320px; line-height: 1.6; color: var(--fg-muted); }
+.footer-contact { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.8; }
+.footer-col h5 {
+  font-size: var(--text-xs); font-weight: 600;
+  color: var(--brand-900); letter-spacing: 0.06em;
+  margin: 0 0 16px; text-transform: uppercase;
+}
+.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
+.footer-col li a { color: var(--gray-600); }
+.footer-col li a:hover { color: var(--brand-500); }
+.footer-bottom {
+  border-top: 1px solid var(--border-subtle);
+  padding: 24px 32px 0;
+  display: flex; justify-content: space-between;
+  font-size: var(--text-xs);
+  color: var(--fg-subtle);
+  max-width: 1280px; margin: 0 auto;
+}
+
+@media (max-width: 1200px) {
+  .docs-layout { grid-template-columns: 220px 1fr; gap: 32px; }
+  .docs-rail { display: none; }
+}
+@media (max-width: 880px) {
+  .docs-layout { grid-template-columns: 1fr; gap: 24px; padding: 16px; }
+  .docs-toc { position: static; max-height: none; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+}
 </style>
 </head>
 <body>
 
-<nav class="nav">
-  <div class="nav-inner">
-    <a href="/" class="nav-brand"><img src="assets/logo-full.svg" alt="岩美" /></a>
-    <div class="nav-links">
-      <a href="/features/inventory.html">功能</a>
-      <a href="/docs.html">文档</a>
+<!-- =========================== TOP NAV =========================== -->
+<nav class="topnav">
+  <div class="topnav-inner">
+    <a href="/" class="topnav-brand">
+      <img src="assets/logo-full.svg" alt="岩美" />
+    </a>
+    <div class="topnav-links">
+      <a href="/#modules">产品</a>
+      <a href="/#pricing">价格</a>
       <a href="/download.html">下载</a>
+      <a href="/docs.html" class="active">文档</a>
+      <a href="/#faq">支持</a>
     </div>
-    <div class="nav-cta">
-      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
-    </div>
+    <div class="topnav-cta" id="nav-cta"></div>
   </div>
 </nav>
 
+<!-- =========================== DOCS SUB-NAV =========================== -->
+<div class="docs-subnav">
+  <div class="docs-subnav-inner">
+    <div class="breadcrumb">
+      <a href="/docs.html">用户手册</a>
+      <span class="sep">/</span>
+      <a href="#">业务操作</a>
+      <span class="sep">/</span>
+      <span class="current">入库管理</span>
+    </div>
+    <div class="docs-search">
+      <i data-lucide="search" class="icon search-icon"></i>
+      <input type="text" placeholder="搜索文档（如：盘点、审核、API）" />
+      <span class="kbd">⌘ K</span>
+    </div>
+    <div class="docs-version">
+      <i data-lucide="book-open" class="icon"></i>
+      <span class="docs-version-label">手册版本</span>
+      <strong>v1.6.2</strong>
+      <i data-lucide="chevron-down" class="icon"></i>
+    </div>
+  </div>
+</div>
+
+<!-- =========================== DOCS LAYOUT =========================== -->
 <div class="docs-layout">
-  <aside class="docs-sidebar">
-    <div class="sidebar-group">
-      <div class="sidebar-group-title">快速开始</div>
-      <a href="#intro" class="sidebar-link active">系统介绍</a>
-      <a href="#login" class="sidebar-link">登录与权限</a>
-      <a href="#roles" class="sidebar-link">角色说明</a>
+
+  <!-- ============ LEFT TOC ============ -->
+  <aside class="docs-toc">
+    <div class="toc-section">
+      <h6 class="toc-section-title">快速开始</h6>
+      <a href="#" class="toc-link"><span class="toc-num">01</span>系统概述</a>
+      <a href="#" class="toc-link"><span class="toc-num">02</span>登录与退出</a>
+      <a href="#" class="toc-link"><span class="toc-num">03</span>界面说明</a>
+      <a href="#" class="toc-link"><span class="toc-num">04</span>角色与权限</a>
     </div>
-    <div class="sidebar-group">
-      <div class="sidebar-group-title">核心模块</div>
-      <a href="#stock-in" class="sidebar-link">入库管理</a>
-      <a href="#stock-out" class="sidebar-link">出库管理</a>
-      <a href="#inventory" class="sidebar-link">库存管理</a>
-      <a href="#finance" class="sidebar-link">财务管理</a>
-      <a href="#products" class="sidebar-link">基础数据</a>
+
+    <div class="toc-section">
+      <h6 class="toc-section-title">业务操作</h6>
+      <a href="#" class="toc-link active"><span class="toc-num">05</span>入库管理</a>
+      <div class="toc-sub">
+        <a href="#status">5.1 状态说明</a>
+        <a href="#create" class="active">5.2 新建入库单</a>
+        <a href="#submit">5.3 提交审核</a>
+        <a href="#approve">5.4 审批入库单</a>
+        <a href="#detail">5.5 查看详情</a>
+        <a href="#print">5.6 打印单据</a>
+        <a href="#labels">5.7 商品标签</a>
+        <a href="#settle">5.8 结清账款</a>
+        <a href="#filter">5.9 筛选与导出</a>
+      </div>
+      <a href="#" class="toc-link"><span class="toc-num">06</span>出库管理</a>
+      <a href="#" class="toc-link"><span class="toc-num">07</span>库存管理</a>
+      <a href="#" class="toc-link"><span class="toc-num">08</span>财务管理</a>
+      <a href="#" class="toc-link"><span class="toc-num">09</span>往来单位</a>
     </div>
-    <div class="sidebar-group">
-      <div class="sidebar-group-title">其他功能</div>
-      <a href="#scan" class="sidebar-link">防伪溯源</a>
-      <a href="#settings" class="sidebar-link">系统设置</a>
+
+    <div class="toc-section">
+      <h6 class="toc-section-title">基础与设置</h6>
+      <a href="#" class="toc-link"><span class="toc-num">10</span>基础数据</a>
+      <a href="#" class="toc-link"><span class="toc-num">11</span>系统设置</a>
+      <a href="#" class="toc-link"><span class="toc-num">12</span>常见问题</a>
     </div>
   </aside>
 
-  <main class="docs-content">
-    <h1>使用手册</h1>
-    <p class="meta">适用版本：v1.x · 更新于 2025 年</p>
+  <!-- ============ MAIN CONTENT ============ -->
+  <main class="docs-main">
+    <div class="doc-section-num">第 5 章</div>
+    <h1>入库管理</h1>
+    <p class="lead">
+      入库管理是货物进入门店的起点。本章介绍如何录入入库单、提交审核、审批通过自动更新库存与应付账款的完整流程。所有入库操作均需<strong>审核驱动</strong>，单据状态不可跳过、不可撤销。
+    </p>
 
-    <h2 id="intro">系统介绍</h2>
-    <p>岩美酒库管理系统是专为酒行、酒店 F&B 部门设计的一体化库存管理平台。系统涵盖入库、出库、库存盘点、财务对账、往来单位管理以及商品防伪溯源等核心功能。</p>
-    <p>系统采用多租户架构，每个门店（<code>shop</code>）的数据完全隔离，支持 Web 端与桌面端（macOS / Windows）同时使用。</p>
+    <h2 id="status"><span class="anchor">5.1</span> 入库单状态说明</h2>
+    <p>每张入库单都在一个固定的状态流中流转。状态变化由系统记录，不可手动跳过。</p>
 
-    <div class="tip"><p><strong>提示：</strong>如果是初次使用，请让管理员先创建您的账号，然后使用门店编号 + 用户名 + 密码登录。</p></div>
+    <div class="status-flow">
+      <div class="status-flow-track">
+        <div class="flow-node draft">
+          <div class="badge">草稿</div>
+          <small>可编辑</small>
+        </div>
+        <div class="flow-arrow"><i data-lucide="arrow-right" class="icon"></i></div>
+        <div class="flow-node pending">
+          <div class="badge">待审核</div>
+          <small>已锁定</small>
+        </div>
+        <div class="flow-arrow"><i data-lucide="arrow-right" class="icon"></i></div>
+        <div class="flow-fork-wrap">
+          <div class="flow-node approved">
+            <div class="badge"><i data-lucide="check" class="icon" style="width:14px;height:14px;display:inline-block;vertical-align:middle;margin-right:4px;"></i>已审批</div>
+            <small>库存 +N · 应付生成</small>
+          </div>
+          <div class="flow-node rejected">
+            <div class="badge">已拒绝</div>
+            <small>库存不变</small>
+          </div>
+        </div>
+      </div>
+    </div>
 
-    <h2 id="login">登录与权限</h2>
-    <h3>登录方式</h3>
-    <p>在登录页输入：</p>
-    <ul>
-      <li><strong>门店编号</strong>（由管理员提供，如 <code>S001</code>）</li>
-      <li><strong>用户名</strong></li>
-      <li><strong>密码</strong></li>
-    </ul>
-    <p>登录成功后，系统会保存 Token，关闭浏览器后再次打开无需重新登录（Token 有效期 7 天）。</p>
-
-    <h2 id="roles">角色说明</h2>
-    <table>
-      <thead><tr><th>角色</th><th>权限范围</th></tr></thead>
+    <table class="docs-table">
+      <thead>
+        <tr><th>状态</th><th>含义</th><th>可执行操作</th></tr>
+      </thead>
       <tbody>
-        <tr><td>管理员 (admin)</td><td>所有功能，包括用户管理、审批、系统设置</td></tr>
-        <tr><td>普通用户 (user)</td><td>创建/编辑单据，无法审批，无系统设置权限</td></tr>
-        <tr><td>只读用户 (readonly)</td><td>仅查看，不可创建或修改任何数据</td></tr>
+        <tr>
+          <td><span class="status-pill draft">草稿</span></td>
+          <td>已保存但未提交</td>
+          <td>编辑、删除、提交审核</td>
+        </tr>
+        <tr>
+          <td><span class="status-pill pending">待审核</span></td>
+          <td>已提交等待审批，不可再编辑</td>
+          <td>审批通过、审批拒绝</td>
+        </tr>
+        <tr>
+          <td><span class="status-pill approved">已审批</span></td>
+          <td>库存已增加，并生成应付账款</td>
+          <td>查看详情、打印、打标签、结清</td>
+        </tr>
+        <tr>
+          <td><span class="status-pill rejected">已拒绝</span></td>
+          <td>审批不通过，库存与账款不变</td>
+          <td>查看详情</td>
+        </tr>
       </tbody>
     </table>
-    <div class="warn"><p><strong>注意：</strong>只读用户尝试任何写操作时，系统将返回 403 拒绝提示。</p></div>
 
-    <h2 id="stock-in">入库管理</h2>
-    <h3>创建入库单</h3>
-    <ol>
-      <li>点击左侧「入库管理」，然后点击「新建入库单」</li>
-      <li>选择仓库、供应商（往来单位），填写入库日期</li>
-      <li>逐行添加商品，填写数量、单价、批次号、生产日期</li>
-      <li>保存为「草稿」或直接「提交审核」</li>
+    <div class="callout warning">
+      <i data-lucide="alert-triangle" class="icon"></i>
+      <div>
+        <div class="callout-title">审批通过不可撤销</div>
+        <p>「已审批」状态的单据无法回退到「草稿」或「待审核」。如发现错误，请由具备权限的用户新建反向调整单据（红冲入库）进行修正，以保留完整审计链。</p>
+      </div>
+    </div>
+
+    <h2 id="create"><span class="anchor">5.2</span> 新建入库单</h2>
+    <p>新建入库单的入口在<strong>「入库管理 → 入库审核」</strong>标签页，点击右上角<code>新建入库审核单</code>按钮即可打开录入面板。</p>
+
+    <ol class="steps">
+      <li><div>点击左侧「入库管理」，切换到 <strong>入库审核</strong> 标签页。</div></li>
+      <li><div>点击右上角 <strong>新建入库审核单</strong> 按钮，弹出录入面板。</div></li>
+      <li><div>填写<strong>表头信息</strong>（见下方字段说明）。</div></li>
+      <li><div>在商品明细区逐行录入商品。点击 <code>添加商品</code> 增加新行，行末 <code>删除</code> 移除。</div></li>
+      <li><div>完成后可<strong>保存草稿</strong>（继续修改）或<strong>保存并提交审核</strong>（进入待审核）。</div></li>
     </ol>
-    <h3>审批入库</h3>
-    <p>状态为「待审核」的入库单，管理员可在列表中点击「审核通过」。审核通过后库存自动增加，且操作不可逆。</p>
 
-    <h2 id="stock-out">出库管理</h2>
-    <p>出库流程与入库类似：创建出库单 → 选择仓库和商品 → 提交审核 → 管理员审批。</p>
-    <p>系统在审批出库时会自动校验库存充足性，如果库存不足，审批将失败并给出提示。</p>
-    <table>
-      <thead><tr><th>出库类型</th><th>说明</th></tr></thead>
-      <tbody>
-        <tr><td>销售</td><td>对外销售，关联往来单位（客户）</td></tr>
-        <tr><td>领用</td><td>内部消耗，无对外客户</td></tr>
-        <tr><td>损耗</td><td>破损/过期等非正常消耗</td></tr>
-      </tbody>
-    </table>
+    <h3>表头字段</h3>
+    <div class="field-list">
+      <div class="field-row">
+        <span class="field-name">仓库</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">货物入库的目标仓库。系统默认选中设置中的「默认仓库」。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">供应商</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">供货的往来单位。需提前在「往来单位 → 供应商」中维护。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">入库日期</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">默认为当天，可修改为历史日期（不能晚于今天）。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">备注</span>
+        <span class="field-required optional">选填</span>
+        <span class="field-desc">本批次入库的说明，最多 200 字符。</span>
+      </div>
+    </div>
 
-    <h2 id="inventory">库存管理</h2>
-    <p>库存列表按批次展示，每次入库产生一条库存记录。支持按商品名称、仓库、供应商筛选，并可导出 Excel。</p>
-    <h3>批次追溯</h3>
-    <p>每条库存记录保留了入库批次号、生产日期、供应商等信息，可完整追溯商品来源。</p>
+    <h3>商品明细字段</h3>
+    <div class="field-list">
+      <div class="field-row">
+        <span class="field-name">商品名称</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">从「基础数据 → 商品名称」字典中选择，支持模糊搜索。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">系列</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">商品所属的系列或品牌线，如「飞天系列」。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">规格</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">包装规格，如 <code>500ml×6</code>。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">生产日期</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">点击日历图标选择，用于批次追溯与过期预警。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">批次号</span>
+        <span class="field-required optional">选填</span>
+        <span class="field-desc">用于后续追踪、出库时按批次先进先出。</span>
+      </div>
+      <div class="field-row">
+        <span class="field-name">数量 · 单价</span>
+        <span class="field-required">必填</span>
+        <span class="field-desc">入库数量与进货单价，系统自动计算金额 = 数量 × 单价。</span>
+      </div>
+    </div>
 
-    <h2 id="finance">财务管理</h2>
-    <p>财务模块记录与入库/出库单据关联的应收应付账款。支持按往来单位、日期区间、状态（已收/待收）筛选，并可导出汇总报表。</p>
+    <div class="callout info">
+      <i data-lucide="info" class="icon"></i>
+      <div>
+        <div class="callout-title">小技巧：复制上一行</div>
+        <p>从 v1.6.2 起，明细行右侧出现 <code>复制</code> 按钮，可快速复制上一行的商品 / 规格 / 单价，连续录入同系列商品更快。</p>
+      </div>
+    </div>
 
-    <h2 id="products">基础数据</h2>
-    <p>基础数据包含：</p>
+    <h2 id="approve"><span class="anchor">5.4</span> 审批入库单</h2>
+    <p>具有<strong>操作员</strong>及以上权限的用户均可审批。审批通过后，系统会自动完成两件事：</p>
+    <ol>
+      <li>将所有商品按数量加入对应仓库的库存；</li>
+      <li>按供应商生成一笔<strong>应付账款</strong>，金额等于入库单合计。</li>
+    </ol>
+
+    <h3>审批接口示例</h3>
+    <p>若需通过 API 触发审批，使用如下请求：</p>
+    <div class="code-block"><button class="copy">复制</button>POST /api/v1/stockin/{id}/approve
+Content-Type: application/json
+Authorization: Bearer {token}
+
+{
+  "decision": "approve",         // approve | reject
+  "operator": "李建国",
+  "remark": "已核对数量与单价"
+}</div>
+
+    <p>审批成功后返回：</p>
+    <div class="code-block"><button class="copy">复制</button>{
+  "ok": true,
+  "stockin_no": "RK20260523000007",
+  "status": "approved",
+  "effects": {
+    "inventory_delta": 36,
+    "payable_id": "AP20260523000012",
+    "payable_amount": 48400.00
+  }
+}</div>
+
+    <div class="callout danger">
+      <i data-lucide="shield-alert" class="icon"></i>
+      <div>
+        <div class="callout-title">审批前请核对数量与单价</div>
+        <p>审批一旦通过即不可撤销，库存与应付账款将立即变动。如确实需要修正，唯一的合法路径是新建反向调整单（红冲入库），原始单据将完整保留以供审计。</p>
+      </div>
+    </div>
+
+    <h2 id="labels"><span class="anchor">5.7</span> 打印商品标签</h2>
+    <p>审批通过的入库单，可批量打印商品标签。标签内容包括：</p>
     <ul>
-      <li><strong>商品管理</strong>：SKU 信息、规格、品牌、系列、单位，以及商品图片上传</li>
-      <li><strong>仓库管理</strong>：门店下可配置多个仓库</li>
-      <li><strong>往来单位</strong>：供应商与客户统一管理</li>
-      <li><strong>编号规则</strong>：自定义入库单/出库单号前缀和格式</li>
+      <li>商品名称、编码、系列、规格</li>
+      <li>批次号、生产日期</li>
+      <li>酒行名称、地址、联系电话</li>
+      <li>商品二维码（扫码可访问公开信息页）</li>
     </ul>
 
-    <h2 id="scan">防伪溯源</h2>
-    <p>为每件商品生成唯一防伪码（<code>public_id</code>），打印贴附于商品。消费者扫描二维码后跳转至 <code>jiu.51yanmei.com/scan/&lt;id&gt;</code>，可查看：</p>
-    <ul>
-      <li>商品基本信息（名称、品牌、规格）</li>
-      <li>批次信息（生产日期、批次号、入库日期）</li>
-      <li>出售门店信息</li>
-      <li>岩美防伪验证标记</li>
-    </ul>
+    <p>操作步骤：</p>
+    <ol class="steps">
+      <li><div>在入库单列表中找到对应行，点击 <code>打标签</code> 按钮。</div></li>
+      <li><div>弹出对话框列出本次入库的所有商品，默认全部勾选。</div></li>
+      <li><div>勾选需打印的商品（可批量取消），点击 <strong>打印选中</strong>。</div></li>
+      <li><div>系统依次将每张标签发送给已连接的标签打印机。</div></li>
+    </ol>
 
-    <h2 id="settings">系统设置</h2>
-    <p>系统设置仅管理员可见，包括：</p>
-    <ul>
-      <li>用户管理：创建/删除用户，重置密码，调整角色</li>
-      <li>门店信息：更新门店名称、地址、电话等公开信息</li>
-      <li>数据导入：批量导入商品、历史库存数据（Excel 格式）</li>
-    </ul>
+    <div class="callout success">
+      <i data-lucide="check-circle" class="icon"></i>
+      <div>
+        <div class="callout-title">支持的标签打印机</div>
+        <p>已验证支持佳博 GP-1124T、芯烨 XP-365B、汉印 N31。蓝牙打印机需先在系统设置 → 外设管理中配对。完整型号见 <a href="#">硬件支持文档</a>。</p>
+      </div>
+    </div>
+
+    <!-- Prev / Next pager -->
+    <div class="docs-pager">
+      <a href="#" class="pager-link">
+        <div class="pager-label"><i data-lucide="arrow-left" class="icon"></i>上一章</div>
+        <div class="pager-title">04 · 角色与权限</div>
+      </a>
+      <a href="#" class="pager-link next">
+        <div class="pager-label">下一章<i data-lucide="arrow-right" class="icon"></i></div>
+        <div class="pager-title">06 · 出库管理</div>
+      </a>
+    </div>
+
+    <!-- Feedback -->
+    <div class="docs-feedback">
+      <div class="feedback-q">这一节对你有帮助吗？</div>
+      <div class="feedback-actions">
+        <button class="feedback-btn">
+          <i data-lucide="thumbs-up" class="icon"></i>有帮助
+        </button>
+        <button class="feedback-btn">
+          <i data-lucide="thumbs-down" class="icon"></i>需要改进
+        </button>
+        <button class="feedback-btn">
+          <i data-lucide="message-square" class="icon"></i>留言反馈
+        </button>
+      </div>
+    </div>
   </main>
+
+  <!-- ============ RIGHT RAIL ============ -->
+  <aside class="docs-rail">
+    <h6 class="rail-title">本节内容</h6>
+    <div class="rail-list">
+      <a href="#status">5.1 状态说明</a>
+      <a href="#create" class="active">5.2 新建入库单</a>
+      <a href="#submit">5.3 提交审核</a>
+      <a href="#approve">5.4 审批入库单</a>
+      <a href="#detail">5.5 查看详情</a>
+      <a href="#print">5.6 打印单据</a>
+      <a href="#labels">5.7 商品标签</a>
+      <a href="#settle">5.8 结清账款</a>
+      <a href="#filter">5.9 筛选与导出</a>
+    </div>
+    <div class="rail-actions">
+      <a href="#" class="rail-action">
+        <i data-lucide="github" class="icon"></i>在 GitHub 上编辑
+      </a>
+      <a href="#" class="rail-action">
+        <i data-lucide="printer" class="icon"></i>打印本节
+      </a>
+      <a href="#" class="rail-action">
+        <i data-lucide="file-down" class="icon"></i>下载 PDF
+      </a>
+      <a href="#" class="rail-action">
+        <i data-lucide="link" class="icon"></i>复制链接
+      </a>
+    </div>
+  </aside>
 </div>
 
+<!-- =========================== FOOTER =========================== -->
 <footer>
-  <div class="container">
-    <div class="footer-inner">
-      <div class="footer-brand"><img src="assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
-      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+  <div class="footer-grid">
+    <div class="footer-brand">
+      <img src="assets/logo-full.svg" alt="岩美" />
+      <p>为酒行与酒店设计的库存、审核、财务一体化管理平台。</p>
+      <div class="footer-contact">
+        <div>support@yanmei.app</div>
+        <div>400-880-8888</div>
+      </div>
     </div>
+    <div class="footer-col">
+      <h5>产品</h5>
+      <ul>
+        <li><a href="/#modules">核心模块</a></li>
+        <li><a href="/#platforms">多端覆盖</a></li>
+        <li><a href="/#reports">数据洞察</a></li>
+        <li><a href="/#pricing">价格方案</a></li>
+        <li><a href="/download.html">下载客户端</a></li>
+      </ul>
+    </div>
+    <div class="footer-col">
+      <h5>资源</h5>
+      <ul>
+        <li><a href="/docs.html">使用手册</a></li>
+        <li><a href="#">API 文档</a></li>
+        <li><a href="#">视频教程</a></li>
+        <li><a href="#">数据导入模板</a></li>
+      </ul>
+    </div>
+    <div class="footer-col">
+      <h5>客户支持</h5>
+      <ul>
+        <li><a href="/#faq">常见问题</a></li>
+        <li><a href="#">提交工单</a></li>
+        <li><a href="#">技术支持</a></li>
+        <li><a href="#">服务等级</a></li>
+      </ul>
+    </div>
+    <div class="footer-col">
+      <h5>公司</h5>
+      <ul>
+        <li><a href="#">关于岩美</a></li>
+        <li><a href="#">客户案例</a></li>
+        <li><a href="#">招贤纳士</a></li>
+        <li><a href="#">联系我们</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <div>© 2026 岩美科技 · 保留所有权利</div>
+    <div>沪 ICP 备 2026000000 号 · 沪公网安备 31010000000000 号</div>
   </div>
 </footer>
 
-<script>lucide.createIcons();</script>
+<script>
+function getAuthUser() {
+  var token = localStorage.getItem('flutter.access_token');
+  var username = localStorage.getItem('flutter.username');
+  var realName = localStorage.getItem('flutter.real_name') || '';
+  var role = localStorage.getItem('flutter.role') || '';
+  var shopNo = localStorage.getItem('flutter.shop_no') || '';
+  if (!token || !username) return null;
+  return { username: username, realName: realName, role: role, shopNo: shopNo };
+}
+function doLogout() {
+  ['access_token','refresh_token','username','real_name','shop_no','shop_id','role']
+    .forEach(function(k) { localStorage.removeItem('flutter.' + k); });
+  location.reload();
+}
+function toggleUserMenu() {
+  var el = document.getElementById('userDropdown');
+  if (el) el.classList.toggle('open');
+}
+document.addEventListener('click', function(e) {
+  var menu = document.getElementById('userDropdown');
+  if (menu) {
+    var navUser = menu.closest('.nav-user');
+    if (navUser && !navUser.contains(e.target)) menu.classList.remove('open');
+  }
+});
+function renderNav() {
+  var cta = document.getElementById('nav-cta');
+  if (!cta) return;
+  var user = getAuthUser();
+  if (user) {
+    var display = user.realName || user.username;
+    var initial = display.charAt(0).toUpperCase();
+    var roleMap = { admin: '管理员', user: '成员', readonly: '只读' };
+    var roleLabel = roleMap[user.role] || user.role;
+    cta.innerHTML = '<div class="nav-user">'
+      + '<button class="nav-user-btn" onclick="toggleUserMenu()">'
+      + '<div class="nav-avatar">' + initial + '</div>'
+      + '<span>' + display + '</span>'
+      + '<i data-lucide="chevron-down" class="icon"></i>'
+      + '</button>'
+      + '<div class="nav-dropdown" id="userDropdown">'
+      + '<div style="padding:10px 14px 6px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px">'
+      + '<div style="font-size:13px;font-weight:600;color:var(--brand-900)">' + display + '</div>'
+      + '<div style="font-size:11px;color:var(--fg-muted);margin-top:2px">' + (user.shopNo ? user.shopNo + ' · ' : '') + roleLabel + '</div>'
+      + '</div>'
+      + '<a href="/app/"><i data-lucide="layout-dashboard" class="icon"></i>进入管理端</a>'
+      + '<div class="nav-dropdown-divider"></div>'
+      + '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>'
+      + '</div></div>';
+  } else {
+    cta.innerHTML = '<a href="/app/" class="btn btn-ghost">登录</a>'
+      + '<a href="/app/" class="btn btn-primary">免费试用</a>';
+  }
+  if (window.lucide) lucide.createIcons();
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  renderNav();
+  if (window.lucide) lucide.createIcons();
+});
+</script>
+
 </body>
 </html>
diff --git a/web/download.html b/web/download.html
index 56c12ea..ff7ad58 100644
--- a/web/download.html
+++ b/web/download.html
@@ -3,188 +3,1201 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>下载 — 岩美酒库管理系统</title>
-<meta name="description" content="下载岩美酒库管理系统客户端，支持 macOS 和 Windows。" />
+<title>下载 · 岩美酒库管理系统</title>
 <link rel="stylesheet" href="assets/colors_and_type.css" />
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
 <style>
 * { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans);
+  color: var(--fg-default);
+  background: var(--bg-surface);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "tnum" 1;
+}
+img, svg { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }
-.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; white-space: nowrap; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
+
+/* ---------------- Buttons (shared) ---------------- */
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  height: 40px; padding: 0 18px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-md); font-weight: 500;
+  border: 1px solid transparent;
+  transition: background var(--duration-fast) var(--ease-standard),
+              border-color var(--duration-fast) var(--ease-standard),
+              color var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
+}
 .btn-primary { background: var(--brand-500); color: #fff; }
 .btn-primary:hover { background: var(--brand-600); }
+.btn-primary:active { background: var(--brand-700); }
 .btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
-.btn-secondary:hover { background: var(--gray-50); }
-.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
-.btn-disabled { opacity: 0.5; pointer-events: none; }
-.icon { width: 18px; height: 18px; }
+.btn-secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }
+.btn-ghost { background: transparent; color: var(--fg-default); }
+.btn-ghost:hover { background: var(--gray-100); }
+.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-lg); }
+.btn-sm { height: 32px; padding: 0 12px; font-size: var(--text-sm); }
+.btn .icon { width: 18px; height: 18px; }
 
-/* NAV */
-.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
-.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
-.nav-brand img { height: 30px; }
-.nav-links { display: flex; gap: 2px; }
-.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
-.nav-links a:hover { background: var(--gray-100); }
-.nav-cta { display: flex; gap: 10px; }
+.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+.section { padding: 80px 0; }
 
-/* PAGE */
-.page-hero { padding: 72px 0 56px; text-align: center; border-bottom: 1px solid var(--border-subtle); }
-.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 14px; }
-.page-title { font-size: 40px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
-.page-sub { font-size: 16px; color: var(--fg-muted); margin: 0; line-height: 1.6; }
+/* ---------------- Top Nav (shared) ---------------- */
+.topnav {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(255,255,255,0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.topnav-inner {
+  height: 64px;
+  display: flex; align-items: center; justify-content: space-between;
+  max-width: 1440px; margin: 0 auto; padding: 0 32px;
+}
+.topnav-brand { display: flex; align-items: center; gap: 10px; }
+.topnav-brand img { height: 32px; }
+.topnav-links { display: flex; align-items: center; gap: 4px; font-size: var(--text-md); color: var(--gray-700); }
+.topnav-links a {
+  padding: 8px 14px;
+  border-radius: var(--radius-md);
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.topnav-links a:hover { background: var(--gray-100); color: var(--brand-900); }
+.topnav-links a.active { color: var(--brand-500); background: var(--brand-50); }
+.topnav-cta { display: flex; gap: 10px; align-items: center; }
 
-/* LOADING / ERROR */
-.state-loading { padding: 60px 0; text-align: center; color: var(--fg-muted); font-size: 14px; }
-.state-error { padding: 60px 0; text-align: center; color: var(--danger-500); font-size: 14px; }
+/* nav user dropdown */
+.nav-user { position: relative; }
+.nav-user-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-md); color: var(--gray-800); font-weight: 500; transition: border-color var(--duration-fast) var(--ease-standard); }
+.nav-user-btn:hover { border-color: var(--border-strong); }
+.nav-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-500); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
+.nav-user-btn .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 100; }
+.nav-dropdown.open { display: block; }
+.nav-dropdown a, .nav-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: var(--text-sm); color: var(--gray-800); background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background var(--duration-fast) var(--ease-standard); }
+.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--gray-50); }
+.nav-dropdown .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
+.nav-dropdown .logout { color: var(--danger-600); }
 
-/* RELEASE */
-.release-section { padding: 64px 0; }
-.version-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-50); color: var(--brand-700); padding: 5px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
-.build-date { font-size: 13px; color: var(--fg-muted); margin-bottom: 40px; }
-.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
-.platform-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 10px; padding: 28px 24px; }
-.platform-card h3 { font-size: 18px; font-weight: 600; color: var(--brand-900); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
-.platform-card h3 i { width: 20px; height: 20px; color: var(--brand-500); }
-.platform-card p { font-size: 13px; color: var(--fg-muted); margin: 0 0 24px; line-height: 1.6; }
-.web-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-50); color: var(--success-700); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; margin-bottom: 6px; }
+/* ====================================================================
+   PAGE HEADER (download-specific hero)
+   ==================================================================== */
+.page-header {
+  padding: 72px 0 56px;
+  background:
+    radial-gradient(700px 360px at 80% 20%, rgba(37, 99, 172, 0.06), transparent 60%),
+    linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 80%);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.ph-inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 64px;
+  align-items: center;
+}
+.ph-eyebrow {
+  font-size: var(--text-xs); font-weight: 600;
+  letter-spacing: 0.12em;
+  color: var(--brand-500);
+  text-transform: uppercase;
+  margin: 0 0 12px;
+  display: flex; align-items: center; gap: 8px;
+}
+.ph-eyebrow .badge {
+  background: var(--brand-500); color: #fff;
+  padding: 3px 8px; border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  letter-spacing: 0.02em;
+  font-size: 11px;
+}
+.ph-title {
+  font-size: 44px; font-weight: 700; line-height: 1.15;
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900);
+  margin: 0 0 18px;
+}
+.ph-lead {
+  font-size: var(--text-lg); color: var(--gray-600);
+  line-height: 1.6; margin: 0 0 24px;
+  max-width: 480px;
+}
+.ph-meta {
+  display: flex; gap: 24px;
+  font-size: var(--text-sm); color: var(--fg-muted);
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 16px;
+}
+.ph-meta-item { display: flex; flex-direction: column; gap: 2px; }
+.ph-meta-label { font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.04em; }
+.ph-meta-val { font-size: var(--text-sm); color: var(--gray-800); font-weight: 500; }
 
-/* CHANGELOG */
-.changelog-section { padding: 0 0 64px; }
-.changelog-title { font-size: 20px; font-weight: 600; color: var(--brand-900); margin: 0 0 20px; }
-.changelog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
-.changelog-item { display: flex; gap: 14px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 8px; padding: 16px 20px; }
-.changelog-ver { font-size: 13px; font-weight: 600; color: var(--brand-700); font-family: var(--font-mono); min-width: 60px; padding-top: 2px; }
-.changelog-content { flex: 1; }
-.changelog-date { font-size: 11px; color: var(--fg-subtle); margin-bottom: 6px; }
-.changelog-notes { font-size: 13px; color: var(--fg-default); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
-.changelog-notes li::before { content: '· '; color: var(--brand-400); }
+/* Auto-detect card */
+.detect-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.detect-card-head {
+  padding: 14px 20px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.detect-card-head .icon { width: 14px; height: 14px; color: var(--success-500); }
+.detect-card-body {
+  padding: 28px;
+  display: flex; gap: 24px; align-items: center;
+}
+.detect-card-icon {
+  width: 72px; height: 72px;
+  background: var(--brand-50);
+  border-radius: 16px;
+  display: grid; place-items: center;
+  color: var(--brand-500);
+  flex-shrink: 0;
+}
+.detect-card-icon .icon { width: 38px; height: 38px; }
+.detect-card-info { flex: 1; }
+.detect-card-info h3 {
+  margin: 0 0 4px;
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--brand-900);
+}
+.detect-card-info p {
+  margin: 0 0 12px;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+.detect-card-info .meta-row {
+  display: flex; gap: 18px;
+  font-size: var(--text-xs);
+  color: var(--gray-700);
+  font-variant-numeric: tabular-nums;
+}
+.detect-card-info .meta-row span { display: flex; align-items: center; gap: 4px; }
+.detect-card-info .meta-row .icon { width: 12px; height: 12px; color: var(--fg-muted); }
+.detect-card-actions {
+  padding: 0 28px 28px;
+  display: flex; gap: 8px;
+}
+.detect-card-actions .btn-primary { flex: 1; justify-content: center; }
 
-/* FOOTER */
-footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
-.footer-inner { display: flex; align-items: center; justify-content: space-between; }
-.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
-.footer-brand img { height: 24px; }
-.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+/* ====================================================================
+   PLATFORM GRID
+   ==================================================================== */
+.platforms-section { background: var(--bg-surface); }
+.platforms-section h2 {
+  font-size: var(--text-3xl); font-weight: 600;
+  color: var(--brand-900); margin: 0 0 8px;
+  letter-spacing: var(--tracking-cn-display);
+}
+.platforms-section .section-sub {
+  font-size: var(--text-md);
+  color: var(--fg-muted); margin: 0 0 40px;
+  max-width: 600px;
+}
+.dl-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.dl-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  display: flex; flex-direction: column;
+  transition: border-color var(--duration-base) var(--ease-standard),
+              box-shadow var(--duration-base) var(--ease-standard);
+}
+.dl-card:hover {
+  border-color: var(--brand-300);
+  box-shadow: var(--shadow-sm);
+}
+.dl-card-head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  margin-bottom: 24px;
+}
+.dl-card-icon {
+  width: 56px; height: 56px;
+  background: var(--brand-50);
+  border-radius: var(--radius-md);
+  display: grid; place-items: center;
+  color: var(--brand-500);
+}
+.dl-card-icon .icon { width: 28px; height: 28px; }
+.dl-card-version {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--gray-700);
+  background: var(--gray-100);
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.dl-card-name {
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--brand-900);
+  margin: 0 0 6px;
+}
+.dl-card-tagline {
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  margin: 0 0 18px;
+  line-height: 1.5;
+  flex: 1;
+}
+.dl-card-meta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 14px 0;
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 18px;
+}
+.dl-meta-label {
+  font-size: 11px;
+  color: var(--fg-subtle);
+  letter-spacing: 0.04em;
+  margin-bottom: 2px;
+}
+.dl-meta-val {
+  font-size: var(--text-sm);
+  color: var(--gray-800);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.dl-card-actions {
+  display: flex; flex-direction: column; gap: 8px;
+}
+.dl-card-actions .btn { width: 100%; justify-content: center; }
+.dl-card-alt {
+  display: flex; gap: 8px; align-items: center;
+  margin-top: 12px;
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  flex-wrap: wrap;
+}
+.dl-card-alt a {
+  color: var(--brand-500);
+  font-weight: 500;
+}
+.dl-card-alt a:hover { color: var(--brand-700); text-decoration: underline; }
+
+/* QR for mobile */
+.dl-qr {
+  width: 84px; height: 84px;
+  background: var(--gray-100);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  position: relative;
+  display: grid; place-items: center;
+  flex-shrink: 0;
+}
+.dl-qr-pattern { width: 64px; height: 64px; }
+
+/* mobile card uses a slightly different layout */
+.dl-card.mobile .dl-card-actions {
+  display: grid;
+  grid-template-columns: 84px 1fr;
+  gap: 14px;
+  align-items: center;
+}
+.dl-card.mobile .dl-card-actions .stores {
+  display: flex; flex-direction: column; gap: 6px;
+}
+.dl-card.mobile .dl-card-actions .store-btn {
+  display: flex; align-items: center; gap: 8px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--gray-0);
+  font-size: var(--text-xs);
+  color: var(--gray-800);
+  font-weight: 500;
+}
+.dl-card.mobile .dl-card-actions .store-btn:hover { background: var(--gray-50); }
+.dl-card.mobile .dl-card-actions .store-btn .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+
+/* ====================================================================
+   SYSTEM REQUIREMENTS
+   ==================================================================== */
+.req-section { background: var(--gray-25); }
+.req-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.req-row {
+  display: grid;
+  grid-template-columns: 200px 1fr 1fr 1fr;
+  gap: 16px;
+  padding: 16px 24px;
+  align-items: center;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-sm);
+  color: var(--gray-800);
+}
+.req-row:last-child { border-bottom: none; }
+.req-row.head {
+  background: var(--gray-50);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.req-platform { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--brand-900); }
+.req-platform .icon { width: 18px; height: 18px; color: var(--brand-500); }
+.req-row .req-val { font-variant-numeric: tabular-nums; }
+.req-row .req-supported { color: var(--success-700); font-weight: 500; display: flex; align-items: center; gap: 6px; }
+.req-row .req-supported .icon { width: 14px; height: 14px; color: var(--success-500); }
+
+/* ====================================================================
+   RELEASE NOTES / CHANGELOG
+   ==================================================================== */
+.changelog-section { background: var(--bg-surface); }
+.changelog {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 0;
+  margin-top: 40px;
+  border-left: 1px solid var(--border-subtle);
+}
+.changelog-entry {
+  display: contents;
+}
+.changelog-meta {
+  padding: 28px 24px 28px 32px;
+  position: relative;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.changelog-meta::before {
+  content: '';
+  position: absolute;
+  left: -7px; top: 36px;
+  width: 13px; height: 13px;
+  border-radius: 50%;
+  background: var(--gray-0);
+  border: 3px solid var(--gray-300);
+}
+.changelog-entry.current .changelog-meta::before {
+  background: var(--brand-500);
+  border-color: var(--brand-100);
+  box-shadow: 0 0 0 4px var(--brand-50);
+}
+.changelog-version {
+  font-family: var(--font-mono);
+  font-size: var(--text-md);
+  font-weight: 600;
+  color: var(--brand-900);
+  margin-bottom: 4px;
+}
+.changelog-date {
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+.changelog-tag {
+  display: inline-block;
+  font-size: 10px;
+  background: var(--success-50);
+  color: var(--success-700);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font-weight: 500;
+  margin-top: 8px;
+}
+.changelog-body {
+  padding: 28px 0 28px 32px;
+  border-bottom: 1px solid var(--border-subtle);
+  border-left: 1px solid var(--border-subtle);
+  margin-left: -1px;
+}
+.changelog-entry:last-child .changelog-meta,
+.changelog-entry:last-child .changelog-body { border-bottom: none; }
+.changelog-body h3 {
+  margin: 0 0 14px;
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--brand-900);
+}
+.changelog-cat {
+  display: flex; flex-direction: column; gap: 6px;
+  margin-bottom: 14px;
+}
+.changelog-cat-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  display: flex; align-items: center; gap: 6px;
+  margin-bottom: 2px;
+}
+.changelog-cat-label .dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+}
+.changelog-cat-label .dot.feature { background: var(--brand-500); }
+.changelog-cat-label .dot.improve { background: var(--success-500); }
+.changelog-cat-label .dot.fix { background: var(--warning-500); }
+.changelog-cat ul {
+  margin: 0; padding: 0;
+  list-style: none;
+  font-size: var(--text-sm);
+  color: var(--gray-700);
+  line-height: 1.6;
+}
+.changelog-cat ul li {
+  padding: 3px 0;
+  padding-left: 16px;
+  position: relative;
+}
+.changelog-cat ul li::before {
+  content: '';
+  position: absolute;
+  left: 0; top: 11px;
+  width: 6px; height: 1px;
+  background: var(--gray-400);
+}
+
+/* ====================================================================
+   BETA PROGRAM
+   ====================================================================  */
+.beta-banner {
+  background:
+    radial-gradient(800px 360px at 80% 30%, rgba(37, 99, 172, 0.30), transparent 60%),
+    linear-gradient(135deg, #0A1F3B 0%, #15407D 100%);
+  color: #fff;
+  border-radius: var(--radius-xl);
+  padding: 48px;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 48px;
+  align-items: center;
+  margin: 0 0 80px;
+}
+.beta-banner-tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: rgba(255,255,255,0.12);
+  border: 1px solid rgba(255,255,255,0.20);
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  color: #DCE2EB;
+  margin-bottom: 16px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.beta-banner-tag .icon { width: 12px; height: 12px; color: var(--warning-500); }
+.beta-banner h2 {
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-cn-display);
+  margin: 0 0 12px;
+  color: #fff; line-height: 1.3;
+}
+.beta-banner p { font-size: var(--text-md); color: #ADC9EA; margin: 0; line-height: 1.6; }
+.beta-banner-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
+.beta-banner .btn-primary { background: #fff; color: var(--brand-700); }
+.beta-banner .btn-primary:hover { background: #DCE2EB; }
+.beta-banner-note { font-size: var(--text-xs); color: #99A3B3; text-align: right; }
+
+/* ====================================================================
+   FOOTER (shared)
+   ==================================================================== */
+footer {
+  background: var(--gray-25);
+  border-top: 1px solid var(--border-subtle);
+  padding: 64px 0 32px;
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+}
+.footer-grid {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(4, 1fr);
+  gap: 48px;
+  margin-bottom: 48px;
+}
+.footer-brand img { height: 32px; margin-bottom: 16px; }
+.footer-brand p { margin: 0 0 16px; max-width: 320px; line-height: 1.6; color: var(--fg-muted); }
+.footer-contact { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.8; }
+.footer-col h5 {
+  font-size: var(--text-xs); font-weight: 600;
+  color: var(--brand-900);
+  letter-spacing: 0.06em;
+  margin: 0 0 16px;
+  text-transform: uppercase;
+}
+.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
+.footer-col li a { color: var(--gray-600); }
+.footer-col li a:hover { color: var(--brand-500); }
+.footer-bottom {
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 24px;
+  display: flex; justify-content: space-between;
+  font-size: var(--text-xs);
+  color: var(--fg-subtle);
+}
+
+@media (max-width: 1024px) {
+  .ph-inner, .beta-banner { grid-template-columns: 1fr; }
+  .dl-grid { grid-template-columns: repeat(2, 1fr); }
+  .req-row { grid-template-columns: 140px 1fr 1fr; }
+  .req-row > :last-child { display: none; }
+  .changelog { grid-template-columns: 140px 1fr; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+  .ph-title { font-size: 36px; }
+}
 </style>
 </head>
 <body>
 
-<nav class="nav">
-  <div class="nav-inner">
-    <a href="/" class="nav-brand"><img src="assets/logo-full.svg" alt="岩美" /></a>
-    <div class="nav-links">
-      <a href="/features/inventory.html">功能</a>
+<!-- =========================== TOP NAV =========================== -->
+<nav class="topnav">
+  <div class="topnav-inner">
+    <a href="/" class="topnav-brand">
+      <img src="assets/logo-full.svg" alt="岩美" />
+    </a>
+    <div class="topnav-links">
+      <a href="/#modules">产品</a>
+      <a href="/#pricing">价格</a>
+      <a href="/download.html" class="active">下载</a>
       <a href="/docs.html">文档</a>
-      <a href="/download.html">下载</a>
-    </div>
-    <div class="nav-cta">
-      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
+      <a href="/#faq">支持</a>
     </div>
+    <div class="topnav-cta" id="nav-cta"></div>
   </div>
 </nav>
 
-<div class="page-hero">
-  <div class="container">
-    <div class="eyebrow">Download</div>
-    <h1 class="page-title">下载岩美客户端</h1>
-    <p class="page-sub">支持 macOS、Windows 桌面端，以及通过浏览器直接使用的 Web 版本。</p>
-  </div>
-</div>
+<!-- =========================== PAGE HEADER =========================== -->
+<section class="page-header">
+  <div class="container ph-inner">
+    <div>
+      <div class="ph-eyebrow">
+        <span class="badge">v1.6.2</span>
+        <span>下载客户端</span>
+      </div>
+      <h1 class="ph-title">选择你的平台，<br/>立刻开始管理酒库。</h1>
+      <p class="ph-lead">
+        五端同步，数据实时云端备份。Windows、macOS 桌面客户端体验最佳，移动端适合仓库现场操作。
+      </p>
+      <div class="ph-meta">
+        <div class="ph-meta-item">
+          <div class="ph-meta-label">最新版本</div>
+          <div class="ph-meta-val">v1.6.2</div>
+        </div>
+        <div class="ph-meta-item">
+          <div class="ph-meta-label">发布日期</div>
+          <div class="ph-meta-val">2026-05-15</div>
+        </div>
+        <div class="ph-meta-item">
+          <div class="ph-meta-label">兼容旧版</div>
+          <div class="ph-meta-val">v1.4+ 数据自动迁移</div>
+        </div>
+      </div>
+    </div>
 
-<section class="release-section">
-  <div class="container" id="release-container">
-    <div class="state-loading">正在获取版本信息...</div>
+    <!-- Auto-detect download card -->
+    <div class="detect-card">
+      <div class="detect-card-head">
+        <span style="display: flex; align-items: center; gap: 6px;">
+          <i data-lucide="zap" class="icon"></i>
+          已自动识别您的系统
+        </span>
+        <span style="font-family: var(--font-mono); color: var(--fg-subtle);">推荐</span>
+      </div>
+      <div class="detect-card-body">
+        <div class="detect-card-icon">
+          <i data-lucide="monitor" class="icon"></i>
+        </div>
+        <div class="detect-card-info">
+          <h3>Windows 桌面客户端</h3>
+          <p>支持 Windows 10 及以上，64 位系统。</p>
+          <div class="meta-row">
+            <span><i data-lucide="hard-drive" class="icon"></i>86.4 MB</span>
+            <span><i data-lucide="package" class="icon"></i>v1.6.2 · x64</span>
+            <span><i data-lucide="shield-check" class="icon"></i>已签名</span>
+          </div>
+        </div>
+      </div>
+      <div class="detect-card-actions">
+        <a href="#" class="btn btn-primary btn-lg">
+          <i data-lucide="download" class="icon"></i>
+          下载 Windows 客户端
+        </a>
+        <a href="#" class="btn btn-secondary btn-lg" style="width: 48px; padding: 0;" title="其他平台">
+          <i data-lucide="more-horizontal" class="icon"></i>
+        </a>
+      </div>
+    </div>
   </div>
 </section>
 
+<!-- =========================== PLATFORM GRID =========================== -->
+<section class="section platforms-section">
+  <div class="container">
+    <h2>支持的平台</h2>
+    <p class="section-sub">所有版本功能一致，数据云端实时同步。</p>
+
+    <!-- Row 1: Desktop -->
+    <div class="dl-grid" style="margin-bottom: 16px;">
+      <!-- Windows -->
+      <div class="dl-card">
+        <div class="dl-card-head">
+          <div class="dl-card-icon"><i data-lucide="monitor" class="icon"></i></div>
+          <span class="dl-card-version">v1.6.2 · x64</span>
+        </div>
+        <h3 class="dl-card-name">Windows</h3>
+        <p class="dl-card-tagline">适合办公室、收银台日常使用。支持小票机、标签机直连打印。</p>
+        <div class="dl-card-meta">
+          <div>
+            <div class="dl-meta-label">系统要求</div>
+            <div class="dl-meta-val">Windows 10+</div>
+          </div>
+          <div>
+            <div class="dl-meta-label">安装包大小</div>
+            <div class="dl-meta-val">86.4 MB</div>
+          </div>
+        </div>
+        <div class="dl-card-actions">
+          <a href="#" class="btn btn-primary">
+            <i data-lucide="download" class="icon"></i>下载 .exe 安装包
+          </a>
+        </div>
+        <div class="dl-card-alt">
+          <a href="#">便携版 (zip)</a> · <a href="#">x86 32 位</a> · <a href="#">历史版本</a>
+        </div>
+      </div>
+
+      <!-- macOS -->
+      <div class="dl-card">
+        <div class="dl-card-head">
+          <div class="dl-card-icon"><i data-lucide="laptop" class="icon"></i></div>
+          <span class="dl-card-version">v1.6.2 · Universal</span>
+        </div>
+        <h3 class="dl-card-name">macOS</h3>
+        <p class="dl-card-tagline">通用版本，原生支持 Apple Silicon 与 Intel 芯片，无需切换。</p>
+        <div class="dl-card-meta">
+          <div>
+            <div class="dl-meta-label">系统要求</div>
+            <div class="dl-meta-val">macOS 12+</div>
+          </div>
+          <div>
+            <div class="dl-meta-label">安装包大小</div>
+            <div class="dl-meta-val">92.1 MB</div>
+          </div>
+        </div>
+        <div class="dl-card-actions">
+          <a href="#" class="btn btn-primary">
+            <i data-lucide="download" class="icon"></i>下载 .dmg 安装包
+          </a>
+        </div>
+        <div class="dl-card-alt">
+          <a href="#">仅 Apple Silicon</a> · <a href="#">仅 Intel</a> · <a href="#">历史版本</a>
+        </div>
+      </div>
+
+      <!-- Web -->
+      <div class="dl-card">
+        <div class="dl-card-head">
+          <div class="dl-card-icon"><i data-lucide="globe" class="icon"></i></div>
+          <span class="dl-card-version">无需安装</span>
+        </div>
+        <h3 class="dl-card-name">Web 版</h3>
+        <p class="dl-card-tagline">浏览器直接访问，无需下载。功能与桌面端一致，适合临时使用。</p>
+        <div class="dl-card-meta">
+          <div>
+            <div class="dl-meta-label">支持浏览器</div>
+            <div class="dl-meta-val">Chrome 110+</div>
+          </div>
+          <div>
+            <div class="dl-meta-label">同步</div>
+            <div class="dl-meta-val">实时云端</div>
+          </div>
+        </div>
+        <div class="dl-card-actions">
+          <a href="/app/" class="btn btn-primary">
+            <i data-lucide="arrow-right" class="icon"></i>立即访问 Web 版
+          </a>
+        </div>
+        <div class="dl-card-alt">
+          推荐 <a href="#">Chrome</a> · <a href="#">Edge</a> · <a href="#">Safari 15+</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Row 2: Mobile -->
+    <div class="dl-grid" style="grid-template-columns: 1fr 1fr;">
+      <!-- iOS -->
+      <div class="dl-card mobile">
+        <div class="dl-card-head">
+          <div class="dl-card-icon"><i data-lucide="smartphone" class="icon"></i></div>
+          <span class="dl-card-version">v1.6.2</span>
+        </div>
+        <h3 class="dl-card-name">iOS</h3>
+        <p class="dl-card-tagline">iPhone 与 iPad 通用版本。支持扫码盘点、离线缓存、推送通知。</p>
+        <div class="dl-card-meta">
+          <div>
+            <div class="dl-meta-label">系统要求</div>
+            <div class="dl-meta-val">iOS 15+</div>
+          </div>
+          <div>
+            <div class="dl-meta-label">App 大小</div>
+            <div class="dl-meta-val">48.2 MB</div>
+          </div>
+        </div>
+        <div class="dl-card-actions">
+          <div class="dl-qr" aria-label="二维码">
+            <svg class="dl-qr-pattern" viewBox="0 0 64 64" fill="#141821" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0" y="0" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"/>
+              <rect x="4" y="4" width="6" height="6"/>
+              <rect x="50" y="0" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"/>
+              <rect x="54" y="4" width="6" height="6"/>
+              <rect x="0" y="50" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"/>
+              <rect x="4" y="54" width="6" height="6"/>
+              <rect x="18" y="2" width="3" height="3"/><rect x="24" y="2" width="3" height="3"/>
+              <rect x="30" y="2" width="3" height="3"/><rect x="36" y="6" width="3" height="3"/>
+              <rect x="42" y="2" width="3" height="3"/><rect x="18" y="8" width="3" height="3"/>
+              <rect x="30" y="8" width="3" height="3"/><rect x="42" y="8" width="3" height="3"/>
+              <rect x="2" y="18" width="3" height="3"/><rect x="8" y="18" width="3" height="3"/>
+              <rect x="56" y="18" width="3" height="3"/><rect x="18" y="18" width="3" height="3"/>
+              <rect x="24" y="18" width="3" height="3"/><rect x="36" y="18" width="3" height="3"/>
+              <rect x="48" y="18" width="3" height="3"/><rect x="22" y="22" width="3" height="3"/>
+              <rect x="30" y="22" width="3" height="3"/><rect x="38" y="22" width="3" height="3"/>
+              <rect x="2" y="26" width="3" height="3"/><rect x="14" y="26" width="3" height="3"/>
+              <rect x="26" y="26" width="3" height="3"/><rect x="42" y="26" width="3" height="3"/>
+              <rect x="50" y="26" width="3" height="3"/><rect x="58" y="26" width="3" height="3"/>
+              <rect x="6" y="32" width="3" height="3"/><rect x="20" y="32" width="3" height="3"/>
+              <rect x="32" y="32" width="3" height="3"/><rect x="46" y="32" width="3" height="3"/>
+              <rect x="2" y="38" width="3" height="3"/><rect x="14" y="38" width="3" height="3"/>
+              <rect x="24" y="38" width="3" height="3"/><rect x="38" y="38" width="3" height="3"/>
+              <rect x="50" y="38" width="3" height="3"/><rect x="20" y="44" width="3" height="3"/>
+              <rect x="28" y="44" width="3" height="3"/><rect x="40" y="44" width="3" height="3"/>
+              <rect x="50" y="44" width="3" height="3"/><rect x="56" y="44" width="3" height="3"/>
+              <rect x="22" y="50" width="3" height="3"/><rect x="30" y="50" width="3" height="3"/>
+              <rect x="42" y="50" width="3" height="3"/><rect x="48" y="50" width="3" height="3"/>
+              <rect x="56" y="50" width="3" height="3"/><rect x="22" y="56" width="3" height="3"/>
+              <rect x="34" y="56" width="3" height="3"/><rect x="42" y="56" width="3" height="3"/>
+              <rect x="50" y="56" width="3" height="3"/>
+            </svg>
+          </div>
+          <div class="stores">
+            <span style="font-size: 11px; color: var(--fg-subtle);">扫码或选择应用商店</span>
+            <a href="#" class="store-btn">
+              <i data-lucide="apple" class="icon"></i>App Store
+              <i data-lucide="external-link" class="icon" style="margin-left: auto;"></i>
+            </a>
+            <a href="#" class="store-btn">
+              <i data-lucide="file-down" class="icon"></i>下载 .ipa (企业证书)
+              <i data-lucide="external-link" class="icon" style="margin-left: auto;"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Android -->
+      <div class="dl-card mobile">
+        <div class="dl-card-head">
+          <div class="dl-card-icon"><i data-lucide="tablet-smartphone" class="icon"></i></div>
+          <span class="dl-card-version">v1.6.2</span>
+        </div>
+        <h3 class="dl-card-name">Android</h3>
+        <p class="dl-card-tagline">支持手机与平板，可通过四大应用商店或官网直接安装 APK。</p>
+        <div class="dl-card-meta">
+          <div>
+            <div class="dl-meta-label">系统要求</div>
+            <div class="dl-meta-val">Android 9+</div>
+          </div>
+          <div>
+            <div class="dl-meta-label">App 大小</div>
+            <div class="dl-meta-val">42.8 MB</div>
+          </div>
+        </div>
+        <div class="dl-card-actions">
+          <div class="dl-qr" aria-label="二维码">
+            <svg class="dl-qr-pattern" viewBox="0 0 64 64" fill="#141821" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0" y="0" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"/>
+              <rect x="4" y="4" width="6" height="6"/>
+              <rect x="50" y="0" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"/>
+              <rect x="54" y="4" width="6" height="6"/>
+              <rect x="0" y="50" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"/>
+              <rect x="4" y="54" width="6" height="6"/>
+              <rect x="20" y="0" width="3" height="3"/><rect x="26" y="0" width="3" height="3"/>
+              <rect x="32" y="2" width="3" height="3"/><rect x="40" y="4" width="3" height="3"/>
+              <rect x="46" y="0" width="3" height="3"/><rect x="20" y="6" width="3" height="3"/>
+              <rect x="28" y="6" width="3" height="3"/><rect x="38" y="6" width="3" height="3"/>
+              <rect x="4" y="20" width="3" height="3"/><rect x="10" y="20" width="3" height="3"/>
+              <rect x="58" y="20" width="3" height="3"/><rect x="20" y="20" width="3" height="3"/>
+              <rect x="28" y="20" width="3" height="3"/><rect x="40" y="20" width="3" height="3"/>
+              <rect x="50" y="20" width="3" height="3"/><rect x="18" y="24" width="3" height="3"/>
+              <rect x="32" y="24" width="3" height="3"/><rect x="42" y="24" width="3" height="3"/>
+              <rect x="4" y="28" width="3" height="3"/><rect x="12" y="28" width="3" height="3"/>
+              <rect x="24" y="28" width="3" height="3"/><rect x="38" y="28" width="3" height="3"/>
+              <rect x="48" y="28" width="3" height="3"/><rect x="54" y="28" width="3" height="3"/>
+              <rect x="8" y="34" width="3" height="3"/><rect x="22" y="34" width="3" height="3"/>
+              <rect x="34" y="34" width="3" height="3"/><rect x="46" y="34" width="3" height="3"/>
+              <rect x="0" y="38" width="3" height="3"/><rect x="14" y="38" width="3" height="3"/>
+              <rect x="22" y="38" width="3" height="3"/><rect x="36" y="38" width="3" height="3"/>
+              <rect x="50" y="38" width="3" height="3"/><rect x="22" y="44" width="3" height="3"/>
+              <rect x="30" y="44" width="3" height="3"/><rect x="42" y="44" width="3" height="3"/>
+              <rect x="52" y="44" width="3" height="3"/><rect x="58" y="44" width="3" height="3"/>
+              <rect x="20" y="50" width="3" height="3"/><rect x="28" y="50" width="3" height="3"/>
+              <rect x="40" y="50" width="3" height="3"/><rect x="48" y="50" width="3" height="3"/>
+              <rect x="54" y="50" width="3" height="3"/><rect x="20" y="56" width="3" height="3"/>
+              <rect x="32" y="56" width="3" height="3"/><rect x="40" y="56" width="3" height="3"/>
+              <rect x="48" y="56" width="3" height="3"/>
+            </svg>
+          </div>
+          <div class="stores">
+            <a href="#" class="store-btn">
+              <i data-lucide="download" class="icon"></i>下载 APK (推荐)
+              <i data-lucide="external-link" class="icon" style="margin-left: auto;"></i>
+            </a>
+            <a href="#" class="store-btn">
+              <i data-lucide="store" class="icon"></i>应用宝
+            </a>
+            <a href="#" class="store-btn">
+              <i data-lucide="store" class="icon"></i>华为应用市场
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- =========================== SYSTEM REQUIREMENTS =========================== -->
+<section class="section req-section">
+  <div class="container">
+    <h2 style="font-size: var(--text-3xl); font-weight: 600; color: var(--brand-900); margin: 0 0 8px; letter-spacing: var(--tracking-cn-display);">系统要求</h2>
+    <p class="section-sub" style="font-size: var(--text-md); color: var(--fg-muted); margin: 0 0 40px;">
+      在以下环境中均经过测试与验证。低于最低要求的环境可能影响功能可用性。
+    </p>
+
+    <div class="req-card">
+      <div class="req-row head">
+        <div>平台</div>
+        <div>最低要求</div>
+        <div>推荐配置</div>
+        <div>状态</div>
+      </div>
+      <div class="req-row">
+        <div class="req-platform"><i data-lucide="monitor" class="icon"></i>Windows</div>
+        <div class="req-val">Win 10 · 4GB RAM · 1GB 存储</div>
+        <div class="req-val">Win 11 · 8GB RAM · SSD</div>
+        <div class="req-supported"><i data-lucide="check-circle" class="icon"></i>已验证</div>
+      </div>
+      <div class="req-row">
+        <div class="req-platform"><i data-lucide="laptop" class="icon"></i>macOS</div>
+        <div class="req-val">macOS 12 · 4GB RAM</div>
+        <div class="req-val">macOS 14+ · M1/M2 芯片</div>
+        <div class="req-supported"><i data-lucide="check-circle" class="icon"></i>已验证</div>
+      </div>
+      <div class="req-row">
+        <div class="req-platform"><i data-lucide="smartphone" class="icon"></i>iOS</div>
+        <div class="req-val">iOS 15 · iPhone 8 及以上</div>
+        <div class="req-val">iOS 17+ · iPhone 12+</div>
+        <div class="req-supported"><i data-lucide="check-circle" class="icon"></i>已验证</div>
+      </div>
+      <div class="req-row">
+        <div class="req-platform"><i data-lucide="tablet-smartphone" class="icon"></i>Android</div>
+        <div class="req-val">Android 9 · 3GB RAM</div>
+        <div class="req-val">Android 13+ · 6GB RAM</div>
+        <div class="req-supported"><i data-lucide="check-circle" class="icon"></i>已验证</div>
+      </div>
+      <div class="req-row">
+        <div class="req-platform"><i data-lucide="globe" class="icon"></i>Web</div>
+        <div class="req-val">Chrome 110 · Edge 110 · Safari 15</div>
+        <div class="req-val">最新版 Chrome / Edge</div>
+        <div class="req-supported"><i data-lucide="check-circle" class="icon"></i>已验证</div>
+      </div>
+    </div>
+
+    <div style="display: flex; gap: 18px; align-items: flex-start; margin-top: 24px; padding: 16px 20px; background: var(--info-50); border-radius: var(--radius-md); border-left: 3px solid var(--info-500);">
+      <i data-lucide="info" class="icon" style="width: 18px; height: 18px; color: var(--info-500); margin-top: 2px; flex-shrink: 0;"></i>
+      <div style="font-size: var(--text-sm); color: var(--gray-700); line-height: 1.6;">
+        <strong style="color: var(--gray-900);">硬件外设支持</strong> · 打印机：USB / 网络 ESC/POS · 标签机：佳博、芯烨、汉印 · 扫码枪：USB / 蓝牙 HID 模式。完整外设兼容列表参见<a href="/docs.html" style="color: var(--brand-500); font-weight: 500;">文档 · 硬件支持</a>。
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- =========================== CHANGELOG =========================== -->
+<section class="section changelog-section">
+  <div class="container">
+    <h2 style="font-size: var(--text-3xl); font-weight: 600; color: var(--brand-900); margin: 0 0 8px; letter-spacing: var(--tracking-cn-display);">版本更新日志</h2>
+    <p class="section-sub" style="font-size: var(--text-md); color: var(--fg-muted); margin: 0 0 0; max-width: 600px;">
+      每月一次小版本，每季度一次大更新。完整变更见 <a href="#" style="color: var(--brand-500); font-weight: 500;">GitHub Releases</a>。
+    </p>
+
+    <div class="changelog">
+      <!-- v1.6.2 -->
+      <div class="changelog-entry current">
+        <div class="changelog-meta">
+          <div class="changelog-version">v1.6.2</div>
+          <div class="changelog-date">2026-05-15</div>
+          <span class="changelog-tag">当前版本</span>
+        </div>
+        <div class="changelog-body">
+          <h3>多仓库联动盘点与权限增强</h3>
+          <div class="changelog-cat">
+            <div class="changelog-cat-label"><span class="dot feature"></span>新功能</div>
+            <ul>
+              <li>「库存盘点」支持跨仓库联动盘点，一次盘完多仓数据</li>
+              <li>新增「只读账号」可独立配置导出权限</li>
+              <li>商品标签支持自定义二维码内容与门店 logo 水印</li>
+            </ul>
+          </div>
+          <div class="changelog-cat">
+            <div class="changelog-cat-label"><span class="dot improve"></span>体验改进</div>
+            <ul>
+              <li>入库单明细行支持复制上一行，连续录入更快</li>
+              <li>财务列表新增「往来单位余额」一列</li>
+              <li>移动端扫码识别速度提升约 30%</li>
+            </ul>
+          </div>
+          <div class="changelog-cat">
+            <div class="changelog-cat-label"><span class="dot fix"></span>问题修复</div>
+            <ul>
+              <li>修复 macOS 14.4 下打印对话框偶发卡死</li>
+              <li>修复数据导入时空行被计入失败计数</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- v1.6.0 -->
+      <div class="changelog-entry">
+        <div class="changelog-meta">
+          <div class="changelog-version">v1.6.0</div>
+          <div class="changelog-date">2026-04-02</div>
+        </div>
+        <div class="changelog-body">
+          <h3>财务模块大幅升级</h3>
+          <div class="changelog-cat">
+            <div class="changelog-cat-label"><span class="dot feature"></span>新功能</div>
+            <ul>
+              <li>财务管理新增「应付应收对账单」模块，按月按往来单位汇总</li>
+              <li>支持「部分结清」与「批量结清」操作</li>
+              <li>报表新增损耗趋势分析</li>
+            </ul>
+          </div>
+          <div class="changelog-cat">
+            <div class="changelog-cat-label"><span class="dot improve"></span>体验改进</div>
+            <ul>
+              <li>侧边栏支持收起与图标导航模式</li>
+              <li>商品字典三级联动（名称/系列/规格）下拉响应更顺滑</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- v1.5.4 -->
+      <div class="changelog-entry">
+        <div class="changelog-meta">
+          <div class="changelog-version">v1.5.4</div>
+          <div class="changelog-date">2026-03-12</div>
+        </div>
+        <div class="changelog-body">
+          <h3>稳定性更新</h3>
+          <div class="changelog-cat">
+            <div class="changelog-cat-label"><span class="dot fix"></span>问题修复</div>
+            <ul>
+              <li>修复连续高频提交单据时的偶发重复编号问题</li>
+              <li>修复 Windows 7 系统下中文输入法弹出的兼容问题</li>
+              <li>提升弱网环境下数据同步的可靠性</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- v1.5.0 -->
+      <div class="changelog-entry">
+        <div class="changelog-meta">
+          <div class="changelog-version">v1.5.0</div>
+          <div class="changelog-date">2026-02-08</div>
+        </div>
+        <div class="changelog-body">
+          <h3>引入移动端 App</h3>
+          <div class="changelog-cat">
+            <div class="changelog-cat-label"><span class="dot feature"></span>新功能</div>
+            <ul>
+              <li>正式发布 iOS 与 Android 移动端 App</li>
+              <li>支持蓝牙扫码枪与蓝牙标签打印</li>
+              <li>离线缓存机制：断网时仍可查询库存与录入单据</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div style="margin-top: 32px; text-align: center;">
+      <a href="#" class="btn btn-secondary">查看完整变更历史 <i data-lucide="arrow-right" class="icon"></i></a>
+    </div>
+  </div>
+</section>
+
+<!-- =========================== BETA PROGRAM =========================== -->
+<section class="container">
+  <div class="beta-banner">
+    <div>
+      <div class="beta-banner-tag">
+        <i data-lucide="flask-conical" class="icon"></i>BETA · 内测通道
+      </div>
+      <h2>抢先体验下一个版本</h2>
+      <p>v1.7 内测包含智能补货建议、AI 单据识别、批次过期预警等新特性。Beta 渠道独立部署，不影响正式环境数据。</p>
+    </div>
+    <div class="beta-banner-actions">
+      <a href="#" class="btn btn-primary btn-lg">
+        <i data-lucide="user-plus" class="icon"></i>申请加入 Beta
+      </a>
+      <span class="beta-banner-note">名额限定，需企业账号审批通过</span>
+    </div>
+  </div>
+</section>
+
+<!-- =========================== FOOTER =========================== -->
 <footer>
   <div class="container">
-    <div class="footer-inner">
-      <div class="footer-brand"><img src="assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
-      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="assets/logo-full.svg" alt="岩美" />
+        <p>为酒行与酒店设计的库存、审核、财务一体化管理平台。</p>
+        <div class="footer-contact">
+          <div>support@yanmei.app</div>
+          <div>400-880-8888</div>
+        </div>
+      </div>
+      <div class="footer-col">
+        <h5>产品</h5>
+        <ul>
+          <li><a href="/#modules">核心模块</a></li>
+          <li><a href="/#platforms">多端覆盖</a></li>
+          <li><a href="/#reports">数据洞察</a></li>
+          <li><a href="/#pricing">价格方案</a></li>
+          <li><a href="/download.html">下载客户端</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>资源</h5>
+        <ul>
+          <li><a href="/docs.html">使用手册</a></li>
+          <li><a href="#">API 文档</a></li>
+          <li><a href="#">视频教程</a></li>
+          <li><a href="#">数据导入模板</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>客户支持</h5>
+        <ul>
+          <li><a href="/#faq">常见问题</a></li>
+          <li><a href="#">提交工单</a></li>
+          <li><a href="#">技术支持</a></li>
+          <li><a href="#">服务等级</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>公司</h5>
+        <ul>
+          <li><a href="#">关于岩美</a></li>
+          <li><a href="#">客户案例</a></li>
+          <li><a href="#">招贤纳士</a></li>
+          <li><a href="#">联系我们</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <div>© 2026 岩美科技 · 保留所有权利</div>
+      <div>沪 ICP 备 2026000000 号 · 沪公网安备 31010000000000 号</div>
     </div>
   </div>
 </footer>
 
 <script>
-lucide.createIcons();
-
-const API_BASE = location.hostname === 'localhost' ? 'http://localhost:8080/api/v1' : '/api/v1';
-
-function fmt(d) {
-  if (!d) return '—';
-  return d.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1 年 $2 月 $3 日');
+function getAuthUser() {
+  var token = localStorage.getItem('flutter.access_token');
+  var username = localStorage.getItem('flutter.username');
+  var realName = localStorage.getItem('flutter.real_name') || '';
+  var role = localStorage.getItem('flutter.role') || '';
+  var shopNo = localStorage.getItem('flutter.shop_no') || '';
+  if (!token || !username) return null;
+  return { username: username, realName: realName, role: role, shopNo: shopNo };
+}
+function doLogout() {
+  ['access_token','refresh_token','username','real_name','shop_no','shop_id','role']
+    .forEach(function(k) { localStorage.removeItem('flutter.' + k); });
+  location.reload();
+}
+function toggleUserMenu() {
+  var el = document.getElementById('userDropdown');
+  if (el) el.classList.toggle('open');
+}
+document.addEventListener('click', function(e) {
+  var menu = document.getElementById('userDropdown');
+  if (menu) {
+    var navUser = menu.closest('.nav-user');
+    if (navUser && !navUser.contains(e.target)) menu.classList.remove('open');
+  }
+});
+function renderNav() {
+  var cta = document.getElementById('nav-cta');
+  if (!cta) return;
+  var user = getAuthUser();
+  if (user) {
+    var display = user.realName || user.username;
+    var initial = display.charAt(0).toUpperCase();
+    var roleMap = { admin: '管理员', user: '成员', readonly: '只读' };
+    var roleLabel = roleMap[user.role] || user.role;
+    cta.innerHTML = '<div class="nav-user">'
+      + '<button class="nav-user-btn" onclick="toggleUserMenu()">'
+      + '<div class="nav-avatar">' + initial + '</div>'
+      + '<span>' + display + '</span>'
+      + '<i data-lucide="chevron-down" class="icon"></i>'
+      + '</button>'
+      + '<div class="nav-dropdown" id="userDropdown">'
+      + '<div style="padding:10px 14px 6px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px">'
+      + '<div style="font-size:13px;font-weight:600;color:var(--brand-900)">' + display + '</div>'
+      + '<div style="font-size:11px;color:var(--fg-muted);margin-top:2px">' + (user.shopNo ? user.shopNo + ' · ' : '') + roleLabel + '</div>'
+      + '</div>'
+      + '<a href="/app/"><i data-lucide="layout-dashboard" class="icon"></i>进入管理端</a>'
+      + '<div class="nav-dropdown-divider"></div>'
+      + '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>'
+      + '</div></div>';
+  } else {
+    cta.innerHTML = '<a href="/app/" class="btn btn-ghost">登录</a>'
+      + '<a href="/app/" class="btn btn-primary">免费试用</a>';
+  }
+  if (window.lucide) lucide.createIcons();
 }
 
-function renderRelease(r) {
-  const dl = r.download_urls || {};
-  const container = document.getElementById('release-container');
-  container.innerHTML = `
-    <div class="version-badge">
-      <i data-lucide="tag" style="width:14px;height:14px"></i>
-      v${r.version || '—'}
-    </div>
-    <div class="build-date">发布日期：${fmt(r.build_date)}</div>
-    <div class="platform-grid">
-      <div class="platform-card">
-        <h3><i data-lucide="monitor"></i> macOS</h3>
-        <p>适用于 Apple Silicon / Intel Mac。支持本地打印与快捷键操作。</p>
-        ${dl.macos
-          ? `<a href="${dl.macos}" class="btn btn-primary btn-lg"><i data-lucide="download" class="icon"></i> 下载 macOS</a>`
-          : `<span class="btn btn-secondary btn-lg btn-disabled"><i data-lucide="clock" class="icon"></i> 暂未发布</span>`}
-      </div>
-      <div class="platform-card">
-        <h3><i data-lucide="monitor"></i> Windows</h3>
-        <p>适用于 Windows 10 及以上版本，支持本地打印机直连。</p>
-        ${dl.windows
-          ? `<a href="${dl.windows}" class="btn btn-primary btn-lg"><i data-lucide="download" class="icon"></i> 下载 Windows</a>`
-          : `<span class="btn btn-secondary btn-lg btn-disabled"><i data-lucide="clock" class="icon"></i> 暂未发布</span>`}
-      </div>
-      <div class="platform-card">
-        <h3><i data-lucide="globe"></i> Web 版本</h3>
-        <span class="web-badge"><i data-lucide="zap" style="width:11px;height:11px"></i> 无需安装</span>
-        <p>直接在浏览器中使用全功能管理端，推荐 Chrome / Edge。</p>
-        <a href="/app/" class="btn btn-primary btn-lg"><i data-lucide="external-link" class="icon"></i> 打开 Web 版</a>
-      </div>
-    </div>
-    ${renderChangelog(r.changelog)}
-  `;
-  lucide.createIcons();
-}
-
-function renderChangelog(list) {
-  if (!list || list.length === 0) return '';
-  const items = list.map(v => `
-    <li class="changelog-item">
-      <div class="changelog-ver">v${v.version}</div>
-      <div class="changelog-content">
-        <div class="changelog-date">${fmt(v.date)}</div>
-        <ul class="changelog-notes">${(v.items||[]).map(i=>`<li>${i}</li>`).join('')}</ul>
-      </div>
-    </li>
-  `).join('');
-  return `
-    <div class="changelog-section" style="margin-top:48px">
-      <h2 class="changelog-title">更新日志</h2>
-      <ul class="changelog-list">${items}</ul>
-    </div>
-  `;
-}
-
-fetch(`${API_BASE}/public/release`)
-  .then(r => r.json())
-  .then(renderRelease)
-  .catch(err => {
-    document.getElementById('release-container').innerHTML =
-      `<div class="state-error">无法获取版本信息，请稍后再试。<br/><small>${err.message}</small></div>`;
-  });
+document.addEventListener('DOMContentLoaded', function() {
+  renderNav();
+  if (window.lucide) lucide.createIcons();
+});
 </script>
+
 </body>
 </html>
diff --git a/web/features/approval.html b/web/features/approval.html
index 79bfed8..fd3e80e 100644
--- a/web/features/approval.html
+++ b/web/features/approval.html
@@ -3,276 +3,1742 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>审批流程功能 — 岩美酒库管理系统</title>
+<title>审核驱动业务流 · 岩美酒库管理系统</title>
 <link rel="stylesheet" href="../assets/colors_and_type.css" />
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
 <style>
 * { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans); color: var(--fg-default);
+  background: var(--bg-surface);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "tnum" 1;
+}
+img, svg { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }
-.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
+
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  height: 40px; padding: 0 18px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-md); font-weight: 500;
+  border: 1px solid transparent;
+  transition: background var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
+}
 .btn-primary { background: var(--brand-500); color: #fff; }
 .btn-primary:hover { background: var(--brand-600); }
 .btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
-.btn-secondary:hover { background: var(--gray-50); }
-.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
-.icon { width: 18px; height: 18px; }
+.btn-secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }
+.btn-ghost { background: transparent; color: var(--fg-default); }
+.btn-ghost:hover { background: var(--gray-100); }
+.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-lg); }
+.btn .icon { width: 18px; height: 18px; }
 
-.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
-.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
-.nav-brand img { height: 30px; }
-.nav-links { display: flex; gap: 2px; }
-.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
-.nav-links a:hover { background: var(--gray-100); }
-.nav-links a.active { color: var(--brand-500); font-weight: 500; }
-.nav-cta { display: flex; gap: 10px; }
+.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+.section { padding: 96px 0; }
+.eyebrow {
+  font-size: var(--text-xs); font-weight: 600;
+  letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--brand-500); margin: 0 0 12px;
+}
 
-.page-hero { padding: 80px 0 64px; }
-.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 12px; }
-.page-hero h1 { font-size: 44px; font-weight: 700; color: var(--brand-900); margin: 0 0 18px; line-height: 1.15; }
-.page-hero .lead { font-size: 18px; line-height: 1.65; color: var(--gray-600); margin: 0 0 36px; max-width: 600px; }
-.hero-actions { display: flex; gap: 12px; }
+/* Top Nav */
+.topnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
+.topnav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
+.topnav-brand { display: flex; align-items: center; gap: 10px; }
+.topnav-brand img { height: 32px; }
+.topnav-links { display: flex; align-items: center; gap: 4px; font-size: var(--text-md); color: var(--gray-700); }
+.topnav-links a { padding: 8px 14px; border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-standard); }
+.topnav-links a:hover { background: var(--gray-100); color: var(--brand-900); }
+.topnav-links a.active { color: var(--brand-500); background: var(--brand-50); }
+.topnav-cta { display: flex; gap: 10px; align-items: center; }
 
-/* Workflow steps */
-.workflow-section { padding: 72px 0; background: var(--gray-50); }
-.section-title { font-size: 28px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
-.section-sub { font-size: 15px; color: var(--fg-muted); margin: 0 0 48px; line-height: 1.6; max-width: 560px; }
-.steps { display: flex; flex-direction: column; gap: 0; max-width: 800px; }
-.step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border-subtle); }
-.step:last-child { border-bottom: none; }
-.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
-.step-content { flex: 1; }
-.step-content h3 { font-size: 16px; font-weight: 600; color: var(--brand-900); margin: 0 0 6px; margin-top: 6px; }
-.step-content p { font-size: 14px; line-height: 1.65; color: var(--fg-muted); margin: 0; }
-.step-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; margin-top: 8px; }
-.step-badge.blue { background: var(--brand-50); color: var(--brand-700); }
-.step-badge.amber { background: var(--warning-50); color: var(--warning-700); }
-.step-badge.green { background: var(--success-50); color: var(--success-700); }
-.step-badge.red { background: var(--danger-50); color: var(--danger-700); }
+/* Nav user dropdown */
+.nav-user { position: relative; }
+.nav-user-btn {
+  display: flex; align-items: center; gap: 8px;
+  height: 36px; padding: 0 12px 0 8px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  background: var(--gray-0);
+  font-size: var(--text-sm); color: var(--gray-800);
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.nav-user-btn:hover { background: var(--gray-50); }
+.nav-avatar {
+  width: 22px; height: 22px; border-radius: 50%;
+  background: var(--brand-500); color: #fff;
+  font-size: 11px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.nav-user-btn .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown {
+  display: none; position: absolute; top: calc(100% + 8px); right: 0;
+  min-width: 200px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 6px;
+  z-index: 100;
+}
+.nav-dropdown.open { display: block; }
+.nav-dropdown-info {
+  padding: 8px 10px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 6px;
+}
+.nav-dropdown-name { font-size: var(--text-sm); font-weight: 600; color: var(--brand-900); }
+.nav-dropdown-role { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
+.nav-dropdown a, .nav-dropdown button {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; padding: 8px 10px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm); color: var(--gray-700);
+  background: none; border: none; text-align: left; cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--gray-50); color: var(--brand-900); }
+.nav-dropdown .icon { width: 15px; height: 15px; color: var(--fg-muted); }
+.nav-dropdown .logout { color: var(--danger-600); }
+.nav-dropdown .logout .icon { color: var(--danger-400); }
 
-/* Role matrix */
-.matrix-section { padding: 72px 0; }
-.matrix-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
-.matrix-table th { background: var(--gray-50); border: 1px solid var(--border-default); padding: 10px 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--gray-700); }
-.matrix-table td { border: 1px solid var(--border-default); padding: 10px 16px; font-size: 13px; vertical-align: middle; }
-.perm-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--success-700); font-weight: 500; }
-.perm-yes i { width: 14px; height: 14px; }
-.perm-no { color: var(--gray-400); }
+/* ====================================================================
+   HERO
+   ==================================================================== */
+.feat-hero {
+  position: relative; overflow: hidden;
+  padding: 80px 0 72px;
+  background:
+    radial-gradient(900px 480px at 10% 30%, rgba(37, 99, 172, 0.06), transparent 60%),
+    radial-gradient(900px 480px at 90% 90%, rgba(139, 35, 49, 0.04), transparent 60%),
+    linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 80%);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.feat-hero-inner {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 64px;
+  align-items: center;
+}
+.feat-breadcrumb {
+  display: flex; align-items: center; gap: 8px;
+  font-size: var(--text-sm); color: var(--fg-muted);
+  margin-bottom: 20px;
+}
+.feat-breadcrumb a { color: var(--fg-muted); }
+.feat-breadcrumb a:hover { color: var(--brand-500); }
+.feat-breadcrumb .icon { width: 14px; height: 14px; color: var(--gray-300); }
+.feat-hero h1 {
+  font-size: 48px; line-height: 1.15;
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900); margin: 0 0 18px;
+  font-weight: 700;
+}
+.feat-hero h1 em {
+  font-style: normal; color: var(--accent-500);
+}
+.feat-hero p.lead {
+  font-size: var(--text-xl); line-height: 1.6;
+  color: var(--gray-600); margin: 0 0 28px;
+}
+.feat-hero .actions { display: flex; gap: 12px; margin-bottom: 28px; }
+.feat-hero .quick-stats {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 20px;
+}
+.feat-hero .quick-stat-label { font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.04em; }
+.feat-hero .quick-stat-val { font-size: var(--text-xl); font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; margin-top: 4px; }
 
-/* Audit log */
-.audit-section { padding: 72px 0; background: var(--gray-50); }
-.audit-log { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; max-width: 720px; }
-.audit-header { padding: 14px 20px; border-bottom: 1px solid var(--border-default); background: var(--gray-50); display: flex; align-items: center; gap: 8px; }
-.audit-header-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
-.audit-row { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); align-items: flex-start; }
-.audit-row:last-child { border-bottom: none; }
-.audit-time { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); min-width: 80px; padding-top: 2px; }
-.audit-user { font-size: 12px; font-weight: 500; color: var(--brand-700); min-width: 64px; padding-top: 2px; }
-.audit-action { font-size: 13px; color: var(--fg-default); }
-.audit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
-.dot-green { background: var(--success-500); }
-.dot-amber { background: var(--warning-500); }
-.dot-blue { background: var(--brand-400); }
-.dot-red { background: var(--danger-500); }
+/* ====================================================================
+   HERO STAMP / DOCUMENT VISUAL
+   ==================================================================== */
+.hero-doc-stack {
+  position: relative;
+  height: 520px;
+}
+.hero-doc {
+  position: absolute;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 24px;
+  transform-origin: center;
+}
+.hero-doc-back-2 {
+  top: 36px; left: 24px; right: 64px; bottom: 64px;
+  transform: rotate(-2deg);
+  opacity: 0.6;
+  background: var(--gray-50);
+}
+.hero-doc-back-1 {
+  top: 18px; left: 12px; right: 80px; bottom: 80px;
+  transform: rotate(2deg);
+  opacity: 0.85;
+  background: var(--gray-25);
+}
+.hero-doc-main {
+  top: 0; left: 60px; right: 0; bottom: 60px;
+  box-shadow: var(--shadow-xl);
+}
+.hero-doc-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 16px;
+}
+.hero-doc-id {
+  font-family: var(--font-mono); font-size: var(--text-md);
+  color: var(--brand-500); font-weight: 600;
+}
+.hero-doc-meta { font-size: 11px; color: var(--fg-muted); margin-top: 4px; font-family: var(--font-mono); }
+.hero-doc-status {
+  background: var(--success-50); color: var(--success-700);
+  font-size: 12px; font-weight: 600;
+  padding: 4px 12px; border-radius: var(--radius-pill);
+  display: inline-flex; align-items: center; gap: 4px;
+}
+.hero-doc-status .icon { width: 14px; height: 14px; }
 
-.cta-section { padding: 80px 0; text-align: center; border-top: 1px solid var(--border-default); }
-.cta-section h2 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
-.cta-section p { font-size: 16px; color: var(--fg-muted); margin: 0 0 32px; }
-.cta-actions { display: flex; justify-content: center; gap: 14px; }
+.hero-doc-row {
+  display: grid; grid-template-columns: 1fr 60px 80px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border-subtle);
+  font-size: var(--text-sm);
+  color: var(--gray-700);
+  font-variant-numeric: tabular-nums;
+}
+.hero-doc-row:last-of-type { border-bottom: 1px solid var(--border-default); }
+.hero-doc-foot {
+  display: grid; grid-template-columns: 1fr 60px 80px;
+  padding-top: 10px;
+  font-weight: 600;
+  color: var(--brand-900);
+  font-size: var(--text-md);
+}
 
-footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
-.footer-inner { display: flex; align-items: center; justify-content: space-between; }
-.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
-.footer-brand img { height: 24px; }
-.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+/* Stamp visual on hero */
+.hero-stamp {
+  position: absolute;
+  right: -10px; bottom: 20px;
+  width: 130px; height: 130px;
+  border-radius: 50%;
+  border: 3px solid var(--accent-500);
+  background: rgba(139, 35, 49, 0.04);
+  transform: rotate(-12deg);
+  display: grid; place-items: center;
+  z-index: 10;
+  box-shadow: 0 6px 18px rgba(139, 35, 49, 0.15);
+}
+.hero-stamp::before {
+  content: '';
+  position: absolute; inset: 8px;
+  border-radius: 50%;
+  border: 1px solid var(--accent-500);
+}
+.hero-stamp svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
+.hero-stamp-core {
+  font-family: var(--font-sans);
+  color: var(--accent-500);
+  text-align: center;
+  font-weight: 700;
+  z-index: 1;
+}
+.hero-stamp-core .big { font-size: 22px; letter-spacing: 0.06em; }
+.hero-stamp-core .sub { font-size: 9px; letter-spacing: 0.16em; margin-top: 2px; font-weight: 600; }
+.hero-stamp-core .date { font-family: var(--font-mono); font-size: 10px; margin-top: 4px; color: var(--accent-700); font-weight: 500; }
+
+/* ====================================================================
+   FEATURE BLOCKS — alternating
+   ==================================================================== */
+.feat-block {
+  padding: 96px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.feat-block:nth-child(even) { background: var(--gray-25); }
+.feat-block-inner {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+  gap: 64px;
+  align-items: center;
+}
+.feat-block.reverse .feat-block-inner { grid-template-columns: 7fr 5fr; }
+.feat-block.reverse .feat-text { order: 2; }
+.feat-block.reverse .feat-visual { order: 1; }
+
+.feat-tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--brand-50);
+  color: var(--brand-700);
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  margin-bottom: 16px;
+}
+.feat-tag.danger { background: var(--danger-50); color: var(--danger-700); }
+.feat-tag.success { background: var(--success-50); color: var(--success-700); }
+.feat-tag .icon { width: 14px; height: 14px; }
+
+.feat-text h2 {
+  font-size: 36px; font-weight: 600;
+  line-height: 1.18; letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900); margin: 0 0 16px;
+}
+.feat-text p.lead {
+  font-size: var(--text-lg); line-height: 1.7;
+  color: var(--gray-600); margin: 0 0 24px;
+}
+.feat-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
+.feat-bullets li {
+  display: grid; grid-template-columns: 22px 1fr;
+  gap: 12px;
+  font-size: var(--text-md); color: var(--gray-700);
+  line-height: 1.6; align-items: start;
+}
+.feat-bullets li .icon { width: 18px; height: 18px; color: var(--brand-500); margin-top: 2px; }
+.feat-bullets li strong { color: var(--brand-900); font-weight: 600; display: block; margin-bottom: 2px; }
+
+/* ====================================================================
+   BLOCK 1: STATE MACHINE
+   ==================================================================== */
+.state-machine {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 48px 36px 40px;
+  position: relative;
+  overflow: hidden;
+}
+.state-machine-tabs {
+  position: absolute; top: 16px; left: 16px;
+  display: flex; gap: 2px;
+  background: var(--gray-50);
+  padding: 3px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+}
+.state-tab {
+  padding: 4px 12px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fg-muted);
+  border-radius: var(--radius-sm);
+  letter-spacing: 0.04em;
+}
+.state-tab.active {
+  background: var(--brand-500); color: #fff;
+}
+.state-machine-meta {
+  position: absolute; top: 24px; right: 20px;
+  font-size: 11px; color: var(--fg-subtle);
+  font-family: var(--font-mono); letter-spacing: 0.04em;
+}
+
+/* Diagram */
+.sm-diagram {
+  display: grid;
+  grid-template-columns: 1fr 50px 1fr 50px 1fr;
+  gap: 0;
+  align-items: center;
+  margin-top: 24px;
+}
+.sm-node {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 8px;
+}
+.sm-bubble {
+  padding: 12px 18px;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-md);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  border: 2px solid;
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--gray-0);
+}
+.sm-bubble .icon { width: 14px; height: 14px; }
+.sm-node.draft .sm-bubble { border-color: var(--gray-300); color: var(--gray-700); background: var(--gray-50); }
+.sm-node.pending .sm-bubble { border-color: var(--info-500); color: var(--info-700); background: var(--info-50); }
+.sm-node.approved .sm-bubble {
+  border-color: var(--success-500); color: var(--success-700);
+  background: var(--success-50);
+  box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.10);
+}
+.sm-node.rejected .sm-bubble { border-color: var(--danger-500); color: var(--danger-700); background: var(--danger-50); }
+.sm-node small { font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); }
+
+.sm-arrow {
+  display: flex; align-items: center; justify-content: center;
+  color: var(--gray-400);
+  position: relative;
+}
+.sm-arrow svg { width: 36px; height: 14px; }
+.sm-arrow-label {
+  position: absolute; top: -22px;
+  font-size: 10px; color: var(--fg-subtle);
+  font-family: var(--font-mono); letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.sm-fork {
+  display: flex; flex-direction: column; gap: 20px;
+  position: relative;
+}
+.sm-fork::before {
+  content: '';
+  position: absolute;
+  left: -28px; top: 50%; transform: translateY(-50%);
+  width: 1px; height: 60%;
+  background: var(--gray-300);
+}
+
+/* applies-to legend */
+.sm-applies {
+  margin-top: 32px;
+  padding-top: 20px;
+  border-top: 1px dashed var(--border-default);
+  display: flex; gap: 10px; align-items: center;
+  flex-wrap: wrap;
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  letter-spacing: 0.02em;
+}
+.sm-applies-pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px;
+  background: var(--gray-50);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  font-size: 11px;
+  color: var(--gray-700);
+  font-weight: 500;
+}
+.sm-applies-pill .icon { width: 12px; height: 12px; color: var(--brand-500); }
+
+/* ====================================================================
+   BLOCK 2: AUTO-LINKING — Before/After
+   ==================================================================== */
+.linking-visual {
+  display: flex; flex-direction: column; gap: 0;
+}
+.linking-doc {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 20px 24px;
+  position: relative;
+}
+.linking-doc-head {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 12px;
+}
+.linking-doc-id {
+  font-family: var(--font-mono); font-size: var(--text-md);
+  color: var(--brand-700); font-weight: 600;
+}
+.linking-doc-action {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 14px;
+  background: var(--success-500); color: #fff;
+  border-radius: var(--radius-md);
+  font-size: 12px; font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.linking-doc-action .icon { width: 14px; height: 14px; }
+
+.linking-arrow {
+  width: 100%;
+  display: flex; align-items: center; justify-content: center;
+  padding: 16px 0;
+  position: relative;
+}
+.linking-arrow::before, .linking-arrow::after {
+  content: ''; height: 1px; flex: 1;
+  background: var(--gray-200);
+}
+.linking-arrow-label {
+  margin: 0 14px;
+  padding: 4px 14px;
+  background: var(--success-50);
+  color: var(--success-700);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.linking-arrow-label .icon { width: 13px; height: 13px; }
+
+.linking-effects {
+  display: grid; grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.linking-effect {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  position: relative;
+}
+.linking-effect-label {
+  font-size: 11px; color: var(--fg-muted);
+  font-weight: 600; letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+  display: flex; align-items: center; gap: 6px;
+}
+.linking-effect-label .icon { width: 14px; height: 14px; color: var(--brand-500); }
+.linking-effect-num {
+  font-size: 28px; font-weight: 700;
+  color: var(--brand-900);
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono);
+}
+.linking-effect-from {
+  font-size: 12px; color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  margin-top: 4px;
+  font-variant-numeric: tabular-nums;
+}
+.linking-effect-from .delta { color: var(--success-700); font-weight: 600; }
+
+/* ====================================================================
+   BLOCK 3: STOCK VALIDATION — Error visual
+   ==================================================================== */
+.validation-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.validation-head {
+  padding: 16px 20px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.validation-title { font-size: var(--text-sm); font-weight: 600; color: var(--brand-900); }
+.validation-meta { font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); }
+
+.validation-body { padding: 20px; }
+.validation-row {
+  display: grid;
+  grid-template-columns: 1fr 60px 60px 80px;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-sm);
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+.validation-row.head { font-size: 11px; color: var(--fg-muted); font-weight: 500; padding-top: 0; }
+.validation-row .qty-req { font-weight: 600; color: var(--gray-900); }
+.validation-row .qty-stock { color: var(--gray-700); }
+.validation-row .qty-shortage {
+  background: var(--danger-50);
+  color: var(--danger-700);
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  text-align: center;
+  display: inline-block;
+}
+.validation-row.invalid .qty-req { color: var(--danger-700); }
+
+.error-toast {
+  margin: 16px 0 0;
+  padding: 14px 16px;
+  background: var(--danger-50);
+  border: 1px solid #F8B4B4;
+  border-left: 3px solid var(--danger-500);
+  border-radius: var(--radius-md);
+  display: grid; grid-template-columns: 22px 1fr;
+  gap: 12px;
+}
+.error-toast .icon { width: 18px; height: 18px; color: var(--danger-700); margin-top: 1px; }
+.error-toast-title {
+  font-size: var(--text-sm); font-weight: 600;
+  color: var(--danger-700);
+  margin-bottom: 2px;
+}
+.error-toast-body { font-size: 12px; color: var(--gray-700); line-height: 1.55; }
+
+.api-response {
+  background: var(--gray-900);
+  color: #DCE2EB;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 16px 18px;
+  border-radius: var(--radius-md);
+  margin-top: 16px;
+  line-height: 1.7;
+  overflow-x: auto;
+}
+.api-response .key { color: #ADC9EA; }
+.api-response .str { color: #C97B86; }
+.api-response .num { color: #FFD9A6; }
+.api-response .bool { color: #C97B86; font-weight: 500; }
+
+/* ====================================================================
+   BLOCK 4: AUDIT LOG TIMELINE
+   ==================================================================== */
+.audit-timeline {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.audit-head {
+  padding: 14px 18px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.audit-doc-id { font-family: var(--font-mono); color: var(--brand-700); font-size: var(--text-sm); font-weight: 600; }
+.audit-doc-status {
+  padding: 3px 10px; border-radius: var(--radius-pill);
+  background: var(--success-50); color: var(--success-700);
+  font-size: 11px; font-weight: 600;
+}
+
+.audit-events { padding: 4px 18px 18px; }
+.audit-event {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  gap: 14px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  position: relative;
+}
+.audit-event:last-child { border-bottom: none; }
+
+.audit-event-marker {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  display: grid; place-items: center;
+  position: relative;
+  z-index: 1;
+}
+.audit-event-marker .icon { width: 16px; height: 16px; }
+.audit-event.create .audit-event-marker { background: var(--gray-100); color: var(--gray-700); }
+.audit-event.submit .audit-event-marker { background: var(--info-50); color: var(--info-700); border: 1px solid var(--info-500); }
+.audit-event.approve .audit-event-marker { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-500); }
+.audit-event.reject .audit-event-marker { background: var(--danger-50); color: var(--danger-700); border: 1px solid var(--danger-500); }
+.audit-event.settle .audit-event-marker { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-500); }
+
+.audit-event::before {
+  content: '';
+  position: absolute;
+  left: 15px; top: 32px; bottom: -14px;
+  width: 1px;
+  background: var(--gray-200);
+}
+.audit-event:last-child::before { display: none; }
+
+.audit-event-body { padding-top: 5px; }
+.audit-event-action {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--brand-900);
+  margin-bottom: 2px;
+}
+.audit-event-meta {
+  font-size: 12px; color: var(--fg-muted);
+  display: flex; gap: 12px;
+  flex-wrap: wrap;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+}
+.audit-event-meta strong { color: var(--gray-800); font-weight: 500; }
+.audit-event-meta .time { font-family: var(--font-mono); font-size: 11px; }
+.audit-event-comment {
+  margin-top: 6px;
+  padding: 8px 12px;
+  background: var(--gray-25);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--gray-700);
+  line-height: 1.55;
+  font-style: italic;
+  border-left: 2px solid var(--gray-300);
+}
+
+/* ====================================================================
+   BLOCK 5: REVERSAL / RED-MARK
+   ==================================================================== */
+.reversal-pair {
+  display: grid;
+  grid-template-columns: 1fr 60px 1fr;
+  gap: 0;
+  align-items: center;
+}
+.reversal-doc {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 18px;
+  position: relative;
+}
+.reversal-doc.original .reversal-stamp-mini { color: var(--success-500); border-color: var(--success-500); }
+.reversal-doc.reversal {
+  background: linear-gradient(135deg, #FDFAFA 0%, #FFF 100%);
+  border-color: #F1D2D7;
+}
+.reversal-stamp-mini {
+  position: absolute;
+  top: 14px; right: 14px;
+  font-size: 10px;
+  border: 1.5px solid var(--accent-500);
+  color: var(--accent-500);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  transform: rotate(-4deg);
+}
+.reversal-doc-id {
+  font-family: var(--font-mono); font-size: 13px;
+  color: var(--brand-700); font-weight: 600;
+  margin-bottom: 4px;
+}
+.reversal-doc-meta {
+  font-size: 11px; color: var(--fg-muted);
+  font-family: var(--font-mono);
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.reversal-doc-row {
+  display: grid; grid-template-columns: 1fr 60px;
+  font-size: 12px;
+  padding: 5px 0;
+  color: var(--gray-700);
+  font-variant-numeric: tabular-nums;
+}
+.reversal-doc.reversal .reversal-doc-row { color: var(--accent-700); }
+.reversal-doc-foot {
+  margin-top: 12px; padding-top: 10px;
+  border-top: 1px solid var(--border-default);
+  font-size: var(--text-sm); font-weight: 700;
+  color: var(--brand-900);
+  display: grid; grid-template-columns: 1fr 70px;
+  font-variant-numeric: tabular-nums;
+}
+.reversal-doc.reversal .reversal-doc-foot { color: var(--accent-500); }
+.reversal-arrow {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 6px;
+  color: var(--accent-500);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.06em;
+}
+.reversal-arrow svg { width: 24px; height: 24px; }
+.reversal-arrow-label {
+  background: var(--accent-50);
+  color: var(--accent-700);
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.reversal-net {
+  margin-top: 24px;
+  padding: 16px 20px;
+  background: var(--brand-900);
+  color: #fff;
+  border-radius: var(--radius-md);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+}
+.reversal-net-item { text-align: center; }
+.reversal-net-label {
+  font-size: 11px; color: #ADC9EA;
+  letter-spacing: 0.06em; margin-bottom: 4px;
+}
+.reversal-net-val {
+  font-size: var(--text-xl); font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono);
+}
+
+/* ====================================================================
+   BLOCK 6: PERMISSION MATRIX
+   ==================================================================== */
+.perm-matrix {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+.perm-row {
+  display: grid;
+  grid-template-columns: 200px repeat(4, 1fr);
+  align-items: center;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-sm);
+}
+.perm-row.head {
+  background: var(--brand-900); color: #fff;
+  font-size: 12px; font-weight: 500;
+  letter-spacing: 0.04em;
+}
+.perm-row.head > div { padding: 14px 16px; }
+.perm-row.head > div:not(:first-child) { text-align: center; border-left: 1px solid rgba(255,255,255,0.08); }
+.perm-row:last-child { border-bottom: none; }
+.perm-role {
+  padding: 16px 20px;
+  background: var(--gray-25);
+  font-weight: 600;
+  color: var(--brand-900);
+}
+.perm-role small {
+  display: block; font-weight: 400;
+  color: var(--fg-muted);
+  font-size: 11px;
+  margin-top: 2px;
+  letter-spacing: 0.02em;
+}
+.perm-cell {
+  padding: 16px;
+  text-align: center;
+  border-left: 1px solid var(--border-subtle);
+}
+.perm-cell .icon { width: 18px; height: 18px; display: inline-block; }
+.perm-cell.yes .icon { color: var(--success-500); }
+.perm-cell.no .icon { color: var(--gray-300); }
+.perm-cell.partial { color: var(--warning-500); font-size: 11px; font-weight: 500; }
+
+/* ====================================================================
+   USE CASES
+   ==================================================================== */
+.usecases-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
+  margin-top: 48px;
+}
+.usecase-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+}
+.usecase-card .icon { width: 36px; height: 36px; color: var(--brand-500); margin-bottom: 16px; }
+.usecase-card h4 { margin: 0 0 8px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
+.usecase-card p { margin: 0; font-size: var(--text-sm); color: var(--gray-700); line-height: 1.65; }
+.usecase-card .quote {
+  margin-top: 14px;
+  font-size: 12px;
+  color: var(--fg-muted);
+  font-style: italic;
+  border-left: 2px solid var(--brand-300);
+  padding-left: 12px;
+}
+
+/* Final CTA */
+.cta-strip {
+  background:
+    radial-gradient(800px 360px at 20% 30%, rgba(139, 35, 49, 0.20), transparent 60%),
+    linear-gradient(135deg, #0A1F3B 0%, #15407D 100%);
+  color: #fff;
+  border-radius: var(--radius-xl);
+  padding: 56px 48px;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 32px;
+  align-items: center;
+  margin: 0 0 96px;
+}
+.cta-strip h2 { font-size: 32px; font-weight: 600; letter-spacing: var(--tracking-cn-display); color: #fff; margin: 0 0 12px; line-height: 1.25; }
+.cta-strip p { font-size: var(--text-md); color: #ADC9EA; margin: 0; line-height: 1.6; }
+.cta-strip-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
+.cta-strip .btn-primary { background: #fff; color: var(--brand-700); }
+.cta-strip .btn-primary:hover { background: #DCE2EB; }
+.cta-strip .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
+.cta-strip .btn-secondary:hover { background: rgba(255,255,255,0.10); }
+
+/* Footer */
+footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle); padding: 64px 0 32px; color: var(--fg-muted); font-size: var(--text-sm); }
+.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; margin-bottom: 48px; }
+.footer-brand img { height: 32px; margin-bottom: 16px; }
+.footer-brand p { margin: 0 0 16px; max-width: 320px; line-height: 1.6; color: var(--fg-muted); }
+.footer-contact { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.8; }
+.footer-col h5 { font-size: var(--text-xs); font-weight: 600; color: var(--brand-900); letter-spacing: 0.06em; margin: 0 0 16px; text-transform: uppercase; }
+.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
+.footer-col li a { color: var(--gray-600); }
+.footer-col li a:hover { color: var(--brand-500); }
+.footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 24px; display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-subtle); }
+
+@media (max-width: 1024px) {
+  .feat-hero-inner, .feat-block-inner, .feat-block.reverse .feat-block-inner, .cta-strip, .linking-effects, .reversal-pair { grid-template-columns: 1fr; gap: 24px; }
+  .feat-block.reverse .feat-text, .feat-block.reverse .feat-visual { order: initial; }
+  .usecases-grid { grid-template-columns: 1fr 1fr; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+  .feat-hero h1 { font-size: 36px; }
+  .sm-diagram { grid-template-columns: 1fr; gap: 16px; }
+  .sm-arrow { transform: rotate(90deg); }
+  .perm-row { grid-template-columns: 130px repeat(4, 1fr); }
+  .reversal-arrow { transform: rotate(90deg); padding: 16px 0; }
+}
 </style>
 </head>
 <body>
 
-<nav class="nav">
-  <div class="nav-inner">
-    <a href="/" class="nav-brand"><img src="../assets/logo-full.svg" alt="岩美" /></a>
-    <div class="nav-links">
-      <a href="/features/inventory.html" class="active">功能</a>
-      <a href="/docs.html">文档</a>
+<nav class="topnav">
+  <div class="topnav-inner">
+    <a href="/" class="topnav-brand">
+      <img src="../assets/logo-full.svg" alt="岩美" />
+    </a>
+    <div class="topnav-links">
+      <a href="/#modules" class="active">产品</a>
+      <a href="/#pricing">价格</a>
       <a href="/download.html">下载</a>
+      <a href="/docs.html">文档</a>
+      <a href="/#faq">支持</a>
     </div>
-    <div class="nav-cta">
-      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
-    </div>
+    <div class="topnav-cta" id="nav-cta"></div>
   </div>
 </nav>
 
-<div class="page-hero">
-  <div class="container">
-    <div class="eyebrow">审批流程</div>
-    <h1>每笔操作都有<br/>经手记录</h1>
-    <p class="lead">岩美的审批机制确保每张入库单和出库单在生效前经过明确的负责人审核，防止未经授权的库存变动。</p>
-    <div class="hero-actions">
-      <a href="/app/" class="btn btn-primary btn-lg">立即体验 <i data-lucide="arrow-right" class="icon"></i></a>
-      <a href="/docs.html#stock-in" class="btn btn-secondary btn-lg">查看文档</a>
+<!-- ============== HERO ============== -->
+<section class="feat-hero">
+  <div class="container feat-hero-inner">
+    <div>
+      <div class="feat-breadcrumb">
+        <a href="/">首页</a>
+        <i data-lucide="chevron-right" class="icon"></i>
+        <a href="/#modules">产品功能</a>
+        <i data-lucide="chevron-right" class="icon"></i>
+        <span style="color: var(--gray-900); font-weight: 500;">审核驱动业务流</span>
+      </div>
+      <p class="eyebrow">功能详情 · 审核驱动业务流</p>
+      <h1>每一笔库存变动，<br/>都经过一次<em>签字</em>。</h1>
+      <p class="lead">
+        入库、出库、盘点、调拨 —— 统一状态机，统一审批界面。审批不仅是一个按钮，是一笔事务：库存动了，账款也跟着动，全程留痕。
+      </p>
+      <div class="actions">
+        <a href="#" class="btn btn-primary btn-lg">免费试用 30 天</a>
+        <a href="/docs.html" class="btn btn-secondary btn-lg">
+          <i data-lucide="book-open" class="icon"></i>查看文档
+        </a>
+      </div>
+      <div class="quick-stats">
+        <div>
+          <div class="quick-stat-label">审批延迟</div>
+          <div class="quick-stat-val">≤ 1s</div>
+        </div>
+        <div>
+          <div class="quick-stat-label">审计字段</div>
+          <div class="quick-stat-val">14</div>
+        </div>
+        <div>
+          <div class="quick-stat-label">回滚机制</div>
+          <div class="quick-stat-val">红冲</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="hero-doc-stack">
+      <div class="hero-doc hero-doc-back-2"></div>
+      <div class="hero-doc hero-doc-back-1"></div>
+
+      <div class="hero-doc hero-doc-main">
+        <div class="hero-doc-head">
+          <div>
+            <div class="hero-doc-id">RK20260523000007</div>
+            <div class="hero-doc-meta">入库审核 · A 仓 · 茅台经销华东</div>
+          </div>
+          <div class="hero-doc-status">
+            <i data-lucide="check" class="icon"></i>已审批
+          </div>
+        </div>
+
+        <div class="hero-doc-row">
+          <div>茅台飞天 53° · 500ml×6</div><div>4</div><div>¥8,000</div>
+        </div>
+        <div class="hero-doc-row">
+          <div>五粮液第八代 52°</div><div>20</div><div>¥18,400</div>
+        </div>
+        <div class="hero-doc-row">
+          <div>剑南春水晶剑 52°</div><div>2</div><div>¥4,200</div>
+        </div>
+        <div class="hero-doc-row">
+          <div>拉菲传奇波尔多</div><div>10</div><div>¥17,800</div>
+        </div>
+
+        <div class="hero-doc-foot">
+          <div>合计</div><div>36</div><div>¥48,400</div>
+        </div>
+
+        <div style="margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--border-default); font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.02em;">
+          审批人 李建国 · 2026-05-23 14:32:08
+        </div>
+      </div>
+
+      <!-- Stamp -->
+      <div class="hero-stamp">
+        <svg class="ring" viewBox="0 0 130 130">
+          <defs>
+            <path id="stampRing" d="M 65, 65 m -50, 0 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0" />
+          </defs>
+          <text fontSize="8" fill="#8B2331" fontFamily="'Noto Sans SC', sans-serif" fontWeight="600" letterSpacing="3">
+            <textPath href="#stampRing" startOffset="2%">岩美 · 审批通过 · APPROVED · 岩美 ·</textPath>
+          </text>
+        </svg>
+        <div class="hero-stamp-core">
+          <div class="big">通过</div>
+          <div class="sub">APPROVED</div>
+          <div class="date">2026.05.23</div>
+        </div>
+      </div>
     </div>
   </div>
-</div>
+</section>
 
-<!-- Workflow -->
-<section class="workflow-section">
-  <div class="container">
-    <div class="section-title">审批流程步骤</div>
-    <p class="section-sub">以入库单为例，完整的操作流程如下：</p>
-    <div class="steps">
-      <div class="step">
-        <div class="step-num">1</div>
-        <div class="step-content">
-          <h3>创建入库单</h3>
-          <p>库管或采购员录入入库信息：供应商、仓库、商品明细（含批次号、生产日期）。保存为草稿，随时修改。</p>
-          <span class="step-badge blue"><i data-lucide="file-edit" style="width:11px;height:11px"></i> 草稿</span>
+<!-- ============== BLOCK 1: State machine ============== -->
+<section class="feat-block">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="git-branch" class="icon"></i>统一状态机</div>
+      <h2>四种状态，<br/>覆盖所有业务单据</h2>
+      <p class="lead">
+        入库、出库、盘点、调拨 —— 全部走同一套状态：草稿 → 待审核 → 已审批 / 已拒绝。员工学一次，全员通用。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="lock" class="icon"></i>
+          <div>
+            <strong>提交后即锁定</strong>
+            从「草稿」进入「待审核」即不可编辑，避免审批人看到的与录入人提交的不一致。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="zap" class="icon"></i>
+          <div>
+            <strong>状态机由后端事务驱动</strong>
+            状态变更与库存 / 账款变更在同一事务内，要么都成功，要么都回滚。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="layers" class="icon"></i>
+          <div>
+            <strong>一套界面，四种单据复用</strong>
+            前端审批界面统一，节省培训成本，避免分模块状态差异。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="state-machine">
+        <div class="state-machine-tabs">
+          <div class="state-tab active">入库单</div>
+          <div class="state-tab">出库单</div>
+          <div class="state-tab">盘点单</div>
+          <div class="state-tab">调拨单</div>
+        </div>
+        <div class="state-machine-meta">stock_in_orders.status</div>
+
+        <div class="sm-diagram">
+          <div class="sm-node draft">
+            <div class="sm-bubble">
+              <i data-lucide="pencil" class="icon"></i>草稿
+            </div>
+            <small>draft</small>
+          </div>
+
+          <div class="sm-arrow">
+            <span class="sm-arrow-label">提交</span>
+            <svg viewBox="0 0 36 14"><line x1="0" y1="7" x2="30" y2="7" stroke="currentColor" strokeWidth="1.5"/><polyline points="26 3 32 7 26 11" fill="none" stroke="currentColor" strokeWidth="1.5"/></svg>
+          </div>
+
+          <div class="sm-node pending">
+            <div class="sm-bubble">
+              <i data-lucide="clock" class="icon"></i>待审核
+            </div>
+            <small>pending</small>
+          </div>
+
+          <div class="sm-arrow">
+            <span class="sm-arrow-label">审批</span>
+            <svg viewBox="0 0 36 14"><line x1="0" y1="7" x2="30" y2="7" stroke="currentColor" strokeWidth="1.5"/><polyline points="26 3 32 7 26 11" fill="none" stroke="currentColor" strokeWidth="1.5"/></svg>
+          </div>
+
+          <div class="sm-fork">
+            <div class="sm-node approved">
+              <div class="sm-bubble">
+                <i data-lucide="check" class="icon"></i>已审批
+              </div>
+              <small>approved</small>
+            </div>
+            <div class="sm-node rejected">
+              <div class="sm-bubble">
+                <i data-lucide="x" class="icon"></i>已拒绝
+              </div>
+              <small>rejected</small>
+            </div>
+          </div>
+        </div>
+
+        <div class="sm-applies">
+          <span>同一状态机适用于：</span>
+          <span class="sm-applies-pill"><i data-lucide="package-plus" class="icon"></i>入库单</span>
+          <span class="sm-applies-pill"><i data-lucide="package-minus" class="icon"></i>出库单</span>
+          <span class="sm-applies-pill"><i data-lucide="clipboard-check" class="icon"></i>盘点单</span>
+          <span class="sm-applies-pill"><i data-lucide="arrow-right-left" class="icon"></i>调拨单</span>
         </div>
       </div>
-      <div class="step">
-        <div class="step-num">2</div>
-        <div class="step-content">
-          <h3>提交审核</h3>
-          <p>确认无误后提交，单据状态变为「待审核」，管理员收到待办提示。提交后不可编辑，防止信息篡改。</p>
-          <span class="step-badge amber"><i data-lucide="clock" style="width:11px;height:11px"></i> 待审核</span>
+    </div>
+  </div>
+</section>
+
+<!-- ============== BLOCK 2: Auto-linking ============== -->
+<section class="feat-block reverse">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag success"><i data-lucide="zap" class="icon"></i>自动联动</div>
+      <h2>按一次"通过"，<br/>库存与账款都跟着动</h2>
+      <p class="lead">
+        审批通过不是一个"标记"，而是一组真实的数据库写入。库存增减、应付应收、批次创建 —— 在同一事务内完成。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="database" class="icon"></i>
+          <div>
+            <strong>事务级一致性</strong>
+            底层用 <code style="font-family: var(--font-mono); font-size: 0.9em; background: var(--gray-100); padding: 1px 5px; border-radius: 3px;">FOR UPDATE</code> 锁住库存行，杜绝并发超卖。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="link-2" class="icon"></i>
+          <div>
+            <strong>账款自动落地</strong>
+            入库审批 → 自动生成应付；出库审批 → 自动生成应收。挂在对应往来单位名下，可逐月对账。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="git-merge" class="icon"></i>
+          <div>
+            <strong>批次自动建立</strong>
+            每笔入库审批通过即创建一个新批次，后续出库按 FIFO 自动扣减。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="linking-visual">
+        <div class="linking-doc">
+          <div class="linking-doc-head">
+            <div>
+              <div class="linking-doc-id">RK20260523000007</div>
+              <div style="font-size: 11px; color: var(--fg-muted); margin-top: 2px; font-family: var(--font-mono);">36 瓶 · ¥48,400 · 待审核</div>
+            </div>
+            <button class="linking-doc-action">
+              <i data-lucide="check" class="icon"></i>审批通过
+            </button>
+          </div>
         </div>
-      </div>
-      <div class="step">
-        <div class="step-num">3</div>
-        <div class="step-content">
-          <h3>管理员审批</h3>
-          <p>管理员核实单据后选择「审批通过」或「驳回」。驳回时可填写驳回原因，由经办人修改后重新提交。</p>
-          <div style="display:flex;gap:8px;margin-top:8px;">
-            <span class="step-badge green"><i data-lucide="check" style="width:11px;height:11px"></i> 审批通过</span>
-            <span class="step-badge red"><i data-lucide="x" style="width:11px;height:11px"></i> 已驳回</span>
+
+        <div class="linking-arrow">
+          <span class="linking-arrow-label">
+            <i data-lucide="zap" class="icon"></i>事务内同步执行
+          </span>
+        </div>
+
+        <div class="linking-effects">
+          <div class="linking-effect">
+            <div class="linking-effect-label">
+              <i data-lucide="package" class="icon"></i>库存
+            </div>
+            <div class="linking-effect-num">+36 瓶</div>
+            <div class="linking-effect-from">A 仓 · 2,780 <span class="delta">→ 2,816</span></div>
+          </div>
+          <div class="linking-effect">
+            <div class="linking-effect-label">
+              <i data-lucide="wallet" class="icon"></i>应付账款
+            </div>
+            <div class="linking-effect-num">+¥48,400</div>
+            <div class="linking-effect-from">茅台经销华东 · 新增 1 笔</div>
+          </div>
+          <div class="linking-effect">
+            <div class="linking-effect-label">
+              <i data-lucide="layers" class="icon"></i>批次
+            </div>
+            <div class="linking-effect-num">+4 个</div>
+            <div class="linking-effect-from">L-2026-05-001 ~ L-2026-05-004</div>
+          </div>
+          <div class="linking-effect">
+            <div class="linking-effect-label">
+              <i data-lucide="scroll-text" class="icon"></i>库存流水
+            </div>
+            <div class="linking-effect-num">+4 条</div>
+            <div class="linking-effect-from">逐 SKU 写入 inventory_logs</div>
           </div>
         </div>
       </div>
-      <div class="step">
-        <div class="step-num">4</div>
-        <div class="step-content">
-          <h3>库存自动更新</h3>
-          <p>审批通过后，系统在同一事务中完成库存增加与财务记录写入，保证数据一致性。操作不可逆，留存完整记录。</p>
-          <span class="step-badge green"><i data-lucide="package-check" style="width:11px;height:11px"></i> 已完成</span>
+    </div>
+  </div>
+</section>
+
+<!-- ============== BLOCK 3: Stock validation ============== -->
+<section class="feat-block">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag danger"><i data-lucide="shield-alert" class="icon"></i>出库库存校验</div>
+      <h2>库存不足，<br/>审批直接被拦下</h2>
+      <p class="lead">
+        出库单审批前，系统按 SKU 实时核对库存。任一行不足，整单审批失败、库存与账款均不变。永远不会超卖。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="search-check" class="icon"></i>
+          <div>
+            <strong>逐行校验</strong>
+            按出库单每一行的 商品 × 仓库 × 数量 校验，失败明确指出是哪一行。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="undo-2" class="icon"></i>
+          <div>
+            <strong>整单回滚</strong>
+            校验失败时单据状态回到「待审核」，无需重新录入。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="settings-2" class="icon"></i>
+          <div>
+            <strong>可配置宽松模式</strong>
+            系统设置中可开启「允许超量出库」（备货场景使用），缺省关闭。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="validation-card">
+        <div class="validation-head">
+          <div class="validation-title">出库单 CK20260523000012 · 审批前校验</div>
+          <div class="validation-meta">客户 北辰大酒店 · B 仓</div>
+        </div>
+        <div class="validation-body">
+          <div class="validation-row head">
+            <div>商品</div><div>需出</div><div>库存</div><div>状态</div>
+          </div>
+          <div class="validation-row">
+            <div>茅台飞天 53° · 500ml×6</div>
+            <div class="qty-req">24</div>
+            <div class="qty-stock">148</div>
+            <div style="text-align: right;"><span style="background: var(--success-50); color: var(--success-700); font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 500;">充足</span></div>
+          </div>
+          <div class="validation-row invalid">
+            <div>剑南春水晶剑 52°</div>
+            <div class="qty-req">20</div>
+            <div class="qty-stock">12</div>
+            <div style="text-align: right;"><span class="qty-shortage">短缺 8</span></div>
+          </div>
+          <div class="validation-row">
+            <div>拉菲传奇波尔多 · 750ml</div>
+            <div class="qty-req">6</div>
+            <div class="qty-stock">64</div>
+            <div style="text-align: right;"><span style="background: var(--success-50); color: var(--success-700); font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 500;">充足</span></div>
+          </div>
+
+          <div class="error-toast">
+            <i data-lucide="x-circle" class="icon"></i>
+            <div>
+              <div class="error-toast-title">审批已拒绝 · 库存不足</div>
+              <div class="error-toast-body">
+                第 2 行「剑南春水晶剑」B 仓库存仅 12 瓶，本单需 20 瓶，短缺 8 瓶。请补足库存后重新提交，或修改出库数量。
+              </div>
+            </div>
+          </div>
+
+          <div class="api-response">
+            <span style="color: #888;">// HTTP/1.1 422 Unprocessable Entity</span><br/>
+{<br/>
+&nbsp;&nbsp;<span class="key">"ok"</span>: <span class="bool">false</span>,<br/>
+&nbsp;&nbsp;<span class="key">"error"</span>: <span class="str">"insufficient_inventory"</span>,<br/>
+&nbsp;&nbsp;<span class="key">"items"</span>: [<br/>
+&nbsp;&nbsp;&nbsp;&nbsp;{ <span class="key">"sku"</span>: <span class="str">"XJ-330-024"</span>, <span class="key">"required"</span>: <span class="num">20</span>, <span class="key">"available"</span>: <span class="num">12</span> }<br/>
+&nbsp;&nbsp;]<br/>
+}
+          </div>
         </div>
       </div>
     </div>
   </div>
 </section>
 
-<!-- Role matrix -->
-<section class="matrix-section">
-  <div class="container">
-    <div class="section-title">角色权限矩阵</div>
-    <p class="section-sub">不同角色在审批流程中的权限一览。</p>
-    <table class="matrix-table">
-      <thead>
-        <tr>
-          <th>操作</th>
-          <th>管理员</th>
-          <th>普通用户</th>
-          <th>只读用户</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>创建入库/出库单（草稿）</td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-no">禁止</span></td>
-        </tr>
-        <tr>
-          <td>提交审核</td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-no">禁止</span></td>
-        </tr>
-        <tr>
-          <td>审批通过 / 驳回</td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-no">禁止</span></td>
-          <td><span class="perm-no">禁止</span></td>
-        </tr>
-        <tr>
-          <td>查看单据列表</td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-        </tr>
-        <tr>
-          <td>用户管理</td>
-          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
-          <td><span class="perm-no">禁止</span></td>
-          <td><span class="perm-no">禁止</span></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</section>
+<!-- ============== BLOCK 4: Audit log ============== -->
+<section class="feat-block reverse">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="file-clock" class="icon"></i>审计留痕</div>
+      <h2>每一步操作，<br/>都签着人名、贴着时间</h2>
+      <p class="lead">
+        从录入到结清，每一次状态变更都记录经办人、时间、决策、备注。是单据的完整生命周期，也是合规审计的完整证据。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="user-check" class="icon"></i>
+          <div>
+            <strong>谁动的、什么时候动的</strong>
+            14 个字段：actor / role / device / IP / 时间 / 备注 / 旧值 / 新值 / 原因 …
+          </div>
+        </li>
+        <li>
+          <i data-lucide="hard-drive" class="icon"></i>
+          <div>
+            <strong>永久保留</strong>
+            审计日志不会被任何角色（含超级管理员）删除或修改。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="file-down" class="icon"></i>
+          <div>
+            <strong>可导出</strong>
+            按单据 / 时间段 / 经办人 任意组合筛选导出，应对税务、内审、合规检查。
+          </div>
+        </li>
+      </ul>
+    </div>
 
-<!-- Audit log -->
-<section class="audit-section">
-  <div class="container">
-    <div class="section-title">完整操作日志</div>
-    <p class="section-sub">每笔库存变动都有对应的操作记录，明确到具体操作人和时间点。</p>
-    <div class="audit-log">
-      <div class="audit-header">
-        <i data-lucide="clock" style="width:14px;height:14px;color:var(--brand-500)"></i>
-        <span class="audit-header-title">库存流水记录 — 麦卡伦 12年</span>
-      </div>
-      <div class="audit-row">
-        <div class="audit-dot dot-green"></div>
-        <div class="audit-time">05-23 14:32</div>
-        <div class="audit-user">王经理</div>
-        <div class="audit-action">审批通过入库单 <strong>RK20250523000001</strong>，库存 +24 瓶（批次 L-2026-01）</div>
-      </div>
-      <div class="audit-row">
-        <div class="audit-dot dot-blue"></div>
-        <div class="audit-time">05-23 11:08</div>
-        <div class="audit-user">李库管</div>
-        <div class="audit-action">提交入库单 <strong>RK20250523000001</strong> 审核，共 24 瓶</div>
-      </div>
-      <div class="audit-row">
-        <div class="audit-dot dot-red"></div>
-        <div class="audit-time">05-22 16:45</div>
-        <div class="audit-user">王经理</div>
-        <div class="audit-action">驳回出库单 <strong>CK20250522000003</strong>，原因：数量与实际不符</div>
-      </div>
-      <div class="audit-row">
-        <div class="audit-dot dot-amber"></div>
-        <div class="audit-time">05-22 15:30</div>
-        <div class="audit-user">张吧台</div>
-        <div class="audit-action">提交出库申请 <strong>CK20250522000003</strong>，领用 12 瓶</div>
+    <div class="feat-visual">
+      <div class="audit-timeline">
+        <div class="audit-head">
+          <div class="audit-doc-id">RK20260523000007</div>
+          <div class="audit-doc-status">已审批</div>
+        </div>
+        <div class="audit-events">
+          <div class="audit-event create">
+            <div class="audit-event-marker"><i data-lucide="plus" class="icon"></i></div>
+            <div class="audit-event-body">
+              <div class="audit-event-action">创建草稿</div>
+              <div class="audit-event-meta">
+                <span><strong>王芳</strong> · 操作员</span>
+                <span class="time">2026-05-23 11:24:08</span>
+                <span>192.168.10.42 · 入库 PC</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="audit-event create">
+            <div class="audit-event-marker"><i data-lucide="pencil" class="icon"></i></div>
+            <div class="audit-event-body">
+              <div class="audit-event-action">编辑明细</div>
+              <div class="audit-event-meta">
+                <span><strong>王芳</strong></span>
+                <span class="time">2026-05-23 13:02:51</span>
+                <span>修改 4 项 · 新增 1 项</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="audit-event submit">
+            <div class="audit-event-marker"><i data-lucide="upload" class="icon"></i></div>
+            <div class="audit-event-body">
+              <div class="audit-event-action">提交审核</div>
+              <div class="audit-event-meta">
+                <span><strong>王芳</strong></span>
+                <span class="time">2026-05-23 13:15:22</span>
+                <span>状态 · 草稿 → 待审核</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="audit-event approve">
+            <div class="audit-event-marker"><i data-lucide="check" class="icon"></i></div>
+            <div class="audit-event-body">
+              <div class="audit-event-action">审批通过</div>
+              <div class="audit-event-meta">
+                <span><strong>李建国</strong> · 管理员</span>
+                <span class="time">2026-05-23 14:32:08</span>
+                <span>库存 +36 · 应付 +¥48,400</span>
+              </div>
+              <div class="audit-event-comment">已核对数量与单价，可入库。</div>
+            </div>
+          </div>
+
+          <div class="audit-event settle">
+            <div class="audit-event-marker"><i data-lucide="wallet" class="icon"></i></div>
+            <div class="audit-event-body">
+              <div class="audit-event-action">应付结清</div>
+              <div class="audit-event-meta">
+                <span><strong>张磊</strong> · 财务</span>
+                <span class="time">2026-05-26 10:08:33</span>
+                <span>AP20260523000012 · 全额结清</span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </section>
 
-<section class="cta-section">
-  <div class="container">
-    <h2>查看所有功能</h2>
-    <p>了解库存管理的完整能力，包括批次追溯和盘点功能。</p>
-    <div class="cta-actions">
-      <a href="/features/inventory.html" class="btn btn-primary btn-lg">库存管理功能 <i data-lucide="arrow-right" class="icon"></i></a>
-      <a href="/app/" class="btn btn-secondary btn-lg">进入管理端</a>
+<!-- ============== BLOCK 5: Reversal ============== -->
+<section class="feat-block">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag" style="background: var(--accent-50); color: var(--accent-700);"><i data-lucide="undo" class="icon"></i>红冲机制</div>
+      <h2>审批不可撤销，<br/>但错误可以修正</h2>
+      <p class="lead">
+        审批一旦通过，原单据永远是历史的真实记录。如有错误，只能通过红冲（反向调整单）来修正 —— 既保留审计链，又能纠正库存与账款。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="archive" class="icon"></i>
+          <div>
+            <strong>原单不动</strong>
+            原始单据完整保留，不被覆盖、不被删除，永久可查。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="rotate-ccw" class="icon"></i>
+          <div>
+            <strong>反向调整自动生成</strong>
+            点击「红冲」一键生成反向单据，数量取反、关联原单据 ID、状态自动进入「待审核」。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="calculator" class="icon"></i>
+          <div>
+            <strong>净库存为零</strong>
+            红冲单审批通过后，库存与账款回到红冲前的状态，但审计链上多了两笔记录而非清除。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="reversal-pair">
+        <div class="reversal-doc original">
+          <div class="reversal-stamp-mini" style="color: var(--success-500); border-color: var(--success-500);">已审批</div>
+          <div class="reversal-doc-id">RK20260523000007</div>
+          <div class="reversal-doc-meta">2026-05-23 · 入库 · 茅台经销华东</div>
+          <div class="reversal-doc-row"><div>茅台飞天 53°</div><div>+4</div></div>
+          <div class="reversal-doc-row"><div>五粮液第八代</div><div>+20</div></div>
+          <div class="reversal-doc-row"><div>剑南春水晶剑</div><div>+2</div></div>
+          <div class="reversal-doc-row"><div>拉菲传奇</div><div>+10</div></div>
+          <div class="reversal-doc-foot"><div>合计</div><div>+36 · ¥48,400</div></div>
+        </div>
+
+        <div class="reversal-arrow">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+          <span class="reversal-arrow-label">红冲</span>
+        </div>
+
+        <div class="reversal-doc reversal">
+          <div class="reversal-stamp-mini">红 冲</div>
+          <div class="reversal-doc-id">RK20260524000001</div>
+          <div class="reversal-doc-meta">2026-05-24 · 反向调整 · 关联 ...000007</div>
+          <div class="reversal-doc-row"><div>茅台飞天 53°</div><div>−4</div></div>
+          <div class="reversal-doc-row"><div>五粮液第八代</div><div>−20</div></div>
+          <div class="reversal-doc-row"><div>剑南春水晶剑</div><div>−2</div></div>
+          <div class="reversal-doc-row"><div>拉菲传奇</div><div>−10</div></div>
+          <div class="reversal-doc-foot"><div>合计</div><div>−36 · −¥48,400</div></div>
+        </div>
+      </div>
+
+      <div class="reversal-net">
+        <div class="reversal-net-item">
+          <div class="reversal-net-label">原单库存影响</div>
+          <div class="reversal-net-val">+36 瓶</div>
+        </div>
+        <div class="reversal-net-item">
+          <div class="reversal-net-label">红冲库存影响</div>
+          <div class="reversal-net-val" style="color: #C97B86;">−36 瓶</div>
+        </div>
+        <div class="reversal-net-item">
+          <div class="reversal-net-label">净影响</div>
+          <div class="reversal-net-val" style="color: var(--success-500);">0</div>
+        </div>
+      </div>
     </div>
   </div>
 </section>
 
+<!-- ============== BLOCK 6: Permission matrix ============== -->
+<section class="feat-block reverse">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="users" class="icon"></i>权限矩阵</div>
+      <h2>四级角色，<br/>各干各的事</h2>
+      <p class="lead">
+        系统内置四个角色，按岗位职责拆分审批权。最小权限原则 —— 不该看的看不到，不该签的签不了。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="user" class="icon"></i>
+          <div>
+            <strong>角色绑定门店</strong>
+            一个用户只属于一个门店（<code style="font-family: var(--font-mono); font-size: 0.9em; background: var(--gray-100); padding: 1px 5px; border-radius: 3px;">shop_id</code>），跨店访问数据天然隔离。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="shield" class="icon"></i>
+          <div>
+            <strong>角色升降随时生效</strong>
+            管理员调整角色后，下一次请求即按新权限校验，无需重新登录。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="eye" class="icon"></i>
+          <div>
+            <strong>只读角色可看不可改</strong>
+            适合财务、税务、内审岗位 —— 看见全部数据，但不能产生任何变更。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="perm-matrix">
+        <div class="perm-row head">
+          <div>角色</div>
+          <div>查看</div>
+          <div>录入</div>
+          <div>审批</div>
+          <div>设置</div>
+        </div>
+        <div class="perm-row">
+          <div class="perm-role">超级管理员<small>superadmin · 系统最高</small></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+        </div>
+        <div class="perm-row">
+          <div class="perm-role">管理员<small>admin · 门店负责人</small></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+        </div>
+        <div class="perm-row">
+          <div class="perm-role">操作员<small>operator · 日常录入</small></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell no"><i data-lucide="minus" class="icon"></i></div>
+        </div>
+        <div class="perm-row">
+          <div class="perm-role">只读<small>readonly · 财务 / 内审</small></div>
+          <div class="perm-cell yes"><i data-lucide="check" class="icon"></i></div>
+          <div class="perm-cell no"><i data-lucide="minus" class="icon"></i></div>
+          <div class="perm-cell no"><i data-lucide="minus" class="icon"></i></div>
+          <div class="perm-cell no"><i data-lucide="minus" class="icon"></i></div>
+        </div>
+      </div>
+
+      <div style="margin-top: 14px; font-size: 12px; color: var(--fg-muted); display: flex; gap: 14px; padding: 0 4px;">
+        <span style="display: flex; align-items: center; gap: 6px;">
+          <i data-lucide="check" style="width: 12px; height: 12px; color: var(--success-500);"></i>允许
+        </span>
+        <span style="display: flex; align-items: center; gap: 6px;">
+          <i data-lucide="minus" style="width: 12px; height: 12px; color: var(--gray-300);"></i>禁止
+        </span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== Use cases ============== -->
+<section class="section" style="background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);">
+  <div class="container">
+    <p class="eyebrow">典型场景</p>
+    <h2 style="font-size: 36px; font-weight: 600; color: var(--brand-900); margin: 0 0 12px; letter-spacing: var(--tracking-cn-display);">
+      审核驱动业务流，落到实际操作里是什么样
+    </h2>
+    <p style="font-size: var(--text-lg); color: var(--fg-muted); max-width: 640px; margin: 0;">
+      三个常见门店场景，看审核流如何把日常工作中的失误拦在事前。
+    </p>
+
+    <div class="usecases-grid">
+      <div class="usecase-card">
+        <i data-lucide="package-x" class="icon"></i>
+        <h4>避免超卖发不了货</h4>
+        <p>大客户来订 24 瓶飞天，操作员录了出库单。审批时系统提示某 SKU 库存只剩 12 瓶 —— 提前发现，先补货后出库。</p>
+        <div class="quote">"以前是发了货才发现没库存，半夜紧急调货。现在审批就拦下，省事多了。"</div>
+      </div>
+      <div class="usecase-card">
+        <i data-lucide="file-search" class="icon"></i>
+        <h4>财务来对账，3 秒定位</h4>
+        <p>财务问"这批拉菲是哪个供应商进的，谁审的"，打开单据点击「审计链」，从草稿、提交、审批到结清的每一步都列得清清楚楚。</p>
+        <div class="quote">"以前要翻三个 Excel 表对照，现在一张图就讲完了。"</div>
+      </div>
+      <div class="usecase-card">
+        <i data-lucide="rotate-ccw" class="icon"></i>
+        <h4>录错了不慌</h4>
+        <p>新员工录错入库单一次性多写了 10 瓶，审批通过后才发现。点击「红冲」，反向调整单一键生成，1 分钟修正库存与账款。</p>
+        <div class="quote">"原始数据保留，红冲也留痕，内审完全不会有问题。"</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== Final CTA ============== -->
+<section>
+  <div class="container" style="padding-top: 80px;">
+    <div class="cta-strip">
+      <div>
+        <h2>每一笔库存变动都有人负责，<br/>就从一次审批开始。</h2>
+        <p>30 天免费试用，无需绑定支付方式。所有审批与审计数据可随时导出。</p>
+      </div>
+      <div class="cta-strip-actions">
+        <a href="#" class="btn btn-primary btn-lg">
+          免费开通试用<i data-lucide="arrow-right" class="icon"></i>
+        </a>
+        <a href="/features/inventory.html" class="btn btn-secondary btn-lg">
+          ← 上一个功能：库存管理
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== Footer ============== -->
 <footer>
   <div class="container">
-    <div class="footer-inner">
-      <div class="footer-brand"><img src="../assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
-      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="../assets/logo-full.svg" alt="岩美" />
+        <p>为酒行与酒店设计的库存、审核、财务一体化管理平台。</p>
+        <div class="footer-contact">
+          <div>support@yanmei.app</div>
+          <div>400-880-8888</div>
+        </div>
+      </div>
+      <div class="footer-col">
+        <h5>产品</h5>
+        <ul>
+          <li><a href="/#modules">核心模块</a></li>
+          <li><a href="/features/inventory.html">库存管理</a></li>
+          <li><a href="/features/approval.html">审核流</a></li>
+          <li><a href="/#pricing">价格方案</a></li>
+          <li><a href="/download.html">下载客户端</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>资源</h5>
+        <ul>
+          <li><a href="/docs.html">使用手册</a></li>
+          <li><a href="#">API 文档</a></li>
+          <li><a href="#">视频教程</a></li>
+          <li><a href="#">数据导入模板</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>客户支持</h5>
+        <ul>
+          <li><a href="/#faq">常见问题</a></li>
+          <li><a href="#">提交工单</a></li>
+          <li><a href="#">技术支持</a></li>
+          <li><a href="#">服务等级</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>公司</h5>
+        <ul>
+          <li><a href="#">关于岩美</a></li>
+          <li><a href="#">客户案例</a></li>
+          <li><a href="#">招贤纳士</a></li>
+          <li><a href="#">联系我们</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <div>© 2026 岩美科技 · 保留所有权利</div>
+      <div>沪 ICP 备 2026000000 号 · 沪公网安备 31010000000000 号</div>
     </div>
   </div>
 </footer>
 
-<script>lucide.createIcons();</script>
+<script>
+function getAuthUser() {
+  var token = localStorage.getItem('flutter.access_token');
+  var username = localStorage.getItem('flutter.username');
+  var realName = localStorage.getItem('flutter.real_name') || '';
+  var role = localStorage.getItem('flutter.role') || '';
+  var shopNo = localStorage.getItem('flutter.shop_no') || '';
+  if (!token || !username) return null;
+  return { username: username, realName: realName, role: role, shopNo: shopNo };
+}
+function doLogout() {
+  ['access_token','refresh_token','username','real_name','shop_no','shop_id','role']
+    .forEach(function(k) { localStorage.removeItem('flutter.' + k); });
+  location.reload();
+}
+function toggleUserMenu() {
+  var el = document.getElementById('userDropdown');
+  if (el) el.classList.toggle('open');
+}
+function renderNav() {
+  var cta = document.getElementById('nav-cta');
+  if (!cta) return;
+  var user = getAuthUser();
+  if (user) {
+    var initial = (user.realName || user.username).charAt(0).toUpperCase();
+    var displayName = user.realName || user.username;
+    var roleLabel = { admin: '管理员', operator: '操作员', readonly: '只读', superadmin: '超管' }[user.role] || user.role;
+    cta.innerHTML =
+      '<div class="nav-user">' +
+        '<button class="nav-user-btn" onclick="toggleUserMenu()">' +
+          '<div class="nav-avatar">' + initial + '</div>' +
+          '<span>' + displayName + '</span>' +
+          '<i data-lucide="chevron-down" class="icon"></i>' +
+        '</button>' +
+        '<div class="nav-dropdown" id="userDropdown">' +
+          '<div class="nav-dropdown-info">' +
+            '<div class="nav-dropdown-name">' + displayName + '</div>' +
+            '<div class="nav-dropdown-role">' + roleLabel + (user.shopNo ? ' · ' + user.shopNo : '') + '</div>' +
+          '</div>' +
+          '<a href="/app"><i data-lucide="layout-dashboard" class="icon"></i>进入系统</a>' +
+          '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>' +
+        '</div>' +
+      '</div>';
+  } else {
+    cta.innerHTML =
+      '<a href="/app/login" class="btn btn-ghost">登录</a>' +
+      '<a href="/app/register" class="btn btn-primary">免费试用</a>';
+  }
+  if (window.lucide) lucide.createIcons();
+}
+document.addEventListener('click', function(e) {
+  var dropdown = document.getElementById('userDropdown');
+  if (dropdown && dropdown.classList.contains('open')) {
+    var userEl = dropdown.closest('.nav-user');
+    if (userEl && !userEl.contains(e.target)) dropdown.classList.remove('open');
+  }
+});
+document.addEventListener('DOMContentLoaded', function() {
+  if (window.lucide) lucide.createIcons();
+  renderNav();
+});
+</script>
+
 </body>
 </html>
diff --git a/web/features/inventory.html b/web/features/inventory.html
index e5512b3..b545e13 100644
--- a/web/features/inventory.html
+++ b/web/features/inventory.html
@@ -3,283 +3,1456 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>库存管理功能 — 岩美酒库管理系统</title>
+<title>库存管理 · 岩美酒库管理系统</title>
 <link rel="stylesheet" href="../assets/colors_and_type.css" />
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
 <style>
 * { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans); color: var(--fg-default);
+  background: var(--bg-surface);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "tnum" 1;
+}
+img, svg { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }
-.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
+
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  height: 40px; padding: 0 18px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-md); font-weight: 500;
+  border: 1px solid transparent;
+  transition: background var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
+}
 .btn-primary { background: var(--brand-500); color: #fff; }
 .btn-primary:hover { background: var(--brand-600); }
 .btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
-.btn-secondary:hover { background: var(--gray-50); }
-.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
-.icon { width: 18px; height: 18px; }
+.btn-secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }
+.btn-ghost { background: transparent; color: var(--fg-default); }
+.btn-ghost:hover { background: var(--gray-100); }
+.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-lg); }
+.btn .icon { width: 18px; height: 18px; }
 
-.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
-.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
-.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
-.nav-brand img { height: 30px; }
-.nav-links { display: flex; gap: 2px; }
-.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
-.nav-links a:hover { background: var(--gray-100); }
-.nav-links a.active { color: var(--brand-500); font-weight: 500; }
-.nav-cta { display: flex; gap: 10px; }
+.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+.section { padding: 96px 0; }
+.eyebrow {
+  font-size: var(--text-xs); font-weight: 600;
+  letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--brand-500); margin: 0 0 12px;
+}
 
-.page-hero { padding: 80px 0 64px; }
-.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 12px; }
-.page-hero h1 { font-size: 44px; font-weight: 700; color: var(--brand-900); margin: 0 0 18px; line-height: 1.15; }
-.page-hero .lead { font-size: 18px; line-height: 1.65; color: var(--gray-600); margin: 0 0 36px; max-width: 600px; }
-.hero-actions { display: flex; gap: 12px; }
+/* Top Nav */
+.topnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
+.topnav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
+.topnav-brand { display: flex; align-items: center; gap: 10px; }
+.topnav-brand img { height: 32px; }
+.topnav-links { display: flex; align-items: center; gap: 4px; font-size: var(--text-md); color: var(--gray-700); }
+.topnav-links a { padding: 8px 14px; border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-standard); }
+.topnav-links a:hover { background: var(--gray-100); color: var(--brand-900); }
+.topnav-links a.active { color: var(--brand-500); background: var(--brand-50); }
+.topnav-cta { display: flex; gap: 10px; align-items: center; }
 
-.feature-list { padding: 72px 0; }
-.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 96px; }
-.feature-row:last-child { margin-bottom: 0; }
-.feature-row.reverse { }
-.feature-text .tag { display: inline-block; background: var(--brand-50); color: var(--brand-700); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; margin-bottom: 14px; }
-.feature-text h2 { font-size: 28px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
-.feature-text p { font-size: 15px; line-height: 1.7; color: var(--fg-muted); margin: 0 0 20px; }
-.feature-text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
-.feature-text li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--fg-default); }
-.feature-text li i { width: 16px; height: 16px; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
-.feature-visual { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
-.visual-header { background: var(--gray-50); border-bottom: 1px solid var(--border-default); padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
-.visual-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
-.mock-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
-.mock-badge.green { background: var(--success-50); color: var(--success-700); }
-.mock-badge.amber { background: var(--warning-50); color: var(--warning-700); }
-.mock-badge.blue { background: var(--brand-50); color: var(--brand-700); }
-.mock-table-wrap { padding: 0; }
-.mock-thead { display: grid; background: var(--gray-50); border-bottom: 1px solid var(--border-default); padding: 7px 16px; font-size: 11px; color: var(--fg-muted); font-weight: 500; gap: 8px; }
-.mock-row-item { display: grid; border-bottom: 1px solid var(--border-subtle); padding: 9px 16px; font-size: 12px; color: var(--fg-default); gap: 8px; align-items: center; }
-.mock-row-item:last-child { border-bottom: none; }
-.cols-inv { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
+/* Nav user dropdown */
+.nav-user { position: relative; }
+.nav-user-btn {
+  display: flex; align-items: center; gap: 8px;
+  height: 36px; padding: 0 12px 0 8px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  background: var(--gray-0);
+  font-size: var(--text-sm); color: var(--gray-800);
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.nav-user-btn:hover { background: var(--gray-50); }
+.nav-avatar {
+  width: 22px; height: 22px; border-radius: 50%;
+  background: var(--brand-500); color: #fff;
+  font-size: 11px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.nav-user-btn .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown {
+  display: none; position: absolute; top: calc(100% + 8px); right: 0;
+  min-width: 200px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 6px;
+  z-index: 100;
+}
+.nav-dropdown.open { display: block; }
+.nav-dropdown-info {
+  padding: 8px 10px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 6px;
+}
+.nav-dropdown-name { font-size: var(--text-sm); font-weight: 600; color: var(--brand-900); }
+.nav-dropdown-role { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
+.nav-dropdown a, .nav-dropdown button {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; padding: 8px 10px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm); color: var(--gray-700);
+  background: none; border: none; text-align: left; cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--gray-50); color: var(--brand-900); }
+.nav-dropdown .icon { width: 15px; height: 15px; color: var(--fg-muted); }
+.nav-dropdown .logout { color: var(--danger-600); }
+.nav-dropdown .logout .icon { color: var(--danger-400); }
 
-.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-default); border-bottom: 1px solid var(--border-default); }
-.stat-block { background: var(--gray-0); padding: 16px 20px; }
-.stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
-.stat-val { font-size: 22px; font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; }
+/* ====================================================================
+   HERO
+   ==================================================================== */
+.feat-hero {
+  position: relative; overflow: hidden;
+  padding: 80px 0 72px;
+  background:
+    radial-gradient(1000px 480px at 88% 8%, rgba(37, 99, 172, 0.08), transparent 60%),
+    linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 80%);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.feat-hero-inner {
+  display: grid;
+  grid-template-columns: 1fr 1.15fr;
+  gap: 56px;
+  align-items: center;
+}
+.feat-breadcrumb {
+  display: flex; align-items: center; gap: 8px;
+  font-size: var(--text-sm); color: var(--fg-muted);
+  margin-bottom: 20px;
+}
+.feat-breadcrumb a { color: var(--fg-muted); }
+.feat-breadcrumb a:hover { color: var(--brand-500); }
+.feat-breadcrumb .icon { width: 14px; height: 14px; color: var(--gray-300); }
+.feat-hero h1 {
+  font-size: 48px; line-height: 1.15;
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900); margin: 0 0 18px;
+  font-weight: 700;
+}
+.feat-hero p.lead {
+  font-size: var(--text-xl); line-height: 1.6;
+  color: var(--gray-600); margin: 0 0 28px;
+}
+.feat-hero .actions { display: flex; gap: 12px; margin-bottom: 28px; }
+.feat-hero .quick-stats {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 0; border-top: 1px solid var(--border-subtle);
+  padding-top: 20px;
+}
+.feat-hero .quick-stat-label { font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.04em; }
+.feat-hero .quick-stat-val { font-size: var(--text-xl); font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; margin-top: 4px; }
 
-.cta-section { padding: 80px 0; background: var(--gray-50); text-align: center; border-top: 1px solid var(--border-default); }
-.cta-section h2 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
-.cta-section p { font-size: 16px; color: var(--fg-muted); margin: 0 0 32px; }
-.cta-actions { display: flex; justify-content: center; gap: 14px; }
+/* Hero composite: stacked cards */
+.composite { position: relative; height: 540px; }
+.composite-card {
+  position: absolute;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.composite-main { top: 0; left: 0; right: 60px; bottom: 60px; box-shadow: var(--shadow-xl); }
+.composite-secondary { right: 0; top: 70px; width: 240px; padding: 16px; box-shadow: var(--shadow-lg); }
+.composite-tertiary { left: 80px; bottom: 0; right: 0; padding: 14px; box-shadow: var(--shadow-md); }
 
-footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
-.footer-inner { display: flex; align-items: center; justify-content: space-between; }
-.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
-.footer-brand img { height: 24px; }
-.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+.mc-head {
+  padding: 12px 16px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.mc-title { font-size: 13px; font-weight: 600; color: var(--brand-900); }
+.mc-tabs { display: flex; gap: 4px; }
+.mc-tab { padding: 3px 10px; font-size: 11px; color: var(--fg-muted); border-radius: var(--radius-sm); }
+.mc-tab.active { background: var(--gray-0); color: var(--brand-700); border: 1px solid var(--brand-200); }
+
+.mc-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 16px; gap: 10px; border-bottom: 1px solid var(--border-subtle); background: var(--gray-25); }
+.mc-stat-label { font-size: 10px; color: var(--fg-subtle); margin-bottom: 2px; }
+.mc-stat-val { font-size: 16px; font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; }
+.mc-stat-val .delta { font-size: 10px; color: var(--success-500); margin-left: 4px; font-weight: 500; }
+
+.mc-table { font-size: 11px; }
+.mc-thead, .mc-trow {
+  display: grid;
+  grid-template-columns: 88px 1fr 50px 60px 60px 70px;
+  padding: 8px 16px;
+  gap: 8px;
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+.mc-thead { background: var(--gray-50); font-size: 10px; font-weight: 500; color: var(--fg-muted); border-bottom: 1px solid var(--border-subtle); }
+.mc-trow { border-bottom: 1px solid var(--border-subtle); color: var(--gray-800); }
+.mc-trow:last-child { border-bottom: none; }
+.mc-trow .sku { font-family: var(--font-mono); color: var(--brand-500); font-size: 10px; }
+.mc-pill { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 9px; font-weight: 500; }
+.mc-pill.ok { background: var(--success-50); color: var(--success-700); }
+.mc-pill.warn { background: var(--warning-50); color: var(--warning-700); }
+.mc-pill.low { background: var(--danger-50); color: var(--danger-700); }
+
+/* Alert card secondary */
+.alert-card-title { font-size: 11px; color: var(--fg-muted); margin-bottom: 8px; letter-spacing: 0.04em; }
+.alert-row {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 10px;
+  background: var(--warning-50);
+  border-left: 2px solid var(--warning-500);
+  border-radius: 3px;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+.alert-row.danger { background: var(--danger-50); border-color: var(--danger-500); }
+.alert-row .name { color: var(--gray-900); font-weight: 500; flex: 1; }
+.alert-row .qty { color: var(--gray-700); font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 11px; }
+
+/* Batch card (tertiary) */
+.batch-title { font-size: 11px; color: var(--fg-muted); margin-bottom: 6px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
+.batch-title .icon { width: 12px; height: 12px; color: var(--brand-500); }
+.batch-row {
+  display: grid;
+  grid-template-columns: 90px 1fr 60px 50px;
+  font-size: 11px;
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--border-subtle);
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+.batch-row:last-child { border-bottom: none; }
+.batch-row .lot { font-family: var(--font-mono); color: var(--brand-600); font-size: 10px; }
+.batch-row .meta { color: var(--fg-muted); font-size: 10px; }
+
+/* ====================================================================
+   FEATURE BLOCKS
+   ==================================================================== */
+.feat-block {
+  padding: 96px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.feat-block:nth-child(even) { background: var(--gray-25); }
+.feat-block-inner {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+  gap: 64px;
+  align-items: center;
+}
+.feat-block.reverse .feat-block-inner { grid-template-columns: 7fr 5fr; }
+.feat-block.reverse .feat-text { order: 2; }
+.feat-block.reverse .feat-visual { order: 1; }
+
+.feat-tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--brand-50);
+  color: var(--brand-700);
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  margin-bottom: 16px;
+}
+.feat-tag .icon { width: 14px; height: 14px; }
+
+.feat-text h2 {
+  font-size: 36px;
+  font-weight: 600;
+  line-height: 1.18;
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900);
+  margin: 0 0 16px;
+}
+.feat-text p.lead {
+  font-size: var(--text-lg);
+  line-height: 1.7;
+  color: var(--gray-600);
+  margin: 0 0 24px;
+}
+.feat-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
+.feat-bullets li {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  gap: 12px;
+  font-size: var(--text-md);
+  color: var(--gray-700);
+  line-height: 1.6;
+  align-items: start;
+}
+.feat-bullets li .icon { width: 18px; height: 18px; color: var(--brand-500); margin-top: 2px; }
+.feat-bullets li strong { color: var(--brand-900); font-weight: 600; display: block; margin-bottom: 2px; }
+
+/* Visual primitives */
+.visual-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.visual-card-head {
+  padding: 14px 18px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.visual-card-title { font-size: var(--text-sm); font-weight: 600; color: var(--brand-900); }
+.visual-card-meta { font-size: 11px; color: var(--fg-muted); }
+
+/* Inventory table visual */
+.inv-table { font-size: var(--text-sm); }
+.inv-table-row {
+  display: grid;
+  grid-template-columns: 110px 1fr 70px 80px 80px 110px;
+  padding: 12px 18px;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+.inv-table-row.head {
+  background: var(--gray-50);
+  font-size: 11px; font-weight: 500;
+  color: var(--fg-muted);
+  letter-spacing: 0.02em;
+  padding: 10px 18px;
+}
+.inv-table-row:last-child { border-bottom: none; }
+.inv-table-row:hover:not(.head) { background: var(--gray-25); }
+.inv-table-row .sku { font-family: var(--font-mono); color: var(--brand-500); font-size: 12px; }
+.inv-table-row .name { color: var(--gray-900); font-weight: 500; }
+.inv-table-row .name small { display: block; color: var(--fg-muted); font-weight: 400; font-size: 11px; margin-top: 1px; }
+
+/* Batch tracking visual — journey */
+.batch-journey {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 28px;
+}
+.batch-journey-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 24px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.bj-meta-main { font-size: var(--text-sm); }
+.bj-lot { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; color: var(--brand-700); margin-bottom: 4px; }
+.bj-product { font-size: var(--text-md); color: var(--gray-900); font-weight: 500; }
+.bj-product small { color: var(--fg-muted); font-weight: 400; margin-left: 8px; }
+.bj-totals { text-align: right; }
+.bj-total-row { font-size: var(--text-xs); color: var(--fg-muted); display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 4px; }
+.bj-total-row strong { color: var(--gray-900); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.bj-progress {
+  background: var(--gray-100);
+  height: 8px;
+  border-radius: var(--radius-pill);
+  margin-bottom: 24px;
+  position: relative;
+  overflow: hidden;
+}
+.bj-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
+  width: 67%;
+  border-radius: var(--radius-pill);
+}
+.bj-progress-labels { display: flex; justify-content: space-between; margin-top: -16px; }
+.bj-progress-labels span { font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
+
+.bj-timeline { display: flex; flex-direction: column; gap: 0; }
+.bj-event {
+  display: grid;
+  grid-template-columns: 16px 110px 1fr 80px 90px;
+  gap: 16px;
+  padding: 12px 0;
+  align-items: center;
+  border-bottom: 1px solid var(--border-subtle);
+  position: relative;
+}
+.bj-event:last-child { border-bottom: none; }
+.bj-event-dot {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+  background: var(--gray-300);
+  margin: 0 auto;
+}
+.bj-event.stockin .bj-event-dot { background: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
+.bj-event.stockout .bj-event-dot { background: var(--accent-500); }
+.bj-event.adjust .bj-event-dot { background: var(--warning-500); }
+.bj-event-date { font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.bj-event-desc { font-size: var(--text-sm); color: var(--gray-800); }
+.bj-event-desc small { display: block; color: var(--fg-muted); font-size: 11px; margin-top: 2px; }
+.bj-event-qty { font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
+.bj-event.stockin .bj-event-qty { color: var(--success-700); }
+.bj-event.stockout .bj-event-qty { color: var(--accent-500); }
+.bj-event-doc { font-size: 11px; color: var(--brand-500); font-family: var(--font-mono); text-align: right; }
+
+/* Stocktake comparison */
+.stocktake-table {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+.st-summary {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  padding: 18px 20px;
+  background: var(--brand-900);
+  color: #fff;
+  gap: 16px;
+}
+.st-summary-item .label { font-size: 11px; color: #ADC9EA; margin-bottom: 4px; letter-spacing: 0.04em; }
+.st-summary-item .val { font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
+.st-summary-item .val.neg { color: var(--danger-500); }
+
+.st-row {
+  display: grid;
+  grid-template-columns: 1fr 70px 70px 80px 90px;
+  padding: 12px 20px;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-sm);
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+.st-row:last-child { border-bottom: none; }
+.st-row.head { background: var(--gray-50); font-size: 11px; color: var(--fg-muted); font-weight: 500; }
+.st-row.head > div { text-align: right; }
+.st-row.head > div:first-child { text-align: left; }
+.st-row .diff-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: 600;
+}
+.st-row .diff-pill.zero { background: var(--gray-100); color: var(--gray-700); }
+.st-row .diff-pill.neg { background: var(--danger-50); color: var(--danger-700); }
+.st-row .diff-pill.pos { background: var(--success-50); color: var(--success-700); }
+.st-row > div:not(:first-child) { text-align: right; }
+
+/* Log timeline */
+.log-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.log-toolbar {
+  display: flex; gap: 8px; padding: 12px 18px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  align-items: center;
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+}
+.log-filter-pill {
+  display: inline-flex; align-items: center; gap: 4px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-pill);
+  padding: 3px 10px;
+  font-size: 11px;
+  color: var(--gray-700);
+}
+.log-filter-pill.active { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }
+.log-filter-pill .icon { width: 12px; height: 12px; }
+.log-row {
+  display: grid;
+  grid-template-columns: 100px 60px 1fr 60px 80px;
+  padding: 12px 18px;
+  gap: 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-sm);
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+.log-row:last-child { border-bottom: none; }
+.log-time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }
+.log-type-pill {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+  font-size: 10px;
+  font-weight: 500;
+}
+.log-type-pill.in { background: var(--success-50); color: var(--success-700); }
+.log-type-pill.out { background: var(--accent-50); color: var(--accent-700); }
+.log-type-pill.check { background: var(--info-50); color: var(--info-700); }
+.log-desc { color: var(--gray-800); font-size: 13px; }
+.log-desc small { color: var(--fg-muted); display: block; font-size: 11px; margin-top: 1px; }
+.log-qty { text-align: right; font-weight: 600; }
+.log-qty.in { color: var(--success-700); }
+.log-qty.out { color: var(--accent-500); }
+.log-op { text-align: right; font-size: 12px; color: var(--gray-700); }
+
+/* Alert config */
+.alert-config-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 24px;
+}
+.alert-config-card h4 {
+  margin: 0 0 4px;
+  font-size: var(--text-md);
+  font-weight: 600;
+  color: var(--brand-900);
+}
+.alert-config-card p.sub { margin: 0 0 20px; font-size: var(--text-sm); color: var(--fg-muted); }
+
+.threshold-bar {
+  position: relative;
+  height: 56px;
+  margin: 28px 0 12px;
+}
+.threshold-track {
+  position: absolute; top: 24px; left: 0; right: 0;
+  height: 8px;
+  background: linear-gradient(90deg, var(--danger-100, #FBC9C9) 0%, var(--danger-100, #FBC9C9) 18%, var(--warning-50) 18%, var(--warning-50) 42%, var(--success-50) 42%, var(--success-50) 100%);
+  border-radius: var(--radius-pill);
+}
+.threshold-marker {
+  position: absolute; top: 18px;
+  width: 20px; height: 20px;
+  border-radius: 50%;
+  background: var(--gray-0);
+  border: 3px solid var(--brand-500);
+  transform: translateX(-50%);
+  box-shadow: 0 2px 6px rgba(20,24,33,0.10);
+}
+.threshold-tick {
+  position: absolute;
+  top: 38px;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.threshold-label {
+  position: absolute;
+  bottom: 8px;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: var(--fg-muted);
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.alert-rules { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
+.alert-rule {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 10px 14px;
+  background: var(--gray-25);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  color: var(--gray-700);
+}
+.alert-rule strong { color: var(--brand-900); font-weight: 600; }
+.alert-rule .switch {
+  width: 32px; height: 18px;
+  background: var(--brand-500);
+  border-radius: var(--radius-pill);
+  position: relative;
+}
+.alert-rule .switch::after {
+  content: '';
+  position: absolute;
+  top: 2px; right: 2px;
+  width: 14px; height: 14px;
+  background: #fff;
+  border-radius: 50%;
+}
+.alert-rule .switch.off { background: var(--gray-300); }
+.alert-rule .switch.off::after { right: auto; left: 2px; }
+
+/* Use cases */
+.usecases-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
+  margin-top: 48px;
+}
+.usecase-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+}
+.usecase-card .icon {
+  width: 36px; height: 36px; color: var(--brand-500); margin-bottom: 16px;
+}
+.usecase-card h4 { margin: 0 0 8px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
+.usecase-card p { margin: 0; font-size: var(--text-sm); color: var(--gray-700); line-height: 1.65; }
+
+/* Final CTA */
+.cta-strip {
+  background: linear-gradient(135deg, #0A1F3B 0%, #15407D 100%);
+  color: #fff;
+  border-radius: var(--radius-xl);
+  padding: 56px 48px;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 32px;
+  align-items: center;
+  margin: 0 0 96px;
+}
+.cta-strip h2 {
+  font-size: 32px; font-weight: 600;
+  letter-spacing: var(--tracking-cn-display);
+  color: #fff; margin: 0 0 12px; line-height: 1.25;
+}
+.cta-strip p { font-size: var(--text-md); color: #ADC9EA; margin: 0; line-height: 1.6; }
+.cta-strip-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
+.cta-strip .btn-primary { background: #fff; color: var(--brand-700); }
+.cta-strip .btn-primary:hover { background: #DCE2EB; }
+.cta-strip .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
+.cta-strip .btn-secondary:hover { background: rgba(255,255,255,0.10); }
+
+/* Footer */
+footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle); padding: 64px 0 32px; color: var(--fg-muted); font-size: var(--text-sm); }
+.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; margin-bottom: 48px; }
+.footer-brand img { height: 32px; margin-bottom: 16px; }
+.footer-brand p { margin: 0 0 16px; max-width: 320px; line-height: 1.6; color: var(--fg-muted); }
+.footer-contact { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.8; }
+.footer-col h5 { font-size: var(--text-xs); font-weight: 600; color: var(--brand-900); letter-spacing: 0.06em; margin: 0 0 16px; text-transform: uppercase; }
+.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
+.footer-col li a { color: var(--gray-600); }
+.footer-col li a:hover { color: var(--brand-500); }
+.footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 24px; display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-subtle); }
+
+@media (max-width: 1024px) {
+  .feat-hero-inner, .feat-block-inner, .feat-block.reverse .feat-block-inner, .cta-strip { grid-template-columns: 1fr; gap: 32px; }
+  .feat-block.reverse .feat-text, .feat-block.reverse .feat-visual { order: initial; }
+  .usecases-grid { grid-template-columns: 1fr 1fr; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+  .feat-hero h1 { font-size: 36px; }
+  .composite { height: 480px; }
+}
 </style>
 </head>
 <body>
 
-<nav class="nav">
-  <div class="nav-inner">
-    <a href="/" class="nav-brand"><img src="../assets/logo-full.svg" alt="岩美" /></a>
-    <div class="nav-links">
-      <a href="/features/inventory.html" class="active">功能</a>
-      <a href="/docs.html">文档</a>
+<nav class="topnav">
+  <div class="topnav-inner">
+    <a href="/" class="topnav-brand">
+      <img src="../assets/logo-full.svg" alt="岩美" />
+    </a>
+    <div class="topnav-links">
+      <a href="/#modules" class="active">产品</a>
+      <a href="/#pricing">价格</a>
       <a href="/download.html">下载</a>
+      <a href="/docs.html">文档</a>
+      <a href="/#faq">支持</a>
     </div>
-    <div class="nav-cta">
-      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
-    </div>
+    <div class="topnav-cta" id="nav-cta"></div>
   </div>
 </nav>
 
-<div class="page-hero">
-  <div class="container">
-    <div class="eyebrow">库存管理</div>
-    <h1>批次级精准库存，<br/>全程可追溯</h1>
-    <p class="lead">岩美的库存模块以入库批次为最小单元，每瓶酒的来源、成本、去向都有据可查。从采购到销售，一条完整的追溯链条。</p>
-    <div class="hero-actions">
-      <a href="/app/" class="btn btn-primary btn-lg">立即体验 <i data-lucide="arrow-right" class="icon"></i></a>
-      <a href="/docs.html#inventory" class="btn btn-secondary btn-lg">查看文档</a>
-    </div>
-  </div>
-</div>
-
-<section class="feature-list">
-  <div class="container">
-
-    <!-- Feature 1: 实时库存 -->
-    <div class="feature-row">
-      <div class="feature-text">
-        <span class="tag">实时库存</span>
-        <h2>入库即更新，所见即所得</h2>
-        <p>每张入库单审批通过后，库存立即更新。支持多仓库分区管理，库存不足时自动预警。</p>
-        <ul>
-          <li><i data-lucide="check-circle"></i> 多仓库独立计数，库存不串仓</li>
-          <li><i data-lucide="check-circle"></i> 低库存预警，提前安排采购</li>
-          <li><i data-lucide="check-circle"></i> 任意时点的库存快照，支持历史查询</li>
-        </ul>
+<!-- ============== HERO ============== -->
+<section class="feat-hero">
+  <div class="container feat-hero-inner">
+    <div>
+      <div class="feat-breadcrumb">
+        <a href="/">首页</a>
+        <i data-lucide="chevron-right" class="icon"></i>
+        <a href="/#modules">产品功能</a>
+        <i data-lucide="chevron-right" class="icon"></i>
+        <span style="color: var(--gray-900); font-weight: 500;">库存管理</span>
       </div>
-      <div class="feature-visual">
-        <div class="visual-header">
-          <i data-lucide="package" style="width:14px;height:14px;color:var(--brand-500)"></i>
-          <span class="visual-title">库存列表</span>
+      <p class="eyebrow">功能详情 · 库存管理</p>
+      <h1>实时库存，<br/>跨多仓追溯每一瓶酒。</h1>
+      <p class="lead">
+        从入库到售出，每一次库存变动都有记录、可追溯、可回放。多仓库统一管理、批次级追踪、账实差异自动核算 — 不止是库存表。
+      </p>
+      <div class="actions">
+        <a href="#" class="btn btn-primary btn-lg">免费试用 30 天</a>
+        <a href="/docs.html" class="btn btn-secondary btn-lg">
+          <i data-lucide="book-open" class="icon"></i>查看文档
+        </a>
+      </div>
+      <div class="quick-stats">
+        <div>
+          <div class="quick-stat-label">SKU 上限</div>
+          <div class="quick-stat-val">无限</div>
         </div>
-        <div class="stats-grid">
-          <div class="stat-block"><div class="stat-label">库存 SKU 数</div><div class="stat-val">356</div></div>
-          <div class="stat-block"><div class="stat-label">本月入库量</div><div class="stat-val">1,284</div></div>
-          <div class="stat-block"><div class="stat-label">库存总价值</div><div class="stat-val">¥84.2万</div></div>
+        <div>
+          <div class="quick-stat-label">仓库支持</div>
+          <div class="quick-stat-val">多仓库</div>
         </div>
-        <div class="mock-table-wrap">
-          <div class="mock-thead cols-inv"><span>商品名称</span><span>批次号</span><span>库存量</span><span>仓库</span><span>状态</span></div>
-          <div class="mock-row-item cols-inv">
-            <span>麦卡伦 12年</span><span style="font-family:var(--font-mono);font-size:11px">L-2026-01</span><span>24 瓶</span><span>主仓</span>
-            <span><span class="mock-badge green">在库</span></span>
-          </div>
-          <div class="mock-row-item cols-inv">
-            <span>芝华士 18年</span><span style="font-family:var(--font-mono);font-size:11px">L-2025-12</span><span>8 瓶</span><span>主仓</span>
-            <span><span class="mock-badge amber">偏低</span></span>
-          </div>
-          <div class="mock-row-item cols-inv">
-            <span>百龄坛特醇</span><span style="font-family:var(--font-mono);font-size:11px">L-2026-02</span><span>36 瓶</span><span>备用库</span>
-            <span><span class="mock-badge green">在库</span></span>
-          </div>
-          <div class="mock-row-item cols-inv">
-            <span>格兰威特 15年</span><span style="font-family:var(--font-mono);font-size:11px">L-2025-11</span><span>0 瓶</span><span>主仓</span>
-            <span><span class="mock-badge" style="background:var(--gray-100);color:var(--gray-500)">已清空</span></span>
-          </div>
+        <div>
+          <div class="quick-stat-label">流水保留</div>
+          <div class="quick-stat-val">永久</div>
         </div>
       </div>
     </div>
 
-    <!-- Feature 2: 出入库审批 -->
-    <div class="feature-row reverse">
-      <div class="feature-visual">
-        <div class="visual-header">
-          <i data-lucide="package-plus" style="width:14px;height:14px;color:var(--brand-500)"></i>
-          <span class="visual-title">入库单详情</span>
+    <div class="composite">
+      <!-- Main inventory card -->
+      <div class="composite-card composite-main">
+        <div class="mc-head">
+          <div class="mc-title">库存列表 · A 仓</div>
+          <div class="mc-tabs">
+            <div class="mc-tab active">列表</div>
+            <div class="mc-tab">流水</div>
+            <div class="mc-tab">盘点</div>
+          </div>
         </div>
-        <div style="padding:16px;">
-          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
-            <div>
-              <div style="font-size:11px;color:var(--fg-muted)">单据编号</div>
-              <div style="font-size:14px;font-weight:600;font-family:var(--font-mono)">RK20250523000001</div>
-            </div>
-            <span class="mock-badge blue">待审核</span>
+        <div class="mc-stats">
+          <div>
+            <div class="mc-stat-label">库存总量</div>
+            <div class="mc-stat-val">2,816<span class="delta">↑ 4.2%</span></div>
           </div>
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;">
-            <div style="background:var(--gray-50);border-radius:6px;padding:10px 12px;">
-              <div style="font-size:10px;color:var(--fg-muted)">供应商</div>
-              <div style="font-size:13px;margin-top:2px;">百川酒业有限公司</div>
-            </div>
-            <div style="background:var(--gray-50);border-radius:6px;padding:10px 12px;">
-              <div style="font-size:10px;color:var(--fg-muted)">入库仓库</div>
-              <div style="font-size:13px;margin-top:2px;">主仓</div>
-            </div>
+          <div>
+            <div class="mc-stat-label">库存金额</div>
+            <div class="mc-stat-val">¥486K<span class="delta">↑ 2.8%</span></div>
           </div>
-          <div style="background:var(--gray-50);border:1px solid var(--border-default);border-radius:6px;overflow:hidden;">
-            <div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:6px 10px;background:var(--gray-100);font-size:10px;color:var(--fg-muted);font-weight:500;gap:8px;">
-              <span>商品</span><span>数量</span><span>单价</span>
-            </div>
-            <div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
-              <span>麦卡伦 12年</span><span>24 瓶</span><span>¥980</span>
-            </div>
-            <div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;">
-              <span>百龄坛特醇</span><span>48 瓶</span><span>¥280</span>
-            </div>
+          <div>
+            <div class="mc-stat-label">预警 SKU</div>
+            <div class="mc-stat-val" style="color: var(--warning-500);">7</div>
           </div>
-          <div style="display:flex;gap:8px;margin-top:14px;">
-            <button style="flex:1;height:32px;background:var(--brand-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;cursor:pointer;">审核通过</button>
-            <button style="height:32px;padding:0 14px;background:var(--gray-0);color:var(--danger-500);border:1px solid var(--danger-500);border-radius:var(--radius-md);font-size:13px;cursor:pointer;">驳回</button>
+        </div>
+        <div class="mc-table">
+          <div class="mc-thead">
+            <div>SKU</div><div>商品</div><div>仓库</div><div>库存</div><div>批次</div><div>状态</div>
+          </div>
+          <div class="mc-trow">
+            <div class="sku">WT-501-006</div>
+            <div>茅台飞天 53°</div>
+            <div>A 仓</div>
+            <div>148</div>
+            <div>L-2026-04</div>
+            <div><span class="mc-pill ok">充足</span></div>
+          </div>
+          <div class="mc-trow">
+            <div class="sku">XJ-468-001</div>
+            <div>五粮液第八代</div>
+            <div>A 仓</div>
+            <div>92</div>
+            <div>L-2026-03</div>
+            <div><span class="mc-pill ok">充足</span></div>
+          </div>
+          <div class="mc-trow">
+            <div class="sku">XJ-330-024</div>
+            <div>剑南春水晶剑</div>
+            <div>B 仓</div>
+            <div style="color: var(--warning-700); font-weight: 500;">12</div>
+            <div>L-2026-02</div>
+            <div><span class="mc-pill warn">偏低</span></div>
+          </div>
+          <div class="mc-trow">
+            <div class="sku">PJ-750-012</div>
+            <div>拉菲传奇波尔多</div>
+            <div>A 仓</div>
+            <div>64</div>
+            <div>L-2026-05</div>
+            <div><span class="mc-pill ok">充足</span></div>
+          </div>
+          <div class="mc-trow">
+            <div class="sku">PJ-700-008</div>
+            <div>轩尼诗 VSOP</div>
+            <div>B 仓</div>
+            <div style="color: var(--danger-700); font-weight: 500;">3</div>
+            <div>L-2026-01</div>
+            <div><span class="mc-pill low">告急</span></div>
           </div>
         </div>
       </div>
-      <div class="feature-text">
-        <span class="tag">审批流程</span>
-        <h2>操作留痕，审批有序</h2>
-        <p>入库单与出库单均需经过审批才能更新库存，杜绝随意修改。每张单据记录经办人与审批人，操作全程可追溯。</p>
-        <ul>
-          <li><i data-lucide="check-circle"></i> 草稿 → 待审核 → 已审批完整状态流转</li>
-          <li><i data-lucide="check-circle"></i> 出库前自动校验库存充足性</li>
-          <li><i data-lucide="check-circle"></i> 审批记录不可修改，符合内控要求</li>
-        </ul>
-      </div>
-    </div>
 
-    <!-- Feature 3: 盘点 -->
-    <div class="feature-row">
-      <div class="feature-text">
-        <span class="tag">库存盘点</span>
-        <h2>定期盘点，差异一目了然</h2>
-        <p>发起盘点后，系统自动生成基于当前库存的盘点表。录入实盘数量后，系统自动计算差异并归因。</p>
-        <ul>
-          <li><i data-lucide="check-circle"></i> 按仓库或全仓发起盘点</li>
-          <li><i data-lucide="check-circle"></i> 系统数 vs 实盘数，差异高亮显示</li>
-          <li><i data-lucide="check-circle"></i> 盘点结果自动调整库存，生成调账记录</li>
-        </ul>
-      </div>
-      <div class="feature-visual">
-        <div class="visual-header">
-          <i data-lucide="clipboard-list" style="width:14px;height:14px;color:var(--brand-500)"></i>
-          <span class="visual-title">盘点差异报告</span>
+      <!-- Floating alert card -->
+      <div class="composite-card composite-secondary">
+        <div class="alert-card-title" style="display: flex; align-items: center; gap: 6px;">
+          <i data-lucide="bell" class="icon" style="width: 12px; height: 12px; color: var(--warning-500);"></i>
+          库存预警
         </div>
-        <div style="padding:14px 16px;">
-          <div style="display:flex;gap:8px;margin-bottom:12px;">
-            <div style="flex:1;background:var(--success-50);border-radius:6px;padding:10px 12px;text-align:center;">
-              <div style="font-size:10px;color:var(--success-700)">盘盈</div>
-              <div style="font-size:20px;font-weight:700;color:var(--success-700)">+6</div>
-            </div>
-            <div style="flex:1;background:var(--danger-50);border-radius:6px;padding:10px 12px;text-align:center;">
-              <div style="font-size:10px;color:var(--danger-700)">盘亏</div>
-              <div style="font-size:20px;font-weight:700;color:var(--danger-700)">-14</div>
-            </div>
-            <div style="flex:1;background:var(--gray-50);border-radius:6px;padding:10px 12px;text-align:center;">
-              <div style="font-size:10px;color:var(--fg-muted)">无差异</div>
-              <div style="font-size:20px;font-weight:700;color:var(--brand-900)">284</div>
-            </div>
-          </div>
-          <div style="background:var(--gray-50);border:1px solid var(--border-default);border-radius:6px;overflow:hidden;">
-            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:6px 10px;background:var(--gray-100);font-size:10px;color:var(--fg-muted);font-weight:500;gap:8px;">
-              <span>商品</span><span>系统数</span><span>实盘数</span><span>差异</span>
-            </div>
-            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
-              <span>麦卡伦 12年</span><span>24</span><span>22</span><span style="color:var(--danger-500)">-2</span>
-            </div>
-            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
-              <span>野格利口酒</span><span>48</span><span>51</span><span style="color:var(--success-500)">+3</span>
-            </div>
-            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;">
-              <span>百龄坛特醇</span><span>36</span><span>36</span><span style="color:var(--fg-muted)">—</span>
-            </div>
-          </div>
+        <div class="alert-row danger">
+          <div class="name">轩尼诗 VSOP</div>
+          <div class="qty">仅 3 瓶</div>
+        </div>
+        <div class="alert-row">
+          <div class="name">剑南春水晶剑</div>
+          <div class="qty">12 瓶</div>
+        </div>
+        <div class="alert-row">
+          <div class="name">人头马 X.O</div>
+          <div class="qty">8 瓶</div>
+        </div>
+        <div style="text-align: right; margin-top: 8px; font-size: 11px;">
+          <a href="#" style="color: var(--brand-500);">查看全部 7 条 →</a>
         </div>
       </div>
-    </div>
 
-  </div>
-</section>
-
-<section class="cta-section">
-  <div class="container">
-    <h2>准备好了解更多功能？</h2>
-    <p>查看审批流程功能，或直接进入管理端体验。</p>
-    <div class="cta-actions">
-      <a href="/features/approval.html" class="btn btn-primary btn-lg">审批流程功能 <i data-lucide="arrow-right" class="icon"></i></a>
-      <a href="/app/" class="btn btn-secondary btn-lg">进入管理端</a>
+      <!-- Floating batch card -->
+      <div class="composite-card composite-tertiary">
+        <div class="batch-title">
+          <i data-lucide="layers" class="icon"></i>
+          批次追踪 · L-2026-05
+        </div>
+        <div class="batch-row">
+          <div class="lot">入库 04-28</div>
+          <div>初始 50 瓶</div>
+          <div class="meta">A 仓</div>
+          <div>+50</div>
+        </div>
+        <div class="batch-row">
+          <div class="lot">出库 05-12</div>
+          <div>客户 · 春和宴</div>
+          <div class="meta">8 瓶</div>
+          <div>-8</div>
+        </div>
+        <div class="batch-row">
+          <div class="lot">出库 05-19</div>
+          <div>客户 · 北辰大酒店</div>
+          <div class="meta">12 瓶</div>
+          <div>-12</div>
+        </div>
+      </div>
     </div>
   </div>
 </section>
 
+<!-- ============== BLOCK 1: Real-time inventory ============== -->
+<section class="feat-block">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="layout-list" class="icon"></i>实时库存查询</div>
+      <h2>不止是库存表，是一个可筛选的工作面板</h2>
+      <p class="lead">
+        库存数据自动跟随入库、出库、盘点变动 — 每一次写入都是一次事务，不存在「待同步」状态。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="filter" class="icon"></i>
+          <div>
+            <strong>多维筛选与列控制</strong>
+            按仓库、商品系列、库存状态、批次任意组合筛选，列可隐藏或重排。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="search" class="icon"></i>
+          <div>
+            <strong>模糊搜索与拼音匹配</strong>
+            支持商品名、SKU、拼音首字母混合搜索，与你输入"飞天"同等结果。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="pencil-line" class="icon"></i>
+          <div>
+            <strong>行内编辑备注</strong>
+            点击「备注」列即可弹出编辑框，不必进入详情页改字段。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="file-spreadsheet" class="icon"></i>
+          <div>
+            <strong>一键导出 Excel</strong>
+            筛选后的视图与数据一同导出，可直接发给会计、税务。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="visual-card">
+        <div class="visual-card-head">
+          <div class="visual-card-title">库存列表 · 全部仓库</div>
+          <div class="visual-card-meta">共 2,816 瓶 · ¥486,290</div>
+        </div>
+        <div class="inv-table">
+          <div class="inv-table-row head">
+            <div>SKU</div><div>商品名称 / 规格</div><div>仓库</div><div>库存</div><div>金额</div><div>状态</div>
+          </div>
+          <div class="inv-table-row">
+            <div class="sku">WT-501-006</div>
+            <div class="name">茅台飞天 53°<small>500ml×6 · L-2026-04</small></div>
+            <div>A 仓</div>
+            <div>148</div>
+            <div>¥298,400</div>
+            <div><span class="mc-pill ok">充足</span></div>
+          </div>
+          <div class="inv-table-row">
+            <div class="sku">XJ-468-001</div>
+            <div class="name">五粮液第八代 52°<small>500ml · L-2026-03</small></div>
+            <div>A 仓</div>
+            <div>92</div>
+            <div>¥92,920</div>
+            <div><span class="mc-pill ok">充足</span></div>
+          </div>
+          <div class="inv-table-row">
+            <div class="sku">XJ-330-024</div>
+            <div class="name">剑南春水晶剑 52°<small>500ml×6 · L-2026-02</small></div>
+            <div>B 仓</div>
+            <div style="color: var(--warning-700); font-weight: 500;">12</div>
+            <div>¥4,560</div>
+            <div><span class="mc-pill warn">偏低</span></div>
+          </div>
+          <div class="inv-table-row">
+            <div class="sku">PJ-750-012</div>
+            <div class="name">拉菲传奇波尔多<small>750ml · L-2026-05</small></div>
+            <div>A 仓</div>
+            <div>64</div>
+            <div>¥18,560</div>
+            <div><span class="mc-pill ok">充足</span></div>
+          </div>
+          <div class="inv-table-row">
+            <div class="sku">PJ-700-008</div>
+            <div class="name">轩尼诗 VSOP<small>700ml · L-2026-01</small></div>
+            <div>B 仓</div>
+            <div style="color: var(--danger-700); font-weight: 500;">3</div>
+            <div>¥1,770</div>
+            <div><span class="mc-pill low">告急</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== BLOCK 2: Batch tracking ============== -->
+<section class="feat-block reverse">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="layers" class="icon"></i>批次追踪</div>
+      <h2>每一批货的命运，<br/>都可以回放给你看</h2>
+      <p class="lead">
+        每张审批通过的入库单都会自动形成一个独立批次，可追踪其后续被谁出库、剩余多少、还在哪个仓库。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="git-branch" class="icon"></i>
+          <div>
+            <strong>批次自动生成</strong>
+            入库审批通过即建立批次，无需手动维护。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="map-pin" class="icon"></i>
+          <div>
+            <strong>逐瓶溯源</strong>
+            出库时按"先进先出"自动从最早批次扣减，留下完整的批次→客户对应关系。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="alert-circle" class="icon"></i>
+          <div>
+            <strong>过期预警</strong>
+            按生产日期 + 保质期推算，临近到期前自动标记。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="qr-code" class="icon"></i>
+          <div>
+            <strong>标签二维码</strong>
+            每个批次都可打印含二维码的标签，扫码即查批次详情。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="batch-journey">
+        <div class="batch-journey-head">
+          <div class="bj-meta-main">
+            <div class="bj-lot">L-2026-05</div>
+            <div class="bj-product">茅台飞天 53°<small>500ml×6 · A 仓</small></div>
+          </div>
+          <div class="bj-totals">
+            <div class="bj-total-row">初始入库 <strong>50 瓶</strong></div>
+            <div class="bj-total-row">累计出库 <strong style="color: var(--accent-500);">20 瓶</strong></div>
+            <div class="bj-total-row">剩余 <strong style="color: var(--success-700);">30 瓶</strong></div>
+          </div>
+        </div>
+        <div class="bj-progress">
+          <div class="bj-progress-bar" style="width: 60%;"></div>
+        </div>
+        <div class="bj-progress-labels">
+          <span>已出库 60%</span>
+          <span>40% 库存</span>
+        </div>
+
+        <div class="bj-timeline">
+          <div class="bj-event stockin">
+            <div class="bj-event-dot"></div>
+            <div class="bj-event-date">2026-04-28</div>
+            <div class="bj-event-desc">入库 · 供应商 茅台经销华东<small>经办人：李建国</small></div>
+            <div class="bj-event-qty">+50</div>
+            <div class="bj-event-doc">RK0007</div>
+          </div>
+          <div class="bj-event stockout">
+            <div class="bj-event-dot"></div>
+            <div class="bj-event-date">2026-05-12</div>
+            <div class="bj-event-desc">出库 · 客户 春和宴酒楼<small>经办人：王芳</small></div>
+            <div class="bj-event-qty">−8</div>
+            <div class="bj-event-doc">CK0034</div>
+          </div>
+          <div class="bj-event stockout">
+            <div class="bj-event-dot"></div>
+            <div class="bj-event-date">2026-05-19</div>
+            <div class="bj-event-desc">出库 · 客户 北辰大酒店<small>经办人：王芳</small></div>
+            <div class="bj-event-qty">−12</div>
+            <div class="bj-event-doc">CK0041</div>
+          </div>
+          <div class="bj-event">
+            <div class="bj-event-dot"></div>
+            <div class="bj-event-date">— 当前 —</div>
+            <div class="bj-event-desc" style="color: var(--gray-900); font-weight: 500;">剩余 30 瓶<small>预计 6 月底前售完</small></div>
+            <div class="bj-event-qty" style="color: var(--brand-700);">30</div>
+            <div class="bj-event-doc"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== BLOCK 3: Stocktake ============== -->
+<section class="feat-block">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="clipboard-check" class="icon"></i>全仓盘点</div>
+      <h2>账面 vs 实际，差异一目了然</h2>
+      <p class="lead">
+        逐 SKU 录入实盘数量，系统自动核算账实差异、损耗金额，并一键转为盘亏调整单。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="warehouse" class="icon"></i>
+          <div>
+            <strong>跨多仓库联动</strong>
+            v1.6.2 新增 — 一次盘点可同步多仓库，避免分仓时数据不一致。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="calculator" class="icon"></i>
+          <div>
+            <strong>差异自动核算</strong>
+            实盘填好后立即显示账面、实际、差异数量与金额。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="history" class="icon"></i>
+          <div>
+            <strong>历史盘点对比</strong>
+            可对比上一次盘点结果，识别长期偏差最大的 SKU。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="stocktake-table">
+        <div class="st-summary">
+          <div class="st-summary-item">
+            <div class="label">盘点商品</div>
+            <div class="val">128</div>
+          </div>
+          <div class="st-summary-item">
+            <div class="label">账面合计</div>
+            <div class="val">2,816</div>
+          </div>
+          <div class="st-summary-item">
+            <div class="label">实际合计</div>
+            <div class="val">2,808</div>
+          </div>
+          <div class="st-summary-item">
+            <div class="label">损耗金额</div>
+            <div class="val neg">−¥6,840</div>
+          </div>
+        </div>
+        <div class="st-row head">
+          <div>商品</div><div>账面</div><div>实际</div><div>差异</div><div>损耗</div>
+        </div>
+        <div class="st-row">
+          <div style="text-align: left;">茅台飞天 53° · 500ml×6</div>
+          <div>148</div>
+          <div>148</div>
+          <div><span class="diff-pill zero">0</span></div>
+          <div>—</div>
+        </div>
+        <div class="st-row">
+          <div style="text-align: left;">五粮液第八代 52° · 500ml</div>
+          <div>92</div>
+          <div>90</div>
+          <div><span class="diff-pill neg">−2</span></div>
+          <div style="color: var(--danger-700);">−¥2,020</div>
+        </div>
+        <div class="st-row">
+          <div style="text-align: left;">剑南春水晶剑 52° · 500ml×6</div>
+          <div>12</div>
+          <div>12</div>
+          <div><span class="diff-pill zero">0</span></div>
+          <div>—</div>
+        </div>
+        <div class="st-row">
+          <div style="text-align: left;">拉菲传奇波尔多 · 750ml</div>
+          <div>64</div>
+          <div>60</div>
+          <div><span class="diff-pill neg">−4</span></div>
+          <div style="color: var(--danger-700);">−¥1,160</div>
+        </div>
+        <div class="st-row">
+          <div style="text-align: left;">轩尼诗 VSOP · 700ml</div>
+          <div>3</div>
+          <div>3</div>
+          <div><span class="diff-pill zero">0</span></div>
+          <div>—</div>
+        </div>
+        <div class="st-row">
+          <div style="text-align: left;">人头马 X.O · 700ml</div>
+          <div>40</div>
+          <div>38</div>
+          <div><span class="diff-pill neg">−2</span></div>
+          <div style="color: var(--danger-700);">−¥3,660</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== BLOCK 4: Inventory logs ============== -->
+<section class="feat-block reverse">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="scroll-text" class="icon"></i>库存流水审计</div>
+      <h2>谁动了我的库存？<br/>每一次都查得清楚</h2>
+      <p class="lead">
+        所有库存变动都会自动写入流水表，包括入库、出库、盘点调整、单据红冲，附带时间戳与经办人。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="filter" class="icon"></i>
+          <div>
+            <strong>按类型 / 时间 / SKU 任意筛选</strong>
+            排查异常时可秒级定位。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="link" class="icon"></i>
+          <div>
+            <strong>关联原单据</strong>
+            每条流水都关联到对应入库单 / 出库单 / 盘点单，一键跳转。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="hard-drive" class="icon"></i>
+          <div>
+            <strong>永久保留</strong>
+            流水数据永不自动清除，满足审计与合规要求。
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="log-card">
+        <div class="log-toolbar">
+          <span class="log-filter-pill active">全部类型</span>
+          <span class="log-filter-pill"><i data-lucide="plus" class="icon"></i>入库</span>
+          <span class="log-filter-pill"><i data-lucide="minus" class="icon"></i>出库</span>
+          <span class="log-filter-pill"><i data-lucide="clipboard" class="icon"></i>盘点</span>
+          <span style="margin-left: auto;">本月 · 共 1,284 条</span>
+        </div>
+        <div class="log-row">
+          <div class="log-time">05-23 14:32</div>
+          <div><span class="log-type-pill in">入库</span></div>
+          <div class="log-desc">茅台飞天 53° · 500ml×6<small>RK20260523000007 · A 仓</small></div>
+          <div class="log-qty in">+4</div>
+          <div class="log-op">李建国</div>
+        </div>
+        <div class="log-row">
+          <div class="log-time">05-23 11:48</div>
+          <div><span class="log-type-pill out">出库</span></div>
+          <div class="log-desc">五粮液第八代 52°<small>CK20260523000012 · 客户 春和宴</small></div>
+          <div class="log-qty out">−6</div>
+          <div class="log-op">王芳</div>
+        </div>
+        <div class="log-row">
+          <div class="log-time">05-23 10:15</div>
+          <div><span class="log-type-pill check">盘点</span></div>
+          <div class="log-desc">拉菲传奇波尔多<small>PD20260523001 · 账实差异</small></div>
+          <div class="log-qty out">−2</div>
+          <div class="log-op">张磊</div>
+        </div>
+        <div class="log-row">
+          <div class="log-time">05-22 17:20</div>
+          <div><span class="log-type-pill out">出库</span></div>
+          <div class="log-desc">人头马 X.O · 700ml<small>CK20260522000008 · 客户 北辰</small></div>
+          <div class="log-qty out">−2</div>
+          <div class="log-op">王芳</div>
+        </div>
+        <div class="log-row">
+          <div class="log-time">05-22 14:08</div>
+          <div><span class="log-type-pill in">入库</span></div>
+          <div class="log-desc">轩尼诗 VSOP · 700ml<small>RK20260522000005 · B 仓</small></div>
+          <div class="log-qty in">+24</div>
+          <div class="log-op">李建国</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== BLOCK 5: Alerts ============== -->
+<section class="feat-block">
+  <div class="container feat-block-inner">
+    <div class="feat-text">
+      <div class="feat-tag"><i data-lucide="bell" class="icon"></i>库存预警</div>
+      <h2>该补货之前，<br/>系统已经替你看见了</h2>
+      <p class="lead">
+        每个 SKU 都可单独设置安全库存阈值，触发即在 Web 与移动端同步推送，永远不会错过补货时机。
+      </p>
+      <ul class="feat-bullets">
+        <li>
+          <i data-lucide="sliders-horizontal" class="icon"></i>
+          <div>
+            <strong>按 SKU 灵活配置</strong>
+            热销商品阈值高，冷门商品阈值低 — 不需要一刀切。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="bell-ring" class="icon"></i>
+          <div>
+            <strong>多渠道通知</strong>
+            Web 顶栏、移动 App 推送、可选邮件 / 短信通知。
+          </div>
+        </li>
+        <li>
+          <i data-lucide="trending-up" class="icon"></i>
+          <div>
+            <strong>智能补货建议</strong>
+            基于近 30 天销售速率 × 补货周期，给出建议补货量。<small style="color: var(--brand-500);">v1.7 Beta</small>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="feat-visual">
+      <div class="alert-config-card">
+        <h4>预警阈值 · 茅台飞天 53°</h4>
+        <p class="sub">当库存低于阈值时，自动推送给指定操作员。</p>
+
+        <div class="threshold-bar">
+          <div class="threshold-track"></div>
+          <div class="threshold-marker" style="left: 30%;"></div>
+          <div class="threshold-tick" style="left: 0%;">0</div>
+          <div class="threshold-tick" style="left: 18%;">20</div>
+          <div class="threshold-tick" style="left: 42%;">50</div>
+          <div class="threshold-tick" style="left: 100%;">200</div>
+          <div class="threshold-label" style="left: 9%; color: var(--danger-700);">告急</div>
+          <div class="threshold-label" style="left: 30%; color: var(--warning-700);">偏低</div>
+          <div class="threshold-label" style="left: 70%; color: var(--success-700);">充足</div>
+        </div>
+
+        <div style="display: flex; justify-content: space-between; align-items: center; margin: 16px 0 8px;">
+          <span style="font-size: 13px; color: var(--gray-700);">当前阈值</span>
+          <span style="font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--brand-700);">35 瓶</span>
+        </div>
+
+        <div class="alert-rules">
+          <div class="alert-rule">
+            <div>低于 <strong>50 瓶</strong> · 推送给 <strong>张磊（仓储）</strong></div>
+            <div class="switch"></div>
+          </div>
+          <div class="alert-rule">
+            <div>低于 <strong>20 瓶</strong> · 短信通知 <strong>李建国（采购）</strong></div>
+            <div class="switch"></div>
+          </div>
+          <div class="alert-rule">
+            <div>临近过期 <strong>30 天</strong> · 邮件提醒</div>
+            <div class="switch off"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== Use cases ============== -->
+<section class="section" style="background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);">
+  <div class="container">
+    <p class="eyebrow">典型场景</p>
+    <h2 style="font-size: 36px; font-weight: 600; color: var(--brand-900); margin: 0 0 12px; letter-spacing: var(--tracking-cn-display);">
+      库存管理，落到实际操作里是什么样
+    </h2>
+    <p style="font-size: var(--text-lg); color: var(--fg-muted); max-width: 640px; margin: 0;">
+      三个常见门店场景，看库存管理如何省下你每天的时间。
+    </p>
+
+    <div class="usecases-grid">
+      <div class="usecase-card">
+        <i data-lucide="package-search" class="icon"></i>
+        <h4>客户来取货前，先看一眼批次</h4>
+        <p>客户要 12 瓶飞天，先在批次追踪里看哪一批快到期；优先发出旧批次，新批次留着。</p>
+      </div>
+      <div class="usecase-card">
+        <i data-lucide="calendar-check-2" class="icon"></i>
+        <h4>月底盘点，2 小时变 30 分钟</h4>
+        <p>用移动端扫码逐瓶录入，系统对比账面 → 实时显示差异。损耗自动转入应付，不用再算。</p>
+      </div>
+      <div class="usecase-card">
+        <i data-lucide="file-check-2" class="icon"></i>
+        <h4>财务来问"这瓶怎么少了"，3 秒回答</h4>
+        <p>打开库存流水，按 SKU 筛选，全部入库、出库、盘点变动一目了然，每条都关联到原始单据。</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== Final CTA ============== -->
+<section>
+  <div class="container" style="padding-top: 80px;">
+    <div class="cta-strip">
+      <div>
+        <h2>试试看你今天的库存有几瓶。</h2>
+        <p>30 天免费试用，无需绑定支付。所有数据云端实时备份，可随时导出。</p>
+      </div>
+      <div class="cta-strip-actions">
+        <a href="#" class="btn btn-primary btn-lg">
+          免费开通试用<i data-lucide="arrow-right" class="icon"></i>
+        </a>
+        <a href="/features/approval.html" class="btn btn-secondary btn-lg">
+          下一个功能：审核流 →
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============== Footer ============== -->
 <footer>
   <div class="container">
-    <div class="footer-inner">
-      <div class="footer-brand"><img src="../assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
-      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="../assets/logo-full.svg" alt="岩美" />
+        <p>为酒行与酒店设计的库存、审核、财务一体化管理平台。</p>
+        <div class="footer-contact">
+          <div>support@yanmei.app</div>
+          <div>400-880-8888</div>
+        </div>
+      </div>
+      <div class="footer-col">
+        <h5>产品</h5>
+        <ul>
+          <li><a href="/#modules">核心模块</a></li>
+          <li><a href="/features/inventory.html">库存管理</a></li>
+          <li><a href="/features/approval.html">审核流</a></li>
+          <li><a href="/#pricing">价格方案</a></li>
+          <li><a href="/download.html">下载客户端</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>资源</h5>
+        <ul>
+          <li><a href="/docs.html">使用手册</a></li>
+          <li><a href="#">API 文档</a></li>
+          <li><a href="#">视频教程</a></li>
+          <li><a href="#">数据导入模板</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>客户支持</h5>
+        <ul>
+          <li><a href="/#faq">常见问题</a></li>
+          <li><a href="#">提交工单</a></li>
+          <li><a href="#">技术支持</a></li>
+          <li><a href="#">服务等级</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>公司</h5>
+        <ul>
+          <li><a href="#">关于岩美</a></li>
+          <li><a href="#">客户案例</a></li>
+          <li><a href="#">招贤纳士</a></li>
+          <li><a href="#">联系我们</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <div>© 2026 岩美科技 · 保留所有权利</div>
+      <div>沪 ICP 备 2026000000 号 · 沪公网安备 31010000000000 号</div>
     </div>
   </div>
 </footer>
 
-<script>lucide.createIcons();</script>
+<script>
+function getAuthUser() {
+  var token = localStorage.getItem('flutter.access_token');
+  var username = localStorage.getItem('flutter.username');
+  var realName = localStorage.getItem('flutter.real_name') || '';
+  var role = localStorage.getItem('flutter.role') || '';
+  var shopNo = localStorage.getItem('flutter.shop_no') || '';
+  if (!token || !username) return null;
+  return { username: username, realName: realName, role: role, shopNo: shopNo };
+}
+function doLogout() {
+  ['access_token','refresh_token','username','real_name','shop_no','shop_id','role']
+    .forEach(function(k) { localStorage.removeItem('flutter.' + k); });
+  location.reload();
+}
+function toggleUserMenu() {
+  var el = document.getElementById('userDropdown');
+  if (el) el.classList.toggle('open');
+}
+function renderNav() {
+  var cta = document.getElementById('nav-cta');
+  if (!cta) return;
+  var user = getAuthUser();
+  if (user) {
+    var initial = (user.realName || user.username).charAt(0).toUpperCase();
+    var displayName = user.realName || user.username;
+    var roleLabel = { admin: '管理员', operator: '操作员', readonly: '只读', superadmin: '超管' }[user.role] || user.role;
+    cta.innerHTML =
+      '<div class="nav-user">' +
+        '<button class="nav-user-btn" onclick="toggleUserMenu()">' +
+          '<div class="nav-avatar">' + initial + '</div>' +
+          '<span>' + displayName + '</span>' +
+          '<i data-lucide="chevron-down" class="icon"></i>' +
+        '</button>' +
+        '<div class="nav-dropdown" id="userDropdown">' +
+          '<div class="nav-dropdown-info">' +
+            '<div class="nav-dropdown-name">' + displayName + '</div>' +
+            '<div class="nav-dropdown-role">' + roleLabel + (user.shopNo ? ' · ' + user.shopNo : '') + '</div>' +
+          '</div>' +
+          '<a href="/app"><i data-lucide="layout-dashboard" class="icon"></i>进入系统</a>' +
+          '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>' +
+        '</div>' +
+      '</div>';
+  } else {
+    cta.innerHTML =
+      '<a href="/app/login" class="btn btn-ghost">登录</a>' +
+      '<a href="/app/register" class="btn btn-primary">免费试用</a>';
+  }
+  if (window.lucide) lucide.createIcons();
+}
+document.addEventListener('click', function(e) {
+  var dropdown = document.getElementById('userDropdown');
+  if (dropdown && dropdown.classList.contains('open')) {
+    var userEl = dropdown.closest('.nav-user');
+    if (userEl && !userEl.contains(e.target)) dropdown.classList.remove('open');
+  }
+});
+document.addEventListener('DOMContentLoaded', function() {
+  if (window.lucide) lucide.createIcons();
+  renderNav();
+});
+</script>
+
 </body>
 </html>
diff --git a/web/index.html b/web/index.html
index 6ec5cf2..2b84e49 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,8 +3,7 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>岩美 — 酒行与酒店饮品库存管理平台</title>
-<meta name="description" content="岩美酒库管理系统，为酒行与酒店设计的专业库存、采购、出库一体化管理平台。" />
+<title>岩美酒库管理系统 — 为酒行与酒店设计的库存管理平台</title>
 <link rel="stylesheet" href="assets/colors_and_type.css" />
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -13,10 +12,11 @@
 <style>
 * { box-sizing: border-box; }
 html, body {
-  margin: 0; padding: 0;
+  margin: 0;
+  padding: 0;
   font-family: var(--font-sans);
   color: var(--fg-default);
-  background: var(--bg-surface);
+  background: var(--gray-25);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-feature-settings: "tnum" 1;
@@ -25,6 +25,7 @@ img, svg { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }
 button { font-family: inherit; cursor: pointer; }
 
+/* ---------------- Buttons ---------------- */
 .btn {
   display: inline-flex; align-items: center; gap: 8px;
   height: 40px; padding: 0 18px;
@@ -32,8 +33,9 @@ button { font-family: inherit; cursor: pointer; }
   font-size: var(--text-md); font-weight: 500;
   border: 1px solid transparent;
   transition: background var(--duration-fast) var(--ease-standard),
-              border-color var(--duration-fast) var(--ease-standard);
-  white-space: nowrap; text-decoration: none; cursor: pointer;
+              border-color var(--duration-fast) var(--ease-standard),
+              color var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
 }
 .btn-primary { background: var(--brand-500); color: #fff; }
 .btn-primary:hover { background: var(--brand-600); }
@@ -45,31 +47,52 @@ button { font-family: inherit; cursor: pointer; }
 .btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-lg); }
 .btn .icon { width: 18px; height: 18px; }
 
-.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+/* ---------------- Layout helpers ---------------- */
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
 .section { padding: 96px 0; }
+.section-tight { padding: 64px 0; }
 .eyebrow {
-  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
-  color: var(--brand-500); text-transform: uppercase; margin: 0 0 12px;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  color: var(--brand-500);
+  text-transform: uppercase;
+  margin: 0 0 12px;
 }
 .section-title {
-  font-size: var(--text-4xl); font-weight: 600; line-height: 1.18;
+  font-size: var(--text-4xl);
+  font-weight: 600;
+  line-height: 1.18;
   letter-spacing: var(--tracking-cn-display);
-  color: var(--brand-900); margin: 0 0 16px; max-width: 720px;
+  color: var(--brand-900);
+  margin: 0 0 16px;
+  max-width: 720px;
 }
 .section-sub {
-  font-size: var(--text-lg); line-height: 1.6;
-  color: var(--fg-muted); margin: 0; max-width: 640px;
+  font-size: var(--text-lg);
+  line-height: 1.6;
+  color: var(--fg-muted);
+  margin: 0;
+  max-width: 640px;
 }
 
-/* NAV */
+/* ====================================================================
+   TOP NAV
+   ==================================================================== */
 .topnav {
   position: sticky; top: 0; z-index: 50;
   background: rgba(255,255,255,0.85);
-  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border-subtle);
 }
 .topnav-inner {
-  height: 64px; display: flex; align-items: center; justify-content: space-between;
+  height: 64px;
+  display: flex; align-items: center; justify-content: space-between;
   max-width: 1440px; margin: 0 auto; padding: 0 32px;
 }
 .topnav-brand { display: flex; align-items: center; gap: 10px; }
@@ -79,30 +102,53 @@ button { font-family: inherit; cursor: pointer; }
   font-size: var(--text-md); color: var(--gray-700);
 }
 .topnav-links a {
-  padding: 8px 14px; border-radius: var(--radius-md);
+  padding: 8px 14px;
+  border-radius: var(--radius-md);
   transition: background var(--duration-fast) var(--ease-standard);
 }
 .topnav-links a:hover { background: var(--gray-100); color: var(--brand-900); }
 .topnav-cta { display: flex; gap: 10px; align-items: center; }
 
-/* HERO */
+/* nav user dropdown */
+.nav-user { position: relative; }
+.nav-user-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-md); color: var(--gray-800); font-weight: 500; transition: border-color var(--duration-fast) var(--ease-standard); }
+.nav-user-btn:hover { border-color: var(--border-strong); }
+.nav-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-500); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
+.nav-user-btn .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 100; }
+.nav-dropdown.open { display: block; }
+.nav-dropdown a, .nav-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: var(--text-sm); color: var(--gray-800); background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background var(--duration-fast) var(--ease-standard); }
+.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--gray-50); }
+.nav-dropdown .icon { width: 14px; height: 14px; color: var(--fg-muted); }
+.nav-dropdown-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
+.nav-dropdown .logout { color: var(--danger-600); }
+
+/* ====================================================================
+   HERO
+   ==================================================================== */
 .hero {
-  position: relative; overflow: hidden;
+  position: relative;
+  overflow: hidden;
   padding: 88px 0 64px;
   background:
-    radial-gradient(900px 480px at 78% 12%, rgba(37,99,172,0.06), transparent 60%),
+    radial-gradient(900px 480px at 78% 12%, rgba(37, 99, 172, 0.06), transparent 60%),
     linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 80%);
 }
 .hero-inner {
-  display: grid; grid-template-columns: 1.05fr 1.25fr;
-  gap: 64px; align-items: center;
+  display: grid;
+  grid-template-columns: 1.05fr 1.25fr;
+  gap: 64px;
+  align-items: center;
 }
 .hero-pill {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 6px 14px 6px 8px;
-  background: var(--gray-0); border: 1px solid var(--border-default);
-  border-radius: var(--radius-pill); font-size: var(--text-sm);
-  color: var(--gray-700); margin-bottom: 24px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-sm);
+  color: var(--gray-700);
+  margin-bottom: 24px;
 }
 .hero-pill .badge {
   background: var(--brand-50); color: var(--brand-700);
@@ -110,198 +156,603 @@ button { font-family: inherit; cursor: pointer; }
   font-size: var(--text-xs); font-weight: 600;
 }
 .hero h1 {
-  font-size: 52px; line-height: 1.12;
+  font-size: 52px;
+  line-height: 1.12;
   letter-spacing: var(--tracking-cn-display);
-  color: var(--brand-900); font-weight: 700; margin: 0 0 20px;
+  color: var(--brand-900);
+  font-weight: 700;
+  margin: 0 0 20px;
 }
 .hero h1 em {
-  font-style: normal; color: var(--brand-500); position: relative;
+  font-style: normal;
+  color: var(--brand-500);
+  position: relative;
 }
 .hero h1 em::after {
-  content: ''; position: absolute;
-  left: 0; right: 0; bottom: 4px; height: 10px;
-  background: var(--brand-100); z-index: -1; border-radius: 2px;
+  content: '';
+  position: absolute;
+  left: 0; right: 0; bottom: 4px;
+  height: 10px;
+  background: var(--brand-100);
+  z-index: -1;
+  border-radius: 2px;
+}
+.hero p.lead {
+  font-size: var(--text-xl);
+  line-height: 1.6;
+  color: var(--gray-600);
+  margin: 0 0 32px;
 }
-.hero p.lead { font-size: var(--text-xl); line-height: 1.6; color: var(--gray-600); margin: 0 0 32px; }
 .hero-actions { display: flex; gap: 12px; margin-bottom: 28px; }
-.hero-mini { display: flex; align-items: center; gap: 18px; color: var(--fg-muted); font-size: var(--text-sm); }
+.hero-mini {
+  display: flex; align-items: center; gap: 18px;
+  color: var(--fg-muted); font-size: var(--text-sm);
+}
 .hero-mini-item { display: flex; align-items: center; gap: 6px; }
 .hero-mini-item .icon { width: 14px; height: 14px; color: var(--success-500); }
 
-.hero-preview { position: relative; }
+/* Product preview card */
+.hero-preview {
+  position: relative;
+}
 .preview-shell {
-  background: var(--gray-0); border: 1px solid var(--border-default);
-  border-radius: 14px; box-shadow: var(--shadow-xl); overflow: hidden;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: 14px;
+  box-shadow: var(--shadow-xl);
+  overflow: hidden;
 }
 .preview-titlebar {
-  height: 36px; display: flex; align-items: center; padding: 0 14px;
-  background: var(--gray-50); border-bottom: 1px solid var(--border-subtle); gap: 8px;
+  height: 36px;
+  display: flex; align-items: center;
+  padding: 0 14px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  gap: 8px;
 }
 .preview-dots { display: flex; gap: 6px; }
 .preview-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
-.preview-url { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--fg-subtle); font-family: var(--font-mono); }
+.preview-url {
+  flex: 1;
+  text-align: center;
+  font-size: var(--text-xs);
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+}
 
-.mock-app { display: grid; grid-template-columns: 180px 1fr; height: 540px; }
-.mock-sidebar { background: var(--brand-900); color: #DCE2EB; padding: 20px 12px; font-size: var(--text-sm); }
-.mock-sidebar-brand { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: #fff; padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
-.mock-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 2px; color: #ADC9EA; font-size: 13px; }
+/* Mock dashboard inside preview */
+.mock-app {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  height: 540px;
+}
+.mock-sidebar {
+  background: var(--brand-900);
+  color: #DCE2EB;
+  padding: 20px 12px;
+  font-size: var(--text-sm);
+}
+.mock-sidebar-brand {
+  font-size: 13px; font-weight: 600;
+  letter-spacing: 0.1em;
+  color: #fff;
+  padding: 0 8px 16px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  margin-bottom: 12px;
+}
+.mock-nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 2px;
+  color: #ADC9EA;
+  font-size: 13px;
+}
 .mock-nav-item .icon { width: 16px; height: 16px; }
-.mock-nav-item.active { background: rgba(255,255,255,0.08); color: #fff; }
+.mock-nav-item.active {
+  background: rgba(255,255,255,0.08);
+  color: #fff;
+}
 .mock-main { background: var(--gray-50); padding: 20px; overflow: hidden; }
-.mock-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
+.mock-topbar {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 18px;
+}
 .mock-tabs { display: flex; gap: 4px; background: var(--gray-0); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-default); }
 .mock-tab { padding: 6px 14px; font-size: 13px; color: var(--gray-600); border-radius: var(--radius-sm); }
 .mock-tab.active { background: var(--brand-500); color: #fff; font-weight: 500; }
 .mock-actions { display: flex; gap: 8px; }
-.mock-mini-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; color: var(--gray-700); }
+.mock-mini-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px; padding: 0 12px;
+  background: var(--gray-0); border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  font-size: 12px; color: var(--gray-700);
+}
 .mock-mini-btn .icon { width: 13px; height: 13px; }
 .mock-mini-btn.primary { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
-.mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
-.mock-stat { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }
+
+.mock-stats {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 10px; margin-bottom: 16px;
+}
+.mock-stat {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: 12px 14px;
+}
 .mock-stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
 .mock-stat-value { font-size: 20px; font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; }
 .mock-stat-delta { font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
 .mock-stat-delta.up { color: var(--success-500); }
 .mock-stat-delta.down { color: var(--danger-500); }
-.mock-table-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
-.mock-table-head { display: grid; grid-template-columns: 110px 1fr 60px 70px 80px 70px; padding: 10px 14px; background: var(--gray-50); border-bottom: 1px solid var(--border-subtle); font-size: 11px; color: var(--fg-muted); font-weight: 500; }
-.mock-table-row { display: grid; grid-template-columns: 110px 1fr 60px 70px 80px 70px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; color: var(--gray-800); align-items: center; font-variant-numeric: tabular-nums; }
+
+.mock-table-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.mock-table-head {
+  display: grid;
+  grid-template-columns: 110px 1fr 60px 70px 80px 70px;
+  padding: 10px 14px;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 11px; color: var(--fg-muted); font-weight: 500;
+}
+.mock-table-row {
+  display: grid;
+  grid-template-columns: 110px 1fr 60px 70px 80px 70px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 12px; color: var(--gray-800);
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
 .mock-table-row:last-child { border-bottom: none; }
 .mock-table-row .sku { font-family: var(--font-mono); color: var(--brand-500); font-size: 11px; }
-.mock-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 500; }
+.mock-pill {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+  font-size: 10px;
+  font-weight: 500;
+}
 .mock-pill.ok { background: var(--success-50); color: var(--success-700); }
 .mock-pill.warn { background: var(--warning-50); color: var(--warning-700); }
 .mock-pill.pending { background: var(--info-50); color: var(--info-700); }
 
+/* Floating notification card */
 .hero-toast {
-  position: absolute; bottom: -28px; right: -36px;
-  background: var(--gray-0); border: 1px solid var(--border-default);
-  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
-  padding: 14px 16px; width: 260px;
-  display: flex; gap: 12px; align-items: flex-start; z-index: 2;
+  position: absolute;
+  bottom: -28px; right: -36px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 14px 16px;
+  width: 260px;
+  display: flex; gap: 12px; align-items: flex-start;
+  z-index: 2;
+}
+.hero-toast-icon {
+  width: 36px; height: 36px;
+  border-radius: 8px;
+  background: var(--success-50);
+  display: grid; place-items: center;
+  flex-shrink: 0;
 }
-.hero-toast-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--success-50); display: grid; place-items: center; flex-shrink: 0; }
 .hero-toast-icon .icon { color: var(--success-500); }
 .hero-toast-title { font-size: 13px; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
 .hero-toast-body { font-size: 12px; color: var(--fg-muted); line-height: 1.45; }
 
-/* TRUST STRIP */
-.trust { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--gray-25); padding: 32px 0; }
-.trust-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; align-items: center; gap: 32px; }
+/* ====================================================================
+   TRUST STRIP
+   ==================================================================== */
+.trust {
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--gray-25);
+  padding: 32px 0;
+}
+.trust-grid {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
+  align-items: center;
+  gap: 32px;
+}
 .trust-label { font-size: var(--text-sm); color: var(--fg-muted); }
-.trust-stat-num { font-size: 28px; font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; line-height: 1; }
+.trust-stat-num {
+  font-size: 28px; font-weight: 600;
+  color: var(--brand-900);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
 .trust-stat-num sup { font-size: 14px; color: var(--brand-500); margin-left: 2px; font-weight: 500; }
 .trust-stat-label { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 4px; }
 
-/* MODULES */
-.modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
+/* ====================================================================
+   MODULES
+   ==================================================================== */
+.modules-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 48px;
+}
 .module-card {
-  background: var(--gray-0); border: 1px solid var(--border-default);
-  border-radius: var(--radius-lg); padding: 24px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 24px;
   transition: border-color var(--duration-base) var(--ease-standard),
               box-shadow var(--duration-base) var(--ease-standard);
 }
-.module-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
-.module-card.feature-card { grid-column: span 2; background: linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 100%); }
-.module-card.feature-card .module-icon { background: var(--brand-500); color: #fff; }
-.module-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-50); color: var(--brand-500); display: grid; place-items: center; margin-bottom: 16px; }
+.module-card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+}
+.module-card.feature-card {
+  grid-column: span 2;
+  background: linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 100%);
+}
+.module-card.feature-card .module-icon {
+  background: var(--brand-500); color: #fff;
+}
+.module-icon {
+  width: 40px; height: 40px;
+  border-radius: 10px;
+  background: var(--brand-50);
+  color: var(--brand-500);
+  display: grid; place-items: center;
+  margin-bottom: 16px;
+}
 .module-icon .icon { width: 20px; height: 20px; }
-.module-card h3 { font-size: var(--text-xl); font-weight: 600; color: var(--brand-900); margin: 0 0 6px; letter-spacing: 0.02em; }
-.module-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--fg-muted); margin: 0; }
-.module-card ul { margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--gray-700); }
-.module-card ul li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
+.module-card h3 {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--brand-900);
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.module-card p {
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  color: var(--fg-muted);
+  margin: 0;
+}
+.module-card ul {
+  margin: 16px 0 0; padding: 0;
+  list-style: none;
+  font-size: var(--text-sm);
+  color: var(--gray-700);
+}
+.module-card ul li {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 0;
+  border-top: 1px solid var(--border-subtle);
+}
 .module-card ul li:first-child { border-top: none; }
 .module-card ul li .icon { width: 14px; height: 14px; color: var(--brand-500); }
 
-/* WORKFLOW */
+/* ====================================================================
+   WORKFLOW
+   ==================================================================== */
 .workflow-section { background: var(--gray-25); }
-.workflow-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; margin-top: 48px; }
-.workflow-text h3 { font-size: var(--text-2xl); font-weight: 600; color: var(--brand-900); margin: 0 0 12px; }
+.workflow-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.1fr;
+  gap: 64px;
+  align-items: center;
+  margin-top: 48px;
+}
+.workflow-text h3 {
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--brand-900);
+  margin: 0 0 12px;
+}
 .workflow-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
-.wf-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
-.wf-num { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.wf-step {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  gap: 14px;
+  align-items: start;
+}
+.wf-num {
+  width: 32px; height: 32px;
+  border-radius: var(--radius-pill);
+  background: var(--brand-50);
+  color: var(--brand-700);
+  display: grid; place-items: center;
+  font-size: 13px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
 .wf-step.active .wf-num { background: var(--brand-500); color: #fff; }
 .wf-step h4 { margin: 4px 0 4px; font-size: var(--text-md); font-weight: 600; color: var(--gray-900); }
 .wf-step p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; }
-.flow-vis { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; }
-.flow-doc { background: var(--gray-50); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 14px; }
+
+/* Workflow visualization (right side) */
+.flow-vis {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 28px;
+}
+.flow-doc {
+  background: var(--gray-50);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: 16px 18px;
+  margin-bottom: 14px;
+}
 .flow-doc-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
 .flow-doc-id { font-family: var(--font-mono); font-size: 12px; color: var(--brand-500); }
-.flow-doc-status { font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--success-50); color: var(--success-700); }
+.flow-doc-status {
+  font-size: 11px; font-weight: 500;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--info-50); color: var(--info-700);
+}
+.flow-doc-status.approved { background: var(--success-50); color: var(--success-700); }
 .flow-row { display: grid; grid-template-columns: 70px 1fr 70px 70px; gap: 8px; font-size: 12px; padding: 6px 0; color: var(--gray-700); font-variant-numeric: tabular-nums; }
 .flow-row.head { font-weight: 500; color: var(--fg-muted); font-size: 11px; padding: 0 0 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
 .flow-row.foot { border-top: 1px solid var(--border-default); margin-top: 6px; padding-top: 8px; font-weight: 600; color: var(--brand-900); }
-.flow-arrow { display: flex; align-items: center; justify-content: center; padding: 12px 0; color: var(--gray-400); }
+
+.flow-arrow {
+  display: flex; align-items: center; justify-content: center;
+  padding: 12px 0;
+  color: var(--gray-400);
+}
 .flow-arrow .icon { width: 18px; height: 18px; }
+
 .flow-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-.flow-effect { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }
+.flow-effect {
+  background: #fff;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: 12px 14px;
+}
 .flow-effect-label { font-size: 11px; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; }
 .flow-effect-label .icon { width: 12px; height: 12px; color: var(--success-500); }
 .flow-effect-val { font-size: 18px; font-weight: 600; color: var(--brand-900); margin-top: 4px; font-variant-numeric: tabular-nums; }
 
-/* PLATFORMS */
-.platforms-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 48px; }
-.platform-card { text-align: center; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 16px; transition: border-color var(--duration-base) var(--ease-standard); }
+/* ====================================================================
+   PLATFORMS
+   ==================================================================== */
+.platforms-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  margin-top: 48px;
+}
+.platform-card {
+  text-align: center;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 24px 16px;
+  transition: border-color var(--duration-base) var(--ease-standard);
+}
 .platform-card:hover { border-color: var(--brand-300); }
-.platform-card .icon { width: 28px; height: 28px; margin: 0 auto 12px; color: var(--brand-500); }
+.platform-card .icon {
+  width: 28px; height: 28px;
+  margin: 0 auto 12px;
+  color: var(--brand-500);
+}
 .platform-card h4 { margin: 0 0 4px; font-size: var(--text-md); font-weight: 600; color: var(--brand-900); }
 .platform-card p { margin: 0; font-size: var(--text-xs); color: var(--fg-muted); }
+
 .platforms-visual {
-  margin-top: 56px; background: var(--brand-900); border-radius: var(--radius-xl);
-  padding: 56px 48px; position: relative; overflow: hidden; color: #fff;
-  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center;
+  margin-top: 56px;
+  background: var(--brand-900);
+  border-radius: var(--radius-xl);
+  padding: 56px 48px;
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 48px;
+  align-items: center;
 }
 .platforms-visual::before {
-  content: ''; position: absolute; inset: 0;
-  background: radial-gradient(600px 320px at 80% 10%, rgba(79,134,198,0.20), transparent 60%);
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(600px 320px at 80% 10%, rgba(79, 134, 198, 0.20), transparent 60%);
   pointer-events: none;
 }
-.pv-text h3 { font-size: 32px; font-weight: 600; letter-spacing: var(--tracking-cn-display); margin: 0 0 16px; color: #fff; }
+.pv-text h3 {
+  font-size: 32px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-cn-display);
+  margin: 0 0 16px;
+  color: #fff;
+}
 .pv-text p { font-size: var(--text-lg); color: #ADC9EA; margin: 0 0 24px; line-height: 1.6; }
 .pv-feature-list { display: flex; flex-direction: column; gap: 10px; }
-.pv-feature { display: flex; align-items: center; gap: 10px; font-size: var(--text-md); color: #DCE2EB; }
+.pv-feature {
+  display: flex; align-items: center; gap: 10px;
+  font-size: var(--text-md); color: #DCE2EB;
+}
 .pv-feature .icon { width: 16px; height: 16px; color: var(--brand-300); }
-.device-stack { position: relative; height: 320px; z-index: 1; }
-.device-laptop { position: absolute; width: 100%; bottom: 0; background: #0A1F3B; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px 8px 4px 4px; box-shadow: var(--shadow-xl); }
-.device-laptop::after { content: ''; position: absolute; bottom: -10px; left: -16px; right: -16px; height: 10px; background: linear-gradient(180deg, #232934 0%, #141821 100%); border-radius: 0 0 8px 8px; }
-.device-laptop-screen { background: var(--gray-50); margin: 8px; height: 200px; border-radius: 4px; padding: 10px; overflow: hidden; }
-.dlmr { height: 12px; background: var(--gray-200); border-radius: 2px; margin-bottom: 6px; }
-.dlmr.short { width: 60%; }
-.dlmr.brand { background: var(--brand-300); width: 30%; }
-.device-phone { position: absolute; right: 32px; bottom: -8px; width: 110px; height: 220px; background: #0A1F3B; border: 2px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 4px; box-shadow: var(--shadow-xl); z-index: 2; }
-.device-phone-screen { background: var(--gray-50); border-radius: 12px; height: 100%; padding: 8px; overflow: hidden; }
 
-/* REPORTS */
-.reports-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; margin-top: 48px; }
-.report-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; }
-.report-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
+.device-stack {
+  position: relative;
+  height: 320px;
+  z-index: 1;
+}
+.device-laptop {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  background: #0A1F3B;
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 8px 8px 4px 4px;
+  box-shadow: var(--shadow-xl);
+}
+.device-laptop::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: -16px;
+  right: -16px;
+  height: 10px;
+  background: linear-gradient(180deg, #232934 0%, #141821 100%);
+  border-radius: 0 0 8px 8px;
+}
+.device-laptop-screen {
+  background: var(--gray-50);
+  margin: 8px;
+  height: 200px;
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 9px;
+  color: var(--gray-700);
+  overflow: hidden;
+}
+.device-laptop-mock-row {
+  height: 12px; background: var(--gray-200); border-radius: 2px; margin-bottom: 6px;
+}
+.device-laptop-mock-row.short { width: 60%; }
+.device-laptop-mock-row.brand { background: var(--brand-300); width: 30%; }
+
+.device-phone {
+  position: absolute;
+  right: 32px;
+  bottom: -8px;
+  width: 110px;
+  height: 220px;
+  background: #0A1F3B;
+  border: 2px solid rgba(255,255,255,0.10);
+  border-radius: 16px;
+  padding: 4px;
+  box-shadow: var(--shadow-xl);
+  z-index: 2;
+}
+.device-phone-screen {
+  background: var(--gray-50);
+  border-radius: 12px;
+  height: 100%;
+  padding: 8px;
+  overflow: hidden;
+  font-size: 8px;
+}
+.device-phone-screen .top {
+  height: 14px;
+  background: var(--brand-500);
+  border-radius: 4px;
+  margin-bottom: 6px;
+}
+
+/* ====================================================================
+   REPORTS / INSIGHTS
+   ==================================================================== */
+.reports-grid {
+  display: grid;
+  grid-template-columns: 1.05fr 1fr;
+  gap: 64px;
+  align-items: center;
+  margin-top: 48px;
+}
+.report-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 24px;
+}
+.report-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 18px;
+}
 .report-title { font-size: var(--text-md); font-weight: 600; color: var(--gray-900); margin: 0; }
 .report-sub { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; }
 .report-tabs { display: flex; gap: 4px; }
-.report-tab { padding: 4px 10px; font-size: 11px; color: var(--fg-muted); border-radius: var(--radius-sm); cursor: pointer; }
+.report-tab {
+  padding: 4px 10px;
+  font-size: 11px;
+  color: var(--fg-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
 .report-tab.active { background: var(--gray-100); color: var(--gray-900); }
-.chart { position: relative; height: 200px; margin: 8px 0 0; }
+
+.chart {
+  position: relative;
+  height: 200px;
+  margin: 8px 0 0;
+}
 .chart svg { width: 100%; height: 100%; }
-.chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid var(--border-subtle); padding-top: 18px; margin-top: 8px; }
+.chart-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 18px;
+  margin-top: 8px;
+}
 .chart-stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
 .chart-stat-val { font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; }
 .chart-stat-val small { font-size: var(--text-xs); color: var(--success-500); margin-left: 4px; font-weight: 500; }
+
 .insights-features { display: flex; flex-direction: column; gap: 24px; }
 .insight-item { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
-.insight-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-50); display: grid; place-items: center; color: var(--brand-500); }
+.insight-icon {
+  width: 36px; height: 36px;
+  border-radius: 8px;
+  background: var(--brand-50);
+  display: grid; place-items: center;
+  color: var(--brand-500);
+}
 .insight-icon .icon { width: 18px; height: 18px; }
 .insight-item h4 { margin: 0 0 4px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
 .insight-item p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.6; }
 
-/* SECURITY */
+/* ====================================================================
+   SECURITY / PERMISSIONS
+   ==================================================================== */
 .security-section { background: var(--gray-25); }
-.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
-.security-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px; }
-.security-card .icon { width: 22px; height: 22px; color: var(--brand-500); margin-bottom: 14px; }
+.security-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-top: 48px;
+}
+.security-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+}
+.security-card .icon {
+  width: 22px; height: 22px;
+  color: var(--brand-500);
+  margin-bottom: 14px;
+}
 .security-card h4 { margin: 0 0 6px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
 .security-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; }
-.roles-table { margin-top: 32px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
-.roles-row { display: grid; grid-template-columns: 180px 1fr 80px 80px 80px 80px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
+
+.roles-table {
+  margin-top: 32px;
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.roles-row {
+  display: grid;
+  grid-template-columns: 180px 1fr 80px 80px 80px 80px;
+  align-items: center;
+  padding: 14px 24px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-sm);
+}
 .roles-row:last-child { border-bottom: none; }
 .roles-row.head { background: var(--gray-50); color: var(--fg-muted); font-size: 12px; font-weight: 500; }
 .roles-row .role-name { font-weight: 600; color: var(--brand-900); }
@@ -310,25 +761,124 @@ button { font-family: inherit; cursor: pointer; }
 .role-check .icon { width: 16px; height: 16px; color: var(--success-500); display: inline-block; }
 .role-check.no .icon { color: var(--gray-300); }
 
-/* FAQ */
+/* ====================================================================
+   PRICING
+   ==================================================================== */
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 48px;
+}
+.price-card {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 32px 28px;
+  display: flex; flex-direction: column;
+}
+.price-card.featured {
+  border: 1px solid var(--brand-500);
+  box-shadow: 0 0 0 4px rgba(37, 99, 172, 0.08), var(--shadow-md);
+  position: relative;
+}
+.price-card.featured::before {
+  content: '推荐';
+  position: absolute;
+  top: -1px; right: 24px;
+  background: var(--brand-500);
+  color: #fff;
+  padding: 4px 12px;
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}
+.price-tier {
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.price-name {
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--brand-900);
+  margin-bottom: 16px;
+}
+.price-amount {
+  display: flex; align-items: baseline; gap: 4px;
+  margin-bottom: 8px;
+}
+.price-amount .currency { font-size: 18px; color: var(--gray-700); font-weight: 500; }
+.price-amount .num { font-size: 42px; font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; line-height: 1; }
+.price-amount .unit { font-size: 14px; color: var(--fg-muted); margin-left: 4px; }
+.price-card.custom .num { font-size: 32px; }
+.price-sub { font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: 24px; }
+.price-features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
+.price-features li {
+  display: flex; align-items: flex-start; gap: 8px;
+  font-size: var(--text-sm);
+  color: var(--gray-700);
+  line-height: 1.5;
+}
+.price-features li .icon { width: 16px; height: 16px; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
+.price-card .btn { width: 100%; justify-content: center; margin-top: auto; }
+
+/* ====================================================================
+   FAQ
+   ==================================================================== */
 .faq-list { margin-top: 48px; max-width: 880px; }
-.faq-item { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
-.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-size: var(--text-lg); font-weight: 500; color: var(--brand-900); list-style: none; }
+.faq-item {
+  background: var(--gray-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.faq-q {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 20px 24px;
+  cursor: pointer;
+  font-size: var(--text-lg);
+  font-weight: 500;
+  color: var(--brand-900);
+  list-style: none;
+}
 .faq-q::-webkit-details-marker { display: none; }
 .faq-q .icon { width: 18px; height: 18px; color: var(--fg-muted); transition: transform var(--duration-base) var(--ease-standard); }
 details[open] .faq-q .icon { transform: rotate(45deg); }
-.faq-a { padding: 0 24px 22px; font-size: var(--text-md); color: var(--fg-muted); line-height: 1.7; }
+.faq-a {
+  padding: 0 24px 22px;
+  font-size: var(--text-md);
+  color: var(--fg-muted);
+  line-height: 1.7;
+}
 
-/* CTA BANNER */
+/* ====================================================================
+   CTA BANNER
+   ==================================================================== */
 .cta-banner {
   background:
-    radial-gradient(800px 360px at 80% 30%, rgba(37,99,172,0.40), transparent 60%),
+    radial-gradient(800px 360px at 80% 30%, rgba(37, 99, 172, 0.40), transparent 60%),
     linear-gradient(135deg, #0A1F3B 0%, #15407D 100%);
-  color: #fff; border-radius: var(--radius-xl); padding: 64px 56px;
-  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
+  color: #fff;
+  border-radius: var(--radius-xl);
+  padding: 64px 56px;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 48px;
+  align-items: center;
   margin: 96px 0;
 }
-.cta-banner h2 { font-size: 36px; font-weight: 600; letter-spacing: var(--tracking-cn-display); margin: 0 0 16px; color: #fff; line-height: 1.25; }
+.cta-banner h2 {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-cn-display);
+  margin: 0 0 16px;
+  color: #fff;
+  line-height: 1.25;
+}
 .cta-banner p { font-size: var(--text-lg); color: #ADC9EA; margin: 0; line-height: 1.6; }
 .cta-banner-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
 .cta-banner .btn-primary { background: #fff; color: var(--brand-700); }
@@ -337,32 +887,57 @@ details[open] .faq-q .icon { transform: rotate(45deg); }
 .cta-banner .btn-secondary:hover { background: rgba(255,255,255,0.10); }
 .cta-banner-note { font-size: var(--text-sm); color: #99A3B3; }
 
-/* FOOTER */
-footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle); padding: 64px 0 32px; color: var(--fg-muted); font-size: var(--text-sm); }
-.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; margin-bottom: 48px; }
+/* ====================================================================
+   FOOTER
+   ==================================================================== */
+footer {
+  background: var(--gray-25);
+  border-top: 1px solid var(--border-subtle);
+  padding: 64px 0 32px;
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+}
+.footer-grid {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(4, 1fr);
+  gap: 48px;
+  margin-bottom: 48px;
+}
 .footer-brand img { height: 32px; margin-bottom: 16px; }
 .footer-brand p { margin: 0 0 16px; max-width: 320px; line-height: 1.6; color: var(--fg-muted); }
 .footer-contact { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.8; }
-.footer-col h5 { font-size: var(--text-xs); font-weight: 600; color: var(--brand-900); letter-spacing: 0.06em; margin: 0 0 16px; text-transform: uppercase; }
+.footer-col h5 {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--brand-900);
+  letter-spacing: 0.06em;
+  margin: 0 0 16px;
+  text-transform: uppercase;
+}
 .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
 .footer-col li a { color: var(--gray-600); }
 .footer-col li a:hover { color: var(--brand-500); }
-.footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 24px; display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-subtle); }
+.footer-bottom {
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 24px;
+  display: flex; justify-content: space-between;
+  font-size: var(--text-xs);
+  color: var(--fg-subtle);
+}
 
 @media (max-width: 1024px) {
   .hero-inner, .workflow-grid, .reports-grid, .platforms-visual, .cta-banner { grid-template-columns: 1fr; }
-  .modules-grid, .security-grid, .platforms-grid { grid-template-columns: repeat(2, 1fr); }
+  .modules-grid, .security-grid, .pricing-grid, .platforms-grid { grid-template-columns: repeat(2, 1fr); }
   .module-card.feature-card { grid-column: span 2; }
   .footer-grid { grid-template-columns: 1fr 1fr; }
   .hero h1 { font-size: 40px; }
-  .trust-grid { grid-template-columns: 1fr 1fr; }
   .roles-row { grid-template-columns: 140px 1fr repeat(4, 60px); padding: 12px 16px; }
 }
 </style>
 </head>
 <body>
 
-<!-- NAV -->
+<!-- =========================== TOP NAV =========================== -->
 <nav class="topnav">
   <div class="topnav-inner">
     <a href="/" class="topnav-brand">
@@ -370,22 +945,23 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
     </a>
     <div class="topnav-links">
       <a href="#modules">产品</a>
+      <a href="#pricing">价格</a>
       <a href="/download.html">下载</a>
       <a href="/docs.html">文档</a>
+      <a href="#faq">支持</a>
     </div>
-    <div class="topnav-cta">
-      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
-    </div>
+    <div class="topnav-cta" id="nav-cta"></div>
   </div>
 </nav>
 
-<!-- HERO -->
+<!-- =========================== HERO =========================== -->
 <section class="hero">
   <div class="container hero-inner">
     <div>
       <div class="hero-pill">
-        <span class="badge">专业版</span>
-        <span>适用于酒行与酒店的饮品库存管理</span>
+        <span class="badge">v1.6</span>
+        <span>新增多仓库联动盘点 ·</span>
+        <span style="color: var(--brand-500); font-weight: 500;">查看更新</span>
       </div>
       <h1>从入库到出库，<br/><em>一套系统</em>管到底。</h1>
       <p class="lead">
@@ -393,18 +969,18 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
       </p>
       <div class="hero-actions">
         <a href="/app/" class="btn btn-primary btn-lg">
-          进入管理端
+          免费试用 30 天
           <i data-lucide="arrow-right" class="icon"></i>
         </a>
-        <a href="/download.html" class="btn btn-secondary btn-lg">
-          <i data-lucide="download" class="icon"></i>
-          下载客户端
+        <a href="/app/" class="btn btn-secondary btn-lg">
+          <i data-lucide="play-circle" class="icon"></i>
+          观看演示
         </a>
       </div>
       <div class="hero-mini">
-        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>多仓库多角色</div>
-        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>入库出库审批留痕</div>
-        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>扫码防伪溯源</div>
+        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>无需安装</div>
+        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>30 天免费</div>
+        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>支持私有部署</div>
       </div>
     </div>
 
@@ -412,11 +988,11 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
       <div class="preview-shell">
         <div class="preview-titlebar">
           <div class="preview-dots"><span></span><span></span><span></span></div>
-          <div class="preview-url">jiu.51yanmei.com/app</div>
+          <div class="preview-url">yanmei.app/inventory</div>
         </div>
         <div class="mock-app">
           <aside class="mock-sidebar">
-            <div class="mock-sidebar-brand">岩美酒库</div>
+            <div class="mock-sidebar-brand">金樽酒行 · S001</div>
             <div class="mock-nav-item"><i data-lucide="package-plus" class="icon"></i>入库管理</div>
             <div class="mock-nav-item"><i data-lucide="package-minus" class="icon"></i>出库管理</div>
             <div class="mock-nav-item active"><i data-lucide="package" class="icon"></i>库存管理</div>
@@ -437,10 +1013,11 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
                 <div class="mock-mini-btn primary"><i data-lucide="clipboard-list" class="icon"></i>新建盘点</div>
               </div>
             </div>
+
             <div class="mock-stats">
               <div class="mock-stat">
                 <div class="mock-stat-label">库存总量</div>
-                <div class="mock-stat-value">2,816</div>
+                <div class="mock-stat-value">2,816 <span style="font-size: 12px; color: var(--fg-muted); font-weight: 400;">瓶</span></div>
                 <div class="mock-stat-delta up">↑ 4.2% 较上月</div>
               </div>
               <div class="mock-stat">
@@ -450,33 +1027,59 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
               </div>
               <div class="mock-stat">
                 <div class="mock-stat-label">本月入库</div>
-                <div class="mock-stat-value">128 单</div>
+                <div class="mock-stat-value">128 <span style="font-size: 12px; color: var(--fg-muted); font-weight: 400;">单</span></div>
                 <div class="mock-stat-delta up">↑ 12 单</div>
               </div>
               <div class="mock-stat">
                 <div class="mock-stat-label">预警 SKU</div>
-                <div class="mock-stat-value" style="color:var(--warning-500)">7</div>
+                <div class="mock-stat-value" style="color: var(--warning-500);">7</div>
                 <div class="mock-stat-delta down">↓ 库存不足</div>
               </div>
             </div>
+
             <div class="mock-table-card">
               <div class="mock-table-head">
                 <div>SKU</div><div>商品名称</div><div>仓库</div><div>库存</div><div>金额</div><div>状态</div>
               </div>
               <div class="mock-table-row">
-                <div class="sku">WT-501-006</div><div>茅台飞天 · 500ml×6</div><div>A 仓</div><div>148</div><div>¥298,400</div><div><span class="mock-pill ok">充足</span></div>
+                <div class="sku">WT-501-006</div>
+                <div>茅台飞天 53° · 500ml×6</div>
+                <div>A 仓</div>
+                <div>148</div>
+                <div>¥298,400</div>
+                <div><span class="mock-pill ok">充足</span></div>
               </div>
               <div class="mock-table-row">
-                <div class="sku">XJ-468-001</div><div>五粮液第八代 · 500ml</div><div>A 仓</div><div>92</div><div>¥92,920</div><div><span class="mock-pill ok">充足</span></div>
+                <div class="sku">XJ-468-001</div>
+                <div>五粮液第八代 52° · 500ml</div>
+                <div>A 仓</div>
+                <div>92</div>
+                <div>¥92,920</div>
+                <div><span class="mock-pill ok">充足</span></div>
               </div>
               <div class="mock-table-row">
-                <div class="sku">XJ-330-024</div><div>剑南春水晶剑 · 500ml×6</div><div>B 仓</div><div style="color:var(--warning-700);font-weight:500">12</div><div>¥4,560</div><div><span class="mock-pill warn">偏低</span></div>
+                <div class="sku">XJ-330-024</div>
+                <div>剑南春水晶剑 52° · 500ml×6</div>
+                <div>B 仓</div>
+                <div style="color: var(--warning-700); font-weight: 500;">12</div>
+                <div>¥4,560</div>
+                <div><span class="mock-pill warn">偏低</span></div>
               </div>
               <div class="mock-table-row">
-                <div class="sku">PJ-750-012</div><div>拉菲传奇波尔多 · 750ml</div><div>A 仓</div><div>64</div><div>¥18,560</div><div><span class="mock-pill ok">充足</span></div>
+                <div class="sku">PJ-750-012</div>
+                <div>拉菲传奇波尔多 · 750ml</div>
+                <div>A 仓</div>
+                <div>64</div>
+                <div>¥18,560</div>
+                <div><span class="mock-pill ok">充足</span></div>
               </div>
               <div class="mock-table-row">
-                <div class="sku">PJ-700-008</div><div>轩尼诗 VSOP · 700ml</div><div>B 仓</div><div>38</div><div>¥22,420</div><div><span class="mock-pill pending">入库中</span></div>
+                <div class="sku">PJ-700-008</div>
+                <div>轩尼诗 VSOP · 700ml</div>
+                <div>B 仓</div>
+                <div>38</div>
+                <div>¥22,420</div>
+                <div><span class="mock-pill pending">入库中</span></div>
               </div>
             </div>
           </main>
@@ -496,37 +1099,39 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   </div>
 </section>
 
-<!-- TRUST STRIP -->
+<!-- =========================== TRUST STRIP =========================== -->
 <section class="trust">
   <div class="container">
     <div class="trust-grid">
-      <div class="trust-label">专为酒水经营场所设计</div>
+      <div class="trust-label">服务各类酒水经营场所</div>
       <div>
-        <div class="trust-stat-num">7<sup>大</sup></div>
-        <div class="trust-stat-label">核心业务模块</div>
+        <div class="trust-stat-num">1,280<sup>+</sup></div>
+        <div class="trust-stat-label">酒行 / 酒店门店</div>
       </div>
       <div>
-        <div class="trust-stat-num">5<sup>端</sup></div>
-        <div class="trust-stat-label">Web / iOS / Android / Win / Mac</div>
-      </div>
-      <div>
-        <div class="trust-stat-num">4<sup>级</sup></div>
-        <div class="trust-stat-label">角色权限控制</div>
+        <div class="trust-stat-num">8.4<sup>%</sup></div>
+        <div class="trust-stat-label">平均损耗下降</div>
       </div>
       <div>
         <div class="trust-stat-num">99.9<sup>%</sup></div>
         <div class="trust-stat-label">系统可用性</div>
       </div>
+      <div>
+        <div class="trust-stat-num">5<sup>端</sup></div>
+        <div class="trust-stat-label">Web / iOS / Android / Win / Mac</div>
+      </div>
     </div>
   </div>
 </section>
 
-<!-- MODULES -->
+<!-- =========================== MODULES =========================== -->
 <section class="section" id="modules">
   <div class="container">
     <p class="eyebrow">核心模块</p>
     <h2 class="section-title">七大模块，覆盖酒水经营全流程</h2>
-    <p class="section-sub">从商品建档到入库出库、从财务结算到数据导入，岩美一站式承载日常运营。</p>
+    <p class="section-sub">
+      从商品建档到入库出库、从财务结算到数据导入，岩美一站式承载日常运营。
+    </p>
 
     <div class="modules-grid">
       <div class="module-card feature-card">
@@ -540,31 +1145,37 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
           <li><i data-lucide="check" class="icon"></i>批次号追踪，生产日期可追溯</li>
         </ul>
       </div>
+
       <div class="module-card">
         <div class="module-icon"><i data-lucide="package-minus" class="icon"></i></div>
         <h3>出库管理</h3>
         <p>出库前自动校验库存，审批通过即扣减库存并生成应收。库存不足，单据无法通过。</p>
       </div>
+
       <div class="module-card">
         <div class="module-icon"><i data-lucide="package" class="icon"></i></div>
         <h3>库存管理</h3>
         <p>实时查询每个 SKU 的库存数量、所在仓库、批次。支持全仓盘点与库存流水。</p>
       </div>
+
       <div class="module-card">
         <div class="module-icon"><i data-lucide="wallet" class="icon"></i></div>
         <h3>财务管理</h3>
         <p>审批同步生成应付应收，月度汇总。结清一键完成，可按往来单位筛选导出。</p>
       </div>
+
       <div class="module-card">
         <div class="module-icon"><i data-lucide="truck" class="icon"></i></div>
         <h3>往来单位</h3>
         <p>供应商与客户统一档案管理。卡号、初始余额、联系信息集中维护。</p>
       </div>
+
       <div class="module-card">
         <div class="module-icon"><i data-lucide="database" class="icon"></i></div>
         <h3>基础数据</h3>
         <p>商品名称、系列、规格三级字典，单品数量配置。先建字典，后录单据。</p>
       </div>
+
       <div class="module-card">
         <div class="module-icon"><i data-lucide="settings" class="icon"></i></div>
         <h3>系统设置</h3>
@@ -574,12 +1185,14 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   </div>
 </section>
 
-<!-- WORKFLOW -->
+<!-- =========================== WORKFLOW =========================== -->
 <section class="section workflow-section" id="workflow">
   <div class="container">
     <p class="eyebrow">业务流程</p>
     <h2 class="section-title">审核驱动业务流，每一笔交易都可追溯</h2>
-    <p class="section-sub">从单据录入到库存变动、账款生成，每一步都有清晰状态与经办人记录。</p>
+    <p class="section-sub">
+      从单据录入到库存变动、账款生成，每一步都有清晰状态与经办人记录。
+    </p>
 
     <div class="workflow-grid">
       <div class="workflow-text">
@@ -603,7 +1216,7 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
             <div class="wf-num">3</div>
             <div>
               <h4>审批通过</h4>
-              <p>操作员及以上权限审批。通过后库存自动 +N，同时生成一笔应付账款，挂在对应供应商名下。</p>
+              <p>操作员及以上权限审批。通过后库存自动 +N，同时生成一笔应付账款，账款挂在对应供应商名下。</p>
             </div>
           </div>
           <div class="wf-step">
@@ -620,23 +1233,41 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
         <div class="flow-doc">
           <div class="flow-doc-head">
             <div class="flow-doc-id">RK20260523000007</div>
-            <div class="flow-doc-status">已审批</div>
+            <div class="flow-doc-status approved">已审批</div>
+          </div>
+          <div class="flow-row head">
+            <div>商品</div><div>规格</div><div>数量</div><div>金额</div>
+          </div>
+          <div class="flow-row">
+            <div>茅台飞天</div><div>500ml×6</div><div>4</div><div>¥8,000</div>
+          </div>
+          <div class="flow-row">
+            <div>五粮液</div><div>500ml</div><div>20</div><div>¥18,400</div>
+          </div>
+          <div class="flow-row">
+            <div>剑南春</div><div>500ml×6</div><div>2</div><div>¥4,200</div>
+          </div>
+          <div class="flow-row">
+            <div>拉菲传奇</div><div>750ml</div><div>10</div><div>¥17,800</div>
+          </div>
+          <div class="flow-row foot">
+            <div>合计</div><div></div><div>36</div><div>¥48,400</div>
           </div>
-          <div class="flow-row head"><div>商品</div><div>规格</div><div>数量</div><div>金额</div></div>
-          <div class="flow-row"><div>茅台飞天</div><div>500ml×6</div><div>4</div><div>¥8,000</div></div>
-          <div class="flow-row"><div>五粮液</div><div>500ml</div><div>20</div><div>¥18,400</div></div>
-          <div class="flow-row"><div>剑南春</div><div>500ml×6</div><div>2</div><div>¥4,200</div></div>
-          <div class="flow-row"><div>拉菲传奇</div><div>750ml</div><div>10</div><div>¥17,800</div></div>
-          <div class="flow-row foot"><div>合计</div><div></div><div>36</div><div>¥48,400</div></div>
         </div>
+
         <div class="flow-arrow"><i data-lucide="arrow-down" class="icon"></i></div>
+
         <div class="flow-effects">
           <div class="flow-effect">
-            <div class="flow-effect-label"><i data-lucide="check-circle-2" class="icon"></i>库存更新</div>
+            <div class="flow-effect-label">
+              <i data-lucide="check-circle-2" class="icon"></i>库存更新
+            </div>
             <div class="flow-effect-val">+36 瓶</div>
           </div>
           <div class="flow-effect">
-            <div class="flow-effect-label"><i data-lucide="check-circle-2" class="icon"></i>应付账款</div>
+            <div class="flow-effect-label">
+              <i data-lucide="check-circle-2" class="icon"></i>应付账款
+            </div>
             <div class="flow-effect-val">¥48,400</div>
           </div>
         </div>
@@ -645,12 +1276,14 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   </div>
 </section>
 
-<!-- PLATFORMS -->
-<section class="section">
+<!-- =========================== PLATFORMS =========================== -->
+<section class="section" id="platforms">
   <div class="container">
     <p class="eyebrow">多端覆盖</p>
     <h2 class="section-title">一个账号，五端同步</h2>
-    <p class="section-sub">办公室开台账，仓库扫码盘点，随时随地查看实时数据。同一份数据，任意终端访问。</p>
+    <p class="section-sub">
+      办公室开台账，仓库扫码盘点，老板出差查看实时报表。同一份数据，任意终端访问。
+    </p>
 
     <div class="platforms-grid">
       <div class="platform-card">
@@ -683,43 +1316,52 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
     <div class="platforms-visual">
       <div class="pv-text">
         <h3>仓库里也能用得顺手</h3>
-        <p>移动端扫码即查库存、入库、出库，网络恢复后自动同步。</p>
+        <p>移动端扫码即查库存、入库、出库，断网也能继续工作，恢复网络后自动同步。</p>
         <div class="pv-feature-list">
           <div class="pv-feature"><i data-lucide="scan-line" class="icon"></i>扫码即查商品 · 二维码标签</div>
+          <div class="pv-feature"><i data-lucide="wifi-off" class="icon"></i>离线缓存，断网继续作业</div>
           <div class="pv-feature"><i data-lucide="bell" class="icon"></i>实时推送审批与库存预警</div>
           <div class="pv-feature"><i data-lucide="printer" class="icon"></i>蓝牙连接打印商品标签</div>
-          <div class="pv-feature"><i data-lucide="shield-check" class="icon"></i>商品防伪溯源，扫码验真</div>
         </div>
       </div>
+
       <div class="device-stack">
         <div class="device-laptop">
           <div class="device-laptop-screen">
-            <div class="dlmr brand"></div>
-            <div class="dlmr short"></div>
-            <div class="dlmr"></div>
-            <div class="dlmr short"></div>
-            <div class="dlmr"></div>
-            <div class="dlmr short"></div>
-            <div class="dlmr"></div>
-            <div style="display:flex;gap:6px;margin-top:10px">
-              <div style="flex:1;height:50px;background:var(--gray-100);border-radius:3px"></div>
-              <div style="flex:1;height:50px;background:var(--brand-100);border-radius:3px"></div>
-              <div style="flex:1;height:50px;background:var(--gray-100);border-radius:3px"></div>
+            <div class="device-laptop-mock-row brand"></div>
+            <div class="device-laptop-mock-row short"></div>
+            <div class="device-laptop-mock-row"></div>
+            <div class="device-laptop-mock-row short"></div>
+            <div class="device-laptop-mock-row"></div>
+            <div class="device-laptop-mock-row short"></div>
+            <div class="device-laptop-mock-row"></div>
+            <div class="device-laptop-mock-row short"></div>
+            <div style="display: flex; gap: 6px; margin-top: 10px;">
+              <div style="flex: 1; height: 50px; background: var(--gray-100); border-radius: 3px;"></div>
+              <div style="flex: 1; height: 50px; background: var(--brand-100); border-radius: 3px;"></div>
+              <div style="flex: 1; height: 50px; background: var(--gray-100); border-radius: 3px;"></div>
             </div>
           </div>
         </div>
         <div class="device-phone">
           <div class="device-phone-screen">
-            <div style="height:14px;background:var(--brand-500);border-radius:4px;margin-bottom:6px"></div>
-            <div style="height:8px;background:var(--gray-200);border-radius:2px;margin-bottom:4px;width:70%"></div>
-            <div style="height:8px;background:var(--gray-200);border-radius:2px;margin-bottom:8px;width:50%"></div>
-            <div style="background:var(--gray-0);border:1px solid var(--gray-200);border-radius:4px;padding:6px;margin-bottom:4px">
-              <div style="height:6px;background:var(--brand-300);border-radius:1px;width:60%;margin-bottom:3px"></div>
-              <div style="height:4px;background:var(--gray-200);border-radius:1px;width:80%"></div>
+            <div class="top"></div>
+            <div style="height: 8px; background: var(--gray-200); border-radius: 2px; margin-bottom: 4px; width: 70%;"></div>
+            <div style="height: 8px; background: var(--gray-200); border-radius: 2px; margin-bottom: 8px; width: 50%;"></div>
+            <div style="background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 4px; padding: 6px; margin-bottom: 4px;">
+              <div style="height: 6px; background: var(--brand-300); border-radius: 1px; width: 60%; margin-bottom: 3px;"></div>
+              <div style="height: 4px; background: var(--gray-200); border-radius: 1px; width: 80%;"></div>
             </div>
-            <div style="background:var(--gray-0);border:1px solid var(--gray-200);border-radius:4px;padding:6px;margin-bottom:4px">
-              <div style="height:6px;background:var(--brand-300);border-radius:1px;width:50%;margin-bottom:3px"></div>
-              <div style="height:4px;background:var(--gray-200);border-radius:1px;width:70%"></div>
+            <div style="background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 4px; padding: 6px; margin-bottom: 4px;">
+              <div style="height: 6px; background: var(--brand-300); border-radius: 1px; width: 50%; margin-bottom: 3px;"></div>
+              <div style="height: 4px; background: var(--gray-200); border-radius: 1px; width: 70%;"></div>
+            </div>
+            <div style="background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 4px; padding: 6px; margin-bottom: 4px;">
+              <div style="height: 6px; background: var(--brand-300); border-radius: 1px; width: 55%; margin-bottom: 3px;"></div>
+              <div style="height: 4px; background: var(--gray-200); border-radius: 1px; width: 75%;"></div>
+            </div>
+            <div style="position: absolute; bottom: 8px; left: 8px; right: 8px; background: var(--brand-500); height: 22px; border-radius: 4px; display: grid; place-items: center;">
+              <div style="height: 6px; background: rgba(255,255,255,0.9); border-radius: 1px; width: 50%;"></div>
             </div>
           </div>
         </div>
@@ -728,12 +1370,14 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   </div>
 </section>
 
-<!-- REPORTS -->
-<section class="section" style="background:var(--gray-25)">
+<!-- =========================== REPORTS =========================== -->
+<section class="section" id="reports" style="background: var(--gray-25);">
   <div class="container">
     <p class="eyebrow">数据洞察</p>
     <h2 class="section-title">把每一瓶酒的进出，转成可分析的数据</h2>
-    <p class="section-sub">报表自动生成，可按日、按月、按往来单位维度切换。导出 Excel 一键完成。</p>
+    <p class="section-sub">
+      报表自动生成，可按日、按月、按往来单位维度切换。导出 Excel 一键完成。
+    </p>
 
     <div class="reports-grid">
       <div class="report-card">
@@ -748,24 +1392,39 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
             <div class="report-tab">季</div>
           </div>
         </div>
+
         <div class="chart">
           <svg viewBox="0 0 600 200" preserveAspectRatio="none">
+            <!-- grid lines -->
             <line x1="0" y1="50" x2="600" y2="50" stroke="#ECEFF4" stroke-width="1"/>
             <line x1="0" y1="100" x2="600" y2="100" stroke="#ECEFF4" stroke-width="1"/>
             <line x1="0" y1="150" x2="600" y2="150" stroke="#ECEFF4" stroke-width="1"/>
-            <path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40 L 560 190 L 20 190 Z" fill="rgba(37,99,172,0.10)"/>
-            <path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40" fill="none" stroke="#2563AC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70 L 560 190 L 20 190 Z" fill="rgba(139,35,49,0.08)"/>
-            <path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70" fill="none" stroke="#8B2331" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <circle cx="560" cy="40" r="4" fill="#2563AC"/>
-            <circle cx="560" cy="40" r="8" fill="rgba(37,99,172,0.20)"/>
-            <circle cx="560" cy="70" r="4" fill="#8B2331"/>
+
+            <!-- 应付 area -->
+            <path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40 L 560 190 L 20 190 Z"
+              fill="rgba(37, 99, 172, 0.10)" />
+            <!-- 应付 line -->
+            <path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40"
+              fill="none" stroke="#2563AC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+            <!-- 应收 area -->
+            <path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70 L 560 190 L 20 190 Z"
+              fill="rgba(139, 35, 49, 0.08)" />
+            <!-- 应收 line -->
+            <path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70"
+              fill="none" stroke="#8B2331" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+            <!-- data dots -->
+            <circle cx="560" cy="40" r="4" fill="#2563AC" />
+            <circle cx="560" cy="40" r="8" fill="rgba(37,99,172,0.20)" />
+            <circle cx="560" cy="70" r="4" fill="#8B2331" />
           </svg>
-          <div style="display:flex;gap:16px;font-size:11px;color:var(--fg-muted);margin-top:8px">
-            <span style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;background:var(--brand-500);border-radius:50%"></span>应付账款</span>
-            <span style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;background:#8B2331;border-radius:50%"></span>应收账款</span>
+          <div style="display: flex; gap: 16px; font-size: 11px; color: var(--fg-muted); margin-top: 8px;">
+            <span style="display: flex; align-items: center; gap: 4px;"><span style="width: 8px; height: 8px; background: var(--brand-500); border-radius: 50%;"></span>应付账款</span>
+            <span style="display: flex; align-items: center; gap: 4px;"><span style="width: 8px; height: 8px; background: var(--accent-500); border-radius: 50%;"></span>应收账款</span>
           </div>
         </div>
+
         <div class="chart-stats">
           <div>
             <div class="chart-stat-label">本月应付</div>
@@ -801,7 +1460,7 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
           <div class="insight-icon"><i data-lucide="file-spreadsheet" class="icon"></i></div>
           <div>
             <h4>Excel 进出自由</h4>
-            <p>历史数据可批量导入，月度报表可一键导出。与会计系统无缝衔接。</p>
+            <p>历史数据可批量导入，月度报表可一键导出。与会计、税务系统无缝衔接。</p>
           </div>
         </div>
         <div class="insight-item">
@@ -816,12 +1475,14 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   </div>
 </section>
 
-<!-- SECURITY -->
-<section class="section security-section" id="security">
+<!-- =========================== SECURITY =========================== -->
+<section class="section security-section">
   <div class="container">
     <p class="eyebrow">安全与权限</p>
     <h2 class="section-title">企业级权限控制，操作可追溯</h2>
-    <p class="section-sub">四级角色细分权限，每一次单据操作都有经办人记录。数据备份与审批留痕，按合规要求设计。</p>
+    <p class="section-sub">
+      四级角色细分权限，每一次单据操作都有经办人记录。数据备份与审批留痕，按合规要求设计。
+    </p>
 
     <div class="security-grid">
       <div class="security-card">
@@ -850,10 +1511,10 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
       <div class="roles-row head">
         <div>角色</div>
         <div>说明</div>
-        <div style="text-align:center">查看</div>
-        <div style="text-align:center">录入</div>
-        <div style="text-align:center">审批</div>
-        <div style="text-align:center">设置</div>
+        <div style="text-align: center;">查看</div>
+        <div style="text-align: center;">录入</div>
+        <div style="text-align: center;">审批</div>
+        <div style="text-align: center;">设置</div>
       </div>
       <div class="roles-row">
         <div class="role-name">超级管理员</div>
@@ -865,7 +1526,7 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
       </div>
       <div class="roles-row">
         <div class="role-name">管理员</div>
-        <div class="role-desc">门店管理人员，含用户与设置</div>
+        <div class="role-desc">门店管理人员，含用户与门店设置</div>
         <div class="role-check"><i data-lucide="check" class="icon"></i></div>
         <div class="role-check"><i data-lucide="check" class="icon"></i></div>
         <div class="role-check"><i data-lucide="check" class="icon"></i></div>
@@ -891,65 +1552,177 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   </div>
 </section>
 
-<!-- FAQ -->
-<section class="section" id="faq" style="background:var(--gray-25)">
+<!-- =========================== PRICING =========================== -->
+<section class="section" id="pricing">
+  <div class="container">
+    <p class="eyebrow">价格</p>
+    <h2 class="section-title">按门店付费，明码标价</h2>
+    <p class="section-sub">
+      所有方案均含全功能、五端同步、无限单据、技术支持。仅在用户数、门店数、部署方式上区分。
+    </p>
+
+    <div class="pricing-grid">
+      <div class="price-card">
+        <div class="price-tier">入门方案</div>
+        <div class="price-name">试用版</div>
+        <div class="price-amount">
+          <span class="currency">¥</span>
+          <span class="num">0</span>
+          <span class="unit">/ 30 天</span>
+        </div>
+        <div class="price-sub">体验完整功能，无需绑卡</div>
+        <ul class="price-features">
+          <li><i data-lucide="check" class="icon"></i>单门店 · 最多 3 用户</li>
+          <li><i data-lucide="check" class="icon"></i>全部模块开放</li>
+          <li><i data-lucide="check" class="icon"></i>Web 端 + 移动端</li>
+          <li><i data-lucide="check" class="icon"></i>邮件技术支持</li>
+        </ul>
+        <a href="/app/" class="btn btn-secondary">免费开通</a>
+      </div>
+
+      <div class="price-card featured">
+        <div class="price-tier">标准方案</div>
+        <div class="price-name">单店版</div>
+        <div class="price-amount">
+          <span class="currency">¥</span>
+          <span class="num">299</span>
+          <span class="unit">/ 月</span>
+        </div>
+        <div class="price-sub">年付折扣 ¥2,988 / 年（约省 ¥600）</div>
+        <ul class="price-features">
+          <li><i data-lucide="check" class="icon"></i>单门店 · 最多 10 用户</li>
+          <li><i data-lucide="check" class="icon"></i>全部模块 + 五端同步</li>
+          <li><i data-lucide="check" class="icon"></i>无限单据、无限商品</li>
+          <li><i data-lucide="check" class="icon"></i>云端每日备份</li>
+          <li><i data-lucide="check" class="icon"></i>工作日 9-18 点支持</li>
+        </ul>
+        <a href="/app/" class="btn btn-primary">购买</a>
+      </div>
+
+      <div class="price-card custom">
+        <div class="price-tier">企业方案</div>
+        <div class="price-name">连锁版</div>
+        <div class="price-amount">
+          <span class="num">定制</span>
+        </div>
+        <div class="price-sub">多门店连锁，含私有部署</div>
+        <ul class="price-features">
+          <li><i data-lucide="check" class="icon"></i>多门店 · 总部数据汇总</li>
+          <li><i data-lucide="check" class="icon"></i>不限用户数</li>
+          <li><i data-lucide="check" class="icon"></i>支持私有部署 / 内网</li>
+          <li><i data-lucide="check" class="icon"></i>SSO 单点登录</li>
+          <li><i data-lucide="check" class="icon"></i>7×24 专属客户经理</li>
+        </ul>
+        <a href="/app/" class="btn btn-secondary">联系销售</a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- =========================== FAQ =========================== -->
+<section class="section" id="faq" style="background: var(--gray-25);">
   <div class="container">
     <p class="eyebrow">常见问题</p>
-    <h2 class="section-title">使用前常见的问题</h2>
+    <h2 class="section-title">购买前常见的问题</h2>
 
     <div class="faq-list">
       <details class="faq-item" open>
-        <summary class="faq-q">支持哪些操作系统和设备？<i data-lucide="plus" class="icon"></i></summary>
-        <div class="faq-a">系统支持 Windows、macOS 桌面客户端，iOS 与 Android 移动 App，以及主流浏览器的 Web 版本。同一账号可在五端同步使用，数据实时更新。</div>
+        <summary class="faq-q">
+          支持哪些操作系统和设备？
+          <i data-lucide="plus" class="icon"></i>
+        </summary>
+        <div class="faq-a">
+          系统支持 Windows、macOS 桌面客户端，iOS 与 Android 移动 App，以及主流浏览器的 Web 版本。同一账号可在五端同步使用，数据实时更新。
+        </div>
       </details>
+
       <details class="faq-item">
-        <summary class="faq-q">审批通过后发现录入错误，怎么办？<i data-lucide="plus" class="icon"></i></summary>
-        <div class="faq-a">审批通过后操作不可撤销。如发现错误，可由具备权限的用户新建反向调整单据来修正库存与账款。这样可以保留完整的审计链。</div>
+        <summary class="faq-q">
+          没有网络时还能操作吗？
+          <i data-lucide="plus" class="icon"></i>
+        </summary>
+        <div class="faq-a">
+          网络中断时，系统会自动切换到离线模式，展示上次加载的缓存数据。库存查询与单据录入可继续，恢复网络后自动同步至云端。审批与生成账款类操作需要网络。
+        </div>
       </details>
+
       <details class="faq-item">
-        <summary class="faq-q">能否从原有 Excel / 旧系统迁移数据？<i data-lucide="plus" class="icon"></i></summary>
-        <div class="faq-a">可以。「系统设置 → 数据导入」支持往来单位、商品名称 / 系列 / 规格、库存等数据的批量 Excel 导入，按提供的模板填写即可。导入过程中会显示成功条数与失败原因。</div>
+        <summary class="faq-q">
+          能否从原有 Excel / 旧系统迁移数据？
+          <i data-lucide="plus" class="icon"></i>
+        </summary>
+        <div class="faq-a">
+          可以。「系统设置 → 数据导入」支持往来单位、商品名称/系列/规格、库存等数据的批量 Excel 导入，按提供的模板填写即可。导入过程中会显示成功条数与失败原因。
+        </div>
       </details>
+
       <details class="faq-item">
-        <summary class="faq-q">只读账号能做什么？<i data-lucide="plus" class="icon"></i></summary>
-        <div class="faq-a">只读账号可查看全部数据，包括单据、库存、财务、报表，并可导出 Excel。但不能新建、修改、审批、删除任何数据。适合财务、税务、审计岗位的查阅需求。</div>
+        <summary class="faq-q">
+          审批通过后发现错误，怎么办？
+          <i data-lucide="plus" class="icon"></i>
+        </summary>
+        <div class="faq-a">
+          审批通过后操作不可撤销。如发现错误，可由具备权限的用户新建反向调整单据（红冲入库 / 红冲出库）来修正库存与账款。这样可以保留完整的审计链。
+        </div>
       </details>
+
       <details class="faq-item">
-        <summary class="faq-q">防伪溯源功能如何使用？<i data-lucide="plus" class="icon"></i></summary>
-        <div class="faq-a">在商品管理中为每件商品生成唯一防伪码，打印标签贴附于商品。消费者用手机扫描二维码后，跳转至公开页面可查看商品信息、批次、生产日期及出售门店，验证真伪。</div>
+        <summary class="faq-q">
+          数据安全如何保障？
+          <i data-lucide="plus" class="icon"></i>
+        </summary>
+        <div class="faq-a">
+          云端版采用每日自动备份策略，数据传输全程 HTTPS 加密。企业版支持私有部署，数据存放在你自己的服务器，岩美不接触任何业务数据。
+        </div>
       </details>
+
       <details class="faq-item">
-        <summary class="faq-q">支持多仓库管理吗？<i data-lucide="plus" class="icon"></i></summary>
-        <div class="faq-a">支持。在系统设置中可以为门店配置多个仓库，每次入库/出库时选择对应仓库，库存按仓库维度独立统计，也可以在库存列表跨仓库汇总查询。</div>
+        <summary class="faq-q">
+          可以试用多长时间？
+          <i data-lucide="plus" class="icon"></i>
+        </summary>
+        <div class="faq-a">
+          标准版提供 30 天免费试用，无需绑定支付方式。试用期可使用全部功能、五端访问。30 天后可继续按月或按年付费，已录入的数据完整保留。
+        </div>
+      </details>
+
+      <details class="faq-item">
+        <summary class="faq-q">
+          只读账号能做什么？
+          <i data-lucide="plus" class="icon"></i>
+        </summary>
+        <div class="faq-a">
+          只读账号可查看全部数据，包括单据、库存、财务、报表，并可导出 Excel。但不能新建、修改、审批、删除任何数据。适合财务、税务、审计岗位的查阅需求。
+        </div>
       </details>
     </div>
   </div>
 </section>
 
-<!-- CTA BANNER -->
+<!-- =========================== CTA =========================== -->
 <section>
   <div class="container">
     <div class="cta-banner">
       <div>
-        <h2>开始掌控每一瓶酒的<br/>进出与账目。</h2>
-        <p>联系我们即可快速开通您的门店账户，无需繁琐配置。</p>
+        <h2>用一杯咖啡的时间，<br/>看看你的酒库到底有多少瓶。</h2>
+        <p>30 天免费试用，无需绑卡。任何时间可取消，已录入数据保留 90 天。</p>
       </div>
       <div class="cta-banner-actions">
         <a href="/app/" class="btn btn-primary btn-lg">
-          进入管理端
+          立即开通试用
           <i data-lucide="arrow-right" class="icon"></i>
         </a>
-        <a href="/download.html" class="btn btn-secondary btn-lg">
-          <i data-lucide="download" class="icon"></i>
-          下载客户端
+        <a href="/app/" class="btn btn-secondary btn-lg">
+          <i data-lucide="phone" class="icon"></i>
+          预约 1 对 1 演示
         </a>
-        <span class="cta-banner-note">支持 Web / iOS / Android / Windows / macOS</span>
+        <span class="cta-banner-note">销售热线 400-880-8888 · 工作日 9:00-18:00</span>
       </div>
     </div>
   </div>
 </section>
 
-<!-- FOOTER -->
+<!-- =========================== FOOTER =========================== -->
 <footer>
   <div class="container">
     <div class="footer-grid">
@@ -957,68 +1730,130 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
         <img src="assets/logo-full.svg" alt="岩美" />
         <p>为酒行与酒店设计的库存、审核、财务一体化管理平台。</p>
         <div class="footer-contact">
-          <div>jiu.51yanmei.com</div>
+          <div>support@yanmei.app</div>
+          <div>400-880-8888</div>
         </div>
       </div>
       <div class="footer-col">
         <h5>产品</h5>
         <ul>
           <li><a href="#modules">核心模块</a></li>
-          <li><a href="#workflow">业务流程</a></li>
+          <li><a href="#platforms">多端覆盖</a></li>
           <li><a href="#reports">数据洞察</a></li>
-          <li><a href="/download.html">客户端下载</a></li>
+          <li><a href="#pricing">价格方案</a></li>
+          <li><a href="#">版本更新</a></li>
         </ul>
       </div>
       <div class="footer-col">
         <h5>资源</h5>
         <ul>
           <li><a href="/docs.html">使用手册</a></li>
-          <li><a href="/docs.html#stock-in">入库指南</a></li>
-          <li><a href="/docs.html#scan">防伪溯源</a></li>
-          <li><a href="/docs.html#settings">系统设置</a></li>
+          <li><a href="#">API 文档</a></li>
+          <li><a href="#">视频教程</a></li>
+          <li><a href="#">数据导入模板</a></li>
         </ul>
       </div>
       <div class="footer-col">
-        <h5>功能</h5>
+        <h5>客户支持</h5>
         <ul>
-          <li><a href="/features/inventory.html">库存管理</a></li>
-          <li><a href="/features/approval.html">审批流程</a></li>
-          <li><a href="#security">安全权限</a></li>
           <li><a href="#faq">常见问题</a></li>
+          <li><a href="#">提交工单</a></li>
+          <li><a href="#">技术支持</a></li>
+          <li><a href="#">服务等级</a></li>
         </ul>
       </div>
       <div class="footer-col">
-        <h5>系统</h5>
+        <h5>公司</h5>
         <ul>
-          <li><a href="/app/">进入管理端</a></li>
-          <li><a href="/download.html">下载客户端</a></li>
-          <li><a href="/docs.html">使用文档</a></li>
+          <li><a href="#">关于岩美</a></li>
+          <li><a href="#">客户案例</a></li>
+          <li><a href="#">招贤纳士</a></li>
+          <li><a href="#">联系我们</a></li>
         </ul>
       </div>
     </div>
     <div class="footer-bottom">
-      <div>© 2026 岩美酒库管理系统 · 保留所有权利</div>
-      <div>jiu.51yanmei.com</div>
+      <div>© 2026 岩美科技 · 保留所有权利</div>
+      <div>沪 ICP 备 2026000000 号 · 沪公网安备 31010000000000 号</div>
     </div>
   </div>
 </footer>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
-    if (window.lucide) lucide.createIcons();
-  });
+function getAuthUser() {
+  var token = localStorage.getItem('flutter.access_token');
+  var username = localStorage.getItem('flutter.username');
+  var realName = localStorage.getItem('flutter.real_name') || '';
+  var role = localStorage.getItem('flutter.role') || '';
+  var shopNo = localStorage.getItem('flutter.shop_no') || '';
+  if (!token || !username) return null;
+  return { username: username, realName: realName, role: role, shopNo: shopNo };
+}
+function doLogout() {
+  ['access_token','refresh_token','username','real_name','shop_no','shop_id','role']
+    .forEach(function(k) { localStorage.removeItem('flutter.' + k); });
+  location.reload();
+}
+function toggleUserMenu() {
+  var el = document.getElementById('userDropdown');
+  if (el) el.classList.toggle('open');
+}
+document.addEventListener('click', function(e) {
+  var menu = document.getElementById('userDropdown');
+  if (menu) {
+    var navUser = menu.closest('.nav-user');
+    if (navUser && !navUser.contains(e.target)) menu.classList.remove('open');
+  }
+});
+function renderNav() {
+  var cta = document.getElementById('nav-cta');
+  if (!cta) return;
+  var user = getAuthUser();
+  if (user) {
+    var display = user.realName || user.username;
+    var initial = display.charAt(0).toUpperCase();
+    var roleMap = { admin: '管理员', user: '成员', readonly: '只读' };
+    var roleLabel = roleMap[user.role] || user.role;
+    cta.innerHTML = '<div class="nav-user">'
+      + '<button class="nav-user-btn" onclick="toggleUserMenu()">'
+      + '<div class="nav-avatar">' + initial + '</div>'
+      + '<span>' + display + '</span>'
+      + '<i data-lucide="chevron-down" class="icon"></i>'
+      + '</button>'
+      + '<div class="nav-dropdown" id="userDropdown">'
+      + '<div style="padding:10px 14px 6px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px">'
+      + '<div style="font-size:13px;font-weight:600;color:var(--brand-900)">' + display + '</div>'
+      + '<div style="font-size:11px;color:var(--fg-muted);margin-top:2px">' + (user.shopNo ? user.shopNo + ' · ' : '') + roleLabel + '</div>'
+      + '</div>'
+      + '<a href="/app/"><i data-lucide="layout-dashboard" class="icon"></i>进入管理端</a>'
+      + '<div class="nav-dropdown-divider"></div>'
+      + '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>'
+      + '</div></div>';
+  } else {
+    cta.innerHTML = '<a href="/app/" class="btn btn-ghost">登录</a>'
+      + '<a href="/app/" class="btn btn-primary">免费试用</a>';
+  }
+  if (window.lucide) lucide.createIcons();
+}
 
-  document.querySelectorAll('a[href^="#"]').forEach(a => {
-    a.addEventListener('click', e => {
-      const id = a.getAttribute('href');
+document.addEventListener('DOMContentLoaded', function() {
+  renderNav();
+  if (window.lucide) lucide.createIcons();
+
+  // Smooth scroll for in-page anchors
+  document.querySelectorAll('a[href^="#"]').forEach(function(a) {
+    a.addEventListener('click', function(e) {
+      var id = a.getAttribute('href');
       if (id === '#' || id.length < 2) return;
-      const target = document.querySelector(id);
+      var target = document.querySelector(id);
       if (target) {
         e.preventDefault();
         target.scrollIntoView({ behavior: 'smooth', block: 'start' });
       }
     });
   });
+});
 </script>
+
 </body>
 </html>
