/* ==========================================================================
   INCOM RC Sports · 官网样式
   苹果极简：浅灰底、大面积留白、无衬线系统字体
   ========================================================================== */

/* ---------- 重置与基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 选中文字用品牌色，细节处保持克制 */
::selection {
  background: var(--brand-soft);
}

/* ---------- 跳转到正文（键盘用户按第一下 Tab 即可跳过顶栏） ---------- */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  /* 平时移出视口，聚焦时才滑进来 */
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: none;
}

.skip-link:hover {
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* ---------- 布局工具 ---------- */
.wrap {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--text {
  max-width: calc(var(--w-text) + 48px);
}

.section {
  padding: clamp(72px, 9vw, 132px) 0;
}

.section--tight {
  padding: clamp(56px, 6vw, 88px) 0;
}

.section--alt {
  background: var(--surface);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-4);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.h1 {
  font-size: clamp(38px, 6vw, 74px);
  line-height: 1.05;
  letter-spacing: -0.032em;
}

.h2 {
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.026em;
}

.h3 {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.4;
}

/* 多行标题自动均衡行长，正文避免最后一行只剩一两个词（不支持时按普通换行渲染） */
.h1,
.h2,
.h3 {
  text-wrap: balance;
}

.lead {
  max-width: var(--w-text);
  color: var(--fg-2);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.62;
  text-wrap: pretty;
}

.body {
  color: var(--fg-2);
  line-height: 1.8;
  text-wrap: pretty;
}

.fine {
  /* 细字长段也要收在正文栏宽内：不限宽时一行会到 130+ 字符，远超 45–75 的舒适区间 */
  max-width: var(--w-text);
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.7;
}

.stack-4 > * + * {
  margin-top: var(--sp-4);
}

.stack-5 > * + * {
  margin-top: var(--sp-5);
}

.stack-6 > * + * {
  margin-top: var(--sp-6);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.center {
  text-align: center;
}

/* 居中区块里的文本列：容器只给 text-align:center 时，680px 的盒子仍会靠左，
   所以两类写法都要把它居中 —— .center 的子孙，以及自己带 .center 的元素。
   .fine 与 .lead 同为限宽细字列，同样要居中（下载页 hero 的说明句曾因此偏左）。 */
.center .lead,
.lead.center,
.center .fine,
.fine.center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* 顶栏配色不在本段定义：详见文件末尾「导航：品牌藏青毛玻璃」那一处权威定义。
   这里原来的浅色毛玻璃白条已被深色顶栏取代，留着只会与后续段落互相覆盖。 */

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  /* 注意：此处尺寸会被文件后段「横版字标」(≈3259) 和 .topbar .brand__mark (≈3540)
     依次覆盖，仅作为兜底，实际顶栏大小以后段为准。 */
  width: 39px;
  height: 39px;
  flex: none;
  transition: transform var(--dur-slow) var(--ease-out);
}

.brand:hover .brand__mark {
  transform: rotate(-8deg) scale(1.06);
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

/* 只作用于文字链接，不能盖掉顶栏下载按钮自身的动效与配色 */
.topbar__nav a:not(.btn) {
  color: var(--fg-2);
  font-size: 13px;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.topbar__nav a:not(.btn):hover {
  color: var(--fg);
  text-decoration: none;
}

.topbar__cta {
  padding: 9px 18px;
  font-size: 14px;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

/* 按下：轻微下沉 + 缩放，阴影收紧 */
.btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--shadow-press);
  transition-duration: 90ms;
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-1);
}

.btn--primary:hover {
  background: var(--brand-ink);
  box-shadow: var(--shadow-2);
}

.btn--ghost {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}

.btn--ghost:hover {
  box-shadow: var(--shadow-2);
  border-color: rgba(10, 10, 10, 0.22);
}

.btn--lg {
  padding: 18px 40px;
  font-size: 19px;
}

.btn--xl {
  padding: 21px 48px;
  font-size: 20px;
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.btn-row--center {
  justify-content: center;
}

/* 文字链接箭头，悬停时轻微右移（用 transform，避免改 gap 触发重排） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.link-arrow svg {
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover {
  text-decoration: none;
}

.link-arrow:hover svg {
  transform: translateX(5px);
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(120px, 15vw, 184px) 0 clamp(56px, 7vw, 88px);
  text-align: center;
}

.hero__title {
  max-width: 15em;
  margin: 0 auto;
}

.hero__lead {
  margin-top: var(--sp-5);
  /* 首屏是居中版式：文本块本身也要居中，否则 680px 的盒子会靠在左边 */
  margin-left: auto;
  margin-right: auto;
}

.hero__actions {
  margin-top: var(--sp-6);
}

.hero__meta {
  margin-top: var(--sp-5);
  /* .fine 有 max-width，居中区块里要显式居中 */
  margin-left: auto;
  margin-right: auto;
}

.hero__shot {
  /* figure 自带左右各 40px 的默认外边距，这里清掉，让模拟窗口占满版心 */
  margin: clamp(48px, 6vw, 80px) 0 0;
}

/* 截图：圆角 + 柔和阴影 + 底部渐隐 */
.shot {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-3);
  border: 1px solid rgba(10, 10, 10, 0.06);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot--fade::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(250, 250, 250, 0), var(--bg));
  pointer-events: none;
}

/* 应用窗口框：顶部一条标题栏 */
.shot--window {
  padding-top: 34px;
  background: var(--ink-2);
}

.shot--window::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 18px 0 0 rgba(255, 255, 255, 0.14), 36px 0 0 rgba(255, 255, 255, 0.1);
}

.shot__caption {
  margin-top: var(--sp-4);
}

