/* ============================================================================
   云舟抖音客服 · 官网首页样式  2026-09-29 全面重做 v4
   ----------------------------------------------------------------------------
   视觉方向：高端 3D 科技感 · 蓝白玻璃拟态 · 空间层次 · 高级微动效
   参考气质：Apple / Linear / Vercel / Stripe 一类的现代 AI 产品官网
   （只取气质，不照抄任何站点）

   ★ 性能纪律（本项目历次实测踩出来的红线，绝不放宽）★
     1. 不用 filter: blur —— 大面积图层每帧重新光栅化，实测帧率 53→14；
        "模糊光斑"一律用 radial-gradient 本身柔和，不加 blur。
     2. 不用 box-shadow 做动画 —— 同样是每帧重光栅化，实测掉 14 帧；
        发光/扩散效果一律「伪元素 + transform/opacity」实现。
     3. 动画只动 transform / opacity，绝不动 top/left/width/height。
     4. 3D 与视差只在「桌面 + 精确指针 + 非低配 + 未开启减少动效」时启用；
        触屏/窄屏/低配一律静态，保证移动端 60FPS。
   ============================================================================ */

:root {
  /* —— 底色：白 / 极浅蓝，不做深色、不做纯黑 —— */
  --bg: #f6f9fe;
  --bg-2: #eaf1fb;
  --bg-3: #ffffff;

  /* —— 玻璃层 —— */
  --glass-1: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.44));
  --glass-2: linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  --glass-3: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  --glass-line: rgba(255,255,255,.92);
  --hair: rgba(15,23,42,.075);

  /* —— 文字 —— */
  --ink: #0a1223;
  --ink-2: #4a5568;
  --ink-3: #7c8798;

  /* —— 科技蓝系 —— */
  --blue: #2563eb;
  --blue-2: #3b82f6;
  --ice: #7dd3fc;
  --cyan: #22d3ee;
  --indigo: #6366f1;
  --violet: #818cf8;

  /* —— 阴影（静态，不做动画） —— */
  --sh-1: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -22px rgba(15,23,42,.28);
  --sh-2: 0 2px 4px rgba(15,23,42,.04), 0 28px 60px -30px rgba(37,99,235,.42);
  --sh-3: 0 1px 2px rgba(15,23,42,.04), 0 40px 90px -40px rgba(37,99,235,.5);
}

/* ============================== 基础 ============================== */
html, body.sh { background: var(--bg); }

/* ---------------------------------------------------------------------------
   ★ 滚动修复（2026-10-01）★
   根因：app.css 第 673 行有全局规则 `html, body { height: 100%; }`
        （那是给工作台/访客聊天「锁定视口、禁整页滚动」用的）
        官网是长文档流首页，被这条规则把 html/body 的高度锁成「一屏」，
        内容虽然溢出，但文档可滚动区高度 = body 盒高 - 视口 = 0
        → 表现就是「往下滑滑不动」。
   修复：官网作用域内解除高度锁定（html 高度回归 auto = 内容高），
        横向溢出仍用 clip 抑制（不产生横向滚动条）。
   --------------------------------------------------------------------------- */
/* ★ 必须限定在官网作用域：客服工作台 / 访客聊天页依赖 app.css 的 html,body{height:100%}
     来锁定视口，若在此处写无条件 `html{height:auto}` 会把工作台布局一起打坏。 */
html:has(body.sh),
html.has-sh { height: auto !important; overflow-y: auto; }
body.sh {
  height: auto !important;
  min-height: 100vh;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-y: visible;
}
body.sh a { text-decoration: none; }
.sh-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 26px; position: relative; z-index: 2; }

/* ============================== 空间背景 ============================== */
.sh-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sh-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1400px 760px at 76% -12%, rgba(59,130,246,.20), transparent 62%),
    radial-gradient(1100px 640px at 8% 2%, rgba(125,211,252,.22), transparent 60%),
    radial-gradient(900px 600px at 50% 104%, rgba(129,140,248,.16), transparent 62%),
    linear-gradient(180deg, #fbfdff 0%, #f3f7fd 46%, #e9f1fb 100%);
}
/* 光晕：只做位移，不做 scale（scale 会触发大面积重光栅化） */
.sh-orb {
  position: absolute; border-radius: 50%;
  will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}
.sh-orb.a { width: 560px; height: 560px; left: -180px; top: -160px;
  background: radial-gradient(circle at 40% 38%, rgba(96,165,250,.34), rgba(96,165,250,0) 66%);
  animation: shOrbA 30s ease-in-out infinite; }
.sh-orb.b { width: 620px; height: 620px; right: -220px; top: 40px;
  background: radial-gradient(circle at 56% 44%, rgba(125,211,252,.32), rgba(125,211,252,0) 68%);
  animation: shOrbB 38s ease-in-out infinite; }
.sh-orb.c { width: 560px; height: 560px; left: 34%; bottom: -220px;
  background: radial-gradient(circle at 50% 50%, rgba(129,140,248,.22), rgba(129,140,248,0) 70%); }
@keyframes shOrbA { 50% { transform: translate3d(72px, 54px, 0); } }
@keyframes shOrbB { 50% { transform: translate3d(-64px, 68px, 0); } }


/* 大型透明 3D 球体：径向渐变 + 边缘高光 + 底部反光，纯 CSS 造体积感 */
.sh-sphere {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 68% 74%, rgba(147,197,253,.5), rgba(147,197,253,0) 52%),
    radial-gradient(circle at 50% 50%, rgba(219,234,254,.55), rgba(191,219,254,.28) 62%, rgba(147,197,253,.16) 100%);
  box-shadow: inset -18px -22px 60px rgba(96,165,250,.28), inset 14px 16px 44px rgba(255,255,255,.85);
  opacity: .78;
}
.sh-sphere.s1 { width: 460px; height: 460px; right: -110px; top: 120px; }
.sh-sphere.s2 { width: 240px; height: 240px; left: -70px; top: 460px; opacity: .6; }

/* 玻璃圆环。
   ★ 2026-09-29 A/B 实测修正：原来用「conic-gradient + mask + 旋转」做流光环，
   实测单独关掉它空闲帧率 36 → 44（占 8 帧），原因是带遮罩的锥形渐变每帧都要
   重新光栅化，旋转并不能走合成。改成「border 双色环 + rotate」后是**纯合成**，
   视觉上仍是光线沿环流动，开销接近零。 */
.sh-ring {
  position: absolute; border-radius: 50%; contain: paint;
  border: 2px solid rgba(96,165,250,.13);
  border-top-color: rgba(56,189,248,.72);
  border-right-color: rgba(125,211,252,.42);
  box-shadow: inset 0 0 40px rgba(96,165,250,.10);
  opacity: .75;
  will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}
.sh-ring.r1 { width: 380px; height: 380px; right: 60px; top: 250px; animation: shSpin 26s linear infinite; }
.sh-ring.r2 { width: 620px; height: 620px; right: -40px; top: 120px; animation: shSpin 44s linear infinite reverse; opacity: .5;
  border-width: 1.5px; border-color: rgba(96,165,250,.10); border-top-color: rgba(147,197,253,.5); border-left-color: rgba(125,211,252,.3); }
