/*
 * Hero layout v11 — requested composition cleanup.
 * - remove trust chips and secondary CTA from the copy block
 * - four rotating photos remain in one collective row with the original middle slot left empty
 * - primary CTA sits in that preserved empty center slot without joining the rotation
 * - photo row spans almost the full viewport width while photo heights stay unchanged
 * - wheel viewport no longer clips the top/shadows of photos during rotation
 * - text rhythm is relaxed and intentional
 */

html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-header-safe:86px;
  --hero-photo-zone:clamp(250px,47dvh,345px);
  height:100dvh!important;
  min-height:620px!important;
  max-height:none!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Copy: only eyebrow + title + paragraph remain. */
html body.home-page.v4-page #top > .v4-hero-shell.container{
  position:absolute!important;
  inset:var(--hero-header-safe) 0 var(--hero-photo-zone) 0!important;
  width:min(980px,calc(100% - 48px))!important;
  min-height:0!important;
  margin-inline:auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  z-index:8!important;
}
html body.home-page.v4-page #top .v4-hero-copy{
  width:min(850px,92vw)!important;
  margin:0 auto!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
html body.home-page.v4-page #top .v4-eyebrow{
  margin:0 0 20px!important;
  font-size:.78rem!important;
  line-height:1.35!important;
}
html body.home-page.v4-page #top .v4-hero-copy h1{
  margin:0!important;
  font-size:clamp(3rem,5.45vw,5.15rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
html body.home-page.v4-page #top .v4-hero-copy>p{
  max-width:650px!important;
  margin:22px auto 0!important;
  font-size:.97rem!important;
  line-height:1.95!important;
}
html body.home-page.v4-page #top .v4-hero-actions,
html body.home-page.v4-page #top .v4-hero-chips{display:none!important}

/* Photo stage: large free canvas, no clipping/mask above the cards. */
html body.home-page.v4-page #heroPhotoWheel{
  position:absolute!important;
  inset:auto 0 0 0!important;
  width:100%!important;
  height:var(--hero-photo-zone)!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  contain:none!important;
  clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:12!important;
  pointer-events:none!important;
}
html body.home-page.v4-page #heroPhotoWheel::before,
html body.home-page.v4-page #heroPhotoWheel::after{
  content:none!important;
  display:none!important;
}
html body.home-page.v4-page #heroPhotoTrack{
  position:absolute!important;
  inset:-42px 0 0!important;
  width:100%!important;
  height:calc(100% + 42px)!important;
  margin:0!important;
  padding:42px 0 5px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:visible!important;
  clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  perspective:1200px!important;
  perspective-origin:50% 58%!important;
  transform:none!important;
  animation:none!important;
}

/* Exactly five horizontal slots: photo / photo / EMPTY / photo / photo.
   The entire grid remains the one object rotated by hero-photo-row-v8.js. */
html body.home-page.v4-page #heroPhotoRow{
  position:relative!important;
  width:92vw!important;
  max-width:none!important;
  height:calc(100% - 8px)!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:.72fr 1.36fr 1.55fr 1.36fr .72fr!important;
  column-gap:clamp(14px,1.55vw,24px)!important;
  align-items:end!important;
  justify-content:stretch!important;
  opacity:1!important;
  visibility:visible!important;
  transform-origin:50% 57%!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  overflow:visible!important;
}
html body.home-page.v4-page #heroPhotoRow > .lm-tile,
html body.home-page.v4-page #heroPhotoRow > .hero-photo-gap{
  min-width:0!important;
  width:100%!important;
  justify-self:stretch!important;
  align-self:end!important;
}

/* Preserve current requested heights; widen only. */
html body.home-page.v4-page #heroPhotoRow .lm-wheel-rose{height:222px!important;aspect-ratio:auto!important}
html body.home-page.v4-page #heroPhotoRow .lm-wheel-portrait{height:232px!important;aspect-ratio:auto!important}
html body.home-page.v4-page #heroPhotoRow .hero-photo-gap{height:238px!important;display:block!important;visibility:hidden!important;pointer-events:none!important}
html body.home-page.v4-page #heroPhotoRow .lm-wheel-group{height:234px!important;aspect-ratio:auto!important}
html body.home-page.v4-page #heroPhotoRow .lm-wheel-redhead{height:226px!important;aspect-ratio:auto!important}
html body.home-page.v4-page #heroPhotoRow > .lm-tile{
  overflow:hidden!important;
  border-radius:24px!important;
  box-shadow:0 18px 44px rgba(8,9,28,.18)!important;
}

