/* ==========================================================================
   MoveMax UAE — Design System
   Bootstrap 5 is loaded first; this file layers brand tokens + components.
   ========================================================================== */

:root{
  --navy:#0B1F3A;
  --navy-2:#122A4D;
  --navy-soft:#16335c;
  --amber:#F59E0B;
  --amber-2:#FBBF24;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --text:#111827;
  --text-2:#6B7280;
  --border:#E5E7EB;
  --success:#10B981;

  --font-head:'Plus Jakarta Sans', 'Manrope', sans-serif;
  --font-body:'Inter', sans-serif;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(11,31,58,.06), 0 1px 3px rgba(11,31,58,.08);
  --shadow-md:0 8px 24px -8px rgba(11,31,58,.16);
  --shadow-lg:0 24px 48px -16px rgba(11,31,58,.22);

  --container-max:1280px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--navy);
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:0;
}

p{color:var(--text-2); margin-bottom:0;}

a{text-decoration:none; color:inherit;}

.container-xl-custom{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:1.25rem;
}
@media (min-width:768px){ .container-xl-custom{padding-inline:2rem;} }
@media (min-width:1200px){ .container-xl-custom{padding-inline:2.5rem;} }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-head);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--amber);
  display:inline-block;
}

.section-pad{ padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.section-pad-sm{ padding-block: clamp(2.5rem, 4vw, 4rem); }

.section-head{ max-width:640px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.mx-auto{ text-align:center; }

.h-display{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.08;
}
.h-section{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  line-height:1.15;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-head);
  font-weight:700;
  border-radius:var(--radius-sm);
  padding:.85rem 1.6rem;
  font-size:.95rem;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  border:0;
}
.btn:active{ transform:translateY(1px); }

.btn-amber{
  background:var(--amber);
  color:var(--navy);
  box-shadow:0 10px 24px -8px rgba(245,158,11,.55);
}
.btn-amber:hover{ background:var(--amber-2); color:var(--navy); box-shadow:0 14px 30px -8px rgba(245,158,11,.65); }

.btn-navy{
  background:var(--navy);
  color:#fff;
}
.btn-navy:hover{ background:var(--navy-2); color:#fff; }

.btn-outline-light-custom{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
}
.btn-outline-light-custom:hover{ background:rgba(255,255,255,.1); color:#fff; }

.btn-ghost-navy{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--border);
}
.btn-ghost-navy:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

.btn-sm-pill{ border-radius:100px; padding:.6rem 1.1rem; font-size:.85rem; }

/* ---------- Navbar ---------- */
.mm-navbar{
  background:rgba(248,250,252,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1000;
  transition:box-shadow .2s ease;
}
.mm-navbar.is-scrolled{ box-shadow:var(--shadow-sm); }

.mm-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.15rem;
  color:var(--navy);
}
.mm-brand-mark{
  width:38px; height:38px;
  border-radius:10px;
  background:linear-gradient(155deg, var(--navy), var(--navy-soft));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.mm-brand-mark svg{ width:20px; height:20px; }
.mm-brand small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.65rem; color:var(--text-2); letter-spacing:.04em; }

.mm-nav-link{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.92rem;
  color:var(--text);
  padding:.5rem .9rem !important;
  border-radius:8px;
  transition:color .15s ease, background-color .15s ease;
}
.mm-nav-link:hover{ color:var(--navy); background:rgba(11,31,58,.05); }

.mm-nav-phone{
  font-family:var(--font-head);
  font-weight:700;
  font-size:.9rem;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:.4rem;
}

/* ---------- Hero ---------- */
.mm-hero{
  position:relative;
  background:radial-gradient(1200px 600px at 85% -10%, rgba(245,158,11,.16), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  overflow:hidden;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.mm-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:.8rem;
  font-weight:600;
  font-family:var(--font-head);
  padding:.45rem .9rem;
  border-radius:100px;
}
.mm-hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(16,185,129,.25); }

.mm-hero h1{ color:#fff; }
.mm-hero .lead-text{ color:rgba(255,255,255,.72); font-size:1.08rem; max-width:520px; }

.mm-stat{
  border-left:2px solid rgba(255,255,255,.18);
  padding-left:.9rem;
}
.mm-stat .num{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:#fff; line-height:1; }
.mm-stat .lbl{ font-size:.78rem; color:rgba(255,255,255,.6); margin-top:.25rem; }

/* Signature element: animated relocation route map */
.mm-routemap{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  backdrop-filter:blur(6px);
}
.mm-routemap svg{ width:100%; height:auto; display:block; }
.mm-route-path{
  stroke-dasharray:6 8;
  animation:mm-dash 22s linear infinite;
}
@keyframes mm-dash{ to{ stroke-dashoffset:-400; } }
.mm-route-pin{ animation:mm-pulse 2.4s ease-in-out infinite; transform-origin:center; }
.mm-route-pin.delay1{ animation-delay:.5s; }
.mm-route-pin.delay2{ animation-delay:1s; }
@keyframes mm-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:.55; }
}
.mm-routemap-cap{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1rem; font-size:.78rem; color:rgba(255,255,255,.6); font-family:var(--font-head); font-weight:600;
}

@media (prefers-reduced-motion: reduce){
  .mm-route-path, .mm-route-pin{ animation:none !important; }
}

/* Quick quote card floating on hero */
.mm-quote-card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:1.5rem;
  color:var(--text);
}
.mm-quote-card h3{ font-size:1.1rem; }
.mm-quote-card .form-label{ font-family:var(--font-head); font-weight:700; font-size:.78rem; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }
.mm-quote-card .form-control, .mm-quote-card .form-select{
  border-radius:var(--radius-sm);
  border:1.5px solid var(--border);
  padding:.7rem .9rem;
  font-size:.92rem;
}
.mm-quote-card .form-control:focus, .mm-quote-card .form-select:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(11,31,58,.1);
}

