/* ARABIDS 1.2.116 — inspired by the spacious catalog rhythm of premium
   auction houses, without copying their layouts or artwork. Photographs from
   the client's own identity guide keep their real color; legibility is handled
   by the layout of content surfaces, not by whitening the entire photo. */

:root {
  --arabids-photo-inside-v116: url('../images/brand-atmospheres/app-still-life-v116.jpg');
}

/* Lose the former cream-and-gold THICK seams. A quiet hairline and genuine
   spatial rhythm distinguish chapters, with no extra vertical layout height. */
html body.home :is(.core_benefits_section,.how_it_works_section,.what_is_section,.who_its_for_section,.faq_section),
html body[data-page='home'] :is(.core_benefits_section,.how_it_works_section,.what_is_section,.who_its_for_section,.faq_section) {
  box-shadow: inset 0 1px 0 rgba(164,134,93,.18) !important;
  background-clip: border-box !important;
}
html body.home .hero,
html body[data-page='home'] .hero {
  box-shadow: none !important;
}

/* Editorial image focus alternates left/right; a wide cream reading area
   protects headings while objects at the outer edge retain original colors. */
html body.home .core_benefits_section,
html body[data-page='home'] .core_benefits_section {
  background-color: #faf7f1 !important;
  background-image: linear-gradient(90deg,#faf7f1 0%,rgba(250,247,241,.98) 37%,rgba(250,247,241,.75) 65%,rgba(250,247,241,.07) 100%),var(--arabids-photo-support) !important;
  background-size: cover !important;
  background-position: center,76% center !important;
  background-repeat: no-repeat !important;
}
html body.home .what_is_section,
html body[data-page='home'] .what_is_section {
  background-color: #f8f3eb !important;
  background-image: linear-gradient(90deg,rgba(248,243,235,.10) 0%,rgba(248,243,235,.78) 38%,rgba(248,243,235,.98) 75%,#f8f3eb 100%),var(--arabids-photo-heritage) !important;
  background-size: cover !important;
  background-position: center,26% center !important;
  background-repeat: no-repeat !important;
}
html body.home .who_its_for_section,
html body[data-page='home'] .who_its_for_section {
  background-color: #f3f5ee !important;
  background-image: linear-gradient(90deg,#f3f5ee 0%,rgba(243,245,238,.96) 42%,rgba(243,245,238,.72) 69%,rgba(243,245,238,.12) 100%),var(--arabids-photo-auctions) !important;
  background-size: cover !important;
  background-position: center,80% center !important;
  background-repeat: no-repeat !important;
}
html body.home .faq_section,
html body[data-page='home'] .faq_section {
  background-color: #fbf6f0 !important;
  background-image: linear-gradient(90deg,rgba(251,246,240,.12) 0%,rgba(251,246,240,.77) 41%,rgba(251,246,240,.97) 75%,#fbf6f0 100%),var(--arabids-photo-account) !important;
  background-size: cover !important;
  background-position: center,20% center !important;
  background-repeat: no-repeat !important;
}

/* Real photo behind the phones, stronger on the illustration side. In Arabic
   the phone illustration is left; in English it is right. */
html body.home .hero,
html body[data-page='home'] .hero {
  background-color: #faf8f4 !important;
  background-image: linear-gradient(90deg,rgba(255,253,249,.48) 0%,rgba(255,253,249,.78) 46%,rgba(255,253,249,.98) 100%),var(--arabids-photo-hero) !important;
  background-size: cover !important;
  background-position: center,40% center !important;
}
html:is([dir='ltr'],[data-language='en']) body.home .hero,
html:is([dir='ltr'],[data-language='en']) body[data-page='home'] .hero {
  background-image: linear-gradient(90deg,rgba(255,253,249,.98) 0%,rgba(255,253,249,.78) 54%,rgba(255,253,249,.48) 100%),var(--arabids-photo-hero) !important;
  background-position: center,68% center !important;
}

/* Quietly stagger only one step card on large desktops for a gallery-like
   composition. Never change the four-slide app runway or mobile card order. */
@media (min-width: 1100px) {
  html body.home .core_benefits_section .flex > .item:nth-child(2),
  html body[data-page='home'] .core_benefits_section .flex > .item:nth-child(2) {
    margin-top: -12px !important;
    margin-bottom: 12px !important;
  }
}

/* A newly composed, TEXT-FREE antique still-life replaces both the former
   dark-green showcase and the repeat of burgundy imagery in the app section.
   The photograph lives in a viewport-height sticky layer, so it is visible
   throughout all four scroll slides without stretching or repeating. */
html body.home .how_it_works_section,
html body[data-page='home'] .how_it_works_section,
html body .arabids-elementor-source .how_it_works_section {
  position: relative !important;
  background: #f7f2e9 !important;
  isolation: isolate !important;
}
html body.home .how_it_works_section::before,
html body[data-page='home'] .how_it_works_section::before,
html body .arabids-elementor-source .how_it_works_section::before {
  content: '' !important;
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  inset-inline: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 0 !important;
  margin: 0 0 -100svh !important;
  padding: 0 !important;
  background-color: #f7f2e9 !important;
  background-image: linear-gradient(90deg,rgba(250,247,241,.07),rgba(250,247,241,.18) 50%,rgba(250,247,241,.08)),var(--arabids-photo-inside-v116) !important;
  background-size: cover,cover !important;
  background-position: center,center center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html body.home .how_it_works_section .container-flex,
html body[data-page='home'] .how_it_works_section .container-flex {
  z-index: 2 !important;
}

/* Cards have a defined cream canvas, not a translucent haze covering images. */
html body.home .how_it_works_section .how-it-works-slide-content,
html body[data-page='home'] .how_it_works_section .how-it-works-slide-content {
  background: #fffdf9 !important;
  border: 1px solid rgba(164,134,93,.35) !important;
  box-shadow: 0 16px 38px rgba(20,51,40,.075) !important;
}

/* Phone screens: keep real-color photos in the top 280–350px only, then a
   different warm palette for each chapter. Never tile a background photograph
   or draw a heavy horizontal divider between sections. */
@media (max-width: 991px) {
  html body.home :is(.core_benefits_section,.what_is_section,.who_its_for_section,.faq_section),
  html body[data-page='home'] :is(.core_benefits_section,.what_is_section,.who_its_for_section,.faq_section) {
    box-shadow: inset 0 1px 0 rgba(164,134,93,.14) !important;
    background-size: 100% 100%,auto 400px !important;
    background-repeat: no-repeat !important;
  }
  html body.home .core_benefits_section,
  html body[data-page='home'] .core_benefits_section {
    background-image: linear-gradient(180deg,rgba(250,247,241,.33) 0%,rgba(250,247,241,.80) 150px,#faf7f1 360px),var(--arabids-photo-support) !important;
    background-position: center,72% top !important;
  }
  html body.home .what_is_section,
  html body[data-page='home'] .what_is_section {
    background-image: linear-gradient(180deg,rgba(248,243,235,.40) 0%,rgba(248,243,235,.81) 165px,#f8f3eb 370px),var(--arabids-photo-heritage) !important;
    background-position: center,25% top !important;
  }
  html body.home .who_its_for_section,
  html body[data-page='home'] .who_its_for_section {
    background-image: linear-gradient(180deg,rgba(243,245,238,.40) 0%,rgba(243,245,238,.80) 160px,#f3f5ee 370px),var(--arabids-photo-auctions) !important;
    background-position: center,80% top !important;
  }
  html body.home .faq_section,
  html body[data-page='home'] .faq_section {
    background-image: linear-gradient(180deg,rgba(251,246,240,.41) 0%,rgba(251,246,240,.82) 160px,#fbf6f0 370px),var(--arabids-photo-account) !important;
    background-position: center,22% top !important;
  }
  html body.home .hero,
  html body[data-page='home'] .hero,
  html:is([dir='ltr'],[data-language='en']) body.home .hero,
  html:is([dir='ltr'],[data-language='en']) body[data-page='home'] .hero {
    background-image: linear-gradient(180deg,rgba(255,253,249,.91),rgba(255,253,249,.73) 61%,rgba(255,253,249,.84)),var(--arabids-photo-hero) !important;
    background-position: center,68% top !important;
  }
  html body.home .how_it_works_section::before,
  html body[data-page='home'] .how_it_works_section::before,
  html body .arabids-elementor-source .how_it_works_section::before {
    background-image: linear-gradient(180deg,rgba(250,247,241,.07),rgba(250,247,241,.22)),var(--arabids-photo-inside-v116) !important;
    background-position: center,24% center !important;
    background-size: cover,auto 100svh !important;
  }
}

@media (max-width: 520px) {
  html body.home :is(.core_benefits_section,.what_is_section,.who_its_for_section,.faq_section),
  html body[data-page='home'] :is(.core_benefits_section,.what_is_section,.who_its_for_section,.faq_section) {
    background-size: 100% 100%,auto 340px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.home .how_it_works_section::before,
  html body[data-page='home'] .how_it_works_section::before {background-attachment:scroll !important;}
}