/* ===== Applications v2-light — 深色仪表版式 / 浅色配色（方案 2 白底版）=====
   版式沿用方案 2 的 Bento 网格，配色改为白底。
   文案与 i18n key 全部沿用原版（applications.*）。
   视频策略：**全部手动播放** —— poster 静默 + 点击拉流，任意时刻只有一个在播。
   视频严格 16:9 + object-fit:contain，不裁切。
   预览图：ap2-remote / lock / tag / radar.jpg（方案 2 参考板生成图，居中裁成 16:9）。

   历史版本：v2-dark 深色仪表、v3 明暗瓷砖、v1 浅色左右分栏 → 均已备份至 /backup/
   ------------------------------------------------------------------ */

.ap2-page {
  /* ===== 配色方案 A · 极地蓝 Polar Blue =====
     下面所有规则只引用这些 token，不写死任何颜色；换整套配色只需替换这一段。
     方案 B 深海仪表 / C 钛金石墨 / D 青瓷信号的取值见画布「applications 配色方案对比」。 */
  --ap2-bg:          #FFFFFF;            /* 底色     */
  --ap2-card:        #F7F9FC;            /* 卡片     */
  --ap2-line:        rgba(13, 27, 42, .10);  /* 描边 */
  --ap2-ink:         #0D1B2A;            /* 主文字   */
  --ap2-body:        #3A4A5C;            /* 正文     */
  --ap2-mute:        #6B7A8C;            /* 次级     */
  --ap2-dim:         #8A94A2;            /* 弱化     */
  --ap2-accent:      #2E6BFF;            /* 强调     */
  --ap2-accent-600:  #2E6BFF;            /* 强调·按下 */
  --ap2-accent-400:  #4C8DFF;            /* 进度条   */
  --ap2-accent-rgb:  46, 107, 255;       /* 供 rgba() 派生透明度 */
  --ap2-soft:        rgba(var(--ap2-accent-rgb), .10);  /* 强调浅底（eyebrow）= #EAF0FF */
  --ap2-hero-a:      #F2F7FF;            /* Hero 渐变起点 */
  --ap2-cta-a:       #FFFFFF;            /* CTA 渐变   0% */
  --ap2-cta-b:       #EDF3FF;            /* CTA 渐变  58% */
  --ap2-cta-c:       #E6EEFF;            /* CTA 渐变 100% */
  --ap2-media:       #E4E7EC;            /* 视频位底   */
  --ap2-media-alt:   #EAEDF2;            /* 静态图位底 */
  --ap2-media-vid:   #F0F2F5;            /* 视频播放底 */
  --ap2-on-accent:   #FFFFFF;            /* 实心按钮文字 */
  --ap2-ghost-bg:    #FFFFFF;            /* 描边按钮底   */
  --ap2-chip-bg:     rgba(13, 27, 42, .03);   /* 胶囊标签 */
  --ap2-tip-bg:      rgba(255, 255, 255, .6); /* 气泡底   */
  --ap2-tip-line:    rgba(13, 27, 42, .10);   /* 气泡描边 */
  --ap2-tip-shadow:  rgba(13, 27, 42, .16);   /* 气泡投影 */
  --ap2-radius:      20px;
  --ap2-gap:         20px;

  background: var(--ap2-bg);
  color: var(--ap2-ink);
}

/* 本页作用域内 eyebrow：浅蓝徽标 */
.ap2-page .eyebrow {
  display: inline-block;
  align-self: flex-start;      /* .ap2-card 是 column flex，不加会被拉满卡片宽度变成色条 */
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ap2-body);      /* 让位给 CTA：一张卡只留一个强调色 */
  background: var(--ap2-soft);
  padding: 5px 10px; border-radius: 6px;
}