/* Primary CTA occupies the visual center of the removed photo's slot.
   It is deliberately outside #heroPhotoRow so it stays readable while the row rotates. */
html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
  position:absolute!important;
  left:50%!important;
  top:42%!important;
  transform:translate(-50%,-50%)!important;
  z-index:40!important;
  min-height:46px!important;
  padding:10px 22px!important;
  font-size:.86rem!important;
  white-space:nowrap!important;
  pointer-events:auto!important;
  box-shadow:0 14px 34px rgba(8,10,35,.18)!important;
}

/* Short desktop browser windows / common Windows scaling. */
@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-header-safe:82px;
    --hero-photo-zone:clamp(245px,45dvh,300px);
    min-height:560px!important;
  }
  html body.home-page.v4-page #top > .v4-hero-shell.container{
    inset:var(--hero-header-safe) 0 calc(var(--hero-photo-zone) + 14px) 0!important;
  }
  html body.home-page.v4-page #top .v4-eyebrow{margin-bottom:13px!important;font-size:.7rem!important}
  html body.home-page.v4-page #top .v4-hero-copy h1{font-size:clamp(2.5rem,7.4dvh,3.65rem)!important;line-height:.96!important}
  html body.home-page.v4-page #top .v4-hero-copy>p{margin-top:14px!important;font-size:clamp(.76rem,1.55dvh,.9rem)!important;line-height:1.72!important}
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-rose{height:206px!important}
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-portrait{height:220px!important}
  html body.home-page.v4-page #heroPhotoRow .hero-photo-gap{height:226px!important}
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-group{height:222px!important}
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-redhead{height:210px!important}
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{top:39%!important;min-height:42px!important;padding:8px 19px!important;font-size:.79rem!important}
}

/* Phones: retain the same composition without horizontal overflow. */
@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-header-safe:70px;
    --hero-photo-zone:245px;
    min-height:680px!important;
    height:max(680px,100dvh)!important;
  }
  html body.home-page.v4-page #top > .v4-hero-shell.container{
    inset:var(--hero-header-safe) 0 calc(var(--hero-photo-zone) + 22px) 0!important;
    width:92vw!important;
  }
  html body.home-page.v4-page #top .v4-hero-copy{width:92vw!important}
  html body.home-page.v4-page #top .v4-eyebrow{margin-bottom:13px!important;font-size:.7rem!important}
  html body.home-page.v4-page #top .v4-hero-copy h1{font-size:clamp(2.15rem,10.2vw,2.85rem)!important;line-height:1!important}
  html body.home-page.v4-page #top .v4-hero-copy>p{max-width:335px!important;margin-top:16px!important;font-size:.82rem!important;line-height:1.75!important}
  html body.home-page.v4-page #heroPhotoWheel{height:var(--hero-photo-zone)!important}
  html body.home-page.v4-page #heroPhotoTrack{inset:-28px 0 0!important;height:calc(100% + 28px)!important;padding-top:28px!important}
  html body.home-page.v4-page #heroPhotoRow{
    width:94vw!important;
    grid-template-columns:.72fr 1.36fr 1.58fr 1.36fr .72fr!important;
    column-gap:clamp(5px,1.8vw,8px)!important;
  }
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-rose{height:150px!important}
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-portrait{height:160px!important}
  html body.home-page.v4-page #heroPhotoRow .hero-photo-gap{height:168px!important}
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-group{height:162px!important}
  html body.home-page.v4-page #heroPhotoRow .lm-wheel-redhead{height:153px!important}
  html body.home-page.v4-page #heroPhotoRow > .lm-tile{border-radius:17px!important}
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{top:38%!important;min-height:40px!important;padding:8px 16px!important;font-size:.74rem!important}
}

@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{min-height:650px!important;height:max(650px,100dvh)!important}
  html body.home-page.v4-page #top .v4-hero-copy h1{font-size:clamp(1.95rem,10vw,2.5rem)!important}
  html body.home-page.v4-page #top .v4-hero-copy>p{font-size:.78rem!important}
  html body.home-page.v4-page #heroPhotoRow{width:95vw!important;column-gap:5px!important}
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{font-size:.69rem!important;padding-inline:13px!important}
}

