.page-products{
  --pm-card-gap:clamp(1rem,2.5vw,1.5rem);
  background:
    radial-gradient(circle at 8% 12%, rgba(0,179,212,.07), transparent 28%),
    radial-gradient(circle at 92% 28%, rgba(125,77,154,.06), transparent 24%),
    var(--color-bg);
}

/* 面包屑 */
.page-products .breadcrumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-size:.875rem;
  color:var(--color-charcoal);
  padding-top:1rem;
}
.page-products .breadcrumb a{
  color:var(--color-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition-fast);
}
.page-products .breadcrumb a:hover{
  border-color:var(--color-accent);
}

/* Hero */
.page-products .solution-hero{
  padding:clamp(2rem,5vw,4rem) 0 clamp(2.5rem,5vw,4.5rem);
  position:relative;
  overflow:hidden;
}
.page-products .solution-hero::before{
  content:"";
  position:absolute;
  top:-40px;
  right:-80px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:conic-gradient(from 140deg, rgba(0,179,212,.08), rgba(255,138,0,.05), rgba(125,77,154,.08), rgba(0,179,212,.08));
  filter:blur(6px);
  pointer-events:none;
}
.page-products .hero-grid{
  display:grid;
  gap:clamp(1.5rem,3vw,3rem);
  position:relative;
  z-index:1;
}
.page-products .hero-rail{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  border-left:3px solid var(--color-accent);
  padding-left:1rem;
}
.page-products .hero-stats{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
}
.page-products .hero-stat{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.page-products .stat-num{
  font-family:var(--font-head);
  font-size:2.6rem;
  line-height:1;
  color:var(--color-ink);
  letter-spacing:.02em;
}
.page-products .stat-cap{
  font-family:var(--font-body);
  font-size:.75rem;
  color:var(--color-charcoal);
}
.page-products .hero-note{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8125rem;
  color:var(--color-charcoal);
}
.page-products .hero-copy{
  max-width:820px;
}
.page-products .hero-badges{
  display:flex;
  gap:.5rem;
  margin-bottom:1rem;
}
.page-products .hero-copy h1{
  font-family:var(--font-head);
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.04;
  color:var(--color-ink);
  margin:0 0 1rem;
  letter-spacing:.01em;
}
.page-products .hero-lead{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--color-charcoal);
  margin:0 0 1.5rem;
  max-width:66ch;
}
.page-products .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

/* Tabs 介绍与容器 */
.page-products .tabs-section{
  padding:0 0 clamp(2.5rem,6vw,4.5rem);
}
.page-products .tabs-intro{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-bottom:1.25rem;
}
.page-products .tabs-intro p{
  font-size:.9375rem;
  color:var(--color-charcoal);
  margin:0;
}
.page-products .solution-tabs{
  position:relative;
}

/* Radio Hack 基础状态 */
.page-products .tab-radio,
.page-products .pair-radio{
  position:absolute;
  left:-9999px;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}

/* Tab 导航 */
.page-products .tab-nav-wrap{
  border-bottom:1px solid var(--color-border);
  margin-bottom:1.5rem;
}
.page-products .tab-nav{
  display:flex;
  gap:.375rem;
  overflow-x:auto;
  padding:0 0 .75rem;
  scrollbar-width:none;
}
.page-products .tab-nav::-webkit-scrollbar{
  display:none;
}
.page-products .tab-btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding:.625rem 1.25rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:600;
  color:var(--color-charcoal);
  background:var(--color-white);
  border:1px solid var(--color-border);
  cursor:pointer;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
}
.page-products .tab-btn:hover{
  border-color:var(--color-accent);
  color:var(--color-ink);
}
.page-products #ptab1:checked ~ .tab-nav-wrap .tab-btn[for="ptab1"],
.page-products #ptab2:checked ~ .tab-nav-wrap .tab-btn[for="ptab2"],
.page-products #ptab3:checked ~ .tab-nav-wrap .tab-btn[for="ptab3"],
.page-products #ptab4:checked ~ .tab-nav-wrap .tab-btn[for="ptab4"]{
  background:var(--color-ink);
  color:#fff;
  border-color:var(--color-ink);
}

