/* =========================================================
   responsive.css —— 响应式（必须最后加载，覆盖上面的组件样式）
   设计目标：平板/手机单列；手机端上方文字水平居中；320–428px 触摸与断行优化
   ========================================================= */

/* ---------- 平板及以下：单列布局，上方文字居中 ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero-text{text-align:center}
  .hero-meta{justify-content:center}
  .hero-cta{justify-content:center}
  .char-frame{max-width:340px;margin:18px auto 0}
  .dl-card{grid-template-columns:1fr}
  .dl-right{border-radius:0}
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
  section{padding:56px 0}
}

/* ---------- 手机：按钮全宽、触摸间距、断行优化 ---------- */
@media(max-width:560px){
  .hero{padding-top:100px}
  .hero h1{font-size:clamp(28px,9vw,44px)}
  .hero .sub{font-size:14px}
  .hero-cta{flex-direction:column;gap:12px}
  .hero-cta .btn-down,.hero-cta .btn-ghost{width:100%;justify-content:center;padding:15px 22px}
  .hero-cta .btn-down{font-size:16px}
  .hero-meta{gap:18px}
  .hero-meta b{font-size:20px}
  .sec-head h2{font-size:clamp(24px,7vw,34px)}
  .sec-head p{font-size:14px}
  .dl-left{padding:32px 24px}
  .dl-left h2{font-size:24px}
  .dl-btn-big{width:100%;padding:18px 16px;font-size:17px;flex-direction:column;gap:8px}
  .dl-btn-big .ico{width:30px;height:30px}
  .dl-note{flex-direction:column;align-items:flex-start;gap:6px}
  .vrow{font-size:13px}
  .qr{width:150px;height:150px}
  .foot-grid{flex-direction:column;align-items:center;text-align:center}
  .foot-brand{justify-content:center}
  .foot-links{justify-content:center}
  .foot-copy{font-size:12px}
  .brand span:last-child{max-width:42vw}
}

/* ---------- 小屏（320–428px）：紧凑间距、避免溢出、触控友好 ---------- */
@media(max-width:428px){
  .wrap{width:min(1180px,90vw)}
  .hero{padding-top:92px;padding-bottom:48px}
  .hero h1{font-size:clamp(26px,8vw,38px);line-height:1.2;margin:14px 0 4px}
  .hero .sub{font-size:13px;line-height:1.7;margin:12px 0 20px;padding:0 2px}
  .hero-badge{font-size:12px;padding:6px 12px}
  .hero-cta .btn-down,.hero-cta .btn-ghost{padding:14px 18px;font-size:15px;min-height:48px}
  .hero-meta{gap:14px;margin-top:24px}
  .hero-meta b{font-size:18px}
  .hero-meta span{font-size:12px}
  .sec-head{margin-bottom:34px}
  .sec-head h2{font-size:clamp(22px,7vw,30px)}
  .sec-head p{font-size:13px}
  .feat-grid{grid-template-columns:1fr;gap:16px}
  .feat-card{padding:22px 18px}
  .dl-left{padding:28px 20px}
  .dl-left h2{font-size:22px}
  .dl-btn-big{padding:16px 14px;font-size:16px;min-height:54px}
  .dl-btn-big small{font-size:11px}
  .dl-note{font-size:12px}
  .vrow{font-size:12.5px;padding:8px 0}
  .qr{width:140px;height:140px}
  .dl-right{padding:36px 20px}
  .warn{padding:14px 14px}
  .warn p{font-size:12.5px}
  .footer{padding:32px 0 24px}
  .foot-grid{gap:22px}
}