/* Final visual tuning after render review. */
html body.home-page.v4-page #top .v4-hero-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
html body.home-page.v4-page #top .v4-eyebrow{margin:0 0 20px!important}
html body.home-page.v4-page #top .v4-hero-copy h1{margin:0!important}
html body.home-page.v4-page #top .v4-hero-copy>p{margin:22px auto 0!important}
html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{top:46%!important}
@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top .v4-eyebrow{margin-bottom:15px!important}
  html body.home-page.v4-page #top .v4-hero-copy>p{margin-top:16px!important}
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{top:40%!important}
}
@media (max-width:620px){
  html body.home-page.v4-page #top .v4-eyebrow{margin-bottom:15px!important}
  html body.home-page.v4-page #top .v4-hero-copy>p{margin-top:17px!important}
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{top:46%!important}
}

/* Rotation clipping fix: preserve the original flat collective Y-turn, but remove
   perspective scaling that enlarged card tops outside the photo stage. */
html body.home-page.v4-page #heroPhotoTrack{
  perspective:none!important;
  perspective-origin:50% 50%!important;
}
html body.home-page.v4-page #heroPhotoRow{
  transform:rotateY(0deg) translateZ(0)!important;
  transform-style:flat!important;
}
@media (max-width:620px){
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
    min-height:38px!important;
    padding:7px 10px!important;
    font-size:.68rem!important;
  }
}

/* Requested adjustment: enlarge only the centered "مشاهده بلاگرها" CTA by 30%.
   Keep its existing center point unchanged between the rotating photos. */
html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
  transform:translate(-50%,-50%) scale(1.3)!important;
  transform-origin:center center!important;
}

/* Requested composition lift: move the complete photo stage (all four photos +
   centered CTA) upward as one unit, while preserving a safe visual gap below
   the hero copy. Values are reduced on shorter screens to avoid text overlap. */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-photo-lift:92px;
}
html body.home-page.v4-page #heroPhotoWheel{
  bottom:var(--hero-photo-lift)!important;
}
@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-lift:62px;
  }
}
@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-lift:58px;
  }
}
@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-lift:48px;
  }
}

/* Requested refinement:
   - enlarge the centered CTA an additional 15% over the already-grown size
   - make the rotating photos square (equal width/height)
   - increase the visual size of the rotating photo cards by about 20%
   - lift the entire photo stage a bit closer to the hero copy without overlap */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-photo-lift:112px;
}
html body.home-page.v4-page #heroPhotoWheel{
  bottom:var(--hero-photo-lift)!important;
}
html body.home-page.v4-page #heroPhotoRow{
  width:96vw!important;
  grid-template-columns:1fr 1.25fr 1.4fr 1.25fr 1fr!important;
  column-gap:clamp(10px,1.15vw,18px)!important;
  align-items:end!important;
}
html body.home-page.v4-page #heroPhotoRow .lm-wheel-rose,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-portrait,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-group,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-redhead,
html body.home-page.v4-page #heroPhotoRow .hero-photo-gap{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
}
html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
  transform:translate(-50%,-50%) scale(1.495)!important;
  top:44%!important;
  transform-origin:center center!important;
}

@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-lift:74px;
  }
  html body.home-page.v4-page #heroPhotoRow{
    width:95vw!important;
    column-gap:clamp(8px,1vw,15px)!important;
  }
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
    top:42%!important;
  }
}

@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-lift:70px;
  }
  html body.home-page.v4-page #heroPhotoRow{
    width:132vw!important;
    grid-template-columns:1fr 1.22fr 1.34fr 1.22fr 1fr!important;
    column-gap:6px!important;
  }
  html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
    top:44%!important;
  }
}

@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-lift:58px;
  }
  html body.home-page.v4-page #heroPhotoRow{
    width:138vw!important;
    column-gap:5px!important;
  }
}


