/* ==========================================================================
   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; module cards get
   enough room for a second column without cramming icon + text ---- */
@media (min-width:480px){
  .pill-grid{ grid-template-columns:repeat(3,1fr); }
  .modules__grid{ grid-template-columns:repeat(2,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); }
}

/* ---- Below 860px the dashboard art is full-width (the 2-col grid that gives
   it its own narrower column only kicks in at 860px), so the glow-cards'
   desktop-tuned absolute offsets have no side space to float in and land on
   top of the dash-mock instead. Drop them into normal flow as a centered,
   wrapping row pulled up over the mock's bottom edge — keeps the "floating
   card over the screenshot" premium feel without covering the mock's
   readable content, which sits higher up in its white screen area. ---- */
@media (max-width:859px){
  .dashboard__art{
    position:static; min-height:0;
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:.6rem;
  }
  .dash-mock{ order:-1; width:100%; margin-bottom:-28px; }
  .glow-card{
    position:static !important;
    top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    width:auto !important; min-width:112px;
    flex:0 1 auto;
    padding:.65rem .9rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
  }
}

/* ---- 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); }
}