/* ============================================================
   GymTracker homepage theme — responsive & motion media queries
   Light / premium. Recolour everything from the tokens in :root
   (css/theme.css). Part of: index.html + css/theme.css +
   css/media.css + js/theme.js
   ============================================================ */

/* Loaded after theme.css so these override at breakpoints. */

@media (max-width:1020px){.goals{grid-template-columns:repeat(2,1fr)}}

@media (max-width:1020px){
  .b7,.b5{grid-column:span 12}
  .b4{grid-column:span 6}
  .duo{grid-template-columns:1fr; gap:44px}
  .board-photo{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .nav-links,.nav-cta .login{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:flex}
  .nav-inner{gap:12px}
  .nav-cta .btn-ink{padding:9px 16px; font-size:14px}
  .hero{padding-top:128px}
  .stage{height:560px; border-radius:24px}
  .fc-vol,.fc-next{display:none}
  .fc-timer{left:4%; top:6%}
  .fc-pr{left:4%; bottom:6%}
  .phone{width:272px}
  .screen{height:500px}
  .b4{grid-column:span 12}
  .sec{padding:72px 0}
  .quote-inner{padding:32px}
  .cta{padding:72px 20px; border-radius:28px}
}

@media (max-width:560px){.goals{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  .uline svg path{stroke-dasharray:none; stroke-dashoffset:0}
  html{scroll-behavior:auto}
}