/* ═══ IECAN responsive-fix.css — iecan.io ═══ */
/* Netlify snippet injection: before </head> */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, video, canvas, svg, embed, object, iframe {
  max-width: 100%;
  height: auto;
}

input, select, textarea { 
  max-width: 100%; 
  font-size: 16px !important;
}

.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══ TABLET (≤1024px) ═══ */
@media (max-width: 1024px) {
  body > div, .container, .wrapper, .content, main, #main,
  .wrap {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ═══ NAV MOBILE (≤960px) — matches IECAN breakpoint ═══ */
@media (max-width: 960px) {
  .io-nav { padding: 0 20px !important; }
  .io-nav-links { display: none !important; }
  .io-hamburger { display: flex !important; }
  .mega-drop { display: none !important; }
}

/* ═══ MOBILE (≤768px) ═══ */
@media (max-width: 768px) {
  .build-grid, .demo-grid, .proof, .price-grid, 
  .card-grid, .card-grid.duo, .card-grid.triple,
  .ft-grid, .hood-grid, .earn-grid,
  .referral-box, .md-cols, .md-cols-3, .md-contact-grid {
    grid-template-columns: 1fr !important;
  }

  .hero { padding: 140px 0 80px !important; }
  .wrap { padding: 0 20px !important; }
  .sec { padding: 60px 0 !important; }
  .cta-sec { padding: 80px 20px !important; }

  /* Swiper panels */
  .slide-inner { padding: 20px !important; }
  
  /* iOS parallax fix */
  [style*="background-attachment: fixed"],
  [style*="background-attachment:fixed"] {
    background-attachment: scroll !important;
  }

  /* Section dividers shorter on mobile */
  .divider-video, [class*="divider"] {
    max-height: 280px !important;
  }
}

/* ═══ SMALL MOBILE (≤480px) ═══ */
@media (max-width: 480px) {
  a, button, [role="button"] { 
    min-height: 44px; 
  }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn-warm,
  .hero-actions .btn-outline { width: 100%; text-align: center; }
  
  .ft-grid { grid-template-columns: 1fr !important; }

  .divider-video, [class*="divider"] {
    max-height: 220px !important;
  }
}

/* ═══ 100vh fix for mobile ═══ */
@supports (height: 100dvh) {
  .swiper { height: calc(100dvh - 129px) !important; }
}