.page-products{
  --pv-gap: clamp(1.5rem, 4vw, 3rem);
  --pv-block: clamp(3rem, 7vw, 6rem);
  --pv-line: rgba(47, 70, 91, 0.78);
  background: var(--ink-900);
  color: var(--ice);
  padding-top: calc(var(--header-h) + 1.5rem);
  font-family: var(--font-sans);
  overflow-wrap: break-word;
}
.page-products p{margin:0 0 1rem;line-height:1.78;}
.page-products p:last-child{margin-bottom:0;}
.page-products h2{
  margin:.5rem 0 0;
  font-size:clamp(1.55rem, 3.6vw, 2.5rem);
  line-height:1.14;
  letter-spacing:-.025em;
  font-weight:600;
  color:var(--ice);
}
.page-products h3{
  margin:0 0 .45rem;
  font-size:clamp(1rem, 1.9vw, 1.12rem);
  line-height:1.42;
  font-weight:600;
  color:var(--ice);
}
.page-products .breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:1.6rem;
}
.page-products .breadcrumbs a{color:var(--mist);text-decoration:none;transition:color .2s var(--ease);}
.page-products .breadcrumbs a:hover,
.page-products .breadcrumbs a:focus-visible{color:var(--cyan);}
.page-products .pv-kicker{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}
.page-products .pv-kicker::before{
  content:"";
  display:block;
  width:1.6rem;
  height:1px;
  background:var(--amber);
  flex:none;
}
.page-products .pv-lead{
  margin-top:.95rem;
  max-width:64ch;
  color:var(--mist);
  font-size:clamp(.94rem, 1.6vw, 1.04rem);
  line-height:1.8;
}
.page-products .pv-sec{
  position:relative;
  padding-block:var(--pv-block);
  border-top:1px solid var(--pv-line);
}
.page-products .pv-head{max-width:66ch;}
.page-products .pv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  margin-top:1.9rem;
}

/* ---------- 首屏 ---------- */
.page-products .pv-hero{
  position:relative;
  padding-bottom:clamp(2.5rem, 6vw, 5rem);
}
.page-products .pv-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(58% 78% at 78% 4%, rgba(56, 214, 196, .16), transparent 72%),
    radial-gradient(46% 62% at 4% 12%, rgba(242, 169, 59, .1), transparent 72%);
  pointer-events:none;
}
.page-products .pv-hero-grid{
  position:relative;
  display:grid;
  gap:var(--pv-gap);
}
.page-products .pv-h1{
  margin:.8rem 0 0;
  font-size:clamp(1.95rem, 5.6vw, 3.7rem);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:600;
  color:var(--ice);
}
.page-products .pv-hero-lead{
  margin-top:1.2rem;
  max-width:56ch;
  color:var(--mist);
  font-size:clamp(.95rem, 1.7vw, 1.08rem);
  line-height:1.82;
}
.page-products .pv-hero-aside{display:grid;gap:1.25rem;align-content:start;}

.page-products .pv-index{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--pv-line);
}
.page-products .pv-index li{border-bottom:1px solid var(--pv-line);}
.page-products .pv-index a{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding:.7rem .2rem;
  color:var(--mist);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.08em;
  transition:color .22s var(--ease), padding-left .22s var(--ease);
}
.page-products .pv-index a:hover,
.page-products .pv-index a:focus-visible{color:var(--amber);padding-left:.65rem;}
.page-products .pv-idx{color:var(--sage);flex:none;}

/* ---------- 图片容器 ---------- */
.page-products .media{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  overflow:hidden;
  border:1px solid var(--pv-line);
  background:linear-gradient(150deg, var(--ink-800), var(--ink-900));
  aspect-ratio:3 / 2;
}
.page-products .media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}
.page-products .media--portrait{aspect-ratio:2 / 3;}
.page-products .media--square{aspect-ratio:4 / 3;}
.page-products .pv-media--track{aspect-ratio:2 / 1;margin-top:clamp(1.75rem, 4vw, 2.75rem);}
.page-products .pv-media--timeline{aspect-ratio:12 / 7;margin-top:clamp(1.75rem, 4vw, 2.75rem);}