/* ---------- 三支柱 ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.pillar {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}

.pillar__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}

.pillar__icon svg {
  width: 20px;
  height: 20px;
}

.pillar p {
  margin-top: var(--sp-3);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.8;
}

/* ---------- 实时排名表（动态演示） ---------- */
/* 钉住演示：左表右文，滚到哪一步就高亮哪一列 */
.live {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.live__pin {
  position: sticky;
  top: 96px; /* 让开固定顶栏 */
}

.live__steps {
  display: grid;
  gap: clamp(56px, 34vh, 300px);
  margin: 0;
  padding: 6vh 0;
  list-style: none;
}

.live__step {
  position: relative;
  padding-left: 46px;
}

.live__no {
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg-3);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.live__step.is-on .live__no {
  background: var(--brand);
  color: #fff;
  transform: scale(1.08);
}

.live__step h3 {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}

.live__step.is-on h3 {
  color: var(--brand);
}

.live__step p {
  margin-top: 12px;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.8;
}

/* 被讲到的那一列：变品牌色 + 底部标线（不改变布局，避免跳动） */
.lb__cols span,
.lb-row__rank,
.lb-row__best,
.lb-row__avg,
.lb-row__gap {
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.lb[data-hl="best"] .lb__cols span:nth-child(4),
.lb[data-hl="best"] .lb-row__best,
.lb[data-hl="stats"] .lb__cols span:nth-child(5),
.lb[data-hl="stats"] .lb__cols span:nth-child(6),
.lb[data-hl="stats"] .lb-row__avg,
.lb[data-hl="stats"] .lb-row__gap,
.lb[data-hl="rank"] .lb__cols span:nth-child(1),
.lb[data-hl="rank"] .lb-row__rank {
  color: var(--brand);
  font-weight: 600;
}

.lb[data-hl="best"] .lb-row__best,
.lb[data-hl="stats"] .lb-row__avg,
.lb[data-hl="stats"] .lb-row__gap,
.lb[data-hl="rank"] .lb-row__rank {
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* 窄屏：不钉住，退回正常堆叠 */
@media (max-width: 900px) {
  .live {
    grid-template-columns: minmax(0, 1fr);
  }

  .live__pin {
    position: static;
  }

  .live__steps {
    gap: 32px;
    padding: 0;
  }
}

/* 减少动效：默认也不钉住；但用 ?motion=1 验收时（html.force-motion）强制打开 */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .live {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(.force-motion) .live__pin {
    position: static;
  }

  html:not(.force-motion) .live__steps {
    gap: 32px;
    padding: 0;
  }
}

.lb {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.lb__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}

.lb__title {
  font-size: 15px;
  font-weight: 600;
}

.lb__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 13px;
}

.lb__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-red);
}

/* 「比赛中」的呼吸圈：只动 transform / opacity，走合成层，不逐帧重绘 */
.lb__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-red);
  animation: pulseRing 2s var(--ease) infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.lb__clock {
  min-width: 5.4em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: #fff;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lb__cols,
.lb-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 64px 96px 88px 72px;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 22px;
}

.lb__cols {
  height: 38px;
  color: var(--fg-3);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.lb__body {
  position: relative;
}

.lb-row {
  position: absolute;
  inset: 0 0 auto 0;
  height: 54px;
  font-size: 15px;
  border-top: 1px solid var(--line);
  /* 名次交换时靠 transform 平滑位移 */
  transition: transform var(--dur) var(--ease), background-color 700ms var(--ease),
    box-shadow 700ms var(--ease);
}

/* 刷新一圈时短暂高亮 */
.lb-row.is-lap {
  background: var(--brand-soft);
}

/* 系统要求减少动态效果时：不做位移，退回正常文档流排布 */
.lb__body--static .lb-row {
  position: static;
}

.lb-row__rank {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.lb-row__driver {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lb-row__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-row__class {
  flex: none;
  color: var(--fg-3);
  font-size: 12px;
}

.lb-row__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.lb-row__best {
  font-weight: 500;
}

.lb-row__gap {
  color: var(--fg-3);
  font-size: 13px;
}

/* 最快圈：金色标记 */
.lb-row.is-best .lb-row__best {
  color: var(--gold-ink);
  font-weight: 600;
}

.lb-row.is-best .lb-row__rank {
  color: var(--gold-ink);
}

.lb__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-3);
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 13px;
}

/* 脚注允许折行：英文这句在 390px 下比表格宽，nowrap 会被 overflow:hidden 切掉 */
.lb__foot > span {
  min-width: 0;
}

.lb__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--fg-2);
}

/* ---------- 转播画面 ---------- */
.bcast {
  /* 面板贴右上角：顶部对齐 + 留白，避免贴边 */
  align-items: start;
  padding-top: 26px;
  position: relative;
  display: grid;
  align-items: center;
  justify-items: end;
  /* 面板固定 380px，窄屏时它会比容器宽：让溢出落在左侧（被裁掉的只是空白），
     否则面板右缘会被 overflow:hidden 切掉 */
  justify-content: end;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding-right: clamp(16px, 4vw, 44px);
  /* 模拟摄像机画面（真实使用时这里就是视频）：夜赛色调 + 放射速度线 + 暗角 */
  position: relative;
  background:
    radial-gradient(75% 95% at 64% 46%, rgba(59, 130, 246, 0.16) 0%, transparent 58%),
    radial-gradient(90% 120% at 45% 50%, #1c2534 0%, #10151d 62%, #090c11 100%);
  box-shadow: var(--shadow-3);
}

.bcast::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.085) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(86deg, rgba(130, 185, 255, 0.1) 0 1px, transparent 1px 40px);
  -webkit-mask-image: radial-gradient(68% 88% at 63% 46%, #000 0%, transparent 76%);
  mask-image: radial-gradient(68% 88% at 63% 46%, #000 0%, transparent 76%);
}

/* 视频区提示文字 */
.bcast__hint {
  position: absolute;
  left: clamp(18px, 4vw, 44px);
  bottom: clamp(18px, 4vw, 40px);
  max-width: 46%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.7;
}

.bcast__hint strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 600;
}

