/* ═══════════════════════════════════════════════════════════════
   DashGoo v2 — one screen, zero scroll, maximum funk.
   Same brand DNA (yellow #F6A800 / ink / speed dashes) turned
   into a comic-sticker poster: fat borders, hard offset shadows,
   rotated stickers, a scooter that drives across your screen.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --y0: #D98F00;
  --y1: #F6A800;
  --y2: #FFC53D;
  --ink: #0C0C11;

  --font-display: 'Baloo Bhaijaan 2', 'Rubik', sans-serif;
  --font-body: 'Rubik', 'Baloo Bhaijaan 2', sans-serif;

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="dark"] {
  --bg: #0B0B10;
  --bg-2: #10101a;
  --card: #15151E;
  --text: #F6F4ED;
  --muted: #A6A399;
  --line: #F6F4ED;           /* comic outline color        */
  --hard: #F6A800;           /* hard offset shadow color   */
  --dot: rgba(246, 244, 237, .07);
  --scene-speed: rgba(246, 244, 237, .28);
  --scene-puff: rgba(246, 244, 237, .14);
  --skyline: #2c2c3d;
  --road: #33333f;
}

[data-theme="light"] {
  --bg: #FAF3E3;
  --bg-2: #F4ECD8;
  --card: #FFFDF6;
  --text: #14141A;
  --muted: #6E695C;
  --line: #14141A;
  --hard: #14141A;
  --dot: rgba(12, 12, 17, .08);
  --scene-speed: rgba(12, 12, 17, .22);
  --scene-puff: rgba(12, 12, 17, .1);
  --skyline: #E3DAC2;
  --road: #C9C2AE;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(circle, var(--dot) 1.6px, transparent 1.7px) 0 0 / 26px 26px,
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--y1) 16%, transparent), transparent 65%),
    var(--bg);
  color: var(--text);
  transition: background .45s ease, color .45s ease;
  -webkit-font-smoothing: antialiased;
}

/* grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4000;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
svg { display: block; }
::selection { background: var(--y1); color: var(--ink); }

/* ═══ STAGE = the single screen ═══ */
.stage {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  overflow: hidden;
  position: relative;
}

/* ═══ TOP BAR ═══ */
.bar {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  padding: clamp(10px, 1.8dvh, 18px) clamp(16px, 3vw, 40px);
  z-index: 10;
}
.logo { display: inline-flex; align-items: center; gap: 8px; direction: ltr; }
.logo-dashes { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.logo-dashes i { display: block; height: 5px; border-radius: 3px; background: var(--y1); }
.logo-dashes i:nth-child(1) { width: 22px; }
.logo-dashes i:nth-child(2) { width: 14px; }
.logo-dashes i:nth-child(3) { width: 18px; }
.logo:hover .logo-dashes i { animation: dash-zip .5s var(--ease-out); }
.logo:hover .logo-dashes i:nth-child(2) { animation-delay: .06s; }
.logo:hover .logo-dashes i:nth-child(3) { animation-delay: .12s; }
@keyframes dash-zip {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(-14px); opacity: 0; }
  41% { transform: translateX(14px); }
  100% { transform: translateX(0); opacity: 1; }
}
.logo-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6dvh, 1.7rem);
  letter-spacing: -.5px;
  display: inline-flex;
  direction: ltr;
}
.logo-word .ld { color: var(--text); }
.logo-word .lg { color: var(--y1); }

/* real brand wordmark (inlined so it recolors per theme) */
.logo-svg { height: clamp(24px, 3.6dvh, 32px); width: auto; overflow: visible; }
.logo-svg .lw { fill: var(--text); transition: fill .45s ease; } /* "Dash"      */
.logo-svg .lm { fill: var(--y1); }                                /* "Goo" + mark */
.logo:hover .logo-svg { animation: logo-nudge .5s var(--ease-out); }
@keyframes logo-nudge {
  0%, 100% { transform: none; }
  40% { transform: translateX(4px) rotate(-1.5deg); }
}