/* Requested refinement:
   - all four rotating photos must be true squares
   - all four photo cards should share the same size
   - increase their visible height by about 20% compared with the previous square pass */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-square-gap:clamp(10px,1.15vw,18px);
  --hero-square-size:clamp(188px,15.7vw,226px);
}
html body.home-page.v4-page #heroPhotoRow{
  width:fit-content!important;
  grid-template-columns:repeat(5,var(--hero-square-size))!important;
  column-gap:var(--hero-square-gap)!important;
  justify-content:center!important;
  align-items:end!important;
}
html body.home-page.v4-page #heroPhotoRow > .lm-tile,
html body.home-page.v4-page #heroPhotoRow > .hero-photo-gap,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-rose,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-portrait,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-group,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-redhead{
  width:var(--hero-square-size)!important;
  min-width:var(--hero-square-size)!important;
  max-width:var(--hero-square-size)!important;
  height:var(--hero-square-size)!important;
  min-height:var(--hero-square-size)!important;
  max-height:var(--hero-square-size)!important;
  aspect-ratio:1 / 1!important;
}
html body.home-page.v4-page #heroPhotoRow > .hero-photo-gap{
  display:block!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:clamp(8px,1vw,14px);
    --hero-square-size:clamp(168px,15vw,198px);
  }
}

@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:6px;
    --hero-square-size:108px;
  }
  html body.home-page.v4-page #heroPhotoRow{
    grid-template-columns:repeat(5,var(--hero-square-size))!important;
    column-gap:var(--hero-square-gap)!important;
  }
}

@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:5px;
    --hero-square-size:94px;
  }
}


/* Requested update:
   - return to collective row rotation (handled in JS)
   - enlarge the square rotating photos by about 30% while keeping width and height equal */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-square-gap:clamp(10px,1.05vw,16px);
  --hero-square-size:clamp(244px,20.4vw,294px);
}
html body.home-page.v4-page #heroPhotoRow{
  width:fit-content!important;
  grid-template-columns:repeat(5,var(--hero-square-size))!important;
  column-gap:var(--hero-square-gap)!important;
}
html body.home-page.v4-page #heroPhotoRow > .lm-tile,
html body.home-page.v4-page #heroPhotoRow > .hero-photo-gap,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-rose,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-portrait,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-group,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-redhead{
  width:var(--hero-square-size)!important;
  min-width:var(--hero-square-size)!important;
  max-width:var(--hero-square-size)!important;
  height:var(--hero-square-size)!important;
  min-height:var(--hero-square-size)!important;
  max-height:var(--hero-square-size)!important;
  aspect-ratio:1 / 1!important;
}

@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:clamp(8px,.9vw,13px);
    --hero-square-size:clamp(206px,18.4vw,258px);
  }
}

@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:6px;
    --hero-square-size:140px;
  }
  html body.home-page.v4-page #heroPhotoRow{
    grid-template-columns:repeat(5,var(--hero-square-size))!important;
    column-gap:var(--hero-square-gap)!important;
  }
}

@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:5px;
    --hero-square-size:122px;
  }
}


/* Requested update:
   - increase the height of the four rotating photos by an additional 30%
   - keep the current row rotation behavior intact
   - keep the widths unchanged and only stretch the vertical size */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-photo-card-height:calc(var(--hero-square-size) * 1.56);
}
html body.home-page.v4-page #heroPhotoRow > .lm-tile,
html body.home-page.v4-page #heroPhotoRow > .hero-photo-gap,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-rose,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-portrait,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-group,
html body.home-page.v4-page #heroPhotoRow .lm-wheel-redhead{
  height:var(--hero-photo-card-height)!important;
  min-height:var(--hero-photo-card-height)!important;
  max-height:var(--hero-photo-card-height)!important;
  aspect-ratio:auto!important;
}


/* Requested layer behavior:
   rotating photos must visually pass IN FRONT of the centered CTA when their
   collective Y-rotation crosses the middle slot. The CTA remains clickable
   whenever it is not visually covered by a photo. */
html body.home-page.v4-page #heroPhotoTrack{
  z-index:60!important;
  pointer-events:none!important;
}
html body.home-page.v4-page #heroPhotoRow{
  z-index:60!important;
}
html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
  z-index:30!important;
}


/* Requested 3D overlap behavior:
   - left-side photos remain behind the CTA
   - right-side photos pass in front of the CTA
   - keep the row rotating as one collective strip by splitting it into a back
     left-half layer and a front right-half clone layer with identical motion */
