.page-products{
  --p-gap:clamp(20px,4vw,52px);
  --p-line-soft:1px solid rgba(63,74,84,.18);
  --p-ink-line:1.5px solid var(--ink);
  background:var(--paper);
  color:var(--rock);
  font-family:var(--font-body);
  overflow-x:hidden;
}

.page-products img{max-width:100%;height:auto;}

/* ---------- 按钮 ---------- */
.page-products .p-btn{
  display:inline-block;
  padding:12px 20px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  border:var(--p-ink-line);
  box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.page-products .p-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(16,36,59,.22);}
.page-products .p-btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.page-products .p-btn--ghost{background:transparent;border-color:rgba(244,239,228,.55);color:var(--paper);box-shadow:none;}
.page-products .p-btn--ghost:hover{box-shadow:4px 4px 0 rgba(244,239,228,.18);}

/* ---------- 首屏 ---------- */
.page-products .p-hero{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(24px,4vw,44px) 0 clamp(30px,4.5vw,60px);
  border-bottom:6px solid var(--gold);
}
.page-products .p-hero .jh-crumb{color:rgba(244,239,228,.6);font-size:13px;}
.page-products .p-hero .jh-crumb a{color:rgba(244,239,228,.86);text-decoration:none;border-bottom:1px solid rgba(197,138,42,.55);}
.page-products .p-hero .jh-crumb a:hover{color:var(--gold);}
.page-products .p-hero .jh-eyebrow{color:rgba(244,239,228,.72);}
.page-products .p-hero__grid{
  display:grid;
  gap:clamp(18px,3vw,36px);
  margin-top:clamp(20px,3.5vw,40px);
}
.page-products .p-hero__lead h1{color:var(--paper);margin:10px 0 0;}
.page-products .p-hero__sub{
  display:block;
  margin-top:.5em;
  font-family:var(--font-body);
  font-size:clamp(.95rem,2.2vw,1.4rem);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.5;
  color:var(--gold);
}
.page-products .p-hero__lede{
  margin:0;
  font-size:clamp(1rem,12px + .6vw,1.08rem);
  line-height:1.8;
  color:rgba(244,239,228,.82);
  max-width:52ch;
}
.page-products .p-hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}

.page-products .p-stats{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:clamp(24px,4vw,44px) 0 0;
  padding:1px;
  background:rgba(244,239,228,.22);
}
.page-products .p-stat{background:var(--ink);padding:14px 14px 16px;}
.page-products .p-stat__num{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(1.45rem,3.4vw,2.4rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--gold);
}
.page-products .p-stat__label{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:rgba(244,239,228,.72);}

/* ---------- 章节骨架 ---------- */
.page-products .p-sec{
  padding:clamp(38px,6vw,76px) 0;
  border-top:1px solid rgba(63,74,84,.14);
}
.page-products .p-sec--tint{background:rgba(216,209,195,.28);}
.page-products .p-sec--ink{background:var(--ink-deep);color:var(--paper);border-top:0;}
.page-products .p-sec--ink .jh-eyebrow{color:rgba(244,239,228,.7);}
.page-products .p-sec--ink .jh-title{color:var(--paper);}
.page-products .p-sec--ink .jh-lede{color:rgba(244,239,228,.76);}
.page-products .p-head{
  display:grid;
  gap:10px;
  max-width:70ch;
  margin-bottom:clamp(20px,3vw,34px);
}
.page-products .p-head .jh-title{margin:0;}
.page-products .p-head .jh-lede{margin:0;}

/* ---------- 图片卡 ---------- */
.page-products .p-fig{
  margin:0;
  border:var(--p-ink-line);
  background:var(--card);
  box-shadow:var(--shadow);
}
.page-products .p-fig img{display:block;width:100%;object-fit:cover;}
.page-products .p-fig figcaption{
  padding:9px 14px;
  border-top:var(--p-ink-line);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--slate);
  background:var(--paper);
}
.page-products .p-fig--wide{margin-bottom:clamp(18px,3vw,30px);}
.page-products .p-fig--mid{max-width:760px;margin-top:clamp(18px,3vw,30px);}
.page-products .p-fig--onink{margin-top:clamp(20px,3.5vw,36px);}
.page-products .p-fig--onink figcaption{background:var(--ink);color:rgba(244,239,228,.66);border-top-color:rgba(244,239,228,.24);}
.page-products .p-fig--tall img{max-height:640px;}

/* ---------- 目录布局 ---------- */
.page-products .p-catalog{display:grid;gap:clamp(16px,3vw,30px);}
.page-products .p-rail{
  border:var(--p-ink-line);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  padding:12px 12px 14px;
}
.page-products .p-rail__title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--slate);
}
.page-products .p-rail__list{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;}
.page-products .p-rail__list li{flex:0 0 auto;}
.page-products .p-rail__list a{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding:8px 10px;
  font-size:13.5px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  background:rgba(216,209,195,.3);
}
.page-products .p-rail__list a span{font-family:var(--font-mono);font-size:11px;color:var(--gold-deep);}
.page-products .p-rail__list a i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--slate);display:none;}
.page-products .p-rail__list a:hover,
.page-products .p-rail__list a:focus-visible{background:var(--paper);border-bottom-color:var(--gold);outline:none;}