@keyframes shSpin { to { transform: rotate(360deg); } }
/* 3D 场景里的环要保持倾斜姿态，所以旋转必须带上 rotateX */
@keyframes shSpin3d {
  from { transform: translateZ(-90px) rotateX(72deg) rotate(0deg); }
  to   { transform: translateZ(-90px) rotateX(72deg) rotate(360deg); }
}

/* 微弱网格 + 点阵 */
.sh-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(59,130,246,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.06) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(1100px 620px at 62% 6%, #000 8%, transparent 72%);
  mask-image: radial-gradient(1100px 620px at 62% 6%, #000 8%, transparent 72%);
}
.sh-dots {
  position: absolute; inset: 0; opacity: .38;
  background-image: radial-gradient(rgba(37,99,235,.24) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 520px at 18% 86%, #000, transparent 72%);
  mask-image: radial-gradient(760px 520px at 18% 86%, #000, transparent 72%);
}
/* 空间粒子：少量小点，只做缓慢位移 */
.sh-particles { position: absolute; inset: 0; }
.sh-particles i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(59,130,246,.5); will-change: transform;
  animation: shFloat 18s ease-in-out infinite;
}
.sh-particles i:nth-child(1) { left: 14%; top: 22%; animation-duration: 16s; }
.sh-particles i:nth-child(2) { left: 82%; top: 34%; animation-duration: 22s; animation-delay: -4s; background: rgba(125,211,252,.7); }
.sh-particles i:nth-child(3) { left: 26%; top: 68%; animation-duration: 19s; animation-delay: -8s; }
.sh-particles i:nth-child(4) { left: 68%; top: 76%; animation-duration: 24s; animation-delay: -2s; background: rgba(129,140,248,.55); }
.sh-particles i:nth-child(5) { left: 46%; top: 14%; animation-duration: 21s; animation-delay: -12s; width: 2px; height: 2px; }
.sh-particles i:nth-child(6) { left: 92%; top: 62%; animation-duration: 26s; animation-delay: -6s; width: 4px; height: 4px; background: rgba(96,165,250,.28); }
@keyframes shFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .5; }
  50% { transform: translate3d(10px, -22px, 0); opacity: 1; }
}
/* 斜向光线 */
.sh-ray {
  position: absolute; width: 120%; height: 1px; left: -10%;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.42), transparent);
  opacity: .5; transform: rotate(-14deg);
}
.sh-ray.l1 { top: 22%; }
.sh-ray.l2 { top: 58%; opacity: .3; transform: rotate(-9deg); }

/* ============================== 导航 ============================== */
.sh-nav {
  position: sticky; top: 0; z-index: 40; height: 68px;
  background: rgba(252,254,255,.88);
  border-bottom: 1px solid rgba(15,23,42,.06);
  transition: background .35s, box-shadow .35s, border-color .35s, height .35s;
}
.sh-nav-in { display: flex; align-items: center; gap: 10px; height: 68px; }
.sh-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15.6px; font-weight: 620; letter-spacing: -.015em; }
.sh-logo-mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue-2) 55%, var(--blue) 100%);
  box-shadow: 0 6px 18px -6px rgba(37,99,235,.75), inset 0 1px 0 rgba(255,255,255,.45);
}
.sh-links { display: flex; gap: 2px; margin-left: 20px; }
.sh-links a {
  font-size: 13.8px; color: var(--ink-2); padding: 8px 13px; border-radius: 10px;
  transition: color .2s, background .2s;
}
.sh-links a:hover { color: var(--blue); background: rgba(37,99,235,.07); }
.sh-grow { flex: 1; }

/* 滚动后：导航变悬浮玻璃胶囊 */
.sh-nav.stuck {
  background: rgba(255,255,255,.14);
  border-bottom-color: transparent;
  box-shadow: none;
}
.sh-nav.stuck .sh-nav-in {
  height: 56px; margin-top: 8px; padding: 0 10px 0 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 10px 34px -16px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.95);
}

/* 北京时间胶囊 */
.sh-clock {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: 999px; font-size: 12.4px; color: var(--ink-2); white-space: nowrap;
  background: rgba(255,255,255,.7); border: 1px solid rgba(15,23,42,.07);
}
.sh-clock b { font-variant-numeric: tabular-nums; font-weight: 620; color: var(--ink); font-size: 12.9px; }

/* 状态点：扩散环用 transform+opacity（纯合成） */
.sh-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #10b981; flex: none; display: block; }
.sh-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #10b981;
  opacity: 0; will-change: transform, opacity; animation: shPulse 2.6s ease-out infinite;
}
@keyframes shPulse { 0% { transform: scale(1); opacity: .5; } 72%, 100% { transform: scale(3.4); opacity: 0; } }

/* ============================== 按钮 ============================== */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 28px; border-radius: 14px; font-size: 14.8px; font-weight: 560;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; color: var(--ink);
  position: relative; overflow: hidden; touch-action: manipulation;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s, background .3s;
}
.sh-btn.primary {
  color: #fff; font-weight: 600;
  background: linear-gradient(135deg, #60a5fa 0%, var(--blue-2) 42%, var(--blue) 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 14px 32px -12px rgba(37,99,235,.74), inset 0 1px 0 rgba(255,255,255,.4);
}
.sh-btn.primary::after {      /* 扫光：hover 时掠过（transform 实现，不做重绘） */
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.sh-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 22px 46px -14px rgba(37,99,235,.82), inset 0 1px 0 rgba(255,255,255,.45); }
.sh-btn.primary:hover::after { transform: translateX(120%); }
.sh-btn.primary:active { transform: translateY(0); }
.sh-btn.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  border-color: var(--glass-line); color: var(--ink);
  box-shadow: var(--sh-1);
}
.sh-btn.glass:hover { transform: translateY(-2px); border-color: rgba(37,99,235,.34); box-shadow: var(--sh-2); }
.sh-btn.sm { height: 38px; padding: 0 16px; font-size: 13.4px; border-radius: 11px; }