/* 转播图文面板：按真实规格 380×1000，带缩放 */
.panel {
  width: 380px;
  padding: 15px;
  border-radius: 12px;
  transform-origin: right top;
  /* 入场前：右侧 30px、透明（scale 必须一直保留，缩放由媒体查询控制） */
  opacity: 0;
  transform: translateX(30px) scale(var(--bcast-scale));
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  /* 与产品 overlay 实际取值一致 */
  color: #fff;
  font-family: var(--font);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px) saturate(140%);
  -webkit-backdrop-filter: blur(15px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 面板的可见性不能只靠入场动画带出来：禁用 JS 时没有 .is-in，基础状态的 opacity: 0 会让面板永久透明。
   与 .reveal 的约定一致 —— 只在 JS 可用时才隐藏，无脚本时直接给终态 */
html:not(.js) .panel {
  opacity: 1;
  transform: scale(var(--bcast-scale));
}

.panel__box {
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.panel__box:last-child {
  margin-bottom: 0;
}

.panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.panel__row + .panel__row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.panel__k {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
}

.panel__v {
  margin-left: auto;
  color: #ffd700;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.panel__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
}

.panel__split .panel__k {
  display: block;
  margin-bottom: 2px;
}

.panel__split .panel__v {
  display: block;
  margin: 0;
  text-align: left;
}

/* 状态胶囊 */
.panel__status {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff6b35, #f7931e);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 0 18px rgba(255, 107, 53, 0.55);
}

.panel__label {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #cccccc;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.panel__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}

.panel__pos {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 5px;
  background: #ffd700;
  color: #1a1400;
  font-size: 12px;
  font-weight: 800;
}

.panel__who {
  min-width: 0;
}

.panel__name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel__sub {
  color: #9ca3af;
  font-size: 11px;
}

.panel__time {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffd700;
}

.panel__time--fast {
  color: #4ade80;
}

/* 排名表 */
.panel__thead,
.panel__tr {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 40px 66px 46px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  /* 表头与数据行共用同一条左边线，前三名的奖牌色左边框不会顶偏列对齐 */
  border-left: 3px solid transparent;
}

.panel__thead {
  height: 30px;
  color: #cccccc;
  font-size: 11px;
  font-weight: 600;
}

.panel__tr {
  height: 40px;
  font-size: 12px;
  border-left: 3px solid transparent;
}

.panel__tr--1 {
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.2);
}

.panel__tr--2 {
  border-left-color: #c0c0c0;
  background: rgba(192, 192, 192, 0.2);
}

.panel__tr--3 {
  border-left-color: #cd7f32;
  background: rgba(205, 127, 50, 0.2);
}

.panel__tr span:first-child {
  color: rgba(255, 255, 255, 0.7);
}

.panel__tr .n {
  font-variant-numeric: tabular-nums;
}

.panel__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
}

.panel__foot img {
  /* 与线上 overlay 的 .brand-wordmark 一致：15px 高、0.9 透明度 */
  height: 15px;
  width: auto;
  max-width: none;
  opacity: 0.9;
  flex: none;
}

.panel__foot .t {
  margin-left: auto;
  color: #ffd700;
  font-variant-numeric: tabular-nums;
}

/* 两栏说明 */
.spec-2up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

/* ---------- 转播能力清单 ---------- */
.cap {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap li {
  display: flex;
  gap: var(--sp-3);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.75;
}

.cap svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 5px;
  color: var(--brand);
}

.cap strong {
  color: var(--fg);
  font-weight: 600;
}

/* ---------- 功能网格 ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.feat {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}

.feat__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--fg);
}

.feat__icon svg {
  width: 18px;
  height: 18px;
}

.feat h3 {
  font-size: 16px;
  font-weight: 600;
}

.feat p {
  margin-top: var(--sp-2);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.75;
}

/* ---------- 硬件 ---------- */
.hw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.hw__card {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.hw__name {
  font-size: 17px;
  font-weight: 600;
}

.hw__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
  vertical-align: 2px;
}

/* 「这一版尚未开放」状态标（TV 端与转播图文，2026-09-22）
   挂在 eyebrow 旁边或板块首行，与 .hw__tag 同尺寸但用金色语义区分「状态」而非「特性」 */
.soon-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(138, 97, 0, 0.08);
  color: var(--gold-ink);
  font-size: 12px;
  font-weight: 500;
  vertical-align: 2px;
}

.eyebrow + .soon-tag {
  margin-left: 10px;
}

.soon-line {
  margin: 0 0 var(--sp-4);
}

.hw__desc {
  margin-top: var(--sp-3);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.8;
}

.hw__specs {
  margin: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
}

.hw__specs div {
  display: flex;
  gap: var(--sp-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.hw__specs dt {
  /* 7em 让「Where to set it / Default address」这类最长的标签也保持单行，
     整张参数表的行高才会一致 */
  width: 7em;
  flex: none;
  color: var(--fg-3);
}

.hw__specs dd {
  margin: 0;
  color: var(--fg);
}

/* ---------- 适用场景 ---------- */
.scenes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scenes li {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 15px;
}

/* ---------- 细节两图 ---------- */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.duo__fig {
  margin: 0;
}

.duo__shot {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.duo__shot:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.duo__shot img {
  display: block;
  width: 100%;
}

/* 手机截图保持真实比例，居中留白 */
.duo__shot--phone {
  padding: var(--sp-6) 0;
}

.duo__shot--phone img {
  width: auto;
  max-height: 420px;
}

.duo__fig figcaption {
  margin-top: var(--sp-4);
}

.duo__fig strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.duo__fig span {
  display: block;
  margin-top: 4px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- 底部 CTA ---------- */
.cta {
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* ---------- 页脚 ---------- */
.foot {
  padding: var(--sp-8) 0 var(--sp-7);
  background: var(--bg);
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 12.5px;
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: space-between;
  padding-bottom: var(--sp-6);
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
}

.foot__brand img {
  width: 36px;
  height: 36px;
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.foot__nav a {
  color: var(--fg-2);
}

/* 页脚链接是独立可点目标：把热区补到 24px 高，负外边距抵消，排版不动 */
.foot__nav a,
.foot__bottom a {
  display: inline-block;
  padding: 3px 0;
  margin: -3px 0;
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   下载页
   ========================================================================== */

.dl-hero {
  padding: clamp(120px, 14vw, 168px) 0 clamp(48px, 6vw, 72px);
  text-align: center;
}

.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-5);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 13px;
  box-shadow: var(--shadow-1);
}

.dl-badge b {
  color: var(--fg);
  font-weight: 600;
}

.dl-card {
  max-width: 640px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  text-align: center;
}

.dl-file {
  margin-top: var(--sp-5);
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--fg-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
}

.dl-file code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg);
  word-break: break-all;
}

.dl-alts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: center;
  margin-top: var(--sp-5);
  color: var(--fg-2);
  font-size: 14px;
}

.dl-alts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dl-alts svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.dl-note {
  max-width: 640px;
  margin: var(--sp-6) auto 0;
}

/* 步骤时间线 */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 var(--sp-7) 60px;
  border-left: 1px solid var(--line-2);
  margin-left: 17px;
}

.steps li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: -17px;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  font-size: 17px;
  font-weight: 600;
  padding-top: 4px;
}

.steps p {
  margin-top: var(--sp-3);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.8;
}

.steps .tip {
  display: block;
  margin-top: var(--sp-3);
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border-left: 2px solid var(--brand);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.75;
}

.steps code,
.ops code,
.faq code {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
}

/* 基础操作说明 */
.ops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.op {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.op__no {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
}

.op h3 {
  font-size: 17px;
  font-weight: 600;
}

.op ul {
  margin: var(--sp-4) 0 0;
  padding-left: 1.15em;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.85;
}

.op li + li {
  margin-top: 6px;
}

/* 更新日志 */
.log {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line-2);
  margin-left: 7px;
}