.sticker-mini {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.68rem, 1.5dvh, .82rem);
  background: var(--y1);
  color: var(--ink);
  border: 2.5px solid var(--line);
  border-radius: 999px;
  padding: 3px 13px;
  transform: rotate(-2.5deg);
  box-shadow: 3px 3px 0 var(--hard);
  white-space: nowrap;
}
[data-theme="dark"] .sticker-mini { box-shadow: 3px 3px 0 rgba(246,168,0,.35); }

.bar-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 40px;
  height: clamp(34px, 4.6dvh, 42px);
  padding-inline: 13px;
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: .86rem;
  box-shadow: 3px 3px 0 var(--hard);
  transition: transform .18s var(--ease-spring), box-shadow .18s;
  white-space: nowrap;
}
[data-theme="dark"] .chip-btn { box-shadow: 3px 3px 0 rgba(246,168,0,.35); }
.chip-btn:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 5px 5px 0 var(--hard); }
[data-theme="dark"] .chip-btn:hover { box-shadow: 5px 5px 0 rgba(246,168,0,.5); }
.chip-btn:active { transform: translate(1px, 1px) scale(.96); box-shadow: 1px 1px 0 var(--hard); }
.phone-chip { background: var(--y1); color: var(--ink); }

.theme-btn { position: relative; overflow: hidden; width: 42px; }
/* sun-path swing: the icons ride an arc (pivot well below the button) and are
   clipped as they set / rise — no cross-fade */
.theme-btn svg { position: absolute; transform-origin: 50% 250%; transition: transform .6s var(--ease-spring); }
[data-theme="dark"] .theme-btn .ic-sun { transform: rotate(0); }
[data-theme="dark"] .theme-btn .ic-moon { transform: rotate(74deg); }
[data-theme="light"] .theme-btn .ic-sun { transform: rotate(-74deg); }
[data-theme="light"] .theme-btn .ic-moon { transform: rotate(0); }

/* ═══ PLAYFIELD ═══ */
.playfield {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
  padding: clamp(4px, 1.5dvh, 20px) clamp(16px, 3.5vw, 52px) 0;
  min-height: 0;
  overflow: visible;
  z-index: 2;
}

/* ── copy ── */
.copy { max-width: 640px; position: relative; z-index: 5; padding-top: clamp(6px, 4.5dvh, 48px); }

.mega {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 6.4dvh, 3.9rem);
  line-height: 1.12;
  letter-spacing: -1px;
  animation: pop-in .7s var(--ease-spring) both;
}
[lang="ar"] .mega { letter-spacing: 0; line-height: 1.28; }

.shout {
  display: inline-block;
  background: var(--y1);
  color: var(--ink);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 0 .28em;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--hard);
  animation: shout-jiggle 3.2s ease-in-out infinite;
}
[data-theme="dark"] .shout { box-shadow: 4px 4px 0 rgba(246,168,0,.35); }
@keyframes shout-jiggle {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  46% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(2deg) scale(1.06); }
  54% { transform: rotate(-3deg) scale(1); }
}

.wavy {
  font-style: normal;
  color: var(--y1);
  position: relative;
  white-space: nowrap;
}
.wavy::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -.08em;
  height: .16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%23F6A800' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: auto 100%;
  background-repeat: repeat-x;
  animation: wave-slide 1.6s linear infinite;
}
@keyframes wave-slide { to { background-position-x: 40px; } }

.sub {
  color: var(--muted);
  font-size: clamp(.88rem, 2.2dvh, 1.12rem);
  max-width: 50ch;
  margin-top: clamp(8px, 1.6dvh, 16px);
  animation: pop-in .7s var(--ease-spring) .12s both;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* ── ctas + stat stickers ── */
.ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 26px);
  margin-top: clamp(12px, 2.6dvh, 26px);
  animation: pop-in .7s var(--ease-spring) .22s both;
}