/* Tab 面板显示 */
.page-products .tab-panel{
  display:none;
  animation:pm-fade-in .4s ease both;
}
.page-products #ptab1:checked ~ #ppanel1,
.page-products #ptab2:checked ~ #ppanel2,
.page-products #ptab3:checked ~ #ppanel3,
.page-products #ptab4:checked ~ #ppanel4{
  display:block;
}
@keyframes pm-fade-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* 面板通用布局 */
.page-products .panel-inner{
  display:grid;
  gap:clamp(1.5rem,3vw,2.5rem);
  padding:clamp(1.25rem,2.5vw,2rem);
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-float);
}
.page-products .panel-copy h2,
.page-products .live-copy h2,
.page-products .data-copy h2,
.page-products .dir-copy h2{
  font-family:var(--font-head);
  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.1;
  color:var(--color-ink);
  margin:0 0 .75rem;
}
.page-products .lead{
  font-size:1rem;
  line-height:1.65;
  color:var(--color-charcoal);
  margin:0 0 1.25rem;
}

/* 特性列表 */
.page-products .feature-list,
.page-products .live-features,
.page-products .data-features,
.page-products .dir-features{
  list-style:none;
  margin:0 0 1.5rem;
  padding:0;
  display:grid;
  gap:.75rem;
}
.page-products .feature-list li,
.page-products .live-features li,
.page-products .data-features li,
.page-products .dir-features li{
  position:relative;
  padding-left:1.5rem;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--color-charcoal);
}
.page-products .feature-list li::before,
.page-products .live-features li::before,
.page-products .data-features li::before,
.page-products .dir-features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--color-accent),var(--color-decor));
}
.page-products .feature-list strong,
.page-products .live-features strong,
.page-products .data-features strong,
.page-products .dir-features strong{
  color:var(--color-ink);
  font-weight:600;
}

/* 通用图片行为 */
.page-products img{
  max-width:100%;
  height:auto;
}

/* 面板1：移动端 */
.page-products .phone-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}
.page-products .phone-frame{
  width:min(280px,100%);
  border-radius:2rem;
  padding:.5rem;
  background:var(--color-ink);
  box-shadow:0 18px 40px rgba(27,42,74,.22);
}
.page-products .phone-img{
  width:100%;
  height:auto;
  border-radius:1.5rem;
  display:block;
}
.page-products .fig-caption{
  font-size:.8125rem;
  color:var(--color-charcoal);
  margin:.25rem 0 0;
  text-align:center;
  line-height:1.5;
}
.page-products .meta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top:1.25rem;
}
.page-products .meta-text{
  font-size:.875rem;
  color:var(--color-charcoal);
  font-family:var(--font-body);
}
.page-products .link-more{
  font-size:.875rem;
  font-weight:600;
  color:var(--color-accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition-fast);
}
.page-products .link-more:hover{
  border-color:var(--color-accent);
}