/* ============================== Hero：左文右 3D ============================== */
.sh-hero { padding: 76px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 40px; align-items: center; }
.sh-hero-l { max-width: 560px; }
.sh-tag {
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 15px;
  border-radius: 999px; font-size: 12.2px; font-weight: 600; letter-spacing: .02em; color: var(--blue);
  background: rgba(255,255,255,.72); border: 1px solid rgba(37,99,235,.16);
  box-shadow: 0 8px 22px -14px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.sh-hero h1 {
  font-size: clamp(40px, 4.9vw, 68px); line-height: 1.07; letter-spacing: -.045em;
  font-weight: 680; margin: 24px 0 0; color: #071022;
}
.sh-hero h1 em {
  font-style: normal; display: inline-block;
  background: linear-gradient(100deg, #38bdf8 0%, #2563eb 48%, #6366f1 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-hero p.sub {
  font-size: clamp(15px, 1.24vw, 16.6px); line-height: 1.92; color: var(--ink-2);
  margin: 26px 0 0; max-width: 500px;
}
.sh-cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 36px; }
.sh-hero-meta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.9px; color: var(--ink-3); }
.sh-hero-meta > span { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.sh-hero-meta svg { color: var(--blue-2); flex: none; }

/* ---------- Hero 右侧：3D 客服工作空间 ---------- */
.sh-3d { position: relative; height: 500px; perspective: 1400px; perspective-origin: 55% 46%; }
.sh-3d-stage {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg)) translateZ(0);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.sh-3d-stage.moving { transition: transform .12s linear; }
/* 中心：玻璃客服终端 */
.sh-term {
  position: absolute; left: 50%; top: 50%; width: 268px; height: 348px;
  margin: -174px 0 0 -134px; border-radius: 22px; transform: translateZ(0);
  background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.52));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 44px 90px -40px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.sh-term-head {
  height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid rgba(15,23,42,.06); background: rgba(255,255,255,.6);
}
.sh-term-head .t { font-size: 12.6px; font-weight: 600; color: var(--ink); }
.sh-term-head .s { font-size: 11.2px; color: var(--ink-3); margin-left: auto; }
.sh-term-body { flex: 1; display: grid; place-items: center; position: relative; }
/* 中心发光二维码核心 */
.sh-core {
  position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 18px; background: #fff; padding: 11px; transform: translateZ(24px);
  box-shadow: 0 0 0 1px rgba(37,99,235,.12), 0 18px 40px -18px rgba(37,99,235,.6);
}
.sh-core img, .sh-core .ph {
  width: 100%; height: 100%; border-radius: 10px; display: block; object-fit: cover;
}
.sh-core .ph {
  display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.7; color: var(--ink-3);
  background: linear-gradient(160deg, #f3f7fd, #e6eefb);
}
/* 核心外圈光晕（用 radial-gradient 的伪元素，无 blur） */
.sh-core-halo {
  position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px;
  border-radius: 50%; pointer-events: none; transform: translateZ(-40px);
  background: radial-gradient(circle, rgba(59,130,246,.30) 0%, rgba(59,130,246,.10) 44%, rgba(59,130,246,0) 70%);
}
.sh-term-foot {
  height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 8px;
  border-top: 1px solid rgba(15,23,42,.06); background: rgba(255,255,255,.55);
}
.sh-term-foot .bar { flex: 1; height: 28px; border-radius: 9px; background: rgba(15,23,42,.05); }

/* 悬浮小组件：分四个方位，各自翻译到不同 Z 深度 */
.sh-fl {
  position: absolute; display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 14px; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 22px 48px -26px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,1);
  font-size: 12.6px; color: var(--ink); font-weight: 540;
}
.sh-fl i.ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  color: var(--blue); background: rgba(37,99,235,.10);
}
.sh-fl .k { font-variant-numeric: tabular-nums; }
.sh-fl.c1 { left: 2%; top: 12%; transform: translateZ(76px); animation: shFl 7.5s ease-in-out infinite; }
.sh-fl.c2 { right: 0%; top: 20%; transform: translateZ(58px); animation: shFl 9s ease-in-out infinite -2.4s; }
.sh-fl.c3 { left: 0%; bottom: 20%; transform: translateZ(64px); animation: shFl 8s ease-in-out infinite -4.6s; }
.sh-fl.c4 { right: 4%; bottom: 13%; transform: translateZ(88px); animation: shFl 10s ease-in-out infinite -1.2s; }
@keyframes shFl {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}
/* 悬浮小组件用 margin 做漂浮（不改 transform，避免与 Z 深度打架）——
   这里 margin 不触发布局重排吗？不会：这些是绝对定位元素，父容器尺寸固定。 */

/* 后方环形与球体（空间层次） */
.sh-3d-ring {
  position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border-radius: 50%; transform: translateZ(-90px) rotateX(72deg);
  border: 2px solid rgba(96,165,250,.16);
  border-top-color: rgba(56,189,248,.65);
  border-right-color: rgba(125,211,252,.38);
  box-shadow: inset 0 0 50px rgba(96,165,250,.12);
  opacity: .8; animation: shSpin3d 30s linear infinite;
}
.sh-3d-ball {
  position: absolute; border-radius: 50%; transform: translateZ(-140px);
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.98), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 66% 72%, rgba(147,197,253,.62), rgba(147,197,253,0) 54%),
    radial-gradient(circle at 50% 50%, rgba(219,234,254,.7), rgba(191,219,254,.36) 64%, rgba(96,165,250,.2) 100%);
  box-shadow: inset -16px -20px 54px rgba(96,165,250,.3), inset 12px 14px 40px rgba(255,255,255,.9);
}
.sh-3d-ball.b1 { width: 120px; height: 120px; right: 4%; top: 4%; }
.sh-3d-ball.b2 { width: 74px; height: 74px; left: 6%; bottom: 8%; opacity: .8; }

/* ============================== 数据区 ============================== */
.sh-band { margin: 104px 0 0; text-align: center; }
.sh-band h2 {
  font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -.032em; font-weight: 660; margin: 0; color: #0a1223;
}
.sh-band h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #38bdf8, #2563eb 60%, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 44px 0 0;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-1);
}
.sh-stat { padding: 34px 18px; text-align: center; position: relative; }
.sh-stat + .sh-stat::before {
  content: ''; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(37,99,235,.18), transparent);
}
.sh-stat .n {
  font-size: clamp(32px, 3.9vw, 48px); font-weight: 680; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #1e3a8a, #2563eb 52%, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-stat .l { font-size: 12.8px; color: var(--ink-3); margin-top: 12px; letter-spacing: .04em; }
.sh-stat .u { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-left: 2px; }

/* ============================== 通用区块 ============================== */
.sh-sec { padding: 118px 0 0; }
.sh-sec-h { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.sh-sec-h .kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 640;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px;
}
.sh-sec-h .kicker::before, .sh-sec-h .kicker::after {
  content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,.5));
}
.sh-sec-h .kicker::after { background: linear-gradient(90deg, rgba(37,99,235,.5), transparent); }
.sh-sec-h h2 {
  font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; font-weight: 660;
  margin: 0 0 14px; color: #0a1223; line-height: 1.24;
}
.sh-sec-h h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #38bdf8, #2563eb 58%, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-sec-h p { color: var(--ink-2); margin: 0; font-size: 15.2px; line-height: 1.86; }