.btn-fat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.95rem, 2.2dvh, 1.15rem);
  padding: clamp(10px, 1.8dvh, 15px) clamp(18px, 2.6vw, 30px);
  border-radius: 999px;
  background: var(--y1);
  color: var(--ink);
  border: 3px solid var(--line);
  box-shadow: 5px 5px 0 var(--hard);
  transition: transform .18s var(--ease-spring), box-shadow .18s;
  white-space: nowrap;
}
[data-theme="dark"] .btn-fat { box-shadow: 5px 5px 0 rgba(246,168,0,.35); }
.btn-fat:hover { transform: translate(-2px, -3px) rotate(-1deg) scale(1.02); box-shadow: 8px 8px 0 var(--hard); }
[data-theme="dark"] .btn-fat:hover { box-shadow: 8px 8px 0 rgba(246,168,0,.5); }
.btn-fat:active { transform: translate(2px, 2px) scale(.97); box-shadow: 1px 1px 0 var(--hard); }

.stat-stickers { display: flex; gap: 10px; }
.stat-stk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 9.4dvh, 76px);
  height: clamp(58px, 9.4dvh, 76px);
  border-radius: 50%;
  border: 2.5px dashed var(--line);
  background: var(--card);
  font-family: var(--font-display);
  line-height: 1;
  gap: 3px;
  transition: transform .25s var(--ease-spring);
}
.stat-stk b { font-size: clamp(.95rem, 2.4dvh, 1.25rem); font-weight: 800; color: var(--y1); }
.stat-stk small { font-size: clamp(.52rem, 1.3dvh, .66rem); font-weight: 600; color: var(--muted); }
.stat-stk.s1 { transform: rotate(-6deg); }
.stat-stk.s2 { transform: rotate(4deg); }
.stat-stk.s3 { transform: rotate(-3deg); }
.stat-stk:hover { transform: rotate(0) scale(1.12); border-style: solid; }

/* ── service chips ── */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.4dvh, 14px);
  margin-top: clamp(12px, 2.8dvh, 30px);
  animation: pop-in .7s var(--ease-spring) .32s both;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: clamp(7px, 1.4dvh, 11px) clamp(12px, 1.6vw, 18px);
  border: 2.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.78rem, 1.9dvh, .95rem);
  box-shadow: 3px 3px 0 var(--hard);
  transition: transform .2s var(--ease-spring), background .2s, color .2s;
  cursor: default;
}
[data-theme="dark"] .chip { box-shadow: 3px 3px 0 rgba(246,168,0,.3); }
.chip svg { color: var(--y1); flex-shrink: 0; }
.chip.c1 { transform: rotate(-1.6deg); }
.chip.c2 { transform: rotate(1.2deg); }
.chip.c3 { transform: rotate(-.8deg); }
.chip.c4 { transform: rotate(1.8deg); }
.chip:hover {
  transform: rotate(0) translateY(-3px) scale(1.05);
  background: var(--y1);
  color: var(--ink);
}
.chip:hover svg { color: var(--ink); animation: chip-bounce .45s var(--ease-spring); }
@keyframes chip-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(-10deg); }
  100% { transform: scale(1); }
}

/* ═══ FUN (sticker zone) ═══ */
.fun { position: relative; min-height: 0; z-index: 3; align-self: stretch; }

