/* ==========================================================================
   FaasTrader — responsive.css
   Mobile-first. Base rules in components.css are the small-screen layout;
   these min-width queries progressively enhance to wider grids. Typography
   and spacing are already fluid via clamp() in tokens.css, so most of what's
   left to do here is column counts.
   ========================================================================== */

/* ---- Small phones ---- */
@media (max-width:380px){
  .hero__cta .btn{ flex:1; }
}

/* ---- Phones in general: the fluid --sp-xl top padding on .hero is tuned for
   desktop; on short mobile viewports it reads as dead space under the nav,
   so trim it back explicitly here rather than relying on clamp() alone. ---- */
@media (max-width:640px){
  .hero{ padding-block: var(--sp-md) var(--sp-xs); }
  :root{ --nav-h: 60px; }
}

/* ---- ~480px: stats bar to a tidy single row of 3 + wrap ---- */
@media (min-width:480px){
  .pill-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---- ~640px: floating stat cards can safely appear ---- */
@media (min-width:640px){
  .float-card{ display:block; }
}
@media (max-width:639px){
  .float-card{ display:none; }
  .feature-card{ flex-basis:82%; }
}

/* ---- Tablet ---- */
@media (min-width:720px){
  .why__grid{ grid-template-columns:repeat(3,1fr); }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .stats .stat:last-child{ grid-column:span 1; justify-self:stretch; }
  .industry-grid{ grid-template-columns:repeat(5,1fr); }
  .footer__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- Small desktop / large tablet ---- */
@media (min-width:860px){
  .hero__grid{ grid-template-columns:1.05fr 1fr; }
  .dashboard__grid{ grid-template-columns:1fr 1.1fr; }
  .modules__grid{ grid-template-columns:repeat(3,1fr); }
  .pill-grid{ grid-template-columns:repeat(4,1fr); }
  .insights__grid{ grid-template-columns:repeat(3,1fr); }
  .pricing__grid{ grid-template-columns:repeat(3,1fr); }
  .pricing-card--featured{ transform: scale(1.04); }
  .contact__grid{ grid-template-columns:1fr 1.2fr; }
  .contact-form__row{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1.4fr 1fr 1.2fr; }
}

/* ---- Desktop ---- */
@media (min-width:1024px){
  .modules__grid{ grid-template-columns:repeat(4,1fr); }
  .pill-grid{ grid-template-columns:repeat(6,1fr); }
  .glow-card.md-only{ display:block; }
  .feature-card{ flex-basis:320px; }
}
@media (max-width:1023px){
  .glow-card.md-only{ display:none; }
}

/* ---- Ultra-wide: cap the container so hero art doesn't over-stretch ---- */
@media (min-width:1600px){
  .container{ max-width:1360px; }
}

/* ---- Fine-pointer only: custom cursor is enabled via JS, but make sure touch
   devices never get the reduced tap targets a mouse cursor implies ---- */
@media (hover:none){
  .cursor-dot, .cursor-ring{ display:none !important; }
}

@media (max-width:768px){
  .section-title{ font-size:clamp(1.5rem,5.5vw,2rem); }
}