/* ============================================================
   منجود (Mnjood) — Navigation layer
   Assets (Hero.png / Logo1.png) are the exact visual source
   of truth and are used unmodified.
   ============================================================ */

/* Demo family ships Thin/Regular/Bold/Black — no Medium or
   ExtraBold. The Bold file is mapped to the 600-900 range so
   requests for ExtraBold (800) resolve to it without synthesis.
   Drop a licensed MadaniArabic-ExtraBold.woff2 here and map it
   to 800 to get the true weight. */
@font-face {
  font-family: 'Madani Arabic';
  src: url('../assets/fonts/MadaniArabic-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Madani Arabic';
  src: url('../assets/fonts/MadaniArabic-Regular.woff2') format('woff2');
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #171110;                 /* navigation text */
  --mnjood-orange: #F59B1D;       /* sampled from the brand assets */
  --mnjood-orange-hover: #C87F14; /* asset orange darkened for text hover */
  --mnjood-red-hero: #850512;     /* flat red sampled from Hero bottom edge */
  --capsule-bg: #FFFFFF;
  /* one subtle shadow, tinted to the Hero red */
  --capsule-shadow:
    0 10px 28px rgba(94, 2, 13, 0.14),
    0 2px 8px rgba(94, 2, 13, 0.05);
  --font-madani: 'Madani Arabic', 'Madani', 'Segoe UI', Tahoma, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-madani);
  background-color: var(--mnjood-red-hero);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--mnjood-orange);
  color: var(--ink);
}

/* ------------------------------------------------------------
   Hero — provided artwork, full-width, untouched.
   Desktop renders the artwork at natural width so every
   decorative element stays visible; the flat brand red below
   is sampled from the image itself. Phones get a full-bleed
   cover so the Hero stays dominant.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  background-color: var(--mnjood-red-hero);
  /* Hero-v2: the artwork's bottom edge fades into the flat red below (no seam). */
  background-image: url('../Hero-v2.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

@media (max-width: 720px) {
  .hero {
    /* Phones: the cover crop puts the middle arm behind the headline, so it is left out here. */
    background-image: url('../Hero-mobile.png?v=2');
    background-size: cover;
  }
}

/* ------------------------------------------------------------
   Header — floating capsule at the top of the screen on all
   sizes. The header is a child of .hero, so it paints above
   the Hero's own red background with no z-index.
   ------------------------------------------------------------ */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 24px;
  display: flex;
  justify-content: center;
  padding-inline: 20px;
}

/* Mobile-first: white pill bar with centered logo + hamburger.
   RTL: the first grid column sits at the right edge. */
.nav-capsule {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  grid-template-areas:
    'toggle logo spacer'
    'menu-a menu-a menu-a'
    'menu-b menu-b menu-b';
  grid-template-rows: 64px auto auto;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 0 18px;
  background: var(--capsule-bg);
  border-radius: 999px;
  box-shadow: var(--capsule-shadow);
}