/* ═══ SUN / MOON icon (separate, toggles with theme) ═══ */
.sky-orb {
  position: absolute;
  top: clamp(-8px, -1dvh, 0px);
  inset-inline-end: clamp(10px, 4vw, 60px);
  width: clamp(64px, 11dvh, 104px);
  aspect-ratio: 1;
}
.orb-sun, .orb-moon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* pivot well below the orb so it rises / sets along an arc (a sun path) */
  transform-origin: 50% 185%;
  transition: transform .85s var(--ease-spring), opacity .5s ease;
}
.orb-sun {
  background: var(--y1);
  border: 3px solid var(--line);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--y1) 22%, transparent);
}
.orb-sun::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 3px dashed color-mix(in srgb, var(--y1) 60%, transparent);
  /* spin the ray-ring itself, leaving the sun's own transform free for the arc */
  animation: orb-spin 14s linear infinite;
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
.orb-moon {
  background: #F1E8CF;
  border: 3px solid var(--line);
  -webkit-mask: radial-gradient(circle at 68% 34%, transparent 34%, #000 36%);
  mask: radial-gradient(circle at 68% 34%, transparent 34%, #000 36%);
}
[data-theme="dark"] .orb-sun { opacity: 0; transform: rotate(92deg); }
[data-theme="dark"] .orb-moon { opacity: 1; transform: rotate(0); }
[data-theme="light"] .orb-sun { opacity: 1; transform: rotate(0); }
[data-theme="light"] .orb-moon { opacity: 0; transform: rotate(-92deg); }

/* ═══ rotating trust seal (ring text + centred logo) ═══ */
.stk-orb {
  width: clamp(84px, 15dvh, 138px);
  aspect-ratio: 1;
  top: clamp(20px, 8dvh, 80px);
  inset-inline-start: 8%;        /* mirrors with the page so it doesn't collide in RTL */
  color: var(--y1);
}
.stk-orb > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* only the ring text spins — disc + logo stay upright; ltr here keeps the textPath stable */
.orb-seal { direction: ltr; filter: drop-shadow(4px 4px 0 var(--hard)); }
[data-theme="dark"] .orb-seal { filter: drop-shadow(4px 4px 0 rgba(246, 168, 0, .3)); }

/* stars only at night */
.fun::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--text) 1.4px, transparent 1.6px),
    radial-gradient(circle, var(--text) 1.1px, transparent 1.3px);
  background-size: 210px 160px, 140px 190px;
  background-position: 30px 10px, 90px 60px;
  opacity: 0;
  transition: opacity .6s;
  animation: star-blink 3s ease-in-out infinite alternate;
}
[data-theme="dark"] .fun::before { opacity: .5; }
@keyframes star-blink { from { opacity: .3; } to { opacity: .6; } }

/* stickers */
.stk { position: absolute; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.badge-bg { fill: var(--card); stroke: var(--line); stroke-width: 3; }
.badge-txt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.6px;
  fill: var(--text);
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: spin-slow 16s linear infinite;
}
[lang="ar"] .badge-txt { letter-spacing: 0; font-size: 12px; }


.stk-pin {
  width: clamp(34px, 6dvh, 52px);
  top: clamp(70px, 15dvh, 150px);
  inset-inline-end: 4%;
  animation: pin-hop 2s ease-in-out infinite;
}
@keyframes pin-hop {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50% { transform: translateY(-16px) rotate(-5deg); }
}
.pin-body { fill: var(--y1); stroke: var(--line); stroke-width: 3.4; }
.pin-hole { fill: var(--bg); }

.stk-parcel {
  width: clamp(52px, 9dvh, 84px);
  bottom: 34%;
  inset-inline-start: 30%;
  animation: parcel-float 4.2s ease-in-out infinite alternate;
}
@keyframes parcel-float {
  from { transform: translateY(-10px) rotate(-6deg); }
  to { transform: translateY(10px) rotate(5deg); }
}
.parcel-body { fill: var(--card); stroke: var(--line); stroke-width: 3.2; }
.parcel-tape { fill: var(--y1); }
.parcel-zip { stroke: var(--muted); stroke-width: 3; }

