/* ==========================================================================
   Zakaz Plus — B2C landing page sections.

   A phone (< 768) follows the Figma 375 frame (215:2570) and a desktop
   (≥ 1280) the 1440 frame (405:12334). Between them the page keeps the
   phone composition, given more room. Positions in the desktop rules are
   Figma's own, measured from the section's edges.

   The card gradients are Figma's radial fills exactly as Figma exports them
   (an SVG stretched over the card), so they scale with the card.
   ========================================================================== */

/* the sections, and the footer after them, sit one page gap apart */
.home {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-bottom: 50px;
}
.home > section { width: 100%; max-width: var(--shell); margin-inline: auto; }

/* The phone frame puts "More benefits" straight after "What's inside", in the
   same grey card; the desktop frame has the language screens between them.
   The markup follows the desktop order. */
.hero      { order: 1; }
.flow      { order: 2; }
.features  { order: 3; }
.benefits  { order: 4; }
.langs     { order: 5; }
.download  { order: 6; }
.faq       { order: 7; }

@media (min-width: 768px)  { .home { gap: 30px; padding-bottom: 30px; } }
@media (min-width: 1280px) {
  .home { gap: 20px; padding-bottom: 20px; }
  /* the hero runs under the header, as in the design */
  .site-head + main.home { padding-top: 0; }
  .langs    { order: 4; }
  .benefits { order: 5; }
}

/* ==========================================================================
   1. hero
   ========================================================================== */

.hero { position: relative; }

.hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 50px;
  overflow: hidden;
  border-radius: 50px 50px 30px 30px;
  background: var(--card);
}

.hero__glow { display: none; }

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  padding-inline: 20px;
}
.hero__eyebrow { display: none; }
.hero__title { font: 600 30px/1 var(--font); color: var(--ink); }
.hero__lead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: var(--t1);
  color: var(--ink-grey);
}

/* ---- the app mockup ----
   Sized in em so one font-size scales all of it: 12px on a phone (Figma
   278 wide), 14.633px on a desktop (339 wide). */
.phone {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 23.1667em;
  height: 33.9167em;
  padding-block: 0.6667em;
  overflow: hidden;
  border: 0.6667em solid var(--ink);
  border-radius: 2.9167em;
  background: #F9FAFB;
  font-size: 12px;
}
.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8333em 2.0833em;
}
.phone__time { font: 600 1em/normal var(--font-display); color: var(--ink); }
.phone__status-icons { width: 5.3333em; height: 0.9167em; }

.phone__content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em 1.6667em;
}
.phone__search {
  display: flex;
  align-items: center;
  gap: 0.6667em;
  padding: 0.8333em;
  border: 0.0834em solid #E5E7EB;
  border-radius: 0.8333em;
  background: var(--white);
  font: 400 1em/normal var(--font);
  color: var(--ink-muted);
  white-space: nowrap;
}
.phone__search span { overflow: hidden; text-overflow: ellipsis; }
/* Figma draws the dot in the top-left 89% of a 14px box */
.phone__search-icon { flex: none; width: 1.1667em; height: 1.1667em; padding: 0 0.1296em 0.1296em 0; }

.phone__chips { display: flex; gap: 0.5em; }
.phone__chip {
  padding: 0.4em 1em;
  border: 0.1em solid #E5E7EB;
  border-radius: 2em;
  background: var(--white);
  font: 600 0.8333em/normal var(--font);
  color: var(--ink-muted);
  white-space: nowrap;
}
.phone__chip--on { border: 0; background: var(--green); color: var(--white); }

