.page-products{
  --pp-cell:rgba(16,38,58,.72);
  --pp-glow:rgba(46,111,78,.30);
  --pp-amber-wash:rgba(240,160,42,.09);
  display:block;
  background:
    radial-gradient(115% 58% at 82% -6%, var(--pp-glow), transparent 62%),
    linear-gradient(180deg, #0A1A2A 0%, #0A1A2A 100%);
  color:var(--bone);
  font-family:var(--f-sans);
  padding-bottom:clamp(48px,8vw,96px);
  overflow-x:hidden;
}
.page-products *{box-sizing:border-box;}

/* ---------- 面包屑 ---------- */
.page-products .crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:clamp(20px,3vw,34px) 0 0;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--stone);
}
.page-products .crumbs__item{color:var(--stone);text-decoration:none;}
.page-products .crumbs__item[href]:hover{color:var(--bone);}
.page-products .crumbs__item[aria-current="page"]{color:var(--silver);}
.page-products .crumbs__sep{color:var(--moss);}

/* ---------- 首屏 ---------- */
.page-products .prod-head{
  padding:clamp(24px,4vw,44px) 0 clamp(28px,4vw,48px);
  border-bottom:1px solid var(--line);
}
.page-products .prod-head__eyebrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--stone);
}
.page-products .prod-head__title{
  margin:18px 0 0;
  max-width:19ch;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(34px,7vw,74px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--bone);
}
.page-products .prod-head__lead{
  margin:22px 0 0;
  max-width:64ch;
  font-family:var(--f-serif);
  font-size:clamp(16px,1.6vw,18px);
  line-height:1.75;
  color:var(--silver);
}
.page-products .prod-pulse{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.page-products .prod-pulse li{
  background:var(--night);
  padding:16px 18px 18px;
}
.page-products .prod-pulse b{
  display:block;
  font-family:var(--f-mono);
  font-weight:700;
  font-size:clamp(28px,4.6vw,44px);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--silver);
}
.page-products .prod-pulse span{
  display:block;
  margin-top:9px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--stone);
}
.page-products .prod-head__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* ---------- 左右分屏 ---------- */
.page-products .prod-split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(26px,4vw,44px);
  margin-top:clamp(32px,4.5vw,56px);
}
@media (min-width:1000px){
  .page-products .prod-split{
    grid-template-columns:minmax(0,1.62fr) minmax(296px,.88fr);
    align-items:start;
  }
}

/* ---------- 区块标题 ---------- */
.page-products .prod-section__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:200;
  font-size:clamp(26px,4.4vw,46px);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--bone);
}
.page-products .prod-section__note{
  margin:12px 0 26px;
  max-width:62ch;
  font-size:14px;
  line-height:1.72;
  color:var(--stone);
}

/* ---------- 技能树 ---------- */
.page-products .prod-tree{
  position:relative;
  min-width:0;
}
@media (min-width:1000px){
  .page-products .prod-tree{padding-left:34px;}
  .page-products .prod-tree::before{
    content:"";
    position:absolute;
    left:11px;
    top:112px;
    bottom:18px;
    width:2px;
    background:linear-gradient(180deg,rgba(46,111,78,.92),rgba(46,111,78,.06));
  }
}

.page-products .fold{
  position:relative;
  border-bottom:1px solid var(--line);
}
@media (min-width:1000px){
  .page-products .fold::before{
    content:"";
    position:absolute;
    left:-28px;
    top:28px;
    width:12px;
    height:12px;
    background:var(--night);
    border:2px solid var(--moss);
    transform:rotate(45deg);
    transition:background 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease);
  }
  .page-products .fold:has(.fold__head[aria-expanded="true"])::before{
    background:var(--pitch);
    border-color:var(--silver);
    box-shadow:0 0 0 4px rgba(46,111,78,.22);
  }
}

