.page-products{
  --rail-w:46px;
  --products-gap:22px;
}
.page-products img{
  max-width:100%;
  height:auto;
}

/* 首屏展示区 */
.page-products__hero{
  background:
    radial-gradient(1200px 420px at 85% -10%, rgba(124,58,237,.35), transparent 60%),
    linear-gradient(135deg, #0D0F1C 0%, #1E2A5A 100%);
  color:var(--color-white);
  padding:28px 0 52px;
  border-bottom:3px solid var(--color-neon);
}
.page-products__hero .breadcrumbs{
  color:rgba(244,246,251,.65);
}
.page-products__hero .breadcrumbs a{
  color:rgba(244,246,251,.85);
  text-decoration-color:var(--color-purple-bright);
}
.page-products__hero-grid{
  display:grid;
  gap:28px;
  margin-top:24px;
}
.page-products__hero-figure{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line-on-dark-strong);
  box-shadow:0 28px 70px -24px rgba(0,0,0,.6);
}
.page-products__hero-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-products__kicker{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.12em;
  color:var(--color-neon);
  text-transform:uppercase;
  margin-bottom:12px;
}
.page-products__hero-body h1{
  font-size:clamp(24px,5vw,40px);
  font-weight:800;
  line-height:1.2;
  margin-bottom:16px;
  letter-spacing:-.02em;
}
.page-products__lede{
  font-size:16px;
  line-height:1.75;
  color:rgba(244,246,251,.82);
  max-width:56em;
  margin-bottom:22px;
}
.page-products__ver{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.page-products__ver-tag{
  font-size:13px;
  color:rgba(244,246,251,.6);
  border:1px solid var(--line-on-dark-strong);
  padding:5px 10px;
  border-radius:var(--radius-sm);
}
.page-products__ver-code{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  background:rgba(200,240,104,.12);
  color:var(--color-neon);
  border:1px solid rgba(200,240,104,.35);
  border-radius:var(--radius-sm);
  padding:6px 14px;
  cursor:pointer;
  transition:border-color .12s var(--ease), background .12s var(--ease), transform .12s var(--ease);
}
.page-products__ver-code:hover,
.page-products__ver-code:focus-visible{
  border-color:var(--color-neon);
  background:rgba(200,240,104,.2);
  transform:translateY(-1px);
}
.page-products__ver-code::after{
  content:"复制";
  font-family:var(--font-sans);
  font-size:11px;
  margin-left:8px;
  color:rgba(200,240,104,.75);
}

/* 装备架：下载客户端 */
.page-products__rack{
  display:grid;
  gap:var(--products-gap);
  margin-top:28px;
}
.page-products__board{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.page-products__board-rail{
  background:var(--color-navy);
  color:var(--color-white);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:16px 0 14px;
  border-right:2px solid var(--color-neon);
}
.page-products__board-rail span:first-child{
  writing-mode:vertical-rl;
  font-weight:800;
  font-size:13px;
  letter-spacing:.18em;
}
.page-products__rail-mark{
  font-family:var(--font-mono);
  font-size:20px;
  font-weight:800;
  color:var(--color-neon);
}
.page-products__board-body{
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
}
.page-products__board-body h3{
  font-size:18px;
  font-weight:800;
  margin:0 0 8px;
  letter-spacing:-.02em;
}
.page-products__board-body > p{
  font-size:14px;
  line-height:1.7;
  color:var(--color-muted);
  margin-bottom:14px;
}
.page-products__board .accordion__item{
  margin-top:auto;
  border-top:1px dashed var(--color-border);
  padding-top:12px;
}
.page-products__board .accordion__btn{
  background:transparent;
  border:0;
  font-size:13px;
  font-weight:700;
  color:var(--color-purple);
  cursor:pointer;
  padding:6px 0;
  font-family:var(--font-sans);
}
.page-products__board .accordion__panel{
  font-size:13px;
  line-height:1.65;
  color:var(--color-muted);
  padding:8px 0 4px;
}
.page-products__ver-code--sm{
  margin-top:14px;
  align-self:flex-start;
  font-size:12px;
  background:var(--color-bg);
  color:var(--color-ink);
  border:1px dashed var(--color-border);
}
.page-products__ver-code--sm::after{
  content:"复制版本号";
}

/* 网页版入口 */
.page-products__web{
  display:grid;
  gap:var(--products-gap);
  margin-top:28px;
}
.page-products__web-card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-card);
  line-height:1.75;
}
.page-products__web-card > p{
  margin:0 0 16px;
}
.page-products__web-card--navy{
  background:var(--color-navy);
  color:var(--color-white);
  border-color:transparent;
}
.page-products__web-card--navy h3{
  color:var(--color-white);
  font-size:18px;
  font-weight:800;
  margin:0 0 14px;
}
.page-products__web-card--navy ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-products__web-card--navy li{
  padding-left:16px;
  position:relative;
  font-size:14px;
}
.page-products__web-card--navy li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  background:var(--color-neon);
  border-radius:2px;
}
.page-products__domain{
  font-weight:800;
  color:var(--color-purple);
}
.page-products__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:20px 0 6px;
}
.page-products__stats span{
  background:var(--color-bg);
  border-radius:var(--radius-md);
  padding:12px 8px;
  font-size:16px;
  font-weight:800;
  text-align:center;
  letter-spacing:-.02em;
}
.page-products__stats em{
  font-style:normal;
  font-size:12px;
  font-weight:400;
  color:var(--color-muted);
  display:block;
  margin-top:2px;
}
.page-products__about-link{
  font-size:14px;
  color:var(--color-muted);
  margin-top:16px;
}