/* ---------- Hero ---------- */
.ap2-hero {
  position: relative; overflow: hidden; padding: 96px 0 56px;
  background: linear-gradient(180deg, var(--ap2-hero-a) 0%, #FFFFFF 72%);
}
.ap2-hero::before {                     /* 淡蓝细网格，向下淡出 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--ap2-accent-rgb), .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ap2-accent-rgb), .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 30% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 30% 0%, #000, transparent 70%);
}
.ap2-hero .container { position: relative; z-index: 1; }
.ap2-hero h1 {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.1;
  letter-spacing: -1.2px; margin: 18px 0 0; color: var(--ap2-ink);
}
.ap2-lead {
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65;
  color: var(--ap2-body); max-width: 720px; margin: 18px 0 0;
}

/* 读数条 */
.ap2-stats {
  display: flex; flex-wrap: wrap; gap: 56px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--ap2-line);
}
.ap2-stat b {
  display: block; font-size: 34px; font-weight: 600;
  letter-spacing: -.8px; color: var(--ap2-ink); line-height: 1.15;
}
.ap2-stat span { font-size: 12px; letter-spacing: 1.2px; color: var(--ap2-mute); }

/* ---------- Hero · 深色沉浸变体（--dark）----------
   背景视频：uwb-scene-radiance.mp4（1280×720 / H.264 / 6.6 MB）
   层级：底色渐变 → 网格(::before) → 视频层 → 压暗层(veil) → 文案(container)
   深色 token 只在本块内出现，不进 :root，避免污染浅色版。 */
.ap2-hero--dark {
  padding: 128px 0 96px;
  background: radial-gradient(120% 88% at 78% 26%, #16336F 0%, #0A1B3E 46%, #06122A 100%);
}
.ap2-hero--dark::before {                 /* 网格换亮蓝低透明，只作质感不打字 */
  background-image:
    linear-gradient(rgba(158, 195, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 195, 255, .07) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(130% 96% at 26% 4%, #000, transparent 72%);
  mask-image: radial-gradient(130% 96% at 26% 4%, #000, transparent 72%);
}

/* 视频层：cover 铺满 + 径向遮罩淡出，避免出现硬边矩形 */
.ap2-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ap2-hero-media video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 58% 42%;
  opacity: .62;
  -webkit-mask-image: radial-gradient(115% 100% at 60% 42%, #000 0%, #000 50%, transparent 88%);
  mask-image: radial-gradient(115% 100% at 60% 42%, #000 0%, #000 50%, transparent 88%);
}

/* 压暗层：左侧为文案让路，右侧留视频，底部为收口带让路 */
.ap2-hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #06122A 0%, rgba(6, 18, 42, .84) 26%, rgba(6, 18, 42, .36) 56%, rgba(6, 18, 42, .10) 78%, rgba(6, 18, 42, .44) 100%),
    linear-gradient(180deg, rgba(6, 18, 42, .52) 0%, rgba(6, 18, 42, 0) 26%, rgba(6, 18, 42, 0) 50%, rgba(6, 18, 42, .74) 100%);
}
.ap2-hero--dark .container { position: relative; z-index: 2; }

/* 文案反色 */
.ap2-hero--dark .eyebrow {
  color: #9EC3FF;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(158, 195, 255, .22);
}
.ap2-hero--dark h1 { color: #FFFFFF; text-shadow: 0 2px 24px rgba(6, 18, 42, .45); }
.ap2-hero--dark .ap2-lead { color: #C3D2EA; }
.ap2-hero--dark .ap2-stats { border-top-color: rgba(255, 255, 255, .16); }
.ap2-hero--dark .ap2-stat b { color: #FFFFFF; }
.ap2-hero--dark .ap2-stat span { color: #9EC3FF; }

@media (max-width: 860px) {
  .ap2-hero--dark { padding: 88px 0 64px; }
  .ap2-hero-media video {
    opacity: .5; object-position: 50% 40%;
    -webkit-mask-image: radial-gradient(140% 92% at 50% 38%, #000 0%, #000 46%, transparent 86%);
    mask-image: radial-gradient(140% 92% at 50% 38%, #000 0%, #000 46%, transparent 86%);
  }
  .ap2-hero-veil {                       /* 窄屏文案占满宽度，改成整体均匀压暗 */
    background: linear-gradient(180deg,
      rgba(6, 18, 42, .70) 0%, rgba(6, 18, 42, .44) 34%,
      rgba(6, 18, 42, .64) 74%, rgba(6, 18, 42, .88) 100%);
  }
}

/* ---------- Bento 布局 ---------- */
.ap2-bento { padding: 40px 0 80px; }
.ap2-row { display: grid; gap: var(--ap2-gap); margin-bottom: var(--ap2-gap); }
.ap2-row--hero  { grid-template-columns: 1.9fr 1fr; }
.ap2-row--trio  { grid-template-columns: repeat(3, 1fr); }
.ap2-stack { display: flex; flex-direction: column; gap: var(--ap2-gap); min-width: 0; }
.ap2-stack > .ap2-card { flex: 1; }

/* 卡片 */
.ap2-card {
  position: relative;                 /* 气泡定位参照 */
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ap2-card);
  border: 1px solid var(--ap2-line);
  border-radius: var(--ap2-radius);
  padding: 24px;
  scroll-margin-top: 120px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ap2-card:hover {
  border-color: rgba(var(--ap2-accent-rgb), .30);
  box-shadow: 0 10px 30px rgba(var(--ap2-accent-rgb), .08);
}
.ap2-card h2 {
  font-size: 19px; line-height: 1.3; letter-spacing: -.2px;
  margin: 14px 0 0; color: var(--ap2-ink);
}
.ap2-card--lead h2 { font-size: 26px; }
.ap2-desc { font-size: 14px; line-height: 1.6; color: var(--ap2-body); margin: 10px 0 0; }

/* 要点列表 */
.ap2-feats { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.ap2-feats li {
  position: relative; padding-left: 18px;
  font-size: 14px; line-height: 1.5; color: var(--ap2-body);
}
.ap2-feats li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ap2-accent);
}

/* 方案链接：贴卡片底部 */
.ap2-more {
  display: inline-flex; align-items: center;
  align-self: flex-start;      /* 整条卡片底宽不该是隐形点击区 */
  margin-top: auto; padding-top: 20px;
  font-size: 14px; font-weight: 600; color: var(--ap2-accent-600);  /* 原 --accent 仅 4.34:1，不达 AA */
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .28s ease;
}
.ap2-more:hover { background-size: 100% 2px; }

/* ---------- 视频组件 ---------- */
.ap2-video {
  position: relative; width: 100%; margin-top: 18px;
  border-radius: 12px; overflow: hidden;
  background: var(--ap2-media);
  aspect-ratio: 16 / 9;
}
.ap2-card--lead .ap2-video { min-height: 300px; }
.ap2-video video {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--ap2-media-vid);
}
.ap2-video.is-idle video { opacity: 0; }   /* 未加载时只显示 poster 层 */

/* poster 覆盖层：加载过一次后永久淡出，避免暂停时盖住当前帧 */
.ap2-poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity .3s ease;
}
.ap2-video.is-loaded .ap2-poster { opacity: 0; pointer-events: none; }

/* 角标：深色底白字，在浅色页面上同样清晰 */
.ap2-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  padding: 5px 9px; border-radius: 5px;
  background: rgba(0, 0, 0, .55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* 居中播放键（首次播放入口） */
.ap2-play {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ap2-play > i {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  transition: transform .2s ease, background .2s ease;
}
.ap2-play > i::before {
  content: ""; width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.ap2-play:hover > i { transform: scale(1.08); background: rgba(var(--ap2-accent-rgb), .88); }
/* 首次播放后交给控制条，居中大键收起；但暂停时放回来（见下），
   否则暂停态只有底部 26px 小圆键在变，画面中央没有任何「点这里继续」的落点 */
.ap2-video.is-loaded .ap2-play { display: none; }
.ap2-video.is-loaded.is-paused .ap2-play { display: flex; }
/* 暂停态的键比首次播放那颗淡一档：它只是提示，不该抢画面 */
.ap2-video.is-loaded.is-paused .ap2-play > i { background: rgba(0, 0, 0, .42); }
/* 加载后画面本身可点（点画面暂停），手型光标给足可点击暗示 */
.ap2-video.is-loaded video { cursor: pointer; }

/* 底部控制条：加载后才出现（视频控件统一深色，与页面底色无关） */
.ap2-vctrl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 14px;
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.ap2-video.is-loaded .ap2-vctrl { opacity: 1; pointer-events: auto; }
.ap2-vctrl button {
  flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ap2-vctrl button::before {                    /* 暂停双竖条：播放中显示，点它暂停 */
  content: "";
  width: 10px; height: 11px; margin-left: 0; border: 0;
  background: linear-gradient(90deg, #14161A 0 34%, transparent 34% 66%, #14161A 66% 100%);
}
/* 暂停态：播放三角（点它继续） */
.ap2-vctrl.is-paused button::before {
  content: "";
  width: 0; height: 0; margin-left: 3px; border: 0; background: none;
  border-left: 8px solid #14161A;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}
.ap2-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.ap2-bar > span { display: block; height: 100%; width: 0; background: var(--ap2-accent-400); }
.ap2-time { font-size: 12px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }

/* 视频脚注 */
.ap2-vnote { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ap2-dim); }

/* 无视频场景的视觉占位 */
.ap2-shot {
  position: relative; margin-top: 18px; border-radius: 12px; overflow: hidden;
  background: var(--ap2-media-alt); aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
}
.ap2-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ap2-shot .ap2-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  padding: 5px 9px; border-radius: 5px;
  background: rgba(0, 0, 0, .48); color: #fff;
}

/* ---------- 悬停气泡（要点列表）----------
   要点文字默认收进气泡，避免把 Bento 卡片撑高。
   气泡绝对定位、脱离文档流，所以卡片高度只由「标题 + 视觉 + CTA」决定。 */
.ap2-head { display: flex; align-items: flex-start; gap: 10px; }
.ap2-head h2 { flex: 1; min-width: 0; margin-top: 14px; }
.ap2-info {
  flex: 0 0 auto; margin-top: 16px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--ap2-line); color: var(--ap2-dim);
  font: italic 700 11px/1 Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
.ap2-card:hover .ap2-info { color: var(--ap2-accent); border-color: var(--ap2-accent); }

.ap2-tip {
  position: absolute;
  top: calc(100% + 10px); left: 0; right: 0;
  z-index: 40;
  /* 白底毛玻璃 */
  background: var(--ap2-tip-bg);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid var(--ap2-tip-line);
  color: var(--ap2-ink);
  border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 18px 44px var(--ap2-tip-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.ap2-tip::before {                       /* 指向卡片的小箭头 */
  content: ""; position: absolute; bottom: 100%; left: 26px;
  border: 7px solid transparent; border-bottom-color: var(--ap2-tip-bg);
}
/* 悬停浮出（仅支持 hover 的设备）；键盘聚焦同样触发，保证可访问性。
   JS 接管后（容器挂 .has-tip-js）这组规则让位，改由 .is-tip-on 控制 —— 避免两套显隐打架。 */
@media (hover: hover) {
  .ap2-page:not(.has-tip-js) .ap2-card:hover .ap2-tip { opacity: 1; visibility: visible; transform: translateY(0); }
}
.ap2-page:not(.has-tip-js) .ap2-card:focus-visible .ap2-tip,
.ap2-page:not(.has-tip-js) .ap2-card:focus-within .ap2-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* 气泡内的要点列表：白底上改用深色文字 */
.ap2-tip .ap2-feats { margin: 0; gap: 8px; }
.ap2-tip .ap2-feats li {
  color: var(--ap2-body); font-size: 13.5px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .45);   /* 60% 透明度下的可读性保底 */
}
.ap2-tip .ap2-feats li::before { background: var(--ap2-accent); }

/* 次行与底部条：气泡改为向上弹出，避免盖住下方内容 */
.ap2-row--trio .ap2-tip,
.ap2-card--bar .ap2-tip {
  top: auto; bottom: calc(100% + 10px);
  transform: translateY(6px);
}
@media (hover: hover) {
  .ap2-page:not(.has-tip-js) .ap2-row--trio .ap2-card:hover .ap2-tip,
  .ap2-page:not(.has-tip-js) .ap2-card--bar:hover .ap2-tip { transform: translateY(0); }
}
.ap2-page:not(.has-tip-js) .ap2-row--trio .ap2-card:focus-within .ap2-tip,
.ap2-page:not(.has-tip-js) .ap2-card--bar:focus-within .ap2-tip { transform: translateY(0); }
.ap2-row--trio .ap2-tip::before,
.ap2-card--bar .ap2-tip::before {
  bottom: auto; top: 100%;
  border-bottom-color: transparent; border-top-color: var(--ap2-tip-bg);
}

/* ===== 气泡跟手模式 =====
   JS 接管后（.ap2-page 挂 .has-tip-js）气泡**始终是 fixed 定位**，不再在 absolute / fixed 之间来回切 ——
   否则气泡一进一出文档流，文档高度就抖，滚动条跟着闪。位置由 --ap2-tip-x / --ap2-tip-y 驱动：
   鼠标模式跟光标，键盘模式锚定卡片。 */
.ap2-page.has-tip-js .ap2-tip {
  position: fixed;
  top: 0; left: 0; right: auto; bottom: auto;
  width: max-content;
  max-width: 320px;
  z-index: 90;
  transform: translate3d(var(--ap2-tip-x, 0px), var(--ap2-tip-y, 0px), 0);
  /* transform 不带过渡，否则跟手拖影；visibility 延迟到淡出结束再切 */
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.ap2-page.has-tip-js .ap2-tip::before { display: none; }   /* 不再指向卡片，箭头多余 */
.ap2-page.has-tip-js .ap2-card.is-tip-on > .ap2-tip {
  opacity: 1; visibility: visible;
  transition: opacity .16s ease, visibility 0s;
}
/* 保险：预留滚动条槽位，即便还有残余的高度抖动也不会顶动正文 */
html.ap2-tip-js { scrollbar-gutter: stable; }

/* ---------- 底部条（other）---------- */
.ap2-card--bar { flex-direction: row; align-items: center; gap: 40px; padding: 26px 28px; }
.ap2-bar-main { flex: 1; min-width: 0; }
.ap2-bar-main h2 { margin-top: 12px; }
.ap2-bar-side { display: flex; flex-wrap: wrap; gap: 12px; }
.ap2-chip {
  font-size: 13px; color: var(--ap2-body);
  border: 1px solid var(--ap2-line); border-radius: 999px;
  padding: 8px 16px; background: var(--ap2-chip-bg);
}
.ap2-card--bar .ap2-more { margin-top: 0; padding-top: 16px; }

/* ---------- CTA ----------
   收口块：淡蓝渐层（白 → #E6EEFF）。品牌蓝不再大面积铺底，只留给按钮和底部光晕。
   为什么不能做成深色：.footer 是 #0D1B2A 实心块（.footer-wrap 的白→深渐变被它盖住，实际不可见），
   深色收口会和页脚糊成一坨。浅色才能形成「白卡片 → 淡蓝收口 → 深色页脚」的三段节奏。 */
.ap2-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(72% 165% at 50% 128%, rgba(var(--ap2-accent-rgb), .16) 0%, transparent 68%),
    linear-gradient(180deg, var(--ap2-cta-a) 0%, var(--ap2-cta-b) 58%, var(--ap2-cta-c) 100%);
  color: var(--ap2-ink);
}
.ap2-cta::before {                      /* 淡蓝网格，与 Hero 的网格呼应，往下淡出 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--ap2-accent-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ap2-accent-rgb), .055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(90% 125% at 50% 0%, #000, transparent 74%);
  mask-image: radial-gradient(90% 125% at 50% 0%, #000, transparent 74%);
}
.ap2-cta .container { position: relative; z-index: 1; padding: 76px 0; text-align: center; }
.ap2-cta h2 { font-size: clamp(22px, 3vw, 34px); margin-bottom: 12px; color: var(--ap2-ink); }
.ap2-cta p { font-size: 16px; color: var(--ap2-body); margin-bottom: 28px; }
.ap2-cta .ap-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ap2-cta .btn {
  border-radius: 999px; padding: 12px 28px; text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.ap2-cta .btn-primary {
  background: var(--ap2-accent); color: var(--ap2-on-accent);
  box-shadow: 0 8px 22px rgba(var(--ap2-accent-rgb), .26);
}
.ap2-cta .btn-primary:hover {
  background: var(--ap2-accent-600); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(var(--ap2-accent-rgb), .34);
}
.ap2-cta .btn-outline {
  background: var(--ap2-ghost-bg); color: var(--ap2-accent);
  border: 1.5px solid rgba(var(--ap2-accent-rgb), .45);
}
.ap2-cta .btn-outline:hover {
  background: var(--ap2-hero-a); border-color: var(--ap2-accent);
  transform: translateY(-2px);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .ap2-row--hero { grid-template-columns: 1fr; }
  .ap2-row--trio { grid-template-columns: repeat(2, 1fr); }
  .ap2-card--lead .ap2-video { min-height: 0; }
  .ap2-card--bar { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* 窄屏没有 hover，气泡改回内联展示，保证信息可读 */
  .ap2-tip {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; color: inherit; box-shadow: none;
    /* 描边与圆角是悬浮气泡态的遗留：背景已透明却不删边框，
       会出现一个「空框」，且 padding:0 让列表圆点直接顶在框线上 */
    border: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0; margin-top: 16px; pointer-events: auto;
  }
  .ap2-tip::before { display: none; }
  .ap2-tip .ap2-feats li { color: var(--ap2-body); }
  .ap2-info { display: none; }
}
@media (max-width: 720px) {
  .ap2-hero { padding: 72px 0 44px; }
  .ap2-stats { gap: 32px; }
  .ap2-stat b { font-size: 28px; }
  .ap2-row--trio { grid-template-columns: 1fr; }
  .ap2-card { padding: 20px; }
  .ap2-bento { padding: 24px 0 56px; }
}
/* 深色 hero 的窄屏：必须排在通用 720px 规则之后 ——
   .ap2-hero 与 .ap2-hero--dark 特异性相同，只能靠先后顺序取胜 */
@media (max-width: 720px) {
  .ap2-hero--dark { padding: 80px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap2-hero-media { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ap2-card, .ap2-play > i, .ap2-more, .ap2-cta .btn, .ap2-poster { transition: none; }
}

/* ===========================================================
   收口块 .app-cta —— 复用 uwb-remote.html 设计
   （两端横向收白 + 中部淡蓝光晕 + 垂直白→淡蓝→白渐变）
   =========================================================== */
.app-cta {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, #FFFFFF 100%),
    radial-gradient(85% 78% at 50% 46%, rgba(46,107,255,.08) 0%, transparent 44%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 14%, #EDF3FF 46%, #F2F7FF 74%, #FFFFFF 100%);
}
.app-cta .container {
  position: relative; z-index: 1;
  padding-top: 76px; padding-bottom: 76px;
  text-align: center;
}
.app-cta h2 {
  font-size: clamp(22px, 3vw, 34px);
  margin: 0 0 12px;
  color: var(--ink);
}
.app-cta p {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 auto 28px;
  max-width: 560px;
}
.app-cta .btn-row {
  display: flex; gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.app-cta .btn-row .btn { padding: 12px 28px; }
.app-cta .btn-outline { border-color: rgba(46,107,255,.45); }

@media (max-width: 560px) {
  .app-cta .container { padding-top: 56px; padding-bottom: 56px; }
  .app-cta h2 { font-size: 24px; }
  .app-cta p { font-size: 15px; margin-bottom: 22px; }
}