.page-products{
  --teal:#7FB6A8;
  --violet:#B9A6EA;
  --card-cut:20px;
  --filter-w:250px;
}

.page-products .section{
  padding-block:44px;
}

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

/* 首屏 */
.page-products .hero-frame{
  position:relative;
  padding:30px 20px 26px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(198,242,74,.12), transparent 58%),
    linear-gradient(158deg, rgba(15,43,36,.94), rgba(11,15,14,.72));
  overflow:hidden;
}
.page-products .hero-frame::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:9px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 20px);
  opacity:.75;
}
.page-products .hero-frame::after{
  content:"";
  position:absolute;
  right:0;bottom:0;
  width:112px;height:112px;
  background:linear-gradient(135deg,transparent 50%,rgba(255,122,47,.16) 50%);
  pointer-events:none;
}
.page-products .hero-frame .display{
  margin:10px 0 14px;
  max-width:16em;
}
.page-products .hero-frame .lede{
  max-width:38em;
}

.page-products .hero-jumps{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 0;
  padding:0;
}
.page-products .jump{
  display:inline-block;
  padding:9px 16px;
  border:1px solid var(--line-lime);
  border-radius:var(--radius-pill);
  color:var(--lime);
  font-size:13px;
  letter-spacing:.06em;
  text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.page-products .jump:hover,
.page-products .jump:focus-visible{
  background:var(--lime);
  color:var(--ink);
}

.page-products .stat-row{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:18px 0 0;
  padding:0;
  background:var(--line);
  border:1px solid var(--line);
}
.page-products .stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 14px;
  background:var(--ink-2);
}
.page-products .stat .metric-value{
  font-size:34px;
  line-height:1;
  color:var(--paper);
}
.page-products .stat .unit{
  font-size:14px;
  margin-left:2px;
  color:var(--lime);
}
.page-products .stat .metric-label{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--mute);
}

/* 双栏内容区 */
.page-products .split{
  display:grid;
  gap:26px;
}
.page-products .split-main .section-title{
  margin:8px 0 14px;
}
.page-products .split-side{
  margin:0;
}
.page-products .split-side .media{
  border:1px solid var(--line-strong);
  overflow:hidden;
}
.page-products .split-side .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-products .media-caption{
  margin-top:9px;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--mute);
}

/* 文档三类 */
.page-products .doc-types{
  display:grid;
  gap:12px;
  margin:22px 0 20px;
}
.page-products .doc-type{
  position:relative;
  padding:16px 16px 18px;
  border:1px solid var(--line);
  border-left:3px solid var(--lime);
  background:linear-gradient(150deg,rgba(23,57,47,.8),rgba(11,15,14,.55));
}
.page-products .doc-type[data-kind="sheet"]{border-left-color:var(--orange);}
.page-products .doc-type[data-kind="visual"]{border-left-color:var(--teal);}
.page-products .doc-type h3{
  margin:10px 0 6px;
  font-size:18px;
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-products .doc-type p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--mute);
}

/* 集锦 */
.page-products .clips-wall{
  position:relative;
  margin:22px 0 26px;
  border:1px solid var(--line-strong);
  overflow:hidden;
}
.page-products .clips-wall::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:40%;
  background:linear-gradient(180deg,transparent,rgba(11,15,14,.85));
  pointer-events:none;
}
.page-products .clips-wall img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.page-products .axis-list{
  list-style:none;
  display:grid;
  gap:16px;
  margin:0;
  padding:0;
}
.page-products .axis{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.page-products .axis-num{
  display:block;
  font-size:15px;
  color:var(--orange);
  letter-spacing:.1em;
}
.page-products .axis h3{
  margin:6px 0 6px;
  font-size:19px;
  color:var(--paper);
}
.page-products .axis p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--mute);
}

/* 移动端 */
.page-products .device-list{
  list-style:none;
  margin:18px 0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-products .device-list li{
  display:grid;
  gap:4px;
  padding:12px 0 12px 14px;
  border-left:2px solid var(--line-lime);
  font-size:15px;
  line-height:1.6;
  color:var(--mute);
}
.page-products .device-list strong{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.12em;
  color:var(--lime);
  text-transform:uppercase;
}
.page-products .phone-shot{
  display:flex;
  justify-content:center;
}
.page-products .phone-screen{
  width:min(100%,290px);
  border:8px solid var(--ink-3);
  border-radius:30px;
  padding:8px;
  background:var(--ink);
  box-shadow:0 0 0 1px var(--line-strong);
  overflow:hidden;
}
.page-products .phone-screen img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:20px;
}

/* 资源目录：筛选 + 双列卡 */
.page-products .lib{
  display:grid;
  gap:24px;
}
.page-products .filter-sticky{
  padding:16px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(23,57,47,.72),rgba(11,15,14,.5));
}
.page-products .filter-sticky .chips{
  margin:12px 0 14px;
}
.page-products .filter-note{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.6;
  color:var(--mute);
}
.page-products .filter-links{
  list-style:none;
  margin:0;
  padding:12px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  gap:8px;
}
.page-products .filter-links a{
  font-size:13px;
  letter-spacing:.05em;
  color:var(--lime);
  text-decoration:none;
  border-bottom:1px solid var(--line-lime);
  padding-bottom:2px;
}
.page-products .filter-links a:hover,
.page-products .filter-links a:focus-visible{
  color:var(--paper);
}