/* ---- Logo: mathematically centered via the 44px / 1fr / 44px grid ---- */
.nav-logo {
  grid-area: logo;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-logo img {
  height: 52px;
  width: auto; /* original proportions kept */
  border-radius: 50%; /* square icon shown as a circle */
}

/* ---- Links ---- */
.nav-links {
  display: none; /* revealed inside the expanded capsule on mobile */
  list-style: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 12px;
}

.nav-links--start {
  grid-area: menu-a;
}

.nav-links--end {
  grid-area: menu-b;
}

.nav-links a {
  display: inline-block;
  padding: 10px 14px;
  font-size: 17px;
  font-weight: 800;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  transition: color 200ms ease;
}

.nav-links a:hover {
  color: var(--mnjood-orange-hover);
}

/* ---- Hamburger ---- */
.nav-toggle {
  grid-area: toggle;
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle:hover span {
  background: var(--mnjood-orange-hover);
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Expanded mobile capsule: same white pill, grown downward ---- */
.nav-capsule.is-open {
  border-radius: 28px;
  padding-bottom: 20px;
}

.nav-capsule.is-open .nav-links {
  display: flex;
}

.nav-capsule.is-open .nav-links li {
  animation: nav-link-in 200ms ease both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

@keyframes nav-link-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------
   Tablet & desktop: the full floating capsule.
   Both link groups get flex: 1 1 0, so they occupy equal width
   and the logo stays in the exact visual center of the capsule
   regardless of how wide either set of labels is. Each group
   packs toward the logo; the remaining space rests at the
   capsule's outer edges.
   ------------------------------------------------------------ */
@media (min-width: 721px) {
  .nav-toggle {
    display: none;
  }

  .nav-capsule {
    display: flex;
    align-items: center;
    height: 80px;
    max-width: none;
    width: calc(100% - 48px);
    padding: 0 26px;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 0;
    gap: 20px;
    min-width: 0;
    padding-top: 0;
  }

  /* RTL flex: flex-end = physical left, flex-start = physical right */
  .nav-links--start {
    justify-content: flex-end;
  }

  .nav-links--end {
    justify-content: flex-start;
  }

  .nav-capsule.is-open .nav-links li {
    animation: none;
  }

  .nav-logo {
    flex: 0 0 auto;
    margin-inline: 34px; /* 34-42px group-to-logo spacing */
  }

  .nav-logo img {
    height: 68px;
  }

  .nav-links a {
    padding: 8px 0;
    font-size: 16px;
  }
}


@media (min-width: 1025px) {
  /* Capsule hugs its content: groups + 40px logo gaps + padding */
  .nav-capsule {
    height: 86px; /* 82-88px spec */
    width: fit-content;
    padding: 0 32px;
  }

  .nav-links {
    flex: 0 0 auto; /* groups size to their links, no stretching */
    gap: 26px; /* 24-28px within each group */
  }

  .nav-logo {
    margin-inline: 40px; /* 40px between the logo and each group */
  }

  .nav-logo img {
    height: 76px; /* 72-82px spec */
  }
}

/* ------------------------------------------------------------
   Accessibility & motion
   ------------------------------------------------------------ */
.nav-links a:focus-visible,
.nav-toggle:focus-visible,
.nav-logo:focus-visible {
  outline: 2px solid var(--mnjood-orange-hover);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nav-links a,
  .nav-toggle,
  .nav-toggle span,
  .nav-capsule {
    transition: none;
  }

  .nav-capsule.is-open .nav-links li {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Hero content — Arabic copy on the right, uploaded visual on
   the left. White text sits directly on the red background.
   ------------------------------------------------------------ */
.hero__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: 1280px;
  margin-inline: auto;
  padding: 150px 48px 72px; /* top clears the floating capsule */
}

.hero__headline {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
}

.hero__description {
  margin-top: 20px;
  max-width: 540px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #FFFFFF;
}

.hero__download-title {
  margin-top: 30px;
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
  color: #FFFFFF;
}

.hero__badges {
  --badge-h: 50px; /* visible button height, both badges */
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__badge {
  line-height: 0;
  transition: opacity 200ms ease;
}

.hero__badge:hover {
  opacity: 0.85;
}

.hero__badge img {
  display: block;
  height: var(--badge-h);
  width: auto; /* original badge aspect ratios kept */
}

/* Google's official badge PNG carries transparent padding
   around the button; 0.672 is its visible-height fraction.
   Scaling the canvas by 1/0.672 makes both badges render the
   same visible 50px-tall button. */
.hero__badge--play img {
  height: calc(var(--badge-h) / 0.672);
}

.hero__badge:focus-visible {
  outline: 2px solid var(--mnjood-orange-hover);
  outline-offset: 3px;
  border-radius: 6px;
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__visual img {
  display: block;
  width: min(100%, 580px);
  height: auto; /* original asset proportions kept */
  /* fade the bottom edge into the Hero red so the cut line never shows */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    padding: 140px 32px 64px;
  }

  .hero__headline {
    font-size: 44px;
  }

  .hero__description {
    font-size: 17px;
    line-height: 28px;
    margin-top: 18px;
  }

  .hero__download-title {
    font-size: 21px;
    margin-top: 26px;
  }

  .hero__badges {
    --badge-h: 46px;
    margin-top: 12px;
  }

  .hero__visual img {
    width: min(100%, 460px);
  }
}

/* Mobile: stacked, centered, image last */
@media (max-width: 720px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 120px 24px 56px;
    text-align: center;
  }

  .hero__headline {
    font-size: 38px;
  }

  .hero__description {
    margin-inline: auto;
    margin-top: 16px;
  }

  .hero__download-title {
    margin-top: 26px;
  }

  .hero__badges {
    --badge-h: 46px;
    justify-content: center;
    margin-top: 12px;
  }

  .hero__visual img {
    width: min(100%, 420px);
    margin-inline: auto;
  }
}

@media (max-width: 400px) {
  .hero__headline {
    font-size: 32px;
  }

  .hero__badges {
    --badge-h: 42px;
  }
}


/* ------------------------------------------------------------
   وش نقدم — services section (white, expanding card accordion)
   ------------------------------------------------------------ */
.services {
  --sv-orange: #FF9E1B;
  --sv-red: #DA281C;
  --sv-ink: #241D19;
  --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: #FFFFFF;
  padding: 120px 72px;
}

.services__inner {
  max-width: 1240px;
  margin-inline: auto;
  text-align: center;
}

/* 1. playful shape-built smiley: red face, orange features */
.services-emoji {
  display: inline-block;
  opacity: 0;
  transform: translateY(15px) scale(0.85);
}

.in-view .services-emoji {
  animation: emoji-in 600ms cubic-bezier(0.22, 0.61, 0.21, 1) 100ms both;
}

@keyframes emoji-in {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.smiley {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sv-red);
}

.smiley__eye {
  position: absolute;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sv-orange);
}

.smiley__eye--r {
  right: 13px;
}

.smiley__eye--l {
  left: 13px;
}

.smiley__mouth {
  position: absolute;
  bottom: 11px;
  left: 50%;
  width: 22px;
  height: 11px;
  margin-left: -11px;
  background: var(--sv-orange);
  border-radius: 0 0 12px 12px;
  transform-origin: 50% 100%;
}

/* idle expression loop: 🙂 squint+😆 bounce 🙂 */
.in-view .smiley {
  animation: smiley-bounce 3s ease-in-out 1s infinite;
}

.in-view .smiley__eye {
  animation: smiley-eyes 3s ease-in-out 1s infinite;
}

.in-view .smiley__mouth {
  animation: smiley-mouth 3s ease-in-out 1s infinite;
}

@keyframes smiley-bounce {
  0%,
  52%,
  100% {
    transform: translateY(0);
  }
  58% {
    transform: translateY(-5px);
  }
  64% {
    transform: translateY(0);
  }
  69% {
    transform: translateY(-2px);
  }
  74%,
  96% {
    transform: translateY(0);
  }
}

@keyframes smiley-eyes {
  0%,
  34%,
  72%,
  100% {
    transform: scaleY(1);
  }
  42%,
  58% {
    transform: scaleY(0.3);
  }
  65% {
    transform: scaleY(0.75);
  }
}

@keyframes smiley-mouth {
  0%,
  34%,
  74%,
  100% {
    height: 11px;
    border-radius: 0 0 12px 12px;
    transform: scale(1);
  }
  42%,
  62% {
    height: 17px;
    border-radius: 5px 5px 14px 14px;
    transform: scale(1.15);
  }
}

/* 2. main heading — word-group reveal (word-spacing instead of
   letter-spacing keeps Arabic glyph connections intact) */
.services-heading {
  margin-top: 26px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sv-ink);
  word-spacing: 0.3em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 900ms cubic-bezier(0.22, 0.61, 0.21, 1) 150ms,
    transform 900ms cubic-bezier(0.22, 0.61, 0.21, 1) 150ms,
    word-spacing 1000ms cubic-bezier(0.22, 0.61, 0.21, 1) 150ms;
}

.in-view .services-heading {
  opacity: 1;
  transform: none;
  word-spacing: normal;
}

.services-heading .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.21, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.21, 1);
  transition-delay: calc(180ms + var(--i, 0) * 90ms);
}

.in-view .services-heading .w {
  opacity: 1;
  transform: none;
}

/* 3. expanding accordion — one row, visual order left→right */
.services-grid {
  margin-top: 56px;
  display: flex;
  gap: 14px;
  direction: ltr;
}

.card {
  direction: rtl;
  background: var(--bg);
  border-radius: 26px;
  height: 420px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: flex 650ms var(--sv-ease);
}

.in-view .card {
  animation: card-in 800ms cubic-bezier(0.22, 0.61, 0.21, 1) var(--d, 0s) backwards;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: var(--enter, translateY(30px));
  }
}

@media (hover: hover) and (min-width: 721px) {
  .services-grid:hover .card {
    flex-grow: 0.7;
  }

  .services-grid .card:hover {
    flex-grow: 4;
  }
}