/* ---------- 服务矩阵 ---------- */
.page-products .pv-matrix{
  display:grid;
  gap:1px;
  margin-top:clamp(1.75rem, 4vw, 2.75rem);
  background:var(--pv-line);
  border:1px solid var(--pv-line);
}
.page-products .pv-cell{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:clamp(1.25rem, 3vw, 1.9rem);
  background:var(--ink-850);
  transition:background .25s var(--ease);
}
.page-products .pv-cell::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:2px;
  width:0;
  background:var(--cyan);
  transition:width .35s var(--ease);
}
.page-products .pv-cell:hover{background:var(--ink-800);}
.page-products .pv-cell:hover::after{width:100%;}
.page-products .pv-cell-num{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--amber);
}
.page-products .pv-cell p{color:var(--mist);font-size:.92rem;margin:0;}
.page-products .pv-cell .tag{align-self:flex-start;margin-top:.25rem;}
.page-products .pv-cell--cta{
  background:linear-gradient(155deg, var(--ink-800), var(--ink-900));
  border-top:1px solid var(--amber-deep);
}
.page-products .pv-cell--cta h3{color:var(--paper);}
.page-products .pv-cell--cta .btn{margin-top:.9rem;align-self:flex-start;}

/* ---------- 版本说明 ---------- */
.page-products .pv-version{display:grid;gap:var(--pv-gap);}
.page-products .pv-version-rail{display:grid;gap:1.25rem;align-content:start;}
.page-products .pv-version-card{
  border:1px solid var(--pv-line);
  background:linear-gradient(158deg, var(--ink-800), var(--ink-900) 78%);
  padding:clamp(1.4rem, 3.5vw, 2.2rem);
}
.page-products .pv-version-num{
  margin:.7rem 0 0;
  font-family:var(--font-mono);
  font-size:clamp(2.9rem, 9vw, 4.2rem);
  line-height:1;
  letter-spacing:-.05em;
  color:var(--amber);
}
.page-products .pv-version-sub{
  margin:.35rem 0 0;
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--ice);
}
.page-products .pv-version-note{
  margin-top:1rem;
  font-size:.9rem;
  color:var(--mist);
  line-height:1.75;
}
.page-products .pv-version-list{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  border-top:1px solid var(--pv-line);
}
.page-products .pv-version-list li{
  padding:.65rem 0 .65rem 1.1rem;
  position:relative;
  border-bottom:1px solid var(--pv-line);
  font-size:.86rem;
  line-height:1.6;
  color:var(--mist);
}
.page-products .pv-version-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.05rem;
  width:.45rem;
  height:1px;
  background:var(--cyan);
}
.page-products .pv-version-links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.25rem;
}
.page-products .pv-opts{
  display:grid;
  gap:1px;
  margin-top:clamp(1.5rem, 3vw, 2rem);
  background:var(--pv-line);
  border:1px solid var(--pv-line);
}
.page-products .pv-opt{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:1rem;
  padding:clamp(1.15rem, 3vw, 1.75rem);
  background:var(--ink-850);
}
.page-products .pv-opt-num{
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--cyan);
  border:1px solid var(--line);
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
}
.page-products .pv-opt p{color:var(--mist);font-size:.92rem;margin:0;}

/* ---------- 六步流程 ---------- */
.page-products .pv-member{display:grid;gap:var(--pv-gap);margin-top:clamp(1.75rem, 4vw, 2.75rem);}
.page-products .pv-member-rail{
  align-self:start;
  border-left:1px solid var(--pv-line);
  padding-left:1.2rem;
}
.page-products .pv-member-rail h3{margin-top:.6rem;}
.page-products .pv-member-rail p{color:var(--mist);font-size:.92rem;}
.page-products .pv-member-rail .btn{margin-top:.85rem;}

.page-products .pv-track{
  list-style:none;
  margin:0;
  padding:0;
}
.page-products .pv-track-item{
  position:relative;
  padding-left:3rem;
  padding-bottom:1.1rem;
}
.page-products .pv-track-item::before{
  content:"";
  position:absolute;
  left:1.05rem;
  top:2.4rem;
  bottom:-.2rem;
  width:1px;
  background:var(--pv-line);
}
.page-products .pv-track-item:last-child::before{display:none;}
.page-products .pv-num{
  position:absolute;
  left:0;
  top:.1rem;
  width:2.1rem;
  height:2.1rem;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--amber);
  border:1px solid var(--amber-deep);
  background:var(--ink-900);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.page-products .pv-track-item details{
  border:1px solid var(--pv-line);
  background:var(--ink-850);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.page-products .pv-track-item details[open]{
  background:var(--ink-800);
  border-color:var(--line);
}
.page-products .pv-track-item details[open] .pv-num{color:var(--cyan);border-color:var(--cyan);}
.page-products .pv-track-item summary{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem .8rem;
  padding:1rem 1.1rem;
  cursor:pointer;
  list-style:none;
}
.page-products .pv-track-item summary::-webkit-details-marker{display:none;}
.page-products .pv-track-item summary::marker{content:"";}
.page-products .pv-step-title{
  font-size:1rem;
  font-weight:600;
  color:var(--ice);
}
.page-products .pv-step-hint{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--sage);
}
.page-products .pv-track-item summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.page-products .pv-step-body{
  padding:0 1.1rem 1.1rem;
  border-top:1px solid var(--pv-line);
  margin-top:.2rem;
}
.page-products .pv-step-body ul{
  list-style:none;
  margin:.9rem 0 0;
  padding:0;
  display:grid;
  gap:.45rem;
}
.page-products .pv-step-body li{
  position:relative;
  padding-left:1rem;
  font-size:.9rem;
  line-height:1.68;
  color:var(--mist);
}
.page-products .pv-step-body li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72rem;
  width:.42rem;
  height:.42rem;
  border:1px solid var(--cyan);
}
.page-products .pv-confirm{
  margin-top:1rem;
  padding:.7rem .9rem;
  background:rgba(242, 169, 59, .1);
  border-left:2px solid var(--amber);
  font-size:.86rem;
  line-height:1.65;
  color:var(--paper);
}

