.page-products{
  --pp-card:#102B24;
  --pp-card-2:#0E2620;
  --pp-cyan-soft:rgba(46,230,200,.14);
  --pp-orange-soft:rgba(255,107,44,.14);
  --pp-shadow:8px 8px 0 rgba(6,18,15,.55);
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
}

/* ---------- 首屏 ---------- */
.page-products .p-hero{
  position:relative;
  padding:clamp(18px,3.5vw,32px) 0 clamp(30px,5vw,56px);
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(46,230,200,.16), transparent 62%),
    radial-gradient(70% 60% at 4% 100%, rgba(255,107,44,.10), transparent 62%),
    linear-gradient(180deg, #102B24 0%, #0B1F1A 100%);
  border-bottom:1px solid var(--line);
}
.page-products .p-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(46,230,200,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,230,200,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 72%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 72%, transparent 100%);
  pointer-events:none;
}
.page-products .p-hero > .shell{position:relative;z-index:1}
.page-products .breadcrumbs{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--haze);
  margin-bottom:clamp(18px,3vw,30px);
}
.page-products .breadcrumbs a{color:var(--cyan);text-decoration:none}
.page-products .breadcrumbs a:hover{text-decoration:underline}
.page-products .p-hero__grid{
  display:grid;
  gap:clamp(22px,4vw,42px);
  align-items:end;
}
.page-products .p-hero__text h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px,7.4vw,72px);
  line-height:.98;
  letter-spacing:-.015em;
  margin:10px 0 18px;
  max-width:13em;
}
.page-products .p-hero__text .lede{
  max-width:34em;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.75;
  color:var(--haze);
  margin:0;
}
.page-products .p-hero__quick{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 0;
  padding:0;
  font-size:12px;
  letter-spacing:.03em;
}
.page-products .p-hero__quick li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border:1px solid var(--line);
  background:rgba(46,230,200,.06);
  color:var(--paper);
}
.page-products .p-hero__quick li span{color:var(--acid);font-weight:700}
.page-products .p-hero__media{
  margin:0;
  border:1px solid var(--line);
  box-shadow:10px 10px 0 rgba(6,18,15,.5);
}
@media (min-width:900px){
  .page-products .p-hero__grid{grid-template-columns:5fr 7fr;}
  .page-products .p-hero__text{padding-bottom:6px}
}