/* Category image: single contained composition. It must stay
   completely static on hover/tap — the card itself may expand
   via flex-grow, but the image never zooms, crops, slices,
   blurs or moves. */
.card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.card__base {
  position: absolute;
  inset: 20px 14px 4px;
  object-fit: contain;
  transition: transform 700ms var(--sv-ease);
}

/* hardening guard: nothing may ever transform the image,
   even if another/stale rule tries to */
.card:hover .card__base,
.card.is-active .card__base {
  transform: none;
}

.card__title {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  font-size: 30px;
  font-weight: 800;
  color: #FFFFFF;
}

/* Tablet: same one-row accordion, slightly smaller */
@media (min-width: 721px) and (max-width: 1024px) {
  .services {
    padding: 100px 40px;
  }

  .services-heading {
    font-size: 46px;
  }

  .card {
    height: 380px;
  }

  .card__title {
    height: 84px;
    font-size: 26px;
  }
}

/* Mobile: horizontal scroll-snap row, tap to expand */
@media (max-width: 720px) {
  .services {
    padding: 90px 22px;
  }

  .services-heading {
    margin-top: 20px;
    font-size: 40px;
  }

  .services-grid {
    margin-top: 44px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  .card {
    flex: 0 0 66%;
    height: 360px;
    scroll-snap-align: center;
  }

  .services-grid.has-active .card {
    flex-basis: 46%;
  }

  .services-grid.has-active .card.is-active {
    flex-basis: 84%;
  }

  /* tap-active keeps the same static-image rule as hover:
     only the card width expands, images never move */

  .card__title {
    height: 76px;
    font-size: 24px;
  }
}

/* Motion performance & accessibility */
@media (prefers-reduced-motion: reduce) {
  .services-emoji,
  .services-heading,
  .services-heading .w {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
    animation: none !important;
  }

  .in-view .smiley,
  .in-view .smiley__eye,
  .in-view .smiley__mouth,
  .in-view .card,
  .card {
    animation: none !important;
  }

  .card,
  .card__base {
    transition: none !important;
  }
}


/* ------------------------------------------------------------
   وش يميز منجود — comparison section (بدون vs مع)
   ------------------------------------------------------------ */
.compare {
  --sv-orange: #FF9E1B;
  --sv-red: #DA281C;
  --sv-ink: #241D19;
  --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: #FFFFFF;
  padding: 120px 72px;
}

.compare__inner {
  max-width: 1240px;
  margin-inline: auto;
  text-align: center;
}

/* smiley above this section's heading — same character as the
   services section, scoped here so it always plays */
.compare.in-view .services-emoji {
  animation: emoji-in 600ms cubic-bezier(0.22, 0.61, 0.21, 1) 100ms both;
}

.compare.in-view .smiley {
  animation: smiley-bounce 3s ease-in-out 1s infinite;
}

.compare.in-view .smiley__eye {
  animation: smiley-eyes 3s ease-in-out 1s infinite;
}

.compare.in-view .smiley__mouth {
  animation: smiley-mouth 3s ease-in-out 1s infinite;
}

/* stage: two sides + organic divider + rider */
.compare-stage {
  position: relative;
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.compare-side {
  position: relative;
  border-radius: 36px;
  padding: 46px 40px 52px;
  min-height: 680px;
  text-align: right;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity 700ms var(--sv-ease) 100ms,
    transform 700ms var(--sv-ease) 100ms;
}

.compare.in-view .compare-side {
  opacity: 1;
  transform: none;
}

/* RTL grid: first column is the RIGHT side */
.compare-side--with {
  background: #DA281C;
  padding-left: 150px; /* keep cards clear of the centered rider */
}

.compare-side--without {
  background: #FF9E1B;
  padding-right: 150px;
}

.compare-side__title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
}

.compare-side--without .compare-side__title {
  color: #241D19;
}

.compare-cards {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* organic white divider between the sides */
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 170px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 900ms var(--sv-ease) 350ms;
}

.compare-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

.compare.in-view .compare-divider {
  clip-path: inset(0 0 0 0);
}

/* central rider: anchored to the BOTTOM CENTER of the stage,
   slightly overlapping the bottom edge, never cropped
   (no overflow:hidden anywhere in the parent chain) */
.compare-rider {
  position: absolute;
  left: 50%;
  bottom: -30px;
  display: block;
  width: 300px;
  transform: translate(-50%, 40px);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition:
    opacity 800ms var(--sv-ease) 500ms,
    transform 800ms var(--sv-ease) 500ms;
}

.compare-rider__img {
  display: block;
  width: 100%;
  height: auto;
  /* dissolve the hard cut at the bottom into transparency */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 96%);
}

/* blurred low-opacity tail continuing the silhouette,
   so the bottom edge reads soft instead of cut */
.compare-rider__blur {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: blur(7px);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.9) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.9) 88%, transparent 100%);
}

.compare.in-view .compare-rider {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: rider-float 3.5s ease-in-out 1.7s infinite;
}

@keyframes rider-float {
  0%,
  100% {
    transform: translate(-50%, -4px);
  }
  50% {
    transform: translate(-50%, 0);
  }
}

/* decorative hand-drawn strokes near the center */
.compare-accent {
  position: absolute;
  z-index: 4;
  width: 46px;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 500ms var(--sv-ease) 900ms,
    transform 500ms var(--sv-ease) 900ms;
}

.compare-accent svg {
  width: 100%;
  height: auto;
  display: block;
}

.compare.in-view .compare-accent {
  opacity: 0.9;
  transform: scale(1);
}

.compare-accent--1 {
  top: 15%;
  left: calc(50% - 200px);
  color: #FFFFFF;
}

.compare-accent--2 {
  bottom: 30%;
  left: calc(50% + 150px);
  color: #FFFFFF;
}

.compare-accent--3 {
  top: 26%;
  left: calc(50% + 168px);
  color: #FF9E1B;
}

/* feature cards */
.f-card {
  position: relative;
  z-index: 3;
  background: #FFFFFF;
  border-radius: 22px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: right;
  box-shadow: 0 8px 20px rgba(36, 29, 25, 0.1);
  opacity: 1;
  transform: none;
  transition: transform 350ms ease-out;
}

.compare.in-view .f-card {
  animation: fcard-in 700ms var(--sv-ease) var(--d, 0s) backwards;
}

@keyframes fcard-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
}

.f-card:hover {
  transform: translateY(-4px);
}

/* left-side cards: icon on the left, text still RTL */
.f-card--flip {
  flex-direction: row-reverse;
}

.f-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.f-card__body h4 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: #241D19;
}

.f-card__body p {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #5C5148;
}