/* ============================== 能力卡（大尺寸横向） ============================== */
.sh-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sh-cap {
  position: relative; border-radius: 22px; padding: 34px 34px 32px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-1);
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), box-shadow .42s, border-color .42s;
}
.sh-cap.tilt { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.sh-cap.tilt.moving { transition: transform .12s linear, box-shadow .42s, border-color .42s; }
.sh-cap.tilt:hover { --lift: -6px; border-color: rgba(37,99,235,.28); box-shadow: var(--sh-2); }
/* 光标跟随的高光（指针进入才淡入） */
.sh-cap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .34s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(59,130,246,.14), transparent 68%);
}
.sh-cap.tilt.moving::before, .sh-cap.tilt:hover::before { opacity: 1; }
/* 蓝色光线边框：hover 时沿边框流动（用 conic-gradient + mask，位移实现） */
.sh-cap::after {
  content: ''; position: absolute; inset: -1px; border-radius: 23px; pointer-events: none;
  opacity: 0; transition: opacity .4s;
  background: conic-gradient(from var(--ang, 0deg), transparent 0deg, rgba(56,189,248,.85) 40deg, transparent 110deg);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1.5px;
}
.sh-cap.tilt:hover::after { opacity: 1; }
.sh-cap-top { display: flex; align-items: flex-start; gap: 18px; }
.sh-cap-no {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: rgba(37,99,235,.5);
  font-variant-numeric: tabular-nums; flex: none; padding-top: 4px;
}
/* 3D 小图形：立体玻璃方块 + 内部图标，随 hover 轻微旋转 */
.sh-cap-3d { width: 58px; height: 58px; flex: none; perspective: 420px; }
.sh-cap-3d .bx {
  width: 100%; height: 100%; border-radius: 16px; display: grid; place-items: center;
  color: #fff; position: relative;
  background: linear-gradient(140deg, #7dd3fc 0%, #3b82f6 52%, #4f46e5 100%);
  box-shadow: 0 12px 26px -12px rgba(37,99,235,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 18px rgba(30,58,138,.28);
  transform: rotateX(14deg) rotateY(-16deg); transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.sh-cap.tilt:hover .bx { transform: rotateX(6deg) rotateY(-6deg) translateZ(14px); }
.sh-cap-3d .bx::after {   /* 顶面高光 */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.5), transparent 46%);
  pointer-events: none;
}
.sh-cap h3 { margin: 0 0 9px; font-size: 18.4px; font-weight: 640; letter-spacing: -.02em; color: #0a1223; }
.sh-cap p { margin: 0; font-size: 14.2px; line-height: 1.86; color: var(--ink-2); }
.sh-cap .tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.sh-cap .tags span {
  font-size: 11.8px; color: var(--blue); padding: 4px 10px; border-radius: 999px;
  background: rgba(37,99,235,.075); border: 1px solid rgba(37,99,235,.13);
}
.sh-cap .body { padding-top: 20px; margin-top: 20px; border-top: 1px solid rgba(15,23,42,.06); }

/* ============================== 产品演示 Mockup ============================== */
.sh-demo { perspective: 1600px; }
.sh-mock {
  position: relative; border-radius: 20px; overflow: hidden; margin: 0 auto; max-width: 1060px;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
  border: 1px solid var(--glass-line);
  box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 60px 120px -60px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,1);
  transform-style: preserve-3d;
  transform: rotateX(var(--mrx, 0deg)) rotateY(var(--mry, 0deg)) scale(var(--msc, 1)) translateY(var(--mty, 0px));
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.sh-mock.moving { transition: transform .18s linear; }
.sh-mock-bar {
  height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid rgba(15,23,42,.06); background: rgba(255,255,255,.72);
}
.sh-mock-bar .dots { display: flex; gap: 6px; }
.sh-mock-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(15,23,42,.12); }
.sh-mock-bar .dots i:nth-child(1) { background: #fca5a5; }
.sh-mock-bar .dots i:nth-child(2) { background: #fcd34d; }
.sh-mock-bar .dots i:nth-child(3) { background: #86efac; }
.sh-mock-bar .url {
  flex: 1; max-width: 420px; margin: 0 auto; height: 24px; border-radius: 7px;
  background: rgba(15,23,42,.045); display: flex; align-items: center; justify-content: center;
  font-size: 11.4px; color: var(--ink-3); letter-spacing: .01em;
}
.sh-mock-app { display: grid; grid-template-columns: 216px 1fr 250px; height: 430px; }
.sh-mock-side { border-right: 1px solid rgba(15,23,42,.06); padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; background: rgba(255,255,255,.42); }
.sh-mock-side .hd { font-size: 11.4px; color: var(--ink-3); letter-spacing: .06em; padding: 2px 6px 6px; }
.sh-conv {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(15,23,42,.05);
}
.sh-conv.on { background: rgba(37,99,235,.075); border-color: rgba(37,99,235,.24); }
.sh-conv .av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--blue); background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.sh-conv .tx { min-width: 0; flex: 1; }
.sh-conv .nm { font-size: 12.6px; font-weight: 560; color: var(--ink); }
.sh-conv .pv { font-size: 11.2px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-conv .bg { min-width: 17px; height: 17px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; padding: 0 5px; }
.sh-mock-chat { display: flex; flex-direction: column; background: rgba(248,251,255,.6); }
.sh-mock-chat .head { height: 50px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(15,23,42,.06); background: rgba(255,255,255,.6); }
.sh-mock-chat .head .nm { font-size: 13.4px; font-weight: 600; color: var(--ink); }
.sh-mock-chat .head .st { font-size: 11.4px; color: #10b981; display: inline-flex; align-items: center; gap: 5px; }
.sh-mock-msgs { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.sh-msg { display: flex; gap: 9px; align-items: flex-end; max-width: 78%; }
.sh-msg .av { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 11px; color: var(--blue); background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.sh-msg .b {
  padding: 10px 13px; border-radius: 14px; font-size: 12.8px; line-height: 1.6; color: var(--ink);
  background: #fff; border: 1px solid rgba(15,23,42,.06); box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.sh-msg.me { margin-left: auto; flex-direction: row-reverse; }
.sh-msg.me .b { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-color: transparent; }
.sh-msg.me .av { background: linear-gradient(135deg, #bfdbfe, #93c5fd); color: #1e40af; }
.sh-mock-input { padding: 12px 16px 16px; }
.sh-mock-input .ib {
  height: 40px; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.07);
  display: flex; align-items: center; padding: 0 13px; font-size: 12.4px; color: var(--ink-3);
}
.sh-mock-info { border-left: 1px solid rgba(15,23,42,.06); padding: 16px 14px; background: rgba(255,255,255,.42); }
.sh-mock-info .hd { font-size: 11.4px; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 12px; }
.sh-kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 12.2px; border-bottom: 1px dashed rgba(15,23,42,.06); }
.sh-kv .k { color: var(--ink-3); }
.sh-kv .v { color: var(--ink); font-weight: 520; }
.sh-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.4px; font-weight: 600;
  color: #1d4ed8; background: rgba(37,99,235,.09); border: 1px solid rgba(37,99,235,.16);
  padding: 4px 10px; border-radius: 999px;
}
.sh-mock-glow {   /* Mockup 底部的光晕（radial-gradient，无 blur） */
  position: absolute; left: 50%; top: 100%; width: 900px; height: 300px; margin: 0 0 0 -450px;
  pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.3), rgba(59,130,246,0) 66%);
}

/* ============================== 使用场景 ============================== */
.sh-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sh-scene {
  position: relative; border-radius: 20px; padding: 28px 26px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  border: 1px solid var(--glass-line); box-shadow: var(--sh-1);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s, border-color .4s;
}
.sh-scene:hover { transform: translateY(-5px); border-color: rgba(37,99,235,.24); box-shadow: var(--sh-2); }
.sh-scene .fig {
  width: 100%; height: 108px; border-radius: 14px; margin-bottom: 20px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #eff6ff, #e0edfd 60%, #e8f4fe);
  border: 1px solid rgba(255,255,255,.9);
}
/* 每个场景一个极简科技图形（纯 CSS 几何，不用插画） */
.sh-scene .fig i { position: absolute; display: block; border-radius: 8px; }
.sh-scene .fig .p1 { left: 14%; top: 26%; width: 44%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(37,99,235,.55), rgba(37,99,235,.12)); }
.sh-scene .fig .p2 { left: 14%; top: 48%; width: 68%; height: 10px; border-radius: 5px; background: rgba(37,99,235,.16); }
.sh-scene .fig .p3 { left: 14%; top: 66%; width: 52%; height: 10px; border-radius: 5px; background: rgba(37,99,235,.11); }
.sh-scene .fig .orb { right: 10%; top: 20%; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.95), rgba(147,197,253,.6) 52%, rgba(59,130,246,.24));
  box-shadow: inset -8px -10px 24px rgba(96,165,250,.28); }
.sh-scene .fig .grid { inset: 0; border-radius: 14px; opacity: .5;
  background-image: linear-gradient(rgba(59,130,246,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,.1) 1px, transparent 1px);
  background-size: 22px 22px; }
.sh-scene h4 { margin: 0 0 8px; font-size: 16.4px; font-weight: 620; letter-spacing: -.015em; color: #0a1223; }
.sh-scene p { margin: 0; font-size: 13.8px; line-height: 1.82; color: var(--ink-2); }

/* ============================== 工作流程（横向 3D 线） ============================== */
.sh-flow { position: relative; padding: 26px 0 8px; }
.sh-flow-line {
  position: absolute; left: 6%; right: 6%; top: 62px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(37,99,235,.14));
  overflow: hidden;
}
.sh-flow-line::after {   /* 光点在线上流动 */
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.9), transparent);
  animation: shFlow 3.6s linear infinite;
}
@keyframes shFlow { to { transform: translateX(100%); } }
.sh-nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; }
.sh-node { text-align: center; }
.sh-node .pt {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(15,23,42,.07); color: var(--ink-3);
  box-shadow: 0 8px 22px -14px rgba(15,23,42,.4);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s, color .5s, background .5s;
}
.sh-node.on .pt {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  box-shadow: 0 0 0 6px rgba(59,130,246,.12), 0 16px 34px -14px rgba(37,99,235,.85);
  transform: translateY(-3px) scale(1.06);
}
.sh-node .nm { font-size: 14px; font-weight: 600; color: var(--ink-3); transition: color .5s; }
.sh-node.on .nm { color: var(--ink); }
.sh-node .ds { font-size: 12.4px; color: var(--ink-3); margin-top: 6px; line-height: 1.7; }