/* ---------- 主体骨架：左侧粘性索引 + 右侧内容 ---------- */
.page-products .p-body{
  display:grid;
  gap:clamp(24px,4vw,48px);
  padding-top:clamp(26px,4vw,52px);
  padding-bottom:clamp(40px,6vw,80px);
}
@media (min-width:960px){
  .page-products .p-body{grid-template-columns:236px minmax(0,1fr);}
}
.page-products .p-index{
  border-top:2px solid var(--cyan);
  padding-top:14px;
}
.page-products .p-index__title{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--cyan);
  margin:0 0 12px;
}
.page-products .p-index .toc{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.page-products .p-index .toc__item{
  flex:0 1 auto;
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.4;
  text-align:left;
  color:var(--haze);
  background:transparent;
  border:1px solid var(--line-2);
  padding:7px 11px;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.page-products .p-index .toc__item:hover,
.page-products .p-index .toc__item:focus-visible{
  color:var(--paper);
  border-color:var(--cyan);
  background:rgba(46,230,200,.08);
  transform:translateX(2px);
}
.page-products .p-index .toc__item[aria-current="true"]{
  color:var(--ink);
  background:var(--cyan);
  border-color:var(--cyan);
  font-weight:700;
}
.page-products .p-index__tip{
  margin-top:20px;
  padding:12px 14px;
  border:1px dashed var(--line-2);
}
.page-products .p-index__tip p{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--haze);
}
.page-products .p-index__link{
  color:var(--acid);
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid rgba(232,255,90,.4);
}
.page-products .p-index__link:hover{border-bottom-color:var(--acid)}
@media (min-width:960px){
  .page-products .p-index{
    position:sticky;
    top:96px;
    align-self:start;
  }
  .page-products .p-index .toc{flex-direction:column}
  .page-products .p-index .toc__item{display:block;width:100%}
}

/* ---------- 章节通用 ---------- */
.page-products .p-main{min-width:0}
.page-products .p-sec{
  padding:clamp(24px,3.6vw,40px) 0;
  border-top:1px solid var(--line-2);
}
.page-products .p-sec:first-child{border-top:0;padding-top:0}
.page-products .p-sec__head{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.page-products .p-num{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink);
  background:var(--cyan);
  padding:3px 8px;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.page-products .p-sec__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(24px,3.6vw,40px);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
  color:var(--paper);
}
.page-products .p-sec__lead{
  max-width:40em;
  font-size:16px;
  line-height:1.78;
  color:var(--haze);
  margin:0 0 20px;
}
.page-products .p-sec__note{
  margin:18px 0 0;
  padding-left:14px;
  border-left:2px solid var(--orange);
  font-size:14px;
  line-height:1.7;
  color:var(--haze);
}

/* ---------- 表格 ---------- */
.page-products .p-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  background:var(--pp-card-2);
}
.page-products .p-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:14.5px;
}
.page-products .p-table__caption{
  caption-side:top;
  text-align:left;
  padding:12px 16px 10px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--cyan);
  border-bottom:1px solid var(--line);
}
.page-products .p-table th,
.page-products .p-table td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line-2);
  line-height:1.68;
}
.page-products .p-table thead th{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  font-weight:600;
  color:var(--cyan);
  background:rgba(46,230,200,.06);
}
.page-products .p-table tbody th{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  color:var(--paper);
  white-space:nowrap;
  border-left:3px solid var(--teal);
}
.page-products .p-table tbody td{color:var(--haze)}
.page-products .p-table tbody tr:hover td,
.page-products .p-table tbody tr:hover th{background:rgba(46,230,200,.05);color:var(--paper)}
.page-products .p-table tbody tr:last-child td,
.page-products .p-table tbody tr:last-child th{border-bottom:0}

/* ---------- 左右图文 ---------- */
.page-products .p-split{
  display:grid;
  gap:clamp(20px,3.4vw,34px);
  align-items:start;
}
@media (min-width:820px){
  .page-products .p-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .page-products .p-split--flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.page-products .p-split__media{
  margin:0;
  border:1px solid var(--line);
  box-shadow:var(--pp-shadow);
}
.page-products .p-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-products .p-list li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.72;
  color:var(--haze);
}
.page-products .p-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:9px;
  background:var(--orange);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.page-products .p-list strong{color:var(--paper);font-weight:700}

/* ---------- 六栏目 ---------- */
.page-products .p-cols{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  counter-reset:none;
}
@media (min-width:600px){
  .page-products .p-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1040px){
  .page-products .p-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.page-products .p-cols__item{
  position:relative;
  padding:18px 16px 16px;
  background:var(--pp-card);
  border:1px solid var(--line);
  box-shadow:6px 6px 0 rgba(6,18,15,.45);
  transition:transform .2s ease, border-color .2s ease;
}
.page-products .p-cols__item:hover{
  transform:translate(-2px,-2px);
  border-color:var(--cyan);
}
.page-products .p-cols__num{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--acid);
  margin-bottom:8px;
}
.page-products .p-cols__item h3{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  margin:0 0 8px;
  color:var(--paper);
}
.page-products .p-cols__item p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--haze);
}

/* ---------- 时间轴 ---------- */
.page-products .p-timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 22px;
  position:relative;
  display:grid;
  gap:18px;
}
.page-products .p-timeline::before{
  content:"";
  position:absolute;
  left:5px;
  top:6px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg, var(--cyan), var(--teal) 55%, var(--orange));
}
.page-products .p-timeline__item{position:relative}
.page-products .p-timeline__dot{
  position:absolute;
  left:-22px;
  top:4px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--cyan);
  box-shadow:0 0 0 3px rgba(46,230,200,.16);
}
.page-products .p-timeline__item:last-child .p-timeline__dot{
  border-color:var(--acid);
  box-shadow:0 0 0 3px rgba(232,255,90,.18);
}
.page-products .p-timeline__time{
  margin:0 0 4px;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--acid);
}
.page-products .p-timeline__item p:last-child{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--haze);
}