/* circular icon container */
.f-card__icon {
  position: relative;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #FFF3E4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon, #DA281C);
  opacity: 1;
  transform: scale(1);
  transition: transform 300ms ease-out;
}

.f-card__icon > svg {
  width: 30px;
  height: 30px;
}

.compare.in-view .f-card__icon {
  animation: icon-in 500ms var(--sv-ease) calc(var(--d, 0s) + 150ms) backwards;
}

@keyframes icon-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

.f-card:hover .f-card__icon {
  transform: scale(1.05);
}

/* per-icon idle motion, only while the section is visible */
.compare.in-view .f-card__icon--rocket > svg {
  animation: icon-rocket 2.6s ease-in-out infinite;
}

.compare.in-view .f-card__icon--bag > svg {
  animation: icon-bag 3.2s ease-in-out infinite;
}

.compare.in-view .f-card__icon--smile > svg {
  animation: icon-smile 3s ease-in-out infinite;
}

.compare.in-view .f-card__icon--car > svg {
  animation: icon-car 3s ease-in-out infinite;
}

.compare.in-view .f-card__icon--store > svg {
  animation: icon-store 3.4s ease-in-out infinite;
}

.compare.in-view .f-card__icon--sad > svg {
  animation: icon-sad 3s ease-in-out infinite;
}

.compare.in-view .f-card__clock {
  animation: icon-clock 4s ease-in-out infinite;
}

@keyframes icon-rocket {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes icon-bag {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

@keyframes icon-smile {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.07);
  }
}

@keyframes icon-car {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

@keyframes icon-store {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

@keyframes icon-sad {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(2px) rotate(-2deg);
  }
}

@keyframes icon-clock {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

/* rocket launch trail */
.f-card__trail {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 4px;
  height: 12px;
  margin-left: -2px;
  border-radius: 999px;
  background: var(--icon, #DA281C);
  opacity: 0;
  transform: scaleY(0.3);
}

.compare.in-view .f-card__trail {
  animation: trail-pulse 2.6s ease-in-out infinite;
}

@keyframes trail-pulse {
  0%,
  35%,
  100% {
    opacity: 0;
    transform: scaleY(0.3);
  }
  50% {
    opacity: 0.7;
    transform: scaleY(1);
  }
}

/* clock badge on the car icon */
.f-card__clock {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #F3E4D2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #DA281C;
  transform-origin: 50% 20%;
}

.f-card__clock svg {
  width: 15px;
  height: 15px;
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .compare {
    padding: 100px 40px;
  }

  .compare-side {
    padding: 36px 28px 40px;
    min-height: 600px;
  }

  .compare-side--with {
    padding-left: 120px;
  }

  .compare-side--without {
    padding-right: 120px;
  }

  .compare-side__title {
    font-size: 36px;
  }

  .compare-rider {
    width: 240px;
    bottom: -24px;
  }

  .compare-accent--1 {
    left: calc(50% - 160px);
  }

  .compare-accent--2 {
    left: calc(50% + 110px);
  }

  .compare-accent--3 {
    left: calc(50% + 125px);
  }

  .f-card {
    padding: 20px;
    gap: 14px;
  }

  .f-card__body h4 {
    font-size: 17px;
  }

  .f-card__body p {
    font-size: 14px;
  }
}

/* Mobile: stacked — مع, rider, بدون */
@media (max-width: 720px) {
  .compare {
    padding: 90px 22px;
  }

  .compare-stage {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 48px;
  }

  .compare-side {
    min-height: 0;
    padding: 34px 24px 38px;
  }

  .compare-side--with {
    order: 1;
    padding-left: 24px;
  }

  .compare-rider {
    order: 2;
  }

  .compare-side--without {
    order: 3;
    padding-right: 24px;
  }

  .compare-divider {
    display: none;
  }

  .compare-rider {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: min(64%, 240px);
    margin: -140px auto -140px;
    transform: none;
    opacity: 0;
    transition: opacity 800ms var(--sv-ease) 500ms;
  }

  .compare.in-view .compare-rider {
    transform: none;
    animation: rider-float-mobile 3.5s ease-in-out 1.7s infinite;
  }

  @keyframes rider-float-mobile {
    0%,
    100% {
      transform: translateY(-4px);
    }
    50% {
      transform: translateY(0);
    }
  }

  .compare-accent {
    display: none;
  }

  .compare-side__title {
    font-size: 32px;
    text-align: center;
  }

  .compare-cards {
    margin-top: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-side,
  .compare-divider,
  .compare-rider,
  .compare-accent {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none;
    animation: none !important;
  }

  .compare.in-view .f-card,
  .compare.in-view .f-card__icon,
  .compare.in-view .f-card__icon > svg,
  .compare.in-view .f-card__clock,
  .compare.in-view .f-card__trail {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   منجود مارك — animated product stream showcase
   ------------------------------------------------------------ */
.mart {
  --sv-orange: #FF9E1B;
  --sv-red: #DA281C;
  --sv-ink: #241D19;
  --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  background: #FFF4E5;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 640px) minmax(0, 320px);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}

/* product column: fade mask on the unrotated wrapper so the
   soft top/bottom dissolve stays vertical */
.mart-col {
  position: relative;
  height: 640px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

/* angled stream */
.mart-angled {
  position: absolute;
  inset: -70px -40px;
}

.mart-angled--left {
  transform: rotate(-10deg);
}

.mart-angled--right {
  transform: rotate(10deg);
}

/* seamless vertical marquee: two identical sets,
   track translates exactly one set height */
.mart-track {
  display: flex;
  flex-direction: column;
  animation-duration: 32s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.mart-track--up {
  animation-name: mart-up;
}

.mart-track--down {
  animation-name: mart-down;
}

@keyframes mart-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes mart-down {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}

.mart-set {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  width: 240px;
  margin-inline: auto;
}

.mart-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(36, 29, 25, 0.08);
  padding: 12px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mart-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* full product preserved, never cropped */
}

/* center content */
.mart-center {
  text-align: center;
  padding-inline: 8px;
}

.mart.in-view .services-emoji {
  animation: emoji-in 600ms cubic-bezier(0.22, 0.61, 0.21, 1) 100ms both;
}

.mart.in-view .smiley {
  animation: smiley-bounce 3s ease-in-out 1s infinite;
}

.mart.in-view .smiley__eye {
  animation: smiley-eyes 3s ease-in-out 1s infinite;
}

.mart.in-view .smiley__mouth {
  animation: smiley-mouth 3s ease-in-out 1s infinite;
}

.mart-heading {
  margin-top: 24px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  color: #241D19;
}

.mart-desc {
  margin: 20px auto 0;
  max-width: 520px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #241D19;
}

.mart-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  height: 54px;
  padding-inline: 38px;
  border-radius: 999px;
  background: #DA281C;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 200ms ease,
    background-color 200ms ease;
}

.mart-cta:hover {
  background: #FF9E1B;
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.02);
}

.mart-cta:focus-visible {
  outline: 2px solid var(--sv-orange);
  outline-offset: 3px;
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .mart {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 220px);
    gap: 16px;
  }

  .mart-set {
    width: 180px;
    gap: 12px;
    padding-bottom: 12px;
  }

  .mart-heading {
    font-size: 42px;
  }
}

/* Mobile: narrow edge columns, center always readable */
@media (max-width: 720px) {
  .mart {
    grid-template-columns: 84px minmax(0, 1fr) 84px;
    gap: 10px;
    padding: 64px 10px;
  }

  .mart-col {
    height: 520px;
  }

  .mart-set {
    width: 78px;
    gap: 10px;
    padding-bottom: 10px;
  }

  .mart-card {
    border-radius: 14px;
    padding: 7px;
  }

  .mart-heading {
    margin-top: 18px;
    font-size: 32px;
  }

  .mart-desc {
    font-size: 15px;
    margin-top: 14px;
  }

  .mart-cta {
    margin-top: 22px;
    height: 48px;
    padding-inline: 30px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mart-track {
    animation: none !important;
  }

  .mart.in-view .services-emoji,
  .mart.in-view .smiley,
  .mart.in-view .smiley__eye,
  .mart.in-view .smiley__mouth {
    animation: none !important;
  }

  .mart .services-emoji {
    opacity: 1;
    transform: none;
  }

  .mart-cta {
    transition: none;
  }
}

/* ------------------------------------------------------------
   محفظة منجود — wallet section with card-emerge loop
   ------------------------------------------------------------ */
.wallet {
  background: #FDE4E2;
  padding: 70px 72px;
  overflow: hidden;
}

.wallet__inner {
  max-width: 1240px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

.wallet-heading {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.15;
  color: #241D19;
}

.wallet-desc {
  margin-top: 20px;
  max-width: 500px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #241D19;
}

/* composition stage: assets are pre-angled, only depth moves.
   Both keep their original aspect ratios — width constrained,
   height auto, transforms uniform. */
.wallet-stage {
  position: relative;
  width: min(100%, 460px);
  height: 440px;
  margin-inline: auto;
}

.wallet-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 330px;
  height: auto; /* original 1182:1902 ratio, never stretched */
  z-index: 1;
  filter: drop-shadow(0 22px 24px rgba(36, 29, 25, 0.16));
  animation: wallet-phone 5.2s ease-in-out infinite;
}

.wallet-card {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 292px;
  height: auto; /* original 1075:811 ratio, never stretched */
  z-index: 2;
  filter: drop-shadow(0 16px 20px rgba(36, 29, 25, 0.2));
  animation: wallet-card 5.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* 5.2s loop: phone in (0-15%) → hold → card emerges from the
   phone screen (31-54%) → settle + hold (54-78%) → card returns
   into the phone (78-94%) → phone resets → seamless repeat */
@keyframes wallet-phone {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 30px)) scale(0.96);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, calc(-50% - 5px)) scale(1);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  94% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 30px)) scale(0.96);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 30px)) scale(0.96);
  }
}

