/* ============================================================
   MOONLIT JADE · Official Homepage Design System
   入月云计算 — 冷曜石 / 翡翠辉光 / 大字排版 / 分层动效
   自研布局，无框架依赖
   ============================================================ */
:root {
  --bg-0: #F6F9F7;
  --bg-1: #FBFDFC;
  --bg-2: #FFFFFF;
  --bg-3: #EDF3F0;
  --jade: #0B7A54;
  --jade-mid: #12996C;
  --jade-deep: #096747;
  --ink: #101A15;
  --ink-2: #2E3D36;
  --ink-3: #5B6E65;
  --ink-4: #5B6E65;
  --line: rgba(16, 26, 21, 0.10);
  --line-jade: rgba(11, 122, 84, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* R98: overflow-x:hidden 移除——body 任一轴 overflow≠visible 都使 body
     成为滚动容器，捕获后代的 position:sticky（sticky 相对 body 钉=body
     自身不滚=死钉，R98 scroll-cover 失效的根因）。横向防护由
     html overflow-x:hidden 独自承接（html 的 overflow 传播给视口=
     视口横向裁切，不构成「祖先滚动容器捕获」）——防护不降级 */
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(11, 122, 84, 0.25); }

/* ============ 环境层 ============ */
.env-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -5%, rgba(18, 153, 108, 0.06), transparent 62%),
    radial-gradient(900px 500px at -5% 35%, rgba(11, 122, 84, 0.04), transparent 55%);
}
.env-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page { position: relative; z-index: 1; }
html { overflow-x: hidden; }

