/* 移动端适配（Android / iOS） */
html{-webkit-text-size-adjust:100%}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.nav-glass{position:fixed;inset:0;z-index:15;background:rgba(3,6,14,.6);opacity:0;pointer-events:none;transition:.3s}
body.menu-open .nav-glass{opacity:1;pointer-events:auto}

@media(max-width:900px){
  .burger{display:grid}
  .nav-links{
    position:fixed;left:12px;right:12px;top:calc(64px + env(safe-area-inset-top));z-index:16;
    display:grid;gap:6px;padding:14px;border-radius:18px;border:1px solid var(--line-2);
    background:rgba(6,11,24,.96);backdrop-filter:blur(20px);box-shadow:0 26px 60px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:.3s}
  body.menu-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:13px 16px;font-size:16px;border-radius:12px;border:1px solid transparent}
  .nav-links a.on{border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.08)}
  .nav-links a::after{display:none}
  .wrap,.hero-inner,.hero-stats{width:auto;margin-left:20px;margin-right:20px}
  .hero{padding-bottom:64px}
  .hero h1{font-size:clamp(30px,9vw,44px);letter-spacing:-.5px}
  .hero-sub{font-size:15.5px}
  .hero-btns{gap:10px}
  .btn{flex:1 1 100%;justify-content:center;padding:13px 22px}
  .hero-stats{grid-template-columns:1fr;gap:12px;margin-top:40px}
  .hstat{padding:16px 18px}
  .hstat b{font-size:28px}
  .sec{padding:64px 0}
  .sec h2{font-size:clamp(22px,6.4vw,30px)}
  .lead{font-size:15px}
  .sub{margin-top:42px;font-size:18px}
  .grid{gap:14px;margin-top:30px}
  .card,.panel{padding:22px 18px}
  .card h3,.panel h3{font-size:17.5px}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stats b{font-size:22px}
  .steps li{padding:18px 16px 18px 66px}
  .note{font-size:14px;padding:15px 18px}
  .shot,.device-hero{border-radius:16px;margin-top:30px}
  .shot-bar{padding:10px 14px}
  .shot-bar em{font-size:10.5px;letter-spacing:1px}
  .shot figcaption{font-size:12.5px;padding:12px 14px}
  .device-hero{padding:10px}
  .dev-detail,.dev-detail.wide{grid-template-columns:1fr;width:auto;margin:28px 0 0;transform:none}
  .dev-detail.wide .dev-img{padding:8px;border-radius:14px}
  .dev-info h3{font-size:17px}
  .dev-info li{font-size:14.5px}
  .contact{padding:26px 22px;border-radius:18px}
  .foot{padding:64px 0 46px}
  .contact-info .tel{font-size:23px}
}

@media(max-width:480px){
  .stats{grid-template-columns:1fr}
  .hero h1{font-size:30px}
}
@media(hover:none){
  .cursor-glow{display:none}
}

/* ============================================================
   移动端性能优化（对应官网滑动卡顿的逐条治理）
   ============================================================ */
@media(max-width:900px){
  /* 1) backdrop-filter：要求浏览器每帧重新采样并模糊其背后内容。
        全站原本有 9 处在用，且背后正好是持续重绘的粒子画布，
        等于每帧做 9 次模糊 —— 这是卡顿最贵的一笔。
        这里全部关掉，改成略高不透明度的纯色底，观感几乎无差。 */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,7,15,.94)}
  .nav.scrolled{background:rgba(4,7,15,.97);box-shadow:0 8px 24px rgba(0,0,0,.42)}
  .eyebrow,.btn-ghost,.hstat,.card,.steps li,.stats div,.panel,.contact{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .eyebrow{background:rgba(34,211,238,.10)}
  .btn-ghost{background:rgba(255,255,255,.06)}
  .hstat{background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.03))}
  .card{background:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.03))}
  .steps li{background:linear-gradient(120deg,rgba(255,255,255,.085),rgba(255,255,255,.03))}
  .stats div{background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03))}
  .panel{background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03))}
  .contact{background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.04))}

  /* 2) 标题渐变流光靠动画 background-position 实现，会持续重绘文字。
        移动端改为静态渐变，视觉几乎无差、开销归零。 */
  .grad{animation:none}
  .pulse{animation:none;box-shadow:0 0 0 5px rgba(34,211,238,.2)}

  /* 3) 光球再降一级：去掉第三个、整体压暗，减少合成层面积 */
  .orb-c{display:none}
  .fx-orb{opacity:.34}

  /* 4) 揭示动效更快、去掉阶梯延迟 —— 顺手解决"信息出现比较慢" */
  .reveal{transform:translateY(12px);transition-duration:.34s}
  .grid .reveal,.steps .reveal{transition-delay:0s!important}

  /* 5) 视频卡窄屏改为竖排居中 */
  .vcard{grid-template-columns:1fr;gap:24px;padding:20px;justify-items:center;text-align:center}
  .vcover{width:186px}
  .vbody h3{font-size:20px}
  .vdesc{font-size:14.5px}
  .vmeta{justify-content:center}
  .vmodal video{max-height:84vh}

  /* 6) 合作机构滚动条：字号收紧、转速放慢 */
  .clients-band{padding:54px 0 58px}
  .clients-list li{padding:12px 18px;font-size:13.5px}
  .clients-track{animation-duration:52s}
}

@media(max-width:480px){
  .clients-track{animation-duration:58s}
}