@keyframes wallet-card {
  0%,
  27% {
    opacity: 0;
    transform: translate(14%, -78%) scale(0.42);
  }
  31% {
    opacity: 1;
    transform: translate(14%, -78%) scale(0.45);
  }
  54% {
    transform: translate(-50%, 10%) scale(1);
  }
  63% {
    transform: translate(-50%, 7%) scale(1);
  }
  72%,
  78% {
    opacity: 1;
    transform: translate(-50%, 10%) scale(1);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate(14%, -78%) scale(0.42);
  }
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .wallet {
    padding: 60px 40px;
  }

  .wallet-stage {
    height: 400px;
  }

  .wallet-phone {
    width: 280px;
  }

  .wallet-card {
    width: 248px;
  }
}

/* Mobile: text first, then the animation, centered */
@media (max-width: 720px) {
  .wallet {
    padding: 56px 22px;
  }

  .wallet__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .wallet-content {
    text-align: center;
  }

  .wallet-heading {
    font-size: 38px;
  }

  .wallet-desc {
    margin-inline: auto;
  }

  .wallet-stage {
    width: min(100%, 320px);
    height: 380px;
    margin-top: 12px;
  }

  .wallet-phone {
    width: 225px;
  }

  .wallet-card {
    width: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-phone,
  .wallet-card {
    animation: none;
  }

  .wallet-phone {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .wallet-card {
    opacity: 1;
    transform: translate(-50%, 10%) scale(1);
  }
}

/* ------------------------------------------------------------
   اشترك مع منجود — partner signup section (businesses only)
   ------------------------------------------------------------ */
.join {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
  background: #FFF4E5;
}

/* RIGHT side (RTL first column): message + partner visual */
.join-visual {
  position: relative;
  background: #DA281C;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  overflow: hidden;
  text-align: center;
}

.join-visual__heading {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
}

.join-visual__sub {
  margin-top: 10px;
  max-width: 460px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
}

.join-visual__stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  display: flex;
  justify-content: center;
}

/* organic Mnjood shapes behind the visual */
.join-blob {
  position: absolute;
  background: #FF9E1B;
  opacity: 0.16;
  pointer-events: none;
  animation: join-blob-drift 9s ease-in-out infinite;
}

.join-blob--1 {
  width: 280px;
  height: 280px;
  top: -40px;
  right: -30px;
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
}

.join-blob--2 {
  width: 220px;
  height: 220px;
  bottom: -30px;
  left: -20px;
  border-radius: 45% 55% 48% 52% / 55% 45% 58% 42%;
  animation-delay: -4.5s;
}

@keyframes join-blob-drift {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-14px) scale(1.04);
  }
}

/* partner visual: original ratio preserved, gentle ambient float */
.join-img {
  display: block;
  width: min(100%, 560px);
  height: auto; /* original 1375:1144 ratio, never stretched */
  animation: join-float 4.5s ease-in-out infinite;
}

@keyframes join-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* soft order-notification pulse on the visual */
.join-pulse {
  position: absolute;
  top: 12%;
  right: 14%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FF9E1B;
  pointer-events: none;
}