/* ============================== 底部 CTA ============================== */
.sh-cta-big {
  position: relative; margin: 132px 0 0; padding: 76px 40px; border-radius: 30px; overflow: hidden;
  text-align: center; isolation: isolate;
  background: linear-gradient(165deg, rgba(255,255,255,.9), rgba(240,246,255,.72));
  border: 1px solid var(--glass-line);
  box-shadow: 0 2px 6px rgba(15,23,42,.04), 0 60px 120px -60px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,1);
}
/* 背景大光球 */
.sh-cta-big .ball {
  position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%; z-index: -1;
  will-change: transform; backface-visibility: hidden;
  background:
    radial-gradient(circle at 40% 34%, rgba(255,255,255,.9), rgba(255,255,255,0) 44%),
    radial-gradient(circle at 62% 68%, rgba(147,197,253,.6), rgba(147,197,253,0) 56%),
    radial-gradient(circle at 50% 50%, rgba(191,219,254,.55), rgba(96,165,250,.22) 66%, rgba(96,165,250,0) 78%);
  animation: shBall 22s ease-in-out infinite;
}
@keyframes shBall { 50% { transform: translate3d(26px, -20px, 0); } }
.sh-cta-big .ring2 {
  position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px;
  border-radius: 50%; z-index: -1;
  border: 2px solid rgba(96,165,250,.12);
  border-top-color: rgba(56,189,248,.55);
  border-left-color: rgba(125,211,252,.3);
  box-shadow: inset 0 0 60px rgba(96,165,250,.10);
  opacity: .7; animation: shSpin 38s linear infinite;
}
.sh-cta-big h2 {
  font-size: clamp(28px, 4vw, 48px); letter-spacing: -.04em; font-weight: 670; margin: 0; line-height: 1.18; color: #071022;
}
.sh-cta-big h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #38bdf8, #2563eb 58%, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-cta-big p { color: var(--ink-2); font-size: 15.4px; margin: 18px 0 0; }
.sh-cta-big .acts { margin-top: 34px; display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ============================== 页脚 ============================== */
.sh-foot { margin-top: 118px; border-top: 1px solid rgba(15,23,42,.07); background: rgba(252,254,255,.86); }
.sh-foot-in { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 34px 0; font-size: 13.2px; color: var(--ink-3); }
.sh-foot-in b { color: var(--ink); font-weight: 620; }

/* ============================== 滚动进度条 ============================== */
.sh-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, #22d3ee, #3b82f6, #6366f1);
  box-shadow: 0 0 12px rgba(59,130,246,.6);
}

/* ============================== 入场动效 ============================== */
.sh-in.pre { opacity: 0; transform: translateY(20px); }
.sh-in.on { opacity: 1; transform: none; transition: opacity .78s cubic-bezier(.22,.61,.36,1), transform .78s cubic-bezier(.22,.61,.36,1); }
/* Mockup：从下往上出现 + 轻微旋转缩放 */
.sh-rise.pre { opacity: 0; transform: translateY(64px) rotateX(9deg) scale(.965); }
.sh-rise.on { opacity: 1; transform: translateY(0) rotateX(0) scale(1); transition: opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1); }