/* ---------- Trust bar ---------- */
.mm-trustbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.mm-trust-item{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--navy);
}
.mm-trust-item .icon{ color:var(--amber); flex-shrink:0; }

/* ---------- Service cards ---------- */
.mm-service-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.75rem;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mm-service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.mm-service-icon{
  width:52px; height:52px;
  border-radius:12px;
  background:rgba(11,31,58,.06);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  margin-bottom:1.1rem;
  transition:background-color .2s ease, color .2s ease;
}
.mm-service-card:hover .mm-service-icon{ background:var(--amber); color:var(--navy); }
.mm-service-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.mm-service-card p{ font-size:.92rem; }
.mm-service-link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-head); font-weight:700; font-size:.85rem;
  color:var(--navy); margin-top:1rem;
}
.mm-service-card:hover .mm-service-link{ color:var(--amber-2); }

/* ---------- Process ---------- */
.mm-process-item{ position:relative; padding-left:0; }
.mm-process-num{
  font-family:var(--font-head);
  font-weight:800;
  font-size:.85rem;
  color:var(--amber);
  background:var(--navy);
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.mm-process-line{
  display:none;
}
@media (min-width:992px){
  .mm-process-line{
    display:block;
    position:absolute;
    top:19px; left:60%; width:80%;
    height:2px;
    background:repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px);
  }
}

/* ---------- Why choose us ---------- */
.mm-feature-row{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.mm-feature-row:last-child{ border-bottom:0; }
.mm-feature-check{
  width:30px; height:30px; border-radius:8px;
  background:rgba(16,185,129,.12); color:var(--success);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:.15rem;
}
.mm-feature-row h4{ font-size:1rem; margin-bottom:.25rem; }
.mm-feature-row p{ font-size:.9rem; }

.mm-photo-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-md);
}
.mm-photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.mm-badge-float{
  position:absolute;
  left:1.25rem; bottom:1.25rem;
  background:rgba(11,31,58,.92);
  backdrop-filter:blur(6px);
  color:#fff;
  border-radius:var(--radius-md);
  padding:1rem 1.25rem;
  display:flex; align-items:center; gap:.85rem;
}
.mm-badge-float .num{ font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--amber); line-height:1; }
.mm-badge-float .lbl{ font-size:.75rem; color:rgba(255,255,255,.75); max-width:110px; }

/* ---------- City cards ---------- */
.mm-city-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.4rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:border-color .2s ease, background-color .2s ease;
}
.mm-city-card:hover{ border-color:var(--navy); background:rgba(11,31,58,.02); }
.mm-city-card h3{ font-size:1rem; margin-bottom:.15rem; }
.mm-city-card p{ font-size:.8rem; margin:0; }
.mm-city-arrow{
  width:36px; height:36px; border-radius:50%;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); flex-shrink:0;
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.mm-city-card:hover .mm-city-arrow{ background:var(--amber); border-color:var(--amber); color:var(--navy); transform:translateX(3px); }

/* ---------- Testimonials ---------- */
.mm-testimonial-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.75rem;
  height:100%;
}
.mm-stars{ color:var(--amber); font-size:.85rem; letter-spacing:.15em; margin-bottom:.9rem; }
.mm-testimonial-card p.quote{ color:var(--text); font-size:.95rem; margin-bottom:1.25rem; }
.mm-testimonial-person{ display:flex; align-items:center; gap:.75rem; }
.mm-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:.85rem;
  flex-shrink:0;
}
.mm-testimonial-person .name{ font-family:var(--font-head); font-weight:700; font-size:.88rem; color:var(--navy); }
.mm-testimonial-person .role{ font-size:.78rem; color:var(--text-2); }

