/* =========================================================
   responsive.css — 滚动渐显、响应式断点与动效降级
   断点：1020px（平板）/ 780px（手机）
   ========================================================= */

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-sub{max-width:none}
  .phone-stage{margin-top:8px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .cov-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .dl-inner{grid-template-columns:1fr;justify-items:start}
  .dl-qr{justify-self:center}
  .stat-row{grid-template-columns:repeat(3,1fr);gap:14px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .nav-links{display:none}
  .nav-toggle{display:grid}
  .nav-cta .btn{display:none}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:74px;padding:8px 22px 18px;
    background:rgba(10,11,13,.98);border-bottom:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(14px);
  }
  .nav.open .nav-links a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav.open .nav-links a.active::after{display:none}
  .quote-cards{grid-template-columns:1fr}
  .qc{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:16px 18px}
  .qc .pv{margin:0;font-size:24px}
  .qc .cv{margin-left:auto}
  .qc .flag{display:none}
  .fgrid{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr}
  .dl-btns .dl-btn{flex:1 1 46%}
  .foot-grid{grid-template-columns:1fr}
  .foot-col{display:none}
  /* 小屏下手机两侧没有余量，浮层会压住 App 内容，直接隐藏 */
  .badge-float,.float-card{display:none}
  .chart-tabs button{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
}