/* 数据更新状态条 */
.page-products__update{
  display:grid;
  gap:18px;
  margin-top:26px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:20px;
  align-items:center;
  box-shadow:var(--shadow-card);
}
.page-products__update-figure{
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-md);
}
.page-products__update-figure img{
  display:block;
  width:100%;
  height:auto;
}
.page-products__update-text{
  display:grid;
  gap:10px;
}
.page-products__update-text p{
  font-size:14px;
  line-height:1.7;
  margin:0;
  color:var(--color-ink);
}

/* 旧版入口与 F12 双栏 */
.page-products__duo{
  display:grid;
  gap:var(--products-gap);
  margin-top:28px;
}
.page-products__legacy{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-card);
}
.page-products__legacy-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.page-products__legacy-head h3{
  font-size:18px;
  font-weight:800;
  margin:0;
}
.page-products__legacy p{
  font-size:14px;
  line-height:1.75;
  color:var(--color-ink);
}
.page-products__legacy .figure{
  margin:18px 0 0;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.page-products__legacy .figure img{
  display:block;
  width:100%;
  height:auto;
}

.page-products__f12-card{
  background:var(--color-ink);
  color:var(--color-white);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-card-lg);
}
.page-products__f12-top{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:14px;
}
.page-products__f12-key{
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:800;
  background:var(--color-neon);
  color:var(--color-ink);
  border-radius:var(--radius-sm);
  padding:6px 12px;
  line-height:1;
  box-shadow:var(--shadow-pill);
  flex:0 0 auto;
}
.page-products__f12-top h3{
  margin:0 0 4px;
  font-size:18px;
  font-weight:800;
}
.page-products__f12-top p{
  margin:0;
  font-size:13px;
  color:var(--color-muted);
}
.page-products__f12-card .figure{
  margin:18px 0 14px;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.page-products__f12-card .figure img{
  display:block;
  width:100%;
  height:auto;
}
.page-products__f12-card .accordion__item{
  border-top:1px solid var(--line-on-dark-strong);
  padding-top:12px;
  margin-top:10px;
}
.page-products__f12-card .accordion__btn{
  background:transparent;
  border:0;
  color:var(--color-white);
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:700;
  text-align:left;
  padding:6px 0;
  cursor:pointer;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.page-products__f12-card .accordion__btn::after{
  content:"＋";
  color:var(--color-neon);
  font-weight:400;
}
.page-products__f12-card .accordion__btn[aria-expanded="true"]::after{
  content:"－";
}
.page-products__f12-card .accordion__panel{
  font-size:13px;
  color:rgba(244,246,251,.75);
  line-height:1.7;
  padding:8px 0 2px;
}

/* 收藏夹与数据同步 */
.page-products__sync{
  display:grid;
  gap:var(--products-gap);
  margin-top:28px;
  align-items:center;
}
.page-products__sync-figure{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-card);
}
.page-products__sync-figure img{
  display:block;
  width:100%;
  height:auto;
}
.page-products__sync-steps{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}
.page-products__sync-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.page-products__sync-no{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:800;
  color:var(--color-purple);
  flex:0 0 auto;
}
.page-products__sync-step p{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}
.page-products__sync-note{
  font-size:14px;
  line-height:1.75;
  color:var(--color-muted);
  margin-bottom:18px;
}
.page-products__sync-body .btn{
  margin-bottom:12px;
}
.page-products__sync-privacy{
  font-size:13px;
  color:var(--color-muted);
}

/* 帮助区 */
.page-products__help{
  margin-top:40px;
}
.page-products__help .slicecard{
  display:grid;
  gap:14px;
  padding:26px 22px;
}
.page-products__help-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.page-products__mailcode{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--color-ink);
  background:var(--color-neon);
  border:0;
  border-radius:var(--radius-sm);
  padding:3px 10px;
  cursor:pointer;
  transition:box-shadow .12s var(--ease), transform .12s var(--ease);
}
.page-products__mailcode:hover,
.page-products__mailcode:focus-visible{
  box-shadow:var(--shadow-pill);
  transform:translateY(-1px);
}

@media (min-width:900px){
  .page-products__hero{
    padding:36px 0 64px;
  }
  .page-products__hero-grid{
    grid-template-columns:minmax(0,420px) 1fr;
    gap:48px;
    align-items:center;
  }
  .page-products__hero-figure{
    max-width:420px;
  }
  .page-products__hero-body h1{
    font-size:clamp(30px,4vw,46px);
  }
  .page-products__rack{
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  .page-products__board-body{
    padding:22px 22px 18px;
  }
  .page-products__web{
    grid-template-columns:1.15fr .85fr;
  }
  .page-products__update{
    grid-template-columns:minmax(0,480px) 1fr;
    padding:24px;
  }
  .page-products__duo{
    grid-template-columns:1.05fr .95fr;
    gap:24px;
  }
  .page-products__sync{
    grid-template-columns:1.1fr .9fr;
    gap:36px;
  }
}