/* landing/responsive.css — cross-section mobile breakpoints + reduced-motion.
   Load AFTER every section base file: these rules override .hero/.steps/.cases/
   .stats/.pricing/.nfc-cards etc., so the cascade needs them last. */

/* ── Mobile ── */
@media(max-width:860px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .cases-grid{grid-template-columns:repeat(2,1fr)}
  .nfc-cards{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero{grid-template-columns:1fr;min-height:auto;padding:3rem 1.5rem 2rem}
  .hero-r{display:none}
  .hero-h{font-size:clamp(2.4rem,8vw,3.5rem)}
}
@media(max-width:520px){
  .cases-grid{grid-template-columns:1fr}
  .stats-bar{flex-wrap:wrap}
  .stat{flex:1 1 50%;border-right:none;border-bottom:1px solid rgba(255,255,255,0.06)}
  .cta-h{font-size:2.4rem}
}

@media(prefers-reduced-motion:reduce){
  .reveal,.fcard,.screen-layer{transition:none}
  .js .reveal{opacity:1;transform:none}
  .eyebrow-dot,.lock-nfc-icon{animation:none}
  .stage-glow,.lock-nfc-icon path,.fcard.visible,.tap-burst.go i{animation:none}
  .sv1-ring,.sv2-line.active,.sv2-cursor,.sv3-phone,.sv3-ping,.sv3-ping::after,.sv4-line::after,.sv4-dot.active{animation:none}
  .phone.live-sway{animation:none}
}