/* =========================================================
   FINAL MOBILE FIX PACK - Template preserved
   Only responsive overrides. No desktop layout change.
   ========================================================= */
*{box-sizing:border-box!important}
html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%!important}
img,svg,video,iframe,canvas{max-width:100%!important;height:auto!important}
table{width:100%!important;max-width:100%!important;display:block!important;overflow-x:auto!important}
a,button{touch-action:manipulation!important}

@media (max-width: 768px){
  body{font-size:16px!important;line-height:1.62!important;padding-bottom:96px!important;margin:0!important}
  .container,.wrapper,main,section,header,footer{max-width:100%!important;overflow-x:hidden!important}
  .container{width:100%!important;padding-left:16px!important;padding-right:16px!important;margin-left:auto!important;margin-right:auto!important}

  /* Topbar */
  .topbar{font-size:12px!important;text-align:center!important}
  .topbar-inner{display:flex!important;flex-direction:column!important;gap:6px!important;justify-content:center!important;align-items:center!important;text-align:center!important}
  .topbar-inner div{justify-content:center!important;gap:10px!important}

  /* Navigation: compact and no horizontal overflow */
  .nav-wrap{position:sticky!important;top:0!important;z-index:1000!important}
  .nav{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:10px 0!important;flex-wrap:nowrap!important;min-width:0!important}
  .brand{min-width:0!important;max-width:58%!important;gap:8px!important;overflow:hidden!important}
  .brand-mark{width:36px!important;height:36px!important;min-width:36px!important;font-size:14px!important;border-radius:9px!important}
  .brand-text{min-width:0!important;overflow:hidden!important}
  .brand-text strong{font-size:13px!important;line-height:1.12!important;display:block!important;white-space:normal!important;overflow-wrap:break-word!important}
  .brand-text span{font-size:9px!important;line-height:1.1!important;display:block!important;white-space:normal!important}
  .nav-links{display:none!important}
  .nav-cta{margin-left:auto!important;display:flex!important;gap:6px!important;flex:0 0 auto!important;align-items:center!important}
  .nav-cta a,.nav-cta .btn,.btn-wa,.btn-outline{font-size:12px!important;padding:9px 10px!important;border-radius:9px!important;white-space:nowrap!important;min-height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .nav-cta .btn-outline{display:none!important}

  /* Hero and sections */
  .hero{padding:34px 0 38px!important;min-height:auto!important}
  .section{padding:40px 0!important}
  .hero-grid,.about-grid,.footer-grid,.grid,.cards,.documents-grid,.why-grid,.countries-grid,.process-grid,.steps-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;width:100%!important}
  .hero-content,.hero-card,.about-card,.card,.doc-card,.why-card,.country-card,.stat-card,.box{width:100%!important;max-width:100%!important;min-width:0!important}

  /* Typography */
  h1{font-size:clamp(28px,8.6vw,42px)!important;line-height:1.08!important;letter-spacing:-.025em!important;overflow-wrap:break-word!important;word-break:normal!important;margin-bottom:14px!important}
  h2{font-size:clamp(22px,6.8vw,34px)!important;line-height:1.14!important;overflow-wrap:break-word!important;margin-bottom:12px!important}
  h3{font-size:clamp(18px,5.2vw,24px)!important;line-height:1.22!important}
  p,li,summary,details,.hero-subtitle,.section-intro{font-size:16px!important;line-height:1.64!important;overflow-wrap:break-word!important}
  .eyebrow,.badge,.pill{max-width:100%!important;white-space:normal!important}

  /* Buttons: full-width for conversion */
  .hero-actions,.cta-btns,.actions{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important}
  .hero-actions a,.cta-btns a,.btn,.btn-cta-wa,.btn-cta-phone,a[class*="btn"]{width:100%!important;max-width:100%!important;min-height:50px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:normal!important;padding:13px 14px!important;border-radius:12px!important}

  /* Cards */
  .card,.doc-card,.why-card,.country-card,.stat-card,.popup-box,.hero-card{padding:18px!important;border-radius:16px!important;margin-left:0!important;margin-right:0!important}
  .about-stats,.stats-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%!important}
  .stat-number{font-size:28px!important}

  /* Footer */
  .footer{padding-bottom:120px!important}
  .footer-bottom{display:block!important;text-align:center!important}
  .footer-bottom span{display:block!important;margin-bottom:10px!important}
  .footer a{overflow-wrap:break-word!important}

  /* Hide old floating/popup elements on small screens if they cover content */
  .sticky-wa,.safe-wa-bar{display:none!important}
  .popup-overlay{display:none!important}

  /* Final fixed mobile CTA */
  .safe-mobile-cta{position:fixed!important;left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;z-index:2147483647!important;display:flex!important;gap:8px!important;align-items:center!important;justify-content:center!important;pointer-events:auto!important}
  .safe-mobile-cta a{min-height:54px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;border-radius:999px!important;padding:12px 10px!important;font:800 14px/1.15 Arial,sans-serif!important;text-decoration:none!important;box-shadow:0 10px 26px rgba(0,0,0,.25)!important;border:1px solid rgba(255,255,255,.16)!important}
  .safe-mobile-cta .wa{flex:1.35!important;background:#25d366!important;color:#fff!important}
  .safe-mobile-cta .call{flex:.85!important;background:#0a0f1e!important;color:#fff!important}
}

@media (max-width: 420px){
  .container{padding-left:14px!important;padding-right:14px!important}
  .brand{max-width:62%!important}
  .safe-mobile-cta a{font-size:13px!important;padding-left:8px!important;padding-right:8px!important}
  .safe-mobile-cta .call{flex:.72!important}
  .about-stats,.stats-grid{grid-template-columns:1fr!important}
}