/* ---------- 观赛提醒卡 ---------- */
.page-products .p-reminder-block{
  display:grid;
  gap:clamp(18px,3vw,30px);
  margin-top:clamp(24px,3.6vw,36px);
  padding:clamp(18px,3vw,28px);
  background:
    linear-gradient(135deg, rgba(46,230,200,.07), rgba(255,107,44,.07)),
    var(--pp-card-2);
  border:1px solid var(--line);
}
@media (min-width:820px){
  .page-products .p-reminder-block{grid-template-columns:300px minmax(0,1fr);align-items:start}
}
.page-products .p-reminder-block__media{
  margin:0;
  border:1px solid var(--line-2);
}
.page-products .p-sub__title{
  font-family:var(--font-display);
  font-size:clamp(20px,2.6vw,26px);
  font-weight:700;
  margin:0 0 10px;
  color:var(--paper);
}
.page-products .p-reminder-block__text > p{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.75;
  color:var(--haze);
  max-width:36em;
}
.page-products .p-reminder{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--ink-3);
  padding:16px 18px;
  box-shadow:8px 8px 0 rgba(255,107,44,.35);
  transform:rotate(-.6deg);
  max-width:420px;
}
.page-products .p-reminder::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:linear-gradient(180deg,var(--teal),var(--orange));
}
.page-products .p-reminder__label{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--brown);
  font-weight:700;
}
.page-products .p-reminder__rows{
  margin:0;
  display:grid;
  gap:8px;
}
.page-products .p-reminder__rows > div{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px dashed rgba(11,31,26,.2);
}
.page-products .p-reminder__rows > div:last-child{border-bottom:0;padding-bottom:0}
.page-products .p-reminder__rows dt{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--ink-2);
}
.page-products .p-reminder__rows dd{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:#1d3a32;
}
.page-products .p-reminder__foot{
  margin:12px 0 0;
  padding-top:10px;
  border-top:2px solid var(--ink);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--brown);
}

/* ---------- 两端入口对照 ---------- */
.page-products .p-compare{
  display:grid;
  gap:14px;
  margin-bottom:clamp(20px,3vw,28px);
}
@media (min-width:720px){
  .page-products .p-compare{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.page-products .p-compare__pane{
  padding:18px 18px 16px;
  border:1px solid var(--line-2);
  background:var(--pp-card);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.page-products .p-compare__pane--accent{
  background:linear-gradient(150deg, rgba(46,230,200,.14), rgba(255,107,44,.10)), var(--pp-card);
  border-color:var(--cyan);
}
.page-products .p-compare__tag{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--acid);
}
.page-products .p-compare__list{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .p-compare__list li{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--paper);
  border-bottom:1px dotted var(--line-2);
  padding-bottom:10px;
}
.page-products .p-compare__list li:last-child{border-bottom:0;padding-bottom:0}
.page-products .p-compare__list span{
  font-size:11.5px;
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.06em;
}
.page-products .p-compare__note{
  margin:0;
  font-size:13.5px;
  line-height:1.68;
  color:var(--haze);
}
.page-products .p-wide-media{
  margin:0;
  border:1px solid var(--line);
  box-shadow:var(--pp-shadow);
}

/* ---------- 折叠说明 ---------- */
.page-products .p-details{
  border:1px solid var(--line-2);
  background:var(--pp-card-2);
  margin-bottom:10px;
}
.page-products .p-details summary{
  list-style:none;
  cursor:pointer;
  padding:14px 42px 14px 16px;
  position:relative;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  color:var(--paper);
  transition:background .18s ease, color .18s ease;
}
.page-products .p-details summary::-webkit-details-marker{display:none}
.page-products .p-details summary::after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--cyan);
  line-height:1;
}
.page-products .p-details[open] summary::after{content:"–"}
.page-products .p-details summary:hover{background:rgba(46,230,200,.07)}
.page-products .p-details summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.page-products .p-details[open] summary{
  border-bottom:1px solid var(--line);
  color:var(--cyan);
}
.page-products .p-details__body{padding:14px 16px 16px}
.page-products .p-details__body p{
  margin:0;
  max-width:40em;
  font-size:14.5px;
  line-height:1.78;
  color:var(--haze);
}