/* ============================== 响应式 ============================== */
@media (max-width: 1120px) {
  .sh-mock-app { grid-template-columns: 200px 1fr; }
  .sh-mock-info { display: none; }
}
@media (max-width: 1000px) {
  .sh-hero { grid-template-columns: 1fr; gap: 26px; padding-top: 56px; }
  .sh-hero-l { max-width: 640px; }
  .sh-3d { height: 430px; }
  .sh-caps { grid-template-columns: 1fr; }
  .sh-scenes { grid-template-columns: repeat(2, 1fr); }
  .sh-sec { padding: 84px 0 0; }
  .sh-band { margin-top: 76px; }
  .sh-cta-big { margin-top: 92px; padding: 58px 28px; }
}
@media (max-width: 860px) {
  .sh-clock { display: none; }
  .sh-links { display: none; }
  .sh-mock-app { grid-template-columns: 1fr; height: auto; }
  .sh-mock-side { display: none; }
  .sh-mock-chat { height: 380px; }
  .sh-nodes { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .sh-node .ds { display: none; }
  .sh-node .pt { width: 38px; height: 38px; }
  .sh-flow-line { top: 46px; left: 3%; right: 3%; }
}
@media (max-width: 760px) {
  .sh-wrap { padding: 0 18px; }
  .sh-hero h1 { font-size: clamp(32px, 9.2vw, 44px); letter-spacing: -.036em; }
  .sh-hero p.sub { margin-top: 20px; line-height: 1.85; }
  .sh-cta { margin-top: 26px; gap: 10px; }
  .sh-cta .sh-btn { width: 100%; height: 48px; }
  .sh-hero-meta { margin-top: 22px; gap: 6px 16px; font-size: 12.3px; }
  .sh-3d { height: 360px; perspective: 900px; }
  .sh-term { width: 216px; height: 288px; margin: -144px 0 0 -108px; }
  .sh-core { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  .sh-fl { padding: 8px 11px; font-size: 11.6px; border-radius: 12px; }
  .sh-fl i.ic { width: 22px; height: 22px; border-radius: 7px; }
  .sh-fl.c1 { left: 0; top: 6%; }
  .sh-fl.c2 { right: 0; top: 16%; }
  .sh-fl.c3 { left: 0; bottom: 14%; }
  .sh-fl.c4 { right: 0; bottom: 6%; }
  .sh-3d-ring { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .sh-3d-ball.b1 { width: 84px; height: 84px; }
  .sh-3d-ball.b2 { display: none; }
  .sh-band { margin-top: 52px; }
  .sh-stats { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
  .sh-stat { padding: 22px 10px; }
  .sh-stat:nth-child(3)::before { display: none; }
  .sh-stat:nth-child(3), .sh-stat:nth-child(4) { border-top: 1px solid rgba(37,99,235,.14); }
  .sh-sec { padding: 56px 0 0; }
  .sh-sec-h { margin-bottom: 30px; }
  .sh-sec-h h2 { font-size: 24px; }
  .sh-cap { padding: 22px 20px; border-radius: 18px; }
  .sh-cap h3 { font-size: 16.6px; }
  .sh-scenes { grid-template-columns: 1fr; gap: 12px; }
  .sh-cta-big { margin-top: 68px; padding: 44px 20px; border-radius: 22px; }
  .sh-cta-big .ball { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .sh-cta-big .ring2 { width: 520px; height: 520px; margin: -260px 0 0 -260px; }
  .sh-foot { margin-top: 72px; }
  /* 移动端关闭所有 3D / 视差 / 漂浮，保 60FPS */
  .sh-3d-stage { transform: none !important; }
  .sh-fl { animation: none !important; }
  .sh-cap.tilt { transform: none !important; }
  .sh-cap::after, .sh-cap::before { display: none; }
  .sh-orb { animation: none; }
  .sh-mock { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-orb, .sh-dot::after, .sh-particles i, .sh-3d-ring, .sh-ring, .sh-flow-line::after,
  .sh-cta-big .ball, .sh-cta-big .ring2, .sh-fl { animation: none !important; }
  .sh-in, .sh-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sh-cap.tilt, .sh-mock { transform: none !important; transition: none !important; }
  .sh-progress { display: none; }
}

/* ============================================================================
   性能修正（2026-09-29 实测）
   ----------------------------------------------------------------------------
   上面所有 backdrop-filter 已全部移除，改用「仿玻璃」：
     linear-gradient 半透明白 + 白色描边 + 内高光 + 多层阴影。
   原因：首版用了 18 个 backdrop-filter（导航/终端/4 悬浮件/数据条/4 能力卡/
   6 场景卡/Mockup/CTA/页脚），而背景上还跑着光斑漂移动画 —— 每个 backdrop-filter
   元素每帧都要重新采样并混合背景像素，实测空闲帧率从 50 掉到 18（最低 9 帧）。
   背景本身是极淡的蓝白，用不透明的仿玻璃后肉眼几乎无差别，开销接近零。
   —— 与 kf 站当年「去掉 8 处 backdrop-filter，主线程 90.5%→0.1%」是同一个坑。
   ============================================================================ */

/* ============================================================================
   流畅度修复（2026-09-30 用户反馈「网站很卡」）
   ----------------------------------------------------------------------------
   实测定位（真实手机模拟 390x844@2x + CPU 6x 节流）：
     · 空闲 58 FPS 尚可，但**滚动掉到 48 FPS、最低 20 帧** —— 手滑一下就能看出顿挫
     · 长任务 0、JS 异常 0 → 不是脚本问题，是**绘制/合成**层面的负担
   三个原因：
     ① 页面高 4600+px，全部区块一直参与渲染（视口外也在画）
     ② 移动端仍保留 6 个持续动画（光环旋转、粒子漂浮、状态点扩散、流程光点、光球漂移…）
     ③ `.sh-scan` 是 1px/4px 的全屏 repeating-linear-gradient（在 2x 屏上要画 800+ 条线）
   修法见下，全部只动「视觉开销」，不改任何内容与交互。
   ============================================================================ */

/* ① 视口外区块跳过渲染与绘制 —— 长页面最有效的一招 */
.sh-band, .sh-sec, .sh-cta-big, .sh-foot, .sh-hero {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;   /* 预估高度，防止滚动条跳动 */
}
.sh-hero { contain-intrinsic-size: auto 720px; }
.sh-stats { contain-intrinsic-size: auto 160px; }
.sh-foot  { contain-intrinsic-size: auto 120px; }

/* ③ 扫描线在手机上根本看不清，直接不画 */
@media (max-width: 1000px) { .sh-scan { display: none; } }

/* ② 移动端彻底静态化：只保留一次性入场，去掉一切持续动画 */
@media (max-width: 1000px) {
  .sh-ring, .sh-3d-ring, .sh-cta-big .ring2, .sh-cta-big .ball,
  .sh-dot::after, .sh-flow-line::after, .sh-fl, .sh-orb { animation: none !important; }
  /* 手机上去掉纯装饰元素：粒子/斜光线/点阵/多余的球与环（看不清，只吃性能） */
  .sh-particles, .sh-ray, .sh-dots, .sh-sphere.s2, .sh-ring.r2 { display: none; }
  .sh-grid { opacity: .38; }
  /* 悬浮小组件静止摆放，避免每帧合成 */
  .sh-fl { margin-top: 0 !important; }
}

/* ============================================================================
   ▼▼▼ v5 视觉升级层  2026-10-01  ▼▼▼
   目标：更强的科技感与高级感 + 把「功能」可视化表达出来
   纪律不变：无 filter:blur、无 box-shadow 动画、动画只动 transform/opacity
   ============================================================================ */

/* ---------- v5.1 通用玻璃卡 + 渐变描边（高级感的核心技法） ---------- */
.sh-grad-line { position: relative; }
.sh-grad-line::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, rgba(37,99,235,.42), rgba(125,211,252,.20) 38%, rgba(255,255,255,.85) 72%, rgba(99,102,241,.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 3;
}

/* ---------- v5.2 区块标题：渐变强调字 ---------- */
.sh-sec-h h2 em { background: linear-gradient(100deg, var(--blue) 6%, var(--cyan) 52%, var(--indigo) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }

/* ---------- v5.3 双端联动 ---------- */
.sh-dual {
  display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 26px; align-items: center;
  margin-top: 46px;
}
@media (max-width: 1024px) { .sh-dual { grid-template-columns: 1fr; gap: 30px; } }

/* 访客手机 */
.sh-phone { position: relative; width: 100%; max-width: 336px; margin: 0 auto; }
.sh-phone-scr {
  position: relative; border-radius: 30px; padding: 20px 16px 14px;
  background: linear-gradient(160deg, #ffffff, #f2f7ff 60%, #e9f1fd);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 3px rgba(15,23,42,.05), 0 34px 66px -34px rgba(37,99,235,.42), inset 0 1px 0 #fff;
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.sh-phone-scr::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 76px; height: 4px; border-radius: 0 0 5px 5px;
  transform: translateX(-50%); background: linear-gradient(90deg, #dbeafe, #bfdbfe, #dbeafe);
}
.ph-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 10px;
  border-bottom: 1px solid rgba(15,23,42,.06); }
.ph-top b { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.ph-on { font-size: 11px; color: #059669; display: inline-flex; align-items: center; gap: 5px; }
.ph-on i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; position: relative; }
.ph-on i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(16,185,129,.5); animation: shPing 2.4s ease-out infinite; }
@keyframes shPing { 0% { transform: scale(.55); opacity: .9 } 70%,100% { transform: scale(1.25); opacity: 0 } }
.ph-msgs { display: flex; flex-direction: column; gap: 9px; min-height: 210px; }
.ph-m { max-width: 84%; padding: 9.5px 13px; border-radius: 15px; font-size: 12.6px; line-height: 1.5; }
.ph-m.in { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid rgba(15,23,42,.06);
  border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.ph-m.out { align-self: flex-end; color: #fff; border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, var(--blue-2), var(--blue)); box-shadow: 0 6px 16px -8px rgba(37,99,235,.6); }
.ph-foot { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 13px;
  background: #fff; border: 1px solid rgba(15,23,42,.07); margin-top: 4px; }
.ph-foot span { flex: 1; font-size: 12.2px; color: var(--ink-3); }
.ph-foot b { font-size: 12px; font-weight: 600; color: #fff; padding: 5px 13px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-2), var(--blue)); }

/* 实时通道 */
.sh-pipe { position: relative; width: 178px; min-height: 220px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; }
@media (max-width: 1024px) { .sh-pipe { width: 100%; min-height: 118px; } }
.sh-pipe-line { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.42) 22%, rgba(34,211,238,.55) 50%, rgba(99,102,241,.42) 78%, rgba(99,102,241,0)); }
@media (max-width: 1024px) { .sh-pipe-line { top: 50%; left: 8%; right: 8%; } }
.sh-pipe-pkt { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: radial-gradient(circle at 34% 32%, #fff, var(--cyan) 58%, var(--blue));
  box-shadow: 0 0 0 3px rgba(34,211,238,.13); animation: shFlow 2.8s linear infinite; }
.sh-pipe-pkt.p2 { animation-delay: .95s; }
.sh-pipe-pkt.p3 { animation-delay: 1.9s; }
@keyframes shFlow {
  0%   { transform: translateX(-74px) scale(.45); opacity: 0 }
  22%  { opacity: 1 } 78% { opacity: 1 }
  100% { transform: translateX(74px) scale(1); opacity: 0 }
}
.sh-pipe-cap { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border-radius: 999px; font-size: 12.4px; font-weight: 600; color: var(--blue);
  background: rgba(255,255,255,.92); border: 1px solid rgba(37,99,235,.20);
  box-shadow: 0 10px 24px -16px rgba(37,99,235,.7); }
.sh-pipe-cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.sh-pipe-sub { font-size: 11.4px; color: var(--ink-3); text-align: center; }

/* 客服工作台（右侧） */
.sh-wb { position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(245,249,255,.88));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 40px 80px -42px rgba(37,99,235,.5); }
.sh-wb-bar { display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  background: linear-gradient(180deg, #fff, #f7fafe); border-bottom: 1px solid rgba(15,23,42,.06); }
.sh-wb-bar .dots { display: inline-flex; gap: 5px; }
.sh-wb-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2e8f0; }
.sh-wb-bar .dots i:nth-child(1) { background: #fecaca; } .sh-wb-bar .dots i:nth-child(2) { background: #fde68a; }
.sh-wb-bar .dots i:nth-child(3) { background: #bbf7d0; }
.sh-wb-bar .url { font-size: 11.6px; color: var(--ink-3); }
.sh-wb-body { display: grid; grid-template-columns: 1.25fr .95fr; min-height: 262px; }
.sh-wb-list { padding: 12px; display: flex; flex-direction: column; gap: 7px;
  border-right: 1px solid rgba(15,23,42,.055); }
.sh-wb-list .it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; }
.sh-wb-list .it.on { background: linear-gradient(120deg, rgba(219,234,254,.8), rgba(239,246,255,.55));
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.14); }
.sh-wb-list .av { width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--blue);
  background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.sh-wb-list .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-wb-list .tx b { font-size: 12.4px; font-weight: 600; color: var(--ink); }
.sh-wb-list .tx em { font-size: 11.2px; color: var(--ink-3); font-style: normal; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sh-wb-list .bg { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.6px;
  font-weight: 700; color: #fff; background: linear-gradient(135deg, #fb7185, #ef4444);
  display: grid; place-items: center; }
.sh-wb-side { padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.sh-wb-side .k { font-size: 10.8px; font-weight: 600; color: var(--ink-3); letter-spacing: .06em; }
.sh-wb-side .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sh-wb-side .chips span { font-size: 11px; padding: 4px 10px; border-radius: 7px; color: var(--blue);
  background: rgba(219,234,254,.62); border: 1px solid rgba(37,99,235,.13); }
.sh-wb-side .kv { display: flex; justify-content: space-between; font-size: 11.4px; padding: 5px 0;
  border-bottom: 1px dashed rgba(15,23,42,.06); }
.sh-wb-side .kv span { color: var(--ink-3); } .sh-wb-side .kv b { color: var(--ink); font-weight: 600; }

.sh-tag { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); white-space: nowrap;
  font-size: 11.4px; padding: 5px 14px; border-radius: 999px; color: var(--ink-2);
  background: rgba(255,255,255,.96); border: 1px solid rgba(15,23,42,.07);
  box-shadow: 0 8px 20px -12px rgba(15,23,42,.5); }
.sh-phone, .sh-wb { margin-bottom: 14px; }

/* ---------- v5.4 功能全景（四列 → 自适应两列） ---------- */
.sh-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin-top: 44px; }
@media (max-width: 860px) { .sh-fgrid { grid-template-columns: 1fr; } }
.sh-fg {
  position: relative; padding: 24px 24px 20px; border-radius: 22px;
  background: linear-gradient(158deg, rgba(255,255,255,.90), rgba(244,249,255,.72));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 2px rgba(15,23,42,.035), 0 26px 54px -34px rgba(37,99,235,.42);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
.sh-fg:hover { transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 40px 74px -38px rgba(37,99,235,.58); }
.sh-fg::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, rgba(37,99,235,.36), rgba(125,211,252,.16) 42%, rgba(255,255,255,.85) 74%, rgba(99,102,241,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.sh-fg-h { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(15,23,42,.065); }
.sh-fg-h .no { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--blue-2), var(--indigo));
  box-shadow: 0 8px 18px -10px rgba(37,99,235,.85); }
.sh-fg-h b { font-size: 16.5px; font-weight: 680; color: var(--ink); letter-spacing: .01em; }
.sh-fg-h em { margin-left: auto; font-style: normal; font-size: 11.4px; color: var(--ink-3);
  padding: 3px 10px; border-radius: 999px; background: rgba(15,23,42,.045); }
.sh-fg ul { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; }
.sh-fg ul li { display: flex; align-items: flex-start; gap: 11px; padding: 9.5px 2px;
  border-bottom: 1px dashed rgba(15,23,42,.055); }
.sh-fg ul li:last-child { border-bottom: 0; }
.sh-fg ul li i { flex: none; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%;
  position: relative; background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(34,211,238,.16));
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.22); }
.sh-fg ul li i::after { content: ''; position: absolute; left: 4.2px; top: 4.6px; width: 6.5px; height: 3.4px;
  border-left: 1.7px solid var(--blue); border-bottom: 1.7px solid var(--blue); transform: rotate(-45deg); }
.sh-fg ul li b { flex: none; width: 100px; font-size: 13.2px; font-weight: 620; color: var(--ink); }
.sh-fg ul li span { flex: 1; font-size: 12.5px; line-height: 1.62; color: var(--ink-2); }
@media (max-width: 520px) { .sh-fg ul li { flex-wrap: wrap; } .sh-fg ul li b { width: auto; } }

/* ---------- v5.5 后台管理 ---------- */
.sh-admin { display: grid; grid-template-columns: 208px 1fr; margin-top: 44px; border-radius: 24px;
  overflow: hidden; background: linear-gradient(158deg, rgba(255,255,255,.94), rgba(244,249,255,.82));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 42px 84px -44px rgba(37,99,235,.5); }
@media (max-width: 860px) { .sh-admin { grid-template-columns: 1fr; } .sh-admin-nav { display: none; } }
.sh-admin-nav { padding: 20px 14px; border-right: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, rgba(246,250,255,.9), rgba(255,255,255,.5)); }
.sh-admin-nav .brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650;
  color: var(--ink); padding: 0 6px 16px; margin-bottom: 10px; border-bottom: 1px solid rgba(15,23,42,.06); }
.sh-admin-nav .brand span { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue-2), var(--indigo)); }
.sh-admin-nav .g { font-size: 10.4px; font-weight: 600; color: var(--ink-3); letter-spacing: .1em;
  padding: 13px 8px 6px; }
.sh-admin-nav a { display: block; font-size: 12.6px; color: var(--ink-2); padding: 7.5px 11px; border-radius: 9px;
  margin-bottom: 2px; }
.sh-admin-nav a.on { color: var(--blue); font-weight: 600; background: rgba(219,234,254,.72);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.13); }
.sh-admin-main { padding: 22px 24px 24px; }
.sh-admin-kpi { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 620px) { .sh-admin-kpi { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sh-admin-kpi .k { padding: 14px 15px; border-radius: 15px; background: #fff;
  border: 1px solid rgba(15,23,42,.055); box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.sh-admin-kpi .k b { display: block; font-size: 11.6px; font-weight: 600; color: var(--ink-3); margin-bottom: 7px; }
.sh-admin-kpi .k .n { display: block; font-size: 25px; font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--blue), var(--indigo)); -webkit-background-clip: text;
  background-clip: text; color: transparent; line-height: 1.1; }
.sh-admin-kpi .k em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: 5px; }
.sh-admin-tbl { border-radius: 15px; overflow: hidden; border: 1px solid rgba(15,23,42,.06); background: #fff; }
.sh-admin-tbl .th, .sh-admin-tbl .tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center; padding: 10px 15px; font-size: 12.4px; }
.sh-admin-tbl .th { background: linear-gradient(180deg, #f8fbff, #f2f7fe); color: var(--ink-3);
  font-weight: 600; font-size: 11.6px; }
.sh-admin-tbl .tr { border-top: 1px solid rgba(15,23,42,.05); color: var(--ink-2); }
.sh-admin-tbl .tr span:first-child { color: var(--ink); font-weight: 600; }
.sh-admin-tbl .ok, .sh-admin-tbl .wn { display: inline-flex; align-items: center; gap: 6px; }
.sh-admin-tbl .ok i, .sh-admin-tbl .wn i { width: 6px; height: 6px; border-radius: 50%; }
.sh-admin-tbl .ok { color: #059669; } .sh-admin-tbl .ok i { background: #10b981; }
.sh-admin-tbl .wn { color: #b45309; } .sh-admin-tbl .wn i { background: #f59e0b; }
.sh-admin-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 11.8px;
  color: var(--ink-3); }
.sh-admin-note .ln { flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(37,99,235,.34), rgba(34,211,238,.22), rgba(37,99,235,0)); }

/* ---------- v5.6 首屏科技增强：扫描光带 + 向下指引 ---------- */
/* 用 .sh-3d 伪元素承载扫描光：不额外加 overflow:hidden，避免裁掉 3D 悬浮件 */
.sh-3d::after {
  content: ''; position: absolute; left: -6%; right: -6%; top: 0; height: 130px; pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(37,99,235,0), rgba(37,99,235,.05) 42%, rgba(34,211,238,.075) 56%, rgba(37,99,235,0));
  animation: shScan 8.5s cubic-bezier(.55,0,.45,1) infinite; z-index: 0;
}
@keyframes shScan {
  0%   { transform: translateY(-140px) scaleY(.85); opacity: 0 }
  14%  { opacity: 1 }
  84%  { opacity: 1 }
  100% { transform: translateY(500px) scaleY(1.1); opacity: 0 }
}
/* 扫描经过的横向亮线 */
.sh-3d::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(34,211,238,0), rgba(37,99,235,.42), rgba(34,211,238,.5), rgba(37,99,235,.42), rgba(34,211,238,0));
  animation: shScan 8.5s cubic-bezier(.55,0,.45,1) infinite; z-index: 1;
}
.sh-scrollhint { display: flex; align-items: center; gap: 8px; margin: 34px auto 0; width: fit-content;
  font-size: 11.8px; color: var(--ink-3); letter-spacing: .04em; }
.sh-scrollhint .mo { width: 18px; height: 28px; border-radius: 9px; border: 1.4px solid rgba(37,99,235,.34);
  position: relative; }
.sh-scrollhint .mo::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px;
  margin-left: -1.5px; border-radius: 2px; background: var(--blue); animation: shWheel 2.1s ease-in-out infinite; }
@keyframes shWheel { 0%,100% { transform: translateY(0); opacity: 1 } 55% { transform: translateY(9px); opacity: .3 } }

/* ---------- v5.7 底部 CTA 增强 ---------- */
.sh-cta-big .acts .sh-btn { letter-spacing: .01em; }

/* ---------- v5.8 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-pipe-pkt, .sh-scanline, .sh-scrollhint .mo::after, .ph-on i::after { animation: none !important; }
  .sh-fg:hover { transform: none; }
}
@media (max-width: 760px) {
  .sh-scanline { display: none; }
  .sh-pipe-pkt { animation-duration: 3.4s; }
}