/* ==========================================================================
   Crux Technology — Responsive rules (mobile-first refinements)
   ========================================================================== */

@media (max-width: 1180px) {
  .nav-links a { padding: 9px 10px; font-size: .86rem; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  :root { --nav-h: 68px; }
  .nav-links, .nav-actions .desk-only { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid, .value-row { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding: 48px 0 70px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .contact-methods { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .rank-row { grid-template-columns: 44px 1fr 120px; }
  .rank-row .col-tasks, .rank-row .col-ref { display: none; }
  .section { padding: 68px 0; }
}

@media (max-width: 780px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; gap: 16px; }
  .podium-card.rank-1 { transform: none; order: -1; }
  .steps { grid-template-columns: 1fr; }
  .cta-band { padding: 38px 22px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .chip { flex: 0 0 auto; }
  .float-card { position: static; margin-top: 10px; animation: none; }
  .hero-floats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .auto-grid, .auto-grid-sm { grid-template-columns: 1fr; }
  .modal { padding: 22px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 54px 0; }
  .hero h1 { font-size: 2.2rem; }
  .hero-cta .btn { width: 100%; }
  .stat-strip { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 18px 14px; }
  .rank-row { grid-template-columns: 36px 1fr auto; padding: 14px; gap: 10px; }
  .rank-row .amount { font-size: .92rem; }
  .otp { gap: 7px; }
  .otp input { font-size: 1.1rem; }
  .pkg { padding: 24px 20px; }
  #toast-root { top: 12px; right: 12px; left: 12px; width: auto; }
}

@media (max-width: 380px) {
  .logo-text small { display: none; }
  .hero-floats { grid-template-columns: 1fr; }
}