.page-products .fold__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 16px;
  width:100%;
  margin:0;
  padding:22px 0 10px;
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.page-products .fold__no{
  font-family:var(--f-mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.2;
  color:var(--clay);
  border:1px solid rgba(180,100,60,.5);
  padding:2px 7px;
}
.page-products .fold__title{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(22px,3.4vw,34px);
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--bone);
}
.page-products .fold__meta{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--stone);
}
.page-products .tick-strip{
  display:inline-flex;
  align-items:flex-end;
  gap:3px;
  height:14px;
}
.page-products .tick-strip i{
  display:block;
  width:3px;
  height:9px;
  background:var(--moss);
}
.page-products .tick-strip--week i{height:11px;}
.page-products .tick-strip--week i:last-child{height:14px;background:var(--pitch);}
.page-products .tick-strip--round i:nth-child(3n){height:5px;}
.page-products .tick-strip--round i:nth-child(4n){height:13px;}
.page-products .fold__arrow{
  margin-left:auto;
  align-self:center;
  width:9px;
  height:9px;
  border-right:2px solid var(--silver);
  border-bottom:2px solid var(--silver);
  transform:rotate(45deg);
  transition:transform 200ms var(--ease);
}
.page-products .fold__head[aria-expanded="true"] .fold__arrow{transform:rotate(-135deg);}
.page-products .fold__summary{
  margin:0 0 8px;
  max-width:62ch;
  font-size:13.5px;
  font-style:italic;
  font-weight:300;
  line-height:1.65;
  color:var(--stone);
}
.page-products .fold__body{
  padding:6px 0 34px;
}
.page-products .fold__lead{
  margin:0 0 18px;
  max-width:66ch;
  font-family:var(--f-serif);
  font-size:16px;
  line-height:1.78;
  color:var(--silver);
}

/* ---------- 字段层 ---------- */
.page-products .field-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.page-products .field-list li{
  background:var(--night);
  padding:14px 16px 16px;
  display:grid;
  gap:6px;
}
.page-products .field-list__k{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--moss);
}
.page-products .field-list__v{
  font-size:14.5px;
  line-height:1.72;
  color:var(--silver);
}

/* ---------- 图 ---------- */
.page-products .pp-figure{
  margin:22px 0 0;
  padding:0;
  background:var(--deep);
  border:2px solid var(--line-strong);
}
.page-products .pp-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}
.page-products .pp-figure__cap{
  padding:10px 14px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  font-style:italic;
  font-weight:300;
  line-height:1.62;
  color:var(--stone);
}

/* ---------- 更新周期行 ---------- */
.page-products .cycle-row{
  list-style:none;
  margin:20px 0 0;
  padding:14px 0 0;
  border-top:1px dashed var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
}
.page-products .cycle-row li{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.page-products .cycle-row__k{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--moss);
}
.page-products .cycle-row__v{
  font-size:13px;
  font-style:italic;
  font-weight:300;
  color:var(--silver);
}

/* ---------- 赔率性质声明 ---------- */
.page-products .pp-notice{
  margin:20px 0 0;
  padding:14px 16px;
  border-left:3px solid var(--amber);
  background:var(--pp-amber-wash);
}
.page-products .pp-notice p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--silver);
}
.page-products .pp-notice strong{
  margin-right:7px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--amber);
}

/* ---------- 浮动签表卡 ---------- */
.page-products .prod-dock{
  position:relative;
  min-width:0;
}
@media (min-width:1000px){
  .page-products .prod-dock{
    position:sticky;
    top:26px;
  }
}
.page-products .dock-card{
  background:var(--deep);
  border:2px solid var(--silver);
  box-shadow:var(--hard);
}
.page-products .dock-card__head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:2px solid var(--line-strong);
}
.page-products .dock-card__no{
  font-family:var(--f-mono);
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--pitch);
  border:1px solid rgba(46,111,78,.65);
  padding:2px 7px;
}
.page-products .dock-card__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:200;
  font-size:clamp(18px,2.4vw,24px);
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--bone);
}
.page-products .dock-card img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  border-bottom:1px solid var(--line-strong);
}
.page-products .dock-card__legend{
  list-style:none;
  margin:0;
  padding:14px 16px 0;
  display:grid;
  gap:9px;
}
.page-products .dock-card__legend li{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--silver);
}
.page-products .dot{
  display:block;
  width:10px;
  height:10px;
  flex:none;
}
.page-products .dot--live{background:var(--pitch);border:1px solid var(--silver);}
.page-products .dot--open{background:transparent;border:1px dashed var(--stone);}
.page-products .dot--line{width:16px;height:2px;background:var(--stone);}
.page-products .dock-card__note{
  margin:14px 16px 0;
  font-size:12.5px;
  font-style:italic;
  font-weight:300;
  line-height:1.65;
  color:var(--stone);
}
.page-products .dock-card__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:16px;
}