.log li {
  position: relative;
  padding: 0 0 var(--sp-7) var(--sp-6);
}

.log li:last-child {
  padding-bottom: 0;
}

.log li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
}

.log h3 {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.log h3 em {
  font-style: normal;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 400;
}

.log ul {
  margin: var(--sp-3) 0 0;
  padding-left: 1.15em;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.85;
}

.log li li + li {
  margin-top: 4px;
}

.log li li::before {
  content: none;
}

/* 常见问题 */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--brand);
}

.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: auto;
  flex: none;
  border-right: 1.8px solid var(--fg-3);
  border-bottom: 1.8px solid var(--fg-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.faq p {
  max-width: var(--w-text);
  padding: 0 0 22px;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.85;
}

/* 支持与联系 */
.support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.support__card {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.support__card h3 {
  font-size: 16px;
  font-weight: 600;
}

.support__card p {
  margin-top: var(--sp-3);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.8;
}

/* ---------- 语言切换 ---------- */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.lang__btn {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.lang__btn:hover {
  color: var(--fg);
}

.lang__btn:active {
  transform: scale(0.96);
}

.lang__btn.is-on {
  background: var(--fg);
  color: #fff;
}

/* 窄屏只显示短标签（与软件内的 中 / 日 / EN 一致） */
.lang__short {
  display: none;
}

/* ---------- 语音播报卡 ---------- */
.voice {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.voice:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.voice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.voice__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}

.voice__icon svg {
  width: 20px;
  height: 20px;
}

.voice__head strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.voice__head .fine {
  display: block;
  margin-top: 2px;
}

.voice__langs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
}

.chip.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 500;
}

.voice__list {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.voice__list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 15px;
}

.voice__list li:last-child {
  border-bottom: 0;
}

.voice__list b {
  margin-left: auto;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* 「需要其他语言？」的定制入口 */
.lang-offer {
  margin-top: var(--sp-6);
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  /* 底色带 6% 品牌色，--fg-2 在这层底上只有 4.18:1，这里用主文字色（14:1） */
  color: var(--fg);
  font-size: 15px;
  line-height: 1.75;
}

.lang-offer a {
  font-weight: 500;
}

/* ---------- 解码器设备卡：厂商兼容性徽标 ----------
   第三方商标放在中性灰底面板里，避免与本站配色相互干扰。
   只做等比缩放与居中，不加滤镜、不改透明度、不重上色——
   徽标必须保持厂商原样。 */
.hw__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
  margin-bottom: var(--sp-5);
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--brand);
}

.hw__art img {
  display: block;
  max-width: 70%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 兜底：若某个品牌拿不到官方标志、保留线描图，仍按原样铺满 */
.hw__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 双解码器：两个计时点 ---------- */
.dual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.dual__fig {
  margin: 0;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--brand);
}

.dual__fig svg {
  display: block;
  width: 100%;
  height: auto;
}

.dual__fig figcaption {
  margin-top: var(--sp-3);
  color: var(--fg-3);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

.dual__body h3 {
  font-size: clamp(18px, 1.6vw, 21px);
}

.dual__body p {
  margin-top: var(--sp-4);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.8;
}

.dual__body .lang-offer {
  margin-top: var(--sp-5);
  font-size: 14.5px;
  /* .dual__body p 的优先级更高，这里要一并覆盖文字色（见 .lang-offer 的对比度说明） */
  color: var(--fg);
}

/* 解码器控制页截图 */
.dual__shot {
  margin: var(--sp-7) 0 0;
}

.dual__shot .shot {
  background: var(--surface-2);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.dual__shot img {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

@media (max-width: 860px) {
  .dual {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

/* ==========================================================================
   模拟软件运行（Hero）：按产品真实的深色界面复刻，数据由脚本逐圈推入
   ========================================================================== */
.sim {
  --app-bg: #0d1526;
  --app-line: rgba(255, 255, 255, 0.08);
  --app-fg: #d7e1f0;
  --app-dim: #8fa2bf;
  --app-brand: #3b82f6;
  --app-ok: #46bf72;
  --app-gold: #ffd166;

  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--app-bg);
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: var(--shadow-3);
  text-align: left;
}

.sim__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--app-line);
}

.sim__dots {
  display: flex;
  gap: 6px;
}

.sim__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.sim__title {
  color: var(--app-fg);
  font-size: 12.5px;
  font-weight: 500;
}

.sim__decs {
  display: flex;
  gap: 14px;
  margin-left: auto;
  color: var(--app-dim);
  font-size: 11.5px;
}

.sim__dec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sim__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--app-ok);
  box-shadow: 0 0 8px rgba(70, 191, 114, 0.85);
  animation: simPulse 2.4s ease-in-out infinite;
}

.sim__strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--app-line);
  color: var(--app-dim);
  font-size: 12px;
}

.sim__mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(59, 130, 246, 0.16);
  color: #8ab8ff;
  font-size: 11.5px;
  white-space: nowrap;
}

.sim__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--app-brand);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  animation: simPulse 2.4s ease-in-out infinite;
}

.sim__clock {
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 12.5px;
}

.sim__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.sim__stat b {
  color: #fff;
  font-size: 13px;
}

.sim__voice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.sim__voice b {
  color: var(--app-gold);
  font-size: 13px;
}

.sim__wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.sim__wave span {
  width: 2px;
  border-radius: 1px;
  background: var(--app-brand);
  animation: simWave 1s ease-in-out infinite;
}

.sim__wave span:nth-child(1) {
  height: 6px;
}

.sim__wave span:nth-child(2) {
  height: 12px;
  animation-delay: 0.15s;
}

.sim__wave span:nth-child(3) {
  height: 8px;
  animation-delay: 0.3s;
}

