.page-products{
  --pr-line: #2A3350;
  --pr-panel: #0E1424;
  --pr-edge: rgba(34,211,238,.22);
  --pr-tint: rgba(124,58,237,.14);
}

/* ---------- 通用小节标题 ---------- */
.page-products .pr-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,3vw,26px);
  align-items:start;
  margin-bottom:clamp(22px,3.4vw,40px);
}
.page-products .pr-head .section-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(38px,7vw,76px);
  line-height:.86;
  letter-spacing:-.02em;
  color:rgba(124,58,237,.34);
  -webkit-text-stroke:1.4px rgba(124,58,237,.75);
}
.page-products .pr-head .section-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,3.8vw,40px);
  line-height:1.12;
  color:var(--white);
  margin:0 0 .35em;
}
.page-products .pr-head__sub{
  margin:0;
  color:var(--mist);
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.78;
  max-width:62ch;
}

/* ---------- 首屏 ---------- */
.page-products .pr-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,4vw,46px) 0 clamp(30px,5vw,60px);
}
.page-products .pr-hero::before{
  content:"";
  position:absolute;
  inset:-20% -25% auto -25%;
  height:150%;
  background:
    repeating-linear-gradient(118deg,transparent 0 46px,rgba(124,58,237,.10) 46px 47px),
    radial-gradient(72% 62% at 86% -6%,rgba(34,211,238,.18),transparent 68%),
    radial-gradient(58% 50% at 4% 30%,rgba(124,58,237,.20),transparent 72%);
  pointer-events:none;
  z-index:0;
}
.page-products .pr-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(22px,4vw,42px);
}
.page-products .pr-hero__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px,7.6vw,80px);
  line-height:1.02;
  letter-spacing:-.012em;
  color:var(--white);
  margin:.28em 0 0;
}
.page-products .pr-hero__title-mark{
  display:inline-block;
  color:var(--ink);
  background:linear-gradient(96deg,var(--cyan) 0%,#7ee7f7 100%);
  padding:.02em .2em .08em;
  transform:rotate(-1.6deg);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.page-products .pr-hero__lead{
  margin:clamp(16px,2.4vw,26px) 0 0;
  max-width:56ch;
  color:var(--mist);
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.82;
}
.page-products .pr-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
  margin-top:clamp(20px,3vw,30px);
}
.page-products .pr-hero__aside{
  position:relative;
  border:1px solid var(--pr-line);
  border-left:3px solid var(--violet);
  background:linear-gradient(158deg,rgba(124,58,237,.16),rgba(14,20,36,.72) 62%);
  padding:18px 20px 20px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.page-products .pr-hero__aside-title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lilac);
}
.page-products .pr-hero__toc{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.page-products .pr-hero__toc a{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:8px 4px;
  color:var(--mist);
  text-decoration:none;
  font-size:14px;
  border-bottom:1px dashed rgba(42,51,80,.85);
  transition:color .24s var(--ease),background .24s var(--ease);
}
.page-products .pr-hero__toc li:last-child a{border-bottom:0;}
.page-products .pr-hero__toc a .mono{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cyan);
}
.page-products .pr-hero__toc a:hover,
.page-products .pr-hero__toc a:focus-visible{
  color:var(--white);
  background:rgba(34,211,238,.08);
}
.page-products .pr-hero__strip{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--pr-line);
  border:1px solid var(--pr-line);
  margin-top:clamp(24px,4vw,44px);
  position:relative;
  z-index:1;
}
.page-products .pr-hero__strip .data-strip__item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  background:var(--ink-2);
}
.page-products .pr-hero__strip .data-strip__num{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(19px,3vw,26px);
  color:var(--cyan);
  letter-spacing:.01em;
}
.page-products .pr-hero__strip .data-strip__label{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--dim);
}
.page-products .pr-unit{
  font-size:.62em;
  margin-left:2px;
  color:var(--lilac);
}