/* ---------- 类别卡 ---------- */
.page-products .p-cat{
  border:var(--p-ink-line);
  background:var(--card);
  box-shadow:var(--shadow);
  margin-bottom:clamp(14px,2.4vw,24px);
  scroll-margin-top:calc(var(--bar-h) + 22px);
}
.page-products .p-cat:last-child{margin-bottom:0;}
.page-products .p-cat__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 12px;
  padding:16px 16px 14px;
  border-bottom:var(--p-ink-line);
  background:linear-gradient(90deg,rgba(197,138,42,.14),rgba(197,138,42,.02));
}
.page-products .p-cat__num{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  line-height:1;
  padding:7px 8px;
  background:var(--ink);
  color:var(--paper);
}
.page-products .p-cat__title{margin:0;font-family:var(--font-display);font-size:1.15rem;color:var(--ink);letter-spacing:.01em;}
.page-products .p-cat__desc{flex:1 1 100%;margin:0;font-size:13.5px;line-height:1.7;color:var(--slate);}

.page-products .p-items{list-style:none;margin:0;padding:6px 16px 14px;}
.page-products .p-item{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:2px 10px;
  padding:11px 0;
  border-bottom:1px dashed rgba(63,74,84,.24);
}
.page-products .p-item:last-child{border-bottom:0;}
.page-products .p-item__no{
  grid-row:1 / span 2;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--gold-deep);
}
.page-products .p-item__name{grid-column:2;font-weight:700;font-size:15px;line-height:1.5;color:var(--ink);}
.page-products .p-item__desc{grid-column:2;font-size:13.8px;line-height:1.7;color:var(--rock);}

/* ---------- 角色表 ---------- */
.page-products .p-table-wrap{
  border:var(--p-ink-line);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  overflow-x:auto;
}
.page-products .p-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:14px;
}
.page-products .p-table caption{
  padding:12px 14px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--slate);
  border-bottom:var(--p-line-soft);
}
.page-products .p-table th[scope="col"]{
  background:var(--ink);
  color:var(--paper);
  text-align:left;
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:.06em;
  padding:11px 14px;
  border-right:1px solid rgba(244,239,228,.16);
}
.page-products .p-table td{padding:12px 14px;border-top:var(--p-line-soft);vertical-align:top;line-height:1.7;}
.page-products .p-table tbody tr:nth-child(even){background:rgba(216,209,195,.3);}
.page-products .p-table th[scope="row"]{
  padding:12px 14px;
  border-top:var(--p-line-soft);
  text-align:left;
  vertical-align:top;
  width:150px;
}
.page-products .p-role{display:block;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:15px;}
.page-products .p-role__num{display:block;font-family:var(--font-mono);font-size:11px;color:var(--gold-deep);margin-bottom:3px;}
.page-products .p-code{
  display:inline-block;
  margin:0 4px 4px 0;
  padding:1px 6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--rock);
  background:var(--paper);
  border:1px solid rgba(63,74,84,.28);
}

/* ---------- 双入口 ---------- */
.page-products .p-split{
  display:grid;
  border:var(--p-ink-line);
  background:var(--card);
  box-shadow:var(--shadow);
}
.page-products .p-split__col{padding:clamp(18px,3vw,28px);}
.page-products .p-split__col + .p-split__col{border-top:var(--p-ink-line);}
.page-products .p-split__col--current{background:rgba(143,63,51,.09);}
.page-products .p-split__col--classic{background:rgba(79,111,120,.12);}
.page-products .p-split__title{margin:12px 0 8px;font-family:var(--font-display);font-size:1.1rem;color:var(--ink);}
.page-products .p-split__col p{margin:0 0 12px;font-size:14px;line-height:1.78;color:var(--rock);}
.page-products .p-link{
  display:inline-block;
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  color:var(--gold-deep);
  text-decoration:none;
  border-bottom:2px solid var(--gold);
  padding-bottom:2px;
}
.page-products .p-link:hover{color:var(--ink);border-bottom-color:var(--ink);}
.page-products .p-ticks{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.page-products .p-ticks li{
  position:relative;
  padding-left:20px;
  font-size:13.8px;
  line-height:1.7;
  color:var(--rock);
}
.page-products .p-ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:9px;
  background:var(--gold);
}
.page-products .p-ticks--lg li{font-size:15px;padding-left:24px;}
.page-products .p-ticks--lg li::before{width:12px;height:12px;}
.page-products .p-note{
  margin:clamp(16px,2.6vw,24px) 0 0;
  padding-left:14px;
  border-left:4px solid var(--gold);
  font-size:14px;
  line-height:1.78;
  color:var(--rock);
}
.page-products .p-note a{color:var(--gold-deep);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold);}
.page-products .p-note a:hover{color:var(--ink);}