.page-products .res-col .section-title{
  margin:0 0 12px;
}
.page-products .res-grid{
  display:grid;
  gap:14px;
  margin:20px 0 18px;
}
.page-products .res-card{
  --fmt:var(--lime);
  position:relative;
  border:1px solid var(--line);
  border-left:3px solid var(--fmt);
  background:linear-gradient(155deg,rgba(23,57,47,.85),rgba(11,15,14,.8));
  overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.page-products .res-card::after{
  content:"";
  position:absolute;
  top:-1px;right:-1px;
  width:var(--card-cut);
  height:var(--card-cut);
  background:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.page-products .res-card::before{
  content:"";
  position:absolute;
  top:9px;right:-7px;
  width:28px;
  height:1px;
  background:var(--line-strong);
  transform:rotate(-45deg);
}
.page-products .res-card[data-format="sheet"]{--fmt:var(--orange);}
.page-products .res-card[data-format="visual"]{--fmt:var(--teal);}
.page-products .res-card[data-format="clip"]{--fmt:var(--violet);}
.page-products .res-card:hover{
  transform:translate(2px,-2px);
  border-color:var(--line-lime);
}
.page-products .res-card[open]{
  border-color:var(--line-lime);
}
.page-products .res-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 10px;
  padding:14px 30px 14px 14px;
  cursor:pointer;
  list-style:none;
}
.page-products .res-head::-webkit-details-marker{display:none;}
.page-products .res-head::marker{content:"";}
.page-products .res-tag{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fmt);
}
.page-products .res-name{
  flex:1 1 100%;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-products .res-meta{
  font-size:13px;
  color:var(--mute);
}
.page-products .res-body{
  padding:0 14px 16px;
  border-top:1px solid var(--line);
}
.page-products .res-body dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 14px;
  margin:14px 0 0;
  font-size:14px;
}
.page-products .res-body dt{
  font-size:11px;
  letter-spacing:.12em;
  color:var(--mute);
  padding-top:2px;
}
.page-products .res-body dd{
  margin:0;
  color:var(--paper);
  line-height:1.55;
}

/* 流程 */
.page-products .steps{
  list-style:none;
  counter-reset:none;
  display:grid;
  gap:18px;
  margin:26px 0 0;
  padding:0;
}
.page-products .step{
  position:relative;
  padding-top:20px;
}
.page-products .step::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:var(--line-strong);
}
.page-products .step::after{
  content:"";
  position:absolute;
  top:-3px;left:0;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--lime);
}
.page-products .step-num{
  display:block;
  font-size:26px;
  line-height:1;
  color:var(--lime);
}
.page-products .step h3{
  margin:8px 0 6px;
  font-size:18px;
  color:var(--paper);
}
.page-products .step p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--mute);
}
.page-products .flow-figure{
  margin:26px 0 18px;
  border:1px solid var(--line-strong);
  overflow:hidden;
}
.page-products .flow-figure img{
  width:100%;
  aspect-ratio:2/1;
  object-fit:cover;
}

/* 资源包 */
.page-products .pkg-figure{
  margin:22px 0 24px;
  border:1px solid var(--line-strong);
  overflow:hidden;
}
.page-products .pkg-figure img{
  width:100%;
  aspect-ratio:5/3;
  object-fit:cover;
}
.page-products .pkg-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.page-products .pkg{
  display:grid;
  gap:6px;
  padding:16px;
  background:var(--ink-2);
}
.page-products .pkg-title{
  font-size:17px;
  font-weight:700;
  color:var(--paper);
}
.page-products .pkg-formats{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--lime);
}
.page-products .pkg-cycle{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--orange);
}
.page-products .pkg-desc{
  margin:2px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--mute);
}

/* 延伸入口 */
.page-products .next-links{
  display:grid;
  gap:12px;
  margin-top:28px;
}
.page-products .next-link{
  display:grid;
  gap:6px;
  padding:16px 18px;
  border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(15,43,36,.7),rgba(11,15,14,.4));
  text-decoration:none;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.page-products .next-link:hover,
.page-products .next-link:focus-visible{
  border-color:var(--line-lime);
  transform:translate(2px,-2px);
}
.page-products .next-kicker{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.page-products .next-title{
  font-size:16px;
  font-weight:700;
  color:var(--paper);
  line-height:1.35;
}

@media (min-width:640px){
  .page-products .stat-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-products .res-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .pkg{
    grid-template-columns:1fr auto auto;
    align-items:baseline;
    column-gap:16px;
  }
  .page-products .pkg-desc{
    grid-column:1 / -1;
  }
  .page-products .next-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-products .section{
    padding-block:60px;
  }
  .page-products .hero-frame{
    padding:44px 44px 38px;
  }
  .page-products .split{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:44px;
    align-items:start;
  }
  .page-products .split--reverse .split-main{
    order:2;
  }
  .page-products .split--reverse .split-side{
    order:1;
  }
  .page-products .doc-types{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .axis-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
  }
  .page-products .lib{
    grid-template-columns:var(--filter-w) minmax(0,1fr);
    gap:36px;
    align-items:start;
  }
  .page-products .filter-sticky{
    position:sticky;
    top:calc(var(--header-h) + 18px);
  }
  .page-products .steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
  }
  .page-products .pkg-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .jump,
  .page-products .res-card,
  .page-products .next-link{
    transition:opacity .2s linear;
  }
  .page-products .res-card:hover,
  .page-products .next-link:hover{
    transform:none;
  }
}
<<<END>>>