/* ==========================================================================
   Urgent Order Delivery — homepage redesign
   Stage 1 preview stylesheet. Self-contained, mobile-first, no dependencies.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --red:    #C41230;
  --deep:   #8E0D23;
  --tint:   #FFF0F2;
  --wash:   #FFE2E7;
  --blush:  #FFD3DB;
  --ink:    #10181D;
  --muted:  #4A5A63;
  --line:   #E8ECEF;
  --line-2: #EDF1F3;
  --warm:   #F7F5F3;
  --dark:   #0B1114;
  --dark-2: #16222A;
  --dark-3: #1C2A33;
  --grey:   #9FB0BA;
  --green:  #0A7A46;
  --green-bg: #E9F7EF;
  --green-soft: #7BE8AE;   /* ticker separators on the green band */
  --amber:  #F5A524;
  --pink:   #FF6B85;

  --font-display: Archivo, "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Public Sans", "Public Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: 20px;             /* page gutter, grows at breakpoints */
  --max: 1328px;           /* content width == 1440 - 2*56 */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 12px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 640px)  { :root { --gut: 32px; } }
@media (min-width: 1024px) { :root { --gut: 44px; } }
@media (min-width: 1200px) { :root { --gut: 56px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--deep); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gut) * 2);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec { padding-block: clamp(52px, 7vw, 76px); }

.sec__eyebrow {
  font-size: 12.5px; font-weight: 700; color: var(--red);
  letter-spacing: 1.8px; text-transform: uppercase;
  margin-bottom: 11px;
}

.sec__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(31px, 4.1vw, 46px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.sec__lead {
  font-size: clamp(16px, 1.3vw, 17.5px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 54ch;
}

.sec__head {
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .sec__head {
    flex-direction: row; align-items: flex-end;
    justify-content: space-between; gap: 32px;
    margin-bottom: 38px;
  }
}

.sec--center { text-align: center; }
.sec--center .sec__lead { margin-inline: auto; }

.linkarrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; white-space: nowrap;
}
.linkarrow svg { transition: transform .2s var(--ease); }
.linkarrow:hover svg { transform: translateX(4px); }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 880px) {
  .grid { gap: 20px; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px;
  border-radius: 13px;
  font-size: 16px; font-weight: 700;
  font-family: inherit;
  border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--red {
  background: var(--red); color: #fff;
  box-shadow: 0 12px 28px rgba(196,18,48,.3);
}
.btn--red:hover { color: #fff; box-shadow: 0 16px 34px rgba(196,18,48,.38); }

.btn--ghost {
  background: #fff; color: var(--ink);
  border: 1.5px solid #D6DDE2; font-weight: 600;
}
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { color: #fff; box-shadow: 0 14px 30px rgba(16,24,29,.3); }

.btn--white { background: #fff; color: var(--red); font-weight: 800; }
.btn--white:hover { color: var(--deep); }

.btn--sm { padding: 13px 22px; font-size: 15px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}

.hdr__inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 72px;
}
@media (min-width: 1024px) { .hdr__inner { min-height: 88px; gap: 28px; } }

.logo { display: flex; align-items: center; gap: 11px; color: var(--ink); flex-shrink: 0; }
.logo:hover { color: var(--ink); }
.logo__mark {
  width: 38px; height: 38px; border-radius: 12px; background: var(--red);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(196,18,48,.34);
  flex-shrink: 0;
}
.logo__a {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: -.2px; line-height: 1.1;
}
.logo__b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 10.5px; letter-spacing: 2.6px; color: var(--red); line-height: 1.3;
}

.navlink { transition: color .18s ease; }
.navlink:hover { color: var(--red); }

.hdr__phone {
  display: none; align-items: center; gap: 8px; color: var(--ink);
  font-size: 15px; font-weight: 700;
}
.hdr__phone:hover { color: var(--red); }
/* the flex row was squeezing this icon to 10px wide and leaving it 17 tall */
.hdr__phone svg { flex-shrink: 0; }
.hdr__phone span { direction: ltr; }
@media (min-width: 1180px) { .hdr__phone { display: flex; } }

.lang {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1.5px solid #E4E9EC; border-radius: 999px;
  color: var(--ink); font-size: 14px; font-weight: 600;
  flex-shrink: 0;
  transition: border-color .18s ease;
}
.lang:hover { color: var(--ink); border-color: var(--red); }

/* desktop nav */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; flex-grow: 1; }
  .nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: clamp(16px, 1.9vw, 26px);
  }
  .nav a { font-size: 15px; font-weight: 500; color: var(--muted); }
  .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
}