/* ---------- 五步流程 ---------- */
.page-products .p-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.page-products .p-step{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:4px 14px;
  padding:16px 0;
  border-bottom:1px solid rgba(244,239,228,.18);
}
.page-products .p-step:last-child{border-bottom:0;}
.page-products .p-step__num{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  background:var(--gold);
}
.page-products .p-step__title{margin:0;font-family:var(--font-display);font-size:1.02rem;color:var(--paper);align-self:center;}
.page-products .p-step p{grid-column:2;margin:0;font-size:13.8px;line-height:1.75;color:rgba(244,239,228,.74);}

/* ---------- 承接能力 ---------- */
.page-products .p-capacity{display:grid;gap:clamp(18px,3vw,34px);}
.page-products .p-metrics{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:0;
  padding:1px;
  background:rgba(63,74,84,.24);
  border:var(--p-ink-line);
}
.page-products .p-metric{background:var(--card);padding:14px 13px 15px;}
.page-products .p-metric strong{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(1.25rem,3vw,1.85rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.page-products .p-metric span{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--slate);}
.page-products .p-capacity__text{margin-top:clamp(14px,2.4vw,22px);}
.page-products .p-capacity__text p{margin:0 0 12px;font-size:14.5px;line-height:1.82;color:var(--rock);}
.page-products .p-capacity__text p:last-child{margin-bottom:0;}

/* ---------- 设备一致 ---------- */
.page-products .p-devices{display:grid;gap:clamp(20px,3.5vw,44px);align-items:start;}
.page-products .p-devices__body .jh-title{margin:8px 0 14px;}
.page-products .p-devices__body p{font-size:15px;line-height:1.82;color:var(--rock);margin:0 0 16px;}
.page-products .p-devices__body .p-btn{margin-top:8px;}

/* ---------- 联系条 ---------- */
.page-products .p-cta{background:var(--ink);color:var(--paper);border-top:6px solid var(--gold);}
.page-products .p-cta__inner{
  display:grid;
  gap:20px;
  padding:clamp(30px,5vw,58px) 0;
}
.page-products .p-cta__title{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.8rem);color:var(--paper);letter-spacing:.01em;}
.page-products .p-cta__text{margin:0;max-width:60ch;font-size:14.5px;line-height:1.8;color:rgba(244,239,228,.78);}
.page-products .p-cta__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}

/* ---------- 断点 ---------- */
@media (min-width:760px){
  .page-products .p-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .p-metrics{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .p-hero__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);align-items:end;}
  .page-products .p-split{grid-template-columns:1fr 1fr;}
  .page-products .p-split__col + .p-split__col{border-top:0;border-left:var(--p-ink-line);}
}

@media (min-width:900px){
  .page-products .p-catalog{grid-template-columns:216px minmax(0,1fr);align-items:start;}
  .page-products .p-rail{position:sticky;top:calc(var(--bar-h) + 18px);}
  .page-products .p-rail__list{display:grid;gap:2px;overflow:visible;}
  .page-products .p-rail__list a{
    border-bottom:0;
    border-left:3px solid transparent;
    background:transparent;
    padding:9px 8px;
  }
  .page-products .p-rail__list a i{display:inline;margin-left:auto;}
  .page-products .p-rail__list a:hover,
  .page-products .p-rail__list a:focus-visible{background:var(--paper);border-left-color:var(--gold);}
  .page-products .p-cat__head{padding:17px 20px 15px;}
  .page-products .p-items{padding:8px 20px 16px;}
  .page-products .p-item{grid-template-columns:60px minmax(0,1fr);}
  .page-products .p-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
  .page-products .p-step{
    grid-template-columns:1fr;
    gap:8px;
    padding:16px 0 0;
    border-bottom:0;
    border-top:4px solid var(--gold);
  }
  .page-products .p-step__num{grid-row:auto;width:32px;height:32px;font-size:12px;}
  .page-products .p-step p{grid-column:1;}
  .page-products .p-capacity{grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:start;}
  .page-products .p-devices{grid-template-columns:minmax(0,.75fr) minmax(0,1fr);align-items:center;}
  .page-products .p-cta__inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;}
  .page-products .p-cta__acts{flex-direction:column;align-items:stretch;}
  .page-products .p-cta__acts .p-btn{text-align:center;}
}

@media (max-width:479px){
  .page-products .p-item{grid-template-columns:1fr;gap:3px;}
  .page-products .p-item__no{grid-row:auto;}
  .page-products .p-item__name,
  .page-products .p-item__desc{grid-column:1;}
  .page-products .p-hero__acts .p-btn{width:100%;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .p-btn{transition:none;}
  .page-products .p-btn:hover{transform:none;}
}
<<<END>>>