/* ═══ ROADWAY + driving scooter ═══ */
.roadway {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: clamp(120px, 24dvh, 220px);
  pointer-events: none;
  z-index: 1;
}
.skyline {
  position: absolute;
  inset-inline: 0;
  bottom: 12px;
  height: 72%;
  background: var(--skyline);
  transition: background .45s;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='110' viewBox='0 0 600 110'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='58' width='44' height='52'/%3E%3Crect x='9' y='52' width='15' height='6'/%3E%3Crect x='20' y='42' width='2.4' height='16'/%3E%3Crect x='56' y='54' width='40' height='56'/%3E%3Crect x='62' y='40' width='28' height='70'/%3E%3Crect x='68' y='28' width='16' height='82'/%3E%3Cpolygon points='70,28 76,6 82,28'/%3E%3Crect x='75' y='1' width='1.6' height='7'/%3E%3Crect x='104' y='34' width='20' height='76'/%3E%3Crect x='112.8' y='12' width='2.4' height='22'/%3E%3Crect x='132' y='50' width='42' height='60'/%3E%3Crect x='139' y='44' width='10' height='6'/%3E%3Crect x='155' y='44' width='10' height='6'/%3E%3Crect x='182' y='30' width='40' height='80'/%3E%3Crect x='192' y='20' width='20' height='10'/%3E%3Crect x='200.8' y='7' width='2.4' height='13'/%3E%3Crect x='230' y='44' width='44' height='66'/%3E%3Cpolygon points='230,44 252,25 274,44'/%3E%3Crect x='282' y='66' width='38' height='44'/%3E%3Crect x='299' y='58' width='2' height='8'/%3E%3Crect x='328' y='34' width='42' height='76'/%3E%3Crect x='336' y='22' width='26' height='12'/%3E%3Crect x='347.8' y='9' width='2.4' height='13'/%3E%3Crect x='378' y='52' width='40' height='58'/%3E%3Crect x='388' y='46' width='16' height='6'/%3E%3Crect x='426' y='40' width='34' height='70'/%3E%3Crect x='432' y='30' width='22' height='80'/%3E%3Cpolygon points='434,30 443,12 452,30'/%3E%3Crect x='442' y='8' width='1.6' height='5'/%3E%3Crect x='468' y='48' width='40' height='62'/%3E%3Crect x='478' y='42' width='20' height='6'/%3E%3Crect x='516' y='36' width='20' height='74'/%3E%3Crect x='524.8' y='15' width='2.4' height='21'/%3E%3Crect x='544' y='58' width='46' height='52'/%3E%3Crect x='565' y='50' width='2.4' height='8'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='110' viewBox='0 0 600 110'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='58' width='44' height='52'/%3E%3Crect x='9' y='52' width='15' height='6'/%3E%3Crect x='20' y='42' width='2.4' height='16'/%3E%3Crect x='56' y='54' width='40' height='56'/%3E%3Crect x='62' y='40' width='28' height='70'/%3E%3Crect x='68' y='28' width='16' height='82'/%3E%3Cpolygon points='70,28 76,6 82,28'/%3E%3Crect x='75' y='1' width='1.6' height='7'/%3E%3Crect x='104' y='34' width='20' height='76'/%3E%3Crect x='112.8' y='12' width='2.4' height='22'/%3E%3Crect x='132' y='50' width='42' height='60'/%3E%3Crect x='139' y='44' width='10' height='6'/%3E%3Crect x='155' y='44' width='10' height='6'/%3E%3Crect x='182' y='30' width='40' height='80'/%3E%3Crect x='192' y='20' width='20' height='10'/%3E%3Crect x='200.8' y='7' width='2.4' height='13'/%3E%3Crect x='230' y='44' width='44' height='66'/%3E%3Cpolygon points='230,44 252,25 274,44'/%3E%3Crect x='282' y='66' width='38' height='44'/%3E%3Crect x='299' y='58' width='2' height='8'/%3E%3Crect x='328' y='34' width='42' height='76'/%3E%3Crect x='336' y='22' width='26' height='12'/%3E%3Crect x='347.8' y='9' width='2.4' height='13'/%3E%3Crect x='378' y='52' width='40' height='58'/%3E%3Crect x='388' y='46' width='16' height='6'/%3E%3Crect x='426' y='40' width='34' height='70'/%3E%3Crect x='432' y='30' width='22' height='80'/%3E%3Cpolygon points='434,30 443,12 452,30'/%3E%3Crect x='442' y='8' width='1.6' height='5'/%3E%3Crect x='468' y='48' width='40' height='62'/%3E%3Crect x='478' y='42' width='20' height='6'/%3E%3Crect x='516' y='36' width='20' height='74'/%3E%3Crect x='524.8' y='15' width='2.4' height='21'/%3E%3Crect x='544' y='58' width='46' height='52'/%3E%3Crect x='565' y='50' width='2.4' height='8'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}

