/* ============================================================
   HANBOTIX — RESPONSIVE STYLESHEET
   ============================================================ */

/* ---------- LAPTOP / SMALL DESKTOP ---------- */
@media (max-width:1180px){
  .container{ padding:0 20px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer-col:nth-child(3){ grid-column:1 / -1; }
}

/* ---------- TABLET ---------- */
@media (max-width:960px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:76px 0; }
  .hero{ min-height:80vh; padding:150px 0 64px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .footer-col:nth-child(3){ grid-column:auto; }
  .form-row{ grid-template-columns:1fr; }
  .pricing-card.featured{ transform:scale(1); }
}

/* ---------- MOBILE ---------- */
@media (max-width:640px){
  .container{ padding:0 18px; }
  h1{ font-size:clamp(32px,9vw,44px); }
  h2{ font-size:clamp(24px,6vw,30px); }
  .lead{ font-size:15.5px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .section{ padding:60px 0; }
  .section-tight{ padding:36px 0; }
  .hero{ min-height:auto; padding:140px 0 56px; }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .page-hero{ padding:150px 0 56px; }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .nav-logo .logo-full-mark{ display:none; }
  .nav-logo .logo-compact-mark{ display:block; }
  .loader-logo{ height:80px; }
  .whatsapp-float{ width:48px; height:48px; bottom:20px; left:20px; }
  .back-to-top{ width:42px; height:42px; bottom:20px; right:20px; }
  .compare-table{ font-size:13px; }
  .compare-table th, .compare-table td{ padding:12px 14px; }
  .pricing-card.featured{ order:-1; }
  .icon-badge{ width:42px; height:42px; }
  .cursor-glow, .cursor-dot{ display:none; }
  .stat-number{ font-size:32px; }
  .timeline-item{ gap:16px; }
  .service-block{ padding:56px 0; }
}

/* ---------- SMALL MOBILE ---------- */
@media (max-width:400px){
  .btn{ padding:12px 20px; font-size:14px; }
  .nav-logo img{ height:26px; }
  .trusted-strip span{ padding:7px 14px; font-size:12.5px; }
  .page-hero img.float, .page-hero > .container > img{ height:60px !important; }
}

/* ---------- FINE POINTER ONLY (disable tilt/cursor effects on touch) ---------- */
@media (hover:none) and (pointer:coarse){
  .tilt-card{ transform:none !important; }
  .cursor-glow, .cursor-dot{ display:none !important; }
}