/* ---------- 三种访问方式 ---------- */
.page-products .pr-access__grid{
  align-items:start;
  gap:clamp(22px,3.4vw,40px);
}
.page-products .pr-devices{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--pr-line);
  border:1px solid var(--pr-line);
}
.page-products .pr-devices__item{
  position:relative;
  background:var(--ink-2);
  padding:18px 18px 20px 22px;
  transition:background .26s var(--ease);
}
.page-products .pr-devices__item::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--pr-line);
  transition:background .26s var(--ease);
}
.page-products .pr-devices__item:hover{background:#131a2e;}
.page-products .pr-devices__item:hover::after{background:var(--cyan);}
.page-products .pr-devices__icon{
  color:var(--cyan);
  display:block;
  margin-bottom:10px;
}
.page-products .pr-devices__name{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--white);
}
.page-products .pr-devices__text{
  margin:0;
  color:var(--mist);
  font-size:15px;
  line-height:1.78;
}
.page-products .pr-devices__note{
  margin:10px 0 0;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--lilac);
}
.page-products .pr-access__note{
  margin:18px 0 0;
  padding:14px 16px;
  border-left:2px solid var(--violet);
  background:rgba(124,58,237,.10);
  color:var(--mist);
  font-size:14px;
  line-height:1.8;
}
.page-products .pr-access__media{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
.page-products .pr-shot{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  background:linear-gradient(140deg,rgba(124,58,237,.28),rgba(14,20,36,.9));
}
.page-products .pr-shot img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .pr-shot--phone{
  max-width:240px;
  justify-self:end;
  border-top:2px solid var(--cyan);
}

/* ---------- 版本档案 ---------- */
.page-products .pr-versions__grid{
  align-items:start;
  gap:clamp(22px,3.4vw,40px);
}
.page-products .pr-timeline{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.page-products .pr-timeline::before{
  content:"";
  position:absolute;
  left:7px;
  top:12px;
  bottom:16px;
  width:2px;
  background:linear-gradient(180deg,var(--violet),var(--cyan));
  opacity:.55;
}
.page-products .pr-timeline__item{
  position:relative;
  padding:0 0 24px 34px;
}
.page-products .pr-timeline__item:last-child{padding-bottom:0;}
.page-products .pr-timeline__item::before{
  content:"";
  position:absolute;
  left:1px;
  top:6px;
  width:14px;
  height:14px;
  background:var(--ink);
  border:2px solid var(--violet);
  transform:rotate(45deg);
}
.page-products .pr-timeline__item.is-current::before{
  border-color:var(--cyan);
  background:var(--cyan);
  box-shadow:0 0 0 5px rgba(34,211,238,.18);
}
.page-products .pr-timeline__inner{
  display:grid;
  gap:6px;
}
.page-products .pr-timeline__ver{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:20px;
  letter-spacing:.06em;
  color:var(--steel);
  transition:color .26s var(--ease);
}
.page-products .pr-timeline__item.is-current .pr-timeline__ver{color:var(--cyan);}
.page-products .pr-timeline__item:hover .pr-timeline__ver{color:var(--lilac);}
.page-products .pr-timeline__title{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  color:var(--white);
  letter-spacing:.01em;
}
.page-products .pr-timeline__text{
  margin:0;
  color:var(--mist);
  font-size:14.5px;
  line-height:1.78;
}
.page-products .pr-versions__fig{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  border-bottom:2px solid var(--cyan);
}
.page-products .pr-versions__fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

/* ---------- 费用对照 ---------- */
.page-products .pr-fees__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
.page-products .pr-fees__tab{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  padding:8px 14px;
  color:var(--mist);
  text-decoration:none;
  border:1px solid var(--pr-line);
  background:rgba(14,20,36,.7);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:color .24s var(--ease),border-color .24s var(--ease),background .24s var(--ease);
}
.page-products .pr-fees__tab:hover,
.page-products .pr-fees__tab:focus-visible{
  color:var(--white);
  border-color:var(--cyan);
  background:rgba(34,211,238,.12);
}
.page-products .pr-fees__scroll{
  border:1px solid var(--pr-line);
  background:var(--ink-2);
}
.page-products .pr-fees__caption{
  caption-side:top;
  text-align:left;
  padding:12px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  border-bottom:1px solid var(--pr-line);
}
.page-products .pr-fees__table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:15px;
}
.page-products .pr-fees__table thead th{
  padding:12px 14px;
  text-align:left;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lilac);
  background:rgba(7,10,18,.9);
  border-bottom:1px solid var(--pr-line);
  white-space:nowrap;
}
.page-products .pr-fees__table tbody th,
.page-products .pr-fees__table tbody td{
  padding:15px 14px;
  text-align:left;
  vertical-align:top;
  color:var(--mist);
  border-top:1px solid rgba(42,51,80,.7);
  line-height:1.65;
}
.page-products .pr-fees__ver{
  font-weight:600;
  color:var(--white);
  font-size:15px;
  white-space:nowrap;
}
.page-products .pr-fees__table .num{
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--cyan);
  white-space:nowrap;
}
.page-products .pr-fees__table tbody tr.is-key{
  background:rgba(124,58,237,.16);
  box-shadow:inset 3px 0 0 var(--violet);
}
.page-products .pr-fees__table tbody tr.is-key .num{color:var(--orange);}
.page-products .pr-fees__table tbody tr:target{
  background:rgba(34,211,238,.14);
  box-shadow:inset 3px 0 0 var(--cyan);
}
.page-products .pr-fees__table tbody tr:target .pr-fees__ver{color:var(--cyan);}
.page-products .pr-fees__foot{
  margin-top:16px;
}
.page-products .pr-fees__hint{
  margin:0;
  color:var(--mist);
  font-size:14.5px;
  line-height:1.8;
  padding-left:14px;
  border-left:2px solid var(--orange);
}
.page-products .pr-fees__hint a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 旧版年费归档 ---------- */
.page-products .pr-archive__grid{
  align-items:start;
  gap:clamp(20px,3.2vw,36px);
}
.page-products .pr-archive-list{
  display:grid;
  gap:16px;
}
.page-products .pr-archive{
  border:1px solid var(--pr-line);
  background:linear-gradient(152deg,rgba(124,58,237,.16),rgba(14,20,36,.94) 58%);
  padding:20px 20px 22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
}
.page-products .pr-archive:hover,
.page-products .pr-archive:focus-within{
  transform:translateY(-3px);
  border-color:var(--cyan);
  background:linear-gradient(152deg,rgba(34,211,238,.14),rgba(14,20,36,.94) 58%);
}
.page-products .pr-archive__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.page-products .pr-archive__price{
  margin:0;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(26px,4.4vw,36px);
  line-height:1;
  color:var(--white);
}
.page-products .pr-archive__unit{
  font-size:.42em;
  margin-left:4px;
  color:var(--lilac);
  letter-spacing:.04em;
}
.page-products .pr-archive__desc{
  margin:0;
  color:var(--mist);
  font-size:14.5px;
  line-height:1.8;
}
.page-products .pr-archive__more{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .34s var(--ease),opacity .3s var(--ease);
  opacity:1;
}
.page-products .pr-archive__more > div{overflow:hidden;}
.page-products .pr-archive__more p{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px dashed rgba(42,51,80,.9);
  color:var(--mist);
  font-size:14px;
  line-height:1.8;
}
.page-products .pr-archive__more a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-products .pr-archive__fig{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
  border-top:2px solid var(--violet);
}
.page-products .pr-archive__fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