/* soft clouds drifting behind the skyline (matches the card's sky) */
.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute;
  height: auto;
  fill: var(--skyline);
  transition: fill .45s;
  will-change: transform;
}
.cloud.c1 { width: clamp(58px, 8.5vw, 92px); top: 5%;  inset-inline-start: 9%;  opacity: .9;  animation: cloud-drift-a 26s ease-in-out infinite; }
.cloud.c2 { width: clamp(46px, 6.5vw, 72px); top: 7%;  inset-inline-start: 52%; opacity: .72; animation: cloud-drift-b 33s ease-in-out infinite; }
.cloud.c3 { width: clamp(38px, 5.5vw, 58px); top: 2%;  inset-inline-start: 78%; opacity: .8;  animation: cloud-drift-a 30s ease-in-out infinite reverse; }
@keyframes cloud-drift-a { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@keyframes cloud-drift-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-30px); } }

/* ═══ DJELFA NEIGHBOURHOODS floating in the sky (desktop only) ═══ */
.hoods { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hood {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.7rem, 1.5dvh, .84rem);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 2px solid color-mix(in srgb, var(--line) 32%, transparent);
  border-radius: 999px;
  padding: 3px 11px 3px 7px;
  white-space: nowrap;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--hard) 26%, transparent);
  opacity: 0;
  transform: translateY(7px) scale(.94);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hood.show { opacity: 1; transform: none; }
.hood .hpin { width: 11px; height: 14px; flex-shrink: 0; }
.hood .hpin path { fill: var(--y1); }
.hood .hpin circle { fill: var(--card); }
@media (max-width: 980px) { .hoods { display: none; } }

/* company credit link in the footer strip */
.brandlink {
  color: var(--y1);
  font-weight: 700;
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 6px;
  border-bottom: 2px solid color-mix(in srgb, var(--y1) 55%, transparent);
  transition: background .2s, color .2s, border-color .2s;
}
.brandlink:hover,
.brandlink:focus-visible {
  background: var(--y1);
  color: var(--ink);
  border-color: var(--y1);
  outline: none;
}

.road-line {
  position: absolute;
  inset-inline: 0;
  bottom: 10px;
  height: 5px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--road) 0 34px, transparent 34px 60px);
  animation: road-scroll 1s linear infinite;
}
@keyframes road-scroll { to { background-position-x: -60px; } }

.rider-wrap {
  position: absolute;
  bottom: 6px;
  width: clamp(200px, 30dvh, 320px);
  inset-inline-start: 0;
  animation: drive-by 16s linear infinite;
  pointer-events: auto;
  cursor: pointer;
}
@keyframes drive-by {
  from { transform: translateX(-40vw); }
  to { transform: translateX(115vw); }
}
/* the scooter drives L→R in both languages: mirroring the SVG would
   mangle the box logo and bubble text, and motion is decorative */
[dir="rtl"] .rider-wrap { inset-inline-start: auto; left: 0; }

.rider-svg { width: 100%; height: auto; overflow: visible; }

.scooter-g { animation: scooter-bob 1.15s ease-in-out infinite; }
@keyframes scooter-bob {
  0%, 100% { transform: translate(-140px, -160px) translateY(0); }
  50% { transform: translate(-140px, -160px) translateY(-5px); }
}
.wheel .spokes {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheel-spin .5s linear infinite;
}
@keyframes wheel-spin { to { transform: rotate(360deg); } }

