/* YANBU FINAL POLISH V6 */

/* AR hero BG camera/visual direction: keep EN unchanged, flip only AR background image layer */
html[dir="rtl"] body.yanbu-site .hero.yanbu-hero .yanbu-real-bg,
body.rtl .hero.yanbu-hero .yanbu-real-bg{
  transform:scaleX(-1) !important;
  transform-origin:center center !important;
  object-position:center center !important;
}

/* AR overlay direction remains readable */
html[dir="rtl"] body.yanbu-site .hero.yanbu-hero::before,
body.rtl .hero.yanbu-hero::before{
  background:linear-gradient(270deg,rgba(2,12,24,.66) 0%,rgba(2,12,24,.42) 44%,rgba(2,12,24,.10) 100%) !important;
}

/* Section 4/5 TV image gap removal: cat UI must fill frame without black empty padding */
#experience .tv-demo,
#experience .tv-card,
#experience .section4-tv-card,
.section4-tv-card,
.tv-card{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

#experience .section4-tv-card{
  padding:10px !important;
  border-radius:28px !important;
}

#experience .section4-tv-ui-holder,
.section4-tv-ui-holder{
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16/9 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  display:block !important;
  background:transparent !important;
}

#experience .section4-tv-ui-img,
.section4-tv-ui-img,
.section4-tv-ui-holder img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:18px !important;
}

/* Remove caption/gap below hero TV if any */
.hero-image-caption{
  display:none !important;
}

/* General mobile readability */
@media(max-width:950px){
  html,body{
    overflow-x:hidden !important;
  }

  .container{
    width:min(100% - 28px,1180px) !important;
    margin-inline:auto !important;
  }

  body.yanbu-site .hero.yanbu-hero .hero-inner,
  body .hero.yanbu-hero#home .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:24px !important;
    padding-top:24px !important;
    padding-bottom:44px !important;
  }

  body.yanbu-site .hero.yanbu-hero .hero-panel.hero-image-panel,
  body .hero.yanbu-hero#home .hero-panel.hero-image-panel{
    order:-1 !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 auto 12px auto !important;
  }

  body.yanbu-site .hero.yanbu-hero .hero-copy,
  body .hero.yanbu-hero#home .hero-copy,
  .hero-copy{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    margin-inline:auto !important;
  }

  .hero-copy .tag,
  .tag{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    max-width:100% !important;
    white-space:normal !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-copy h1,
  html[dir="rtl"] .hero-copy h1,
  body.rtl .hero-copy h1{
    text-align:center !important;
    font-size:clamp(34px,10vw,52px) !important;
    line-height:1.05 !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .hero-copy p,
  .hero-copy .trust-line,
  html[dir="rtl"] .hero-copy p,
  body.rtl .hero-copy p,
  html[dir="rtl"] .hero-copy .trust-line,
  body.rtl .hero-copy .trust-line{
    text-align:center !important;
    max-width:94% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    line-height:1.75 !important;
  }

  .actions{
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
  }

  .actions .btn,
  .btn{
    width:100% !important;
    max-width:340px !important;
    justify-content:center !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .split{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:28px !important;
  }

  .head,
  .head h2,
  .head p,
  .section h2,
  .section p,
  .section article,
  .section article h3,
  .section article p{
    text-align:center !important;
  }

  .chip-row{
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    gap:8px !important;
  }

  .chip-row span{
    text-align:center !important;
    white-space:normal !important;
  }

  .steps.numbered,
  .tv-demo,
  .tv-card,
  .section4-tv-card{
    width:100% !important;
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .steps.numbered span,
  .steps.numbered strong,
  .steps.numbered small,
  .steps.numbered p{
    text-align:center !important;
  }

  .steps.numbered span{
    align-items:center !important;
    justify-content:center !important;
  }

  .grid,
  .grid.three,
  .grid.four{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .grid article{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #experience .section4-tv-card{
    padding:8px !important;
  }

  #experience .section4-tv-ui-holder,
  .section4-tv-ui-holder{
    aspect-ratio:16/9 !important;
    border-radius:16px !important;
  }

  #experience .section4-tv-ui-img,
  .section4-tv-ui-img{
    border-radius:14px !important;
  }
}

@media(max-width:560px){
  .container{
    width:min(100% - 24px,420px) !important;
  }

  .hero-copy h1,
  html[dir="rtl"] .hero-copy h1,
  body.rtl .hero-copy h1{
    font-size:clamp(32px,11vw,44px) !important;
    line-height:1.08 !important;
  }

  .head h2,
  .section h2{
    font-size:clamp(28px,9vw,38px) !important;
    line-height:1.12 !important;
  }

  .hero-copy p,
  .section p,
  article p{
    font-size:15.5px !important;
    line-height:1.75 !important;
  }
}