@keyframes simWave {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes simPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* 表格：12 列，与产品 11 列实时统计一致 */
.sim__head,
.sim-row {
  display: grid;
  /* 第 11 列（Consistency / 稳定性）需要 68px，留 72px 避免英文表头被裁；
     第 4 列（Lap Time）要同时放下圈速与「▲/▼ 与个人平均的差」两段文字，82px 才不被截成「▼0…」 */
  grid-template-columns: 42px minmax(96px, 1fr) 46px 82px 76px 74px 60px 64px 64px 72px 72px 68px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
}

.sim__head {
  height: 30px;
  border-bottom: 1px solid var(--app-line);
  color: var(--app-dim);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.sim__body {
  position: relative;
}

.sim-row {
  position: absolute;
  inset: 0 0 auto 0;
  height: 38px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--app-fg);
  font-size: 12px;
  /* 名次交换靠 transform 平滑位移 */
  transition: transform 380ms var(--ease), background-color 700ms var(--ease);
}

.sim-row.is-lap {
  background: rgba(59, 130, 246, 0.14);
}

.sim-row.is-best .sim-c--best {
  color: var(--app-gold);
  font-weight: 600;
}

/* 系统要求减少动态效果时退回正常文档流，不做位移 */
.sim__body--static .sim-row {
  position: static;
}

.sim-c {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-c--rank {
  color: var(--app-dim);
}

.sim-c--name {
  color: #fff;
  font-weight: 500;
}

.sim-c--class {
  color: var(--app-dim);
  font-size: 11px;
}

@media (max-width: 1100px) {
  .sim__head,
  .sim-row {
    grid-template-columns: 38px minmax(80px, 1fr) 42px 78px 70px 68px 56px 60px 64px;
  }

  .sim__head span:nth-child(9),
  .sim__head span:nth-child(10),
  .sim__head span:nth-child(11),
  .sim-row .sim-c:nth-child(9),
  .sim-row .sim-c:nth-child(10),
  .sim-row .sim-c:nth-child(11) {
    display: none;
  }
}

@media (max-width: 700px) {
  .sim__head,
  .sim-row {
    grid-template-columns: 28px minmax(52px, 1fr) 34px 78px 58px 56px;
  }

  .sim__head span:nth-child(5),
  .sim__head span:nth-child(7),
  .sim__head span:nth-child(8),
  .sim-row .sim-c:nth-child(5),
  .sim-row .sim-c:nth-child(7),
  .sim-row .sim-c:nth-child(8) {
    display: none;
  }

  .sim__strip {
    gap: 10px;
    padding: 9px 12px;
  }

  .sim__stat,
  .sim__voice span:not(.sim__wave) {
    display: none;
  }

  .sim__voice {
    gap: 6px;
  }

  /* 标题栏只留三个点与两个状态灯，否则放不下 */
  .sim__dec {
    gap: 0;
    font-size: 0;
  }

  .sim__title {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- 电视端应用（16:9 电视框 + 大字号排行榜） ---------- */
.tv {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  margin-top: var(--sp-7);
}

.tv__frame {
  position: relative;
  margin: 0;
  padding: 14px 14px 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #16181d, #0b0c0f);
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tv__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  /* 与真实电视端页面一致的深色全屏 */
  background: #0a0a0a;
  color: #e8edf5;
}

/* 屏幕反光 */
.tv__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 44%);
}

.tv__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #93a1b5;
  font-size: 12px;
}

.tv__name {
  color: #dfe7f3;
  font-weight: 500;
}

.tv__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.tv__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #46bf72;
  animation: simPulse 2.4s ease-in-out infinite;
}

.tv__clock {
  padding: 2px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
}

.tv__head,
.tv-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 48px 74px 74px 74px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  /* 表格行用紧凑行高（默认 1.7 是正文口径，会让每行比行高还高，窄屏被裁掉一点） */
  line-height: 1.4;
}

.tv__head {
  height: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #7c8899;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.tv__body {
  flex: 1;
  min-height: 0;
}

.tv-row {
  height: calc(100% / 7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  color: #dfe7f3;
  font-size: 15px;
}

.tv-row b {
  color: #93a1b5;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tv-row.is-first {
  background: rgba(255, 209, 102, 0.07);
}

.tv-row.is-first b {
  color: #ffd166;
}

.tv-row__name {
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-row .mono {
  color: #c7d3e4;
}

.tv__stand {
  display: block;
  width: 26%;
  height: 12px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #1b1e24, #0b0c0f);
}

/* 电视栏的正文：与「双解码器」栏（.dual__body）用同一套字号、行高、颜色与段间距，
   否则同一页里的两栏文字不一致（改前这里没有任何段落样式：字号偏大、颜色偏黑、段间距为 0） */
.tv__body-text h3 {
  font-size: clamp(18px, 1.6vw, 21px);
}

.tv__body-text p:not(.lang-offer) {
  margin-top: var(--sp-4);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .tv {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .tv__head,
  .tv-row {
    grid-template-columns: 34px minmax(0, 1fr) 40px 62px;
    font-size: 13px;
  }

  .tv__head span:nth-child(5),
  .tv__head span:nth-child(6),
  .tv-row span:nth-child(5),
  .tv-row span:nth-child(6) {
    display: none;
  }
}

/* ---------- 支持平台一行（下载位置旁，说明手机/电视怎么办） ---------- */
.plats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.plats li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
}

.plats svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--brand);
}

/* ---------- 交互增强：指针跟随高光 / 行悬停 / 链接下划线滑入 ---------- */
.pillar,
.feat,
.hw__card,
.op,
.support__card {
  position: relative;
}

.pillar::after,
.feat::after,
.hw__card::after,
.op::after,
.support__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(18, 19, 26, 0.06), transparent 62%);
}

.pillar:hover::after,
.feat:hover::after,
.hw__card:hover::after,
.op:hover::after,
.support__card:hover::after {
  opacity: 1;
}

/* 表格行悬停：与软件里一样，指到哪一行就亮哪一行 */
.lb-row:hover {
  background: var(--brand-soft);
}

.sim-row:hover {
  background: rgba(59, 130, 246, 0.1);
}

.tv-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* 正文里的链接：下划线从左侧滑入，而不是直接出现 */
main p a,
main li a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease);
}

main p a:hover,
main li a:hover {
  background-size: 100% 1px;
}

/* 图标微动与标签卡轻微抬起 */
.btn__icon {
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__icon {
  transform: translateX(2px);
}

.scenes li {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.scenes li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  border-color: var(--line-2);
}

/* ---------- 过线闪烁：颜色闪烁（任何模式都可见）+ 扫光（跟随动效设置） ---------- */
.sim-row {
  overflow: hidden;
}

.sim-row.is-lap {
  background: rgba(59, 130, 246, 0.24);
}

.sim-row.is-lap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 45%, transparent);
  animation: crossSweep 620ms var(--ease) forwards;
}

