.page-products{
  --prod-gap: clamp(16px,2.4vw,28px);
  --prod-cool-soft: rgba(233,241,250,.72);
  --prod-ink-soft: rgba(22,17,11,.72);
  --prod-ink-line: rgba(22,17,11,.18);
}

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

.page-products .figure img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.page-products .grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--prod-gap);
}

.page-products .c-3{grid-column:span 3;}
.page-products .c-4{grid-column:span 4;}
.page-products .c-5{grid-column:span 5;}
.page-products .c-6{grid-column:span 6;}
.page-products .c-7{grid-column:span 7;}
.page-products .c-8{grid-column:span 8;}
.page-products .c-9{grid-column:span 9;}
.page-products .c-12{grid-column:span 12;}

.page-products .prod-h2{
  font-family:var(--f-display);
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--near);
  margin:0 0 clamp(16px,2vw,24px);
}

.page-products .prod-h3{
  font-family:var(--f-display);
  font-size:clamp(19px,2.2vw,24px);
  line-height:1.25;
  color:var(--near);
  margin:0 0 12px;
}

/* ---------- 首屏 ---------- */
.page-products .prod-hero{
  padding-top:clamp(18px,3vw,34px);
  padding-bottom:clamp(30px,5vw,64px);
}

.page-products .prod-hero__lead h1{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(42px,8.4vw,96px);
  line-height:.96;
  letter-spacing:.02em;
  color:var(--near);
  margin:.18em 0 .22em;
}

.page-products .prod-hero__dek{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.8;
  color:var(--near);
  max-width:46ch;
  margin:0 0 16px;
}

.page-products .prod-hero__note{
  font-size:15px;
  line-height:1.75;
  color:var(--cool);
  border-left:2px solid var(--cyan);
  padding-left:14px;
  margin:0;
  max-width:46ch;
}

.page-products .prod-hero__acts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(20px,3vw,30px);
}

.page-products .prod-hero__aside{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.page-products .prod-entry{
  padding:20px 20px 22px;
}

.page-products .prod-entry__t{
  font-family:var(--f-display);
  font-size:clamp(20px,2.4vw,26px);
  color:var(--near);
  margin:8px 0 8px;
  letter-spacing:.02em;
}

.page-products .prod-entry__d{
  font-size:14.5px;
  line-height:1.75;
  color:var(--prod-cool-soft);
  margin:0;
}

/* ---------- 索引条 ---------- */
.page-products .prod-lib{
  padding:clamp(20px,4vw,40px) 0 clamp(40px,7vw,86px);
}

.page-products .prod-lib__banner{
  margin:0 0 clamp(24px,4vw,40px);
}

.page-products .prod-bar{
  display:flex;
  align-items:center;
  margin:0 0 clamp(20px,3vw,32px);
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(100deg,rgba(0,231,193,.07),rgba(255,106,43,.06) 62%,rgba(12,21,36,0));
}

.page-products .prod-bar .filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}

.page-products .prod-bar .filters__label{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cool);
  margin-right:4px;
}

.page-products .prod-bar .filter{
  font-family:var(--f-body);
  font-size:13.5px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(6,11,20,.55);
  color:var(--prod-cool-soft);
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}

.page-products .prod-bar .filter.is-on{
  border-color:var(--cyan);
  color:var(--cyan);
  background:rgba(0,231,193,.1);
}

.page-products .prod-bar .filters__count{
  margin-left:auto;
  font-size:13px;
  color:var(--cyan);
  letter-spacing:.06em;
}

/* ---------- 四步流程 ---------- */
.page-products .prod-flow h3{
  margin-top:0;
}

.page-products .prod-steps{
  list-style:none;
  margin:6px 0 0;
  padding:0;
}

.page-products .prod-steps li{
  position:relative;
  padding:0 0 26px 52px;
}

.page-products .prod-steps li::before{
  content:"";
  position:absolute;
  left:17px;
  top:30px;
  bottom:0;
  width:1px;
  background:var(--line);
}

.page-products .prod-steps li:last-child{
  padding-bottom:0;
}

.page-products .prod-steps li:last-child::before{
  display:none;
}

.page-products .prod-steps__num{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--cyan);
  border-radius:var(--r);
  color:var(--cyan);
  font-size:12px;
  letter-spacing:.08em;
  background:rgba(0,231,193,.08);
}

.page-products .prod-steps h4{
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  color:var(--near);
  margin:2px 0 6px;
}

.page-products .prod-steps p{
  margin:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--prod-cool-soft);
}

/* ---------- 卡片错位网格 ---------- */
.page-products .prod-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
}

.page-products .prod-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 20px 20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
}

.page-products .prod-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:46px;
  height:2px;
  background:var(--cyan);
}

.page-products .prod-card[data-tag="file"]::before{
  background:var(--orange);
}

.page-products .prod-cards > .prod-card:nth-child(2n){
  margin-top:30px;
}

.page-products .prod-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.page-products .prod-card__id{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cool);
}

.page-products .prod-card h4{
  font-family:var(--f-display);
  font-size:20px;
  line-height:1.25;
  letter-spacing:.02em;
  color:var(--near);
  margin:2px 0 0;
}

.page-products .prod-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--prod-cool-soft);
}

.page-products .prod-card__who{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--cyan);
}

.page-products .prod-card[data-tag="file"] .prod-card__who{
  color:var(--orange);
}