.join-pulse::before,
.join-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #FF9E1B;
  animation: join-ring 2.4s ease-out infinite;
}

.join-pulse::after {
  animation-delay: 1.2s;
}

@keyframes join-ring {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

/* LEFT side: form */
.join-formside {
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.join-formside__inner {
  width: 100%;
  max-width: 600px;
}

.join-heading {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  color: #241D19;
  text-align: center;
}

.join-sub {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  color: #241D19;
  text-align: center;
}

.join-form {
  margin-top: 30px;
}

.join-form__title {
  font-size: 24px;
  font-weight: 700;
  color: #241D19;
}

.join-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.join-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 500;
  color: #241D19;
}

.join-field label em {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: rgba(36, 29, 25, 0.55);
}

.join-field input,
.join-field select {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(36, 29, 25, 0.1);
  padding-inline: 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #241D19;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23241D19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.join-field input {
  background-image: none;
}

.join-field input::placeholder {
  color: rgba(36, 29, 25, 0.4);
}

.join-field input:focus,
.join-field select:focus {
  outline: none;
  border-color: #FF9E1B;
  box-shadow: 0 0 0 3px rgba(255, 158, 27, 0.22);
}

.join-submit {
  margin-top: 22px;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #DA281C;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    transform 250ms ease;
}

.join-submit:hover:not(:disabled) {
  background: #FF9E1B;
  transform: translateY(-2px) scale(1.01);
}

.join-submit:active:not(:disabled) {
  transform: scale(0.99);
}

.join-submit:disabled {
  cursor: default;
}

.join-submit.is-success {
  background: #FF9E1B;
}

.join-submit.is-success .join-submit__label::before {
  content: '✓ ';
  font-weight: 800;
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .join-visual {
    padding: 48px 32px;
  }

  .join-visual__heading {
    font-size: 42px;
  }

  .join-formside {
    padding: 48px 32px;
  }

  .join-heading {
    font-size: 40px;
  }
}

/* Mobile: heading, description, form, CTA, then visual */
@media (max-width: 720px) {
  .join {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .join-formside {
    order: 1;
    padding: 56px 22px;
  }

  .join-visual {
    order: 2;
    padding: 48px 22px 56px;
  }

  .join-heading {
    font-size: 34px;
  }

  .join-grid {
    grid-template-columns: 1fr;
  }

  .join-visual__heading {
    font-size: 32px;
  }

  .join-visual__sub {
    font-size: 16px;
  }

  .join-img {
    width: min(100%, 480px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .join-img,
  .join-blob,
  .join-pulse::before,
  .join-pulse::after {
    animation: none !important;
  }

  .join-submit {
    transition: none;
  }
}

/* ------------------------------------------------------------
   حمّل التطبيق وخد 20% خصم — app download promo
   ------------------------------------------------------------ */
.promo {
  position: relative;
  min-height: 620px;
  background: #DA281C url('../assets/promo-bg.png') center / cover no-repeat;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 56px 72px;
  overflow: hidden;
}

/* RIGHT side content (RTL first column) */
.promo-content {
  width: min(100%, 560px);
  justify-self: center;
}

.promo-heading {
  font-size: 58px;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
}

.promo-heading__accent {
  color: #FF9E1B;
}

/* the demo Madani family ships no Latin digit glyphs,
   so the 20% renders in a digits-capable stack */
.promo-heading__num {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-weight: 800;
}

.promo-desc {
  margin-top: 16px;
  max-width: 500px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.7;
  color: #FFFFFF;
}

.promo-badges {
  --badge-h: 50px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.promo-badge {
  line-height: 0;
  transition: opacity 200ms ease;
}

.promo-badge:hover {
  opacity: 0.85;
}

.promo-badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
}

.promo-badge--play img {
  height: calc(var(--badge-h) / 0.672);
}

/* LEFT side visual stage */
.promo-stage {
  position: relative;
  width: min(100%, 580px);
  height: 540px;
  justify-self: center;
}

.promo-phone {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 350px;
  height: auto; /* original 1604:2405 ratio */
  z-index: 2;
  filter: drop-shadow(0 24px 28px rgba(60, 4, 8, 0.35));
}

.promo-offer {
  position: absolute;
  top: -3%;
  right: -7%;
  width: 300px;
  height: auto; /* original 1536:1024 ratio */
  z-index: 3;
  filter: drop-shadow(0 16px 20px rgba(60, 4, 8, 0.3));
}

.promo-item {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(60, 4, 8, 0.28));
}

.promo-item--1 {
  width: 130px; /* ratio 1.083 */
  left: 2%;
  top: 16%;
  z-index: 1;
}

.promo-item--2 {
  width: 140px; /* ratio 1.2 */
  left: 0;
  bottom: 6%;
  z-index: 3;
}

.promo-item--3 {
  width: 120px; /* ratio 1.2 */
  right: 4%;
  top: -2%;
  z-index: 1;
}

/* entrance (plays once) + continuous loops, gated by .in-view */
.promo.in-view .promo-phone {
  animation: promo-phone-in 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes promo-phone-in {
  from {
    opacity: 0;
    transform: translate(-50%, 26px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.promo.in-view .promo-offer {
  animation:
    promo-offer-in 700ms 150ms cubic-bezier(0.22, 1, 0.36, 1) both,
    promo-offer-zoom 2.6s 1s ease-in-out infinite;
}

@keyframes promo-offer-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes promo-offer-zoom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

/* items emerge from behind the phone, hold, return — staggered */
.promo.in-view .promo-item--1 {
  animation: promo-item-1 3.2s ease-in-out infinite;
}

.promo.in-view .promo-item--2 {
  animation: promo-item-2 3.2s 1.05s ease-in-out infinite;
}

.promo.in-view .promo-item--3 {
  animation: promo-item-3 3.2s 2.1s ease-in-out infinite;
}

@keyframes promo-item-1 {
  0% {
    opacity: 0;
    transform: translate(26px, -16px) scale(0.7);
  }
  14% {
    opacity: 1;
  }
  46% {
    opacity: 1;
    transform: translate(-20px, 10px) scale(1);
  }
  72% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(26px, -16px) scale(0.7);
  }
}

@keyframes promo-item-2 {
  0% {
    opacity: 0;
    transform: translate(18px, 22px) scale(0.7);
  }
  14% {
    opacity: 1;
  }
  46% {
    opacity: 1;
    transform: translate(-15px, -20px) scale(1);
  }
  72% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(18px, 22px) scale(0.7);
  }
}

@keyframes promo-item-3 {
  0% {
    opacity: 0;
    transform: translate(-22px, -16px) scale(0.7);
  }
  14% {
    opacity: 1;
  }
  46% {
    opacity: 1;
    transform: translate(20px, -15px) scale(1);
  }
  72% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(-22px, -16px) scale(0.7);
  }
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .promo {
    min-height: 560px;
    padding: 48px 40px;
    gap: 24px;
  }

  .promo-heading {
    font-size: 44px;
  }

  .promo-stage {
    height: 470px;
  }

  .promo-phone {
    width: 300px;
  }

  .promo-offer {
    width: 250px;
  }

  .promo-item--1 {
    width: 108px;
  }

  .promo-item--2 {
    width: 116px;
  }

  .promo-item--3 {
    width: 100px;
  }
}

/* Mobile: content first, then the visual */
@media (max-width: 720px) {
  .promo {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 52px 22px;
    gap: 34px;
  }

  .promo-content {
    order: 1;
    text-align: center;
  }

  .promo-stage {
    order: 2;
  }

  .promo-heading {
    font-size: 34px;
  }

  .promo-desc {
    margin-inline: auto;
    font-size: 16px;
  }

  .promo-badges {
    --badge-h: 44px;
    justify-content: center;
  }

  .promo-stage {
    width: min(100%, 420px);
    height: 450px;
  }

  .promo-phone {
    width: 262px;
  }

  .promo-offer {
    width: 220px;
  }

  .promo-item--1 {
    width: 84px;
  }

  .promo-item--2 {
    width: 92px;
  }

  .promo-item--3 {
    width: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo.in-view .promo-phone,
  .promo.in-view .promo-offer,
  .promo.in-view .promo-item--1,
  .promo.in-view .promo-item--2,
  .promo.in-view .promo-item--3 {
    animation: none !important;
  }

  .promo-cta,
  .promo-badge {
    transition: none;
  }
}

/* ------------------------------------------------------------
   وش نسوي اليوم — recipe cards section
   ------------------------------------------------------------ */
.recipes {
  background: #FBEFE7;
  padding: 110px 72px;
}

.recipes__inner {
  max-width: 1240px;
  margin-inline: auto;
  text-align: center;
}

/* animated cooking emoji — continuous float + sway */
.recipes-emoji {
  display: inline-block;
  font-size: 54px;
  line-height: 1;
  animation: recipes-chef 2.3s ease-in-out infinite;
}

@keyframes recipes-chef {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-6px) rotate(3deg);
  }
}

.recipes-heading {
  margin-top: 18px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  color: #241D19;
}

.recipes-heading__accent {
  color: #DA281C;
}

.recipes-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: right;
}

/* equal-height flex cards */
.r-card {
  background: #FFFFFF;
  border-radius: 30px;
  box-shadow: 0 14px 34px rgba(36, 29, 25, 0.09);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 350ms ease;
}

.r-card:hover {
  transform: translateY(-5px);
}

.r-card__media {
  position: relative;
  height: 230px;
  overflow: hidden;
}

.r-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* square food photos: edge crop only, subject intact */
  transition: transform 400ms ease;
}

.r-card:hover .r-card__img {
  transform: scale(1.03);
}

.r-card__time {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-inline: 13px;
  border-radius: 999px;
  background: #DA281C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.r-card__time--orange {
  background: #FF9E1B;
}

.r-card__time svg {
  width: 15px;
  height: 15px;
}

.r-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 26px;
}