/* 面板2：直播 */
.page-products .signal-stage{
  background:linear-gradient(135deg,rgba(27,42,74,.03),rgba(0,179,212,.05));
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.page-products .signal-meta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--color-ink);
}
.page-products .latency-lines{
  display:grid;
  gap:.75rem;
}
.page-products .latency-row{
  display:grid;
  grid-template-columns:90px 1fr;
  align-items:center;
  gap:.75rem;
}
.page-products .latency-name{
  font-family:var(--font-body);
  font-size:.8125rem;
  color:var(--color-charcoal);
}
.page-products .latency-track{
  height:22px;
  background:rgba(27,42,74,.06);
  border-radius:var(--radius-pill);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.page-products .latency-fill{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  border-radius:var(--radius-pill);
  padding:0 .625rem;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}
.page-products .lf-a{
  width:67%;
  background:linear-gradient(90deg,var(--color-accent),#00d4f5);
}
.page-products .lf-b{
  width:100%;
  background:linear-gradient(90deg,var(--color-warm),#ffb45e);
}
.page-products .lf-c{
  width:82%;
  background:linear-gradient(90deg,var(--color-decor),#ab7bc7);
}
.page-products .signal-img{
  width:100%;
  border-radius:var(--radius-md);
  object-fit:cover;
}

/* 面板3：数据面板 */
.page-products .chart-demo{
  background:var(--color-night);
  border-radius:var(--radius-md);
  padding:1.25rem;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.page-products .chart-demo-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
}
.page-products .chart-demo-title{
  font-family:var(--font-head);
  font-size:1.25rem;
  letter-spacing:.02em;
  color:#fff;
}
.page-products .chart-toggle{
  display:inline-flex;
  gap:.25rem;
  background:rgba(255,255,255,.08);
  padding:.25rem;
  border-radius:var(--radius-pill);
}
.page-products .chart-toggle label{
  padding:.35rem .75rem;
  border-radius:var(--radius-pill);
  font-size:.75rem;
  font-weight:600;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  transition:background var(--transition-fast),color var(--transition-fast);
}
.page-products #pair-one:checked ~ .chart-demo-head .chart-toggle label[for="pair-one"],
.page-products #pair-two:checked ~ .chart-demo-head .chart-toggle label[for="pair-two"]{
  background:#fff;
  color:var(--color-ink);
}
.page-products .chart-svg-wrap{
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-sm);
  padding:.5rem;
}
.page-products .chart-svg{
  width:100%;
  height:auto;
  display:block;
}
.page-products .chart-bars{
  display:none;
}
.page-products #pair-one:checked ~ .chart-svg-wrap .chart-bars-blue{
  display:block;
}
.page-products #pair-two:checked ~ .chart-svg-wrap .chart-bars-red{
  display:block;
}
.page-products .data-img{
  width:100%;
  border-radius:var(--radius-md);
  object-fit:cover;
}

/* 面板4：内容目录 */
.page-products .timeline-visual{
  position:relative;
  padding:1.25rem 0 .5rem;
}
.page-products .timeline-visual::before{
  content:"";
  position:absolute;
  left:.75rem;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(to bottom,var(--color-accent),rgba(0,179,212,.08));
}
.page-products .tl-row{
  display:grid;
  grid-template-columns:3rem 1.5rem 1fr;
  gap:.5rem;
  padding:.75rem .5rem;
  align-items:center;
  border-bottom:1px dashed var(--color-border);
}
.page-products .tl-time{
  font-family:var(--font-mono);
  font-size:.8125rem;
  font-weight:700;
  color:var(--color-ink);
}
.page-products .tl-line{
  display:flex;
  justify-content:center;
}
.page-products .tl-dot{
  width:.75rem;
  height:.75rem;
  border-radius:50%;
  background:var(--color-accent);
  box-shadow:0 0 0 3px rgba(0,179,212,.15);
}
.page-products .tl-dot-live{
  background:var(--color-alert);
  box-shadow:0 0 0 3px rgba(255,49,46,.2);
}
.page-products .tl-match{
  font-size:.9375rem;
  color:var(--color-ink);
  font-weight:500;
}
.page-products .tl-note{
  grid-column:3;
  font-size:.8125rem;
  color:var(--color-charcoal);
}
.page-products .dir-img{
  width:100%;
  border-radius:var(--radius-md);
  object-fit:cover;
}

/* 更新记录带 */
.page-products .update-strip{
  background:var(--color-night);
  color:#fff;
  padding:clamp(1.75rem,4vw,3rem) 0;
}
.page-products .update-strip .section-label{
  color:rgba(255,255,255,.65);
}
.page-products .update-strip-inner{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  align-items:center;
  justify-content:space-between;
}
.page-products .update-strip-inner p{
  margin:.5rem 0 0;
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,.85);
  max-width:70ch;
}
.page-products .update-strip-inner p strong{
  color:#fff;
  font-weight:700;
}
.page-products .update-link-group{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.page-products .update-link{
  color:var(--color-accent);
  text-decoration:none;
  font-size:.9375rem;
  font-weight:600;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition-fast);
}
.page-products .update-link:hover{
  border-color:var(--color-accent);
}

