/* ============================================================
   Firova — responsive.css
   Mobile-first overrides on top of style.css
   ============================================================ */

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .gem-visual{ order:-1; max-width:220px; margin:0 auto 10px; }
  .split{ grid-template-columns:1fr; }
  .split .media-card{ order:-1; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-cards{ grid-template-columns:1fr 1fr; }
  .testimonial{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-slider{ --hero-slider-dots-space:52px; }
  .hero-slide{ height:var(--hero-slide-height); }
  .promo-banner{ padding:16px; }
  .coin-banner{ text-align:center; padding:28px 20px; }
  .coin-banner-body{ text-align:center; }
  .coin-steps{ justify-content:center; }
  .coin-banner .hero-ctas{ justify-content:center; }
}

@media (max-width:680px){
  nav.main-nav, .header-actions .btn, .lang-switch{ display:none; }
  .burger{ display:flex; }
  .hero{ padding:22px 0; }
  .hero-slider{ --hero-slider-dots-space:48px; }
  .hero-stats{ gap:24px; }
  .hero-stats div b{ font-size:22px; }
  .hero p.lead{ font-size:15px; line-height:1.55; margin-bottom:22px; }
  .hero-ctas{ margin-bottom:24px; gap:10px; }
  .gem-visual{ max-width:170px; }
  .promo-banner{ padding:12px; }
  .promo-banner img{ max-width:100%; }
  .coin-banner{ gap:20px; padding:20px 16px; }
  .coin-badge-icon{ width:88px; height:88px; }
  .coin-badge-amount{ font-size:24px; }
  .coin-banner-body h2{ margin:10px 0 8px; }
  .coin-banner-body p{ line-height:1.55; font-size:14px; }
  .coin-steps{ gap:10px; margin-top:18px; }
  .coin-step{ font-size:12px; padding:7px 12px 7px 8px; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-cards{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .section{ padding:48px 0; }
  .testimonial{ padding:28px; }
  .form-card{ margin:32px 16px; padding:26px; }
}

@media (max-width:400px){
  .wrap{ padding:0 16px; }
  .hero h1{ font-size:24px; margin-bottom:12px; }
  .hero-ctas{ flex-direction:column; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
  .hero p.lead{ font-size:14px; }
  .hero-stats{ gap:16px; }
  .promo-banner{ padding:10px; }
  .hero-slider-dots{ padding:14px 12px; }
}