.r-card__title {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.35;
  color: #241D19;
  text-align: center;
}

.r-card__label {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  color: #DA281C;
}

.r-ingredients {
  list-style: none;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.r-ingredient {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.r-ingredient img {
  width: 56px;
  height: 84px;
  object-fit: contain; /* original 160:257 ratio preserved */
}

.r-ingredient span {
  font-size: 14px;
  font-weight: 400;
  color: #241D19;
  text-align: center;
}

.r-steps {
  margin-top: 8px;
  padding-inline-start: 20px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  color: #241D19;
}

/* the demo Madani family has no digit glyphs, so the ordered
   list markers are rendered in a digits-capable stack */
.r-steps li::marker {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #DA281C;
}

.r-card__cta {
  margin-top: auto;
  margin-inline: auto;
  width: 88%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: #DA281C;
  color: #FFFFFF;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 250ms ease,
    transform 250ms ease;
}

.r-card__cta svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.r-card__cta:hover {
  background: #FF9E1B;
  transform: translateY(-2px);
}

.r-card__cta:focus-visible {
  outline: 2px solid #FF9E1B;
  outline-offset: 3px;
}

/* entrance: staggered fade + rise, once */
.recipes.in-view .r-card {
  animation: r-card-in 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) backwards;
}

@keyframes r-card-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .recipes {
    padding: 90px 40px;
  }

  .recipes-heading {
    font-size: 44px;
  }

  .recipes-grid {
    gap: 14px;
  }

  .r-card__media {
    height: 180px;
  }

  .r-card__body {
    padding: 18px 16px 20px;
  }

  .r-card__title {
    font-size: 20px;
  }

  .r-ingredient img {
    width: 46px;
    height: 70px;
  }

  .r-ingredient span {
    font-size: 12.5px;
  }

  .r-steps {
    font-size: 13px;
  }
}

/* Mobile: stacked cards */
@media (max-width: 720px) {
  .recipes {
    padding: 80px 22px;
  }

  .recipes-emoji {
    font-size: 46px;
  }

  .recipes-heading {
    font-size: 36px;
  }

  .recipes-grid {
    margin-top: 40px;
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipes-emoji,
  .recipes.in-view .r-card {
    animation: none !important;
  }

  .r-card,
  .r-card__img,
  .r-card__cta {
    transition: none;
  }

  .r-card:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------
   تذييل منجود — footer
   ------------------------------------------------------------ */
.footer {
  background: #DA281C;
  padding: 36px 72px 26px;
}

.footer__inner {
  max-width: 1240px;
  margin-inline: auto;
}

/* top CTA area */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 96px;
}

.footer-top__headline {
  font-size: 62px;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
}

.footer-top__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 58px;
  font-weight: 800;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 2px #FF9E1B;
  text-decoration: none;
  transition:
    color 250ms ease,
    background-color 250ms ease,
    padding 250ms ease;
}

.footer-top__cta:hover {
  color: #DA281C;
  background: #FF9E1B;
  padding-inline: 14px;
  border-radius: 14px;
}