.speed-lines .sl { stroke-dasharray: 60 200; animation: speed-zip 1s linear infinite; }
.speed-lines .s2 { animation-delay: .25s; animation-duration: .9s; }
.speed-lines .s3 { animation-delay: .5s; }
.speed-lines .s4 { animation-delay: .12s; animation-duration: 1.15s; }
/* streaks travel right → left (backwards past the moving scooter) */
@keyframes speed-zip {
  from { stroke-dashoffset: -160; opacity: 0; }
  30% { opacity: 1; }
  to { stroke-dashoffset: 130; opacity: 0; }
}
.puff { animation: puff-out 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.puff.p2 { animation-delay: .45s; }
.puff.p3 { animation-delay: .9s; }
@keyframes puff-out {
  from { transform: translateX(0) scale(.4); opacity: .9; }
  to { transform: translateX(-46px) scale(1.6); opacity: 0; }
}
.beam { opacity: 0; transition: opacity .5s; }
[data-theme="dark"] .beam { opacity: .9; }

/* speech bubble: pops periodically + on click */
.bubble {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 40% 100%;
  animation: bubble-pop 7s var(--ease-spring) infinite;
}
.rider-wrap.honk .bubble { animation: bubble-honk .9s var(--ease-spring); }
@keyframes bubble-pop {
  0%, 8% { opacity: 0; transform: scale(.3); }
  12%, 30% { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes bubble-honk {
  0% { opacity: 0; transform: scale(.3); }
  25%, 80% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(.3); }
}
.bubble-bg { fill: var(--card); stroke: var(--line); stroke-width: 3; }
.bubble-txt { font-family: var(--font-display); font-weight: 800; font-size: 23px; fill: var(--y1); }

/* ═══ TICKER ═══ */
/* The whole marquee is forced LTR (container + track) so the wide track always
   anchors left and overflows right — identical geometry in AR & EN, which keeps
   the −50% loop seamless. Each sequence keeps its own text direction (see JS). */
.ticker {
  background: var(--y1);
  color: var(--ink);
  overflow: hidden;
  padding-block: clamp(7px, 1.3dvh, 11px);
  border-block: 3px solid var(--line);
  z-index: 6;
  direction: ltr;
}
.ticker-track { display: flex; width: max-content; direction: ltr; animation: ticker-scroll var(--ticker-dur, 22s) linear infinite; will-change: transform; }
/* Arabic scrolls the other way (L→R); seamless now that the track anchors left */
[dir="rtl"] .ticker-track { animation-direction: reverse; }
.ticker-seq {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.82rem, 1.9dvh, 1rem);
  white-space: nowrap;
  padding-inline-end: 12px;
}
.ticker-seq b { margin-inline: 13px; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ═══ CONTACT STRIP ═══ */
.strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* left · centred social · right */
  align-items: center;
  gap: clamp(8px, 2vw, 22px);
  padding: clamp(8px, 1.6dvh, 14px) clamp(16px, 3vw, 40px);
  font-size: clamp(.72rem, 1.7dvh, .88rem);
  color: var(--muted);
  z-index: 6;
  background: var(--bg-2);
  transition: background .45s;
}
.strip-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vw, 18px);
  justify-self: start;
  min-width: 0;
}
.strip-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--y1);
}
.strip-links { display: flex; align-items: center; gap: 10px; }
.strip-links a { font-weight: 500; transition: color .2s; }
.strip-links a:hover { color: var(--y1); }
.dot-sep { color: var(--y1); }
.strip-social { display: flex; gap: 8px; justify-self: center; }
.strip-copy { justify-self: end; }
.strip-social a {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  color: var(--muted);
  transition: all .2s var(--ease-spring);
  background: var(--card);
}
.strip-social a:hover {
  background: var(--y1);
  color: var(--ink);
  transform: translateY(-3px) rotate(-8deg);
}
.strip-copy { white-space: nowrap; }

/* ═══ FLOATING BUSINESS CARD (clickable → downloads) ═══ */
.bc-float {
  position: absolute;
  z-index: 6;
  inset-inline-end: clamp(20px, 5vw, 82px);
  bottom: clamp(140px, 27dvh, 226px);
  width: clamp(150px, 17vw, 214px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transform: rotate(-4deg);
  transition: transform .28s var(--ease-spring);
  cursor: pointer;
}
.bc-float:hover,
.bc-float:focus-visible { transform: rotate(-1deg) translateY(-5px) scale(1.05); }
.bc-float:focus-visible { outline: 3px solid var(--y1); outline-offset: 5px; border-radius: 18px; }

.bc-media {
  position: relative;
  width: 100%;
  border: 3px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 5px 5px 0 var(--hard);
  line-height: 0;
  animation: bc-bob 4.6s ease-in-out infinite alternate;
}
[data-theme="dark"] .bc-media { box-shadow: 5px 5px 0 rgba(246, 168, 0, .42); }
@keyframes bc-bob {
  from { transform: translateY(-5px); }
  to { transform: translateY(5px); }
}
.bc-media img { width: 100%; height: auto; display: block; }
.bc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity .25s;
}
.bc-float:hover .bc-media::after,
.bc-float:focus-visible .bc-media::after { opacity: .16; }