/* ---------- 三步 ---------- */
.page-products .p-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
@media (min-width:860px){
  .page-products .p-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.page-products .p-steps__item{
  position:relative;
  padding:22px 18px 18px;
  background:var(--pp-card);
  border:1px solid var(--line);
  border-top:3px solid var(--orange);
}
.page-products .p-steps__item:nth-child(2){border-top-color:var(--cyan)}
.page-products .p-steps__item:nth-child(3){border-top-color:var(--acid)}
.page-products .p-steps__num{
  display:block;
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--ink);
  background:var(--paper);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  clip-path:polygon(0 0,100% 0,100% 72%,78% 100%,0 100%);
  margin-bottom:14px;
}
.page-products .p-steps__item h3{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  margin:0 0 8px;
  color:var(--paper);
}
.page-products .p-steps__item p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--haze);
}

/* ---------- 场景表 ---------- */
.page-products .p-table--scenes tbody th{
  white-space:normal;
  border-left-color:var(--orange);
}

/* ---------- 底部行动 ---------- */
.page-products .p-cta{
  display:grid;
  gap:18px;
  margin-top:clamp(26px,4vw,44px);
  padding:clamp(22px,3.6vw,34px);
  background:
    repeating-linear-gradient(135deg, rgba(46,230,200,.05) 0 2px, transparent 2px 14px),
    linear-gradient(120deg, var(--pp-card), var(--ink-3));
  border:1px solid var(--line);
  border-left:4px solid var(--acid);
}
@media (min-width:820px){
  .page-products .p-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}
.page-products .p-cta h2{
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,30px);
  font-weight:700;
  margin:0 0 8px;
  color:var(--paper);
}
.page-products .p-cta p{
  margin:0;
  max-width:38em;
  font-size:14.5px;
  line-height:1.75;
  color:var(--haze);
}
.page-products .p-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-products .p-cta__actions .btn{
  border:1px solid var(--cyan);
  color:var(--cyan);
  background:transparent;
  padding:11px 20px;
  font-size:14px;
  text-decoration:none;
  transition:background .18s ease, color .18s ease;
}
.page-products .p-cta__actions .btn:hover,
.page-products .p-cta__actions .btn:focus-visible{
  background:rgba(46,230,200,.14);
  color:var(--paper);
}
.page-products .p-cta__actions .btn--cta{
  background:var(--orange);
  border-color:var(--orange);
  color:#0B1F1A;
  font-weight:700;
}
.page-products .p-cta__actions .btn--cta:hover,
.page-products .p-cta__actions .btn--cta:focus-visible{
  background:var(--acid);
  border-color:var(--acid);
  color:var(--ink);
}

/* ---------- 图片基础 ---------- */
.page-products img{
  display:block;
  max-width:100%;
  height:auto;
}
.page-products .media-frame img{
  width:100%;
  object-fit:cover;
}
.page-products .media-frame--portrait img{aspect-ratio:4 / 5}
.page-products .p-wide-media img{aspect-ratio:10 / 7}
.page-products .p-hero__media img{aspect-ratio:3 / 2}

@media (prefers-reduced-motion:reduce){
  .page-products .p-cols__item,
  .page-products .p-index .toc__item,
  .page-products .p-cta__actions .btn,
  .page-products .p-details summary{
    transition:none;
  }
  .page-products .p-cols__item:hover{transform:none}
}
<<<END>>>