.footer-top__arrow {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

/* thin brand dividers */
.footer-divider {
  height: 1px;
  background: rgba(255, 158, 27, 0.5);
  margin: 20px 0 28px;
}

.footer-divider--bottom {
  margin: 28px 0 0;
}

/* four columns, RTL order */
.footer-cols {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1fr 1fr;
  gap: 40px;
}

.footer-col + .footer-col {
  border-inline-start: 1px solid rgba(255, 158, 27, 0.45);
  padding-inline-start: 40px;
}

.footer-col__title {
  font-size: 23px;
  font-weight: 700;
  color: #FF9E1B;
  margin-bottom: 12px;
}

.footer-col__title--app {
  margin-top: 16px;
}

/* filled brand icons via mask (single consistent style) */
.footer-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: #FF9E1B;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.footer-icon--phone {
  -webkit-mask-image: url('../assets/icons/phone-fill.svg');
  mask-image: url('../assets/icons/phone-fill.svg');
}

.footer-icon--mail {
  -webkit-mask-image: url('../assets/icons/envelope-simple-fill.svg');
  mask-image: url('../assets/icons/envelope-simple-fill.svg');
}

.footer-icon--facebook {
  -webkit-mask-image: url('../assets/icons/facebook-logo-fill.svg');
  mask-image: url('../assets/icons/facebook-logo-fill.svg');
}

.footer-icon--x {
  -webkit-mask-image: url('../assets/icons/x-logo-fill.svg');
  mask-image: url('../assets/icons/x-logo-fill.svg');
}

.footer-icon--instagram {
  -webkit-mask-image: url('../assets/icons/instagram-logo-fill.svg');
  mask-image: url('../assets/icons/instagram-logo-fill.svg');
}

/* newsletter column */
.footer-news__field {
  position: relative;
}

.footer-news__field .footer-icon--mail {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.footer-news input {
  width: 100%;
  height: 54px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  padding: 0 48px 0 20px;
  transition: border-color 220ms ease;
}

.footer-news input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.footer-news input:focus {
  outline: none;
  border-color: #FF9E1B;
}

.footer-news button {
  margin-top: 14px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: #FF9E1B;
  color: #241D19;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 220ms ease;
}

.footer-news button:hover {
  background: #ffb14d;
}

/* main page links */
.footer-links {
  list-style: none;
}

.footer-links a {
  display: inline-block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 220ms ease;
}

.footer-links a:hover {
  color: #FF9E1B;
}

/* RTL info rows: icon RIGHT, text LEFT */
.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.footer-contact__text {
  font-size: 17px;
  font-weight: 400;
  color: #FFFFFF;
}

/* official store badges, side by side, original colors, same
   visible height (--fb-h) */
.footer-badges {
  /* scales with the column so both badges stay on one row */
  --fb-h: clamp(18px, calc((100vw - 264px) / 26 - 9px), 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.footer-badge {
  line-height: 0;
  transition: opacity 200ms ease;
}

.footer-badge:hover {
  opacity: 0.85;
}

.footer-badge img {
  display: block;
  height: var(--fb-h);
  width: auto;
}

/* Google badge PNG carries transparent padding: its visible
   button is 67.2% of canvas height and 87.3% of canvas width.
   The canvas is enlarged so the visible button is --fb-h tall,
   and the padding is pulled back with negative margins */
.footer-badge--play img {
  height: calc(var(--fb-h) / 0.672);
  margin: calc(var(--fb-h) * -0.244) calc(var(--fb-h) * -0.244);
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .footer {
    padding: 32px 40px 24px;
  }

  .footer-badges {
    --fb-h: 24px;
    gap: 6px;
  }

  .footer-top__headline {
    font-size: 46px;
  }

  .footer-top__cta {
    font-size: 42px;
  }

  .footer-top__arrow {
    width: 34px;
    height: 34px;
  }

  .footer-cols {
    gap: 24px;
    grid-template-columns: 1.1fr 0.8fr 1fr 1fr;
  }

  .footer-col + .footer-col {
    padding-inline-start: 24px;
  }
}

/* Mobile: stacked, horizontal dividers */
@media (max-width: 720px) {
  .footer {
    padding: 34px 22px 22px;
  }

  .footer-top {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 22px;
    min-height: 0;
  }

  .footer-top__headline {
    font-size: 40px;
  }

  .footer-top__cta {
    font-size: 40px;
  }

  .footer-top__arrow {
    width: 30px;
    height: 30px;
  }

  .footer-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-col {
    padding: 18px 0;
  }

  .footer-badges {
    --fb-h: 36px;
  }

  .footer-col + .footer-col {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid rgba(255, 158, 27, 0.45);
  }

  .footer-divider {
    margin: 20px 0;
  }

  .footer-divider--bottom {
    margin-top: 8px;
  }
}

/* ------------------------------------------------------------
   Sticky navigation + anchor scrolling + active states
   ------------------------------------------------------------ */
.nav-sentinel {
  position: absolute;
  top: 32px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* the capsule pins to the viewport once the page scrolls */
.site-header.is-sticky {
  position: fixed;
  top: 16px;
  z-index: 100;
}

/* keep target headings clear of the pinned capsule */
section[id],
footer[id] {
  scroll-margin-top: 120px;
}

/* hover + scroll-spy accent */
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--mnjood-orange);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* ------------------------------------------------------------
   CTA hover — compact app-download box (one shared system:
   mart, wallet, recipe cards, footer)
   ------------------------------------------------------------ */
.cta-hover {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

/* invisible hover bridge across the gap: the cursor can travel
   button → box without the wrapper losing :hover (the box keeps
   pointer-events while the pointer is over the bridge) */
.cta-hover::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% - 14px);
  width: 70%;
  height: 30px;
}

/* wrapper takes over the recipe-card CTA's bottom-anchored sizing */
.r-card__body > .cta-hover {
  width: 88%;
  margin-top: auto;
}

.cta-hover > .r-card__cta {
  width: 100%;
  margin-top: 0;
}

.cta-hover__box {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(36, 29, 25, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;
}

/* wrapper = one combined hover area: moving from the button
   onto the box (or its badges) keeps the box open */
.cta-hover:hover .cta-hover__box,
.cta-hover:focus-within .cta-hover__box {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.cta-hover__box a {
  line-height: 0;
  transition: opacity 200ms ease;
}

.cta-hover__box a:hover {
  opacity: 0.85;
}

.cta-hover__box img {
  display: block;
  height: 36px;
  width: auto;
}

.cta-hover__box .cta-hover__play img {
  height: calc(36px / 0.672);
}

@media (max-width: 480px) {
  .cta-hover__box {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-hover__box {
    transition: none;
  }
}