@keyframes crossSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.sim-c--lap b { font-weight: 500; }
.sim-row.is-lap .sim-c--lap b { color: #fff; }

.sim-delta {
  margin-left: 6px;
  font-size: 9.5px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sim-delta.is-fast { color: #4ade80; }
.sim-delta.is-slow { color: #ff9090; }

.tv-row.is-lap { background: rgba(255, 255, 255, 0.08); }


/* 转播式入场：7 秒一轮循环 —— 面板滑入 → 排行榜逐行落下 → 停留 → 再来一遍
   错峰写进关键帧（animation-delay 只对第一轮有效，之后会变成一起落） */
.is-in .panel {
  animation: panelInLoop 7000ms var(--ease-out) infinite;
}

@keyframes panelInLoop {
  0% {
    opacity: 0;
    transform: translateX(30px) scale(var(--bcast-scale));
  }
  9.2%,
  100% {
    opacity: 1;
    transform: translateX(0) scale(var(--bcast-scale));
  }
}

.is-in .panel__tr {
  animation-duration: 7000ms;
  animation-timing-function: var(--ease-out);
  animation-iteration-count: infinite;
}

@keyframes rowDrop0 {
  0%, 9.1% {
    opacity: 0;
    transform: translateY(-7px);
  }
  16.0%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rowDrop1 {
  0%, 10.4% {
    opacity: 0;
    transform: translateY(-7px);
  }
  17.3%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rowDrop2 {
  0%, 11.7% {
    opacity: 0;
    transform: translateY(-7px);
  }
  18.6%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rowDrop3 {
  0%, 13.0% {
    opacity: 0;
    transform: translateY(-7px);
  }
  19.9%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rowDrop4 {
  0%, 14.3% {
    opacity: 0;
    transform: translateY(-7px);
  }
  21.1%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rowDrop5 {
  0%, 15.6% {
    opacity: 0;
    transform: translateY(-7px);
  }
  22.4%, 100% {
    opacity: 1;
    transform: none;
  }
}

.is-in .panel__tr:nth-child(2) {
  animation-name: rowDrop0;
}

.is-in .panel__tr:nth-child(3) {
  animation-name: rowDrop1;
}

.is-in .panel__tr:nth-child(4) {
  animation-name: rowDrop2;
}

.is-in .panel__tr:nth-child(5) {
  animation-name: rowDrop3;
}

.is-in .panel__tr:nth-child(6) {
  animation-name: rowDrop4;
}

.is-in .panel__tr:nth-child(7) {
  animation-name: rowDrop5;
}

/* ---------- 比赛摘要条：五张小卡，用 1px 缝隙做分隔线 ---------- */
.sim__sum {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sim__card {
  padding: 12px 14px 13px;
  background: var(--app-bg);
}

.sim__card > span {
  display: block;
  color: var(--app-dim);
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.sim__card-v {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim__card i {
  display: block;
  margin-top: 2px;
  color: var(--app-dim);
  font-size: 10.5px;
  font-style: normal;
}

/* ---------- 圈速历史：每车一行，一格一圈 ---------- */
.sim__hist {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sim__hist-title {
  display: block;
  margin-bottom: 9px;
  color: var(--app-dim);
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.sim__hist-body {
  display: grid;
  gap: 5px;
}

.hist-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hist-row b {
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-cells {
  display: flex;
  gap: 3px;
}

.hist-cells i {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.13);
  transition: background-color 240ms var(--ease);
}

.hist-cells i.is-fast {
  background: #4ade80;
}

.hist-cells i.is-mid {
  background: rgba(255, 255, 255, 0.3);
}

.hist-cells i.is-slow {
  background: #ff9090;
}

/* 窄屏：摘要条换行，历史格子减少（由 JS 控制数量） */
@media (max-width: 900px) {
  .sim__sum {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .sim__sum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hist-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }
}

/* ---------- 开场倒数：盖在模拟窗口上，播完淡出 ---------- */
.sim__count {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  pointer-events: none;
  background: rgba(13, 21, 38, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sim__count b {
  color: #fff;
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sim__count span {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.sim__count.is-go b {
  color: #46bf72;
}

/* 常驻动画（呼吸点、声波、转播面板的 7 秒循环）离开视口即暂停：
   访客滚到别处时不再空转合成器，滚回来自然接着播。
   暂停的是 animation，不影响表格照常刷新数据。 */
.is-off,
.is-off *,
.is-off *::before,
.is-off *::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   滚动进场与动效降级
   ========================================================================== */

/* 仅在 JS 可用时启用隐藏，保证无脚本时内容默认可见 */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}

/* 由 Anime.js 交错播放的元素：禁用 CSS 过渡，避免双重动画 */
.js .reveal.is-anime {
  transition: none;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

/* 网格错峰进场 */
.grid-3 > .reveal:nth-child(2),
.pillars > .reveal:nth-child(2),
.hw > .reveal:nth-child(2),
.ops > .reveal:nth-child(2),
.support > .reveal:nth-child(2) {
  transition-delay: 80ms;
}

.grid-3 > .reveal:nth-child(3),
.pillars > .reveal:nth-child(3) {
  transition-delay: 160ms;
}

.grid-3 > .reveal:nth-child(4) {
  transition-delay: 60ms;
}

.grid-3 > .reveal:nth-child(5) {
  transition-delay: 140ms;
}

.grid-3 > .reveal:nth-child(6) {
  transition-delay: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html:not(.force-motion) .js .reveal {
    opacity: 1;
    transform: none;
  }

  /* 转播面板同理，而且更隐蔽：它的可见性原本完全靠入场动画带出来，
     动效停用时动画会在 0.001ms 内跑完并退回基础状态 opacity: 0，
     结果「减少动效」的用户看到的是一个空框（2026-09 实测复现）。
     这里直接给终态；注意 scale 必须保留，缩放由 --bcast-scale 控制。 */
  html:not(.force-motion) .panel {
    opacity: 1;
    transform: scale(var(--bcast-scale));
  }

  html:not(.force-motion) .btn:hover,
  html:not(.force-motion) .pillar:hover,
  html:not(.force-motion) .feat:hover,
  html:not(.force-motion) .duo__shot:hover {
    transform: none;
  }
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --bcast-scale: 0.6;
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* 语言切换器已有四种语言，导航链接提前收起来，避免换行与挤压 */
@media (max-width: 1180px) {
  .topbar__nav a:not(.topbar__cta) {
    display: none;
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 900px) {

  .grid-3,
  .hw,
  .ops,
  .support,
  .spec-2up,
  .duo {
    grid-template-columns: 1fr;
  }

  .lb__cols,
  .lb-row {
    grid-template-columns: 40px minmax(0, 1fr) 62px 84px;
    padding: 0 16px;
  }

  /* 窄屏隐藏「平均」「差距」两列 */
  .lb__cols span:nth-child(5),
  .lb__cols span:nth-child(6),
  .lb-row__avg,
  .lb-row__gap {
    display: none;
  }

  .bcast {
    aspect-ratio: 4 / 3;
    padding-right: 16px;
  }

  .bcast__hint {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --bcast-scale: 0.52;
  }

  /* 最窄屏用竖向比例：转播面板本身竖长，横框装不下会裁掉底部几行 */
  .bcast {
    aspect-ratio: 3 / 4;
  }

  /* 只留标志与短标签，把顶栏宽度让给语言切换器 */
  .brand span {
    display: none;
  }

  .lang__full {
    display: none;
  }

  .lang__short {
    display: inline;
  }

  /* 长语言（法语）的按钮文案在窄屏允许折行，否则会被裁掉 */
  .btn {
    white-space: normal;
  }

  /* 语言切换器与下载按钮在窄屏要放得下：收紧间距与内边距 */
  .topbar__nav {
    gap: 14px;
  }

  .lang__btn {
    padding: 5px 8px;
  }

  .voice__langs {
    margin-left: 0;
    width: 100%;
  }

  .wrap {
    padding: 0 18px;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .btn--lg,
  .btn--xl {
    padding: 16px 28px;
    font-size: 17px;
  }

  .lb__cols,
  .lb-row {
    grid-template-columns: 32px minmax(0, 1fr) 56px 78px;
    gap: 8px;
    padding: 0 12px;
  }

  /* 窄屏让出组别名，把宽度留给车手姓名 */
  .lb-row__class {
    display: none;
  }

  .lb__head {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .steps li {
    padding-left: 46px;
  }

  /* 首屏模拟窗口：390px 下六列会把车手名截断，
     去掉「圈数」列把宽度让给车手名（与上面几档「逐级减列」的做法一致）；
     圈速列仍要同时放下圈速与 ▲/▼ 差值，保持 78px */
  .sim__head,
  .sim-row {
    grid-template-columns: 28px minmax(52px, 1fr) 78px 58px 56px;
  }

  .sim__head span:nth-child(3),
  .sim-row .sim-c:nth-child(3) {
    display: none;
  }

  /* 电视端：16:9 在手机上只剩 190px 高，7 行会挤成重叠，与转播画面一样改 4:3 */
  .tv__screen {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   触摸设备：没有真正的 hover，悬停位移会「粘」在卡片上，这里统一取消
   （配色与阴影变化保留，它们不会留下错位感）
   ========================================================================== */
@media (hover: none) {
  .btn:hover,
  .brand:hover .brand__mark,
  .link-arrow:hover svg,
  .pillar:hover,
  .feat:hover,
  .voice:hover,
  .duo__shot:hover,
  .scenes li:hover {
    transform: none;
  }
}

   INCOM RC Sports 品牌（2026-09-18 初版 / 2026-09-22 换盈控色系）
   --------------------------------------------------------------------------
   范围：只换标志与配色 —— 字号、字重、行高、字距、间距、栅格、圆角、阴影一律未动。
   · 顶栏保持深色：白色元素（徽章白圈、白底按钮）在深底上成立
   · 主按钮：深藏青 #182850（浅色页）/ 白底藏青字（深色容器）；旧品牌黄已退场
   · 品牌所属：盈控体育（INCOM Sports），页脚版权同步
   ========================================================================== */

/* ---------- 顶栏：深色 ---------- */
/* 顶栏底色不在本段定义：统一由文件末尾「导航：品牌藏青毛玻璃」给出。
   这里只保留深底上各元素的配色（品牌字标、导航文字、语言切换、下载按钮）。 */

.topbar .brand {
  color: #fff;
}

/* 横版字标：宽度按原始比例，且必须覆盖全局 img{max-width:100%}，
   否则窄屏上宽度被容器卡住、高度固定后会被压扁变形 */
.brand__mark {
  width: auto;
  height: 34px;
  max-width: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* 顶栏品牌题名：徽章右侧（2026-09-22 定案文案） */
.brand__name {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .brand__name { font-size: 15px; }
}
@media (max-width: 640px) {
  .brand__name { display: none; } /* 窄屏让位给导航与语言切换 */
}

.brand:hover .brand__mark {
  transform: none;
  opacity: 0.86;
}


.topbar__nav a:not(.btn) {
  color: rgba(255, 255, 255, 0.68);
}

.topbar__nav a:not(.btn):hover {
  color: #fff;
}

.topbar .lang {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.topbar .lang__btn {
  color: rgba(255, 255, 255, 0.72);
}

.topbar .lang__btn.is-on {
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-ink);
}

/* 顶栏下载按钮：白底藏青字（深色顶栏上的高对比，呼应徽章白圈） */
.topbar .btn--primary {
  background: var(--brand-accent);
  color: var(--on-accent);
  border-color: transparent;
}

.topbar .btn--primary:hover {
  background: #e8edf7;
}

/* 窄屏分档降高，让字标放得下而不是被压扁。
   必须带 .topbar 前缀，否则权重低于 3540 行 .topbar .brand__mark、永远不生效（历史遗留 bug，2026-09-24 顺手修复）。 */
@media (max-width: 900px) {
  .topbar .brand__mark {
    height: 36px;
  }
}

@media (max-width: 700px) {
  .topbar .brand__mark {
    height: 30px;
  }
}

@media (max-width: 560px) {
  .topbar .brand__mark {
    height: 26px;
  }

  .topbar__nav {
    gap: 10px;
  }

  .topbar__cta {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .lang__btn {
    padding: 5px 8px;
  }
}

@media (max-width: 380px) {
  .topbar .brand__mark {
    height: 24px;
  }

  .topbar__cta {
    padding: 6px 10px;
    font-size: 12px;
  }

  .lang__btn {
    padding: 4px 6px;
  }
}

/* ---------- 底部 CTA：深色容器，白色主按钮呼应徽章白圈（两页一致） ---------- */
.cta {
  background: var(--brand);
  border-top: 0;
}

.cta .h2 {
  color: #fff;
}

.cta .lead {
  color: rgba(255, 255, 255, 0.72);
}

.cta .btn--primary {
  background: var(--brand-accent);
  color: var(--on-accent);
  border-color: transparent;
}

.cta .btn--primary:hover {
  background: #e8edf7;
}

.cta .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
}

.cta .btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.cta .link-arrow {
  color: rgba(255, 255, 255, 0.82);
}

.cta .link-arrow:hover {
  color: #fff;
}

/* ---------- 页脚：盈控体育只作为技术支持出现 ---------- */
.foot__brand img {
  width: auto;
  height: 26px;
  max-width: none;
}

/* 白色字标在浅色页脚上不可见，垫一个深色小块 */
.foot__brand .logo-chip {
  background: var(--brand);
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.foot__brand .logo-chip img {
  height: 20px;
  display: block;
}

/* 技术支持行：文字 + 圆形标志（标志文件 logo-mark.png） */
.support-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  white-space: nowrap;
}

.support-line img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
}

.support-line b {
  color: var(--fg-2);
  font-weight: 600;
}

/* ---------- 无障碍：深底上的焦点环 ---------- */
/* 全局 :focus-visible 用 var(--brand)，在深色顶栏/深色容器上等于看不见 */
.topbar :focus-visible,
.sim :focus-visible,
.bcast :focus-visible,
.tv__screen :focus-visible {
  outline-color: #fff;
  outline-offset: 2px;
}

/* 正文内链接：链接色改近黑后与正文同色，需要下划线区分 */
p a:not(.btn),
li a:not(.btn),
.lead a:not(.btn),
.fine a:not(.btn),
details a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(18, 19, 26, 0.32);
}

p a:not(.btn):hover,
li a:not(.btn):hover,
.lead a:not(.btn):hover,
.fine a:not(.btn):hover,
details a:not(.btn):hover {
  text-decoration-color: currentColor;
}
/* ==========================================================================
   APPLE STYLE PASS（2026-09-22）— 全站 Apple 设计风格
   原则：超大居中标题 / 克制配色（白·浅灰·黑 + 藏青点缀）/ 胶囊按钮 /
        通透留白 / 毛玻璃导航 / 真黑 CTA。
   本段为覆盖层：放在文件末尾，前面所有段落保持不动，便于回退与迭代。
   ========================================================================== */

/* ---------- 全局排版：17px 基准 + 抗锯齿 ---------- */
body {
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 导航：品牌藏青毛玻璃（全站唯一权威定义） ----------
   历史：顶栏底色曾被四层定义轮流覆盖（浅色毛玻璃白条 → 深色 var(--brand)
   → 深色毛玻璃 → 半透明层），本层最后生效。
   取舍：毛玻璃＝半透明，半透明就必然与背后页面混色，拿不到精确的 #182850。
   原版 alpha 0.85 / 0.92 混出来偏成 #394A69 / #2A3A5E，明显发浅。
   取值历程：0.93（颜色更实，压在浅灰页上约 #28365C）→ 现用 0.88
   （用户反馈「还是毛玻璃的效果好」，故再放透一档，约 #334164，滚动时透出更明显）。
   调手感：只改下面这一个 alpha —— 调大更接近纯 #182850、毛玻璃更弱；
   调小（如 0.80）毛玻璃更强、但颜色更浅。 */
.topbar {
  background: rgba(24, 40, 80, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.topbar.is-stuck {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* 不支持 backdrop-filter 的浏览器：半透明会糊成一片，退回实色品牌藏青 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar,
  .topbar.is-stuck {
    background: var(--brand);
  }
}

.topbar__nav a:not(.btn) {
  font-size: 13px;
  opacity: 0.82;
  transition: opacity var(--dur) var(--ease);
}

.topbar__nav a:not(.btn):hover {
  opacity: 1;
}

.topbar .brand__mark {
  /* 本条是顶栏 logo 尺寸的最终裁决者（选择器权重高于前面 .brand__mark 各处）。
     2026-09-24：30px → 44px（用户要求加大；此前误改 246 行死代码无效）。 */
  height: 44px;
}

.topbar .brand__name {
  font-size: 15px;
  font-weight: 600;
}

.topbar .btn--primary {
  font-size: 13px;
  padding: 6px 16px;
}

/* ---------- Hero：超大居中标题 + 克制的辅助层级 ---------- */
.hero {
  padding: clamp(140px, 16vw, 200px) 0 clamp(72px, 8vw, 110px);
}

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--brand);
  opacity: 0.92;
}

.h1,
.hero__title {
  font-size: clamp(48px, 7.2vw, 96px) !important;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
}

.hero__lead,
.lead {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--fg-2);
}

.hero__meta,
.fine {
  font-size: 12.5px;
  color: var(--fg-3);
}

/* ---------- 按钮：胶囊 = 苹果的形状语言；主按钮 = 藏青，次按钮 = 幽灵描边 ---------- */
.btn {
  border-radius: var(--r-pill);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn--lg {
  font-size: 17px;
  padding: 14px 28px;
}

.btn--primary:hover {
  transform: scale(1.02);
}

.btn--ghost {
  border-color: rgba(0, 0, 0, 0.24);
}

.btn--ghost:hover {
  border-color: rgba(0, 0, 0, 0.5);
}

/* ---------- 区块：更大留白，标题居中加大 ---------- */
.section {
  padding: clamp(96px, 12vw, 160px) 0;
}

.h2 {
  font-size: clamp(34px, 5vw, 60px) !important;
  font-weight: 750;
  line-height: 1.07;
  letter-spacing: -0.02em;
}

.section .wrap.center .h2,
.section .wrap.center .eyebrow,
.cta .h2 {
  text-align: center;
}

.section .wrap.center .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 功能卡片：无边框白卡 + 28px 圆角，hover 轻浮起 ---------- */
.feat {
  border: none;
  border-radius: 28px;
  box-shadow: none;
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
}

.feat:hover {
  transform: none;
  box-shadow: var(--shadow-2);
}

.feat__icon {
  width: 44px;
  height: 44px;
}

.feat h3 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.014em;
}

.feat p {
  font-size: 15px;
  color: var(--fg-2);
}

/* ---------- CTA：标志深藏青容器，白色胶囊 ---------- */
.cta {
  background: var(--brand-navy);
}

/* ---------- 页脚：slim ---------- */
.foot {
  padding: var(--sp-6) 0 var(--sp-7);
}

/* ---------- 下载页：大标题居中 + 大圆角卡片 ---------- */
.dl-hero .h1 {
  font-size: clamp(40px, 6vw, 76px) !important;
  font-weight: 800;
  letter-spacing: -0.024em;
}

.dl-card {
  border: none;
  border-radius: 28px;
  box-shadow: var(--shadow-3);
}

/* ---------- 术语/细节 ---------- */
.h3 {
  letter-spacing: -0.014em;
}

::selection {
  background: rgba(24, 40, 80, 0.16);
}

/* ---------- 下载卡片内的三点强调（决策点旁的安心提示） ---------- */
.dl-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.dl-perks .perk {
  text-align: center;
}

.dl-perks .perk__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  color: var(--brand);
}

.dl-perks .perk__t {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.dl-perks .perk__b {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
}

@media (max-width: 720px) {
  .dl-perks {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* 页脚在浅底上：品牌题名用藏青（覆盖顶栏白字规则） */
.foot .brand__name {
  color: var(--brand);
}