html body.home-page.v4-page #heroPhotoTrack{
  z-index:32!important;
  clip-path:inset(0 50% 0 0)!important;
  pointer-events:none!important;
}
html body.home-page.v4-page #heroPhotoTrackFront{
  position:absolute!important;
  inset:inherit!important;
  inset-block-start:-42px!important;
  inset-inline:0!important;
  width:100%!important;
  height:calc(100% + 42px)!important;
  margin:0!important;
  padding:42px 0 5px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:visible!important;
  clip-path:inset(0 0 0 50%)!important;
  mask:none!important;
  -webkit-mask:none!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:58!important;
  pointer-events:none!important;
}
html body.home-page.v4-page #heroPhotoRowFront{
  position:relative!important;
  width:inherit!important;
  height:calc(100% - 8px)!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:inherit!important;
  column-gap:inherit!important;
  align-items:end!important;
  justify-content:center!important;
  opacity:1!important;
  visibility:visible!important;
  transform-origin:50% 57%!important;
  transform-style:flat!important;
  backface-visibility:visible!important;
  overflow:visible!important;
  z-index:58!important;
}
html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
  z-index:44!important;
}
@media (max-width:620px){
  html body.home-page.v4-page #heroPhotoTrackFront{
    inset-block-start:-28px!important;
    height:calc(100% + 28px)!important;
    padding-top:28px!important;
  }
}


html body.home-page.v4-page #heroPhotoRowFront > .lm-tile > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}


/* Final refinement:
   - keep the left/right over-under behavior correct through the full 360° turn
   - show full photo bottoms without lifting the photos or reducing their height */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  overflow:visible!important;
  position:relative!important;
  isolation:isolate!important;
  z-index:20!important;
}
html body.home-page.v4-page #heroPhotoWheel{
  z-index:28!important;
  overflow:visible!important;
}
html body.home-page.v4-page #heroPhotoTrack{
  z-index:32!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  overflow:visible!important;
  padding-bottom:32px!important;
  height:calc(100% + 74px)!important;
}
html body.home-page.v4-page #heroPhotoRow{
  z-index:32!important;
}
html body.home-page.v4-page #heroPhotoTrackFront{
  position:absolute!important;
  z-index:58!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  overflow:visible!important;
  pointer-events:none!important;
  padding-bottom:32px!important;
  height:calc(100% + 74px)!important;
}
html body.home-page.v4-page #heroPhotoRowFront{
  z-index:58!important;
}
html body.home-page.v4-page #heroPhotoWheel > .hero-photo-cta{
  z-index:44!important;
}
html body.home-page.v4-page #benefits-home,
html body.home-page.v4-page .v4-benefit-intro{
  position:relative!important;
  z-index:1!important;
}
@media (max-width:620px){
  html body.home-page.v4-page #heroPhotoTrack{
    padding-bottom:24px!important;
    height:calc(100% + 52px)!important;
  }
  html body.home-page.v4-page #heroPhotoTrackFront{
    padding-bottom:24px!important;
    height:calc(100% + 52px)!important;
  }
}


/* Requested spacing fix:
   - extend the colored hero background downward so the rotating photos fully sit inside it
   - push the "مزایای آی‌بلاگر" intro box down enough that the rotating photos never overlap it
   - preserve the current photo size; do not reduce height */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-bottom-extend:170px;
  min-height:calc(620px + var(--hero-bottom-extend))!important;
  height:calc(100dvh + var(--hero-bottom-extend))!important;
  padding-bottom:var(--hero-bottom-extend)!important;
}
html body.home-page.v4-page #heroPhotoWheel{
  bottom:calc(var(--hero-photo-lift) + var(--hero-bottom-extend))!important;
}
html body.home-page.v4-page #benefits-home,
html body.home-page.v4-page .v4-benefit-intro{
  padding-top:118px!important;
  margin-top:0!important;
}
html body.home-page.v4-page #benefits-home > .container.v4-split-card,
html body.home-page.v4-page .v4-benefit-intro > .container.v4-split-card{
  margin-top:0!important;
}

