.page-products{
  --svc-line:rgba(200,255,61,.2);
  --svc-glow:rgba(53,224,161,.12);
  --svc-shadow:0 22px 48px -28px rgba(0,0,0,.94);
  background:
    radial-gradient(92% 46% at 88% -6%, var(--svc-glow), transparent 62%),
    var(--ink);
  color:var(--paper);
  overflow-x:clip;
  font-family:var(--sans);
}

.page-products *{box-sizing:border-box;}

.page-products .crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:clamp(16px,3vw,28px);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--mist);
}
.page-products .crumbs a{
  color:var(--mist);
  text-decoration:none;
  transition:color .16s var(--ease);
}
.page-products .crumbs a:hover,
.page-products .crumbs a:focus-visible{color:var(--fluoro);}

.page-products .tag{
  display:inline-block;
  margin:0 0 12px;
  padding:4px 9px;
  border:1px solid var(--svc-line);
  background:rgba(200,255,61,.07);
  color:var(--fluoro);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.5;
}
.page-products .tag--mist{
  color:var(--mist);
  border-color:var(--line-2);
  background:rgba(143,167,154,.07);
}
.page-products .tag--live{
  color:var(--flag);
  border-color:rgba(255,90,95,.5);
  background:rgba(255,90,95,.1);
  margin:0;
}
.page-products .svc-card:hover .tag--mist{
  color:var(--fluoro);
  border-color:var(--svc-line);
}

/* ---------- 首屏 ---------- */
.page-products .svc-hero{padding:clamp(20px,4vw,44px) 0 clamp(10px,2vw,20px);}
.page-products .svc-hero__grid{display:grid;gap:clamp(24px,3.6vw,44px);}
.page-products .svc-hero h1{
  margin:14px 0 0;
  font-size:clamp(32px,6.4vw,64px);
  font-weight:800;
  line-height:1.07;
  letter-spacing:-.015em;
  max-width:18ch;
}
.page-products .svc-hero .lead{
  margin:18px 0 0;
  max-width:60ch;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.8;
  color:var(--mist);
}
.page-products .svc-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.page-products .svc-index{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line-2);
}
.page-products .svc-index li{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:12px 2px;
  border-bottom:1px solid var(--line-2);
  font-size:14px;
}
.page-products .svc-index__num{
  font-size:12px;
  color:var(--cyan);
  letter-spacing:.1em;
}
.page-products .svc-index a{
  color:var(--paper);
  font-weight:700;
  text-decoration:none;
  letter-spacing:.01em;
  transition:color .16s var(--ease);
}
.page-products .svc-index a:hover,
.page-products .svc-index a:focus-visible{color:var(--fluoro);}
.page-products .svc-index .muted{
  margin-left:auto;
  color:var(--mist);
  font-size:12.5px;
  text-align:right;
  line-height:1.5;
}

/* ---------- 服务拼贴 ---------- */
.page-products .svc-services{padding-block:clamp(32px,5vw,68px);}
.page-products .svc-h2{
  margin:0;
  font-size:clamp(24px,3.6vw,40px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.01em;
}
.page-products .svc-sub{
  margin:12px 0 clamp(22px,3.2vw,38px);
  max-width:62ch;
  font-size:15.5px;
  line-height:1.8;
  color:var(--mist);
}

.page-products .svc-collage{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,2.2vw,26px);
}

