/* =========================================================
   核心科技（tech_core）：黑底白字沉浸式长页。类名前缀 tc-
   ========================================================= */

/* ---------- 头部（PC）：本页黑底白字，悬停下拉时恢复白底 ---------- */
@media (min-width: 1200px) {
  body.tc-page .header { background: var(--c-ink); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
  body.tc-page .logo .logo-light { opacity: 1; }
  body.tc-page .logo .logo-dark { opacity: 0; }
  body.tc-page .mall-btn { background: #fff; color: var(--c-text); }
  body.tc-page .header.is-hover { background: #fff; color: var(--c-text); box-shadow: 0 1px 0 var(--c-line); }
  body.tc-page .header.is-hover .logo .logo-light { opacity: 0; }
  body.tc-page .header.is-hover .logo .logo-dark { opacity: 1; }
  body.tc-page .header.is-hover .mall-btn { background: var(--c-primary); color: #fff; }
}

/* ---------- 二级切换条（深色） ---------- */
.tc-subnav { background: var(--c-ink); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tc-subnav .crumb { color: rgba(255, 255, 255, .45); }
.tc-subnav .crumb span:last-child { color: #fff; }
.tc-subnav .subnav-item.on { background: rgba(255, 255, 255, .12); }
.tc-subnav .subnav-item { color: rgba(255, 255, 255, .5); }
.tc-subnav .subnav-item:hover, .tc-subnav .subnav-item.on { color: #fff; }

/* ---------- 通用 ---------- */
.tc { background: var(--c-ink); color: #fff; }
.tc-sec { padding: 1.4rem 0; }
.tc-head { text-align: center; margin-bottom: .6rem; }
.tc-h2 { font-size: .56rem; font-weight: 700; line-height: 1.3; letter-spacing: .01rem; }
.tc-p { margin-top: .24rem; font-size: .2rem; line-height: 1.9; color: rgba(255, 255, 255, .62); }
.tc-tag { display: inline-block; margin-bottom: .22rem; padding: .05rem .22rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: .4rem; font-size: .18rem; line-height: 1.6; color: #fff; }
.tc .media, .tc .media .pic { width: 100%; height: 100%; }
.tc .media .pic img, .tc .media-video { width: 100%; height: 100%; object-fit: cover; }

/* 深色版滑块按钮 / 进度条 */
.tc .slide-btn { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.tc .slide-btn:hover { background: #fff; border-color: #fff; color: #000; }
.tc .slide-progress { background: rgba(255, 255, 255, .18); }
.tc .slide-progress i { width: 0; background: #fff; transition: width .5s var(--ease); }

/* =========================================================
   ① 全屏视频区块：PC 全屏背景 + 文字叠加
   ========================================================= */
.tc-scene { position: relative; height: 100vh; min-height: 6rem; overflow: hidden; background: var(--c-ink); }
.tc-scene--first { height: calc(100vh - var(--header-h) - .81rem); }
.tc-scene-media { position: absolute; inset: 0; }
.tc-scene-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tc-scene--center .tc-scene-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .3) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .35) 100%); }
.tc-scene--left .tc-scene-media::after { background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, 0) 72%); }
.tc-scene-text { position: relative; z-index: 2; height: 100%; display: flex; }
.tc-scene-text .container { width: 14.4rem; }
.tc-scene--center .tc-scene-text { align-items: flex-start; padding-top: 13vh; text-align: center; }
.tc-scene--left .tc-scene-text { align-items: center; }
.tc-scene--left .tc-scene-box { max-width: 9rem; }
.tc-scene-title { font-size: .64rem; font-weight: 700; line-height: 1.28; letter-spacing: .02rem; }
.tc-scene--left .tc-scene-title { font-size: .56rem; }
.tc-scene-desc { margin-top: .28rem; font-size: .2rem; line-height: 1.9; color: rgba(255, 255, 255, .78); }

/* =========================================================
   ② 图解区块
   ========================================================= */
.tc-diagram { padding-top: 1.4rem; }
.tc-diagram:last-child { padding-bottom: 1.4rem; }
.tc-diagram-img .pic img { width: 100%; height: auto; }
.tc-diagram-foot { padding: .7rem 0 1.2rem; text-align: center; }
.tc-steps-title { font-size: .26rem; margin-bottom: .36rem; }
.tc-steps-list { display: flex; justify-content: center; gap: .56rem; counter-reset: none; }
.tc-step { position: relative; flex: 1; max-width: 2.3rem; padding: .26rem .2rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: .16rem; background: rgba(255, 255, 255, .04); text-align: center; }
.tc-step + .tc-step::before { content: ""; position: absolute; left: -.36rem; top: 50%; width: .14rem; height: .14rem; margin-top: -.07rem; border-top: 2px solid rgba(255, 255, 255, .45); border-right: 2px solid rgba(255, 255, 255, .45); transform: rotate(45deg); }
.tc-step-no { display: block; margin-bottom: .06rem; font-size: .16rem; font-weight: 700; color: var(--c-teal); letter-spacing: .02rem; }
.tc-step-txt { display: block; font-size: .18rem; line-height: 1.5; }
.tc-note { margin-top: .36rem; font-size: .14rem; color: rgba(255, 255, 255, .42); }

/* =========================================================
   ③ 视频卡片轮播：PC 右侧露出下一张
   ========================================================= */
.tc-cards { overflow: hidden; }
.tc-cards .swiper { overflow: visible; clip-path: inset(-1rem -100vw -1rem 0); }
.tc-card { width: 68%; border-radius: .24rem; overflow: hidden; background: #141414; opacity: .45; transition: opacity .5s; }
.tc-card.swiper-slide-active { opacity: 1; }
.tc-card-media { position: relative; aspect-ratio: 16 / 9; background: #0a0a0a; }
.tc-card-ring { position: absolute; z-index: 2; left: .34rem; top: .34rem; width: .38rem; height: .38rem; border: .06rem solid var(--c-teal); border-radius: 50%; }
.tc-card-text { padding: .34rem .44rem .4rem; }
.tc-card-title { font-size: .3rem; font-weight: 700; }
.tc-card-desc { margin-top: .1rem; font-size: .18rem; line-height: 1.7; color: rgba(255, 255, 255, .6); }
.tc-ctrl { display: flex; align-items: center; gap: .16rem; margin-top: .5rem; }
.tc-ctrl .tc-progress { flex: 1; margin-left: .3rem; }

/* =========================================================
   ④ 分龄防护
   ========================================================= */
.tc-ages-wrap { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 6.4rem; }
.tc-ages-list { flex: 0 0 6.6rem; display: flex; flex-direction: column; gap: .2rem; }
.tc-age { width: 2.8rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: .42rem; background: rgba(255, 255, 255, .03); overflow: hidden; cursor: pointer; transition: width .55s var(--ease), background .4s, border-color .4s; }
.tc-age:hover { border-color: rgba(255, 255, 255, .4); }
.tc-age.on { width: 6.6rem; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); cursor: default; }
.tc-age-head { display: flex; align-items: center; gap: .16rem; height: .84rem; padding: 0 .3rem; white-space: nowrap; }
.tc-age-dot { flex-shrink: 0; width: .4rem; height: .4rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .22rem; transition: all .4s; }
.tc-age.on .tc-age-dot { border-color: var(--c-teal); color: var(--c-teal); }
.tc-age-num { font-size: .3rem; font-weight: 700; transition: color .4s; }
.tc-age.on .tc-age-num { color: var(--c-teal); }
.tc-age-stage { font-size: .2rem; font-weight: 600; opacity: 0; transform: translateX(-.1rem); transition: opacity .3s, transform .3s; }
.tc-age.on .tc-age-stage { opacity: 1; transform: none; transition-delay: .25s; }
.tc-age-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.tc-age.on .tc-age-body { grid-template-rows: 1fr; }
.tc-age-clip { min-height: 0; overflow: hidden; }
.tc-age-content { width: 6.56rem; padding: 0 .4rem .36rem .86rem; font-size: .17rem; line-height: 1.85; color: rgba(255, 255, 255, .66); opacity: 0; transition: opacity .3s; }
.tc-age.on .tc-age-content { opacity: 1; transition-delay: .2s; }
.tc-age-content p + p { margin-top: .08rem; }
.tc-ages-pics { position: relative; flex: 0 0 6.4rem; aspect-ratio: 1; }
.tc-ages-pic { position: absolute; inset: 0; opacity: 0; transform: translateX(10%); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
.tc-ages-pic.on { opacity: 1; transform: none; }
.tc-ages-pic .pic, .tc-ages-pic img { width: 100%; height: 100%; object-fit: contain; }
.tc-agem-panel { display: none; }

/* =========================================================
   ⑤ 对比区块
   ========================================================= */
.tc-vs-title em { font-style: normal; color: var(--c-teal); margin: 0 .2rem; }
.tc-vs-title .tc-vs-r { color: rgba(255, 255, 255, .5); }
.tc-compare-body { display: flex; align-items: center; gap: .6rem; }
.tc-compare-tabs { flex: 0 0 2.4rem; }
.tc-compare-tab { padding: .2rem 0 .2rem .3rem; border-left: 2px solid rgba(255, 255, 255, .15); font-size: .2rem; line-height: 1.4; color: rgba(255, 255, 255, .42); cursor: pointer; transition: color .3s, font-size .3s, border-color .3s; }
.tc-compare-tab:hover { color: rgba(255, 255, 255, .8); }
.tc-compare-tab.on { border-left-color: var(--c-teal); color: #fff; font-size: .26rem; font-weight: 600; }
.tc-name-m { display: none; }
.tc-compare .swiper { flex: 1; min-width: 0; }
.tc-compare-slide { opacity: .4; transition: opacity .5s; }
.tc-compare-slide.swiper-slide-active { opacity: 1; }
.tc-compare-pair { display: flex; gap: 2%; }
.tc-compare-side { position: relative; flex: 1; min-width: 0; aspect-ratio: 4 / 3; border-radius: .16rem; overflow: hidden; background: rgba(255, 255, 255, .06); }
.tc-compare-label { position: absolute; z-index: 2; right: .16rem; bottom: .16rem; padding: .04rem .16rem; border-radius: .3rem; background: rgba(0, 0, 0, .6); color: #fff; font-size: .14rem; line-height: 1.6; }
.tc-compare-label.is-us { background: var(--c-primary); color: #fff; }

/* =========================================================
   ⑥ 测试数据进度条
   ========================================================= */
.tc-data-body { display: flex; align-items: flex-start; gap: .8rem; }
.tc-data-left { flex: 0 0 4.6rem; }
.tc-data-photo { border-radius: .2rem; overflow: hidden; }
.tc-data-note { margin-top: .28rem; font-size: .16rem; line-height: 1.9; color: rgba(255, 255, 255, .55); }
.tc-data-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .28rem; }
.tc-data-item { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: .2rem; background: rgba(255, 255, 255, .03); }
.tc-data-item.is-hl { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); }
.tc-data-prod { flex: 0 0 1.7rem; text-align: center; }
.tc-data-thumb { width: 1.2rem; height: 1.2rem; margin: 0 auto .12rem; border-radius: .16rem; overflow: hidden; background: #1a1a1a; }
.tc-data-thumb .pic, .tc-data-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-data-prod h4 { font-size: .18rem; font-weight: 600; line-height: 1.4; }
.tc-data-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.tc-bar { display: flex; align-items: center; gap: .2rem; }
.tc-bar-label { flex: 0 0 1.1rem; font-size: .16rem; color: rgba(255, 255, 255, .65); }
.tc-bar-track { position: relative; flex: 1; height: .12rem; border-radius: .12rem; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tc-bar-track[data-reveal] { opacity: 1; transform: none; }
.tc-bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease); }
.tc-bar-track.in .tc-bar-fill { transform: scaleX(1); }
.tc-bar-fill.c1 { background: #fff; }
.tc-bar-fill.c2 { background: rgba(255, 255, 255, .55); }
.tc-bar-fill.c3 { background: var(--c-teal); }
.tc-bar-val { flex: 0 0 .64rem; text-align: right; font-size: .18rem; font-variant-numeric: tabular-nums; }
.tc-bar-val b { font-weight: 700; }
.tc-footnote { margin-top: .44rem; text-align: center; font-size: .14rem; color: rgba(255, 255, 255, .4); }

/* =========================================================
   平板（761~1199px）：手机导航 + PC 内容
   ========================================================= */
@media (max-width: 1199px) {
  .tc-subnav .subnav-item + .subnav-item { border-left-color: rgba(255, 255, 255, .2); }
  .tc-scene--first { height: calc(100vh - var(--header-h) - .82rem); }
  .tc-ages-list { flex-basis: 6rem; }
  .tc-age.on { width: 6rem; }
  .tc-age-content { width: 5.96rem; }
  .tc-ages-pics { flex-basis: 5.2rem; }
  .tc-data-left { flex-basis: 3.8rem; }
  /* 此区间 1rem 固定 62.5px，小字适当放大 */
  .tc-p, .tc-scene-desc { font-size: .22rem; }
  .tc-age-content, .tc-card-desc, .tc-data-note { font-size: .2rem; }
  .tc-bar-label, .tc-note, .tc-footnote, .tc-compare-label { font-size: .18rem; }
}

/* =========================================================
   手机（≤760px）
   ========================================================= */
@media (max-width: 760px) {
  .tc-subnav .subnav-item { background: rgba(255, 255, 255, .06); } /* 盖掉手机端通用的浅灰底，深色条上的文字才看得清 */
  .tc-subnav .subnav-item.on { background: rgba(255, 255, 255, .16); }
  .tc-sec { padding: 1rem 0; }
  .tc-head { margin-bottom: .5rem; }
  .tc-h2 { font-size: .46rem; }
  .tc-p { margin-top: .2rem; font-size: .26rem; line-height: 1.8; }
  .tc-p p, .tc-scene-desc p { display: inline; } /* PC 的分行在手机上连成一段，避免单字落行 */
  .tc-tag { margin-bottom: .2rem; padding: .04rem .24rem; font-size: .22rem; }

  /* 全屏视频区块 → 黑底上文字在上、视频 / 图片在下 */
  .tc-scene, .tc-scene--first { height: auto; min-height: 0; display: flex; flex-direction: column; padding-top: 1rem; }
  .tc-scene-text { order: -1; display: block; height: auto; padding: 0 !important; text-align: center; }
  .tc-scene-text .container { width: auto; }
  .tc-scene--left .tc-scene-box { max-width: none; }
  .tc-scene-media { position: relative; inset: auto; margin-top: .6rem; }
  .tc-scene-media::after { display: none; }
  .tc-scene-media .media, .tc-scene-media .media .pic, .tc-scene-media .media .pic img, .tc-scene-media .media-video { height: auto; }
  .tc-scene .tc-scene-title { font-size: .44rem; letter-spacing: 0; }
  .tc-scene-desc { margin-top: .22rem; font-size: .26rem; line-height: 1.8; color: rgba(255, 255, 255, .6); }

  /* 图解 */
  .tc-diagram { padding-top: 1rem; }
  .tc-diagram:last-child { padding-bottom: 1rem; }
  .tc-diagram-foot { padding: .5rem 0 .9rem; }
  .tc-steps { padding: .5rem .4rem; border-radius: .24rem; background: #151515; }
  .tc-steps-title { font-size: .3rem; margin-bottom: .4rem; }
  .tc-steps-list { flex-direction: column; align-items: center; gap: .6rem; }
  .tc-step { width: 100%; max-width: none; padding: .24rem; border-radius: .16rem; }
  .tc-step + .tc-step::before { left: 50%; top: -.42rem; width: .18rem; height: .18rem; margin: 0 0 0 -.09rem; transform: rotate(135deg); }
  .tc-step-no { font-size: .22rem; }
  .tc-step-txt { font-size: .28rem; }
  .tc-note { font-size: .22rem; }

  /* 卡片轮播：隐藏按钮，进度条占满 */
  .tc-card { width: 88%; border-radius: .24rem; }
  .tc-card-media { aspect-ratio: 3 / 2; }
  .tc-card-ring { left: .26rem; top: .26rem; width: .4rem; height: .4rem; border-width: .07rem; }
  .tc-card-text { padding: .3rem .32rem .36rem; }
  .tc-card-title { font-size: .32rem; }
  .tc-card-desc { font-size: .24rem; }
  .tc-ctrl { margin-top: .4rem; }
  .tc-ctrl .slide-btn { display: none; }
  .tc-ctrl .tc-progress { margin-left: 0; }

  /* 分龄防护：横排 Tab */
  .tc-agem-tabs { display: flex; gap: .16rem; }
  .tc-agem-tab { flex: 1; height: .76rem; border-radius: .76rem; background: #2a2a2a; color: rgba(255, 255, 255, .7); font-size: .28rem; font-weight: 600; transition: background .3s, color .3s; }
  .tc-agem-tab.on { background: var(--c-primary); color: #fff; }
  .tc-agem-panel { margin-top: .5rem; }
  .tc-agem-panel.on { display: block; }
  .tc-agem-panel h3 { font-size: .34rem; color: var(--c-teal); margin-bottom: .16rem; }
  .tc-agem-panel p { font-size: .26rem; line-height: 1.8; color: rgba(255, 255, 255, .66); }
  .tc-agem-panel p + p { margin-top: .1rem; }
  .tc-agem-pic { margin-top: .4rem; border-radius: .24rem; overflow: hidden; background: rgba(255, 255, 255, .06); }

  /* 对比：Tab 横排在上 */
  .tc-vs-title .tc-vs-l { display: block; }
  .tc-vs-title em { margin: 0 .12rem 0 0; }
  .tc-compare-body { display: block; }
  .tc-compare-tabs { display: flex; margin-bottom: .4rem; }
  .tc-compare-tab { flex: 1; padding: .2rem 0; border-left: 0; border-bottom: 2px solid rgba(255, 255, 255, .15); text-align: center; font-size: .26rem; }
  .tc-compare-tab.on { border-bottom-color: var(--c-teal); font-size: .28rem; }
  .tc-name-pc { display: none; }
  .tc-name-m { display: inline; }
  .tc-compare-side { aspect-ratio: 3 / 4; border-radius: .16rem; }
  .tc-compare-label { right: .12rem; bottom: .12rem; padding: .04rem .14rem; font-size: .2rem; }

  /* 测试数据 */
  .tc-data-body { display: block; }
  .tc-data-left { margin-bottom: .5rem; }
  .tc-data-photo { border-radius: .24rem; }
  .tc-data-note { margin-top: .24rem; font-size: .24rem; }
  .tc-data-right { gap: .24rem; }
  .tc-data-item { gap: .3rem; padding: .3rem; border-radius: .24rem; }
  .tc-data-prod { flex-basis: 1.6rem; }
  .tc-data-thumb { width: 1.4rem; height: 1.4rem; border-radius: .16rem; }
  .tc-data-prod h4 { font-size: .22rem; }
  .tc-data-bars { gap: .2rem; }
  .tc-bar { flex-wrap: wrap; gap: .08rem .16rem; }
  .tc-bar-label { flex: 1 0 auto; font-size: .22rem; }
  .tc-bar-val { flex: 0 0 auto; font-size: .24rem; }
  .tc-bar-track { order: 3; flex: 0 0 100%; height: .14rem; background: rgba(255, 255, 255, .14); }
  .tc-footnote { font-size: .2rem; text-align: left; }
}