/* 行业方案 */
.page-products .industry-sec{
  padding:clamp(2.5rem,5vw,4.5rem) 0;
  background:linear-gradient(180deg,transparent,rgba(125,77,154,.05));
  border-top:1px solid var(--color-border);
}
.page-products .industry-head-grid{
  display:grid;
  gap:1.25rem;
  margin-bottom:2rem;
}
.page-products .industry-rail{
  border-left:3px solid var(--color-decor);
  padding-left:1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.page-products .rail-note{
  font-size:.875rem;
  color:var(--color-charcoal);
  margin:0;
}
.page-products .industry-title h2{
  font-family:var(--font-head);
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  line-height:1.05;
  color:var(--color-ink);
  margin:0 0 .75rem;
}
.page-products .industry-title p{
  font-size:1rem;
  line-height:1.6;
  color:var(--color-charcoal);
  max-width:70ch;
  margin:0;
}
.page-products .solution-cards{
  display:grid;
  gap:1rem;
  margin-bottom:2rem;
}
.page-products .solution-card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:clamp(1.25rem,2vw,1.75rem);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
}
.page-products .solution-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-float);
}
.page-products .card-index{
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--color-warm);
  font-weight:700;
  letter-spacing:.05em;
}
.page-products .solution-card h3{
  font-family:var(--font-head);
  font-size:1.5rem;
  line-height:1.1;
  color:var(--color-ink);
  margin:0;
}
.page-products .solution-card p{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--color-charcoal);
  margin:0 0 .25rem;
  flex:1;
}
.page-products .industry-visual{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-float);
  background:var(--color-night);
}
.page-products .industry-visual img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* 底部连接区 */
.page-products .connect-bridge{
  padding:clamp(2.5rem,5vw,4rem) 0;
  text-align:center;
}
.page-products .connect-bridge h2{
  font-family:var(--font-head);
  font-size:clamp(1.6rem,3vw,2.5rem);
  line-height:1.1;
  color:var(--color-ink);
  margin:0 0 .75rem;
}
.page-products .connect-bridge p{
  max-width:56ch;
  margin:0 auto 1.5rem;
  color:var(--color-charcoal);
  font-size:1rem;
  line-height:1.6;
}
.page-products .bridge-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}

/* 响应式扩展 */
@media (min-width: 860px){
  .page-products .hero-grid{
    grid-template-columns:3fr 9fr;
    align-items:start;
  }
  .page-products .hero-copy h1{
    font-size:3.4rem;
  }
  .page-products .panel-inner.split-panel{
    grid-template-columns:5fr 7fr;
    align-items:start;
  }
  .page-products .panel-inner.live-panel{
    grid-template-columns:5fr 7fr;
    align-items:start;
  }
  .page-products .panel-inner.data-panel{
    grid-template-columns:4fr 8fr;
    align-items:start;
  }
  .page-products .panel-inner.dir-panel{
    grid-template-columns:5fr 7fr;
    align-items:start;
  }
  .page-products .data-panel .data-img{
    grid-column:1 / -1;
  }
  .page-products .dir-panel .dir-img{
    grid-column:1 / -1;
  }
  .page-products .phone-visual{
    align-items:flex-end;
  }
  .page-products .industry-head-grid{
    grid-template-columns:4fr 8fr;
    align-items:start;
  }
  .page-products .solution-cards{
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
  }
}

@media (max-width: 480px){
  .page-products .latency-row{
    grid-template-columns:70px 1fr;
    gap:.5rem;
  }
  .page-products .tl-row{
    grid-template-columns:2.75rem 1.25rem 1fr;
    column-gap:.35rem;
  }
  .page-products .chart-demo{
    padding:1rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .page-products .tab-panel{
    animation:none;
  }
}