/* ---------- 适合谁 ---------- */
.page-products .pr-audience__layout{
  display:grid;
  gap:clamp(20px,3vw,34px);
}
.page-products .pr-audience__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-products .pr-audience__item{
  padding:20px;
  background:var(--ink-2);
  border:1px solid var(--pr-line);
  transition:transform .26s var(--ease),border-color .26s var(--ease);
}
.page-products .pr-audience__item:nth-child(2){
  border-left:3px solid var(--cyan);
}
.page-products .pr-audience__item:hover{
  transform:translateY(-3px);
  border-color:var(--cyan);
}
.page-products .pr-audience__name{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  color:var(--white);
}
.page-products .pr-audience__text{
  margin:0;
  color:var(--mist);
  font-size:14.5px;
  line-height:1.8;
}
.page-products .pr-audience__meta{
  margin:12px 0 0;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--dim);
}
.page-products .pr-audience__fig{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
}
.page-products .pr-audience__fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

/* ---------- 四步流程 ---------- */
.page-products .pr-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--pr-line);
  border-top:2px solid var(--violet);
}
.page-products .pr-steps__item{
  position:relative;
  background:var(--ink-2);
  padding:22px 18px 26px;
  transition:background .26s var(--ease);
}
.page-products .pr-steps__item::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:0;
  transition:opacity .26s var(--ease);
}
.page-products .pr-steps__item:hover{background:#121a2e;}
.page-products .pr-steps__item:hover::before{opacity:1;}
.page-products .pr-steps__num{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan);
  margin-bottom:12px;
}
.page-products .pr-steps__title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--white);
}
.page-products .pr-steps__text{
  margin:0;
  color:var(--mist);
  font-size:14.5px;
  line-height:1.8;
}