.phone__list { display: flex; flex-direction: column; gap: 0.6667em; }
.phone__heading { font: 700 1em/normal var(--font-display); color: var(--ink); }
.phone__venue {
  display: flex;
  align-items: center;
  gap: 0.6667em;
  padding: 0.5em;
  border: 0.0834em solid #E5E7EB;
  border-radius: 0.8333em;
  background: var(--white);
}
.phone__thumb { flex: none; width: 4em; height: 4em; border-radius: 0.5em; object-fit: cover; }
.phone__venue-info { display: flex; flex: 1; flex-direction: column; gap: 0.1667em; min-width: 0; }
.phone__venue-row { display: flex; align-items: center; justify-content: space-between; gap: 0.25em; }
.phone__venue-name { font: 700 1em/normal var(--font-display); color: var(--ink); white-space: nowrap; }
.phone__badge {
  padding: 0.125em 0.5em;
  border-radius: 0.5em;
  background: #ECFDF5;
  font: 700 0.6667em/normal var(--font);
  color: var(--green);
  white-space: nowrap;
}
.phone__venue-meta {
  overflow: hidden;
  font: 400 0.8333em/normal var(--font);
  color: var(--ink-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- store buttons: on a phone they sit on a panel that fades up over the
        bottom of the mockup ---- */
.hero__stores {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: -137px;
  padding: 30px 20px;
  border-radius: 30px;
  background: linear-gradient(180.25deg, rgba(242, 243, 241, 0) 0.72%, #F2F3F1 52.99%, #F2F3F1 99.28%);
}
/* on a phone the two share the row: 165 each in the 375 frame */
.store {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #161815;
  box-shadow: var(--shadow-updown);
  transition: background-color .2s;
}
@media (hover: hover) {
  .store:hover { background: #2A2D28; }
}
.store__icon { flex: none; }
.store--apple .store__icon  { width: 30px; height: 30px; }
.store--google .store__icon { width: 25px; height: 25px; }
.store__text { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.store__small { font: 400 10px/normal var(--font); text-transform: uppercase; color: var(--ink-muted); }
.store__name { font: 700 16px/1.2 var(--font-display); color: var(--white); }

/* ---- bonus card ----
   A section of its own in the phone frame, a page gap below the hero card. */
.bonus {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding: 80px 20px 20px;
  /* the 365px burst behind the card must not widen a narrower screen */
  overflow: hidden;
}
.bonus__burst {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 365px;
  max-width: none;
  height: 224px;
  transform: translateX(-50%);
}
/* the full width on a phone (335 in the 375 frame); the gift and the chips
   hold their places around its centre */
.bonus__card {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 130px;
  border-radius: 30px;
  background: linear-gradient(180deg, #81ED1B 0%, #2C5307 100%);
}
.bonus__gift {
  position: absolute;
  top: -40px;
  left: calc(50% - 70.5px);
  width: 141px;
  max-width: none;
  height: 140px;
  transform: rotate(5deg);
}
.bonus__shade {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: linear-gradient(180.025deg, rgba(98, 185, 16, 0) 33.212%, #2E5708 99.944%);
}
/* Figma puts two lines 72px down (16px from the bottom). Anchored to the
   bottom instead, the same two lines land in the same place, and the longer
   Uzbek text — three lines, which overflows the card in Figma — grows upwards
   inside the card. */
.bonus__text {
  position: absolute;
  bottom: 16px;
  left: calc(50% - 1px);
  width: 207px;
  transform: translateX(-50%);
  font: var(--t1);
  text-align: center;
  color: var(--white);
}
.bonus__chip {
  position: absolute;
  padding: 3px 10px;
  border-radius: 30px;
  background: #F5FFC7;
  font: var(--t4);
  color: var(--green);
  white-space: nowrap;
  filter: drop-shadow(4px 4px 5px rgba(39, 37, 37, .1));
}
.bonus__chip--five { top: 29px; left: calc(50% - 100.5px); }
/* above the phone mockup where the two overlap on a desktop */
.bonus__chip--ten  { top: 9px; left: calc(50% + 41.5px); z-index: 3; }

/* ---- tablet: the phone composition, centred and larger ---- */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero__card { padding-top: 60px; border-radius: 60px 60px 40px 40px; }
  .hero__copy { align-items: center; max-width: 680px; text-align: center; }
  .hero__eyebrow { display: inline-block; }
  .hero__title { font-size: 48px; }
  .hero__lead { font-size: 18px; }
  .hero__phone { height: 496px; font-size: 14.633px; }
  .hero__stores { margin-top: -167px; padding-block: 40px; }
  .store { max-width: 200px; padding: 12px 20px; gap: 12px; }
  .bonus { margin-top: 30px; }
}
@media (min-width: 768px) {
  .bonus__card { width: 335px; }
}

/* ---- desktop: Figma's composition ---- */
@media (min-width: 1280px) {
  .hero { height: 720px; }
  .hero__card {
    display: block;
    height: 100%;
    padding: 0;
    border-radius: 0 0 60px 60px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F1 100%);
  }
  .hero__glow {
    display: block;
    position: absolute;
    top: 222px;
    right: -102px;
    width: 1010px;
    max-width: none;
    height: 829px;
  }
  .hero__copy {
    position: absolute;
    top: 146px;
    left: 60px;
    width: 864px;
    gap: 20px;
    padding: 0;
  }
  .hero__eyebrow { display: inline-block; align-self: flex-start; }
  /* 75px at 1440, easing to 64px at 1280 so the first line clears the phone */
  .hero__title { font: 500 clamp(64px, 6.875vw - 24px, 75px)/1 var(--font); }
  .hero__lead { width: 385px; margin-top: 20px; font: 400 18px/1.3 var(--font); }

  .hero__phone {
    position: absolute;
    top: 211px;
    right: 134px;
    height: 544px;
    font-size: 14.633px;
  }

  .hero__stores {
    position: absolute;
    bottom: 40px;
    left: 60px;
    justify-content: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
  }
  .store { flex: none; gap: 15px; max-width: none; padding: 15px 25px; }
  .store--apple { width: 182px; }
  .store__text { gap: 5px; }

  .bonus { position: absolute; top: 565px; right: 403px; margin: 0; padding: 0; overflow: visible; }
  .bonus__burst { display: none; }
  .bonus__gift { top: -53.1px; left: 113.8px; }
  .bonus__text { left: 20px; width: 198px; transform: none; text-align: left; }
  .bonus__chip--five { top: 22px; left: 54px; }
  .bonus__chip--ten  { top: 19px; left: 226px; }
}

/* ==========================================================================
   2–3. three steps and two ways to order — one grey card
   ========================================================================== */

.flow {
  display: flex;
  flex-direction: column;
  gap: 50px;
  overflow: hidden;
  border-radius: 50px;
  background: var(--card);
}

/* ---- steps ---- */
.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 50px 20px 0;
}
.steps__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.steps__heading { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.steps__note { display: none; }

/* On a phone, one card at a time: each fills the width, the next starts
   just past the screen edge, and a swipe stops at the next card rather than
   gliding on through the row. */
.steps__list {
  display: flex;
  gap: 20px;
  width: calc(100% + 40px);
  margin-inline: -20px;
  padding-inline: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
.steps__list::-webkit-scrollbar { display: none; }

.step {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: 20px;
  padding: 25px;
  overflow: hidden;
  border-radius: 30px;
  /* overflow alone doesn't clip the blurred fade to the rounded corners in
     Chrome; a clip-path does */
  clip-path: inset(0 round 30px);
  scroll-snap-stop: always;
  background: center / 100% 100% no-repeat url("data:image/svg+xml;utf8,<svg viewBox='0 0 310 490' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-28.8 48.347 -30.587 -21.604 288 17.422)'><stop stop-color='rgba(215,239,192,1)' offset='0'/><stop stop-color='rgba(178,210,148,1)' offset='0.25'/><stop stop-color='rgba(141,182,103,1)' offset='0.5'/><stop stop-color='rgba(105,153,59,1)' offset='0.75'/><stop stop-color='rgba(86,139,37,1)' offset='0.875'/><stop stop-color='rgba(68,125,14,1)' offset='1'/></radialGradient></defs></svg>");
  scroll-snap-align: start;
}
.step__dots { width: 49px; height: 25px; }
.step__body { display: flex; flex-direction: column; gap: 20px; }
.step__phone { display: flex; justify-content: center; order: -1; height: 301px; }
.step__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 15px; }
.step__title { font: 600 19px/1.2 var(--font-display); color: var(--white); }
.step__desc { font: var(--t14); color: #E5E7EB; }
.step__fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 207px;
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  background: linear-gradient(180deg, rgba(57, 102, 15, 0) 0%, #39660F 65.496%, rgba(57, 102, 15, .3) 109.71%);
  /* a browser blurs the whole box at full strength from its top edge, which
     draws a hard line across the phone; easing the blur in keeps it soft */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}

/* ---- the iPhone around the step screens (Figma 405:12468) ---- */
.device { position: relative; flex: none; width: 180px; height: 302px; overflow: hidden; }
.device > * { position: absolute; }
.device__body {
  top: 0.3px;
  right: 1.6px;
  left: 1.76px;
  height: 477px;
  border-radius: 25.3px;
  background: #000;
  box-shadow: inset 0 0 0 0.3px #292824, inset 0 0 0 0.6px #B5B5B5, inset 0 0 0 2.5px #373634, inset 0 0 0 4.7px #242223;
}
.device__speaker { top: 4.95px; left: 77.6px; width: 25.8px; height: 2.7px; border-radius: 4.6px; background: #141414; }
.device__status {
  top: 9.78px;
  left: 8.18px;
  width: 163.636px;
  height: 26.85px;
  overflow: hidden;
  border-radius: 21.868px 17.673px 0 0;
  background: var(--white);
}
.device__time { position: absolute; top: 7.13px; left: 16.88px; width: 15.688px; height: 7.131px; }
.device__icons { position: absolute; top: 7.61px; right: 14.36px; display: flex; align-items: center; gap: 1.902px; }
.device__network { width: 9.508px; height: 6.656px; }
.device__wifi    { width: 7.606px; height: 6.656px; }
.device__battery { width: 11.885px; height: 6.656px; }
.device__island { top: 16.52px; left: 67.7px; width: 43.7px; height: 15.61px; border-radius: 5.767px; background: #0A0A0A; }
.device__lens { position: absolute; top: 3.43px; left: 34.16px; width: 6.955px; height: 8.985px; opacity: .7; }
.device__button { width: 1.76px; border: 0.221px solid #7F7E79; border-radius: 0.589px; background: #2A2A2A; }
.device__button--silence { top: 92.5px;  left: 0; height: 20.26px; }
.device__button--up      { top: 127.6px; left: 0; height: 37.6px; }
.device__button--down    { top: 173.2px; left: 0; height: 37.27px; }
.device__button--power   { top: 140.2px; right: 0; height: 57.1px; }
.device__screen {
  top: 35.41px;
  left: 8.18px;
  width: 163.636px;
  height: 335.455px;
  overflow: hidden;
  border-radius: 0 0 21.87px 21.87px;
  background: var(--white);
}
.device__screen img { width: 100%; }

/* ---- two ways to order ---- */
.ways {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 20px;
  border-radius: 50px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F1 100%);
}
.ways__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ways__lead { display: flex; flex-direction: column; align-items: inherit; gap: 30px; }
.ways__title { max-width: 273px; }
.ways__text,
.ways__cta { display: none; }

.ways__cards { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 343px; }
/* Figma's phone cards are 343 wide in a 335px column: they start at the 20px
   margin and stop 12px short of the edge. A wider phone gives them its full
   width. */
@media (max-width: 767px) {
  .ways__cards {
    align-self: flex-start;
    width: max(min(343px, 100% + 8px), 100%);
    max-width: none;
  }
}
.way {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 366px;
  padding: 10px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--white);
}
/* each photo is placed the way Figma crops it in the 343 × 366 card
   (component 258:7855), and grows with a wider card so it still covers it */
.way__photo { position: absolute; max-width: none; height: auto; }
.way__photo--walk { top: -49px; left: 50%; width: max(407px, 100%); aspect-ratio: 407 / 505; transform: translateX(-50%); }
.way__photo--cafe { top: 0; left: 0; width: max(366px, 100%); aspect-ratio: 1; }
.way__caption {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: 25px;
  background: rgba(77, 85, 69, .4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.way__title { display: flex; align-items: center; gap: 8px; font: 600 19px/1.2 var(--font-display); color: var(--white); }
.way__title::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 16px; background: var(--green); }
.way__text { font: var(--t14); color: #EEEFED; }

/* ---- tablet ---- */
/* two cards at a time on a small tablet, all three side by side from 1024 */
@media (min-width: 768px) and (max-width: 1023px) {
  .step { flex-basis: calc((100% - 20px) / 2); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .steps__list { width: 100%; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .step { flex: 1 1 0; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .steps { padding-top: 60px; }

  .ways { padding: 60px 40px; }
  .ways__title { max-width: none; }
  .ways__lead { gap: 16px; }
  .ways__text { display: block; max-width: 420px; font: var(--t14); color: var(--ink-muted); }
  .ways__cta { display: inline-flex; margin-top: 24px; }
  .ways__cards { flex-direction: row; max-width: 706px; }
  .way { flex: 1; }
}

/* ---- desktop ---- */
@media (min-width: 1280px) {
  .flow { gap: 124px; border-radius: 60px; }

  .steps { align-items: stretch; gap: 40px; padding: 60px 60px 0; }
  .steps__head { flex-direction: row; align-items: flex-end; justify-content: space-between; text-align: left; }
  .steps__heading { align-items: flex-start; }
  .steps__note { display: block; width: 174px; font: var(--t14); text-align: right; color: var(--ink-muted); }

  .steps__list { gap: 10px; width: auto; margin: 0; padding: 0; overflow: visible; }
  .step {
    flex: 1;
    width: auto;
    height: 365px;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 433.33 365' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-62.538 31.043 -41.736 -29.376 625.38 62.677)'><stop stop-color='rgba(215,239,192,1)' offset='0'/><stop stop-color='rgba(178,210,148,1)' offset='0.25'/><stop stop-color='rgba(141,182,103,1)' offset='0.5'/><stop stop-color='rgba(105,153,59,1)' offset='0.75'/><stop stop-color='rgba(86,139,37,1)' offset='0.875'/><stop stop-color='rgba(68,125,14,1)' offset='1'/></radialGradient></defs></svg>");
  }
  .step__body { flex-direction: row; }
  .step__phone { flex: none; order: 0; height: 306px; overflow: hidden; }
  .step__text { flex: 1; min-width: 0; padding-block: 20px; }
  .step:nth-child(3) .step__text { gap: 20px; }
  /* In Figma a title may run into the 20px gap before the phone ("Выберите
     заведение" is 196px in a 183px column). Lending titles most of that gap
     keeps such a title on one line, and wraps one that would reach the phone. */
  .step__title { margin-right: -16px; }
  .step__desc { color: var(--white); }
  .step__fade {
    right: auto;
    left: 50%;
    width: 440px;
    height: 108px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(79, 112, 49, 0) 0%, #4F7031 73.683%);
  }
  .step:nth-child(2) .step__fade { height: 93px; }
}

/* At Figma's own width the first card sizes its words to the title (177px at
   least), so a long title pushes the phone into the right padding: RU's by
   13px, UZ's by 5px. Narrower, the column shares the row as the others do. */
@media (min-width: 1440px) {
  .step:first-child .step__body { margin-right: -25px; }
  .step:first-child .step__text { flex: 0 1 auto; }
  .step:first-child .step__title { margin-right: 0; }
  .step:first-child .step__desc { width: 177px; max-width: 100%; }
}

@media (min-width: 1280px) {
  /* the text column and the cards, 1096 wide, centred as at 1440 */
  .ways {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    padding: 80px max(60px, calc((100% - 1096px) / 2));
  }
  .ways__intro {
    flex: none;
    align-items: flex-start;
    justify-content: space-between;
    width: 315px;
    padding-block: 20px;
    text-align: left;
  }
  .ways__title { max-width: 322px; }
  .ways__text { display: block; width: 245px; font: var(--t14); color: var(--ink-muted); }
  .ways__cta { display: inline-flex; }
  .ways__cards { flex: none; flex-direction: row; gap: 10px; width: 761px; max-width: none; height: 451px; }
  .way { flex: 1; height: auto; }
  /* the desktop crops, in the 375 × 451 card */
  .way__photo--walk { top: -11.2%; width: auto; height: 159.01%; aspect-ratio: auto; }
  .way__photo--cafe { top: -18.31%; left: 73.04%; width: auto; height: 134.98%; aspect-ratio: auto; transform: translateX(-50%); }
  .way__caption { background: rgba(77, 85, 69, .55); }
}

/* ==========================================================================
   4. what's inside
   ========================================================================== */

.features {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 16px;
  border-radius: 50px;
  background: radial-gradient(120% 60% at 50% 20%, #FFFFFF 0%, var(--card) 100%);
}
.features__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.features__title { font: 500 24px/1.3 var(--font); color: var(--ink); }

.features__box { position: relative; width: 252px; height: 150px; margin: 0 auto -30px; }
.features__box img { position: absolute; top: -27px; left: 0; width: 252px; max-width: none; height: 252px; }

.features__grid { position: relative; display: flex; flex-direction: column; gap: 5px; }

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  padding: 30px;
  border-radius: 30px;
  color: var(--white);
}
.feature__title { font: 600 19px/1.2 var(--font-display); }
.feature__text { font: var(--t14); }

.feature__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-updown);
  color: #000;
}
.feature__icon--bare { width: auto; height: auto; padding: 7px; box-shadow: none; color: var(--ink); }

/* on a phone: bonus, wallet and nearby as text cards; the renders, the map
   and the basket and delivery cards are desktop-only (on a phone those two
   are part of "More benefits") */
.feature__render,
.feature__map,
.feature__fade,
.feature--basket,
.feature--delivery { display: none; }
.feature__copy { display: contents; }

.feature--bonus {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background: center / 100% 100% no-repeat url("data:image/svg+xml;utf8,<svg viewBox='0 0 343 224' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.9'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(26.516 -30.746 44.4 51.117 129.18 122.73)'><stop stop-color='rgba(255,107,74,1)' offset='0'/><stop stop-color='rgba(243,144,73,1)' offset='0.14183'/><stop stop-color='rgba(231,181,72,1)' offset='0.28365'/><stop stop-color='rgba(206,254,70,1)' offset='0.56731'/><stop stop-color='rgba(255,207,74,1)' offset='0.90385'/></radialGradient></defs></svg>");
}
.feature--bonus .feature__text { padding-right: 15px; }

.feature--wallet {
  box-shadow: 0 -4px 5px rgba(39, 37, 37, .1);
  background: center / 100% 100% no-repeat url("data:image/svg+xml;utf8,<svg viewBox='0 0 343 207' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-36.3 23.6 -38.781 -10.188 343 0.0000070333)'><stop stop-color='rgba(215,239,192,1)' offset='0'/><stop stop-color='rgba(170,188,153,1)' offset='0.25'/><stop stop-color='rgba(126,137,114,1)' offset='0.5'/><stop stop-color='rgba(103,112,94,1)' offset='0.625'/><stop stop-color='rgba(81,87,75,1)' offset='0.75'/><stop stop-color='rgba(58,61,55,1)' offset='0.875'/><stop stop-color='rgba(36,36,36,1)' offset='1'/></radialGradient></defs></svg>");
}
.feature--wallet .feature__text { max-width: 226px; }

.feature--nearby {
  box-shadow: 0 -4px 5px rgba(39, 37, 37, .1);
  background: center / 100% 100% no-repeat url("data:image/svg+xml;utf8,<svg viewBox='0 0 343 225' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(21.4 11.662 -17.779 45.271 124 133.12)'><stop stop-color='rgba(50,96,8,1)' offset='0'/><stop stop-color='rgba(74,141,12,1)' offset='0.36058'/><stop stop-color='rgba(98,185,16,1)' offset='0.72115'/><stop stop-color='rgba(135,203,28,1)' offset='0.80769'/><stop stop-color='rgba(173,220,40,1)' offset='0.89423'/></radialGradient></defs></svg>");
}

/* ---- tablet ---- */
@media (min-width: 768px) and (max-width: 1279px) {
  .features { padding: 60px 40px; }
  .features__title { font-size: 35px; }
  .features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 900px; width: 100%; margin-inline: auto; }
  .feature--bonus { grid-column: 1 / -1; }
}

/* ---- desktop ---- */
@media (min-width: 1280px) {
  .features { display: block; padding: 60px; overflow: hidden; border-radius: 60px; background: var(--card); }

  .features__head { align-items: flex-start; justify-content: space-between; gap: 0; height: 281px; text-align: left; }
  .features__title { font-size: 65px; white-space: nowrap; }

  .features__box { position: absolute; z-index: 1; top: 65px; left: calc(50% - 10px); width: 642px; height: 484px; margin: 0; pointer-events: none; }
  .features__box img { top: -68.78px; width: 641.937px; height: 641.937px; }

  .features__grid {
    display: grid;
    grid-template-areas:
      "bonus  bonus    bonus"
      "basket delivery nearby"
      "wallet wallet   nearby";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.0635fr);
    grid-template-rows: 213px 284px 220px;
    gap: 20px;
    margin-top: 20px;
  }

  .feature--bonus, .feature--wallet, .feature--nearby { overflow: hidden; }
  .feature--bonus .feature__title,
  .feature--wallet .feature__title,
  .feature--nearby .feature__title { font: var(--h2); }
  .feature--bonus .feature__text,
  .feature--wallet .feature__text,
  .feature--nearby .feature__text { font: var(--t1); }

  /* bonus banner */
  .feature--bonus {
    grid-area: bonus;
    gap: 0;
    padding: 25px;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1320 213' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(20.479 26.7 -150.22 122.31 431.91 48)'><stop stop-color='rgba(255,107,74,1)' offset='0'/><stop stop-color='rgba(255,157,74,1)' offset='0.5'/><stop stop-color='rgba(255,207,74,1)' offset='1'/></radialGradient></defs></svg>");
  }
  .feature--bonus .feature__title { margin-top: 31px; white-space: nowrap; }
  .feature--bonus .feature__text { max-width: 592px; margin-top: 20px; padding-right: 0; }

  /* basket and delivery: a render, a soft fade, the words at the bottom */
  .feature--basket,
  .feature--delivery {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 25px;
    overflow: hidden;
    /* keeps the basket's blurred fade inside the rounded corners (see .step) */
    clip-path: inset(0 round 30px);
    background: #D3D9D0;
    color: var(--ink);
  }
  .feature--basket   { grid-area: basket; }
  .feature--delivery { grid-area: delivery; }
  .feature--basket .feature__render,
  .feature--delivery .feature__render { display: block; position: absolute; max-width: none; }
  .feature--basket .feature__render   { top: -60px; left: 0; width: 325px; height: 385px; }
  .feature--delivery .feature__render { top: -70px; left: -20px; width: 349px; height: 397px; }
  .feature--basket .feature__fade,
  .feature--delivery .feature__fade { display: block; position: absolute; right: 0; left: 0; }
  .feature--basket .feature__fade {
    top: 160px;
    height: 205px;
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    background: linear-gradient(180deg, rgba(237, 237, 237, 0) 0%, #EDEDED 100%);
  }
  .feature--delivery .feature__fade { top: 98px; height: 186px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%); }
  .feature--basket .feature__copy,
  .feature--delivery .feature__copy { position: relative; display: flex; flex-direction: column; gap: 15px; max-width: 261px; }
  .feature--basket .feature__text,
  .feature--delivery .feature__text { color: var(--ink-muted); }

  /* wallet */
  .feature--wallet {
    grid-area: wallet;
    display: block;
    box-shadow: var(--shadow-up);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 650 220' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-68.79 25.082 -73.491 -10.828 650 0.0000074751)'><stop stop-color='rgba(215,239,192,1)' offset='0'/><stop stop-color='rgba(170,188,153,1)' offset='0.25'/><stop stop-color='rgba(126,137,114,1)' offset='0.5'/><stop stop-color='rgba(103,112,94,1)' offset='0.625'/><stop stop-color='rgba(81,87,75,1)' offset='0.75'/><stop stop-color='rgba(58,61,55,1)' offset='0.875'/><stop stop-color='rgba(36,36,36,1)' offset='1'/></radialGradient></defs></svg>");
  }
  .feature--wallet .feature__copy { position: relative; display: flex; flex-direction: column; gap: 20px; width: 336px; margin-top: 30px; }
  .feature--wallet .feature__text { max-width: none; }
  .feature--wallet .feature__render { display: block; position: absolute; top: -27px; right: 16px; width: 236px; max-width: none; height: 247px; }

  /* cafés nearby */
  .feature--nearby {
    grid-area: nearby;
    display: block;
    padding: 0;
    box-shadow: var(--shadow-up);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 650 524' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(50.642 54.884 -78.765 138.81 110.6 177.3)'><stop stop-color='rgba(50,96,8,1)' offset='0'/><stop stop-color='rgba(74,141,12,1)' offset='0.27987'/><stop stop-color='rgba(98,185,16,1)' offset='0.55973'/><stop stop-color='rgba(135,203,28,1)' offset='0.72698'/><stop stop-color='rgba(173,220,40,1)' offset='0.89423'/></radialGradient></defs></svg>");
  }
  .feature__map {
    display: block;
    position: absolute;
    top: 100px;
    left: 219px;
    width: 493px;
    max-width: none;
    height: 428px;
    border-top-left-radius: 1000px;
    object-fit: cover;
  }
  .feature--nearby .feature__icon  { position: absolute; top: 30px; left: 30px; }
  .feature--nearby .feature__title { position: absolute; top: 100px; right: 30px; left: 30px; }
  .feature--nearby .feature__text  { position: absolute; top: 151px; right: 340px; left: 30px; }
}

/* ==========================================================================
   5. multilingual — the app in its three languages
   ========================================================================== */

.langs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 50px 0 30px;
  background: var(--white);
}
.langs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-inline: 20px;
  text-align: center;
}
.langs__title-row { display: contents; }
.langs__title { max-width: 335px; padding-inline: 10px; }
.langs__text { max-width: 311px; font: var(--t1); color: var(--ink-muted); }

/* the RU / UZ / EN pill that picks a screen (Figma "Language" 479:3878);
   30px below the words and 20px above the screens */
.langs__toggle {
  display: inline-flex;
  order: 3;
  gap: 10px;
  margin-top: 10px;
  padding: 2px;
  border-radius: 10px;
  background: var(--chip-solid);
}
.langs__toggle-item {
  padding: 7px 10px;
  border-radius: 8px;
  font: var(--t4);
  color: var(--green-dark);
  transition: background-color .2s, color .2s;
}
.langs[data-current="ru"] [data-show-lang="ru"],
.langs[data-current="uz"] [data-show-lang="uz"],
.langs[data-current="en"] [data-show-lang="en"] { background: var(--white); color: var(--green); }

/* below the desktop: one screen at a time, one per swipe (a tablet shows its
   neighbours at the sides) */
.langs__cards {
  display: flex;
  gap: 20px;
  /* room to centre the first and last screens */
  padding-inline: max(20px, calc(50% - 167.5px));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
.langs__cards::-webkit-scrollbar { display: none; }

.lang-card {
  position: relative;
  flex: 0 0 100%;
  max-width: 335px;
  height: 362px;
  margin-inline: auto;
  border-radius: 40px;
  background: linear-gradient(180deg, #F5F5F6 0%, rgba(245, 245, 246, 0) 100%);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: box-shadow .3s;
}

.lang-card__status {
  position: absolute;
  top: 0;
  left: 50%;
  width: 334.36px;
  max-width: 100%;
  height: 54.66px;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 40px 40px 0 0;
  background: #F5F5F6;
}
.lang-card__time { position: absolute; top: 19.58px; left: 34.5px; width: 32.075px; height: 14.579px; }
.lang-card__icons { position: absolute; top: 20.55px; right: 29.35px; display: flex; align-items: center; gap: 3.886px; }
.lang-card__network { width: 19.439px; height: 13.607px; }
.lang-card__wifi    { width: 15.551px; height: 13.607px; }
.lang-card__battery { width: 24.299px; height: 13.607px; }

.lang-card__content {
  position: absolute;
  top: 72px;
  right: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lang-card__intro { display: flex; flex-direction: column; gap: 6px; }
.lang-card__title {
  overflow: hidden;
  font: 700 16px/1.2 var(--font-display);
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lang-card__subtitle { font: var(--t14); color: var(--ink-muted); }

.lang-card__stack { display: flex; flex-direction: column; gap: 10px; }
.lang-card__order,
.lang-card__note {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 13.761px;
  border-radius: 13.761px;
  background: var(--white);
}
.lang-card__order { gap: 12.041px; box-shadow: 0 6.88px 20.641px rgba(23, 33, 11, .07); }
/* the screen being shown: on a phone both panels lift (Figma 219:4551) */
.langs[data-current="ru"] [data-lang-card="ru"] :is(.lang-card__order, .lang-card__note),
.langs[data-current="uz"] [data-lang-card="uz"] :is(.lang-card__order, .lang-card__note),
.langs[data-current="en"] [data-lang-card="en"] :is(.lang-card__order, .lang-card__note) {
  box-shadow: 0 3.443px 12.91px rgba(39, 37, 37, .07), 0 -3.443px 12.91px rgba(39, 37, 37, .07);
}
.lang-card__note { gap: 6.88px; }
.lang-card__venue { font: 700 13.761px/normal var(--font); color: #171914; }
.lang-card__item { display: flex; align-items: center; gap: 10.321px; }
.lang-card__dish { flex: none; width: 55.044px; height: 55.044px; border-radius: 8.601px; object-fit: cover; }
.lang-card__item-info { display: flex; flex: 1; flex-direction: column; gap: 4.3px; min-width: 0; font: 400 12.901px/normal var(--font); color: #171914; }
.lang-card__qty { font-size: 10.321px; color: #70746B; white-space: nowrap; }
.lang-card__price { flex: none; font: 700 12.041px/normal var(--font); color: #171914; white-space: nowrap; }
.lang-card__note-label { font: 700 10.321px/normal var(--font); text-transform: uppercase; color: #70746B; }
.lang-card__note-text { font: 400 12.041px/normal var(--font); color: #171914; }

@media (min-width: 768px) and (max-width: 1279px) {
  .langs { padding-block: 60px; }
  .langs__title { max-width: 640px; }
  .langs__text { max-width: 480px; }
}

/* desktop: heading and pill on one row, the screens spread across 1096px */
@media (min-width: 1280px) {
  .langs { gap: 30px; padding: 100px max(60px, calc((100% - 1096px) / 2)); }
  .langs__head { align-items: stretch; padding: 0; text-align: left; }
  .langs__head .eyebrow { align-self: flex-start; }
  .langs__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .langs__title { max-width: 783px; padding: 0; }
  .langs__toggle { order: 0; flex: none; margin: 0; }
  .langs__text { max-width: 478px; }
  .langs__cards { justify-content: space-between; padding: 0; overflow: visible; }
  .lang-card {
    flex: none;
    width: 335px;
    margin: 0;
    background: linear-gradient(180deg, #F5F5F6 0%, rgba(245, 245, 246, .45) 100%);
  }
  /* side by side, the shown screen lifts off the page instead, and only its
     order panel stays raised (Figma 405:12963) */
  .langs[data-current="ru"] [data-lang-card="ru"],
  .langs[data-current="uz"] [data-lang-card="uz"],
  .langs[data-current="en"] [data-lang-card="en"] {
    box-shadow: 0 4px 30px 5px rgba(39, 37, 37, .07), 0 -4px 30px 5px rgba(39, 37, 37, .07);
  }
  .langs[data-current="ru"] [data-lang-card="ru"] .lang-card__note,
  .langs[data-current="uz"] [data-lang-card="uz"] .lang-card__note,
  .langs[data-current="en"] [data-lang-card="en"] .lang-card__note { box-shadow: none; }
}

/* ==========================================================================
   6. more benefits
   ========================================================================== */

/* On a phone and tablet this continues the "What's inside" card: the two
   share one grey background, 100px apart, as in the phone frame. */
.benefits {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: -50px;
  padding: 50px 16px;
  border-radius: 0 0 50px 50px;
  background: var(--card);
}
@media (max-width: 1279px) {
  .features { border-radius: 50px 50px 0 0; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .benefits { margin-top: -30px; padding: 60px 40px; }
}

.benefits__head { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-inline: 10px; text-align: center; }

/* Figma's row is 367 tall for 365px cards */
.benefits__list {
  display: flex;
  gap: 20px;
  margin-inline: -16px;
  padding: 0 16px 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.benefits__list::-webkit-scrollbar { display: none; }

.benefit {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  height: 365px;
  padding: 25px;
  overflow: hidden;
  border-radius: 30px;
  clip-path: inset(0 round 30px);
  background: #D3D9D0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* a tablet shows two at a time, at most phone-card size so the renders keep
   their crop */
@media (min-width: 768px) and (max-width: 1279px) {
  .benefits__list { margin-inline: -40px; padding-inline: 40px; scroll-padding-inline: 40px; }
  .benefit { flex-basis: calc((100% - 20px) / 2); max-width: 343px; }
}

/* each render placed as Figma crops it in a 311 × 365 card, in percent so it
   follows the card's width */
.benefit__img { position: absolute; max-width: none; height: auto; }
.benefit--delivery .benefit__img { top: -15.62%; left: -11.25%; width: 122.51%; }
.benefit--history  .benefit__img,
.benefit--basket   .benefit__img,
.benefit--push     .benefit__img { top: 0; left: 0; width: 99.68%; }
.benefit--comment  .benefit__img { top: -24.11%; left: -11.96%; width: 123.92%; }
.benefit--pay      .benefit__img,
.benefit--ai       .benefit__img { top: 0; left: 0; width: 100%; }

.benefit__fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 205px;
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  background: linear-gradient(180deg, rgba(237, 237, 237, 0) 0%, #EDEDED 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
}
.benefit__copy { position: relative; display: flex; flex-direction: column; gap: 15px; max-width: 261px; }
.benefit__title { font: 600 19px/1.2 var(--font-display); color: var(--ink); }
.benefit__text { font: var(--t14); color: var(--ink-muted); }

@media (min-width: 1280px) {
  .benefits {
    gap: 40px;
    margin-top: 0;
    padding: 40px 60px 100px;
    border-radius: var(--r-section);
    background: linear-gradient(180deg, #F2F3F1 0%, #FFFFFF 100%);
  }
  .benefits__head { align-items: flex-start; padding: 0; text-align: left; }

  .benefits__list { gap: 10px; margin: 0; padding: 0; overflow: visible; }
  .benefit { flex: 1 1 0; min-width: 0; height: 325px; padding: 20px; }
  .benefit--delivery, .benefit--basket { display: none; }
  /* Figma's desktop order */
  .benefit--comment { order: 1; }
  .benefit--push    { order: 2; }
  .benefit--history { order: 3; }
  .benefit--pay     { order: 4; }
  .benefit--ai      { order: 5; }

  /* placements in a 256 × 325 card */
  .benefit--comment .benefit__img { top: -29.85%; left: -18.36%; width: 135.55%; }
  .benefit--push    .benefit__img { top: -3.08%;  left: -7.03%;  width: 107.03%; }
  .benefit--history .benefit__img { top: -8%;     left: 0;       width: 126.95%; }
  .benefit--pay     .benefit__img { top: -7.69%;  left: 0;       width: 126.95%; }
  .benefit--ai      .benefit__img { top: -3.69%;  left: -12.11%; width: 112.11%; }

  .benefit__fade { height: 157px; }
  .benefit__copy { max-width: 216px; }
  .benefit__title { font: 700 16px/1.2 var(--font-display); }
}

/* ==========================================================================
   7. download the app + venue types
   ========================================================================== */

.download { position: relative; padding: 20px; background: var(--white); }

.download__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 480px;
  margin-inline: auto;
  padding: 15px;
  border-radius: 30px;
  background: var(--orange);
}

.download__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.download__badge {
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--green);
  font: 500 12px/1.3 var(--font);
  color: var(--white);
  text-transform: uppercase;
}
.download__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; color: var(--white); }
.download__title { max-width: 288px; font: 600 30px/1 var(--font); }
.download__lead { max-width: 305px; font: var(--t1); }

/* The tilted app icon, the veil and the download chip. On a phone they keep
   Figma's place relative to the end of the words (its lead ends 15px above
   this 105px box), so a longer translation pushes them down instead of
   running under them. */
.download__art { position: relative; height: 105px; }

/* the app icon, tilted, with a white backing behind its see-through shape */
.download__icon {
  position: absolute;
  top: -66.78px;
  left: calc(50% + 4.2px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 229.404px;
  height: 229.404px;
  transform: translateX(-50%);
}
.download__icon-tile { position: relative; width: 180.543px; height: 180.543px; transform: rotate(18.96deg); }
.download__icon-backing { position: absolute; top: 17.98%; left: 15.77%; width: 68.14%; height: 64.04%; background: var(--white); }
.download__icon-tile img { position: relative; width: 100%; height: 100%; }

/* a soft orange band that lets the icon's top melt into the card */
.download__veil {
  position: absolute;
  top: -49.78px;
  left: -15px;
  width: calc(100% + 30px);
  height: 49px;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(179.98deg, #EA8A41 1.961%, #E88941 31.856%, rgba(229, 135, 64, 0) 95.785%);
  filter: blur(7.5px);
}
.download__chip {
  position: absolute;
  top: 48.22px;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-updown);
  color: #000;
}

.download__actions { position: relative; display: flex; flex-direction: column; gap: 15px; }
.download__cta { width: 100%; padding-inline: 18px; }

/* The QR pill runs the width of the button above it, as in the phone frame. */
.download__qr {
  position: relative;
  width: 100%;
  height: 65px;
  filter: drop-shadow(0 4px 10px rgba(39, 37, 37, .1)) drop-shadow(0 -4px 10px rgba(39, 37, 37, .1));
}
/* Figma's pill shape (305 × 65) cut in three so it can stretch: the round QR
   end and the right cap keep their drawing, and the straight middle grows.
   The mask sits on this inner box so the parent's shadow isn't cut away. */
.download__qr-shape {
  position: absolute;
  inset: 0;
  background: linear-gradient(99.22deg, #FFFFFF 0.48%, #EDEDEE 93.2%);
  --pill:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 65'><path d='M100 65H99.5C86.1915 65 74.752 57.0005 69.7261 45.5478C69.0689 44.0504 67.6352 43 66 43C64.3648 43 62.9311 44.0504 62.2739 45.5478C57.248 57.0005 45.8085 65 32.5 65C14.5507 65 0 50.4493 0 32.5C0 14.5507 14.5507 0 32.5 0C45.8085 0 57.248 7.99946 62.2739 19.4522C62.9311 20.9496 64.3648 22 66 22C67.6352 22 69.0689 20.9496 69.7261 19.4522C74.752 7.99946 86.1915 0 99.5 0H100Z'/></svg>") 0 0 / 100px 65px no-repeat,
    linear-gradient(#000 0 0) 99.5px 0 / calc(100% - 132px) 65px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 65'><path d='M0 0H.5C18.449 0 33 14.5507 33 32.5C33 50.4493 18.449 65 .5 65H0Z'/></svg>") 100% 0 / 33px 65px no-repeat;
  -webkit-mask: var(--pill);
          mask: var(--pill);
}
.download__qr-code { position: absolute; top: 15px; left: 15px; width: 35px; height: 35px; }
/* centred on the pill's straight part, 6px left of its middle as in Figma */
.download__qr-text {
  position: absolute;
  top: 19px;
  left: calc((100% + 67px) / 2 - 6px);
  width: 156px;
  transform: translateX(-50%);
  font: 500 12px/1.2 var(--font);
  text-align: center;
  color: #161815;
}

.venues { display: none; }

@media (min-width: 768px) and (max-width: 1279px) {
  .download { padding-inline: 40px; }
}

/* desktop: the orange panel, Figma's layout on the left and the venue grid
   running off its right edge */
@media (min-width: 1280px) {
  .download { height: 675px; padding: 0; overflow: hidden; border-radius: var(--r-section); background: var(--orange); }
  .download__card { position: static; display: block; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; }

  .download__copy { position: absolute; top: 80px; left: 120px; gap: 40px; width: 324px; }
  .download__title { max-width: 324px; font: 500 35px/1 var(--font); }
  .download__lead { max-width: none; font: var(--t14); }

  .download__art { position: static; height: auto; }
  .download__icon { top: 263px; left: 282px; width: 262.186px; height: 262.186px; }
  .download__icon-tile { width: 206.342px; height: 206.342px; }
  .download__veil { top: 272px; left: 120px; width: 335px; }
  .download__chip { top: 361px; left: 173px; }

  .download__actions { position: absolute; top: 484px; left: 120px; width: 315px; }
  .download__cta { padding-inline: 28px; }
  /* on the desktop the pill stays 305 wide under the 315px button */
  .download__qr { width: 305px; }

  .venues {
    position: absolute;
    top: calc(50% + 0.5px);
    left: 548px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 1055px;
    transform: translateY(-50%);
  }
  .venues__row { display: flex; gap: 10px; }
  .venues__row--lower { padding-left: 60px; }

  .venue { position: relative; flex: none; width: 305px; height: 353px; overflow: hidden; border-radius: 30px; }
  .venue__img { position: absolute; max-width: none; }
  .venue--flowers .venue__img     { top: -9px;   left: -52px;  width: 403px; height: 514px; }
  .venue--cafe .venue__img        { top: -224px; left: -168px; width: 633px; height: 729px; }
  .venue--restaurants .venue__img { top: 0;      left: 0;      width: 305px; height: 353px; }
  .venue--shops .venue__img       { top: 0;      left: 0;      width: 335px; height: 500px; }
  .venue--fastfood .venue__img    { top: 0;      left: 0;      width: 335px; height: 514px; }
  .venue--bakeries .venue__img    { top: -4px;   left: 0;      width: 335px; height: 518px; object-fit: cover; }

  /* upper row: words at the bottom over a dark fade; lower row: at the top */
  .venue__caption {
    position: absolute;
    right: 0;
    bottom: -0.5px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 15px;
    min-height: 200px;
    padding: 30px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(52, 53, 54, 0) 0%, #1C1D1E 100%);
  }
  .venues__row--lower .venue__caption {
    top: 0;
    bottom: 0;
    justify-content: flex-start;
    background: linear-gradient(180deg, #1C1D1E 0%, rgba(52, 53, 54, 0) 100%);
  }
  /* Figma sizes this one fade to its words, not to 200px */
  .venue--restaurants .venue__caption { min-height: 0; }
  .venue__title { font: 700 16px/1.2 var(--font-display); color: var(--white); }
  .venue__text { font: var(--t14); color: #BEBDB8; }
  .venue--bakeries .venue__text { max-width: 170px; }
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 20px;
  border-radius: var(--r-section);
  background: var(--card);
}
.faq__head { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-inline: 10px; text-align: center; }
.faq__list { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 650px; }

@media (min-width: 1280px) {
  .faq { gap: 40px; padding: 60px 120px; }
}