.hdr__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
@media (min-width: 1024px) { .hdr__actions { margin-left: 0; } }

.hdr__login { display: none; color: var(--muted); font-size: 15px; font-weight: 500; }
@media (min-width: 1024px) { .hdr__login { display: block; } }

.hdr__book { display: none; }
@media (min-width: 760px) { .hdr__book { display: inline-flex; } }

/* mobile menu — CSS only, no JavaScript */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid #E4E9EC; background: #fff;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger__bars, .burger__bars::before, .burger__bars::after {
  content: ""; display: block;
  width: 19px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s ease;
}
.burger__bars { position: relative; }
.burger__bars::before { position: absolute; top: -6px; }
.burger__bars::after  { position: absolute; top: 6px; }

#menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
#menu-toggle:checked ~ .hdr .burger__bars { background: transparent; }
#menu-toggle:checked ~ .hdr .burger__bars::before { top: 0; transform: rotate(45deg); }
#menu-toggle:checked ~ .hdr .burger__bars::after  { top: 0; transform: rotate(-45deg); }
#menu-toggle:focus-visible ~ .hdr .burger { outline: 3px solid var(--red); outline-offset: 3px; }

.mobnav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
  border-top: 0 solid var(--line-2);
  overflow: hidden;
}
#menu-toggle:checked ~ .hdr .mobnav { grid-template-rows: 1fr; border-top-width: 1px; }
@media (min-width: 1024px) { .mobnav { display: none; } }

.mobnav__in { overflow: hidden; }
.mobnav ul { list-style: none; margin: 0; padding: 10px 0 18px; }
.mobnav li + li { border-top: 1px solid var(--line-2); }
.mobnav a {
  display: block; padding: 14px 0;
  font-size: 17px; font-weight: 600; color: var(--ink);
}
.mobnav a:hover { color: var(--red); }
.mobnav a.btn {
  display: flex; width: 100%; margin-top: 16px;
  padding: 16px 26px; color: #fff;
}
.mobnav__phone {
  display: block; margin-top: 14px; font-size: 15px;
  font-weight: 700; color: var(--ink); direction: ltr;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding-block: clamp(34px, 5vw, 58px) clamp(10px, 3vw, 0px); }

.hero__blob, .hero__blob-2 {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.hero__blob {
  top: -34%; right: -40%;
  width: 150vw; height: 150vw; max-width: 1040px; max-height: 1040px;
  background: var(--tint);
}
.hero__blob-2 {
  top: -22%; right: -14%;
  width: 95vw; height: 95vw; max-width: 640px; max-height: 640px;
  background: var(--wash);
}
@media (min-width: 1024px) {
  .hero__blob   { top: -240px; right: -240px; width: 1040px; height: 1040px; }
  .hero__blob-2 { top: -150px; right: 40px;   width: 640px;  height: 640px; }
}

.hero__inner {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; gap: clamp(24px, 4vw, 16px);
}
@media (min-width: 1024px) {
  .hero__inner { flex-direction: row; align-items: center; gap: 16px; }
  .hero__copy { width: 48%; flex-shrink: 0; padding-top: 22px; }
  .hero__visual { width: 52%; }
  .h1 { font-size: clamp(48px, 5.2vw, 70px); }
}

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 12px;
  background: #fff; border: 1px solid #F3D8DD; border-radius: 999px;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(16,24,29,.06);
  font-size: 13px; font-weight: 600; color: var(--deep);
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: block; flex-shrink: 0; }

.h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 8.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.036em;
  margin-bottom: 18px;
}
.h1 em { color: var(--red); font-style: normal; }

.lead {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6; color: var(--muted);
  max-width: 50ch;
  margin-bottom: 28px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }
.cta-row .btn { flex: 1 1 auto; min-width: 170px; }
@media (min-width: 560px) { .cta-row .btn { flex: 0 0 auto; } }
@media (min-width: 1024px) { .cta-row .btn { padding: 18px 30px; } }

.stats {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 34px);
  padding-top: 24px; border-top: 1px solid var(--line);
}
.stats__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 2.8vw, 32px); letter-spacing: -.03em; line-height: 1.1;
}
.stats__l { font-size: 13px; color: var(--muted); margin-top: 2px; }
.stats__rule { width: 1px; background: var(--line); align-self: stretch; }
@media (max-width: 559px) { .stats__rule { display: none; } }