/* ---------- 设备适配 ---------- */
.page-products .prod-device{
  margin-top:clamp(46px,6vw,82px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,3vw,40px);
  padding:clamp(22px,3.6vw,42px);
  background:var(--deep);
  border:2px solid var(--line-strong);
}
@media (min-width:880px){
  .page-products .prod-device{
    grid-template-columns:minmax(0,1.42fr) minmax(0,.85fr);
    align-items:start;
  }
}
.page-products .prod-device__intro{
  margin:16px 0 0;
  max-width:60ch;
  font-size:15px;
  line-height:1.76;
  color:var(--silver);
}
.page-products .prod-device__list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.page-products .prod-device__list li{
  background:var(--deep);
  padding:16px 18px;
}
.page-products .prod-device__list h3{
  margin:0 0 7px;
  font-family:var(--f-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--moss);
}
.page-products .prod-device__list p{
  margin:0;
  font-size:14.5px;
  line-height:1.72;
  color:var(--silver);
}
.page-products .prod-device__note{
  margin:20px 0 0;
  font-size:13px;
  font-style:italic;
  font-weight:300;
  line-height:1.68;
  color:var(--stone);
}
.page-products .prod-device__note a{
  color:var(--clay);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-products .prod-device__note a:hover{color:var(--amber);}
.page-products .pp-figure--tall{margin-top:0;}

/* ---------- 三步上手 ---------- */
.page-products .prod-start{
  margin-top:clamp(46px,6vw,82px);
}
.page-products .prod-start__head{
  max-width:64ch;
}
.page-products .prod-steps{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line-strong);
}
.page-products .prod-step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px 20px;
  padding:24px 0 26px;
  border-bottom:1px solid var(--line);
  transition:background 200ms var(--ease),padding-left 200ms var(--ease);
}
.page-products .prod-step__no{
  grid-row:span 3;
  font-family:var(--f-mono);
  font-weight:700;
  font-size:clamp(30px,5vw,48px);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:transparent;
  -webkit-text-stroke:1.5px var(--moss);
  transition:color 200ms var(--ease),-webkit-text-stroke-color 200ms var(--ease);
}
.page-products .prod-step__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(19px,2.6vw,26px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--bone);
}
.page-products .prod-step__desc{
  margin:0;
  max-width:62ch;
  font-size:14.5px;
  line-height:1.74;
  color:var(--silver);
}
.page-products .prod-step__out{
  margin:0;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--moss);
}
.page-products .prod-step:hover,
.page-products .prod-step:focus-within{
  background:rgba(46,111,78,.10);
  padding-left:16px;
}
.page-products .prod-step:hover .prod-step__no,
.page-products .prod-step:focus-within .prod-step__no{
  color:var(--pitch);
  -webkit-text-stroke-color:var(--silver);
}

/* ---------- 相关页面 ---------- */
.page-products .prod-footlinks{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  margin-top:clamp(40px,5vw,68px);
  padding-top:22px;
  border-top:1px solid var(--line);
}
.page-products .prod-footlinks a{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--silver);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color 180ms var(--ease),color 180ms var(--ease);
}
.page-products .prod-footlinks a:hover{
  color:var(--bone);
  border-bottom-color:var(--pitch);
}

/* ---------- 显现 ---------- */
.page-products .reveal{opacity:0;transform:translateY(14px);transition:opacity 320ms var(--ease),transform 320ms var(--ease);}
.page-products .reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .page-products .reveal{opacity:1;transform:none;transition:none;}
  .page-products .fold__arrow,
  .page-products .fold::before,
  .page-products .prod-step,
  .page-products .prod-step__no{transition:none;}
}
<<<END>>>
