:root {
  --color-title: #111;
  --color-text: #444;
  --color-muted: #737880;
  --color-border: #d9d9df;
  --color-bg-light: #f7f7f7;
  --color-bg-stage: #f4f7fb;
}

.indexA { padding: clamp(30px, 4.166667vw, 80px) 15px; }

/* ===== 切换按钮 ===== */
.switcher {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0 0 25px 0;
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid #ddd;
}
.switcher button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 3px;
  padding: 12px 20px;
  background: transparent;
  color: var(--color-title);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: color .35s;
  min-height: 44px;
}
.switcher button[aria-pressed="true"] {
  color: #fff;
  background: transparent;
  box-shadow: none;
}
.selection-pill {
  position: absolute;
  z-index: 0;
  left: 0; top: 0;
  background: var(--color-primary);
  border-radius: 3px;
  box-shadow: none;
  transition: transform 550ms cubic-bezier(.16,1,.3,1), width 550ms cubic-bezier(.16,1,.3,1), height 550ms cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

/* ===== 展示舞台 ===== */
.stage {
  min-height: 370px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: relative;
  transition: background 700ms ease;
  padding: clamp(15px, 1.5625vw, 30px) 0;
  border-bottom: 1px solid #e7e7e7;
}
.copy {
  z-index: 1;
}
.number {
  font-size: 12px;
  color: var(--color-primary);
  letter-spacing: 1px;
}
.copy h2 {
  font-size: clamp(24px, 1.88vw, 36px);
  letter-spacing: -0.8px;
  line-height: 1.1;
  font-weight: 600;
  margin: 18px 0;
  color: var(--color-title);
}
.desc {
  font-size: clamp(14px, 0.78vw, 15px);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 370px;
}
.applications {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px;
}
.applications a {
  padding: 8px 12px;
  font-size: clamp(12px, 0.73vw, 14px);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  transition: transform .3s ease, background .3s ease;
  border: 1px solid var(--color-border);
}
.applications a:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* ===== 3D 艺术区域 ===== */
.art {
  min-height: 380px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.art-label {
  position: absolute;
  bottom: 8px;
  font-size: 12px;
  letter-spacing: 1.3px;
  color: var(--color-muted);
  text-transform: uppercase;
}

.solid-scene {
  position: relative;
  width: 280px;
  height: 270px;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(.16,1,.3,1);
}
.solid-scene * {
  position: absolute;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

/* 通用 3D 盒子 */
.box3 {
  --w: 145px; --h: 126px; --d: 115px;
  width: var(--w); height: var(--h);
  left: 65px; top: 78px;
}
.plane {
  border: 1px solid #a9b6c5;
  border-radius: 3px;
  backface-visibility: hidden;
}
.front3 {
  width: var(--w); height: var(--h);
  background: linear-gradient(130deg, #ced8e4, #9baabd);
  transform: translateZ(calc(var(--d)/2));
}
.back3 {
  width: var(--w); height: var(--h);
  background: #bbc6d4;
  transform: rotateY(180deg) translateZ(calc(var(--d)/2));
}
.right3 {
  width: var(--d); height: var(--h);
  left: calc((var(--w) - var(--d))/2);
  background: linear-gradient(115deg, #b3c1d0, #8b9eb3);
  transform: rotateY(90deg) translateZ(calc(var(--w)/2));
}
.left3 {
  width: var(--d); height: var(--h);
  left: calc((var(--w) - var(--d))/2);
  background: #b9c6d5;
  transform: rotateY(-90deg) translateZ(calc(var(--w)/2));
}
.top3 {
  width: var(--w); height: var(--d);
  top: calc((var(--h) - var(--d))/2);
  background: linear-gradient(135deg, #f6f8fb, #d6e0ea);
  transform: rotateX(90deg) translateZ(calc(var(--h)/2));
}
.bottom3 {
  width: var(--w); height: var(--d);
  top: calc((var(--h) - var(--d))/2);
  background: #8d9db0;
  transform: rotateX(-90deg) translateZ(calc(var(--h)/2));
}

/* 相机 */
.camera-front {
  inset: 7px;
  background: linear-gradient(130deg, #51647d, #2d4059);
  border-radius: 8px;
  border: 2px solid #718096;
  transform: translateZ(1px);
}
.barrel {
  width: 94px; height: 94px;
  left: 25px; top: 16px;
  transform: translateZ(4px);
  transform-style: preserve-3d;
}
.glass3 {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 76% 25%, #bed9ec 0%, #739cbc 8%, #3c6087 20%, #1b3554 39%, #102139 64%, #182c45 82%);
  border: 9px solid #263951;
  transform: translateZ(71px);
  box-shadow: inset 0 0 0 2px #8a9db3;
  backface-visibility: hidden;
}
.lens-wall {
  width: 6.3px; height: 70px;
  left: 43.85px; top: 12px;
  background: linear-gradient(to bottom, #56697f 0%, #2b4059 9%, #5c7088 12%, #30445e 16%, #30445e 69%, #60748c 73%, #283c55 77%, #50667f 83%, #20354e 89%);
  backface-visibility: hidden;
}
.vents3 {
  inset: 20px 15px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, #5c6e84 9px 12px, transparent 13px 18px);
  border-radius: 7px;
}
.port3 {
  width: 28px; height: 18px;
  border: 3px solid #78899d;
  border-radius: 4px;
  background: #25364b;
  left: 55px; top: 45px;
  transform: translateZ(1px);
}
.bolt3 {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1e2f44;
  border: 1px solid #8e9daf;
  transform: translateZ(2px);
}
.camera-word {
  left: 11px; top: 8px;
  color: #dbe8f2;
  font-size: 8px;
  letter-spacing: 1px;
  transform: translateZ(3px);
}

/* PCR */
.model-pcr { display: none; }
.pcr-base {
  --w: 185px; --h: 88px; --d: 145px;
  left: 46px; top: 157px;
}
.pcr-display {
  left: 47px; top: 23px;
  width: 92px; height: 39px;
  border: 5px solid #8ea0b3;
  border-radius: 7px;
  background: linear-gradient(135deg, #21394e, #496a85);
  transform: translateZ(2px);
}
.pcr-display::after {
  content: '';
  left: 12px; right: 12px; top: 17px;
  height: 2px;
  background: #85c3d4;
  position: absolute;
  box-shadow: 0 7px 0 #7295ad;
}
.wells3 {
  inset: 14px 17px;
  background: radial-gradient(circle, #30485b 2px, #71899e 3px, transparent 4px) 0 0/12px 12px, #d4dfe8;
  border: 8px solid #a5b5c6;
  border-radius: 6px;
  transform: translateZ(0.8px);
}
.pcr-lid {
  --w: 185px; --h: 22px; --d: 145px;
  left: 46px; top: 135px;
  transform-origin: 50% 22px -72.5px;
  transform: rotateX(68deg);
}
.pcr-lid .bottom3 {
  background: linear-gradient(120deg, #536478, #34465a);
  border: 10px solid #ccd6e2;
  border-radius: 7px;
}
.hinge3 {
  left: 65px; top: 152px;
  width: 145px; height: 12px;
  background: #677c91;
  border-radius: 6px;
  transform: translateZ(-72.5px);
}

/* Chamber */
.model-chamber { display: none; }
.cabinet3 {
  --w: 143px; --h: 220px; --d: 100px;
  left: 72px; top: 26px;
}
.cabinet-panel {
  left: 8px; right: 8px; top: 9px;
  height: 29px;
  background: #2b3c4f;
  border-radius: 3px;
}
.cabinet-panel::after {
  content: '';
  position: absolute;
  left: 37px; top: 7px;
  width: 38px; height: 13px;
  background: #769daf;
  border: 2px solid #9bb4c5;
}
.door3 {
  top: 44px; bottom: 5px;
  width: calc(50% - 5px);
  left: 4px;
  background: linear-gradient(110deg, #eff2f6, #bbc6d3);
  border: 1px solid #9daab9;
  transform: translateZ(3px);
}
.door3.second { left: auto; right: 4px; }
.handle3 {
  top: 17px; bottom: 20px;
  width: 7px; right: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #798da1, #f4f8fc, #90a3b7);
  transform: translateZ(9px);
  box-shadow: 3px 2px 2px rgba(89,112,133,0.27);
}
.second .handle3 { right: auto; left: 6px; }

/* 行业背景 + 3D 姿态 + 模型显隐 */
.art[data-sector="0"] { background: radial-gradient(ellipse at center, #d7e5ff 0%, transparent 68%); }
.art[data-sector="1"] { background: radial-gradient(ellipse at center, #d7ede7, transparent 70%); }
.art[data-sector="2"] { background: radial-gradient(ellipse at center, #edf1f6, transparent 67%); }

.art[data-sector="0"] .solid-scene { transform: rotateX(-17deg) rotateY(-29deg); }
.art[data-sector="1"] .solid-scene { transform: rotateX(-18deg) rotateY(-29deg); }
.art[data-sector="2"] .solid-scene { transform: rotateX(-20deg) rotateY(-35deg); }

.art[data-sector="0"] .model-camera { display: block; }
.art[data-sector="0"] .model-pcr { display: none; }
.art[data-sector="0"] .model-chamber { display: none; }

.art[data-sector="1"] .model-camera { display: none; }
.art[data-sector="1"] .model-pcr { display: block; }
.art[data-sector="1"] .model-chamber { display: none; }

.art[data-sector="2"] .model-camera { display: none; }
.art[data-sector="2"] .model-pcr { display: none; }
.art[data-sector="2"] .model-chamber { display: block; }

/* ===== 问题挑战区域 ===== */
.problem-area {
  margin: 32px 0 0;
}
.problem-area h3 {
  font-size: clamp(17px, 1.15vw, 22px);
  font-weight: 600;
  color: var(--color-title);
  margin: 0 0 20px;
  letter-spacing: -0.5px;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.problem-item {
  border-top: 2px solid var(--color-primary);
  padding-top: 16px;
}
.problem-item h4 {
  font-size: clamp(15px, 0.83vw, 16px);
  line-height: 1.4;
  color: var(--color-title);
  margin: 0 0 10px;
}
.problem-item p {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 14px;
}
.problem-item strong {
  display: block;
  font-size: 12px;
  letter-spacing: 1.1px;
  color: var(--color-primary);
  margin-bottom: 7px;
}

/* ===== 工程方案区域 ===== */
.engineering {
  margin: 28px 0 0;
  padding: 20px 25px;
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.7;
}
.engineering b {
  display: block;
  font-size: clamp(15px, 0.94vw, 18px);
  color: var(--color-title);
  margin-bottom: 5px;
}

/* ===== 面板显隐 ===== */
.panel { display: none; }
.panel.active { display: block; }

/* ===== 入场动画 ===== */
@keyframes pn-copy-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel.active .copy .number { animation: pn-copy-rise 650ms cubic-bezier(.16,1,.3,1) both; }
.panel.active .copy h2 { animation: pn-copy-rise 750ms 50ms cubic-bezier(.16,1,.3,1) both; }
.panel.active .copy .desc { animation: pn-copy-rise 750ms 100ms cubic-bezier(.16,1,.3,1) both; }
.panel.active .copy .applications { animation: pn-copy-rise 750ms 150ms cubic-bezier(.16,1,.3,1) both; }

.end {
  margin: clamp(20px, 2.083333vw, 40px) 0;
  background: var(--color-bg-light);
  color: var(--color-title);
  border-radius: 0;
  padding: 30px;
}
.end h3 {
  font-weight: 600;
  color: var(--color-title);
  font-size: clamp(17px, 1.25vw, 24px);
  margin: 0 0 12px;
}
.end p {
  color: var(--color-text);
  font-size: clamp(14px, 0.83vw, 16px);
  margin-bottom: 20px;
}
.end a {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 13px 24px;
  border: 0;
  font-size: 14px;
}

/* ===== 响应式 ===== */
@media (max-width: 600px) {
  .stage { grid-template-columns: 1fr; }
  .art { min-height: 270px; }
  .desc { max-width: none; }
  .problem-grid { grid-template-columns: 1fr; gap: 18px; }
  .switcher { width: auto; }
  .switcher button { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel.active .copy *, .solid-scene, .selection-pill, .applications a {
    animation: none !important;
    transition: none !important;
  }
}