/* ---------- FAQ ---------- */
.mm-accordion .accordion-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm) !important;
  margin-bottom:.75rem;
  overflow:hidden;
}
.mm-accordion .accordion-button{
  font-family:var(--font-head);
  font-weight:700;
  font-size:.98rem;
  color:var(--navy);
  padding:1.1rem 1.3rem;
  background:var(--surface);
}
.mm-accordion .accordion-button:not(.collapsed){
  color:var(--navy);
  background:var(--surface);
  box-shadow:none;
}
.mm-accordion .accordion-button:focus{ box-shadow:none; }
.mm-accordion .accordion-button::after{ flex-shrink:0; }
.mm-accordion .accordion-body{ font-size:.92rem; color:var(--text-2); padding:0 1.3rem 1.3rem; }

/* ---------- Final CTA ---------- */
.mm-cta-band{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius:var(--radius-lg);
  padding:clamp(2rem, 5vw, 3.5rem);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.mm-cta-band::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(500px 260px at 90% 0%, rgba(245,158,11,.28), transparent 65%);
  pointer-events:none;
}
.mm-cta-band h2{ color:#fff; }
.mm-cta-band p{ color:rgba(255,255,255,.72); }

/* ---------- Footer ---------- */
.mm-footer{
  background:var(--navy);
  color:rgba(255,255,255,.65);
  padding-block: clamp(3rem, 5vw, 4.5rem) 1.75rem;
}
.mm-footer h5{
  font-family:var(--font-head); color:#fff; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.1rem;
}
.mm-footer a{ color:rgba(255,255,255,.65); font-size:.9rem; transition:color .15s ease; }
.mm-footer a:hover{ color:var(--amber); }
.mm-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.mm-footer-brand{ color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:.6rem; }
.mm-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.5rem; font-size:.82rem; }
.mm-social{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:background-color .15s ease;
}
.mm-social:hover{ background:var(--amber); color:var(--navy); }

/* ---------- Floating Action Buttons (WhatsApp + Call) ---------- */
.mm-fab-stack{
  position:fixed;
  right:1.25rem;
  bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index:1045;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.85rem;
  transition:bottom .2s ease;
}
/* Lift above the sticky mobile CTA bar on smaller screens */
@media (max-width:991.98px){
  .mm-fab-stack{
    right:1rem;
    bottom:calc(88px + env(safe-area-inset-bottom, 0px));
    gap:.7rem;
  }
}

.mm-fab{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 10px 24px -6px rgba(11,31,58,.35), 0 2px 6px rgba(11,31,58,.18);
  border:0;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background-color .2s ease;
  flex-shrink:0;
}
.mm-fab svg{ width:26px; height:26px; display:block; }

.mm-fab:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 16px 32px -6px rgba(11,31,58,.42), 0 4px 10px rgba(11,31,58,.22);
  color:#fff;
}
.mm-fab:active{
  transform:translateY(-1px) scale(.96);
}
.mm-fab:focus-visible{
  outline:3px solid rgba(11,31,58,.35);
  outline-offset:3px;
}

.mm-fab-whatsapp{ background:#25D366; }
.mm-fab-whatsapp:hover{ background:#22c15e; }

.mm-fab-call{ background:var(--amber); color:var(--navy); }
.mm-fab-call:hover{ background:var(--amber-2); color:var(--navy); }
.mm-fab-call:focus-visible{ outline-color:rgba(245,158,11,.55); }

@media (max-width:575.98px){
  .mm-fab{ width:50px; height:50px; }
  .mm-fab svg{ width:23px; height:23px; }
}

/* Tooltip */
.mm-fab-tooltip{
  position:absolute;
  right:calc(100% + .75rem);
  top:50%;
  transform:translateY(-50%) translateX(4px);
  background:var(--navy);
  color:#fff;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.8rem;
  white-space:nowrap;
  padding:.45rem .8rem;
  border-radius:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:var(--shadow-sm);
}
.mm-fab-tooltip::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-left-color:var(--navy);
}
.mm-fab:hover .mm-fab-tooltip,
.mm-fab:focus-visible .mm-fab-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}
/* Tooltips are a hover/pointer nicety only — hide on touch to avoid a stuck bubble */
@media (hover:none){
  .mm-fab-tooltip{ display:none; }
}

/* Ripple-style pulse to draw the eye to WhatsApp on load, then settle */
.mm-fab-whatsapp::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  opacity:.55;
  animation:mm-fab-pulse 2.2s ease-out 3;
  z-index:-1;
}
@keyframes mm-fab-pulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .mm-fab-whatsapp::before{ animation:none; }
  .mm-fab{ transition:box-shadow .2s ease; }
}

/* ---------- Sticky mobile CTA ---------- */
.mm-mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:.7rem 1rem;
  box-shadow:0 -6px 20px rgba(11,31,58,.08);
}
@media (min-width:992px){ .mm-mobile-cta{ display:none !important; } }

/* Utility */
.text-amber{ color:var(--amber) !important; }
.bg-navy{ background:var(--navy) !important; }
.rounded-xl{ border-radius:var(--radius-lg) !important; }