@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-bottom-extend:126px;
    min-height:calc(560px + var(--hero-bottom-extend))!important;
    height:calc(100dvh + var(--hero-bottom-extend))!important;
  }
  html body.home-page.v4-page #benefits-home,
  html body.home-page.v4-page .v4-benefit-intro{
    padding-top:94px!important;
  }
}

@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-bottom-extend:108px;
    min-height:calc(680px + var(--hero-bottom-extend))!important;
    height:calc(100dvh + var(--hero-bottom-extend))!important;
  }
  html body.home-page.v4-page #benefits-home,
  html body.home-page.v4-page .v4-benefit-intro{
    padding-top:82px!important;
  }
}

@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-bottom-extend:92px;
    min-height:calc(650px + var(--hero-bottom-extend))!important;
    height:calc(100dvh + var(--hero-bottom-extend))!important;
  }
  html body.home-page.v4-page #benefits-home,
  html body.home-page.v4-page .v4-benefit-intro{
    padding-top:72px!important;
  }
}


/* Video-review master calibration:
   - reserve a true safe area for the hero text
   - keep the full rotating-photo envelope inside the purple hero background
   - keep the next white benefit section fully below the rotating photos
   - preserve photo height while reducing visual collisions */
html body.home-page.v4-page #top.v4-home-hero.lm-hero{
  --hero-photo-floor:120px;
  --hero-benefit-clear:164px;
  min-height:max(1120px,calc(100dvh + 340px))!important;
  height:max(1120px,calc(100dvh + 340px))!important;
  padding-bottom:0!important;
  overflow:visible!important;
}
html body.home-page.v4-page #top > .v4-hero-shell.container{
  inset:86px 0 auto 0!important;
  width:min(920px,calc(100% - 56px))!important;
  min-height:0!important;
  height:auto!important;
  align-items:flex-start!important;
  padding-top:8px!important;
}
html body.home-page.v4-page #top .v4-hero-copy{
  width:min(760px,90vw)!important;
}
html body.home-page.v4-page #top .v4-hero-copy h1{
  font-size:clamp(2.9rem,4.9vw,4.8rem)!important;
}
html body.home-page.v4-page #top .v4-hero-copy>p{
  max-width:620px!important;
}
html body.home-page.v4-page #heroPhotoWheel{
  height:calc(var(--hero-photo-card-height) + 120px)!important;
  inset:auto 0 var(--hero-photo-floor) 0!important;
  bottom:var(--hero-photo-floor)!important;
  z-index:28!important;
}
html body.home-page.v4-page #heroPhotoTrack,
html body.home-page.v4-page #heroPhotoTrackFront{
  inset:-18px 0 -6px!important;
  height:calc(100% + 24px)!important;
  padding:18px 0 24px!important;
  overflow:visible!important;
  perspective:1700px!important;
  perspective-origin:50% 56%!important;
}
html body.home-page.v4-page #heroPhotoRow,
html body.home-page.v4-page #heroPhotoRowFront{
  transform-style:preserve-3d!important;
  transform-origin:50% 56%!important;
}
html body.home-page.v4-page #benefits-home,
html body.home-page.v4-page .v4-benefit-intro{
  padding-top:var(--hero-benefit-clear)!important;
  margin-top:0!important;
}

@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-floor:96px;
    --hero-benefit-clear:140px;
    min-height:max(980px,calc(100dvh + 270px))!important;
    height:max(980px,calc(100dvh + 270px))!important;
  }
  html body.home-page.v4-page #top > .v4-hero-shell.container{
    inset:80px 0 auto 0!important;
  }
  html body.home-page.v4-page #heroPhotoWheel{
    height:calc(var(--hero-photo-card-height) + 98px)!important;
  }
}

@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-floor:84px;
    --hero-benefit-clear:118px;
    min-height:max(900px,calc(100dvh + 210px))!important;
    height:max(900px,calc(100dvh + 210px))!important;
  }
  html body.home-page.v4-page #top > .v4-hero-shell.container{
    inset:74px 0 auto 0!important;
    width:min(94vw,620px)!important;
  }
  html body.home-page.v4-page #top .v4-hero-copy h1{
    font-size:clamp(2.05rem,7vw,3.1rem)!important;
  }
  html body.home-page.v4-page #top .v4-hero-copy>p{
    font-size:.8rem!important;
    line-height:1.8!important;
  }
  html body.home-page.v4-page #heroPhotoWheel{
    height:calc(var(--hero-photo-card-height) + 86px)!important;
    inset:auto 0 var(--hero-photo-floor) 0!important;
  }
  html body.home-page.v4-page #heroPhotoTrack,
  html body.home-page.v4-page #heroPhotoTrackFront{
    inset:-14px 0 -4px!important;
    height:calc(100% + 18px)!important;
    padding:14px 0 18px!important;
    perspective:1450px!important;
  }
}