/* ---------- 设备与场景 ---------- */
.page-products .pv-spec{
  margin:clamp(1.75rem, 4vw, 2.5rem) 0 0;
  border-top:1px solid var(--pv-line);
}
.page-products .pv-spec-row{
  display:grid;
  gap:.35rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--pv-line);
}
.page-products .pv-spec-row dt{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--amber);
}
.page-products .pv-spec-row dd{
  margin:0;
  font-size:.93rem;
  line-height:1.72;
  color:var(--mist);
}

/* ---------- 检索与收藏 ---------- */
.page-products .pv-split{display:grid;gap:var(--pv-gap);}
.page-products .pv-feature-list{
  list-style:none;
  margin:clamp(1.5rem, 3vw, 2rem) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--pv-line);
  border:1px solid var(--pv-line);
}
.page-products .pv-feature-list li{
  background:var(--ink-850);
  padding:1.05rem 1.15rem;
}
.page-products .pv-feature-list h3{color:var(--cyan);}
.page-products .pv-feature-list p{color:var(--mist);font-size:.9rem;margin:0;}

/* ---------- 版本演进 ---------- */
.page-products .pv-timeline{
  list-style:none;
  margin:clamp(1.5rem, 3vw, 2rem) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--pv-line);
  border:1px solid var(--pv-line);
}
.page-products .pv-tl-node{
  background:var(--ink-850);
  padding:1.15rem 1.1rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  border-top:2px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.page-products .pv-tl-node:hover{
  background:var(--ink-800);
  border-top-color:var(--cyan);
}
.page-products .pv-tl-node .tag{align-self:flex-start;}
.page-products .pv-tl-ver{
  margin:.2rem 0 0;
  font-family:var(--font-mono);
  font-size:1.5rem;
  letter-spacing:-.02em;
  color:var(--amber);
  line-height:1;
}
.page-products .pv-tl-node p:last-child{color:var(--mist);font-size:.86rem;}
.page-products .pv-timeline-note{
  margin-top:1.4rem;
  max-width:70ch;
  font-size:.88rem;
  line-height:1.75;
  color:var(--sage);
}
.page-products .pv-next{
  margin-top:clamp(2rem, 4vw, 3rem);
  padding:clamp(1.25rem, 3vw, 1.9rem);
  border:1px solid var(--pv-line);
  background:linear-gradient(150deg, var(--ink-800), var(--ink-900));
}
.page-products .pv-next-title{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 1rem;
}
.page-products .pv-next-links{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px){
  .page-products .pv-matrix{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .page-products .pv-spec-row{
    grid-template-columns:minmax(7rem, 11rem) minmax(0, 1fr);
    gap:1.25rem;
    align-items:baseline;
  }
}

@media (min-width: 960px){
  .page-products .pv-hero-grid{
    grid-template-columns:minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap:clamp(2rem, 5vw, 4.5rem);
    align-items:start;
  }
  .page-products .pv-matrix{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .page-products .pv-split{
    grid-template-columns:minmax(0, 1fr) minmax(0, 0.85fr);
    gap:clamp(2rem, 5vw, 4rem);
    align-items:start;
  }
  .page-products .pv-timeline{grid-template-columns:repeat(5, minmax(0, 1fr));}
  .page-products .pv-opts{grid-template-columns:minmax(0, 1fr);}
}

@media (min-width: 1024px){
  .page-products .pv-version{
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    gap:clamp(2rem, 5vw, 4rem);
    align-items:start;
  }
  .page-products .pv-version-rail{
    position:sticky;
    top:calc(var(--header-h) + 2rem);
  }
  .page-products .pv-member{
    grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
    gap:clamp(2rem, 5vw, 4rem);
    align-items:start;
  }
  .page-products .pv-member-rail{
    position:sticky;
    top:calc(var(--header-h) + 2rem);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}
