/* ============================================================
   Product Orbit Cards V1
   自有产品总览 Hero 右侧产品轨道动效
   ============================================================ */
.product-orbit-shell{
  position:relative;
  width:100%;
  min-width:0;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-grid:has(.product-orbit-shell){
  grid-template-columns:minmax(0,.72fr) minmax(560px,1.28fr);
  gap:30px;
}
.hero-grid:has(.product-orbit-shell) > *{min-width:0}
.product-orbit-stage{
  position:relative;
  width:min(760px,100%);
  aspect-ratio:1.62;
  border-radius:34px;
  overflow:visible;
  isolation:isolate;
}
.product-orbit-stage::before{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:30px;
  background:
    radial-gradient(circle at 70% 20%, rgba(244,241,230,.13), transparent 34%),
    radial-gradient(circle at 46% 62%, rgba(55,224,125,.1), transparent 44%),
    linear-gradient(145deg, rgba(18,48,32,.94), rgba(10,30,21,.98));
  border:1px solid rgba(244,241,230,.13);
  box-shadow:
    inset 0 1px 0 rgba(244,241,230,.08),
    inset 0 -44px 80px rgba(0,0,0,.2),
    0 28px 70px rgba(0,0,0,.24);
}
.product-orbit-stage::after{
  content:"";
  position:absolute;
  inset:7%;
  pointer-events:none;
  border-radius:30px;
  background-image:
    radial-gradient(circle at 68% 24%, rgba(244,241,230,.1), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(244,241,230,.045), transparent 30%),
    radial-gradient(rgba(244,241,230,.18) 1px, transparent 1px);
  background-size:auto, auto, 28px 28px;
  mask-image:radial-gradient(circle at 50% 50%, #000 0 42%, transparent 78%);
  opacity:.38;
}
.orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:60;
  width:260px;
  height:58px;
  min-height:0;
  transform:translate(-50%,-50%);
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:
    0 24px 58px rgba(0,0,0,.18),
    0 0 58px rgba(244,241,230,.14);
  animation:orbitCorePulse 3.8s ease-in-out infinite;
}
.orbit-core::before{
  content:"";
  position:absolute;
  inset:-28px -48px;
  z-index:-1;
  border-radius:999px;
  background:radial-gradient(ellipse at 50% 50%, rgba(244,241,230,.22), transparent 70%);
}
.orbit-core::after{display:none}
.orbit-core img{
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:normal;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.28)) saturate(1.04);
}
.orbit-core b,
.orbit-core span{
  display:none;
}
.orbit-card{
  position:absolute;
  left:50%;
  top:50%;
  z-index:10;
  width:78px;
  border-radius:12px;
  padding:6px;
  color:#0E1813;
  background:#F4F1E6;
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  will-change:transform,opacity,filter;
  transform-origin:center;
}
.orbit-card:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:4px;
}
.orbit-card .orbit-img{
  aspect-ratio:1;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#FAF9F3;
}
.orbit-card img{
  width:84%;
  height:84%;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.orbit-chip{
  position:absolute;
  left:8px;
  top:8px;
  max-width:74%;
  padding:4px 8px;
  border-radius:999px;
  font-size:.62rem;
  line-height:1;
  color:#0E1813;
  background:rgba(244,241,230,.9);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.orbit-name{
  margin-top:7px;
  font-family:var(--fd);
  font-size:.7rem;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.orbit-spec{
  display:none;
  margin-top:3px;
  font-size:.62rem;
  line-height:1.25;
  color:rgba(14,24,19,.62);
}
.orbit-hint{
  position:absolute;
  right:22px;
  bottom:18px;
  z-index:70;
  font-family:var(--fm);
  font-size:.62rem;
  letter-spacing:.1em;
  color:rgba(244,241,230,.52);
}

@media(max-width:900px){
  .hero-grid:has(.product-orbit-shell){grid-template-columns:1fr}
  .product-orbit-shell{min-height:390px}
  .product-orbit-stage{width:min(520px,100%)}
  .orbit-card{width:78px}
  .orbit-core{width:210px;height:48px;min-height:0;padding:0}
}

@media(max-width:700px){
  .product-orbit-shell{display:none}
  .statband{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
  }
  .stat{min-width:0;padding:14px 12px}
  .stat-visual b > span:last-child{display:none}
  .product-orbit-shell{
    min-height:0;
    margin-top:18px;
    justify-content:flex-start;
    overflow:hidden;
  }
  .product-orbit-shell::after{
    content:"";
    position:absolute;
    right:0;
    top:4px;
    bottom:8px;
    z-index:80;
    width:44px;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(14,24,19,0),rgba(14,24,19,.88));
  }
  .product-orbit-stage{
    width:100%;
    max-width:100%;
    min-width:0;
    aspect-ratio:auto;
    display:flex;
    gap:14px;
    padding:4px 0 8px;
    overflow-x:auto;
    border-radius:0;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .product-orbit-stage::-webkit-scrollbar{display:none}
  .product-orbit-stage::before,
  .product-orbit-stage::after,
  .orbit-core,
  .orbit-hint{display:none}
  .orbit-card{
    position:relative;
    left:auto;
    top:auto;
    flex:0 0 103px;
    width:103px;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
    scroll-snap-align:start;
  }
}

@media(prefers-reduced-motion:reduce){
  .orbit-card{transition:none}
  .orbit-core{animation:none}
}

@keyframes orbitCorePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.085)}
}