/* ============================================================
   NAWL — Responsive layer (tablet + mobile)
   Loaded AFTER styles.css so these rules win.
   Tiers:  ≤1024 tablet · ≤760 mobile · ≤430 small phone
   Keeps the desktop design language; only reflows & rescales.
   ============================================================ */

/* ---------- universal niceties ---------- */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
img,svg,video{max-width:100%}
@media(hover:none){
  /* remove hover lifts that stick on touch */
  .btn:hover,.prob:hover,.feat:hover,.eco-card:hover,.fab:hover,.store:hover{transform:none}
}

/* ============================================================
   TABLET  (≤1024px)
   ============================================================ */
@media(max-width:1024px){
  :root{ --pad:clamp(20px,4.5vw,36px); }

  /* nav → burger */
  .nav-links{display:none}
  .nav-actions .lang-toggle,
  .nav-actions .btn-primary{display:none}
  .nav-burger{display:block}
  .nav .wrap{gap:16px;justify-content:space-between}

  /* hero: stack copy over visual, centred */
  .hero{min-height:auto;padding-top:clamp(104px,16vw,140px);padding-bottom:0}
  .hero .wrap{grid-template-columns:1fr;gap:clamp(16px,3vw,28px);justify-items:center;text-align:center}
  .hero-copy{max-width:640px;order:1}
  .hero-visual{order:2;max-width:560px;width:100%;margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-mapwrap{transform:scale(1)}
  .map-badge.b1{inset-inline-end:2%}
  .map-badge.b2{inset-inline-start:2%}
  .hero-partners{padding-top:6px}

  /* keep two-up where it still reads well */
  .acct-grid{grid-template-columns:1fr;gap:40px}
  .fleet-grid{grid-template-columns:1fr;gap:clamp(36px,6vw,60px)}
  .fleet-col.offset{margin-top:0}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .docs-stage{flex-direction:column;align-items:center;gap:32px}
}

/* ============================================================
   MOBILE  (≤760px)
   ============================================================ */
@media(max-width:760px){
  :root{ --pad:22px; }

  /* tighter vertical rhythm */
  .sec{padding-block:clamp(52px,11vw,72px)}
  .sec-head{margin-bottom:clamp(28px,7vw,40px)}
  .contact-sec{padding-block:56px}
  .stats{padding-block:56px}

  /* type scale tuned for phones */
  h2{font-size:clamp(25px,7vw,32px)}
  .lead{font-size:16px}
  .hero h1{font-size:clamp(27px,8.4vw,38px)}
  .hero-tag{font-size:16px;margin-top:14px}

  /* hero visual sizing + badges hug the map */
  .hero-visual{max-width:500px}
  .hero-mapwrap{transform:scale(1.12)}
  .map-badge{padding:9px 12px;font-size:12.5px;gap:8px}
  .map-badge .n{font-size:16px}
  .map-badge.b1{top:2%;inset-inline-end:2%}
  .map-badge.b2{bottom:4%;inset-inline-start:2%}
  .pixel-logo,.intro-logo{width:min(220px,52vw)}

  /* partner logos: always one horizontal line under the map, uniform height */
  .hero-partners{padding-top:18px}
  .hero-partners .integ-row{flex-wrap:nowrap;gap:clamp(10px,3vw,18px);justify-content:center}
  .hero-partners .integ-div{display:none}
  .hero-partners .integ-logo{flex:0 0 auto;height:auto}
  .hero-partners .integ-logo img{height:clamp(22px,6vw,30px);width:auto;max-width:none;object-fit:contain}

  /* buttons: comfortably sized & centred — not stretched */
  .hero-cta{width:auto;gap:12px;justify-content:center;flex-wrap:wrap}
  .hero-cta .btn{flex:0 0 auto;min-height:48px;padding:13px 26px}

  /* one-column grids everywhere it matters */
  .eco-row:nth-child(1),
  .eco-row:nth-child(2){grid-template-columns:repeat(2,1fr);max-width:none}
  .trips-grid{grid-template-columns:1fr}
  .acct-feats{grid-template-columns:1fr 1fr;gap:22px}
  .cf-row{grid-template-columns:1fr}
  /* footer: brand on top (full width), then the 3 link groups in one row */
  .footer .top{grid-template-columns:repeat(3,1fr);gap:26px 14px}
  .footer .top>div:first-child{grid-column:1/-1}
  .footer .top>div:first-child p{max-width:none}
  .footer h4{font-size:13px}
  .footer li a{font-size:13.5px}

  /* stats: 2×2 with breathing room */
  .stat-grid{grid-template-columns:1fr 1fr;gap:38px 0}
  .stat .num{font-size:clamp(34px,11vw,46px)}

  /* fuel mock: stack the stat cards */
  .fuel-stats{grid-template-columns:1fr 1fr}
  .mf-row3{grid-template-columns:1fr}

  /* testimonials show ~1.1 cards */
  .tst{flex:0 0 82vw;padding:24px}

  /* contact card padding */
  .contact-card{padding:22px}

  /* floating buttons: smaller, thumb-friendly, clear of content */
  .fab-stack{right:28px;bottom:16px;gap:26px}
  .fab{width:50px;height:50px}
  .fab svg{width:24px;height:24px}

  /* footer contact row: phone + mail fill the width, location full row below */
  .contact-row{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:center}
  .contact-row .ci{justify-content:flex-start}
  .contact-row .ci:nth-child(3){grid-column:1 / -1}

  /* section min-height never forces big gaps on mobile */
  section:not(.trusted):not(.integrations):not(.stats){min-height:auto}
}

/* ============================================================
   SMALL PHONE  (≤430px)
   ============================================================ */
@media(max-width:430px){
  :root{ --pad:20px; }
  .hero h1{font-size:25px}
  .hero-cta{flex-direction:row;flex-wrap:wrap}
  .hero-cta .btn{flex:0 1 auto}

  .eco-row:nth-child(1),
  .eco-row:nth-child(2){grid-template-columns:1fr}
  .acct-feats{grid-template-columns:1fr}
  .fuel-stats{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr;gap:30px 0}
  .stat+.stat::before{display:none}
  .stat .num{font-size:clamp(30px,9.5vw,42px)}

  .tst{flex:0 0 88vw}
  .map-badge{font-size:11.5px}
  .map-badge.b1{inset-inline-end:0}
  .map-badge.b2{inset-inline-start:0}
}

/* ============================================================
   PROFESSIONAL MOBILE DRAWER
   ============================================================ */
.mobile-menu{
  position:fixed;inset:0;z-index:70;background:var(--bg);
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:0;padding:0;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.5,0,.2,1);
  will-change:transform;
}
:lang(en) .mobile-menu{transform:translateX(-100%)}
.mobile-menu.open{transform:none}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);border-bottom:1px solid var(--line)}
.mm-head .brand .ico{width:30px;height:30px}
.mm-close{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.mm-close svg{width:20px;height:20px}
.mm-links{display:flex;flex-direction:column;padding:10px var(--pad)}
.mm-links a{
  font-size:19px;font-weight:800;color:var(--ink);
  padding:17px 4px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;
}
.mm-links a::after{content:"›";color:var(--ink-3);font-weight:700;font-size:22px}
:lang(ar) .mm-links a::after{content:"‹"}
.mm-foot{margin-top:auto;padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.mm-foot .btn{width:100%;min-height:52px;font-size:16px;border-radius:14px}
.mm-lang{justify-content:center;min-height:48px;border-radius:14px}
@media(min-width:1025px){ .mobile-menu{display:none} }

/* ============================================================
   ECOSYSTEM — mobile vertical flow (hub → spine → module nodes)
   ============================================================ */
@media(max-width:760px){
  .eco-stage{margin-top:4px;display:flex;flex-direction:column;align-items:center}

  /* NAWL hub at the top of the flow, with a connector dropping down */
  .eco-node{margin:0 auto clamp(30px,8vw,46px);padding:16px 24px}
  .eco-node .ico{width:34px;height:34px}
  .eco-node .wm{height:19px}
  .eco-node::before{
    content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
    width:2.5px;height:clamp(30px,8vw,46px);border-radius:2px;
    background:linear-gradient(var(--purple),color-mix(in srgb,var(--purple) 55%,var(--yellow)));
  }

  /* flatten the two rows into one vertical column */
  .eco-rows{position:relative;width:100%;max-width:286px;margin-inline:auto;gap:26px;padding-block:4px}
  .eco-row{display:contents}

  /* the central spine threads through the whole column */
  .eco-rows::before{
    content:"";position:absolute;top:-4px;bottom:14px;left:50%;transform:translateX(-50%);
    width:2.5px;border-radius:2px;z-index:0;
    background:linear-gradient(var(--purple),var(--yellow));
  }

  /* each module = a uniform-width node on the spine (width of the widest box) */
  .eco-card{position:relative;z-index:1;width:100%;margin-inline:0;justify-content:flex-start;gap:12px;padding:14px 18px;border-radius:14px}
  .eco-card::before{
    content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);
    width:12px;height:12px;border-radius:50%;background:var(--bg);
    border:2.5px solid var(--purple);z-index:2;box-shadow:0 0 0 4px var(--bg);
  }
  .eco-card:nth-child(even)::before{border-color:var(--yellow-d)}
  .eco-row:nth-child(2) .eco-card:nth-child(odd)::before{border-color:var(--yellow-d)}
  .eco-row:nth-child(2) .eco-card:nth-child(even)::before{border-color:var(--purple)}
  .eco-ic{width:44px;height:44px;border-radius:12px}
  .eco-ic svg{width:23px;height:23px}
  .eco-card h3{font-size:15px}
}
@media(max-width:480px){
  .eco-rows{gap:24px}
}

/* ============================================================
   CONTACT — mobile: centre the aside (badge, text, info group)
   ============================================================ */
@media(max-width:980px){
  .contact-aside{text-align:center;display:flex;flex-direction:column;align-items:center}
  .contact-aside .eyebrow{margin-inline:auto}
  .contact-aside h2,.contact-aside .lead{margin-inline:auto}
  .contact-info{align-items:flex-start;width:fit-content;max-width:100%;margin-inline:auto}
  .contact-info li{justify-content:flex-start;text-align:start}
  .contact-info li>div{text-align:start}
}