/* hero visual + floating proof chips */
.hero__visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero__artwrap {
  position: relative; width: 100%; max-width: 772px;
  display: flex; align-items: center; justify-content: center;
}
.hero__art {
  width: 100%; max-width: 772px; height: auto;
  position: relative; z-index: 2;
  filter: drop-shadow(0 30px 50px rgba(16,24,29,.14));
}

.chip {
  position: absolute; z-index: 5;
  background: #fff; border-radius: 16px;
  padding: 11px 14px;
  box-shadow: 0 20px 44px rgba(16,24,29,.17);
  display: flex; align-items: center; gap: 10px;
}
.chip__t { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.chip__s { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.chip__icon {
  width: 34px; height: 34px; border-radius: 10px; background: var(--green-bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.chip--a { left: 0;  top: 2%; }
.chip--b { right: 0; bottom: 4%; background: var(--ink); box-shadow: 0 22px 48px rgba(16,24,29,.32); padding: 11px 15px 11px 11px; }
.chip--c { left: 3%; bottom: 20%; display: none; }

@media (min-width: 560px) { .chip--c { display: block; } }
@media (min-width: 1024px) {
  .chip { padding: 13px 16px; }
  .chip__t { font-size: 13px; }
  .chip__s { font-size: 11.5px; }
  .chip--a { top: 12%; }
  .chip--b { bottom: 11%; }
  .chip--c { left: 4%; bottom: 22%; }
}

.chip--b img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.chip--b .chip__t { color: #fff; font-size: 13px; }
.chip--b .chip__s { color: var(--grey); margin-left: 14px; }
.chip--b .live-row { display: flex; align-items: center; gap: 7px; }
.chip--b .dot { width: 7px; height: 7px; background: var(--pink); }

.stars { display: flex; gap: 2px; margin-bottom: 4px; }
.chip--c .chip__t { font-size: 13px; }

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker-sec {
  background: var(--green);
  overflow: hidden;
  position: relative; z-index: 8;
  padding-block: clamp(20px, 3vw, 32px);
  display: flex;
}
.ticker {
  display: flex; align-items: center; gap: 40px;
  padding-left: var(--gut);
  white-space: nowrap; flex-shrink: 0;
  will-change: transform;
}
.ticker span.t {
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
}
.ticker span.d { color: var(--green-soft); font-size: 20px; }
@media (min-width: 768px) { .ticker { gap: 54px; } }

/* ==========================================================================
   CARDS — tilt on hover (desktop pointers only)
   ========================================================================== */
.p3d { perspective: 1400px; }

.tilt {
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
  transform-style: preserve-3d;
}
@media (hover: hover) and (min-width: 1024px) {
  .tilt:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(-5deg) scale(1.02);
    box-shadow: 0 34px 70px rgba(16,24,29,.20);
  }
}
@media (hover: hover) and (max-width: 1023px) {
  .tilt:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(16,24,29,.14); }
}

/* speed cards */
.speed {
  display: block; position: relative;
  padding: 28px 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; color: var(--ink);
  box-shadow: 0 4px 14px rgba(16,24,29,.05);
}
.speed:hover { color: var(--ink); }
.speed__n, .speed__t, .speed__p,
.ind__t, .ind__p,
.why-card__t, .why-card__p,
.review__n, .review__m,
.chip__t, .chip__s { display: block; }

.speed__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 3.2vw, 40px); letter-spacing: -.035em;
  line-height: 1; margin-bottom: 6px; color: var(--red);
}
.speed__t { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.speed__p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.speed--hot {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 20px 44px rgba(196,18,48,.3);
}
.speed--hot:hover { color: #fff; }
.speed--hot .speed__n { color: #fff; }
.speed--hot .speed__p { color: rgba(255,255,255,.9); }
.speed__flag {
  position: absolute; top: -11px; left: 24px;
  padding: 5px 12px; background: var(--ink); color: #fff;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
}

/* industries */
.industries { background: var(--warm); }
.ind {
  display: block; padding: 26px;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 6px 20px rgba(16,24,29,.06);
  color: var(--ink);
}
.ind:hover { color: var(--ink); }
.ind svg { margin-bottom: 15px; }
.ind__t { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin-bottom: 8px; }
.ind__p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   APP SECTION — fanned phones
   ========================================================================== */
.app {
  background: var(--dark); position: relative; overflow: hidden;
  padding-block: clamp(52px, 7vw, 72px) clamp(44px, 6vw, 60px);
}
.app__glow, .app__glow-2 { position: absolute; border-radius: 50%; pointer-events: none; }
.app__glow {
  top: 150px; left: 50%; transform: translateX(-50%);
  width: 1120px; height: 1120px; background: var(--dark-2);
}
.app__glow-2 {
  top: 300px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px; background: rgba(196,18,48,.17);
}
.app > .wrap, .app > .fanwrap { position: relative; z-index: 2; }
.app .sec__title { color: #fff; }
.app .sec__eyebrow { color: var(--pink); }
.app .sec__lead { color: var(--grey); }

.fanwrap {
  margin-top: 34px;
  /* mobile: swipeable strip */
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px var(--gut) 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fanwrap::-webkit-scrollbar { display: none; }
.fan { scroll-snap-align: center; flex-shrink: 0; }

@media (min-width: 1024px) {
  .fanwrap {
    overflow: visible; padding: 0;
    height: 470px; perspective: 2200px;
    align-items: center; justify-content: center;
    gap: 0;
    scroll-snap-type: none;
  }
  .fan {
    transform-style: preserve-3d;
    transition: transform .4s var(--ease);
  }
  .fan:hover { transform: rotateY(0deg) scale(1.04) translateZ(60px) !important; }
  .fan--1 { transform: rotateY(42deg)  scale(.68) translateZ(-200px); margin-right: -92px; }
  .fan--2 { transform: rotateY(30deg)  scale(.80) translateZ(-120px); margin-right: -76px; }
  .fan--3 { transform: rotateY(17deg)  scale(.90) translateZ(-50px);  margin-right: -56px; }
  .fan--4 { transform: translateZ(90px); z-index: 5; }
  .fan--5 { transform: rotateY(-17deg) scale(.90) translateZ(-50px);  margin-left: -56px; }
  .fan--6 { transform: rotateY(-30deg) scale(.80) translateZ(-120px); margin-left: -76px; }
  .fan--7 { transform: rotateY(-42deg) scale(.68) translateZ(-200px); margin-left: -92px; }
}
/* phones 1 and 7 are decorative — drop them on small screens to cut weight */
@media (max-width: 1023px) {
  .fan--1, .fan--7 { display: none; }
}

.phone {
  width: 244px; border-radius: 38px; background: var(--dark-3);
  padding: 8px; box-shadow: 0 34px 66px rgba(0,0,0,.5);
  position: relative; overflow: hidden;
}
.phone__screen {
  border-radius: 31px; background: #fff; overflow: hidden;
  height: 416px;
}
.phone--big { width: 272px; border-radius: 44px; padding: 9px; box-shadow: 0 60px 100px rgba(0,0,0,.62); }
.phone--big .phone__screen { border-radius: 36px; height: 462px; }
.phone--sm { width: 240px; }
.phone--sm .phone__screen { height: 404px; }

.ph-pad { padding: 15px; }
.ph-bar { background: var(--red); height: 64px; }
.ph-bar--t { padding: 24px 16px 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.ph-skel { background: var(--line); border-radius: 7px; height: 14px; margin-bottom: 11px; }
.ph-block { height: 56px; background: #F2F5F7; border-radius: 12px; margin-bottom: 10px; }
.ph-row { background: var(--warm); border-radius: 12px; padding: 12px; margin-bottom: 9px; }
.ph-tag { font-size: 9px; font-weight: 700; color: #8795A0; letter-spacing: .4px; }
.ph-tag--ok { color: var(--green); }
.ph-id { font-size: 11.5px; font-weight: 700; margin-top: 3px; }
.ph-track { height: 4px; background: #E4E9EC; border-radius: 99px; margin-top: 8px; }
.ph-track i { display: block; width: 62%; height: 4px; background: var(--red); border-radius: 99px; }
.ph-h { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin-bottom: 13px; }
.ph-opt {
  padding: 13px; border: 1.5px solid #E4E9EC; border-radius: 12px;
  margin-bottom: 9px; font-size: 11.5px; color: var(--muted);
}
.ph-opt--on { border-color: var(--red); background: var(--tint); font-weight: 700; color: var(--deep); }
.ph-total {
  padding: 13px; background: var(--warm); border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--muted); margin-top: 18px;
}
.ph-total b { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); direction: ltr; }
.ph-mid {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 20px;
}
.ph-tick {
  width: 68px; height: 68px; border-radius: 50%; background: var(--green-bg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.ph-map { height: 262px; background: #E8EDF0; position: relative; overflow: hidden; }
.ph-map svg { width: 100%; height: 100%; }
.ph-driver { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.ph-av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--red);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  flex-shrink: 0;
}
.ph-call {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green-bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: 24px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: #fff; border-radius: 13px;
  color: var(--ink); font-size: 15px; font-weight: 700;
}
.store:hover { color: var(--ink); }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how { background: var(--warm); position: relative; overflow: hidden; }
.how__route { display: none; margin: 26px 0 -14px; width: 100%; height: auto; }
@media (min-width: 1024px) { .how__route { display: block; } }

.step {
  background: #fff; border-radius: var(--r-lg);
  padding: 30px 26px; box-shadow: 0 6px 20px rgba(16,24,29,.06);
  text-align: left;
}
.step__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: 46px; color: var(--blush); line-height: 1; margin-bottom: 12px;
}
.step__t {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  margin-bottom: 10px; letter-spacing: -.02em;
}
.step__p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.how .grid { margin-top: 30px; }
@media (min-width: 1024px) { .how .grid { margin-top: 0; } }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why__inner { display: flex; flex-direction: column; gap: 34px; }
@media (min-width: 1024px) {
  .why__inner { flex-direction: row; gap: 56px; align-items: flex-start; }
  .why__copy { width: 360px; flex-shrink: 0; }
  .why__grid { flex-grow: 1; }
}
.why__copy .sec__title { font-size: clamp(31px, 3.9vw, 44px); margin-bottom: 16px; }
.why__copy p { font-size: 16.5px; line-height: 1.65; color: var(--muted); margin-bottom: 24px; }

.why-card {
  display: block; padding: 24px; background: var(--warm);
  border-radius: 18px; color: var(--ink);
}
.why-card:hover { color: var(--ink); }
.why-card svg { margin-bottom: 13px; }
.why-card__t { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.why-card__p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews { background: var(--warm); }
.rpill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; background: #fff; border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(16,24,29,.07);
  font-size: 14.5px; font-weight: 700;
}
.review {
  background: #fff; border-radius: var(--r-lg); padding: 28px;
  box-shadow: 0 6px 22px rgba(16,24,29,.07);
  display: flex; flex-direction: column;
}
.review__q { font-size: 16px; line-height: 1.65; margin: 14px 0 22px; flex-grow: 1; }
.review__who { display: flex; align-items: center; gap: 12px; }
.review__av {
  width: 42px; height: 42px; border-radius: 50%; background: var(--tint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--red); font-size: 15px;
  flex-shrink: 0;
}
.review__n { font-size: 14px; font-weight: 700; }
.review__m { font-size: 12.5px; color: var(--muted); }

.review--dark {
  background: var(--ink); box-shadow: 0 16px 40px rgba(16,24,29,.26);
  justify-content: center;
}
.review--dark .big {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 5vw, 54px); color: #fff; line-height: 1; letter-spacing: -.04em;
}
.review--dark p { font-size: 16px; color: var(--grey); margin: 12px 0 24px; line-height: 1.5; }
.review--dark a { color: var(--pink); }
.review--dark a:hover { color: #fff; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.band {
  background: var(--red); border-radius: 26px;
  padding: clamp(32px, 5vw, 50px) clamp(26px, 4vw, 56px);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 26px;
  margin-block: clamp(44px, 6vw, 56px);
}
@media (min-width: 900px) {
  .band { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
}
.band__o, .band__o-2 { position: absolute; border-radius: 50%; pointer-events: none; }
.band__o   { top: -120px; right: 120px; width: 380px; height: 380px; background: rgba(255,255,255,.08); }
.band__o-2 { bottom: -180px; right: 400px; width: 300px; height: 300px; background: rgba(255,255,255,.06); }
.band__txt { position: relative; }
.band h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.032em;
  color: #fff; line-height: 1.12; margin-bottom: 10px;
}
.band p { font-size: clamp(15.5px, 1.5vw, 17px); color: rgba(255,255,255,.9); }
.band .btn { position: relative; align-self: flex-start; padding: 18px 32px; white-space: nowrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { border-top: 1px solid var(--line-2); padding-block: 34px 44px; }
.ftr__inner {
  display: flex; flex-direction: column; gap: 26px;
}
@media (min-width: 900px) {
  .ftr__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; }
}
.ftr__brand { display: flex; align-items: center; gap: 11px; }
.ftr__mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--ink);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ftr__name { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.ftr__links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.ftr__links a { color: var(--muted); font-size: 14.5px; }
.ftr__meta { font-size: 14px; color: var(--muted); line-height: 1.7; }
.ftr__meta a { color: var(--muted); }
@media (min-width: 900px) { .ftr__meta { text-align: right; } }

/* ==========================================================================
   MOTION
   ========================================================================== */
.f1 { animation: bob 6s ease-in-out infinite; }
.f2 { animation: bob 7.4s ease-in-out .7s infinite; }
.f3 { animation: bob 5.4s ease-in-out 1.3s infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.live { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }

.ticker { animation: slide 26s linear infinite; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sheen {
  position: absolute; top: -40px; left: 0;
  width: 112px; height: 580px; background: rgba(255,255,255,.11);
  pointer-events: none; z-index: 5;
  animation: sheen 5.5s ease-in-out infinite;
}
@keyframes sheen {
  0%, 62%, 100% { transform: translateX(-130%) rotate(18deg); }
  80% { transform: translateX(240%) rotate(18deg); }
}

/* route line draws itself when scrolled into view */
.draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.draw.in { animation: draw 2.6s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Scroll reveal. Content is hidden ONLY once JS has confirmed it is running
   and able to reveal it again (html.js-rev). No JS, old browser, blocked
   script, print — the page renders fully visible with no animation. */
html.js-rev [data-rev] { opacity: 0; transform: translateY(24px); }
html.js-rev [data-rev].in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js-rev [data-rev].in[data-rev-d="1"] { transition-delay: .08s; }
html.js-rev [data-rev].in[data-rev-d="2"] { transition-delay: .16s; }
html.js-rev [data-rev].in[data-rev-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .f1, .f2, .f3, .live, .ticker, .sheen { animation: none !important; }
  .draw, .draw.in { animation: none; stroke-dashoffset: 0; }
  html.js-rev [data-rev] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tilt:hover, .btn:hover, .fan:hover { transform: none !important; }
}

/* ==========================================================================
   SPEED BOXES — four square tiles in the hero, two across and two down.
   The same four services shown on the phone in the artwork.
   ========================================================================== */
.speedbox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 330px;        /* keeps the squares sensible inside a wide column */
  /* the max-width used to park the grid against the left edge on a phone */
  margin-inline: auto;
  margin-bottom: 30px;
}

.dtile {
  aspect-ratio: 1 / 1;     /* square, not a wide button */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  min-width: 0; padding: 12px;
  border-radius: 20px;
  background: var(--tint); color: var(--deep);
  font-weight: 700; font-size: 15.5px; line-height: 1.2; text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dtile svg { width: 38px; height: 38px; flex-shrink: 0; }
.dtile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(196,18,48,.20); color: var(--deep); }
.dtile--on { background: var(--red); color: #fff; box-shadow: 0 12px 28px rgba(196,18,48,.28); }
.dtile--on:hover { color: #fff; box-shadow: 0 18px 36px rgba(196,18,48,.36); }

@media (min-width: 1024px) {
  .speedbox { max-width: 360px; gap: 14px; }
  .dtile { font-size: 16px; border-radius: 22px; }
  .dtile svg { width: 42px; height: 42px; }
}

/* ==========================================================================
   DOWNLOAD THE APP — under the phone artwork, right-hand column
   ========================================================================== */
.herodl { width: 100%; max-width: 420px; margin: 6px auto 0; text-align: center; }
.herodl__t {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(19px, 2vw, 23px); letter-spacing: -.03em;
  margin-bottom: 12px;
}
.herodl__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Each store's own light badge: a white card, the store's mark in its real
   colours, dark text. The solid black blocks these used to be fought with
   the red everywhere else on the page. */
.store2 {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 0; padding: 12px 10px; border-radius: 12px;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line);
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16,24,29,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.store2:hover {
  color: var(--ink); transform: translateY(-2px);
  border-color: #D7DEE3; box-shadow: 0 12px 26px rgba(16,24,29,.14);
}
.store2 svg { flex-shrink: 0; }
.store2__sub { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: .4px; }
.store2__n { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.15; }
.store2 > span { text-align: left; }

@media (max-width: 400px) {
  .speedbox { gap: 10px; }
  .dtile { font-size: 14px; gap: 8px; }
  .dtile svg { width: 32px; height: 32px; }
  .store2 { font-size: 13px; }
}

/* ==========================================================================
   WHATSAPP — a standing offer to talk, on every page.
   Bottom-right, out of the way of the content, and it swaps to the left in
   Arabic so it never lands on top of the text direction.
   ========================================================================== */
.wa {
  position: fixed; z-index: 90;
  inset-block-end: clamp(16px, 3vw, 26px);
  inset-inline-end: clamp(16px, 3vw, 26px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  background: #25D366; color: #fff;
  font-weight: 800; font-size: 15px; line-height: 1;
  box-shadow: 0 10px 28px rgba(37,211,102,.38), 0 2px 8px rgba(16,24,29,.16);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(37,211,102,.46); }
.wa:active { transform: translateY(-1px); }
.wa svg { width: 26px; height: 26px; flex-shrink: 0; }
.wa__t { white-space: nowrap; }

/* one quiet pulse so it is noticed once, then left alone */
.wa::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: waPulse 2.8s var(--ease) 3;
}
@keyframes waPulse {
  0%        { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  55%, 100% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
}

/* on a phone it shrinks to the mark alone, so it never covers the content */
@media (max-width: 560px) {
  .wa { padding: 0; width: 54px; height: 54px; justify-content: center; }
  .wa__t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa::before { animation: none; }
  .wa:hover { transform: none; }
}

/* ---------- preview-only ribbon (remove at Stage 3) ---------- */
.preview-flag {
  position: fixed; bottom: 14px; left: 14px; z-index: 200;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  padding: 8px 13px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(16,24,29,.3);
  opacity: .82;
}

/* ---- very narrow phones (360px and below) --------------------------------
   Nothing in the header was allowed to shrink, so the burger pushed past the
   viewport. Tighten the gaps and let the globe stand on its own. */
@media (max-width: 400px) {
  .hdr__inner { gap: 10px; }
  .hdr__actions { gap: 8px; }
  .logo { min-width: 0; }
  .logo__a { font-size: 14px; }
  .lang { padding: 9px 11px; }
  .lang .lang__txt { display: none; }
}

/* ==========================================================================
   DRIVE BAND — track built to match the photograph.
   The car is a three-quarter view: its ground plane runs at 6.6 degrees,
   measured off the two wheel contacts in the original photo. So the road is
   drawn at 6.6 degrees and the car drives ALONG it, arriving from the far
   distance at the top left and passing close to the camera at the bottom
   right, growing slightly as it comes. Every element shares one perspective,
   which is what stops it looking wrong.
   ========================================================================== */
.drive {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFBFB 0%, #FFF3F4 58%, #FFEAEC 100%);
  padding-block: clamp(40px, 5.5vw, 62px) 0;
}
.drive__copy { position: relative; z-index: 4; text-align: center; margin-bottom: clamp(14px, 2vw, 22px); }
.drive__copy .sec__lead { margin-inline: auto; }

/* The cap used to be 300px. A 6.6 degree road drops about 0.116 x the screen
   width across the frame, so on a very wide monitor the slope ate the whole
   band and the centre line reached the corner. 340px gives it room. Nothing
   below 1463px wide changes — 20.5vw is still the smaller value there. */
.drive__stage { position: relative; height: clamp(186px, 20.5vw, 340px); overflow: hidden; }

/* the road, laid at the car's own angle */
.drive__ground {
  /* The overhang is in vw because the lift the rotation gives the corners
     grows with the width of the band, while the band's height is clamped.
     9vw clears the 7.4vw lift at 6.6 degrees on any screen, so no corner of
     the stage is ever left uncovered. Top and bottom match, which is what
     puts the same depth of road on either side of the centre line. */
  position: absolute; left: -14%; right: -14%; top: -9vw; bottom: -9vw;
  /* the car's own ground plane falls away to the right, so the road does too */
  transform: rotate(6.6deg);
  transform-origin: 50% 100%;
  background: linear-gradient(180deg,
    #4A5258 0%, #434B51 26%, #373F44 42%, #2C3337 58%, #22282B 76%, #1A1E21 100%);
  overflow: hidden;
}
/* the centre line, halfway down the road and running at the same angle */
.drive__ground::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.80) 0 52px, rgba(255,255,255,0) 52px 132px);
}

/* ---- the car, travelling along the road ----
   X and Y move together so the path matches the road's 6.6 degrees, and the
   scale lifts as it nears the camera. */
.drive__track {
  position: absolute; z-index: 3;
  left: 0; bottom: 26%;
  width: clamp(232px, 31vw, 392px);
  transform-origin: 50% 100%;
  animation: cross 9s linear infinite;
  will-change: transform;
}
@keyframes cross {
  from { transform: translate(-108%, -7.7vw) scale(.85); }
  to   { transform: translate(100vw,   7.7vw) scale(1.05); }
}

.drive__car { position: relative; animation: carBob 1.3s ease-in-out infinite; }
.drive__car > img:first-child { width: 100%; height: auto; display: block; }

/* ---- the turning wheels ----
   Each sprite is the alloy face lifted straight out of the photo and put back
   at the same spot, so at rest the car looks untouched. Percentages are of the
   car's own box, which keeps them locked on at any size. Only the alloy spins;
   the tyre around it belongs to the photo and never moves, so nothing sweeps
   outside the wheel arch. */
.drive__wheel {
  position: absolute; display: block; height: auto;
  animation: wheelSpin .62s linear infinite;
  will-change: transform;
}
.drive__wheel--r { left: 0.374%;  top: 57.584%; width: 7.731%;  }
.drive__wheel--f { left: 48.753%; top: 64.326%; width: 10.224%; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes carBob {
  0%, 100% { transform: translateY(0); }
  28%      { transform: translateY(-1.5px); }
  64%      { transform: translateY(1px); }
}

/* shadow lies on the road, so it shares the road's angle */
.drive__car::after {
  content: ""; position: absolute; z-index: -1;
  left: 5%; right: 3%; bottom: -1%; height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 54% 50%,
    rgba(10,14,18,.5) 0%, rgba(10,14,18,.18) 50%, rgba(10,14,18,0) 76%);
  transform: rotate(6.6deg);
}

@media (prefers-reduced-motion: reduce) {
  .drive__track, .drive__car, .drive__wheel { animation: none !important; }
  .drive__track { transform: translate(30vw, 0) scale(.95); }
}

html[dir="rtl"] .drive__stage { transform: scaleX(-1); }

/* fleet decal on the door. Positioned as an overlay rather than painted into
   the photo, so it can be nudged or removed without re-exporting the image. */
.drive__decal {
  position: absolute; left: 26%; top: 51%;
  display: flex; align-items: center; gap: .5em;
  padding: .42em .6em;
  background: rgba(196,18,48,.93);
  border-radius: .42em;
  transform: skewY(-3deg) rotate(-.6deg);
  box-shadow: 0 .12em .35em rgba(0,0,0,.2);
  font-size: clamp(4.6px, .72vw, 8.4px);
}
.drive__decal svg { width: 1.7em; height: 1.7em; flex-shrink: 0; }
.drive__decal b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1em; line-height: 1.15; color: #fff; white-space: nowrap;
}
.drive__decal i { display: block; font-style: normal; font-weight: 600; opacity: .88; letter-spacing: .2em; }
@media (max-width: 700px) { .drive__decal { display: none; } }

/* ==========================================================================
   ARABIC / RIGHT-TO-LEFT
   The layout mirrors on its own from dir="rtl" — these are the places where
   that is not enough: the display face has no Arabic glyphs, and Arabic sets
   wider and taller than Latin at the same size.
   ========================================================================== */
html[dir="rtl"] {
  --font-display: Cairo, "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: Cairo, "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}
html[dir="rtl"] body { font-family: var(--font-body); }

/* headings: a notch smaller, a little more leading, no Latin letter-spacing */
html[dir="rtl"] .hero__title {
  font-size: clamp(30px, 5.1vw, 60px);
  line-height: 1.32;
  letter-spacing: 0;
  word-spacing: .02em;
}
html[dir="rtl"] .sec__title,
html[dir="rtl"] .bstep__h,
html[dir="rtl"] .pay-h,
html[dir="rtl"] .sub-h,
html[dir="rtl"] .herodl__t,
html[dir="rtl"] .done__awb { letter-spacing: 0; line-height: 1.35; }
html[dir="rtl"] .sec__title { font-size: clamp(24px, 3.4vw, 40px); }
html[dir="rtl"] .sec__eyebrow,
html[dir="rtl"] .bstep__eyebrow,
html[dir="rtl"] .quote__tag,
html[dir="rtl"] .store2__sub { letter-spacing: 0; }

/* the header crowds at the top once the words get longer */
html[dir="rtl"] .hdr__phone span { white-space: nowrap; }
html[dir="rtl"] .hdr__actions { gap: 10px; }
html[dir="rtl"] .navlink,
html[dir="rtl"] .hdr__login { white-space: nowrap; }

/* numbers, prices, phone numbers and the AWB stay left-to-right inside
   right-to-left text, or the digits come out in the wrong order */
html[dir="rtl"] .stats__n,
html[dir="rtl"] .big,
html[dir="rtl"] .quote__amt,
html[dir="rtl"] .ph-total b,
html[dir="rtl"] .ftr__meta a { direction: ltr; unicode-bidi: isolate; }

/* arrows point the other way when the text does */
html[dir="rtl"] .linkarrow svg,
html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .store2 > span { text-align: right; }

/* the WhatsApp button moves to the other corner, set by inset-inline-end */
html[dir="rtl"] .wa__t { white-space: nowrap; }