/* download badge revealed on hover / focus */
.bc-dl {
  position: absolute;
  inset-block-end: 9px;
  inset-inline-end: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--y1);
  color: var(--ink);
  border: 2.5px solid var(--line);
  box-shadow: 2px 2px 0 var(--ink);
  opacity: 0;
  transform: translateY(8px) scale(.75);
  transition: opacity .25s, transform .25s var(--ease-spring);
}
.bc-float:hover .bc-dl,
.bc-float:focus-visible .bc-dl { opacity: 1; transform: none; }
.bc-float:hover .bc-dl svg { animation: bc-dl-bounce .6s var(--ease-spring); }
@keyframes bc-dl-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(3px); }
}

.bc-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.66rem, 1.5dvh, .8rem);
  background: var(--y1);
  color: var(--ink);
  border: 2.5px solid var(--line);
  border-radius: 999px;
  padding: 3px 13px;
  box-shadow: 3px 3px 0 var(--hard);
  white-space: nowrap;
  transform: rotate(2deg);
}
[data-theme="dark"] .bc-tag { box-shadow: 3px 3px 0 rgba(246, 168, 0, .35); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 980px) {
  .playfield { grid-template-columns: 1fr; }
  .fun { position: absolute; inset: 0; pointer-events: none; }
  .stk-pin, .stk-parcel, .sky-orb { display: none; }
  /* pinned to the viewport (the playfield overflows on mobile) — top-right, below the bar */
  .stk-orb {
    position: fixed;
    top: clamp(74px, 11dvh, 100px);
    inset-inline-end: 8px;
    inset-inline-start: auto;
    width: clamp(60px, 16vw, 82px);
  }
  .bar-tag { display: none; }
  .copy { max-width: 100%; }
  /* footer stacks & centres; slogan drops so the website link fits at the bottom */
  .strip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(6px, 1.3dvh, 12px); }
  .strip-slogan { display: none; }
  .strip-left { justify-content: center; }
  .strip-social { justify-self: auto; }
  .strip-copy { display: block; order: 9; }                     /* website link → bottom row */
  /* single-column: the playfield can overflow (nowrap headline), so pin the
     card to the viewport. Tuck it into the empty space to the (logical) right
     of the WhatsApp button, below the trust seal — clears both. */
  .bc-float {
    position: fixed;
    inset-inline-end: 10px;
    inset-inline-start: auto;
    bottom: auto;
    /* lowered to straddle both rows — the WhatsApp button and the stat circles */
    top: clamp(268px, 37dvh, 336px);
    width: clamp(100px, 26vw, 128px);
  }
  /* centre the service chips in the stacked layout — cap the row to the
     viewport (the copy box bleeds wider for the poster headline) so they
     centre on screen instead of drifting off the right edge */
  .chips {
    justify-content: center;
    max-width: calc(100vw - 2 * clamp(16px, 3.5vw, 52px));
  }
}

@media (max-width: 560px) {
  .phone-chip { padding-inline: 9px; font-size: .78rem; }
  .mega { font-size: clamp(1.5rem, 5.6dvh, 2.2rem); }
  .stat-stickers { gap: 7px; }
  .chips { gap: 7px; }
  .roadway { height: clamp(100px, 20dvh, 160px); }
  .rider-wrap { width: clamp(170px, 26dvh, 240px); }
  .bc-float { gap: 6px; }
  .bc-tag { font-size: .62rem; padding: 2px 10px; }
}

/* very narrow phones: trim the card so it stays clear of the WhatsApp button */
@media (max-width: 384px) {
  .bc-float { width: clamp(84px, 23vw, 94px); }
}

/* very short screens: allow scroll as a graceful fallback */
@media (max-height: 480px) {
  html, body { overflow: auto; }
  .stage { height: auto; min-height: 100dvh; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
  .rider-wrap { animation: none; inset-inline-start: 12%; }
  .bubble { opacity: 1; animation: none; }
}