/* ============ 导航 ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* P3 专家①：原 all——padding 布局动画 + backdrop-filter 全带重绘逐帧买单；
     收窄为纯色通道，padding/blur 即时切换（滚动状态切换顺滑且零重排） */
  transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.scrolled {
  padding: 12px 5vw;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.nav-logo .ry-mark { width: 36px; height: 36px; flex: none; display: block; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-link {
  position: relative;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  border-radius: 10px;
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover { color: var(--ink); background: rgba(16, 26, 21, 0.05); }
.nav-link.active { color: var(--jade); }
.nav-cta-group { display: flex; align-items: center; gap: 10px; }
.nav-btn {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-btn.ghost { color: var(--ink-3); border: 1px solid var(--line); }
.nav-btn.ghost:hover { color: var(--ink); border-color: rgba(16, 26, 21, 0.25); }
.nav-btn.solid {
  background: linear-gradient(165deg, #0B7A54, #096747);
  color: #FFFFFF;
  box-shadow: 0 6px 18px -6px rgba(11, 122, 84, 0.38);
}
.nav-btn.solid:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* 汉堡 */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  z-index: 210;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--ink-2);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移动菜单 */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(246, 249, 247, 0.97);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-size: 26px;
  font-weight: 700;
  padding: 14px 0;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body.menu-open .mobile-menu a { transform: none; opacity: 1; }
body.menu-open .mobile-menu a:nth-child(1) { transition-delay: 0.06s; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: 0.12s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: 0.18s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: 0.24s; }
body.menu-open .mobile-menu a:nth-child(5) { transition-delay: 0.3s; }
body.menu-open .mobile-menu a:nth-child(6) { transition-delay: 0.36s; }
.mobile-menu a:hover { color: var(--jade); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;   /* R112 兜底：svh 不支持的内核回退 */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 7vw 80px;
  overflow: hidden;
}
/* 网格背景 */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16, 26, 21, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 26, 21, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 75%);
}
/* 视差辉光（JS 驱动） */
.hero-glow {
  position: absolute;
  width: 720px; height: 720px;
  left: 50%; top: 18%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(18, 153, 108, 0.10), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 月球等高线 */
.hero-orbit {
  position: absolute;
  right: -12vw;
  top: 50%;
  transform: translateY(-50%);
  width: 46vw;
  height: 46vw;
  max-width: 820px;
  max-height: 820px;
  pointer-events: none;
  opacity: 0.5;
}
.hero-orbit svg { width: 100%; height: 100%; }
.hero-orbit .orbit-ring {
  fill: none;
  stroke: rgba(11, 122, 84, 0.30);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  animation: orbitSpin 90s linear infinite;
  transform-origin: center;
}
.hero-orbit .orbit-core {
  fill: radial-gradient(circle, rgba(18, 153, 108, 0.15), transparent);
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
/* R83 · 触屏滚动性能门（第一幕下滑卡顿治理）：轨道 SVG 旋转（改造
   内核走主线程的持续动画）与 720px blur(10px) 滤镜层（滚动期反复
   重合成）停用——径向辉光本身已柔和，视觉零损失；Hero 离场视差
   JS 侧已同门（ryFine 双门，OPPO 级内核零 JS 滚动效果） */
@media (hover: none), (pointer: coarse) {
  .hero-orbit .orbit-ring { animation: none; }
  /* R88: 三星（orbit-sat）触屏端一并停转——inline style 携带各自周期
     （84s/48s reverse），CSS 门须 !important 才能压过 inline；改造
     内核 SVG 动画走主线程，滚动期间（尤其回滚第一幕 sky-live 恢复
     瞬间）持续打帧 = 回滚卡顿主源之一 */
  .hero .hero-orbit .orbit-sat { animation: none !important; }
  .hero-glow { filter: none; }
}
/* R84 · 第一幕层级离场（三明治视深）：exit 类一次性翻转，三层异速
   分离——前景月球反向慢退+缩焦（视觉焦点让位）、背景网格/辉光渐隐
   （纵深拉远）、中景内容自然滚走（合成器托管）。transition 定义在
   基类（双向平滑，回滚时层次复位） */
.hero-orbit,
.hero-grid,
.hero-glow,
.hero-cities { transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s ease; }
.hero-cities { transition-duration: 0.6s, 0.5s; } /* 航线快退：下区信号先行 */
.hero.hero-exit .hero-orbit { transform: translateY(-58%) scale(0.94); opacity: 0.3; }
.hero.hero-exit .hero-grid { opacity: 0.15; }
.hero.hero-exit .hero-glow { opacity: 0.2; }
.hero.hero-exit .hero-cities { opacity: 0; }
/* R106 · 跟手渐隐 transition 收敛（JS inline opacity 即时通道）：
   html.js（JS 存活）下渐隐层 opacity 剔出 transition——JS 每帧
   inline 写入须 1:1 跟手，任何 opacity 缓动=滞后追赶=跟手失效；
   transform 通道保留（orbit 类翻转缩焦播片照常）。JS 失效/RM：
   本块不命中（RM 走 noMotion 守卫：updExit 不跑、类永不翻=纯
   自然滚动），hero-exit 播片谢幕完整兜底——opacity 声明全保留，
   inline 恒压使二者零冲突 */
html.js .hero-orbit,
html.js .hero-grid,
html.js .hero-glow,
html.js .hero-cities,
html.js .hero-core,
html.js .hero-stats-wrap,
html.js .hero-cue { transition-property: transform; }
/* R103 · 移动端第一幕过渡定稿（≤760px）：平铺·渐远式谢幕——
   scroll-cover 覆盖架构（R98 sticky 钉住+R101 覆盖门+R89 拍2 深档）
   随用户定稿整体退役，回归平铺滚动（第一幕 1x 自然顶出=最直觉、
   零架构陷阱），过渡设计感由单拍光学层次承载：
   · 物理层：平铺滚动（合成器托管 60fps，R83 纪律满格）
   · 光学层：单拍渐远（.hero-exit 一类）——hero 滚出约 12% 起，
     orbit 从容缩焦渐隐（1.1s 唯一显著运动）+ 背景中档沉没
     （grid 0.45/glow 0.5）+ 内容子块渐隐 0.45（可见层接管谢幕）
     + cue 目送 0.35s；cities 地面锚点豁免（R87/R97）
   · 第二幕：IO 深入场浮现（0.95s expo-out）+ B 层叠推进（R92）
     ——平铺下第二幕自然滚入，浮现编排即过渡体验
   诚实运动：inner/cities/stats 零人为 CSS 运动（自然滚动=唯一
   离场方式）；层化（R88 邻近窗口）：grid/glow/orbit/inner */
@media (max-width: 760px) {
  .hero.hero-live .hero-grid,
  .hero.hero-live .hero-glow,
  .hero.hero-live .hero-orbit,
  .hero.hero-live .hero-core,
  .hero.hero-live .hero-stats-wrap { transform: translateZ(0); }
  .hero-orbit { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.1s ease; }
  .hero-grid,
  .hero-glow { transition: opacity 1.0s ease; }
  /* 拍 1：前景退场 + R95 慢滑可见化。R89 定稿「orbit 唯一显著运动」
     存在几何盲区：移动端 orbit 位于 hero 顶部，箭头过 55% 线触发时
     hero 顶已滚出 ~370px——orbit 整体在画外白动；拍2 时 hero 亦近
     离场 → 慢滑谢幕全程无可感知变化（用户实测反馈）。R95 修正：
     可见层接管谢幕——inner 尾部内容（stats 可见区）opacity 渐隐至
     0.45 + 背景中档沉没（grid 0.45/glow 0.5），拍2 深档收束——
     三档渐降（1→0.45→0.06）横跨整个跨幕带=滑动进度可见。
     渐隐层自化（R104）：动画承载元素（core/stats）常驻层化=光栅
     成本付在加载期（R87 哲学）、谢幕纯合成器零重绘；inner 自身
     无动画出层化（R89「无动画层化白驻留」纪律回归）；
     opacity-only 无位移通道=不与自然滚动双运动（R89 混乱源是
     transform 下沉+渐隐叠加，纯渐隐不冲突） */
  .hero.hero-exit .hero-orbit { transform: translateZ(0) scale(0.9); opacity: 0.25; }
  .hero.hero-exit .hero-grid { opacity: 0.45; }
  .hero.hero-exit .hero-glow { opacity: 0.5; }
  /* R104 · 渐隐目标层自化（5→2 收敛，滑动过渡卡顿根治）：R96 点名
     五子块在 inner 层内各自 opacity 动画——未提升时 inner 整层
     （全屏文字内容）逐帧重绘、自动提升时 5 层分配+文字光栅尖峰
     砸在滚动进行中（OPPO 慢主线程=滑动过渡卡顿根因；桌面基线
     p95 18ms/6 帧>20ms 已贴帧预算边缘，慢 5-10× 的改造内核必卡）。
     收敛：上部四块（eyebrow/title/sub/actions）DOM 包裹为
     .hero-core、stats 因 cities 阻隔独立——两者 hero-live 常驻
     层化，谢幕=层自身 opacity 动画=纯合成器零重绘零光栅尖峰。
     cities 在 core 包裹层外=地面锚点豁免从 CSS 点名（R96/R97）
     升级为结构性豁免（语义由 DOM 表达，重构零连坐） */
  .hero.hero-exit .hero-core,
  .hero.hero-exit .hero-stats-wrap { opacity: 0.45; }
  .hero-core,
  .hero-stats-wrap { transition: opacity 0.85s ease; }
  /* R97 · cities 豁免恢复：全局块 `.hero.hero-exit .hero-cities {opacity:0}`
     （L255 区）是 PC 航线快退语义且无媒体门控；R87 曾以本移动块
     opacity:1 豁免压制（同特异性 (0,3,0)，源序后者胜）。R96 渐隐
     子块化重构时误删豁免 → PC 规则泄漏移动端 → HKG 行随拍1 消失
     （用户回归报告「和昨天一样」）。恢复豁免：cities 全程在场 =
     R87「地面锚点不动」语义；transition:none 对抗 L250 cities 基础
     transition（类切换即时定格零闪烁） */
  /* R106b · 上豁免退役（2026-10-11 用户验收：HKG/NRT 航线行要求
     与各层同款跟手渐隐）：规则行删除——JS inline 全端接管（区间
     0→0.75，index.html R106b）；JS 失效兜底=随类播片淡出（L255 区
     全局规则 opacity:0 不再被压制，双端谢幕一致）；RM 语义不变
     （noMotion 下类不翻=纯自然滚动）；R97 泄漏教训仍有效——
     改全局 cities 规则时记得双端连坐检查 */
  /* R90：箭头随拍1 目送退场（opacity 过渡在 .hero-cue 基类）——
     不可见即不可点（pointer-events 同步摘除，防透明死区误触） */
  .hero.hero-exit .hero-cue { opacity: 0; pointer-events: none; }
  .hero.hero-exit .hero-cue::before { animation: none; }

  /* R95 · act-rail 幕级进度导航（右缘纵轨）：慢滑跨幕的方向/进度
     反馈——4 tick 对应 01-04 幕，IO 带内追踪当前幕（玉色点亮），
     点按直达（复用 ryGlide+ryStage）。呈现=类翻转（零每帧写）；
     tick 缩放/发光走 ::after transform+bg 合成友好通道；
     无 IO 极旧内核 rail 不显示（零降级负担） */
  /* R110 · 命中区扩容（点按异常治理）：18×26 实体在指缘≈指腹 1/3，
     边缘 4px 更与安卓返回手势保留带交叠——误触率高（「点按后
     跳转异常」的触达层共谋）。按钮实体扩至 30×32（::after 锚定
     right:0 纹理位置零漂移，视觉分毫不变），gap 4→2 补偿总高：
     视觉恒定、命中面 ×2.05——44px 触达基准的可达性修正 */
  .act-rail { position: fixed; right: 4px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 2px; z-index: 60; }
  .act-rail.on { display: flex; }
  .act-tick { width: 30px; height: 32px; padding: 0; background: none; border: 0; position: relative; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .act-tick::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 2px; background: rgba(38, 56, 47, 0.16); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
  .act-tick.on::after { background: linear-gradient(180deg, #2ec98f, #0b7a54); transform: translateY(-50%) scaleY(1.3); box-shadow: 0 0 8px rgba(18, 153, 108, 0.45); }
}

/* ============================================================
   R92 · 第二幕进入过渡 · B「层叠推进」固化（三原型评估定稿）
   选型依据（vs C 视差定格）：
   · 可靠性：全 2D translate+opacity（Web 最稳动画通道）；C 的
     sec-no blur(3px) 逐帧动画=低端 GPU 已知雷区（R87 实证本站
     OPPO 目标机静态 blur 滚动即卡）
   · 性能：单 transform 通道纯合成；C 需 filter 管线（部分改造
     内核走 CPU）+ 3D 插值 + 逐帧重绘
   · 兼容：iOS 12/Android 8 构造性完美；C blur 旧 WebView 渲染
     bug 史 + 3D 变换改造内核闪烁史
   · 维护：2 条核心规则；C 需 7 条 + keyframe + 4 delay 覆盖（3 倍）
   编排：整幕同拍推进（「一页纸翻过」的果敢）——head 自上而下
   盖入 -20px/360ms + 卡片同拍升起 32px/380ms（R92: 420 收紧，
   利落收束），零级联；底盘=ryGlide 平滑滚动 × R89 两拍谢幕。
   特异性纪律：起点规则 (1,2,0) 必须配对终态规则 (1,3,0)——
   fx-b 时代起点 (1,3,1) 压过 html.js .reveal.is-in (0,3,1)，
   卡片 is-in 后永停 32px 偏移（R91 未验终态的真 bug，此处根治）
   ============================================================ */
/* 「01/02…」眉题可点击提示（触发点实体，R91） */
.section-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* R95 · act-rail 全局基态：rail 规则主体在 ≤760 移动块内，PC 须显式
   隐藏——否则裸 div+空按钮入文档流（可聚焦死区，R90 桌面裸按钮
   教训同款）；.act-rail.on (0,2,0) 特异性压过本条 (0,1,0) ✓ */
.act-rail { display: none; }

#regions .section-head.reveal { transform: translateY(-20px); transition-duration: 0.36s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
#regions .section-head.reveal.is-in { transform: none; }
#regions .region-card.reveal { transform: translateY(32px) scale(0.982); transition-duration: 0.38s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: 0s; }
#regions .region-card.reveal.is-in { transform: none; transition-delay: 0s; }
/* R105 - 第二幕入场深化（T1 全端，纯基座通道）：卡片微缩 1.8%
   起态（纵深预埋，与 is-in transform:none 恒等闭合）+ 三卡
   70ms 步进错峰（nth-child (1,4,0) 压 data-delay 旧径与 is-in
   0s——入场读终态延迟，反程对称）+ sec-no 金编号子层接力
   （eyebrow 8px 接力之上再叠 12px/120ms 滞后=三层节奏）；
   reduce：nth 延迟归零（承下方既有 reduce 归零纪律） */
#regions .regions-grid .region-card.reveal:nth-child(2) { transition-delay: 0.07s; }
#regions .regions-grid .region-card.reveal:nth-child(3) { transition-delay: 0.14s; }
html.js #regions .section-eyebrow .sec-no { opacity: 0.3; transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0.12s; }
html.js #regions .section-head.is-in .section-eyebrow .sec-no { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #regions .regions-grid .region-card.reveal:nth-child(2),
  #regions .regions-grid .region-card.reveal:nth-child(3) { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  #regions .section-head.reveal,
  #regions .region-card.reveal { transform: none; transition-duration: 0.01s; transition-delay: 0s; }
}

/* R90 · 箭头桌面基态：cue 历来为移动端专属（PC 无 ::after 定义）——
   实体化后桌面须显式退役，防文档流裸按钮（可 Tab 聚焦无样式的死区） */
.hero-cue { display: none; }

.hero-inner { position: relative; max-width: 1500px; width: 100%; margin: 0 auto; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 28px;
  opacity: 0;
  animation: riseIn 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--jade), transparent);
}
.hero-title {
  font-size: clamp(44px, 7.2vw, 108px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 30px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span {
  display: inline-block;
  transform: translateY(110%);
  animation: titleUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-title .line:nth-child(2) span { animation-delay: 0.12s; }
.hero-title .em {
  background: linear-gradient(115deg, #101A15 20%, #0B7A54 60%, #12996C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes titleUp { to { transform: translateY(0); } }
.hero-sub {
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--ink-3);
  line-height: 1.85;
  max-width: 560px;
  margin-bottom: 44px;
  opacity: 0;
  animation: riseIn 0.8s 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 90px;
  opacity: 0;
  animation: riseIn 0.8s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.btn-core {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: none;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s;
}
.btn-core::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-core:hover::after { transform: translateX(130%); }
/* R33: 触屏无 hover——扫光在移动端由粘性 hover 转移误触发（点 A 再点 B，B 上扫过 A 的白光），彻底禁用 */
@media (hover: none) {
  .btn-core::after { display: none; }
}
/* R76: :active 门控（hover:hover+pointer:fine 双门）——改造内核（OPPO 等）
   误报 hover:hover 时 L3836 归零失效、:active 滞留挂 0.96 不退（R55 变体）
   = 点后闪动；PC 行为由 L2145 !important 版承接（同值） */
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .btn-core:active { transform: scale(0.96); }
}
.btn-jade {
  background: linear-gradient(165deg, #0B7A54, #096747);
  color: #FFFFFF;
  box-shadow: 0 12px 34px -10px rgba(11, 122, 84, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
@media (hover: hover) and (pointer: fine) {
  /* R50: hover 增强仅指针设备——触屏粘性 hover 会挂住增强阴影
     （=「点击后大卡片出现阴影」的第二来源）与箭头位移 */
  html:not(.ry-touch) .btn-jade:hover { box-shadow: 0 18px 44px -10px rgba(11, 122, 84, 0.48); }
  html:not(.ry-touch) .btn-ghost:hover { border-color: var(--line-jade); color: var(--ink); }
  html:not(.ry-touch) .btn-core:hover i { transform: translateX(4px); }
}
.btn-ghost {
  background: rgba(16, 26, 21, 0.03);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn-core i { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

/* 统计条 */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 5vw, 90px);
  border-top: 1px solid var(--line);
  padding-top: 34px;
  opacity: 0;
  animation: riseIn 0.9s 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-num {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--jade);
  text-shadow: none;
  line-height: 1;
}
.stat-num .unit { font-size: 0.5em; margin-left: 3px; color: var(--ink-3); }
.stat-label { font-size: 12.5px; color: var(--ink-4); letter-spacing: 0.08em; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ============ 通用区块 ============ */
.section {
  position: relative;
  padding: 110px 7vw;
}
.section-head { margin-bottom: 56px; }
.section-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 16px;
  display: block;
}
.section-title {
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.section-title .em {
  background: linear-gradient(115deg, #0B7A54, #12996C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-desc { margin-top: 16px; color: var(--ink-3); font-size: 15px; max-width: 520px; line-height: 1.9; }

/* 滚动显现 */
/* v2 节奏（浮现可感知）：行程 34→42px、expo-out 0.95s、错峰步距加大——
   触发时机由 IO threshold 0.16 + 底部 7% 内缩协同（见 index.html）
   v3 时序纪律（R8「先显示后浮现」根治）：初始隐藏态仅随 html.js 生效
   ——head 内联脚本先于样式表落笔，JS 缺席时内容直显；.off = 移动端
   横滑待滑卡（随滑随在）；.no-anim = JS 重建且已被看过的内容
   （直显零过渡，杜绝「消失→再浮现」）；.is-in = 正常起幕 */
html.js .reveal { opacity: 0; transform: translateY(42px); transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: 0.14s; }
html.js .reveal[data-delay="2"] { transition-delay: 0.28s; }
html.js .reveal[data-delay="3"] { transition-delay: 0.42s; }
html.js .reveal.no-anim, html.js .reveal.off { transition: none; }
html.js .reveal.no-anim { opacity: 1; transform: none; }

/* R13 · section-head 内层接力（编舞精修）：容器 42px 主行程之上，
   eyebrow → title → desc 以 8px 微程 70ms 步进接力——期刊级三层节奏。
   纪律：html.js 守卫同规（JS 缺席直显）；no-anim（粘性快甩/重建直显）
   同权置后接管直显；RM 由全站 0.01ms 规则瞬切兜底 */
html.js .section-head .section-eyebrow,
html.js .section-head .section-title,
html.js .section-head .section-desc {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .section-head.is-in .section-eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
html.js .section-head.is-in .section-title { opacity: 1; transform: none; transition-delay: 0.12s; }
html.js .section-head.is-in .section-desc { opacity: 1; transform: none; transition-delay: 0.2s; }
html.js .section-head.no-anim .section-eyebrow,
html.js .section-head.no-anim .section-title,
html.js .section-head.no-anim .section-desc {
  opacity: 1; transform: none; transition: none;
}


/* R74: hover 门控——sticky hover 根治（与 R60 按钮纪律同源）：触屏 tap
   卡内按钮 :hover 挂祖先链，边框/阴影跳变 = 卡片闪动
.plan-price .num {
  font-size: 28px;
  font-weight: 800;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
/* R55: hover 仅指针设备——触屏 sticky hover 会挂住 brightness/位移
   （R50 纪律，与 btn-jade/ghost 同款处理）；:active 桌面反馈保留，
   触屏端被 *:active 归零压制后由 tPress/tBack 统一通道接管 */

/* ============ 特性 ============ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.feature-card {
  padding: 30px 26px;
  background: linear-gradient(175deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-jade);
}
/* P3 专家①：悬停底色渐变改为 ::after 常驻层 opacity 渐显——原整卡
   background 渐变过渡 = 每帧全卡重绘；现在仅合成层透明度交换 */
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(175deg, var(--bg-3), var(--bg-2));
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.feature-card:hover::after { opacity: 1; }
/* R126：.feature-body 在 PC 端 display:contents 不生成盒，> * 的 z-index
   对其内部 h3/p 无效 → hover 时 ::after 光泽层（定位元素）压在静态文字之上，
   标题/描述被浅色渐变吞没（实测复现）。显式把文字抬到光泽层之上。 */
.feature-card > *,
.feature-card .feature-title,
.feature-card .feature-desc { position: relative; z-index: 1; }
.feature-ico {
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 19px;
  color: var(--jade);
  background: rgba(11, 122, 84, 0.08);
  border: 1px solid rgba(11, 122, 84, 0.20);
  margin-bottom: 20px;
  transition: transform 0.35s var(--spring), box-shadow 0.35s ease;
}
.feature-card:hover .feature-ico {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 0 24px -4px rgba(18, 153, 108, 0.35);
}
.feature-title { font-size: 16.5px; font-weight: 700; margin-bottom: 10px; }
.feature-desc { font-size: 13px; color: var(--ink-3); line-height: 1.85; }

/* ============ 新闻 ============ */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.news-card {
  padding: 28px 30px;
  background: linear-gradient(175deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card:hover { border-color: var(--line-jade); }
.news-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.news-card-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}
.news-card-head h3 i { color: var(--jade); font-size: 15px; }
.news-more {
  font-size: 12.5px;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.25s;
}
.news-more:hover { color: var(--jade); }
.news-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 6px;
  border-radius: 10px;
  transition: background 0.22s;
}
.news-item:hover { background: rgba(11, 122, 84, 0.04); }
.news-item .t {
  flex: 1;
  font-size: 14px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.22s;
}
.news-item:hover .t { color: var(--jade); }
.news-item .d { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.news-loading, .news-empty {
  padding: 30px 0;
  text-align: center;
  color: var(--ink-4);
  font-size: 13px;
}

/* ============ 页脚 ============ */
.footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #EDF3F0, #E8EFEB);
  padding: 70px 7vw 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 54px;
}
.footer-brand-name { font-size: 20px; font-weight: 800; margin: 14px 0 10px; }
.footer-brand-desc { font-size: 13px; color: var(--ink-4); line-height: 1.9; max-width: 320px; }
.footer-col h5 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.footer-col a {
  display: block;
  font-size: 13.5px;
  color: var(--ink-4);
  padding: 6px 0;
  transition: color 0.22s ease, transform 0.22s ease;
}
.footer-col a:hover { color: var(--jade); transform: translateX(4px); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-4);
}
.footer-bottom a { color: var(--ink-4); }
.footer-bottom a:hover { color: var(--jade); }

/* ============ 浮动客服 ============ */
.float-dock {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.float-btn {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--jade);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 0.3s var(--spring), border-color 0.3s ease;
}
.float-btn.h-open,
.float-btn.open {
  transform: translateY(-3px) scale(1.05);
  border-color: var(--line-jade);
  box-shadow: 0 12px 30px -8px rgba(11, 122, 84, 0.30);
}
.float-btn.open { transform: none; }
.float-pop {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%) translateX(12px);
  min-width: 220px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line-jade);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* hover 桥：填补弹层与按钮之间的空隙，鼠标平移不断链（仅中段高度，避开底部按钮点击区） */
.float-pop::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 22%;
  bottom: 22%;
  width: 18px;
}
/* 显示条件与 JS 状态机一致：h-open=悬停态（鼠标移开即关），open=点击钉住态（再点才关），二者互斥 */
.float-btn.h-open .float-pop,
.float-btn.open .float-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.float-btn.open { border-color: var(--line-jade); transform: none; }
.float-pop .fp-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.float-pop .fp-sub { font-size: 12px; color: var(--ink-4); margin-bottom: 12px; }
.float-pop img.qr { width: 130px; height: 130px; border-radius: 12px; display: block; margin: 0 auto 8px; }
.fp-btn {
  display: block;
  text-align: center;
  padding: 9px 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(165deg, #0B7A54, #096747);
  transition: filter 0.25s;
}
.fp-btn:hover { filter: brightness(0.95); }

/* ============ 公告弹窗（v1 已废弃：v3 见文件末尾 PATCH ry-v12 ann3-*） ============ */

/* ============ 响应式 ============ */
@media (max-width: 1080px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta-group { display: none; }
  .nav-burger { display: flex; }
  .news-grid { grid-template-columns: 1fr; }
  .hero-orbit { display: none; }
  .hero { padding-top: 120px; }
  .section { padding: 72px 6vw; }
  .hero-glow { width: 640px; height: 640px; }
}
@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-stats { gap: 26px 40px; }
  .hero-actions { margin-bottom: 60px; }
  .btn-core { width: 100%; justify-content: center; }
  /* 光晕层随视口收缩，消除横向溢出 */
  .hero-glow { width: 130vw; height: 130vw; max-width: 500px; max-height: 500px; }
  .hero-inner { padding: 0 20px; }
  .env-texture, .env-noise { overflow: hidden; }
  .page { overflow-x: clip; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   PATCH ry-A · 冷瓷翡翠 亮色精修
   ============================================================ */
/* 白卡浮层补投影 */
.float-pop { box-shadow: 0 20px 48px -16px rgba(16, 26, 21, 0.22); }
.float-btn { box-shadow: 0 8px 24px -10px rgba(16, 26, 21, 0.18); }
.feature-card, .news-card { box-shadow: 0 1px 2px rgba(16, 26, 21, 0.04); }
/* 选中态品牌绿 */
::selection { background: rgba(11, 122, 84, 0.22); }

/* ============================================================
   PATCH mj-interact · 下部区块深度优化（v10.9.0）
   极光光带 / 区块环境微光 / 页脚光缘 / 卡片光泽跟随
   ============================================================ */

/* —— 极光光带：随滚动穿越画布（transform 由 JS 驱动） —— */
.aurora {
  position: fixed;
  left: 50%;
  top: -640px;
  width: 130vw;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(58% 50% at 50% 50%, rgba(18, 153, 108, 0.065), transparent 72%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* —— 区块环境微光：各 section 交替锚位，打破画布单调 —— */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* nth-of-type 按标签 section 计数（hero=1）：regions=2 plans=3 features=4 news=5 */
.page .section:nth-of-type(2)::before {
  background: radial-gradient(640px 340px at 86% 6%, rgba(18, 153, 108, 0.05), transparent 62%);
}
.page .section:nth-of-type(3)::before {
  background: radial-gradient(720px 400px at 8% 24%, rgba(11, 122, 84, 0.045), transparent 60%);
}
/* 方案区网点纹理：边缘淡出，呼应 hero 网格 */
.page .section:nth-of-type(3)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(16, 26, 21, 0.09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 45%, transparent 40%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 45%, transparent 40%, #000 100%);
}
.page .section:nth-of-type(4)::before {
  background: radial-gradient(680px 380px at 90% 55%, rgba(18, 153, 108, 0.05), transparent 62%);
}
.page .section:nth-of-type(5)::before {
  background: radial-gradient(620px 320px at 10% 88%, rgba(11, 122, 84, 0.045), transparent 60%);
}

/* —— 页脚光缘：实线换渐变光线 + 顶部翡翠柔光 —— */
.footer { position: relative; border-top-color: transparent; }
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18, 153, 108, 0.55), transparent);
}
.footer::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 760px; height: 200px;
  max-width: 100%; /* R122：窄屏布局级横向溢出封印——760px 固定宽在 <760px 视口向两侧撑出布局宽，Via 等 WebView 检测到超宽后整页缩放适配 → 页面缩小后上下露原生黑底。max-width:100% 令光晕收敛于 footer 内（radial 渐隐视觉无感），溢出归零 */
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(18, 153, 108, 0.06), transparent 72%);
  pointer-events: none;
}


/* —— 特性/动态卡光缘：与 region/plan 同语言 —— */
.feature-card { position: relative; overflow: hidden; }
.news-card { position: relative; overflow: hidden; }
.feature-card::before,
.news-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18, 153, 108, 0.45), transparent);
  opacity: 0.4;
  transform: scaleX(0.7);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover::before,
.news-card:hover::before { opacity: 1; transform: scaleX(0.88); }

/* —— 降级与移动端 —— */
@media (prefers-reduced-motion: reduce) {
  .aurora { display: none; }
}
@media (max-width: 600px) {
  .aurora { width: 180vw; height: 420px; top: -420px; }
  .page .section:nth-of-type(3)::after { background-size: 20px 20px; }
}

/* ============================================================
   PATCH mj-tap v2 (v10.9.2) · 移动端蓝色矩形框根治
   根因复盘：v1 仅在 html 级设置 tap-highlight（部分国产内核
   X5/UC 不继承或被 UA 覆盖）且按标签枚举收敛 :focus，遗漏
   input/label/自绘控件；触摸滑动误选文本时 ::selection 亦呈
   现蓝色矩形块。
   方案：通配符直接命中所有元素（不依赖继承）+ 全元素 focus
   收敛（仅 :focus-visible 保留翡翠轮廓）+ 全局禁拖选、正文
   语义标签恢复可选中。
   ============================================================ */
html, body {
  -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}
*:focus {
  outline: none;
}
*:focus-visible {
  outline: 2px solid rgba(11, 122, 84, 0.55);
  outline-offset: 2px;
  border-radius: 3px;
}
/* 触摸滑动误选防御：全局禁拖选，语义文本标签恢复可复制 */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
p, h1, h2, h3, h4, h5, h6, article, li, blockquote {
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================================
   PATCH mj-perf (v10.9.3) · 触屏滑动性能 / 渲染加速
   卡顿根因：fixed 顶栏 .nav.scrolled 的 backdrop-filter(16px)
   在滚动时需对下方内容实时重采样模糊（移动端 GPU 昂贵，掉帧主因）；
   多处玻璃元素同理。方案：触屏设备统一去毛玻璃改纯色（视觉无损），
   并用 content-visibility 跳过屏外区块渲染。
   ============================================================ */
/* 屏外内容跳过渲染：长页面滚动更顺、首屏更快（hero 不跳过避免高度抖动）
   R11-4 触屏封印：content-visibility 在触屏设备上滚动切入/切出时
   反复重排重栅格化，实测为滚动卡顿源（项目教训在案）——仅精确指针
   设备保留此优化，触屏全量常规渲染 */
@media (hover: hover) and (pointer: fine) {
  .section { content-visibility: auto; contain-intrinsic-size: auto 620px; }
  #hero { content-visibility: visible; }
}
/* 触屏：毛玻璃降级为纯色（不依赖 JS、不影响桌面观感与交互） */
@media (hover: none), (pointer: coarse) {
  .nav.scrolled { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobile-menu { background: #F6F9F7; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .float-btn { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .float-pop { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* 尊重系统「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ============================================================
   PATCH mj-bottom (v10.9.3) · 官网首页下部饱满度
   新增「信任指标带」+「终极 CTA」，消除下部空旷感，
   以 IDC 行业最关注的 SLA/交付/节点数据建立信任闭环。
   ============================================================ */
.trust-band-sec { padding-top: 6px; }
.trust-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #FFFFFF;
  border: 1px solid var(--line, #DCE6E1);
  border-radius: 20px;
  padding: 36px 20px;
  box-shadow: 0 24px 55px -28px rgba(16, 26, 21, 0.18);
}
.tb-item { text-align: center; position: relative; }
.tb-item + .tb-item::before {
  content: "";
  position: absolute; left: 0; top: 16%;
  height: 68%; width: 1px;
  background: var(--line, #DCE6E1);
}
.tb-num { font-size: 36px; font-weight: 800; color: var(--jade, #0B7A54); letter-spacing: -0.02em; line-height: 1; }
.tb-num span { font-size: 16px; font-weight: 700; margin-left: 2px; }
.tb-label { margin-top: 9px; font-size: 13px; color: var(--ink-4, #5C6B64); }

/* ============================================================
   CTA · 终章 v4「月出」(v10.9.27 · 全层归一重构 + 移动徽章化)
   ① 构图——桌面「内容栏 × 月出舞台」双栏：品牌满月 + 同心
      轨道弧 + 卫星绕行 + 自地平线启程的上升轨迹（叙事＝三步
      交付，终点没入月中）+ 地平辉光，替代旧「左文右空」失衡；
      移动端为 164px「月纹徽章」中轴舞台（环系完整呈现，见
      ≤750px 块注释）。
   ② 性能——深色底时代遗留全部退役：20 颗 radial 星点双层 /
      彗星 drop-shadow / 辉光呼吸缩放 / box-shadow 脉冲死帧；
      现役动画仅 3 路（月浮沉·卫星绕行·状态环），全 transform/
      opacity 合成层；屏外由既有 sky-live 门控冻结。
   ③ 交互——卡起幕后内层接力：lead → 标题 clip-path 擦入（渐变
      字零半透明帧）→ 描述 → 按钮淡升 → 三步级联 + 连接线生长 →
      承诺收尾；月亮以 translate 属性升起（与 transform 浮沉正交）；
      双钮 :active 按压回弹（触屏无 hover 依赖）；RM 全降级。
      编排纪律：隐藏态与显示态同携 html.js 前缀（权重对齐，
      杜绝「隐藏态 (0,3,1) 压过显示态 (0,3,0)」的留守隐患）。
   ④ 转化——主钮改为标题之问的肯定答案「立即部署上线」；承诺
      徽章降为一行 caption（决策点背书保留、三重重复降噪）；
      「全线运行中」状态前移至提问之前。
   归一说明：v2 深夜幕 / v3 新月 / v4 象牙金 / v9 月光白 / 星穹 /
   翡翠重着色六代补丁层全部并回本块（样式单源，删除即干净）。
   ============================================================ */
.cta-sec { padding: 26px 0 72px; }
.cta-card {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  border-radius: 28px;
  padding: clamp(40px, 5.2vw, 68px) clamp(28px, 4.6vw, 72px);
  text-align: left;
  background:
    radial-gradient(640px 380px at 88% -18%, rgba(18, 153, 108, 0.12), transparent 62%),
    radial-gradient(520px 320px at -10% 115%, rgba(20, 201, 140, 0.09), transparent 60%),
    linear-gradient(168deg, #FBFDFC 0%, #F0F7F3 55%, #FBFDFC 100%);
  border: 1px solid rgba(11, 122, 84, 0.20);
  box-shadow: 0 44px 96px -48px rgba(16, 42, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* ---- 月出舞台（右栏装饰 · aria-hidden + pointer-events 关断） ---- */
.cta-stage { order: 2; position: relative; min-height: 460px; pointer-events: none; }
.cta-halo {
  position: absolute; left: 54%; top: 34%;
  width: 330px; height: 330px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 201, 140, 0.15) 0%, rgba(20, 201, 140, 0.05) 46%, transparent 68%);
}
.cta-rings { position: absolute; left: 54%; top: 34%; width: 430px; height: 430px; translate: -50% -50%; }
.cta-rings .ring { stroke: rgba(11, 122, 84, 0.13); stroke-width: 1.2; }
.cta-rings .r2 { stroke: rgba(11, 122, 84, 0.09); }
.cta-rings .r3 { stroke: rgba(11, 122, 84, 0.20); stroke-dasharray: 3 10; stroke-linecap: round; }
.cta-rings .trailp { stroke: rgba(11, 122, 84, 0.30); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.cta-rings .node0 { fill: #CA942C; }
.cta-satorb { transform-box: view-box; transform-origin: 50% 50%; animation: ctaOrbit 46s linear infinite; }
.cta-rings .satglow { fill: rgba(23, 206, 143, 0.22); }
.cta-rings .sat { fill: #17CE8F; }
@keyframes ctaOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cta-luna { position: absolute; left: 54%; top: 34%; width: 148px; height: 148px; translate: -50% -50%; }
.cta-card.is-in .cta-luna { animation: ctaLunaFloat 7.5s ease-in-out infinite; }
@keyframes ctaLunaFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.cta-horizon {
  position: absolute; left: 4%; right: 4%; bottom: 84px; height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(11, 122, 84, 0.18) 30%, rgba(202, 148, 44, 0.38) 56%, rgba(11, 122, 84, 0.10) 82%, transparent 100%);
}
/* ---- 内容栏（左 · 编辑部式） ---- */
.cta-body { order: 1; position: relative; max-width: 560px; }
.cta-lead {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.cta-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #0B7A54;
}
.cta-eyebrow::before {
  content: "";
  width: 30px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #0B7A54);
}
.cta-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(11, 122, 84, 0.22);
  background: rgba(255, 255, 255, 0.85);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  color: #0B7A54;
}
.cta-status .dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: #17CE8F;
  box-shadow: 0 0 0 4px rgba(23, 206, 143, 0.22);
}
.cta-title {
  position: relative;
  font-size: clamp(25px, 3.2vw, 40px);
  font-weight: 800; color: #0F231A;
  letter-spacing: -0.01em; line-height: 1.18;
}
.cta-title span {
  background: linear-gradient(115deg, #0B7A54 10%, #12996C 60%, #17CE8F);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-desc { position: relative; margin: 16px 0 0; max-width: 520px; color: #5B6E65; font-size: 15px; line-height: 1.8; }
.cta-actions { position: relative; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 30px; border-radius: 13px;
  font-size: 15px; font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cta-btn.primary {
  background: linear-gradient(165deg, #0B7A54, #096747);
  color: #FFFFFF;
  box-shadow: 0 14px 34px -12px rgba(11, 122, 84, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cta-btn.primary i { font-size: 13px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.cta-btn.ghost {
  border: 1.5px solid rgba(11, 122, 84, 0.35);
  color: #0B7A54; background: rgba(255, 255, 255, 0.6);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .cta-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -12px rgba(11, 122, 84, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
  html:not(.ry-touch) .cta-btn.primary:hover i { transform: translateX(4px); }
  html:not(.ry-touch) .cta-btn.ghost:hover { border-color: rgba(11, 122, 84, 0.60); background: #FFFFFF; }
}
/* 触屏/按压：即时回弹触感（双端可用，无 hover 依赖） */
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .cta-actions .cta-btn:active { transform: scale(0.965); } /* R76: 同门控 */
}
/* ---- 三步交付路径（与舞台轨迹同构） ---- */
.cta-steps { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.cta-step { display: flex; align-items: center; gap: 11px; }
.cta-step:not(:last-child)::after {
  content: "";
  flex: none;
  width: clamp(14px, 3vw, 54px); height: 1.5px; margin-left: 15px;
  background: linear-gradient(90deg, rgba(11, 122, 84, 0.45), rgba(11, 122, 84, 0.10));
  transform-origin: left;
}
.cs-ico {
  width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(11, 122, 84, 0.30);
  background: linear-gradient(165deg, #FFFFFF, #EFF7F3);
  color: #0B7A54; font-size: 15px;
  box-shadow: 0 10px 26px -14px rgba(11, 122, 84, 0.30);
}
.cs-t { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #2E3D36; }
/* ---- 承诺 caption（决策点背书 · 一行收束） ---- */
.cta-promise {
  position: relative;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px dashed rgba(11, 122, 84, 0.20);
  font-size: 13px; font-weight: 600; color: #5B6E65; letter-spacing: 0.02em;
}
.cta-promise i { font-style: normal; color: rgba(11, 122, 84, 0.45); margin: 0 7px; }
/* ---- 入场编排（卡起幕后内层接力；隐藏/显示态同携 html.js，权重对齐） ---- */
html.js .cta-card .cta-lead,
html.js .cta-card .cta-desc,
html.js .cta-card .cta-promise {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .cta-card .cta-title { clip-path: inset(0 100% 0 0); transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .cta-card .cta-rings,
html.js .cta-card .cta-halo,
html.js .cta-card .cta-horizon { opacity: 0; transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .cta-card .cta-luna { translate: -50% calc(-50% + 30px); opacity: 0; transition: translate 1.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .cta-card.is-in .cta-lead { opacity: 1; transform: none; transition-delay: 0.08s; }
html.js .cta-card.is-in .cta-title { clip-path: inset(-1% -1% -1% -1%); transition-delay: 0.16s; }
html.js .cta-card.is-in .cta-desc { opacity: 1; transform: none; transition-delay: 0.26s; }
html.js .cta-card.is-in .cta-rings,
html.js .cta-card.is-in .cta-halo,
html.js .cta-card.is-in .cta-horizon { opacity: 1; transition-delay: 0.3s; }
html.js .cta-card.is-in .cta-luna { translate: -50% -50%; opacity: 1; transition-delay: 0.12s; }
html.js .cta-card.is-in .cta-promise { opacity: 1; transform: none; transition-delay: 0.62s; }
/* 按钮：淡升接力（投影不受 clip 裁剪，故不用 clip-path） */
@keyframes ryBtnRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* R13 fill 纪律：both → backwards——终帧不再锁定 transform，按压回弹
   :active scale(0.965) 与 hover 位移在动画落定后即时恢复（animation
   填充值在级联中压过普通 author 样式是按钮「无触感」病灶） */
.cta-card.is-in .cta-actions .cta-btn { animation: ryBtnRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.cta-card.is-in .cta-actions .cta-btn:nth-child(1) { animation-delay: 0.12s; }
.cta-card.is-in .cta-actions .cta-btn:nth-child(2) { animation-delay: 0.2s; }
/* 三步：子项级联 + 连接线生长（transform/opacity 全合成层） */
html.js .cta-steps .cta-step {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .cta-step:not(:last-child)::after { transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .cta-card.is-in .cta-step { opacity: 1; transform: none; }
html.js .cta-card.is-in .cta-step:nth-child(1) { transition-delay: 0.3s; }
html.js .cta-card.is-in .cta-step:nth-child(2) { transition-delay: 0.4s; }
html.js .cta-card.is-in .cta-step:nth-child(3) { transition-delay: 0.5s; }
html.js .cta-card.is-in .cta-step:nth-child(1)::after { transform: scaleX(1); transition-delay: 0.48s; }
html.js .cta-card.is-in .cta-step:nth-child(2)::after { transform: scaleX(1); transition-delay: 0.58s; }
/* sky-live 可见性门控（屏外冻结 · 滚入恢复——沿用既有 JS，移动端滚动不为屏外动画买单） */
html.sky-gate .cta-card .cta-satorb,
html.sky-gate .cta-card .cta-luna { animation-play-state: paused; }
html.sky-gate .cta-card.sky-live .cta-satorb,
html.sky-gate .cta-card.sky-live .cta-luna { animation-play-state: running; }
/* ---- 平板（≤1000px）：双栏收窄，舞台等比缩 ---- */
@media (max-width: 1000px) {
  .cta-stage { min-height: 420px; }
  .cta-halo { width: 280px; height: 280px; }
  .cta-rings { width: 350px; height: 350px; }
  .cta-luna { width: 122px; height: 122px; }
}
/* ---- 移动端（≤750px）：单栏 · 「月纹徽章」中轴构图 ----
   根治「圆圈不完整」：旧 148px 月出带把 216px 圆环下缘裁掉 84px——
   重构为徽章化舞台：环系整体缩至 140px 完整置于带内，中心锚点 50%/47%，
   三环 + 卫星轨道 + 轨迹 + 节点全部可见；描边经 vector-effect
   （HTML 属性）以物理像素恒定，CSS 侧重设宽度与虚线密度；
   卫星/节点 fill-box 放大保持小屏可辨；内容全中轴收束（封印式终章）；
   地平线退役为「发射台光池」椭圆辉光（静态渐变零成本）。 */
@media screen and (max-width: 750px) {
  .trust-band { grid-template-columns: repeat(2, 1fr); gap: 26px 8px; padding: 28px 14px; border-radius: 18px; }
  .tb-item:nth-child(3)::before { display: none; }
  .tb-num { font-size: 30px; }
  .cta-card { grid-template-columns: 1fr; gap: 0; padding: 30px 22px 28px; border-radius: 22px; text-align: center; }
  .cta-stage { order: 0; min-height: 164px; overflow: hidden; margin-bottom: 4px; }
  .cta-halo { left: 50%; top: 47%; width: 176px; height: 176px; }
  .cta-rings { left: 50%; top: 47%; width: 140px; height: 140px; }
  .cta-luna { left: 50%; top: 47%; width: 76px; height: 76px; }
  /* 笔画/虚线保真（non-scaling-stroke 下宽度为物理像素；虚线两态渲染均取自适值） */
  .cta-rings .ring { stroke-width: 1.4; }
  .cta-rings .r3 { stroke-dasharray: 8 22; }
  .cta-rings .trailp { stroke-width: 2.4; stroke-dasharray: 6 26; }
  /* 焦点放大：卫星与轨迹起点按 fill-box 各自中心缩放，小屏可辨且零 JS */
  .cta-rings .node0, .cta-rings .sat { transform: scale(1.7); transform-box: fill-box; transform-origin: center; }
  .cta-rings .satglow { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
  .cta-horizon {
    left: 50%; right: auto; bottom: 4px;
    width: 150px; height: 16px;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(75px 8px at 50% 50%, rgba(202, 148, 44, 0.35), rgba(11, 122, 84, 0.12) 55%, transparent 78%);
  }
  /* 徽章入场：缩放落定（translate 锚定与 transform 缩放正交合成，全合成层） */
  html.js .cta-card .cta-rings { transform: scale(0.88); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  html.js .cta-card.is-in .cta-rings { transform: scale(1); }
  .cta-lead { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; }
  .cta-status { padding: 6px 12px; font-size: 10.5px; letter-spacing: 0.04em; }
  .cta-title { font-size: 25px; }
  .cta-desc { font-size: 14px; }
  .cta-actions { flex-direction: column; margin-top: 26px; }
  /* 触感：去系统点灰高亮 + 禁双击缩放延迟——指尖即触即应 */
  .cta-btn { width: 100%; padding: 14px 22px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  /* R11-2 三步路径 stepper 化重排：flex 横排 + wrap 在窄屏把三步
     挤折两行、连接线断位错乱；改 3 列 grid「图标上 · 文字下」中轴
     stepper（交付链叙事的移动端正统形态）。连接线由 flex 伪子改
     绝对定位横线：自本列图标右缘伸向下列图标左缘
     （left 50%+26px / width 100%+gap-52px），scaleX 生长动画、
     0.48/0.58s 错峰编排与 RM 收口经 :not(:last-child)::after
     选择器原样继承，零 JS 零结构改动 */
  .cta-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; }
  .cta-step { position: relative; flex-direction: column; gap: 9px; }
  .cta-step:not(:last-child)::after {
    position: absolute;
    top: 17px;
    left: calc(50% + 26px);
    width: calc(100% - 44px);
    margin-left: 0;
  }
  .cs-ico { width: 36px; height: 36px; font-size: 12.5px; }
  .cs-t { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
  .cta-promise { margin-top: 22px; font-size: 12.5px; }
}
/* ---- reduced-motion：舞台静帧、内层直显（全站 0.01ms 规则之上双保险） ---- */
@media (prefers-reduced-motion: reduce) {
  .cta-satorb,
  .cta-card .cta-luna { animation: none !important; }
  html.js .cta-card .cta-title { clip-path: none !important; }
  html.js .cta-card .cta-luna { translate: -50% -50% !important; opacity: 1 !important; transition: none !important; }
  html.js .cta-card .cta-rings,
  html.js .cta-card .cta-halo,
  html.js .cta-card .cta-horizon,
  html.js .cta-card .cta-lead,
  html.js .cta-card .cta-desc,
  html.js .cta-card .cta-promise,
  html.js .cta-steps .cta-step,
  html.js .cta-step:not(:last-child)::after { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .cta-card.is-in .cta-actions .cta-btn { animation: none !important; }
}

/* ============================================================
   PATCH mj-touch (v10.9.5) · 触屏滑动触碰卡片卡顿 · 双根因根治
   根因一（粘性 hover 重绘）：手指滑过 3 张区域卡 + 4 张方案卡时，
   移动内核把 touch 判定为 hover → 逐卡触发大半径 box-shadow(60px)
   重绘 + ::after 0.9s 光泽扫过 + 抬升过渡 → 主线程掉帧。
   方案：触屏中和全部 hover 特效，改 :active 按压反馈（0.08s 即时
   触感，比 hover 更跟手，无体验降级）。
   根因二（content-visibility 按需渲染撞上滚动）：屏外区块在滚入
   视口瞬间才布局+绘制，恰在 7 卡区段造成滚动期卡顿突发，且
   contain-intrinsic-size 620px 与实际高度不符引发滚动条跳动。
   方案：触屏关闭按需渲染（页面体量小，首屏全量绘制换滚动全程
   合成器直出）。
   附：aurora blur(28px) 130vw 巨型模糊层是移动 GPU 大户
   （有效 alpha 0.065 视觉不可感知）→ 触屏隐藏；
   touch-action 消除点击延迟与双击缩放抖动。
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  /* 根因二：关闭按需渲染，滚动期不再触发即时布局绘制 */
  .section { content-visibility: visible; }
  .feature-card:hover { transform: none; border-color: var(--line); background: linear-gradient(175deg, var(--bg-2), var(--bg-1)); }
  .feature-card:hover .feature-ico { transform: none; box-shadow: none; }
  .news-card:hover { border-color: var(--line); }
  .news-card:hover::before { opacity: 0; }
  .feature-card:hover::after { opacity: 0; }
  /* R50: 卡片 :active 反馈移除——改造内核 :active 滞留使点后高亮/
     缩放挂着不退（=「点卡片异常」）；Netflix 式卡片无按压视觉，
     反馈由卡内按钮的 tPress 独占
     R55: 按钮级 :active 残留亦清——R53 统一通道（tPress/tBack）已
     全量接管触屏按压，此规则只剩被 *:active 归零压制的死代码 */
  /* 附：巨型模糊光带触屏隐藏（GPU 大户，视觉不可感知） */
  .aurora { display: none; }
}
/* 交互元素消除 300ms 点击延迟与双击缩放（行为不变，手感提升） */
a, button, .btn-core, .nav-burger, .float-btn {
  touch-action: manipulation;
}

/* ============================================================
   PATCH mj-mobile (v10.9.5) · MOONLIT JADE MOBILE 专属移动层
   为手机端打造的 App 级官网体验（同一 DOM，移动专属渲染）：
   ① 区域/方案卡 → 横向 Snap 轮播（84% 卡宽露出下一张边角暗示）
   ② 滚过 Hero 后浮出底部粘性转化坞（近 CTA 区自动隐去）
   ③ 全屏移动菜单打开时背景滚动锁定
   ④ 浮坞适配 home-indicator 安全区；特性卡移动双列紧凑排布
   ============================================================ */

/* ③ 移动菜单滚动锁定（汉堡仅移动端显示，桌面无影响） */
body.menu-open { overflow: hidden; }

/* ① Snap 轮播：区域 + 方案（移动专属画廊） */
@media (max-width: 760px) {
  /* R54 carousel 归零重构（R7/R12/R12.1/R33/R49/R50 问题史收敛）：
     原生 overflow-x 滚动 = 移动端最兼容横滑（浏览器原生惯性，零 JS）。
     归零原则——零 hack 零补偿：
     · 删 R33 垂直补偿（padding-block 30px + margin-block -30px）——
       溢出源已从内容侧消灭（见下 reveal 位移归零），无需补偿
     · overflow-y: hidden 显式截断纵向劫持（首滑手势归还页面）
     · R55: scroll-snap 全拆——proximity 吸附在接近停靠点时
       浏览器介入减速、远离时自由滑（=「一会快一会慢」的根因），
       自由式匀速惯性（Netflix 早期模式）手感全程一致
     · overscroll-behavior-x: contain 防横向链滚
     · -webkit-overflow-scrolling: touch 老内核惯性保障
  .plan-price .num { font-size: 23px; }

  /* ② 粘性转化坞在场时浮坞抬升让位 */
  body.cta-dock-on .float-dock { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  /* ④ 浮坞：安全区 + 44px 触达 */
  .float-dock { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .float-btn { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
  .float-pop { right: 52px; min-width: 200px; padding: 15px; }
  .float-pop img.qr { width: 110px; height: 110px; }
}

/* ④ 特性卡移动双列紧凑排布 */
@media (max-width: 600px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .feature-card { padding: 20px 16px; border-radius: 14px; }
  .feature-ico { width: 38px; height: 38px; font-size: 16px; border-radius: 11px; margin-bottom: 12px; }
  .feature-title { font-size: 14px; }
  .feature-desc { font-size: 12px; line-height: 1.7; }
  .section { padding: 56px 6vw; }
  .section-head { margin-bottom: 34px; }
}

/* ② 底部粘性转化坞：滚过 Hero 浮出，接近 CTA 区隐去（JS 驱动） */
.mobile-cta-dock {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 155;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px -12px rgba(16, 26, 21, 0.18);
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-cta-dock.show { transform: translateY(0); }
.mcd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mcd-t1 { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: 0.01em; }
.mcd-t2 { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcd-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  background: linear-gradient(165deg, #0B7A54, #096747);
  box-shadow: 0 8px 20px -8px rgba(11, 122, 84, 0.45);
  transition: transform 0.2s var(--spring, ease);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .mcd-btn:active { transform: scale(0.96); } /* R76: 同门控 */
}
@media (max-width: 760px) {
  .mobile-cta-dock { display: flex; }
}

/* ============================================================
   PATCH mj-mobile v2 (v10.9.6) · 手机端官网 6 项取证问题根治
   （390px iframe 分段截图取证：hero-stats 挤压 / 浮球组遮挡 /
    snap 居中停位 / 特性双列过窄 / 标题孤字 / 底坞遮挡页脚）
   本块位于文件尾，同权重后来者胜，覆盖 10.9.5 旧值。
   ============================================================ */

/* ① hero-stats：四列 flex 在 390px 下挤压截断（取证：数值 .24h/30 被切）
      → 2×2 网格，数字 24px、标签 11.5px，呼吸感恢复 */
@media (max-width: 760px) {
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
    padding-top: 26px;
  }
  .stat { gap: 4px; }
  .stat-num { font-size: 24px; }
  .stat-label { font-size: 11.5px; letter-spacing: 0.04em; }

  /* ② 浮球组（客服/工单/微信/公告）手机隐藏：
     四球竖排 200px+ 竖条贴右缘，取证与主按钮、轮播卡重叠侵入；
     手机端转化由底部粘性转化坞 + 全屏菜单承担（业界范式：
     移动端不再叠悬浮球），PC 保留不动 */
  .float-dock { display: none; }

  /* ③ 卡宽/出血精调（10.9.5 层，R55 拆 snap 后仅保留几何项）：
     - 卡宽 78%：下张露出约 22%，App Store 级 peek 滑动暗示
     - 出血 5.5vw：首卡左缘贴近安全边距
     - R55: scroll-snap-align/scroll-padding 已拆——snap-type
       归零后两者为死代码，清除防将来复发 */

  /* ⑥ 页脚底部预留转化坞高度：滚动到页脚区时任何状态下
        最后内容不被 fixed 底坞压死（dock 接近 CTA 已提前离场，
        此为双保险，padding 恒定不随 dock 显隐抖动） */
  .footer { padding-bottom: 64px; }
}

/* ④ 特性卡：双列 166px 窄卡 12px 字挤成 5 行（取证 g4）
      → 单列横排条目（图标左置 44px + 右侧标题/描述，
      iOS 设置行范式）；PC 端 .feature-body display:contents 完全无感 */
.feature-body { display: contents; }
@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
  }
  .feature-body { display: block; }
  .feature-ico { width: 44px; height: 44px; font-size: 18px; border-radius: 13px; margin-bottom: 0; flex: none; }
  .feature-title { font-size: 15px; }
  .feature-desc { font-size: 12.5px; line-height: 1.7; margin-top: 5px; }
}

/* ⑤ Hero 标题孤字（取证 g1：「在」单独成行）：
      44px 下「把业务，部署在」7 字逼近可用宽上限，内核差异
      导致断行出孤字 → 收窄字号下限 + 两行 span 禁折行（DOM 本就
      手动分两行，折行只会产生孤字劣化） */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(34px, 9.4vw, 44px); }
  .hero-title .line span { white-space: nowrap; }
}

/* ============================================================
   PATCH mj-v3 (v10.9.7) · 品牌 & 节奏 & 终章 三位一体升级
   ① 品牌：新月轨道标（inline SVG）。旧 logo 位图取证：3520×772
      不透明纯白底 + 蓝色渐变图形——白矩形硬贴薄荷画布 + 撞色
      （违反禁蓝紫约束）+「云+扳手」旧构图与月光翡翠叙事脱节，
      三重冲突即「格格不入」根因。SVG 标无底盒、翡翠渐变、
      月/轨道概念与品牌同名同构；后台上传文件不动，仅模板引用。
   ② 节奏：plans 升级「夜幕绿段」——打破全站亮色画布的均质感，
      形成亮(奇)-暗(偶)呼吸节奏：夜幕中亮卡对比直接解「单调」。
   ③ 第二色层：琥珀金徽章 + 退款保障金数（平台色板仍禁蓝紫）。
   ④ 层级：区域卡机场码大字水印，地图集质感。
   ⑤ CTA 终章 v3：新月可视化 + 全节点运行状态 + 三步交付路径。
   ⑥ m3 首访上移：取证（iframe 1s/4s/6s 像素级零位移）排除结构
      性布局漂移；根因锁定入场编排——riseIn 22px 长程错峰漂浮
      持续 1.7s，真机观感即「整体缓缓上移」。移动端收敛为
      10px 短程快编排（0.9s 内整块落定），公告弹窗延后避撞。
   ============================================================ */

/* ① 品牌标 */
.footer .ry-mark { width: 44px; height: 44px; display: block; }

/* ③ 退款保障金数（#935F0A 对白底 5.41:1，AA） */
.stat-amber .stat-num { color: #935F0A; }
.stat-amber .stat-num .unit { color: #935F0A; }


/* ② plans 夜幕绿段 */
.plans-night {
  background:
    radial-gradient(760px 420px at 88% 8%, rgba(20, 201, 140, 0.10), transparent 62%),
    radial-gradient(640px 380px at 4% 96%, rgba(13, 148, 104, 0.09), transparent 60%),
    linear-gradient(168deg, #0D231A 0%, #091B13 55%, #071410 100%);
}
.page .section.plans-night::before { background: none; }
.page .section.plans-night::after {
  background-image: radial-gradient(rgba(60, 230, 166, 0.10) 1px, transparent 1.4px);
}
.plans-night .section-eyebrow { color: #3CE6A6; }
.plans-night .section-title { color: #F4FBF7; }
.plans-night .section-title .em {
  background: linear-gradient(115deg, #57E6B0 8%, #14C98C 60%, #0FA372);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plans-night .section-desc { color: rgba(228, 242, 235, 0.66); }

/* ⑤ CTA 终章 v3 新月可视化：已由「终章 v4 · 月出舞台」整体取代（样式归一于 CTA 基座块） */

/* ⑥ m3 入场收敛 → R11-1 移动端浮现节奏再校准：
      0.55s 短平快被判定「浮现稍快」——两行标题近乎同拍快闪、
      全链 0.9s 落定缺少庄重感。再平衡：标题揭幕 0.55s→0.82s、
      次行错峰 0.08s→0.16s（主句行进中、月光句接棒，预期感成立）；
      短程 10px 行程保留（m3「上移感」教训不回潮），余链 0.6s 行程
      以 0.34/0.46/0.58s 接力，整幕 ~1.2s 落定——比旧编排舒展 30%
      仍不失轻快；公告自动弹出 1.8s 在幕落后，时序不撞 */
@keyframes riseInM {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 750px) {
  .hero-eyebrow { margin-bottom: 20px; animation: riseInM 0.52s 0.08s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .hero-title .line span { animation-duration: 0.66s; }
  .hero-title .line:nth-child(2) span { animation-delay: 0.12s; }
  .hero-sub { margin-bottom: 32px; animation: riseInM 0.52s 0.26s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .hero-actions { margin-bottom: 56px; animation: riseInM 0.52s 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  /* R104c · stats 入场保持 forwards（结构性依赖，R104b 误判回撤）：
     riseInM 家族基础 opacity:0，入场终帧 1 由 forwards 填充持有=
     「动画即可见性」——backwards 会使入场结束后回落基础 0=stats
     永久隐形（T2/T3 实测 0 实锤，R104b 存量违例判断错误：该纪律
     针对交互元素入场 vs 交互样式冲突，非此「动画即可见性」模式）。
     stats 渐隐改走 .hero-stats-wrap 包裹层（无动画=通道畅通），
     与 .hero-core 同构——动画钉死与谢幕渐隐分属两层互不相扰 */
  .hero-stats { animation: riseInM 0.52s 0.46s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
}

@media screen and (max-width: 750px) {
}

/* ============================================================
   PATCH mj-v4 (v10.9.9) · 滑动根治 + 四相色板 + 排版层级
   ① 首滑跳动根因根治：横滑容器（regions/plans 轮播）内的卡片
     挂了 .reveal 入场类——右侧卡初始不在视口，首次横滑时 IO
     才触发 0.8s translateY(34px)+opacity 入场过渡，卡片在
     手指滑动中上浮渐显 = 「首次滑动异常，后续正常」（IO 触发
     一次即 unobserve）。移动端横滑形态下禁用该动画，卡片随
     滑随在；PC 端 3 列网格形态保留入场编排不受影响。
   ② scroll-snap-stop: always：iOS 惯性滑动一次只翻一张，
     不再飞过 2-3 张停在错位位置（App Store 级轮播规范）。
   ③ 四相色板（打破绿色单相单调）：
     主色 翡翠辉光 #0B7A54（品牌根基）
     辅色 夜幕深绿 #0D231A（夜空段）
     点缀A 月尘暖金 #A2680A / 亮金 #E3B963（深底）
     点缀B 薄荷辉光 #17CE8F / #3CE6A6（深底高亮）
   ④ 章节编号 sec-no：杂志级排版层级，金线编号 + 翡翠眉题双色
   ⑤ Hero 晨昏双色光：右暖金光斑 × 左翡翠微光，冷暖呼应
   ============================================================ */

/* ① 横滑容器 reveal 分治（移动端横滑形态：首卡起幕、待滑卡随滑随在）
   v10.9.24：整片禁动画的旧方案让手机端「热门方案/可用区域」失去
   全部浮现——改为 JS 逐卡判定（视口内首卡保留起幕，视口外卡标
   .off 直显），首滑跳动不复发、浮现体验回归
   R13 修复：.off 直显原锁在 ≤760px 媒体查询内——手机上注册的
   off 卡从未入队 IO（JS 注册即 return），窗口拉宽到桌面后媒体
   查询失效、又无 IO 兜底 → 卡片永久隐藏。该类仅在移动注册时
   挂载，提升为全局直显零副作用（桌面无该类、resize 边界自愈） */
html.js .reveal.off { opacity: 1; transform: none; transition: none; }
/* ③ 四相色板变量（点缀色正式化） */
:root {
  --gold: #A2680A;
  --gold-deep: #7E5209;
  --gold-glow: rgba(202, 148, 44, 0.08);
  --gold-bright: #E3B963;
  --mint: #17CE8F;
  --mint-bright: #3CE6A6;
}

/* ⑤ Hero 晨昏双色光：右暖金光斑（与左下翡翠辉光冷暖呼应） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(720px 360px at 86% 8%, var(--gold-glow), transparent 62%);
}

/* ④ 章节编号：金编号 + 金渐变短线，与翡翠眉题形成双色节奏 */
.sec-no {
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.14em;
  margin-right: 14px;
}
.sec-no::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 1px;
  margin-left: 12px;
  background: linear-gradient(90deg, rgba(162, 104, 10, 0.55), transparent);
}
/* 夜幕段亮金变体（深底 AA 对比） */
.plans-night .sec-no { color: var(--gold-bright); }
.plans-night .sec-no::after {
  background: linear-gradient(90deg, rgba(227, 185, 99, 0.60), transparent);
}


/* 信任指标带：金→翡翠渐变顶线（白卡上的双色点睛） */
.trust-band { position: relative; }
.trust-band::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(162, 104, 10, 0.45), rgba(18, 153, 108, 0.45), transparent);
}

/* 页脚顶线双色：月尘金 × 翡翠辉光（全站色彩叙事收尾） */
.footer::before {
  background: linear-gradient(90deg, transparent, rgba(162, 104, 10, 0.40), rgba(18, 153, 108, 0.55), transparent);
}

/* ============================================================
   PATCH mj-v5 (v10.9.10) · 深色卡面「月华」重设计
   用户反馈：热门方案卡与 CTA 卡深绿底难看。
   根因：纯绿叠绿（段背景绿光斑 + 卡底绿渐变 + 薄荷绿描边），
   缺明度节奏与色温对比 → 沉闷发暗。
   v2 方案（Stripe/Linear 级深色卡面语言）：
   - 底：纵向三段渐变（上微亮 → 中过渡 → 极深），建立纵轴明度节奏
   - 光：顶部「月华金」光晕（呼应品牌「入月」+ 金色点缀系）
   - 边：玻璃白高光描边替代绿描边（破除绿叠绿）
   - 质：inset 顶部高光 + 底部暗线锁边 → 景深立体感
   - 顶线：金→薄荷双色渐变（呼应信任带顶线）
   ============================================================ */

/* CTA 终章同语言重做（深色时代）：已退役——浅色「终章 v4」基座块为单源（本层曾依赖 v9 后置覆盖压制，归一后必须清除以防深色回潮） */

/* ============================================================
   PATCH mj-v6 (v10.9.11) · 品牌字艺术化（双处）
   nav 导航品牌字 + footer 首列品牌字：翡翠→薄荷渐变字标
   （与新月标渐变同源）+ 900 字重 + 0.06em 宽字距 + 微光晕。
   clip-text 只作用于文本节点（SVG 新月标 fill 自持不受影响）；
   drop-shadow 光晕对字标与新月标统一加成。
   ============================================================ */
.nav-logo,
.footer-grid > div:first-child {
  background: linear-gradient(115deg, #0B7A54 15%, #17CE8F 55%, #0B7A54 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 1px 6px rgba(11, 122, 84, 0.18));
}

/* ============================================================
   PATCH mj-v7 (v10.9.12) · 品牌字张扬化
   用户反馈：可以张扬一点，色调不要太单一——单绿渐变升级为
   金绿撞色三段渐变（亮金→薄荷→翡翠→亮金，首尾金呼应月尘金
   点缀系），光晕增强、字距加宽。双处同步（nav + footer）。
   ============================================================ */
.nav-logo,
.footer-grid > div:first-child {
  background: linear-gradient(115deg, #E3B963 0%, #17CE8F 38%, #0B7A54 62%, #E3B963 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  letter-spacing: 0.08em;
  filter: drop-shadow(0 1px 8px rgba(11, 122, 84, 0.30));
}

/* ============================================================
   PATCH mj-v8 (v10.9.13) · 亮色纪元 + 沉浸式滑条
   用户定调：不要暗色系——夜幕段与 CTA 终章全部亮色化重设计。
   ① 热门方案段：薄荷瓷渐变亮段 + 白玻璃卡（翡翠描边、金顶线）
   ② CTA 终章：象牙金渐变亮卡（金描边、月华光斑亮化）
   ③ 沉浸式滑条：官网 viewport 滑条翡翠渐变胶囊（8px 半悬浮）
   覆盖 v3/v5 全部深色规则（同特异性后者胜）。
   ============================================================ */
/* ① 热门方案段亮色化 */
.page .section.plans-night {
  background: linear-gradient(180deg, #F2F8F4 0%, #E9F3EE 55%, #F6FAF7 100%);
}
.page .section.plans-night::before { background: none; }
.page .section.plans-night::after {
  background-image: radial-gradient(rgba(11, 122, 84, 0.10) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.5;
}
.plans-night .section-eyebrow { color: #0B7A54; }
.plans-night .section-eyebrow .sec-no { color: #A2680A; }
.plans-night .section-title { color: #0F231A; }
.plans-night .section-title .em {
  background: linear-gradient(115deg, #0F231A 25%, #0B7A54 70%, #17CE8F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plans-night .section-desc { color: #5B6E65; }
/* ② CTA 终章象牙金亮卡：历史层退役（配色演进链 v2 深夜幕 → v4 象牙金 → v9 月光白，现归一于「终章 v4」基座块） */
/* ③ 沉浸式滑条（官网 viewport，Stripe/Linear 级 overlay 语言） */
html { scrollbar-width: thin; scrollbar-color: rgba(11, 122, 84, 0.45) transparent; }
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(18, 153, 108, 0.38), rgba(11, 122, 84, 0.58));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(11, 122, 84, 0.55), rgba(9, 103, 71, 0.78));
  background-clip: padding-box;
}

/* ============================================================
   PATCH mj-v9 (v10.9.14) · 月光冷调 CTA + 降黄 + 滚动减压
   用户反馈：①CTA 象牙金太黄且白字融入背景（v3 深底白字遗留）
   ②改后卡顿。全案：
   ① CTA 弃黄改「月光白+薄荷雾」冷调，全部深底遗留白字反转
      为墨字（对比度 15:1 / 4.7:1），primary 白钮改翡翠实心钮；
   ② plans 段金光晕翡翠化（降黄，金只留徽章/编号点缀）；
   ③ 减压：手机端（hover:none）卡片删无效 --mx 光斑层
      （少一层 radial 重绘）；官网自定义滑条 coarse 设备隐藏
      （原生 overlay 接管，省常驻重绘）；PC tilt 由 JS rAF 节流。
   ============================================================ */
/* ③b 官网自定义滑条：精细指针设备才呈现（手机原生 overlay 接管） */
@media (pointer: coarse) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }
}

/* ============================================================
   PATCH mj-v10 (v10.9.15) · 平台特性卡顶尖重设计
   「为生产环境而设计」段 feature-card 升级：
   - 冷瓷绿微渐变白底 + 顶部翡翠微光晕（与 plans 卡同语言更收敛）
   - 标志性金→翡翠渐变顶线（hover 点亮）
   - hover 翡翠光斑 + 深投影 + 图标光化
   - 图标座渐变化 + 玻璃高光描边
   ============================================================ */
.feature-card {
  background:
    radial-gradient(300px 160px at 50% -30%, rgba(18, 153, 108, 0.08), transparent 66%),
    linear-gradient(175deg, #FFFFFF 0%, #F4F9F6 100%);
  border: 1px solid rgba(11, 122, 84, 0.12);
  box-shadow:
    0 2px 6px rgba(16, 26, 21, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(227, 185, 99, 0.55), rgba(18, 153, 108, 0.55));
  opacity: 0.55;
  transform: scaleX(0.76);
  z-index: 1;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 122, 84, 0.38);
}
.feature-card:hover::before {
  opacity: 1;
  transform: scaleX(0.88);
}
.feature-ico {
  background: linear-gradient(165deg, rgba(18, 153, 108, 0.12), rgba(11, 122, 84, 0.06));
  border: 1px solid rgba(11, 122, 84, 0.26);
  box-shadow: 0 6px 16px -8px rgba(11, 122, 84, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.feature-card:hover .feature-ico {
  box-shadow: 0 0 24px -4px rgba(18, 153, 108, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* 手机端减压（同 mj-v9 光斑豁免） */
@media (hover: none) {
  .feature-card {
    background: linear-gradient(175deg, #FFFFFF 0%, #F4F9F6 100%);
  }
}

/* ============================================================
   PATCH ry-mcd (v10.9.16) · 移动端底部转化坞「高度异常」根治
   根因取证（390px iframe 实测）：
   ① 不支持 env() 的内核（微信 X5 / 老 WebView）解析
      `padding: 10px 16px calc(10px + env(...))` 失败时整条声明
      丢弃，且无前序 fallback → padding 塌陷为 0，dock 高度
      64px → 44px，文字贴边（实测复现）。
   ② .mcd-t1 无 nowrap：系统字体放大（安卓 1.3x+）或 ≤350px
      窄屏时折行，dock 高度跳变 64 → 82px。
   ③ .mcd-t2 11.5px 小数字号在部分安卓内核渲染行高不稳，
      且 375px 档文案已截断（实测 t2Trunc=true）。
   方案：fallback 三重奏 + 单行锁定 + 高度下限锁 + 让位对齐。
   ============================================================ */

/* ① padding 三重奏：普通值兜底 → constant()（iOS 11.0-11.2）
      → env()（标准）。任何内核都有 10px 底部呼吸空间 */
.mobile-cta-dock {
  padding: 10px 16px 10px;
  padding: 10px 16px calc(10px + constant(safe-area-inset-bottom, 0px));
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  /* ④ 高度下限锁：字体缩放/内核怪癖下不塌破 56px，
        flex align-items:center 保证内容始终垂直居中 */
  min-height: 56px;
}

/* ② t1 单行锁定：字体放大/窄屏只截断不折行，高度恒定 */
.mcd-t1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ③ t2 字号整数化 */
.mcd-t2 { font-size: 12px; }

/* ⑤ 页脚让位与 dock 实高对齐（原 64px 硬编码在带安全区
      的 iPhone 上 dock 实高 98px 会让位不足；同样走三重奏） */
@media (max-width: 760px) {
  .footer {
    padding-bottom: 64px;
    padding-bottom: calc(64px + constant(safe-area-inset-bottom, 0px));
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  body.cta-dock-on .float-dock {
    bottom: calc(64px + constant(safe-area-inset-bottom, 0px));
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   PATCH ry-motion (v10.9.17) · 全球顶级动效层级收官
   在既有体系（IO reveal / tilt+光泽 / 磁性按钮 / 极光带 / 触屏
   中和 mj-tap）之上补齐最后四块拼图：
   ① 阅读进度光带（scaleX 合成层变换，rAF 合帧）
   ② Hero 滚动离场视差（内容 0.16x 上浮渐隐 + 网格 0.08x，JS 驱动）
   ③ 触感按压光环（主 CTA :active 翡翠扩散环 + 按压深度）
   ④ 微交互群升（特性图标微升 / 信任带数字卡 / Hero 数据卡 /
      资讯行进给 / 导航按钮按压）
   纪律：全部 transform/opacity/box-shadow——零重排零重绘；
   不新增滚动开销（与既有 passive+rAF 同模式）；reduced-motion
   与 hover:none 双降级。
   ============================================================ */

/* ① 阅读进度光带：2px 品牌渐变随滚动伸长（scaleX 无布局成本） */
.ry-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 1300; /* 压过 nav(100)，不挡任何交互 */
  pointer-events: none;
  background: linear-gradient(90deg, #3CE6A6 0%, #0B7A54 55%, #085C3F 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ② Hero 离场视差由 JS 写入 .hero-inner/.hero-grid 的
      transform/opacity（两者基态均无 transform，零冲突） */

/* ③ 触感按压（R59: PC 与触屏统一纪律——纯 transform，零 box-shadow
      参与。R50 时代的 :active spread ring（0 0 0 6px 无 blur 实色环）
      沿圆角呈现为「矩形圆角阴影边框」，且 :active 期间整体替换基态
      大投影（投影消失→变环→松开投影回归）= 突兀扎眼——R50 在触屏
      端消灭的正是此机制，PC 端漏了同款处理，R59 补完。基态投影
      全程恒定，按压深度由 scale 独占） */
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .cta-btn.primary:active { transform: translateY(0) scale(0.97); }
  .nav-btn.solid:active,
  html:not(.ry-touch) .nav-btn.ghost:active { transform: scale(0.95); }
  /* R60: hero 双按钮（btn-core）带 .magnetic——JS 磁性跟随写 inline
     transform，压住 .btn-core:active 的 scale（R59 删 ring 后按压视觉
     归零 =「没有回弹和按压效果」的根因）。!important 穿透 inline；
     0.08s 快压进入，松开走基态 0.2s ease-out =「快压慢弹」手感。
     必须包 hover:hover 门：裸 !important 会压过触屏 *:active 归零
     （important 下特异性高者胜），破坏 R48 滞留防御 */
  html:not(.ry-touch) .btn-core:active {
    transform: scale(0.96) !important;
    transition-duration: 0.08s;
  }
}

/* ④ 微交互群升——仅精确指针设备，触屏走 mj-tap 中和层 */
@media (hover:hover) and (pointer:fine) {
  /* 特性图标微升（基态已有 spring transition） */
  .feature-card:hover .feature-ico { transform: translateY(-3px) scale(1.06); }
  /* 信任带数字卡：层进反馈 + 数字辉光 */
  .tb-item { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .tb-item:hover { transform: translateY(-3px); }
  .tb-item:hover .tb-num { filter: drop-shadow(0 6px 14px rgba(18, 153, 108, 0.30)); }
  /* Hero 数据卡微升 */
  .stat { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .stat:hover { transform: translateY(-3px); }
  /* 资讯行进给（GPU 变换，非 padding 布局位移） */
  .news-item { transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
  .news-item:hover { transform: translateX(4px); }
}

/* 降级一：reduced-motion——微交互全关，进度光带保留（位置反馈
   非装饰动画，且无 transition，直接跟随滚动位置） */
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover .feature-ico,
  .tb-item:hover,
  .stat:hover,
  .news-item:hover { transform: none; }
  .tb-item:hover .tb-num { filter: none; }
}

/* ============================================================
   PATCH ry-brand2 (v10.9.18) · 品牌 v2 全站升级
   ① 入月 mark v2：翡翠月盘 × 靛蓝「入」字升势 × 琥珀星——纯平色
     斩除老式渐变；多色系（翡翠/靛蓝/琥珀/白描边）注入品牌活力；
   ② 字标重构：「入月」靛蓝 900 ×「云计算」墨黑 800 双色对比；
   ③ 页脚品牌区补英文副题（编辑部级 letterspacing 排印）；
   ④ 导航标 hover 微交互：琥珀星旋转绽放（合成层变换）。
   ============================================================ */
.ry-word { display: inline-flex; align-items: baseline; font-weight: 900; letter-spacing: 0.05em; }
.ry-word .w1 { color: #0B7A54; }
.ry-word .w2 { color: #131B16; font-weight: 800; letter-spacing: 0.02em; }
.footer-brand-name .w1 { color: #0B7A54; font-weight: 900; }
.footer-brand-name .w2 { color: #131B16; font-weight: 800; }
.footer-brand-en {
  margin: 3px 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-4);
}
/* v3 起 mk-star 移除，hover 微交互由 PATCH ry-brand3 的 mk-arc 轨道滑动接管 */

/* ============================================================
   PATCH ry-menu2 (v10.9.18) · 移动全屏菜单交互闭环
   点空白处关闭（JS 已挂 #mobileMenu click）+ ESC + 菜单展开时
   锁定背景滚动（全屏层标准行为，防背景穿透滚动）。
   ============================================================ */
body.menu-open { overflow: hidden; }

/* ============================================================
   PATCH ry-mcd2 (v10.9.18) · 移动转化坞「跨浏览器高度异常」终局
   复盘 ry-mcd：留白残留的唯一变量 = env(safe-area-inset-bottom)
   作为 padding 拉高卡片——支持 env 的内核（iPhone/手势导航安卓）
   卡片多出 20-40px 底部空白条，不支持的内核没有 →「有的浏览器
   正常、有的下方一段留白」的跨浏览器不一致由此而生。
   方案（业界浮层坞范式，一劳永逸）：满血栏 → 悬浮药丸卡。
   ① 卡片本体不再吞安全区：安全区只影响 bottom 定位（卡下露出的
     是页面背景，任何内核下视觉恒一致，留白感根除）；
   ② 底部定位三重奏保留（constant()/env() 全兼容）；
   ③ 白实底 + 全向投影 + 18px 圆角 + 发丝边——浮动卡层级质感；
   ④ min-height 56 / t1 nowrap / t2 12px 高度锁全数继承。
   ============================================================ */
.mobile-cta-dock {
  left: 12px;
  right: 12px;
  bottom: 10px;
  bottom: calc(10px + constant(safe-area-inset-bottom, 0px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 9px 10px 9px 16px;
  border: 1px solid rgba(16, 26, 21, 0.08);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow:
    0 16px 42px -14px rgba(16, 26, 21, 0.30),
    0 2px 10px -4px rgba(16, 26, 21, 0.10);
  transform: translateY(140%);
}
@media (max-width: 760px) {
  .footer {
    padding-bottom: 72px;
    padding-bottom: calc(72px + constant(safe-area-inset-bottom, 0px));
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   PATCH ry-region2 (v10.9.18) · 「选择你的全球节点」层级过渡精修
   既有编排（3D 倾斜/光泽扫过/顶光线）之上补「内层合唱」：
   悬停时节点名滑向品牌绿、机场码字距展开、规格行阶梯进给
   （transform 合成层，阶梯 delay；回程统一收拢）——层级过渡
   从「生硬跳变」升为「有序展开」。仅精确指针设备；触屏走
   mj-tap 按压中和层，reduced-motion 由全站规则兜底。
   ============================================================ */

/* PATCH ry-ctasky「夜幕星穹」：整体退役——深色底时代的星层/彗星/辉光呼吸已由「终章 v4 · 月出」浅色归一设计取代（舞台见 CTA 基座块） */

/* ============================================================
   PATCH ry-brand3 (v10.9.19) · 品牌 v3「新月·翡翠」
   ① 去星：琥珀四芒星移除，改琥珀新月弧沿月肩环抱——「入月」
     意象闭环（入字升势 × 月弧环月），全站无星无蓝紫；
   ② 禁蓝紫：「入月」字标靛蓝 #0B7A54 → 深翡翠 #0B7A54（与
     月盘同源同频），「云计算」墨黑不变——双色对比保留；
   ③ hover 微交互迁移：星旋转绽放 → 新月弧沿轨道绕月心滑动
     （view-box 变换，绕月盘圆心 -24°，合成层）。
   ============================================================ */
.ry-word .w1,
.footer-brand-name .w1 { color: #0B7A54; }
.nav-logo .mk-arc {
  transform-box: view-box;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 触屏粘性 hover 根治（v10.9.21）：弧滑动仅在真悬停设备生效；
   触屏端以 :active 按压反馈替代（见 PATCH ry-v11），滑动离开不再滞态 */
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .nav-logo:hover .mk-arc { transform: rotate(-24deg); }
}

/* ============================================================
   PATCH ry-pulse (v10.9.20) · 平台动态期刊化 + CTA 流畅性根治
   ① 新闻/公告「期刊式」重设计：广播横幅（电台 Pulse 语言：
     呼吸环 + 频道标 + 标题流）+ 条目日期章（日大月小）+
     7 天 NEW 徽章 + 合成层骨架屏；
   ② CTA 星点翡翠重着色：v10.9.18 星穹为深卡设计的白点，
     mj-v9 转浅卡后几乎不可见——全层换翡翠墨点（雾面星座）；
   ③ sky-live 可见性门控：屏外动画层全部 paused，滚入恢复
     （html.sky-gate 由 JS 打标，无 JS 永不暂停）；
   ④ dot 脉冲重写：box-shadow 逐帧重绘 → 伪元素 scale/opacity
     合成层圆环（根治 CTA 卡在视野内的持续重绘）；
   ⑤ 移动端减负：彗星去 filter、星层 inset 收窄；
   ⑥ 键盘可达性：focus-visible 焦点环。
   ============================================================ */

/* ---------- ① 新闻区 · 期刊式 ---------- */
/* 广播横幅：最新公告置顶播报（[hidden] 防御 display:flex 覆盖） */
.broadcast {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
  padding: 11px 16px 11px 14px;
  border-radius: 14px;
  background:
    linear-gradient(100deg, rgba(11, 122, 84, 0.08), rgba(255, 255, 255, 0.94) 26%, rgba(255, 255, 255, 0.94) 74%, rgba(20, 168, 118, 0.07));
  border: 1px solid rgba(11, 122, 84, 0.20);
  box-shadow:
    0 14px 32px -22px rgba(16, 42, 30, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.broadcast[hidden] { display: none; }
.bc-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #17CE8F;
}
.bc-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(23, 206, 143, 0.55);
  animation: ryRing 2.2s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes ryRing {
  0%        { transform: scale(0.5); opacity: 0.85; }
  70%, 100% { transform: scale(2.05); opacity: 0; }
}
.bc-k {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #0B7A54;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(11, 122, 84, 0.08);
  border: 1px solid rgba(11, 122, 84, 0.24);
}
.bc-t {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: color 0.22s;
}
.bc-t:hover { color: var(--jade); }
.bc-d {
  flex: none;
  font-size: 12px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.bc-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0B7A54;
  text-decoration: none;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(11, 122, 84, 0.28);
  background: rgba(255, 255, 255, 0.75);
  transition: border-color 0.22s, background 0.22s, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.bc-link:hover { border-color: rgba(11, 122, 84, 0.55); background: #FFFFFF; transform: translateY(-1px); }
.bc-link i { font-size: 11px; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.bc-link:hover i { transform: translateX(2px); }

/* 期刊条目：日期章为视觉锚点，标题 + 辅行日期 + 箭头 */
.ni-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.22s;
}
.ni-item + .ni-item { margin-top: 2px; }
.ni-item:hover { background: rgba(11, 122, 84, 0.045); }
.ni-date {
  flex: none;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 0 6px;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(11, 122, 84, 0.08), rgba(11, 122, 84, 0.03));
  border: 1px solid rgba(11, 122, 84, 0.14);
  transition: border-color 0.25s, background 0.25s;
}
.ni-item:hover .ni-date { border-color: rgba(11, 122, 84, 0.32); background: linear-gradient(165deg, rgba(11, 122, 84, 0.12), rgba(11, 122, 84, 0.05)); }
.ni-date b {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: #0B7A54;
  font-variant-numeric: tabular-nums;
}
.ni-date i {
  font-style: normal;
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 3px;
  letter-spacing: 0.05em;
}
.ni-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ni-t {
  font-size: 14px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.22s;
}
.ni-item:hover .ni-t { color: var(--jade); }
.ni-new {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0B7A54;
  background: rgba(23, 206, 143, 0.18);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 1.5px;
}
.ni-d {
  font-size: 11.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.ni-go {
  flex: none;
  color: var(--ink-4);
  font-size: 13px;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s;
}
.ni-item:hover .ni-go { color: var(--jade); transform: translateX(3px); }

/* 骨架屏：合成层 sweep（transform 平移，零重绘） */
.ni-skel {
  position: relative;
  overflow: hidden;
  height: 62px;
  margin: 4px 0 8px;
  border-radius: 12px;
  background: rgba(11, 122, 84, 0.04);
}
.ni-skel::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 48px;
  border-radius: 10px;
  background: rgba(11, 122, 84, 0.07);
}
.ni-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.75) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: niSweep 1.5s ease infinite;
  will-change: transform;
}
@keyframes niSweep { to { transform: translateX(100%); } }

/* 触屏按压反馈（与 mj-touch 同语言） */
@media (hover: none) {
  /* R53: :active 反馈移交 tPress 事件级驱动（:active 在 X5/UC 滞留） */
  .ni-item.tPress { background: rgba(11, 122, 84, 0.08); }
  .ni-item.tPress .ni-go { color: var(--jade); transform: translateX(3px); }
}
/* 移动端收纳：日期让位、横幅紧凑 */
@media (max-width: 750px) {
  .broadcast { gap: 9px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; }
  .bc-d { display: none; }
  .bc-t { font-size: 13.5px; }
  .news-card { padding: 20px 14px; }
  .ni-item { gap: 12px; padding: 10px 6px; }
  .ni-date { width: 42px; }
  .ni-date b { font-size: 15.5px; }
}

/* ---------- ② CTA 星点/彗星：已随「终章 v4」归一设计退役（深色底遗留层清除） ---------- */

/* ---------- ③ sky-live 可见性门控（屏外暂停 · 滚入恢复） ----------
   CTA 侧门控（月出舞台卫星 / 品牌月）已随「终章 v4」归入 CTA 基座块；
   此处保留 Hero 轨道环门控 */
html.sky-gate .hero-orbit .orbit-ring { animation-play-state: paused; }
html.sky-gate .hero-orbit.sky-live .orbit-ring { animation-play-state: running; }
/* R11-4 广播横幅呼吸环纳入 sky-live（横幅注入后 JS 补挂观察）：
   滚离新闻区后 2.2s 无限脉冲不再屏外空转 */
html.sky-gate .broadcast .bc-dot::after { animation-play-state: paused; }
html.sky-gate .broadcast.sky-live .bc-dot::after { animation-play-state: running; }

/* ---------- ④ dot 脉冲重写（box-shadow 逐帧重绘 → 合成层圆环） ---------- */
.cta-status .dot { position: relative; animation: none; }
.cta-status .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(23, 206, 143, 0.55);
  animation: ryRing 2.4s ease-out infinite;
  will-change: transform, opacity;
}

/* ---------- ⑤ 移动端减负：星层/彗星已随「终章 v4」退役，此处无需保留 ---------- */

/* ---------- ⑥ 键盘可达性 ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(11, 122, 84, 0.7);
  outline-offset: 3px;
  /* R37: 触屏禁用——安卓系内核 tap 后 :focus-visible 匹配，翡翠轮廓
     在回弹期间显示为「异常阴影」；键盘可达性由指针设备保留 */
  border-radius: 8px;
}

/* reduced-motion 收口（本补丁全部动效） */
@media (prefers-reduced-motion: reduce) {
  .bc-dot::after,
  .cta-status .dot::after,
  .ni-skel::after { animation: none; }
}

/* ============================================================
   PATCH ry-v11 (v10.9.21) · 第五轮全案
   ① 公告弹窗 v2「月光快报」全球级重构：翡翠夜航头幕（星尘 +
     极光掠影 + 金弧新月标 + LIVE 呼吸徽章）+ 权益芯片 + 主 CTA；
   ② 字标体系：入月=翡翠渐变 900 / 云计算=墨岩 650，全站统一；
   ③ logo 触感闭环：触屏 :active 按压回弹（弧滑动已 hover 门控）；
   ④ CTA 移动端减负：辉光层缩容 + 彗星轨道收窄（GPU 预算削减）。
   纪律：零蓝紫；动画仅 transform/opacity；reduced-motion 全降级。
   ============================================================ */

/* ============================================================
   PATCH ry-v12 (v10.9.22) · 官网体验四维深化
   ① 公告弹窗 v3「月光快报 · 期刊式」：真实公告 API 驱动——
     最新公告主卡（日期章 + 标题 + NEW）+ 速览行 + 双 CTA；
     频控升级为 localStorage 公告 id 记忆（仅出现新公告时
     自动弹一次）；移动端为底部抽屉（bottom sheet）构图；
   ② 新闻/公告条目错峰浮现（ni-rise）：滑到模块时内容级联
     起幕，呆滞感根治；
   ③ 品牌标入场动效「新月升空」（双端补偿触屏无 hover）：
     月盘浮现 + 「入」描画 + 琥珀弧扫入 + 字标双段渐显；
     描画走 stroke-dashoffset 通道，与 hover 弧滑动 /
     :active 按压回弹零冲突；
   ④ 浮现节奏移动端调优（30px/0.8s/0.1s 步进）+ 信任带 /
     终极 CTA 步骤条子项级联。
   纪律：零蓝紫；动画仅 transform/opacity/stroke 合成属性；
   遮罩 45% 无模糊；reduced-motion 全降级；触屏 :active 反馈。
   ============================================================ */

/* ---------- ① 公告弹窗 v3「月光快报 · 期刊式」 ---------- */
.ann3-mask {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 20, 14, 0.45); /* 遮罩纪律：45% 无模糊 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ann3-mask.show { opacity: 1; pointer-events: auto; }
.ann3-card {
  position: relative;
  width: min(460px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(11, 122, 84, 0.18);
  box-shadow:
    0 48px 110px -34px rgba(4, 44, 30, 0.55),
    0 14px 34px -14px rgba(4, 44, 30, 0.25);
  /* R12（v10.9.29）根治「刚展示弹窗即左右拉伸」：旧入场为 translateY
     + scale 双通道共过渡 --spring（1.56 过冲弹簧）——scale 通道冲过
     终值 1.0（≈1.04 再回落）＝弹窗卡在落定瞬间被横向拉宽再收缩
     （>600px 居中卡形态可见，含折叠屏/横屏手机）；移动端 translateY
     同随弹簧越过停靠线再回落。改 --ease 纯收敛：双通道只趋近终值、
     不过冲——任何视口、任何轴都不再出现越过终态的「拉伸」，
     期刊式落定感与 settle-in 气质一致 */
  transform: translateY(26px) scale(0.96);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  /* v10.9.24（R8-5 移动端卡顿根治）：预栅格化合成层——show 首帧
     不再现场提升层+栅格化大阴影（移动端首次打开卡顿元凶） */
  will-change: transform;
}
.ann3-mask.show .ann3-card { transform: none; }

/* 头幕：紧凑翡翠夜航（品牌月标 + LIVE 呼吸徽章） */
.ann3-hero {
  position: relative;
  flex: none;
  height: 112px;
  overflow: hidden;
  background:
    radial-gradient(340px 180px at 82% -10%, rgba(23, 206, 143, 0.22), transparent 62%),
    radial-gradient(280px 160px at 8% 112%, rgba(11, 122, 84, 0.35), transparent 68%),
    linear-gradient(168deg, #123B2C 0%, #0C2A1F 55%, #081F16 100%);
}
.ann3-aurora {
  position: absolute;
  top: -42%;
  left: -18%;
  width: 78%;
  height: 92%;
  background:
    radial-gradient(closest-side, rgba(60, 230, 166, 0.16), transparent 72%),
    radial-gradient(closest-side at 72% 62%, rgba(87, 230, 176, 0.10), transparent 70%);
  transform: rotate(15deg);
  animation: ann3Aurora 9s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes ann3Aurora {
  from { transform: rotate(15deg) translate3d(-14px, 6px, 0); opacity: 0.7; }
  to   { transform: rotate(11deg) translate3d(12px, -4px, 0); opacity: 1; }
}
.ann3-star { position: absolute; border-radius: 50%; background: #F4FBF7; }
.ann3-star.s1 { width: 3px; height: 3px; left: 16%; top: 32%; opacity: 0.75; animation: ann3Twinkle 3.6s ease-in-out infinite; }
.ann3-star.s2 { width: 2px; height: 2px; left: 38%; top: 18%; opacity: 0.5; animation: ann3Twinkle 4.4s ease-in-out 0.8s infinite; }
.ann3-star.s3 { width: 2.4px; height: 2.4px; left: 62%; top: 40%; opacity: 0.62; animation: ann3Twinkle 3.1s ease-in-out 1.5s infinite; }
@keyframes ann3Twinkle { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.85; } }
.ann3-mark {
  position: relative;
  width: 52px;
  height: 52px;
  margin-top: 18px;
  filter: drop-shadow(0 10px 22px rgba(245, 184, 65, 0.26));
  animation: ann3MoonFloat 6.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes ann3MoonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ann3-live {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #EAFBF3;
  background: rgba(8, 40, 27, 0.55);
  border: 1px solid rgba(60, 230, 166, 0.35);
}
.ann3-live .dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3CE6A6;
}
.ann3-live .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(60, 230, 166, 0.55);
  animation: ann3Ring 2s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes ann3Ring {
  from { transform: scale(0.5); opacity: 1; }
  to   { transform: scale(1.9); opacity: 0; }
}
.ann3-x {
  position: absolute;
  right: 13px;
  top: 13px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  color: rgba(228, 242, 235, 0.82);
  background: rgba(8, 40, 27, 0.45);
  transition: background 0.22s, color 0.22s, transform 0.22s;
}
.ann3-x:hover { color: #FFFFFF; background: rgba(8, 40, 27, 0.7); }
.ann3-x:active { transform: scale(0.92); }
.ann3-grip { display: none; }

/* 正文（滚动容器）—— overflow-x:hidden（R11-3）：单轴 overflow-y:auto
   会把 overflow-x 计算值落为 auto，detail 入场 translateX(18px) 与富文本
   宽内容即成可左右拖拽的横轨（「页面左右拉伸」异常根源），封印之 */
.ann3-body {
  flex: 1;
  min-height: 0;
  padding: 18px 22px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* R12 双保险：横向手势在触摸引擎层即被拒（pan-y 只许纵向）——
     即便未来内容出现横溢，横向拖拽也不会交给滚动引擎＝「左右拉伸」
     家族在 brief 视图彻底封死（与 overflow-x:hidden 成对双封印） */
  touch-action: pan-y;
}
.ann3-body::-webkit-scrollbar { width: 4px; }
.ann3-body::-webkit-scrollbar-thumb { background: rgba(11, 122, 84, 0.25); border-radius: 99px; }
.ann3-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.ann3-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #14A876;
  font-family: "RyDisplay", "Arial Narrow", sans-serif;
}
.ann3-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5C6B63;
  text-decoration: none;
  transition: color 0.22s;
}
.ann3-all:hover { color: #0B7A54; }
.ann3-all i { font-size: 11px; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.ann3-all:hover i { transform: translateX(2px); }

/* 主卡：最新公告（日期章锚点 + 标题 + 阅读箭头） */
.ann3-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(11, 122, 84, 0.07), rgba(11, 122, 84, 0.02));
  border: 1px solid rgba(11, 122, 84, 0.22);
  text-decoration: none;
  transition: border-color 0.25s;
}
.ann3-feature:hover {
  border-color: rgba(11, 122, 84, 0.45);
}
.ann3-feature:active { transform: scale(0.99); }
.ann3-fdate {
  flex: none;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 7px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 122, 84, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.ann3-fdate b {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: #0B7A54;
  font-variant-numeric: tabular-nums;
  font-family: "RyDisplay", "Arial Narrow", sans-serif;
}
.ann3-fdate i {
  font-style: normal;
  font-size: 10px;
  color: #5C6B63;
  margin-top: 3px;
  letter-spacing: 0.05em;
}
.ann3-fbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ann3-ftitle {
  font-size: 15.5px;
  font-weight: 800;
  color: #101A15;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ann3-ftitle .new {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0B7A54;
  background: rgba(23, 206, 143, 0.18);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 7px;
  vertical-align: 2px;
}
.ann3-ftime {
  font-size: 11.5px;
  color: #5C6B63;
  font-variant-numeric: tabular-nums;
}
.ann3-fgo {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: #0B7A54;
  background: rgba(11, 122, 84, 0.08);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s;
}
.ann3-feature:hover .ann3-fgo { background: rgba(11, 122, 84, 0.14); transform: translateX(2px); }

/* 速览行：余下公告（日期片 + 标题 + 箭头） */
.ann3-list { margin-top: 10px; display: flex; flex-direction: column; }
.ann3-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.22s;
}
.ann3-item:hover { background: rgba(11, 122, 84, 0.045); }
.ann3-item:active { transform: scale(0.99); }
.ann3-item time {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #5C6B63;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(16, 26, 21, 0.05);
}
.ann3-item .t {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #2E3D36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.22s;
}
.ann3-item:hover .t { color: #0B7A54; }
.ann3-item > i {
  flex: none;
  font-size: 11px;
  color: #9DB0A6;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s;
}
.ann3-item:hover > i { color: #0B7A54; transform: translateX(3px); }

/* 底部双 CTA（卡外常驻，不随正文滚动） */
.ann3-foot {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(11, 122, 84, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 38%);
}
.ann3-cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
  background: linear-gradient(165deg, #12996C, #0B7A54 62%, #096747);
  box-shadow: 0 12px 26px -10px rgba(11, 122, 84, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ann3-cta i { font-size: 13px; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.ann3-cta:hover {
  transform: translateY(-2px);
}
.ann3-cta:hover i { transform: translateX(4px); }
.ann3-cta:active { transform: translateY(0) scale(0.985); }
.ann3-dismiss {
  flex: none;
  padding: 0 18px;
  border-radius: 13px;
  border: 1px solid rgba(16, 26, 21, 0.14);
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: #5C6B63;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.ann3-dismiss:hover { color: #2E3D36; background: rgba(16, 26, 21, 0.04); border-color: rgba(16, 26, 21, 0.24); }
.ann3-dismiss:active { transform: scale(0.97); }

/* 空态（API 不可达时的优雅降级——弹窗不出现，仅浮铃可唤起） */
.ann3-empty { padding: 22px 0 12px; text-align: center; font-size: 13px; color: #5C6B63; }

/* 条目错峰浮现（show 后 70ms 步进级联；动画通道与 hover 分离零冲突）
   R13 fill 纪律：both → backwards——终帧不锁 transform，:active 按压 /
   :hover 行进落定后即时恢复；基础 opacity:0 的回落终态由 .show 显示态
   承担（dock-brief 子条目 (0,4,0) 直显与 RM 冻结均在其上，零冲突） */
.ann3-feature, .ann3-item { opacity: 0; }
.ann3-mask.show .ann3-feature,
.ann3-mask.show .ann3-item { opacity: 1; }
@keyframes ann3Rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.ann3-mask.show .ann3-feature { animation: ann3Rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }
.ann3-mask.show .ann3-item:nth-child(1) { animation: ann3Rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards; }
.ann3-mask.show .ann3-item:nth-child(2) { animation: ann3Rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.26s backwards; }
.ann3-mask.show .ann3-item:nth-child(3) { animation: ann3Rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.34s backwards; }

/* 公告弹窗 · 移动端（底部抽屉 bottom sheet 构图） */
@media (max-width: 600px) {
  .ann3-mask { padding: 0; align-items: flex-end; }
  .ann3-card {
    width: 100%;
    max-height: 88vh;
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(64px);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); /* R12：随基座退役 spring 过冲——纯收敛上滑，零越线回弹 */
  }
  .ann3-grip {
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.35);
    z-index: 6;
  }
  .ann3-hero { height: 96px; touch-action: none; }
  .ann3-mark { width: 46px; height: 46px; margin-top: 10px; }
  /* X 保持顶右（与抓手同带）——原 bottom 定位会落进底部 CTA 区遮挡按钮 */
  .ann3-x { top: 10px; bottom: auto; right: 10px; width: 30px; height: 30px; border-radius: 10px; }
  .ann3-body { padding: 14px 16px 10px; }
  .ann3-foot { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .ann3-cta { height: 44px; font-size: 14px; }
  .ann3-dismiss { padding: 0 14px; font-size: 12.5px; }
  /* v10.9.24（R8-5 移动端卡顿根治·第二根因）：sheet 上滑期间不让
     条目级联与头幕无限动画同帧并发——级联延至 sheet 落定后（0.42s+）
     起幕，头幕常驻动画（极光/星/月浮/呼吸环）延迟 0.45s 冷启动。
     打开弹窗首帧只剩「遮罩淡入 + sheet 上滑」两件事，全程满帧 */
  .ann3-mask.show .ann3-feature { animation-delay: 0.42s; }
  .ann3-mask.show .ann3-item:nth-child(1) { animation-delay: 0.5s; }
  .ann3-mask.show .ann3-item:nth-child(2) { animation-delay: 0.58s; }
  .ann3-mask.show .ann3-item:nth-child(3) { animation-delay: 0.66s; }
  .ann3-aurora, .ann3-star.s1, .ann3-star.s2, .ann3-star.s3,
  .ann3-mark, .ann3-live .dot::after { animation-delay: 0.45s; }
  .ann3-detail-head { padding: 2px 0 10px; }
  .ann3-detail-scroll { max-height: 52vh; }
}
/* 深读视图（v10.9.24 新增）：公告全文弹窗内直读——游客免登录；
   期刊式设计语言延续：返回钮胶囊 + FULL TEXT 眉题 + 标题 + 日期章 + 正文 */
.ann3-detail {
  position: relative;
  animation: ann3DetailIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; /* R13：终帧不锁 transform，返回钮 hover/active 即时恢复 */
}
@keyframes ann3DetailIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.ann3-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ann3-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: #0B7A54;
  background: rgba(11, 122, 84, 0.08);
  transition: background 0.2s, transform 0.2s var(--spring);
}
.ann3-back i { font-size: 13px; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ann3-back:hover { background: rgba(11, 122, 84, 0.14); }
.ann3-back:hover i { transform: translateX(-2px); }
.ann3-back:active { transform: scale(0.95); }
.ann3-detail-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #14A876;
  font-family: "RyDisplay", "Arial Narrow", sans-serif;
}
.ann3-detail-scroll {
  overflow-y: auto;
  overflow-x: hidden; /* R11-3：横轨封印于内层滚动容器（外层 hidden 管不住嵌套滚动） */
  overscroll-behavior: contain;
  max-height: 46vh;
  padding-right: 4px;
}
.ann3-detail-scroll::-webkit-scrollbar { width: 4px; }
.ann3-detail-scroll::-webkit-scrollbar-thumb { background: rgba(11, 122, 84, 0.25); border-radius: 99px; }
.ann3-detail-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #101A15;
}
.ann3-detail-meta {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(11, 122, 84, 0.18);
  font-size: 11.5px;
  color: #5C6B63;
  font-variant-numeric: tabular-nums;
}
.ann3-detail-content {
  font-size: 13.5px;
  line-height: 1.9;
  color: #2E3D36;
  word-break: break-word;
  overflow-wrap: anywhere; /* R11-3：长链接/长词零外溢（anywhere 连最小内容宽一并折算） */
}
.ann3-detail-content img { max-width: 100%; height: auto; border-radius: 10px; }
.ann3-detail-content p { margin: 0 0 0.7em; }
/* R11-3 富文本宽内容自持三则：表格改块级内滚（宽表在自身内横滑，
   不再把 sheet 撑成可拖拽横轨）；代码块 pre-wrap 折行不外溢 */
.ann3-detail-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ann3-detail-content pre, .ann3-detail-content code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ann3-detail-content a { color: #0B7A54; }
.ann3-detail-content h1, .ann3-detail-content h2, .ann3-detail-content h3 {
  font-size: 15px; font-weight: 700; color: #101A15; margin: 1em 0 0.5em;
}
/* ============================================================
   PATCH R11-3 · 弹窗开关态动画纪律 + dock-brief 回航态
   ① 关闭态冻结：极光/星×3/月浮/呼吸环六路无限动画原先随页面加载
     即起跑——弹窗不可见也逐帧空转合成轨。改：无 .show 一律 paused，
     .show 后 running；play-state 冻结连 delay 时钟，移动端 0.45s
     冷启动延迟语义原样保留（打开后才继续走秒）；
   ② dock-brief 回航态：返回快报 = 容器自左轻滑入（与 detail 自右
     入场对称成礼）；子条目免重放——display:none 往返会取消并重启
     子级 ann3Rise（移动端即 0.42s 空窗再级联，切换顿挫元凶），
     回航态强制直显。dock-brief 由 JS 在「弹窗开着的状态下归位
     brief」时挂、开启弹窗/进入 detail 时摘——状态机自洁。
   ============================================================ */
.ann3-aurora, .ann3-star.s1, .ann3-star.s2, .ann3-star.s3,
.ann3-mark, .ann3-live .dot::after { animation-play-state: paused; }
.ann3-mask.show .ann3-aurora,
.ann3-mask.show .ann3-star.s1,
.ann3-mask.show .ann3-star.s2,
.ann3-mask.show .ann3-star.s3,
.ann3-mask.show .ann3-mark,
.ann3-mask.show .ann3-live .dot::after { animation-play-state: running; }
@keyframes ann3BriefIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.ann3-mask.dock-brief .ann3-head,
.ann3-mask.dock-brief #annContent { animation: ann3BriefIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
/* 子条目直显需压过 ann3Rise 级联规则（nth-child 带伪类 0,4,0）——
   同携 .show 锚定权重，源序在后取胜；dock-brief 仅在 .show 态挂载 */
.ann3-mask.show.dock-brief .ann3-feature,
.ann3-mask.show.dock-brief .ann3-item { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ann3-aurora,
  .ann3-star,
  .ann3-mark,
  .ann3-live .dot::after { animation: none !important; }
  .ann3-mask.show .ann3-feature,
  .ann3-mask.show .ann3-item { animation: none !important; opacity: 1; }
  .ann3-mask.dock-brief .ann3-head,
  .ann3-mask.dock-brief #annContent { animation: none !important; }
  .ann3-detail { animation: none !important; }
}

/* ---------- ② 字标体系（全站统一「入月云计算」） ----------
   入月 = 翡翠→薄荷渐变（900）· 云计算 = 墨岩（650）· 微宽字距
   与月盘/弧线同一色彩族谱；文字渐变不影响可读性（深底同源） */
.ry-word .w1,
.footer-brand-name .w1 {
  background: linear-gradient(115deg, #0E9A6C 0%, #0B7A54 48%, #17CE8F 108%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.ry-word .w2,
.footer-brand-name .w2 {
  color: #26382F;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.ry-word,
.footer-brand-name { letter-spacing: 0.045em; }
/* 渐变字在部分内核抗锯齿偏淡 → 轻光晕兜底锐度 */
.ry-word .w1,
.footer-brand-name .w1 { filter: drop-shadow(0 1px 5px rgba(11, 122, 84, 0.16)); }

/* ---------- ③ logo 触感闭环（双端） ---------- */
/* 触屏：按压回弹（hover 弧已门控，滑动离开不再滞态） */
@media (hover: none) {
  .nav-logo:active .ry-mark { transform: scale(0.93); }
  .nav-logo .ry-mark { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
/* 桌面：整标按压微缩 + 弧滑动（spring） */
.nav-logo .ry-mark { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-logo:active .ry-mark { transform: scale(0.93); }
/* 页脚标：桌面 hover 同款弧滑动（触屏无 hover 不触发） */
.footer .ry-mark .mk-arc {
  transform-box: view-box;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .footer .ry-mark:hover .mk-arc { transform: rotate(-24deg); }
}

/* ---------- ④ CTA 移动端 GPU 预算：星层/彗星已随「终章 v4」归一设计退役，预算天然达标 ---------- */

/* ---------- ⑤ 品牌展示字体（官网侧 · 与登录页同一体系） ---------- */
@font-face {
  font-family: "RyDisplay";
  src: url("/common/fonts/rajdhani-600.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "RyDisplay";
  src: url("/common/fonts/rajdhani-700.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}
/* 英文眉题 / 数字场景 → RyDisplay（DIN 式工业感，全设备真实生效） */
.hero-eyebrow,
.section-eyebrow,
.footer-brand-en,
.stat .stat-num,
.plan-price .num {
  font-family: "RyDisplay", Bahnschrift, "DIN Alternate", "Arial Narrow", sans-serif;
}
.hero-eyebrow { letter-spacing: 0.3em; }
.section-eyebrow { letter-spacing: 0.24em; }
.footer-brand-en { letter-spacing: 0.18em; }

/* R13 · 眉题移动端单排（全浏览器一致）：微信 XWEB 加载了窄体 Rajdhani
   恰好放下，其余内核回退宽字体（Roboto/SF 大写 ≈0.62em）在
   12px+0.3em 字距+36px 线 ≈343px 处折行。三重收敛：nowrap 硬保证 +
   clamp 字号随视口收缩（11px 兜底老内核，支持者覆盖）+ 字距 0.18em、
   线 22px、gap 8px——375px 视口最宽回退需求 ≈284px < 可用 335px，
   320px 亦收敛（≈247px < 280px）；≤360px 再紧一档双保险。
   源序位于字距基座之后，同权 (0,1,0) 媒体查询内覆盖 0.3em 生效 */
@media (max-width: 750px) {
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.18em; white-space: nowrap; gap: 8px; }
  .hero-eyebrow { font-size: clamp(9.5px, 3vw, 12px); }
  .hero-eyebrow::before { width: 22px; }
}
@media (max-width: 360px) {
  .hero-eyebrow { letter-spacing: 0.12em; }
  .hero-eyebrow::before { width: 16px; }
}

/* ---------- ② 新闻/公告条目错峰浮现（ni-rise v2 根治） ----------
   v1 存在两处异常：① delay 三元组按属性序映射（opacity,transform,
   background），错峰只落在 transform 上、opacity 全体零延迟同拍
   淡入 → 级联感丢失（本意 70ms 步进近形同虚设）；② 条目起幕与
   卡片起幕（.reveal 42px）叠加时序错乱——子级动画与父级动画竞速，
   观感「内容在卡片里乱舞」。
   v2：① delay 同拍映射 opacity+transform，真正的 70ms 位移级联；
   ② 容器态感知（见 index.html loadList）——卡片未起幕时条目
   no-anim 直显、随卡一体起幕；卡片已在视野时才做条目级联。
   transition 同时保住 hover 底色响应（背景零延迟）。 */
.ni-item.ni-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s;
}
.ni-item.ni-rise.is-in { opacity: 1; transform: none; }
#newsList .ni-item:nth-child(2),
#announceList .ni-item:nth-child(2) { transition-delay: 0.07s, 0.07s, 0s; }
#newsList .ni-item:nth-child(3),
#announceList .ni-item:nth-child(3) { transition-delay: 0.14s, 0.14s, 0s; }
#newsList .ni-item:nth-child(4),
#announceList .ni-item:nth-child(4) { transition-delay: 0.21s, 0.21s, 0s; }
#newsList .ni-item:nth-child(5),
#announceList .ni-item:nth-child(5) { transition-delay: 0.28s, 0.28s, 0s; }
/* 直显态：容器未起幕时随卡一体浮现（杜绝子先于父、骨架闪空帧） */
#newsList .ni-item.ni-rise.no-anim,
#announceList .ni-item.ni-rise.no-anim {
  opacity: 1;
  transform: none;
  transition: background 0.22s;
  transition-delay: 0s;
}

/* ---------- ②b 广播横幅容器态双路起幕（R9-1） ----------
   模块已被看过（数据晚到）：bcUnfold 展开动画——max-height 0→130
   平滑推开下方布局（消灭「网格瞬间跳下一截」的硬切）；模块未起幕：
   no-anim 直显随模块浮现，抵达前完成布局变化，用户零感知。 */
.broadcast.unveil {
  overflow: hidden;
  animation: bcUnfold 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bcUnfold {
  from { max-height: 0; opacity: 0; transform: translateY(-10px); }
  to   { max-height: 130px; opacity: 1; transform: none; }
}

/* ---------- ②c Hero 指标完成锁定（R9-2） ----------
   数字就位瞬间的一次性微弹——「锁进终值」的确认感，各指标按自身
   时长自然错开；transform 单属性合成层，reduced-motion 由 JS 门控。 */
@keyframes ryStatPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.stat .stat-num.stat-done {
  animation: ryStatPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- ③ 品牌标入场动效「新月升空」（双端） ----------
   触屏端自 hover 门控后失去 logo 动效——以「非 hover 依赖」
   的入场编排补偿：月盘自晕浮现 → 白「入」自下而上描画 →
   琥珀弧沿月肩扫入 → 字标双段渐显。叙事：入升，月随。
   描画走 stroke-dashoffset（关键帧内自含初始态，不污染
   基础样式），与 hover 弧滑动/:active 按压零冲突。 */
@keyframes ryDiscIn {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ryInDraw {
  from { stroke-dasharray: 44 48; stroke-dashoffset: 44; }
  to   { stroke-dasharray: 44 48; stroke-dashoffset: 0; }
}
@keyframes ryArcDraw {
  from { stroke-dasharray: 24 40; stroke-dashoffset: 24; }
  to   { stroke-dasharray: 24 40; stroke-dashoffset: 0; }
}
/* v10.9.24（R8-3 根治）：「云计算」被覆一层颜色再浮现的观感来自
   opacity 半透明淡入——深色字在白底上呈现灰蒙蒙的过渡帧。改为
   clip-path 物理揭示（wipe）：文字全程全饱和显色，自左向右随
   「入」字描画揭开，零半透明帧；上下负 inset 保护下延笔画与光晕 */
@keyframes ryWordUp {
  from { clip-path: inset(-14% 100% -14% -6%); transform: translateY(7px); }
  60%  { clip-path: inset(-14% 0 -14% -6%); }
  to   { clip-path: inset(-14% 0 -14% -6%); transform: none; }
}
.nav-logo .mk-disc {
  transform-box: fill-box;
  transform-origin: center;
  animation: ryDiscIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nav-logo .mk-in { animation: ryInDraw 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
.nav-logo .mk-arc { animation: ryArcDraw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both; }
.nav-logo .ry-word .w1,
.nav-logo .ry-word .w2 {
  display: inline-block;
  animation: ryWordUp 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nav-logo .ry-word .w1 { animation-delay: 0.32s; }
.nav-logo .ry-word .w2 { animation-delay: 0.42s; }

/* ---------- ④ 浮现节奏移动端调优 + 子项级联 ---------- */
/* 移动端：位移收敛 30px / 时长 0.8s / 步进 0.1s——小屏滚动
   视差感更强，节奏更利落（浮现可感知且不拖沓） */
@media (max-width: 750px) {
  html.js .reveal { transform: translateY(30px); transition-duration: 0.8s; }
  html.js .reveal[data-delay="1"] { transition-delay: 0.1s; }
  html.js .reveal[data-delay="2"] { transition-delay: 0.2s; }
  html.js .reveal[data-delay="3"] { transition-delay: 0.3s; }
}
/* 信任带：四指标子项级联（父级 is-in 后 90ms 步进）——html.js 守卫
   与 .reveal 同规：JS 缺席时子项直显，永不留守隐藏态 */
html.js .trust-band .tb-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .trust-band.is-in .tb-item { opacity: 1; transform: none; }
.trust-band.is-in .tb-item:nth-child(2) { transition-delay: 0.09s; }
.trust-band.is-in .tb-item:nth-child(3) { transition-delay: 0.18s; }
.trust-band.is-in .tb-item:nth-child(4) { transition-delay: 0.27s; }
/* 终极 CTA 按钮淡升 + 三步级联：已归并于文件前部「CTA · 终章 v4」基座块（is-in 编排单源化） */
@media (prefers-reduced-motion: reduce) {
  .ni-item.ni-rise { transition: background 0.22s; opacity: 1; transform: none; }
  .broadcast.unveil { animation: none !important; max-height: none; overflow: visible; }
  .stat .stat-num.stat-done { animation: none !important; }
  .nav-logo .mk-disc,
  .nav-logo .mk-in,
  .nav-logo .mk-arc,
  .nav-logo .ry-word .w1,
  .nav-logo .ry-word .w2 { animation: none !important; clip-path: none !important; }
  .trust-band .tb-item,
  .cta-steps .cta-step { transition: none; opacity: 1; transform: none; }
  html.js .section-head .section-eyebrow,
  html.js .section-head .section-title,
  html.js .section-head .section-desc { transition: none; opacity: 1; transform: none; }
  .cta-card.is-in .cta-actions .cta-btn { animation: none !important; }
}

/* ============================================================
   PATCH ry-r12.1 (v10.9.30) · 快甩直显（触屏专属 · 粘性 no-anim）
   R12 初版教训（scroll-hot 瞬时门全量退役）：① 桌面滚轮/触摸板
   事件离散，常规阅读速度 Δ/dt 即越 0.9px/ms 门槛，浮现被大面积
   压制（「浮现异常」）；② transition:none 把进行中的浮现硬切到
   终态（属性移除＝跳变）；③ 类挂/摘时 .cta-btn 的 animation:none
   属性回归＝ryBtnRise 从头重放（动画非过渡，属性回归即重启），
   反复挂/摘＝「准备好」按钮异常闪动。
   现方案（JS 侧 index.html R12.1）：仅触屏设备（hover:none /
   pointer:coarse）测速，IO 起幕瞬间处于快甩窗口（>0.9px/ms）→
   该元素粘性加 .no-anim（永不摘除）。类与 is-in 同拍落位 → 本块
   直显终态（零过渡零动画零重启）；进行中/已完成的编排永不被再
   触碰；桌面滚轮不启用（无合成器先行越界病灶），浮现全保留。
   卡身直显由既有基座 .reveal.no-anim 规则承担（L399-400），本块
   只接管编排内层（信任带/资讯级联/CTA 接力）。
   纪律：.no-anim 由 JS 独占挂载，html.js 同携守卫——JS 缺席则本
   块永不生效；.cta-btn 冻结只写 animation:none（不碰 transform，
   保住 .cta-actions .cta-btn:active 按压回弹）；.cta-luna 环境浮
   沉（ctaLunaFloat）不冻结（ambient≠reveal，屏外仍由 sky-live
   门控）；nth-child 延迟规则同权更高，但其只写 transition-delay，
   transition-property:none 使延迟无从生效——无延迟后跳变。
   ============================================================ */
html.js .trust-band.no-anim .tb-item,
html.js .news-card.no-anim .ni-item.ni-rise { opacity: 1; transform: none; transition: none; }
html.js .cta-card.no-anim .cta-lead,
html.js .cta-card.no-anim .cta-desc,
html.js .cta-card.no-anim .cta-promise,
html.js .cta-card.no-anim .cta-step { opacity: 1; transform: none; transition: none; }
html.js .cta-card.no-anim .cta-title { clip-path: inset(-1% -1% -1% -1%); transition: none; }
html.js .cta-card.no-anim .cta-rings,
html.js .cta-card.no-anim .cta-halo,
html.js .cta-card.no-anim .cta-horizon { opacity: 1; transition: none; }
html.js .cta-card.no-anim .cta-luna { translate: -50% -50%; opacity: 1; transition: none; }
html.js .cta-card.no-anim .cta-step::after { transform: scaleX(1); transition: none; }
html.js .cta-card.no-anim .cta-actions .cta-btn { animation: none; }

/* ============================================================
   PATCH ry-r15 (v10.9.33) · 移动端首屏信任区重设计：
   「30天无忧退款」首屏必达 × 2×2 精密数据网格
   （R14 单行条带被否——四列小字局促廉价；本版回归 2×2 大数字
   形态，以 Stripe 文档式十字细线 + tabular-nums 重建顶尖质感：
   顶部全线（base border-top）+ 行间线 + 列间线构成编辑级数据网格）
   预算（Tier1 基础 ≤760px）≈ 597px；Tier2（≤620h 矮屏，副文 2 行
   + 五处间距再收）≈ 523px；Tier3（≤480h 横屏，副文退役 + 双钮
   行内 + 单行条带——568 宽四列不挤）≈ 268px。
   覆盖最坏机型 320×568（Tier2 余 45px）/ 568×320（Tier3 余 52px）。
   ============================================================ */
@media (max-width: 760px) {
  .hero { padding-top: 90px; padding-bottom: 28px; }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-title { margin-bottom: 12px; }
  .hero-sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 26px;
  }
  .hero-actions { gap: 10px; margin-bottom: 20px; }

  /* 2×2 数据网格：行间/列间 1px 细线（十字分隔，编辑级精密感） */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 14px;
  }
  .stat {
    min-width: 0;
    gap: 4px;
    padding-top: 12px;
  }
  .stat:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }
  .stat:nth-child(n+3) {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .stat-num { font-size: 22px; letter-spacing: -0.01em; }
  .stat-label { font-size: 11px; letter-spacing: 0.02em; }
}
/* 矮屏（≤620px 高，SE 一代/紧凑机型）：副文 2 行 + 五处间距再收 */
@media (max-width: 760px) and (max-height: 620px) {
  .hero { padding-top: 94px; padding-bottom: 22px; }
  /* R24：矮屏内容撑高超出视口（heroH~606 > 568），cue 落在 fold 外
     不可见——退役。满屏内容本身即滚动暗示。 */
  .hero-cue { display: none; }
  .hero-eyebrow { margin-bottom: 8px; }
  .hero-title { margin-bottom: 8px; }
  .hero-sub { -webkit-line-clamp: 2; margin-bottom: 12px; }
  .hero-actions { gap: 8px; margin-bottom: 14px; }
  .hero-stats { padding-top: 10px; }
  .stat { padding-top: 10px; }
  .stat:nth-child(n+3) { margin-top: 10px; }
}
/* 横屏/极矮（≤480px 高）：副文退役 + 双钮行内 + 单行条带（横屏宽裕四列不挤） */
@media (max-width: 760px) and (max-height: 480px) {
  .hero { padding-top: 72px; padding-bottom: 14px; }
  .hero-eyebrow { margin-bottom: 8px; }
  .hero-title { font-size: clamp(20px, 7vh, 32px); margin-bottom: 10px; }
  .hero-sub { display: none; }
  .hero-actions { flex-direction: row; gap: 10px; margin-bottom: 14px; }
  .hero-actions .btn-core { width: auto; flex: 1; padding: 11px 16px; font-size: 14px; }
  .hero-stats {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
  }
  .stat { padding: 0; margin: 0; border: 0; }
  .stat-num { font-size: 18px; }
  .stat-label { font-size: 10px; white-space: nowrap; }
}

/* ============================================================
   PATCH ry-r18 (v10.9.37) · 移动端 hero 三角矛盾终极解：
   满屏沉浸 × logo 下紧凑 × 内容连贯 —— 底部滚动引导锚点
   诉求链复盘：R15 满屏居中→logo 下空 124px（否）；R16 顶聚+统计
   沉底→中段悬空 200px「拆东墙补西墙」（否）；R17 高度自适应→
   下区提前入画破坏满屏沉浸（否）。
   终极解：满屏（100svh，下区零入画）+ 内容顶聚自然流（连贯
   团块，间距即自然 mb）+ 底部留白交给 scroll cue（向下 chevron
   呼吸微动，Apple/Stripe 满屏 hero 标准手法）——留白从「空洞」
   转译为「引导下滚」的设计语言，三角诉求同时成立。
   PC（>760px）零改动。
   ============================================================ */
@media (max-width: 760px) {
  .hero {
    justify-content: flex-start;
    min-height: 100vh;       /* R112 兜底：svh 不支持的内核回退 */
    min-height: 100svh;       /* 恢复满屏：下区不提前入画 */
    padding-top: 98px;
    padding-bottom: 64px;     /* cue 呼吸区 */
  }
  /* R19 · 编辑排版节奏（语义分组）：眉题紧贴标题 8px（kicker 法则）→
     标题后呼吸 18px → 副文→CTA 26px（「读」与「做」最大分组边界，
     行动区独立成组）→ CTA→统计 20px（行动→信任过渡） */
  .hero-eyebrow { margin-bottom: 8px; }
  .hero-title { margin-bottom: 18px; }
  /* R30 · 星站航线：节点行 DOM 化——每站（jade 星点 + 金码 + 墨名）
     逐站亮灯（cities-in 后 80ms 步进），星点极缓呼吸——「活着的网络」 */
  .hero-cities {
    position: absolute;
    left: 50%;
    bottom: 52px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    pointer-events: none;
  }
  .hero-cities .ct {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'RyDisplay', 'Segoe UI', Roboto, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(38, 56, 47, 0.55);
  }
  .hero-cities .ct b {
    color: rgba(184, 134, 11, 0.78);
    font-weight: 700;
    margin-right: 3px;
  }
  .hero-cities .ct i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid #14A876;
    background: transparent;
    box-shadow: none;
  }
  /* R90 · 滚动引导箭头实体化（原 ::after 纯视觉不可点）：48×44 命中区
     （Apple HIG 拇指最小标准），chevron 视觉走 ::before；safe-area
     下沉（全面屏浏览器底栏），env 不支持时前一条 26px 兜底 */
  .hero-cue {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 26px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 44px;
    margin-left: -24px;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    transition: opacity 0.35s ease;
  }
  .hero-cue::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border-left: 1.5px solid rgba(38, 56, 47, 0.38);
    border-bottom: 1.5px solid rgba(38, 56, 47, 0.38);
    transform: rotate(-45deg);
    animation: ryCueDrift 2.4s ease-in-out infinite;
  }
}

@keyframes ryCueDrift {
  0%, 100% { opacity: 0.45; transform: rotate(-45deg) translate(0, 0); }
  50%      { opacity: 0.95; transform: rotate(-45deg) translate(3px, 3px); }
}
/* 矮屏：呼吸区收窄 */
@media (max-width: 760px) and (max-height: 620px) {
  .hero { padding-bottom: 52px; }
  .hero-cue { bottom: 20px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .hero-cue::before { width: 18px; height: 18px; }
  .hero-cities { bottom: 44px; } .hero-cities .ct { font-size: 8px; }
}
/* 横屏/极矮：cue 微缩防拥挤 */
@media (max-width: 760px) and (max-height: 480px) {
  .hero { padding-bottom: 44px; }
  .hero-cue { display: none; }
  .hero-cities { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-sub,
  .hero-actions,
  .hero-stats,
  .hero-title,
  .hero-title .line span {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .hero-cue::before { animation: none; }
  .hero-cue { opacity: 0.6; }
}

/* ============================================================
   PATCH ry-r20 (v10.9.39) · 移动端首屏「月升」：月光叙事落地
   月光主题此前只存在于文字（「部署在月光之上」），视觉缺席。
   本轮补上标志性视觉瞬间：
   【R21 注】① 的光球月轮已被天穹仪方案取代（见文件尾 ry-r21），
   ② 的 .em 暖金渐变文字保留生效。
   ① 金月轮（.hero-inner::before）：1/4 出画悬挂右上，与既有
      .hero::before 右上暖金光斑（L1729 月晕）同心叠加成
      「月晕+月体」；径向渐变球体（受光 at 35% 65%）+ 双层
      box-shadow 光晕；文字承接月光边缘（≤30% 不透明度）——
      「字沐月光」而非遮挡。
   ② 「月光之上」.em 升级暖金渐变文字（background-clip: text），
      与月轮互文；PC 保持 jade 零改动。
   ③ 开幕秩序「月先升，事再叙」：ryMoonRise 1.1s 最先 → 既有
      eyebrow 0.15s 起的内容链接管；ryMoonGlow 7s alternate
      呼吸 delay 1.4s 与入场错峰（同属性不冲突）。
   ④ 性能：单伪元素零新 DOM；呼吸纯 opacity（合成层零重绘，
      非 box-shadow 帧绘——教训见 PM）；RM 全静态。
   ============================================================ */
@media (max-width: 760px) {
  /* 月光之上的字，即月光之色（暖金渐变 + 8s 金光流变；浮现随行
     span 的 titleUp 保留——复合链，选择器特异性需压过
     .hero-title .line span (0,2,1) 故用 .line .em (0,3,0)） */
  .hero-title .line .em {
    background: linear-gradient(115deg, #B08A2E 0%, #F5DFA0 50%, #8F6A15 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation-name: titleUp, ryGoldFlow;
    animation-duration: 0.66s, 6s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
  }
}

/* ============================================================
   PATCH ry-r21 (v10.9.40) · 移动端首屏「天穹仪」：唤醒既有轨道
   装置并升级——彻底重构 R20 光球月轮（廉价 CSS 光斑，被否）。
   方案：不新造系统，唤醒被 ≤900px display:none 隐藏的
   .hero-orbit（PC 端既有：四层虚线环 90/70/50/34s 异向旋转），
   升级为「月为中心、三星沿轨运行」的精密天文仪：
   ① 装置核心加新月（SVG path，暖玉白 + 金描边，开口朝右上
      与 .hero::before 月晕光斑呼应；金色线索贯穿 .em 金字 →
      金描边 → 金色 30天）
   ② 三颗 .orbit-sat 星升级沿轨运行（各自周期 60/84/48s、
      异向，CSS transform-origin 200px 200px）——精密感核心
   ③ 移动端右上主角级定位（248px，opacity .85），入场
      「仪先启」ryOrbitWake 1.4s 唤醒先于内容链（fill backwards）
   ④ sky-live 冻结机制已接入（L1235 observe），滚出视口即停；
      RM 下环/星/唤醒全静态
   PC（>760px）：装置原位运行 + 月牙同时上线（白送升级）。
   ============================================================ */
.orbit-moon {
  stroke: rgba(184, 134, 11, 0.45);
  stroke-width: 1;
  filter: drop-shadow(0 0 16px rgba(217, 180, 91, 0.55));
}
.orbit-star-g {
  filter: drop-shadow(0 0 6px rgba(201, 160, 80, 0.85));
}
@media (max-width: 760px) {
  .hero-orbit {
    display: block;
    right: -70px;
    top: -30px;
    width: 290px;
    height: 290px;
    transform: none; /* R88: 基态归零（层化由 hero-live 邻近窗口接管 (0,3,0)） */
    opacity: 1;
    animation: ryOrbitWake 1.0s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .hero-orbit .orbit-sat {
    animation: orbitSpin 60s linear infinite;
    transform-origin: 200px 200px;
  }
  /* 三星各自周期/方向由 HTML inline style 覆盖（同 orbit-ring 既有做法——nth-of-type 在混合 circle 序列中错位不可用） */
}
@keyframes ryOrbitWake {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 横屏：装置微缩 */
@media (max-width: 760px) and (max-height: 480px) {
  .hero-orbit { width: 190px; height: 190px; right: -44px; top: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit,
  .hero-orbit .orbit-ring,
  .hero-orbit .orbit-sat { animation: none; }
}

/* ============================================================
   PATCH ry-r22 (v10.9.41) · 移动端首幕「云海地平线」：留白的
   空间语义补全
   审计结论：布局节奏已验收（R19），唯一留白缺陷在高屏底部——
   844 屏内容底与 cue 之间 ~186px 空白带（低屏被内容填满）。
   顶尖解法不是塞内容（破坏验收布局），而是给留白空间语义：
   第一幕已有「天」（天穹仪 R21）与「光」（月晕 L1729），补「地」
   ——hero 底部透视地平线网格，向下渐隐入云海。
   「月光之下、云海之上」——品牌叙事的空间落地。
   纯背景层（hero-inner::after，::before 已随 R21 光球删除空闲）：
   零 DOM、零动画、RM/sky-live 零负担；jade .07 极淡（克制）；
   高屏展开充分、低屏自然收窄；z0 位于内容后不干扰。
   ============================================================ */
@media (max-width: 760px) {
  .hero-inner::after {
    content: '';
    position: absolute;
    left: -8vw;
    right: -8vw;
    bottom: -34px;
    height: 84px;
    background:
      repeating-linear-gradient(to right, rgba(11, 122, 84, 0.12) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(to top, rgba(11, 122, 84, 0.12) 0 1px, transparent 1px 36px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
    mask-image: linear-gradient(to top, #000 0%, transparent 85%);
    transform: perspective(520px) rotateX(62deg);
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 0;
  }
}
/* 横屏：地平线收窄 + cue 退役（内容 360 > 视口 320，cue 在 fold 外）；
   pt 豁免保持 88px——+6 会令 30天 溢出首屏 2px */
@media (max-width: 760px) and (max-height: 480px) {
  .hero { padding-top: 88px; }
  .hero-inner::after { height: 80px; bottom: -30px; }
  .hero-cue { display: none; }
}

/* ============================================================
   PATCH ry-r26 (v10.9.45) · 高屏底部留白收口：视口比例弹性下沉
   终审遗留：高屏（844）内容底与 cue 间 172px 占视口 20%——R22
   云海语义化是「可接受」而非「最优」。顶尖收口：高屏（≥780h）
   给统计网格按视口高度比例的弹性下沉——连续自适应、无档位
   跳变、min() 上限防极端高分屏过度下沉：
   · 844 屏 +50px → 底部留白 172→122px（14%）
   · 932 屏 +81px → 留白消化近半（上限 96px 封顶）
   · <780h 屏不启用——667/568/横屏零影响（折叠线零风险）
   其余间距（8/18/26/20 编辑节奏、nav 下 35px）与视口无关，不动。
   ============================================================ */
@media (max-width: 760px) and (min-height: 780px) {
  .hero-stats {
    margin-top: min(96px, calc(20px + (100vh - 700px) * 0.5)); /* R112 兜底 */
    margin-top: min(96px, calc(20px + (100svh - 700px) * 0.5));
  }
}
@keyframes ryGoldFlow {
  from { background-position: 12% 50%; }
  to   { background-position: 88% 50%; }
}

/* ============================================================
   PATCH ry-r29 (v10.9.49) · 空区微内容 + 流变增强 + 滚动活跃门
   ① 底部空旷：世界节点行（IATA 机场码美学，hero-inner::before
      纯伪元素，预告全球节点区）；② 金光流变增强（300% 四色 +
      亮峰 #F5DFA0 + 6s + 12%↔88% 行程——原 220% 亮峰行程过短
      难感知）；③ 流畅性：ry-scroll 滚动期间暂停 ambient 装饰
      （环转/星行/CTA 浮沉/呼吸点）——play-state 挂摘不重启、
      从暂停处继续，释放合成器带宽给滚动本体；reveal 编舞零
      触碰（无 R12「浮现压制」风险）；200ms 静止恢复。
   ============================================================ */
html.ry-scroll .orbit-ring,
html.ry-scroll .orbit-sat,
html.ry-scroll .orbit-star-g,
html.ry-scroll .cta-luna,
html.ry-scroll .cta-status .dot::after {
  animation-play-state: paused !important;
}

/* ============================================================
   PATCH ry-r30 (v10.9.50) · 星站航线 + 网格再收 + 页脚列接力
   1. 节点行 DOM 化：cities-in（主落定 1.3s 后）逐站 80ms 步进
      亮灯（6px 上升淡入）；星点 2.8s 极缓呼吸（ry-scroll 暂停）；
      no-anim 直显保险同 R13 纪律。2. 网格 110→84px 再收。
   3. 页脚列接力：footer-grid 整块 42px 主行程之上，品牌列与
      三内容列 10px 微程 80ms 步进——治「滑到底浮现生硬」。
   ============================================================ */
html.js .hero-cities .ct {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .hero.cities-in .ct { opacity: 1; transform: none; }
html.js .hero.cities-in .ct:nth-child(1) { transition-delay: 0.05s; }
html.js .hero.cities-in .ct:nth-child(2) { transition-delay: 0.13s; }
html.js .hero.cities-in .ct:nth-child(3) { transition-delay: 0.21s; }
html.js .hero.cities-in .ct:nth-child(4) { transition-delay: 0.29s; }
html.js .hero.no-anim .hero-cities .ct { opacity: 1; transform: none; transition: none; }
@keyframes ctPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.hero-cities .ct i { animation: ctPulse 2.8s ease-in-out infinite; }
.hero-cities .ct:nth-child(2) i { animation-delay: 0.7s; }
.hero-cities .ct:nth-child(3) i { animation-delay: 1.4s; }
.hero-cities .ct:nth-child(4) i { animation-delay: 2.1s; }
html.ry-scroll .hero-cities .ct i { animation-play-state: paused !important; }

/* 页脚列接力（R13 section-head 同款纪律） */
html.js .footer-grid > div:first-child,
html.js .footer-grid .footer-col {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .footer-grid.is-in > div:first-child { opacity: 1; transform: none; transition-delay: 0.1s; }
html.js .footer-grid.is-in .footer-col:nth-of-type(2) { opacity: 1; transform: none; transition-delay: 0.18s; }
html.js .footer-grid.is-in .footer-col:nth-of-type(3) { opacity: 1; transform: none; transition-delay: 0.26s; }
html.js .footer-grid.is-in .footer-col:nth-of-type(4) { opacity: 1; transform: none; transition-delay: 0.34s; }
html.js .footer-grid.no-anim > div:first-child,
html.js .footer-grid.no-anim .footer-col { opacity: 1; transform: none; transition: none; }



/* ============================================================
   TOUCH INTERACTION SYSTEM · 单一事实来源（R45 整合 / R48 定序）

   触屏端（hover:none）按压反馈 100% 由事件级 tPress/tBack 承担
   （JS: touchstart 挂 / touchend 移除 / 双 rAF 后导航）。

   级联定序（本轮修正两处）：
   1) *:active 归零写在【前】，tPress 写在【后】——两者同为
      (0,1,0) + !important，源序取胜：指压期间 .pressing 压过
      *:active（R45-R47 反序，通用元素按压反馈被 *:active 吞掉）
   2) 移除 .pressing 的 will-change——每次点击建/销合成层，
      OPPO 老内核光栅化抖动 = 反复单点偶发卡顿的根源；
      transform transition 由 Chromium 自动合成，无需提示
   ============================================================ */

/* --- ① 触屏 :active transform 归零（在前：中和改造内核滞留残留）
     R50: 不再碰 box-shadow——基态阴影被压制后回归 =「点击后出现
     阴影」的根源（全宽按钮 + 34px blur 视觉上即「整个大卡片阴影」）；
     增强阴影已随 ring 规则包进 hover:hover，触屏根本不适用 --- */
@media (hover: none), (pointer: coarse) {
  *:active { transform: none !important; } /* R76: 双通道——hover 误报内核走 pointer:coarse 兜底 */
}

/* --- ②0 R54: 入场动画播完冻结——tBack 摘除时 animation 属性若
       回归入场动画名（ryBtnRise 等）= 从头重放（=「点击后按钮闪动」
       的根因，R12.1 教训翻版）。.ryDone 由 JS animationend 挂载，
       (0,1,0)+important 与 .tBack 同权——.tBack 源序在后，按压回弹
       期间照常播放，摘除后回落 none，零重放 --- */
.ryDone { animation: none !important; }

/* --- ② R53 统一按压/回弹（R52 hero 方案全按钮推广——用户验收）
       tPress 深按 0.96/0.05s → tBack keyframe 回弹（弹性来自关键帧
       位置，改造内核不 clamp，全内核一致）；零 box-shadow 参与
       （R50 阴影恒定纪律）；fill:backwards 结束回落基础态
       R56 三态质感闭环（R58 回滚）：brightness 通道整体移除——
       过冲帧在深色渐变上呈「变白」、恢复帧亦被用户感知为闪动，
       任何亮度变化均不接受；按压回归纯 scale（R52/R53 已验收
       基线，全内核一致）。filter/transform 均合成器友好、
       层生命周期 = 动画生命周期（R47）、keyframe 0% = tPress 值
       零跳变（R55）等机制教训保留备用 --- */
.tPress {
  transform: scale(0.94) !important;
  transition: transform 0.05s ease-out !important;
}
.tBack {
  animation: ryTapBack 0.24s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
}
@keyframes ryTapBack {
  from { transform: scale(0.94); }
  55%  { transform: scale(1.016); }
  to   { transform: scale(1); }
}

/* --- ②1 R62: 四层场景按压体系（对齐全站 R61 分场景理念）---
       深度 × 弹性双维度分层，按使用场景应景：
       T1 终极转化（立即部署上线/hero 主钮/移动坞立即选购）：
          34px 大 blur 阴影上限 0.972（R55/R60 阴影行程权衡点），
          以强弹性补深度——0.26s 长回弹 + 1.014 过冲，「下决心」
          时刻的势能释放感。
       T2 次级转化（联系顾问/进入控制台/导航主钮/卡片立即部署）：
          基线 0.94 + 0.24s 标准弹性（1.016 过冲）——不特化，
          走 .tPress/.tBack 基线即本层。btn-plan(22px) R62 从
          0.972 组移入本层（R55 抱怨对象为 34px 大 blur 光晕；
          22px 中等行程可承受，且 R60 用户明确要求深度）。
       T3 辅助（导航次钮/浮窗钮 float-btn/fp-btn）：
          0.96 轻按 + 0.22s 轻弹——辅助操作弱反馈。
       T4 链接/列表（bc-link 查看/ni-item 资讯条目）：
          不缩放（整行/文字缩放模糊）——opacity 0.6 快速反馈
          + 0.18s 恢复；ni-item 保留既有背景高亮特化（L2489）。 --- */
/* T1 终极转化 */
.cta-btn.primary.tPress,
.btn-jade.tPress,
.mcd-btn.tPress {
  transform: scale(0.972) !important;
}
.cta-btn.primary.tBack,
.btn-jade.tBack,
.mcd-btn.tBack {
  animation: ryBackT1 0.26s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
}
@keyframes ryBackT1 {
  from { transform: scale(0.972); }
  55%  { transform: scale(1.014); }
  to   { transform: scale(1); }
}
/* T3 辅助 */
.hero-cue.tPress::before {
  animation: none;
  opacity: 1;
  border-color: rgba(11, 122, 84, 0.85);
}
.hero-cue.tPress,
.nav-btn.ghost.tPress,
.float-btn.tPress,
.fp-btn.tPress {
  transform: scale(0.96) !important;
}
.hero-cue.tBack,
.nav-btn.ghost.tBack,
.float-btn.tBack,
.fp-btn.tBack {
  animation: ryBackT3 0.22s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
}
@keyframes ryBackT3 {
  from { transform: scale(0.96); }
  55%  { transform: scale(1.012); }
  to   { transform: scale(1); }
}
/* T4 链接（不缩放，透明度反馈）
   R63 补：nav-link 顶部导航文字链 / footer-col a 底栏 12 条导航链
   ——均为纯文字导航，归 opacity 层（原先落 T2 缩放不应景）
   R64: ni-item 移出本层——T4 opacity 覆盖了 R53 原有弹动（0.94
   缩放 + ryTapBack + 背景高亮 + ni-go 箭头位移，L2489 特化），
   用户要求恢复新闻/公告原先效果；ni-item 回归通用基线 */
.nav-link.tPress,
.footer-col a.tPress,
.bc-link.tPress {
  transform: none !important;
  opacity: 0.6 !important;
  transition: opacity 0.05s ease-out !important;
}
.nav-link.tBack,
.footer-col a.tBack,
.bc-link.tBack {
  animation: ryBackT4 0.18s ease-out backwards !important;
}
@keyframes ryBackT4 {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* --- ③ 焦点环清零（回弹已由 tBack keyframe 承担）--- */
@media (hover: none), (pointer: coarse) {
  *:focus-visible { outline: none !important; }
  /* R49: 老内核不支持 :focus-visible 时 tap 挂 :focus 默认焦点框
     R76: +pointer:coarse 双通道（hover 误报内核 tap 焦点环闪动兜底） */
  *:focus { outline: none !important; }
}

/* R80 前遗留：news 卡选中层（plan/region 选中层已在 R80 新块统一定义） */
.news-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  border: 1px solid rgba(18, 153, 108, 0.6);
  box-shadow: 0 12px 34px -16px rgba(11, 122, 84, 0.42);
  opacity: 0;
  transition: opacity 0.32s ease-out;
  pointer-events: none;
  z-index: 3;
}
.news-card.cardTap::after {
  opacity: 1;
  transition: opacity 0.12s ease-out; /* 亮起向升速（摘类回归 0.32s 渐熄） */
}

/* --- ④ 全局触屏人体工学 --- */
html { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent !important; }
html { -webkit-touch-callout: none; }

/* --- ⑤ 入场首帧门（ry-booted）--- */
html.js:not(.ry-booted) .hero *,
html.js:not(.ry-booted) .nav * { animation-play-state: paused !important; }

/* ============ R71（v10.9.89）：ann4 冷铂银浅银重渲 + 切换跳变根治 ============
   ① 色系反转（冷酷质感浅银）：枪灰深银面板 → 冷铂银浅面板（#F7F9FA→
      #E7EBEE 冷银白渐变 + 深色微拉丝线 + 白高光顶线）；石墨日期章 +
      深石墨 CTA = 浅银海洋中的双冷面锚点；文字全谱石墨/青灰系；遮罩
      冷深幕托底；扫描带/刻度尺/LIVE 点反转适配。
   ② 跳变根治：sheet 固定高度（76vh，上限 660px）——原 min-height 自
      适应内容，brief（主卡+导语+速览 ≈500px）↔ detail（载入态短内容）
      切换瞬间 sheet 塌缩/撑开 = 「界面闪动一下」的根因；固定后两面板
      同一恒定舞台，body 内滚。
   ③ CTA 文案状态机：ann4Detail/ann4BackToBrief 统一驱动 + 关闭收口
      复位——hero/速览行/CTA 任意入口进深读，按钮一律即时变「返回快报」。 */

/* ============ R70（v10.9.88）：ann4「钛银快报」——手机端开屏公告冷酷科技质感整体重构 ============
   R66-R69 深银金属方案全删除重做（数据管线 / 频控 / fonts.ready 门 / 拖拽收起沿用）。
   五专家架构：
   ① 工业设计（材质）：钛银仪表面板——枪灰冷调渐变 + 水平拉丝 machining 纹理 +
      铬合金顶线 + 开窗校准扫描光带（一次性掠过）；主卡 HUD 对角角标 +
      铬合金日期章；等宽字体技术读数（MOONLIT DISPATCH / CH·01 / 索引序号 /
      日期）——精密仪器语言贯穿。
   ② 动效编舞：零 scale 入场纪律（R66：X5/UC 对 scale 中文字按栅格纹理插值
      = 横向拉伸；仅 translateY+opacity 双通道）；.show 门控分级接力
      （头部→主卡→导语→条目→底栏，全 backwards fill——R13 纪律）；
      brief↔detail 对称面板切换（detail 自右 +26px 入 / brief 自左 -26px
      回航，display 往返天然重启 = 零重建零闪动，R68）；环境动画全合成轨
      （LIVE ping = 伪元素 scale+opacity——旧 box-shadow 脉冲逐帧重绘
      违反 R50 纪律，本次根治；骨架屏扫掠 = transform 高光）。
   ③ 触觉交互：条目改 button——根治 a 条目被 tPress tap 快速导航直接跳转
      需登录插件页、绕过弹窗内深读的潜在缺陷；grip/头行 1:1 拖拽收起；
      全控件 tPress 纯 scale 0.94（R50 阴影恒定纪律）；CTA 双 inset
      倒角 = 机加工金属键；safe-area 防误触。
   ④ 信息架构：封面文章模式（主卡 + 130 字真实导语 + 索引速览行）；
      CTA 双态弹窗内深读免登录（R66）；三态齐备（骨架屏 / 信号静默 /
      链路中断）；全部公告次级弱化（R67）；单 CTA 信任序（R65）。
   ⑤ 渲染工程：关闭态零动画成本（全部动画挂 .show 门——比 R11 play-state
      冻结更彻底，未开窗时骨架/ping/扫掠零合成轨）；ryDone 冻结防入场
      重放（R54 机制复用）；字面量曲线零 var()（R32 老内核）；横向双封印
      （overflow-x hidden + touch-action pan-y，R11/R12）；env() 前置
      硬降级兜底。RM 全降级。桌面端 ann3 不受影响。 */

/* 双形态分治：ann3 桌面 / ann4 手机（R66） */
@media (max-width: 760px) {
  .ann3-mask { display: none !important; }
}
@media (min-width: 761px) {
  .ann4-mask { display: none !important; }
}

/* --- 遮罩：冷中性深幕（无模糊防灰调——R65 纪律）--- */
.ann4-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
  background: rgba(15, 21, 26, 0.55);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ann4-mask.show { opacity: 1; pointer-events: auto; }

/* --- 钛银面板：枪灰冷调 + 水平拉丝纹理 + 铬合金顶线 --- */
.ann4-sheet {
  position: relative;
  width: 100%;
  height: 76vh; /* R71：固定高度——brief/detail 内容高差不再牵动 sheet 尺寸（切换跳变根治）；冷铂银面板本身即设计 */
  max-height: 660px;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(76, 89, 100, 0.03) 0, rgba(76, 89, 100, 0.03) 1px, transparent 1px, transparent 4px),
    linear-gradient(178deg, #F7F9FA 0%, #F0F3F5 52%, #E7EBEE 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 -18px 60px rgba(15, 23, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(120, 133, 144, 0.1);
  /* 零 scale 入场（R66 拉伸根治核心）：仅 translateY + opacity 双通道 */
  transform: translateY(6%);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  overflow: hidden;
}
.ann4-mask.show .ann4-sheet { transform: translateY(0); opacity: 1; }
/* 校准扫描光带：开窗一次掠过铬线（transform 合成轨；backwards 起点屏外） */
.ann4-sheet::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, transparent 12%, rgba(95, 108, 118, 0.4), transparent 88%);
  transform: translateX(-102%);
  pointer-events: none;
}
.ann4-mask.show .ann4-sheet::before {
  animation: ann4Scan 1.05s 0.18s cubic-bezier(0.3, 0.6, 0.3, 1) backwards;
}
@keyframes ann4Scan {
  from { transform: translateX(-102%); }
  to { transform: translateX(102%); }
}

/* --- 抓手 / 关闭钮 --- */
.ann4-grip {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 44px; /* R73：44px 标准抓握宽度——全窗可拖的视觉可供性提示 */
  height: 4px;
  margin-left: -22px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(110, 123, 133, 0.55), rgba(110, 123, 133, 0.3));
  z-index: 4;
}
.ann4-x {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(120, 133, 144, 0.32);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
  color: #5F6C76;
  font-size: 14px;
  z-index: 4;
  cursor: pointer;
}

/* --- 仪表头部：技术读数行 + 大标题 + 精密刻度尺 --- */
.ann4-head {
  flex: none;
  padding: 24px 18px 12px;
  padding-right: 54px; /* 右上让位 X（R67：顶右区 X 独占） */
}
.ann4-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between; /* R75: gap 移除——两子项 space-between 自距 */
}
.ann4-live {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #6E7B85;
}
.ann4-live .dot {
  position: relative;
  flex: none;
  margin-right: 7px; /* R75: gap 兼容替代 */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #99A5AE;
}
/* LIVE ping：伪元素 scale+opacity 纯合成轨（R50——零 box-shadow 动画） */
.ann4-live .dot::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: rgba(153, 165, 174, 0.5);
  opacity: 0;
}
.ann4-mask.show .ann4-live .dot::after {
  animation: ann4Ping 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes ann4Ping {
  0% { transform: scale(1); opacity: 0.55; }
  75%, 100% { transform: scale(2.7); opacity: 0; }
}
.ann4-code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #8E9BA5;
}
@media (max-width: 359px) {
  .ann4-code { display: none; }
}
.ann4-title {
  margin: 9px 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #222A31;
}
.ann4-sub {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: #6E7B85;
}
/* 精密刻度尺：头部分区线（静态 paint + 边缘渐隐 mask） */
.ann4-head::after {
  content: '';
  display: block;
  height: 5px;
  margin-top: 13px;
  background: repeating-linear-gradient(90deg, rgba(76, 89, 100, 0.2) 0, rgba(76, 89, 100, 0.2) 1px, transparent 1px, transparent 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* --- 正文滚动分治（R75）：brief = 固定快照零滚动（用户预期：速览不滚，
       溢出裁切——短屏降级）；detail = 长文滚动（滚动协商 R73 依赖
       scrollTop，brief 态恒 0 → 下拉接管直接生效）。横向双封印（R11/R12）--- */
.ann4-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 16px 16px;
  min-height: 0;
}
.ann4-mask.viewing-detail .ann4-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* 双容器切换（R68 零重建）：brief/detail 并存，class 控显隐 */
.ann4-brief,
.ann4-detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ann4-mask.viewing-detail .ann4-brief { display: none; }
.ann4-detail[hidden] { display: none; }
.ann4-detail { min-height: 44vh; }

/* --- 主卡（封面文章）：HUD 对角角标 + 铬合金日期章 --- */
.ann4-hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 12px;
  margin: 0 0 12px;
  text-align: left;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 251, 0.62));
  border: 1px solid rgba(120, 133, 144, 0.24);
  border-radius: 12px;
  cursor: pointer;
}
/* HUD 对角角标（机加工定位标记） */
.ann4-hero::before,
.ann4-hero::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(95, 108, 118, 0.45);
  pointer-events: none;
}
.ann4-hero::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.ann4-hero::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }
.ann4-hdate {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  margin-right: 12px; /* R75: gap 兼容替代（hero 行内距） */
  background: linear-gradient(165deg, #3B444D, #2A323A 58%, #1D242B);
  color: #EDF1F4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ann4-hdate b {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.ann4-hdate i {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-style: normal;
  margin-top: 2px; /* R75: gap 兼容替代（日/月行距） */
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
}
.ann4-hmain {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ann4-hmeta { margin-top: 5px; } /* R75: gap 兼容替代 */
.ann4-htitle {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.42;
  color: #232B32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ann4-htitle .new {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 3px;
  background: linear-gradient(165deg, #333B44, #1D242B);
  color: #E6ECF0;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  vertical-align: 2px;
}
.ann4-hmeta {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #6E7B85;
}
.ann4-hgo { flex: none; color: #99A5AE; font-size: 13px; }

/* --- 导语（R69 封面文章模式）：银轨引用卡 + 底部渐隐「读下去」邀请 --- */
.ann4-lede {
  margin: 0 0 12px;
  padding: 11px 13px;
  background: rgba(120, 133, 144, 0.09);
  border-left: 2px solid #99A5AE;
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.78;
  color: #4A5661;
  max-height: 9.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}

/* --- 速览行：等宽索引序号 + 等宽日期 + 标题 --- */
.ann4-rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(120, 133, 144, 0.18);
}
.ann4-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12.5px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(120, 133, 144, 0.13);
  text-align: left;
  cursor: pointer;
}
.ann4-row:last-child { border-bottom: 0; }
.ann4-rno {
  flex: none;
  margin-right: 10px; /* R75: gap 兼容替代 */
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #99A5AE;
}
.ann4-rdate {
  flex: none;
  margin-right: 10px; /* R75: gap 兼容替代 */
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #8E9BA5;
}
.ann4-rt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: #333B44;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ann4-rgo { flex: none; color: #99A5AE; font-size: 12px; }

/* --- 骨架屏（加载/深读载入）：transform 扫掠高光（合成轨，零 paint）--- */
.ann4-skel { padding: 4px 0 6px; }
.ann4-skel .sk {
  position: relative;
  overflow: hidden;
  background: rgba(120, 133, 144, 0.1);
  border-radius: 8px;
}
.ann4-skel .sk-hero { height: 74px; margin-bottom: 14px; }
.ann4-skel .sk-line { height: 13px; margin: 10px 0; }
.ann4-skel .sk-line.w70 { width: 70%; }
.ann4-skel .sk-line.w45 { width: 45%; }
.ann4-skel .sk::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-101%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
.ann4-mask.show .ann4-skel .sk::after {
  animation: ann4Shimmer 1.35s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ann4Shimmer {
  from { transform: translateX(-101%); }
  to { transform: translateX(101%); }
}

/* --- 空态/降级态：冷科技信号语义（空也是设计——R68）--- */
.ann4-silent {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}
/* R75: gap 兼容替代（空态纵向距） */
.ann4-silent i { margin-bottom: 9px; }
.ann4-silent .c { margin-bottom: 9px; }
.ann4-silent i { font-size: 25px; color: #99A5AE; opacity: 0.85; }
.ann4-silent .c { font-size: 13px; color: #6E7B85; }
.ann4-silent .k {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: #99A5AE;
}

/* --- 底栏：次级动作弱化（R67）+ 单 CTA 信任序（R65）--- */
.ann4-foot {
  flex: none;
  padding: 10px 16px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(120, 133, 144, 0.22);
  background: linear-gradient(180deg, rgba(240, 244, 246, 0.55), rgba(226, 232, 236, 0.88));
}
.ann4-more i { margin-left: 5px; } /* R75: gap 兼容替代 */
.ann4-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #6E7B85;
  text-decoration: none;
  padding: 2px 2px 10px;
}
/* 铬合金机加工键：双 inset 倒角（上受光/下吃光）+ 克制外投影（0.94 按压
   阴影行程在感知阈值内——R55/R62 权衡） */
/* R111 · CTA 双态零闪：双 label span（.cta-b 快报态 / .cta-d 深读态）grid
   同格叠放、皆常驻渲染（opacity:0 保预栅格化）；显隐由 .viewing-detail
   纯 CSS 驱动、纯 opacity 合成翻转——零 innerHTML 零 timer 零节点销毁，
   移动端重栅格化闪帧根治（R75 图标间距规则随迁 span 内 i；R109 退役） */
.ann4-cta {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(175deg, #434D57 0%, #2C343C 46%, #1B2127 100%);
  color: #E9EFF3;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              inset 0 -1px 0 rgba(0, 0, 0, 0.34),
              0 6px 18px -8px rgba(20, 28, 34, 0.45);
}
.ann4-cta .cta-b,
.ann4-cta .cta-d {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
}
.ann4-cta .cta-b i { margin-left: 8px; }
.ann4-cta .cta-d i { margin-right: 8px; }
.ann4-cta .cta-d { opacity: 0; }
.ann4-mask.viewing-detail .ann4-cta .cta-b { opacity: 0; }
.ann4-mask.viewing-detail .ann4-cta .cta-d { opacity: 1; }

/* --- 深读视图：免登录弹窗内直读（R66）--- */
.ann4-dtitle {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #232B32;
  margin: 2px 0 7px;
}
.ann4-dmeta {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #6E7B85;
  padding-bottom: 11px;
  margin-bottom: 13px;
  border-bottom: 1px solid rgba(120, 133, 144, 0.2);
}
.ann4-dcontent {
  font-size: 14.5px;
  line-height: 1.72;
  color: #46525C;
  overflow-wrap: anywhere; /* R11 富文本自持：长链接不断版 */
}
.ann4-dcontent img { max-width: 100%; border-radius: 8px; }
.ann4-dcontent a {
  color: #3D5462;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(61, 84, 98, 0.4);
}
.ann4-dcontent p { margin: 0 0 0.85em; }
.ann4-dcontent table { display: block; overflow-x: auto; max-width: 100%; } /* R11：表格内滚 */
.ann4-dcontent pre,
.ann4-dcontent code { white-space: pre-wrap; }
/* 共享缓存回退文案（ann3-empty 由双端共用 annCache 写入）冷色适配 */
.ann4-dcontent .ann3-empty,
.ann4-body .ann3-empty {
  color: #6E7B85;
  text-align: center;
  padding: 26px 0;
  font-size: 13px;
}

/* --- 入场编舞：零 scale 分级接力（全 backwards——R13 fill 纪律；
       ryDone 由 JS animationend 挂载冻结防重放——R54 机制复用）--- */
@keyframes ann4Rise {
  from { opacity: 0; transform: translateY(10px); }
}
.ann4-mask.show .ann4-kicker { animation: ann4Rise 0.45s 0.03s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ann4-mask.show .ann4-title { animation: ann4Rise 0.5s 0.09s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ann4-mask.show .ann4-sub { animation: ann4Rise 0.5s 0.15s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ann4-mask.show .ann4-hero { animation: ann4Rise 0.5s 0.16s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ann4-mask.show .ann4-lede { animation: ann4Rise 0.5s 0.26s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ann4-mask.show .ann4-row { animation: ann4Rise 0.45s 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ann4-mask.show .ann4-row:nth-child(2) { animation-delay: 0.37s; }
.ann4-mask.show .ann4-row:nth-child(3) { animation-delay: 0.44s; }
.ann4-mask.show .ann4-foot { animation: ann4Rise 0.5s 0.46s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* --- 面板切换：detail 自右入 / brief 自左回航（display 往返重启 = 零重建）
       R72 闪白根治：from 摘 opacity:0——容器整体透明起步 = 浅银底色大面积
       裸露一帧（深读满屏深字 → 瞬间纯白 → 内容淡入）=「闪白」感；
       改纯 translateX 位移，内容全程可见零白帧（位移非缩放，不触
       R66 文字栅格拉伸纪律）--- */
@keyframes ann4PaneIn {
  from { transform: translateX(26px); }
}
@keyframes ann4PaneBack {
  from { transform: translateX(-26px); }
}
.ann4-mask.viewing-detail .ann4-detail { animation: ann4PaneIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ann4-mask.brief-back .ann4-brief { animation: ann4PaneBack 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* --- RM 全降级（静态直出；tPress/tBack 一并静止）--- */
@media (prefers-reduced-motion: reduce) {
  .ann4-mask,
  .ann4-sheet,
  .ann4-mask * { transition: none !important; animation: none !important; }
  .ann4-mask.show .ann4-sheet::before,
  .ann4-mask.show .ann4-live .dot::after,
  .ann4-mask.show .ann4-skel .sk::after { animation: none !important; }
}

/* ================================================================
   R80 双横滑卡片区重构（regions + plans）· v10.9.97
   五专家定稿 · 单一来源（旧 region/plan/btn-plan 体系 101 处已连根拔除）
   ① 交互架构：卡片=div 选择容器（tap 持久 radio 选中，互斥）；导航出口
      唯一化 .card-cta（<a>，命中 tPress SEL 获按压反馈+快导航）——
      「整卡 <a> 导航 vs 选中」的语义冲突（R74-R79 五层补丁之源）根除
   ② 渲染工程：选中态=::after 静态层 opacity 合成（GPU 零整卡 repaint）；
      hover 仅 PC 双门 + html:not(.ry-touch)（R78 事件级门控续用）；
      无 gap（margin 布局）/无 scroll-snap（R75 均匀惯性）/物理属性
   ③ 视觉设计：region=月白卡（浅）plan=墨玉夜卡（深）节奏对比；
      IATA 水印 + 玉色顶线 + 等高卡；窄屏（≤900px）纵向堆叠同 PC 窄窗
      （R81：横滑 rail 已废弃，双端统一 PC 代码）
   ④ 信息架构：CTA 全宽拇指区（移动端），主/次按钮分层
   ⑤ 兼容工程：OPPO/Via/UC 全纪律；-webkit-overflow-scrolling 惯性；
      overscroll-behavior 缺失时自然降级
   ================================================================ */

/* —— rail 容器：PC flex 等分 / 移动横滑 —— */
.rail-wrap { position: relative; }
.regions-grid,
.catalog-grid {
  display: flex;
  align-items: stretch;
}
.region-card,
.plan-card { flex: 1 1 0; min-width: 0; }

/* —— 通用卡片骨架（等高列，flex column） —— */
.region-card,
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 26, 21, 0.04);
  -webkit-tap-highlight-color: transparent;
}
.region-card + .region-card,
.plan-card + .plan-card { margin-left: 22px; } /* margin 代 gap（C84- 红线） */

/* —— region 月白卡 —— */
.region-card {
  padding: 24px 22px 20px;
  background: linear-gradient(175deg, #FFFFFF 0%, #F2F6F4 100%);
  border: 1px solid rgba(16, 26, 21, 0.08);
}
.region-card::before { /* 玉色顶线（悬停延展·scaleX 合成轨，默认收拢） */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(11, 122, 84, 0), rgba(11, 122, 84, 0.55), rgba(11, 122, 84, 0));
  transform: scaleX(0.36);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.region-code { /* IATA 水印 */
  position: absolute;
  top: 10px; right: 14px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(11, 122, 84, 0.08);
  font-family: "RyDisplay", Bahnschrift, "DIN Alternate", "Arial Narrow", sans-serif;
  pointer-events: none;
  user-select: none;
}
.region-flag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.region-flag i { margin-right: 7px; color: var(--jade); font-size: 12px; }
.region-name { font-size: 21px; font-weight: 800; margin-bottom: 14px; }

/* —— plan 月白卡（R82 浅色化：与 region 卡同系——用户指令弃暗色系，
      section 亮色层 (.page .section.plans-night) 下深卡突兀，统一月白） —— */
.plan-card {
  padding: 24px 22px 20px;
  background: linear-gradient(175deg, #FFFFFF 0%, #F2F6F4 100%);
  border: 1px solid rgba(16, 26, 21, 0.08);
}
.plan-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(11, 122, 84, 0), rgba(11, 122, 84, 0.55), rgba(11, 122, 84, 0));
  transform: scaleX(0.36);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
/* R84 徽章入流：badge 从卡角 absolute 移入标题行首（与 plan-name 同排）——
   架构性消灭与价格/长标题的重叠；金（热门）/玉（高性能）双锚点保留 */
.plan-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0; /* name 可收缩换行 */
}
.plan-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 9px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #8A5B10;
  background: linear-gradient(165deg, #F7E7C3, #EFD9A8);
  border: 1px solid rgba(162, 104, 10, 0.28);
  vertical-align: middle;
}
.plan-badge.b-jade {
  color: #EAFBF3;
  background: linear-gradient(165deg, #0F8A5F, #0B7A54);
  border-color: rgba(62, 201, 150, 0.4);
}
.plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.plan-name { font-size: 18px; font-weight: 800; padding-right: 8px; } /* R82: 墨色继承默认（浅底） */
.plan-price { text-align: right; flex-shrink: 0; }
.plan-price .num {
  font-size: 25px;
  font-weight: 900;
  color: var(--jade);
  font-variant-numeric: tabular-nums; /* R84: 价格跳动场景数字零抖动 */
}
.plan-price .cycle { font-size: 12px; color: var(--ink-4); margin-left: 2px; }
.plan-specs { flex: 1; } /* 等高：规格区撑开，foot 沉底 */
.plan-foot {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}
.plan-note {
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
  margin-bottom: 10px;
}

/* —— 规格行（R82 浅色统一：两卡同系零分叉） —— */
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(16, 26, 21, 0.1);
}
.spec-row .k { color: var(--ink-4); }
.spec-row .v { color: var(--ink-2); font-weight: 600; text-align: right; }
.region-card .card-cta { margin-top: 16px; }

/* —— CTA 行动按钮（唯一导航出口） —— */
.card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px; /* 拇指热区 */
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(11, 122, 84, 0.35);
  color: #0B7A54;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.28s var(--spring);
}
.card-cta i { margin-left: 8px; font-size: 12px; }
.card-cta.cta-primary {
  border: none;
  color: #FFFFFF;
  background: linear-gradient(165deg, #0B7A54, #096747);
  box-shadow: 0 8px 22px -8px rgba(11, 122, 84, 0.4);
}

/* —— 选中层（::after 静态 GPU 合成，R78 纪律） —— */
.plan-card::after,
.region-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  border: 1px solid rgba(18, 153, 108, 0.62);
  box-shadow: 0 12px 34px -16px rgba(11, 122, 84, 0.45);
  opacity: 0;
  transition: opacity 0.32s ease-out;
  pointer-events: none;
  z-index: 3;
}
.plan-card.cardTap::after,
.region-card.cardTap::after {
  opacity: 1;
  transition: opacity 0.12s ease-out; /* 亮起向升速 */
}

/* —— PC 精确指针 hover（双门 + 事件级，R78 续用）——
   R84 关键修复：transition 必须携带 reveal 完整通道（opacity+transform
   0.95s expo-out）——R80 此处只写 transform/box-shadow 0.45s，同特异性
   源序覆盖 .reveal 入场 transition = opacity 通道被顶掉，is-in 瞬间
   0→1 跳变（PC「卡片一起闪出」根因）；P3 悬停影变移除——阴影常驻、
   仅 transform 抬升（消逐帧整卡重绘） */
@media (hover: hover) and (pointer: fine) {
  html:not(.ry-touch) .region-card,
  html:not(.ry-touch) .plan-card {
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html:not(.ry-touch) .region-card:hover,
  html:not(.ry-touch) .plan-card:hover {
    transform: translateY(-4px);
  }
  html:not(.ry-touch) .region-card:hover::before,
  html:not(.ry-touch) .plan-card:hover::before { transform: scaleX(0.84); }
  html:not(.ry-touch) .card-cta:hover { transform: translateY(-2px); }
  html:not(.ry-touch) .card-cta.cta-primary:hover { filter: brightness(0.95); }
  html:not(.ry-touch) .card-cta i { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  html:not(.ry-touch) .card-cta:hover i { transform: translateX(4px); }
}

/* —— 窄屏纵向堆叠（≤900px · R81）：双端统一 PC 代码——废弃移动横滑
      rail，卡片随文档流纵向滚动（旧站 PC 窄窗 ≤900px 即此行为，沿用）。
      手机端与 PC 窄窗完全同构：无横向容器、无惯性滚动、无渐隐提示，
      每卡全宽自然高度，纵向浏览与页面滚动合一 —— */
@media (max-width: 900px) {
  .regions-grid,
  .catalog-grid { flex-direction: column; }
  .region-card + .region-card,
  .plan-card + .plan-card { margin-left: 0; margin-top: 16px; }
  .region-card,
  .plan-card { flex: 1 1 auto; min-height: 0; }
}

/* ============================================================
   P3 · 专家④ reduced-motion 全局收口：全站动画/过渡统一熄火
   （per-feature 降级块之上再加总闸——任何遗漏的循环动画一并压平，
     与 JS 侧 noMotion 双门同步生效）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================
   PATCH ry-canvas (v10.9.128) · 跨浏览器画布一致性与固定层稳定
   三例移动端取证问题根治（QQ 内核 / Via WebView）：
   ① Via 黑边（R119 首攻未竟，本版终局）：Via 等 WebView 过滚
      橡胶带把整个文档层（含 fixed 层与 CSS 画布背景）拉离视口，
      露出 WebView 原生黑底。旧内核（Chromium<63）不认
      overscroll-behavior，禁滚令无效 → 需「加大画布」物理盖底。
   ② QQ 上滑卡片跳动（R119 已治）：URL 栏视口高波动 / X5 fixed
      层滞后回弹 / 原生下拉刷新位移。
   方案（防线四重，任何内核任先生效即稳定）：
   · html 画布基色：字面值+var() 双写——免疫 CSS 变量解析失败；
   · 根层 overscroll-behavior-y: none——新内核橡胶带/下拉刷新
     位移整体取消（②c 与新内核①）。注：overscroll-behavior 不
     构成滚动容器、不捕获 sticky（区别于 overflow，R98 纪律无涉）；
   · ry-canvas-mat 画布垫层：比视口上下各外扩 60vh 的固定浅色垫
     （z-index:-1 沉底）——旧内核橡胶带无论怎么拉，视口内恒有
     浅色残余，黑底被物理盖死（①终局）；
   · 固定层常驻合成层 will-change: transform（②b）；阈值抖动由
     JS 滞回带收口（②a，见 index.html updDock v3）。
   ============================================================ */
html {
  background-color: #F6F9F7;             /* 字面值兜底 */
  background-color: var(--bg-0);         /* 新内核取变量（主题一改全改） */
  overscroll-behavior-y: none;
}
body {
  background: #F6F9F7;                   /* 同款双写：传播失效时仍自持 */
  background: var(--bg-0);
  overscroll-behavior-y: none;           /* 双保险：部分内核取 body 值判定 */
}
/* ============================================================
   PATCH ry-render (v10.9.130) · 屏外 section 渲染跳过（不降级提速）
   content-visibility: auto——视口（含预估边距）外的 section
   整段跳过 layout/paint/composite，滚至近屏才真实渲染；
   视口内像素级零差异。本页超长（hero+7 section+页脚），
   首屏只渲染首屏段，长滚动中滚动帧数稳定。
   安全边界（已逐一核验）：
   · hero/页脚/固定层（cta-dock/act-rail/aurora）不带 .section
     不在作用面；
   · 本页无 hash 锚点（无锚点定位偏移风险）；
   · JS 几何读取全走缓存（R93/R107 惯性重测）或仅视口内
     交互读取（tilt 卡片 mousemove）——无每帧强制布局污染；
   · contain-intrinsic-size: auto 600px——auto 记住首次渲染
     后的实测高度防 CLS，600px 为未渲染时的滚动条占位估值；
   · 渐进增强：Chromium 85+/Safari 18+ 生效，旧内核整条
     忽略=回落现状渲染，无任何降级。
   ============================================================ */
.page .section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
/* 画布垫层：外扩 60vh 的浅色物理底——旧内核橡胶带位移下的黑底终极覆盖 */
.ry-canvas-mat {
  position: fixed;
  top: -60vh; bottom: -60vh; left: 0; right: 0;
  z-index: -1;
  background: #F6F9F7;
  pointer-events: none;
}
.mobile-cta-dock { will-change: transform; }
.float-dock { will-change: transform; }