.page-products .svc-card{
  position:relative;
  isolation:isolate;
  min-width:0;
  padding:clamp(20px,3.2vw,34px);
  background:var(--board);
  border-top:1px solid var(--svc-line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
  overflow:hidden;
  scroll-margin-top:104px;
}
.page-products .svc-card__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.page-products .svc-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.32;
}
.page-products .svc-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(168deg,rgba(7,19,15,.42) 0%,rgba(7,19,15,.86) 62%,rgba(7,19,15,.96) 100%);
}
.page-products .svc-card__body{position:relative;z-index:1;min-width:0;}
.page-products .svc-card__body h3{
  margin:0 0 14px;
  font-size:clamp(21px,2.8vw,30px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.01em;
}
.page-products .svc-card__body p{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.8;
  color:var(--paper);
  max-width:64ch;
}
.page-products .svc-card__body p:last-of-type{margin-bottom:0;}

.page-products .svc-card--score{background:linear-gradient(152deg,var(--grass) 0%,var(--ink) 82%);}
.page-products .svc-card--schedule{background:var(--board);}
.page-products .svc-card--highlights{background:linear-gradient(118deg,var(--violet) 0%,var(--indigo) 100%);}
.page-products .svc-card--v3{background:linear-gradient(202deg,var(--grass) 0%,#0a1a13 58%,var(--ink) 100%);}
.page-products .svc-card--mobile{background:var(--grass);}
.page-products .svc-card--data{background:linear-gradient(180deg,var(--board) 0%,var(--grass) 100%);}
.page-products .svc-card--steps{background:linear-gradient(138deg,var(--indigo) 0%,var(--violet) 58%,var(--ink) 100%);}
.page-products .svc-card--steps .tag{color:var(--fluoro);}

/* ---------- 比分块 ---------- */
.page-products .svc-stat{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:6px 0 18px;
}
.page-products .svc-stat .metric{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(40px,7vw,64px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--fluoro);
  font-variant-numeric:tabular-nums;
}
.page-products .svc-stat .metric__unit{
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist);
  font-family:var(--mono);
}
.page-products .svc-rows{
  list-style:none;
  margin:20px 0 16px;
  padding:0;
  display:grid;
  gap:6px;
}
.page-products .svc-rows .scoreline{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(7,19,15,.6);
  border-left:3px solid var(--fluoro);
  font-size:13.5px;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.page-products .svc-rows .scoreline:hover{background:rgba(53,224,161,.16);}
.page-products .scoreline__team{color:var(--paper);letter-spacing:.02em;}
.page-products .scoreline__num{
  font-family:var(--mono);
  font-weight:700;
  font-size:15px;
  color:var(--fluoro);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.page-products .svc-fine{
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
  margin:0 0 16px;
}

/* ---------- 通用列表与链接 ---------- */
.page-products .svc-list{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .svc-list li{
  position:relative;
  padding-left:16px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--paper);
}
.page-products .svc-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:2px;
  background:var(--fluoro);
}
.page-products .svc-mini{
  list-style:none;
  counter-reset:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:8px;
}
.page-products .svc-mini li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:baseline;
  padding:11px 12px;
  background:rgba(7,19,15,.55);
  border-left:2px solid var(--cyan);
  font-size:14.5px;
  line-height:1.65;
}
.page-products .svc-mini .mono{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cyan);
}
.page-products .svc-link{
  display:inline-block;
  margin-top:16px;
  color:var(--fluoro);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  border-bottom:1px solid var(--svc-line);
  padding-bottom:3px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.page-products .svc-link:hover,
.page-products .svc-link:focus-visible{color:var(--cyan);border-color:var(--cyan);}

/* ---------- 手机端模块 ---------- */
.page-products .svc-card__inner{display:grid;gap:20px;position:relative;z-index:1;min-width:0;}
.page-products .svc-shot{
  margin:0;
  width:min(100%,220px);
  justify-self:center;
}
.page-products .svc-shot img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  background:var(--ink);
}

/* ---------- 数据模块 ---------- */
.page-products .svc-flowline{
  display:block;
  width:100%;
  height:34px;
  margin:6px 0 20px;
  color:var(--cyan);
  opacity:.85;
}
.page-products .svc-specs{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
}
.page-products .svc-specs li{
  display:grid;
  gap:4px;
  padding-top:10px;
  border-top:1px solid var(--line-2);
  min-width:0;
}
.page-products .svc-specs__k{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(18px,3vw,24px);
  letter-spacing:-.02em;
  color:var(--fluoro);
  font-variant-numeric:tabular-nums;
  word-break:break-word;
}
.page-products .svc-specs__v{
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--mist);
}

/* ---------- 三步 ---------- */
.page-products .svc-steps{
  list-style:none;
  counter-reset:svcstep;
  margin:0 0 24px;
  padding:0;
  display:grid;
  gap:12px;
}
.page-products .svc-steps li{
  counter-increment:svcstep;
  position:relative;
  padding:16px 18px 16px 58px;
  background:rgba(7,19,15,.5);
  border-left:2px solid var(--fluoro);
  min-width:0;
}
.page-products .svc-steps li::before{
  content:counter(svcstep,decimal-leading-zero);
  position:absolute;
  left:16px;
  top:15px;
  font-family:var(--mono);
  font-weight:700;
  font-size:17px;
  letter-spacing:-.02em;
  color:var(--fluoro);
}
.page-products .svc-steps h4{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1.3;
}
.page-products .svc-steps p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--mist);
}
.page-products .svc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- 断点 ---------- */
@media (min-width:640px){
  .page-products .svc-shot{width:min(100%,240px);}
}

@media (min-width:880px){
  .page-products .svc-hero__grid{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
    align-items:end;
  }
  .page-products .svc-collage{grid-template-columns:repeat(12,minmax(0,1fr));}
  .page-products .svc-card--score{grid-column:span 7;}
  .page-products .svc-card--schedule{grid-column:span 5;}
  .page-products .svc-card--highlights{grid-column:span 12;}
  .page-products .svc-card--v3{grid-column:span 6;}
  .page-products .svc-card--mobile{grid-column:span 6;}
  .page-products .svc-card--data{grid-column:span 5;}
  .page-products .svc-card--steps{grid-column:span 7;}

  .page-products .svc-card--highlights{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(20px,3vw,38px);
    align-items:center;
  }
  .page-products .svc-card--highlights .svc-card__media{
    position:relative;
    inset:auto;
    z-index:1;
    min-height:280px;
    border-left:2px solid var(--fluoro);
  }
  .page-products .svc-card--highlights .svc-card__media img{opacity:.68;}
  .page-products .svc-card--highlights .svc-card__media::after{
    background:linear-gradient(90deg,rgba(27,20,64,.85),rgba(46,31,99,.15));
  }

  .page-products .svc-card--mobile .svc-card__inner{
    grid-template-columns:minmax(0,1fr) 200px;
    align-items:start;
    gap:26px;
  }
  .page-products .svc-shot{justify-self:end;width:100%;max-width:200px;}

  .page-products .svc-specs{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .svc-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
}

@media (min-width:1120px){
  .page-products .svc-hero{padding-top:clamp(32px,4vw,52px);}
  .page-products .svc-card{padding:clamp(26px,2.6vw,40px);}
}

@media (prefers-reduced-motion:reduce){
  .page-products .svc-card,
  .page-products .svc-rows .scoreline,
  .page-products .svc-link{transition:none;}
}
</main>