.page-products .prod-lib__foot{
  margin:clamp(20px,3vw,30px) 0 0;
  font-size:13.5px;
  line-height:1.8;
  color:var(--cool);
}

.page-products .prod-lib__foot a{
  color:var(--near);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 筛选维度与导出 ---------- */
.page-products .prod-narrow{
  padding:clamp(34px,6vw,80px) 0;
  border-top:1px solid var(--line);
}

.page-products .prod-narrow__text p{
  font-size:16px;
  line-height:1.8;
  color:var(--prod-cool-soft);
  max-width:64ch;
  margin:0 0 18px;
}

.page-products .prod-dims{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:14px;
}

.page-products .prod-dims li{
  border-left:2px solid var(--cyan);
  padding:2px 0 2px 16px;
}

.page-products .prod-dims strong{
  display:block;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--cyan);
  margin-bottom:4px;
}

.page-products .prod-dims span{
  font-size:14.5px;
  line-height:1.75;
  color:var(--prod-cool-soft);
}

.page-products .prod-narrow__figure{
  align-self:start;
}

/* ---------- 资料下载 ---------- */
.page-products .prod-dl{
  padding:clamp(34px,6vw,80px) 0;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,21,36,.6),rgba(6,11,20,0));
}

.page-products .prod-dl__text p{
  font-size:16px;
  line-height:1.8;
  color:var(--prod-cool-soft);
  margin:0 0 18px;
  max-width:60ch;
}

.page-products .prod-files{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:0 0 18px;
}

.page-products .prod-dl__note{
  font-size:14px;
  line-height:1.75;
  color:var(--cool);
  border-top:1px solid var(--line);
  padding-top:14px;
  margin:0;
}

.page-products .prod-qa{
  margin-top:clamp(26px,4vw,46px);
}

.page-products .prod-qa .qa__item{
  border-top:1px solid var(--line);
}

.page-products .prod-qa .qa__item:last-child{
  border-bottom:1px solid var(--line);
}

.page-products .prod-qa .qa__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 4px;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  font-family:var(--f-body);
  font-size:16px;
  font-weight:600;
  color:var(--near);
}

.page-products .prod-qa .qa__sign{
  flex:none;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--cyan);
  font-family:var(--f-mono);
  transition:transform .2s var(--ease);
}

.page-products .prod-qa .qa__btn[aria-expanded="true"] .qa__sign{
  transform:rotate(45deg);
}

.page-products .prod-qa .qa__body{
  padding:0 4px 20px;
}

.page-products .prod-qa .qa__body p{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--prod-cool-soft);
  max-width:70ch;
}

/* ---------- 奶油白反色区 ---------- */
.page-products .prod-cream{
  background:var(--cream);
  color:var(--ink);
  padding:clamp(34px,6vw,84px) 0;
}

.page-products .prod-cream .eyebrow{
  color:#0B6E5F;
}

.page-products .prod-cream .prod-h2{
  color:var(--ink);
}

.page-products .prod-cream__text p{
  font-size:16px;
  line-height:1.8;
  color:var(--prod-ink-soft);
  max-width:60ch;
  margin:0;
}

.page-products .prod-cream .figure{
  border-color:var(--prod-ink-line);
  background:rgba(22,17,11,.06);
}

.page-products .prod-cream .figure__cap{
  color:var(--prod-ink-soft);
}

.page-products .prod-adapt{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(26px,4vw,44px);
}

.page-products .prod-adapt > div{
  border-top:2px solid var(--prod-ink-line);
  padding-top:14px;
}

.page-products .prod-adapt h3{
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 10px;
}

.page-products .prod-adapt p{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--prod-ink-soft);
}

/* ---------- 结尾入口 ---------- */
.page-products .prod-next{
  padding:clamp(40px,7vw,92px) 0 clamp(30px,5vw,60px);
}

.page-products .prod-next__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:26px 24px 28px;
}

.page-products .prod-next__card h3{
  font-family:var(--f-display);
  font-size:clamp(19px,2.2vw,24px);
  line-height:1.3;
  letter-spacing:.02em;
  color:var(--near);
  margin:0;
}

.page-products .prod-next__card p{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--prod-cool-soft);
}

.page-products .prod-next__card .btn{
  margin-top:auto;
}

.page-products .prod-next__foot{
  margin:clamp(20px,3vw,30px) 0 0;
  font-size:13.5px;
  color:var(--cool);
}

.page-products .prod-next__foot a{
  color:var(--near);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  .page-products .grid-12{
    grid-template-columns:1fr;
  }

  .page-products .c-3,
  .page-products .c-4,
  .page-products .c-5,
  .page-products .c-6,
  .page-products .c-7,
  .page-products .c-8,
  .page-products .c-9,
  .page-products .c-12{
    grid-column:1 / -1;
  }

  .page-products .prod-hero__lead h1{
    font-size:clamp(38px,11vw,60px);
  }

  .page-products .prod-adapt{
    grid-template-columns:1fr;
  }

  .page-products .prod-cards{
    grid-template-columns:1fr;
  }

  .page-products .prod-cards > .prod-card:nth-child(2n){
    margin-top:0;
  }

  .page-products .prod-bar .filters__count{
    margin-left:0;
    width:100%;
  }
}

@media (max-width:560px){
  .page-products .prod-steps li{
    padding-left:46px;
  }

  .page-products .prod-card{
    padding:20px 16px 18px;
  }

  .page-products .prod-next__card{
    padding:22px 18px 24px;
  }
}
<<<END>>>