Add precision gear navigation entry

app/globals.css

@@ -387,6 +387,26 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
   font-size: 10px;
   font-weight: 700;
 }
+.precision-gear-panel {
+  display: grid;
+  grid-template-columns: minmax(260px, .8fr) 1.2fr;
+  gap: 28px;
+  align-items: center;
+  margin-top: 42px;
+  padding: 28px;
+  border: 1px solid #d8e3f5;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #f5f9ff, #eef5ff 62%, #f8fbff);
+}
+.precision-gear-copy h3 { margin: 9px 0 9px; color: var(--ink); font-size: 25px; letter-spacing: -.03em; }
+.precision-gear-copy > p:not(.eyebrow) { max-width: 410px; margin: 0; color: #6d7c92; font-size: 12px; line-height: 1.75; }
+.precision-gear-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.precision-gear-stat { display: flex; align-items: baseline; gap: 7px; padding: 16px 17px; border: 1px solid rgba(176, 201, 239, .72); border-radius: 12px; background: rgba(255,255,255,.78); }
+.precision-gear-stat strong { color: var(--blue); font-size: 25px; letter-spacing: -.04em; }
+.precision-gear-stat span { color: #73829a; font-size: 11px; }
+.precision-gear-subcats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; padding-top: 13px; border-top: 1px solid rgba(176, 201, 239, .58); }
+.precision-gear-subcats span { padding: 6px 9px; border: 1px solid #d6e2f5; border-radius: 999px; color: #60718b; background: rgba(255,255,255,.72); font-size: 10px; }
+.precision-gear-subcats b { margin-left: 3px; color: var(--blue); font-weight: 800; }
 .catalog-empty { padding: 60px 20px; text-align: center; border: 1px dashed #cbd5e3; border-radius: 15px; background: white; }
 .catalog-empty p { color: #8792a4; font-size: 12px; }
 .catalog-empty button { border: 0; color: var(--blue); background: transparent; cursor: pointer; font-weight: 700; }
@@ -474,6 +494,7 @@ footer > span { color: #9aa4b2; font-size: 10px; }
   .how-section { gap: 45px; }
   .catalog-summary { grid-template-columns: repeat(4, 1fr); }
   .catalog-grid { grid-template-columns: repeat(2, 1fr); }
+  .precision-gear-panel { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 720px) {
@@ -499,6 +520,7 @@ footer > span { color: #9aa4b2; font-size: 10px; }
   .catalog-toolbar { top: 64px; }
   .catalog-scale-filter { grid-template-columns: 1fr; align-items: stretch; }
   .catalog-grid { grid-template-columns: 1fr; gap: 15px; }
+  .precision-gear-panel { gap: 20px; margin-top: 30px; padding: 22px 18px; }
   .catalog-card-body { padding: 15px; }
   .catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; }
   .catalog-card-body dl { min-height: 90px; }

app/page.tsx

@@ -50,6 +50,20 @@ const PRIMARY_CATALOG_CATEGORIES = [
 
 const CATALOG_FILTER_CATEGORIES = ["全部产品", ...PRIMARY_CATALOG_CATEGORIES, "静音舵机"];
 
+const PRECISION_GEAR_SUBCATEGORIES = [
+  ["轴", 15],
+  ["单伞齿", 23],
+  ["单直齿", 160],
+  ["单皇冠齿", 9],
+  ["双联直齿", 186],
+  ["其他双联齿", 18],
+  ["双联皇冠齿", 16],
+  ["蜗杆", 32],
+  ["异形零件", 18],
+  ["离合齿", 29],
+  ["差速器组件", 5],
+] as const;
+
 const FEATURED_SPEC_ORDER = [
   "堵转扭矩",
   "额定电压",
@@ -404,6 +418,7 @@ export default function Home() {
         <nav aria-label="主导航">
           <a href="#selector">AI选型</a>
           <a href="#products">完整目录</a>
+          <a href="#precision-gears">精密齿轮</a>
           <a href="#how">服务流程</a>
         </nav>
         <button className="header-cta" type="button" onClick={startSelection}>
@@ -1024,6 +1039,23 @@ export default function Home() {
             </button>
           </div>
         )}
+
+        <aside className="precision-gear-panel" id="precision-gears" aria-labelledby="precision-gears-title">
+          <div className="precision-gear-copy">
+            <p className="eyebrow"><span /> 精密齿轮</p>
+            <h3 id="precision-gears-title">精密齿轮配件</h3>
+            <p>独立目录收录 511 款产品，覆盖 11 个子类，为微型传动、机构配套与定制开发提供齿轮件支持。</p>
+          </div>
+          <div className="precision-gear-overview">
+            <div className="precision-gear-stat"><strong>511</strong><span>款产品</span></div>
+            <div className="precision-gear-stat"><strong>11</strong><span>个子类</span></div>
+            <div className="precision-gear-subcats" aria-label="精密齿轮配件子类">
+              {PRECISION_GEAR_SUBCATEGORIES.map(([name, count]) => (
+                <span key={name}>{name} <b>{count}</b></span>
+              ))}
+            </div>
+          </div>
+        </aside>
       </section>
 
       {selectedCatalogProduct && (