@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-floor:76px;
    --hero-benefit-clear:104px;
    min-height:max(860px,calc(100dvh + 180px))!important;
    height:max(860px,calc(100dvh + 180px))!important;
  }
}


/* Final pass refinements after video audit:
   - soften perspective so side cards do not balloon at the edges
   - keep all hero visuals comfortably inside the stage */
html body.home-page.v4-page #heroPhotoTrack,
html body.home-page.v4-page #heroPhotoTrackFront{
  perspective:2600px!important;
  perspective-origin:50% 58%!important;
}
@media (max-width:620px){
  html body.home-page.v4-page #heroPhotoTrack,
  html body.home-page.v4-page #heroPhotoTrackFront{
    perspective:2200px!important;
  }
}


/* Requested hero-copy vertical placement:
   place the complete copy group visually between the fixed header and the
   rotating-photo stage without changing photo geometry. */
html body.home-page.v4-page #top > .v4-hero-shell.container{
  inset:166px 0 auto 0!important;
}
@media (min-width:621px) and (max-height:760px){
  html body.home-page.v4-page #top > .v4-hero-shell.container{
    inset:152px 0 auto 0!important;
  }
}
@media (max-width:620px){
  html body.home-page.v4-page #top > .v4-hero-shell.container{
    inset:150px 0 auto 0!important;
  }
}
@media (max-width:370px){
  html body.home-page.v4-page #top > .v4-hero-shell.container{
    inset:138px 0 auto 0!important;
  }
}


/* Requested mobile hero compaction:
   desktop composition stays unchanged; on phones remove the excessive empty
   band between the hero copy and the rotating photo row while preserving a
   safe gap above the following section. */
@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-floor:45px!important;
    --hero-benefit-clear:82px!important;
    min-height:clamp(650px,80dvh,700px)!important;
    height:clamp(650px,80dvh,700px)!important;
    padding-bottom:0!important;
  }
  html body.home-page.v4-page #heroPhotoWheel{
    bottom:var(--hero-photo-floor)!important;
    inset:auto 0 var(--hero-photo-floor) 0!important;
  }
  html body.home-page.v4-page #benefits-home,
  html body.home-page.v4-page .v4-benefit-intro{
    padding-top:var(--hero-benefit-clear)!important;
  }
}
@media (max-width:370px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-photo-floor:30px!important;
    --hero-benefit-clear:68px!important;
    min-height:620px!important;
    height:620px!important;
  }
}


/* Mobile photo-row fit: desktop dimensions remain untouched.
   The full four-photo row plus the center CTA slot stays inside the viewport. */
@media (max-width:620px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:4px!important;
    --hero-square-size:clamp(56px,17.8vw,82px)!important;
  }
  html body.home-page.v4-page #heroPhotoRow,
  html body.home-page.v4-page #heroPhotoRowFront{
    width:fit-content!important;
    max-width:calc(100vw - 12px)!important;
    grid-template-columns:repeat(5,var(--hero-square-size))!important;
    column-gap:var(--hero-square-gap)!important;
    margin-inline:auto!important;
  }
  html body.home-page.v4-page #heroPhotoRow > .lm-tile,
  html body.home-page.v4-page #heroPhotoRow > .hero-photo-gap,
  html body.home-page.v4-page #heroPhotoRowFront > .lm-tile,
  html body.home-page.v4-page #heroPhotoRowFront > .hero-photo-gap{
    width:var(--hero-square-size)!important;
    min-width:var(--hero-square-size)!important;
    max-width:var(--hero-square-size)!important;
  }
}
@media (max-width:360px){
  html body.home-page.v4-page #top.v4-home-hero.lm-hero{
    --hero-square-gap:3px!important;
    --hero-square-size:17.6vw!important;
  }
}