/* ---------- 服务承诺 ---------- */
.page-products .pr-service__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--pr-line);
  border:1px solid var(--pr-line);
}
.page-products .pr-service__item{
  background:var(--ink-2);
  padding:20px 18px 22px;
}
.page-products .pr-service__num{
  display:block;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(20px,3.2vw,28px);
  color:var(--cyan);
  margin-bottom:10px;
  letter-spacing:.01em;
}
.page-products .pr-service__label{
  margin:0;
  color:var(--mist);
  font-size:14px;
  line-height:1.8;
}

/* ---------- 收束 ---------- */
.page-products .pr-cta__box{
  position:relative;
  display:grid;
  gap:clamp(18px,3vw,28px);
  padding:clamp(24px,4vw,44px);
  background:
    linear-gradient(135deg,rgba(124,58,237,.30),rgba(14,20,36,.96) 62%),
    var(--ink-2);
  border:1px solid var(--pr-line);
  border-left:4px solid var(--violet);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%);
}
.page-products .pr-cta__title{
  margin:0 0 .4em;
  font-family:var(--font-display);
  font-size:clamp(26px,3.6vw,40px);
  font-weight:800;
  line-height:1.1;
  color:var(--white);
}
.page-products .pr-cta__text p{
  margin:0;
  color:var(--mist);
  font-size:15px;
  line-height:1.8;
  max-width:56ch;
}
.page-products .pr-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-products .pr-cta__links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  border-top:1px solid rgba(42,51,80,.85);
  padding-top:16px;
}
.page-products .pr-cta__links a{
  color:var(--lilac);
  text-decoration:none;
  font-size:14px;
  transition:color .24s var(--ease),padding-left .24s var(--ease);
}
.page-products .pr-cta__links a:hover,
.page-products .pr-cta__links a:focus-visible{
  color:var(--cyan);
  padding-left:6px;
}

/* ---------- 响应式 ---------- */
@media (min-width:600px){
  .page-products .pr-hero__strip{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-products .pr-timeline__inner{
    grid-template-columns:64px minmax(0,1fr);
    gap:16px;
    align-items:start;
  }
  .page-products .pr-service__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:860px){
  .page-products .pr-hero__inner{
    grid-template-columns:minmax(0,1fr) 292px;
    align-items:start;
  }
  .page-products .pr-access__media{
    grid-template-columns:minmax(0,1fr) minmax(0,.64fr);
    align-items:end;
  }
  .page-products .pr-audience__layout{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:start;
  }
  .page-products .pr-steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-products .pr-service__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-products .pr-fees__scroll{
    max-height:460px;
    overflow:auto;
  }
  .page-products .pr-fees__table thead th{
    position:sticky;
    top:0;
    z-index:2;
  }
  .page-products .pr-archive__more{
    grid-template-rows:0fr;
    opacity:0;
  }
  .page-products .pr-archive:hover .pr-archive__more,
  .page-products .pr-archive:focus-within .pr-archive__more{
    grid-template-rows:1fr;
    opacity:1;
  }
}

@media (min-width:1080px){
  .page-products .pr-versions__fig{
    position:sticky;
    top:88px;
    align-self:start;
  }
  .page-products .pr-cta__box{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    align-items:center;
  }
  .page-products .pr-cta__text{
    grid-column:1;
  }
  .page-products .pr-cta__actions{
    grid-column:2;
    justify-content:flex-end;
  }
  .page-products .pr-cta__links{
    grid-column:1 / -1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px 24px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .pr-archive,
  .page-products .pr-audience__item,
  .page-products .pr-devices__item,
  .page-products .pr-steps__item{
    transition:color .2s linear,background .2s linear,border-color .2s linear;
  }
  .page-products .pr-archive:hover,
  .page-products .pr-audience__item:hover{
    transform:none;
  }
  .page-products .pr-archive__more{
    transition:opacity .2s linear;
  }
}
<<<END>>>