/* LIFTINGBEAM_HOME_HERO_FINAL_START */

.lbh-hero,
.lbh-hero *{
  box-sizing:border-box;
}

.lbh-hero{
  width:100%;
  min-height:clamp(720px,88vh,940px);

  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  color:#18344d;

  background:
    radial-gradient(
      circle at 12% 48%,
      rgba(12,83,165,.11),
      transparent 29%
    ),
    radial-gradient(
      circle at 83% 22%,
      rgba(44,141,230,.07),
      transparent 25%
    ),
    linear-gradient(
      118deg,
      #ffffff 0%,
      #fbfcfd 48%,
      #eef3f7 100%
    );

  isolation:isolate;
}

/* خط آبی مهندسی بالای هیرو */
.lbh-hero::before{
  content:"";

  width:clamp(140px,18vw,290px);
  height:4px;

  position:absolute;
  top:0;
  right:clamp(20px,5vw,88px);
  z-index:4;

  background:
    linear-gradient(
      90deg,
      #69b8fa,
      #0c53a5
    );
}

/* نوشته بسیار محو پس‌زمینه */
.lbh-hero::after{
  content:"LIFTING BEAM";

  position:absolute;
  left:-20px;
  bottom:75px;
  z-index:-1;

  color:rgba(2,32,65,.025);

  font-family:Arial,sans-serif;
  font-size:clamp(80px,11vw,185px);
  font-weight:900;
  line-height:1;
  letter-spacing:-8px;

  direction:ltr;
  white-space:nowrap;
}

.lbh-hero__technical-grid{
  position:absolute;
  inset:0;
  z-index:-3;

  opacity:.42;

  background-image:
    linear-gradient(
      rgba(2,32,65,.037) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(2,32,65,.037) 1px,
      transparent 1px
    );

  background-size:56px 56px;

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      rgba(0,0,0,.70) 48%,
      transparent 90%
    );
}

.lbh-hero__halo{
  width:720px;
  height:720px;

  position:absolute;
  left:-265px;
  top:50%;
  z-index:-2;

  border:1px solid rgba(12,83,165,.08);
  border-radius:50%;

  box-shadow:
    0 0 0 85px rgba(12,83,165,.018),
    0 0 0 170px rgba(12,83,165,.010);

  transform:translateY(-52%);
}

.lbh-hero__inner{
  width:min(1600px,100%);
  min-height:670px;

  margin-inline:auto;

  padding:
    clamp(125px,10vw,155px)
    clamp(22px,5vw,92px)
    clamp(48px,5vw,76px);

  display:grid;
  grid-template-columns:
    minmax(620px,1.15fr)
    minmax(470px,.85fr);

  grid-template-areas:
    "visual content";

  align-items:center;
  gap:clamp(35px,5vw,85px);
}

.lbh-hero__content{
  grid-area:content;

  max-width:720px;
  justify-self:end;
}

.lbh-hero__eyebrow{
  margin-bottom:20px;

  display:flex;
  align-items:center;
  gap:12px;

  direction:ltr;
}

.lbh-hero__eyebrow>span{
  min-width:44px;
  height:30px;
  padding:0 10px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(12,83,165,.24);
  border-radius:3px;

  color:#0c53a5;
  background:rgba(12,83,165,.045);

  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.lbh-hero__eyebrow>i{
  width:38px;
  height:1px;

  display:block;

  background:#0c53a5;
}

.lbh-hero__eyebrow>strong{
  color:#0c53a5;

  font-size:9px;
  font-weight:900;
  letter-spacing:1.4px;
}

.lbh-hero h1{
  max-width:750px;
  margin:0;

  color:#022041;

  font-size:clamp(47px,4.7vw,78px);
  font-weight:900;
  line-height:1.27;
  letter-spacing:-1.8px;

  text-wrap:balance;
}

.lbh-hero h1 em{
  display:block;
  margin-top:5px;

  color:#0c53a5;
  font-style:normal;
}

.lbh-hero__lead{
  max-width:680px;
  margin:25px 0 0;
  padding-right:23px;

  border-right:2px solid #0c53a5;

  color:#536879;

  font-size:clamp(14px,1.05vw,17px);
  font-weight:550;
  line-height:2.1;
}

.lbh-hero__actions{
  margin-top:31px;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:11px;
}

.lbh-hero__button{
  min-height:54px;
  padding:0 22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;

  border:1px solid transparent;
  border-radius:2px;

  text-decoration:none;

  font-size:12px;
  font-weight:900;

  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.lbh-hero__button--primary{
  color:#fff;
  background:#0c53a5;
  border-color:#0c53a5;

  box-shadow:
    0 17px 35px rgba(12,83,165,.20);
}

.lbh-hero__button--primary:hover{
  color:#0c53a5;
  background:#fff;

  transform:translateY(-3px);
}

.lbh-hero__button--secondary{
  color:#18344d;
  background:rgba(255,255,255,.74);
  border-color:#c9d7e2;
}

.lbh-hero__button--secondary:hover{
  color:#fff;
  background:#022041;
  border-color:#022041;

  transform:translateY(-3px);
}

.lbh-hero__button i{
  transition:transform .22s ease;
}

.lbh-hero__button--primary:hover i{
  transform:translateX(-4px);
}

.lbh-hero__button--secondary:hover i{
  transform:translateY(-2px);
}

.lbh-hero__advantages{
  margin-top:37px;
  padding-top:24px;

  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;

  border-top:1px solid #d3dee6;
}

.lbh-hero__advantages article{
  min-width:0;

  display:flex;
  align-items:center;
  gap:10px;
}

.lbh-hero__advantages article>span{
  width:42px;
  height:42px;
  flex:0 0 42px;

  display:grid;
  place-items:center;

  border:1px solid #cfdee9;
  border-radius:3px;

  color:#0c53a5;
  background:#fff;

  box-shadow:
    0 9px 23px rgba(2,32,65,.055);

  transition:
    color .22s ease,
    background .22s ease,
    transform .22s ease;
}

.lbh-hero__advantages article:hover>span{
  color:#fff;
  background:#0c53a5;

  transform:translateY(-3px);
}

.lbh-hero__advantages article>div{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:4px;
}

.lbh-hero__advantages strong{
  color:#213a4f;

  font-size:11px;
  font-weight:900;
}

.lbh-hero__advantages small{
  color:#748493;

  font-size:8.5px;
  font-weight:600;
  line-height:1.6;
}

/* =========================
   VISUAL
========================= */

.lbh-hero__visual{
  grid-area:visual;

  width:100%;
  min-width:0;
  min-height:590px;
  margin:0;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:visible;
}

.lbh-hero__visual-label{
  position:absolute;
  top:26px;
  left:0;
  z-index:5;

  display:flex;
  align-items:center;
  gap:11px;

  direction:ltr;
}

.lbh-hero__visual-label>span{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border:1px solid rgba(12,83,165,.20);
  border-radius:50%;

  color:#0c53a5;
  background:rgba(255,255,255,.80);

  font-size:10px;
  font-weight:900;
}

.lbh-hero__visual-label>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.lbh-hero__visual-label small{
  color:#0c53a5;

  font-size:7px;
  font-weight:900;
  letter-spacing:1.2px;
}

.lbh-hero__visual-label strong{
  color:#718392;

  font-size:9px;
  font-weight:800;
}

.lbh-hero__stage{
  width:100%;
  min-height:550px;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
}

.lbh-hero__stage picture{
  width:100%;

  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;
}

.lbh-hero__product-halo{
  width:620px;
  height:430px;

  position:absolute;
  left:50%;
  top:50%;
  z-index:0;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(63,151,231,.16),
      rgba(12,83,165,.045) 48%,
      transparent 72%
    );

  filter:blur(13px);

  transform:translate(-50%,-53%);
}

.lbh-hero__ground-shadow{
  width:72%;
  height:46px;

  position:absolute;
  left:14%;
  bottom:52px;
  z-index:1;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(2,32,65,.27) 0%,
      rgba(2,32,65,.13) 40%,
      rgba(2,32,65,.035) 66%,
      transparent 78%
    );

  filter:blur(12px);

  transform:
    perspective(600px)
    rotateX(67deg);
}

.lbh-hero__product{
  width:min(62vw,1050px);
  max-width:none;
  height:auto;

  display:block;

  object-fit:contain;

  filter:
    drop-shadow(
      0 48px 27px rgba(2,32,65,.22)
    )
    drop-shadow(
      0 20px 14px rgba(2,32,65,.12)
    );

  transform:
    translateX(-3%)
    translateY(-7px)
    scale(1.035);

  transform-origin:center center;
}

.lbh-hero__visual figcaption{
  min-height:48px;
  padding:0 14px;

  position:absolute;
  right:4%;
  bottom:12px;
  z-index:5;

  display:flex;
  align-items:center;
  gap:17px;

  border-right:3px solid #0c53a5;

  color:#18344d;
  background:rgba(255,255,255,.78);

  box-shadow:
    0 13px 30px rgba(2,32,65,.07);

  backdrop-filter:blur(7px);

  font-size:9px;
  font-weight:800;
}

.lbh-hero__visual figcaption i{
  color:#0c53a5;
  font-size:13px;
}

/* =========================
   BOTTOM BAR
========================= */

.lbh-hero__bottom{
  min-height:66px;
  padding:
    0
    clamp(22px,5vw,92px);

  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr))
    auto;

  align-items:center;
  gap:30px;

  border-top:1px solid #d8e2e9;

  background:rgba(255,255,255,.65);

  backdrop-filter:blur(8px);
}

.lbh-hero__bottom>div{
  display:flex;
  flex-direction:column;
  gap:4px;

  direction:ltr;
}

.lbh-hero__bottom small{
  color:#0c53a5;

  font-size:7px;
  font-weight:900;
  letter-spacing:1.15px;
}

.lbh-hero__bottom strong{
  color:#667988;

  font-size:9px;
  font-weight:800;
}

.lbh-hero__bottom>a{
  min-height:66px;
  padding:0 22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-right:1px solid #d8e2e9;

  color:#18344d;
  text-decoration:none;

  font-size:10px;
  font-weight:900;

  transition:
    color .22s ease,
    background .22s ease;
}

.lbh-hero__bottom>a:hover{
  color:#fff;
  background:#0c53a5;
}

/* =========================
   MOTION
========================= */

@media(prefers-reduced-motion:no-preference){

  .lbh-hero__product{
    animation:
      lbh-product-float
      6.8s
      ease-in-out
      infinite;
  }

}

@keyframes lbh-product-float{

  0%,
  100%{
    translate:0 0;
  }

  50%{
    translate:0 -7px;
  }

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1250px){

  .lbh-hero__inner{
    grid-template-columns:
      minmax(520px,1.05fr)
      minmax(430px,.95fr);

    gap:30px;
  }

  .lbh-hero__product{
    width:min(66vw,920px);
  }

  .lbh-hero__advantages{
    grid-template-columns:1fr;
  }

}

@media(max-width:980px){

  .lbh-hero{
    min-height:auto;
  }

  .lbh-hero__inner{
    min-height:auto;

    padding:
      105px
      23px
      36px;

    grid-template-columns:1fr;
    grid-template-areas:
      "content"
      "visual";

    gap:38px;
  }

  .lbh-hero__content{
    max-width:none;
    justify-self:stretch;
  }

  .lbh-hero__advantages{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .lbh-hero__visual{
    min-height:480px;
  }

  .lbh-hero__stage{
    min-height:430px;
  }

  .lbh-hero__product{
    width:min(108%,850px);

    transform:
      translateX(-2%)
      translateY(-4px);
  }

  .lbh-hero__bottom{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    padding-block:15px;
  }

  .lbh-hero__bottom>a{
    grid-column:1/-1;

    min-height:46px;

    border-right:0;
    border-top:1px solid #d8e2e9;
  }

}

@media(max-width:680px){

  .lbh-hero::after{
    bottom:105px;

    font-size:64px;
    letter-spacing:-3px;
  }

  .lbh-hero__technical-grid{
    background-size:38px 38px;
  }

  .lbh-hero__inner{
    padding:
      90px
      16px
      24px;

    gap:29px;
  }

  .lbh-hero__eyebrow{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .lbh-hero__eyebrow>strong{
    width:100%;

    padding-left:0;
    text-align:left;
  }

  .lbh-hero h1{
    font-size:clamp(36px,10.8vw,49px);
    line-height:1.34;
    letter-spacing:-.8px;
  }

  .lbh-hero__lead{
    margin-top:20px;
    padding-right:17px;

    font-size:13px;
  }

  .lbh-hero__actions{
    margin-top:25px;

    display:grid;
    grid-template-columns:1fr;
  }

  .lbh-hero__button{
    width:100%;
  }

  .lbh-hero__advantages{
    grid-template-columns:1fr;
    gap:13px;
  }

  .lbh-hero__visual{
    min-height:335px;
  }

  .lbh-hero__stage{
    min-height:300px;
  }

  .lbh-hero__visual-label{
    top:0;
  }

  .lbh-hero__product-halo{
    width:390px;
    height:270px;
  }

  .lbh-hero__product{
    width:116%;

    transform:
      translateX(-4%)
      translateY(-2px);
  }

  .lbh-hero__ground-shadow{
    width:88%;
    left:6%;
    bottom:35px;
  }

  .lbh-hero__visual figcaption{
    min-height:42px;

    right:0;
    bottom:0;

    font-size:8px;
  }

  .lbh-hero__bottom{
    min-height:auto;

    grid-template-columns:1fr;

    gap:0;
    padding:0 16px;
  }

  .lbh-hero__bottom>div{
    min-height:48px;

    justify-content:center;

    border-bottom:1px solid #dde5eb;
  }

  .lbh-hero__bottom>div:nth-child(2),
  .lbh-hero__bottom>div:nth-child(3){
    display:none;
  }

}

/* LIFTINGBEAM_HOME_HERO_FINAL_END */

/* LBH_LAYOUT_SWAP_START */

/*
 * دسکتاپ:
 * متن سمت چپ
 * رندر سمت راست
 */
.lbh-hero__inner{
  grid-template-columns:
    minmax(480px,.88fr)
    minmax(620px,1.12fr) !important;

  grid-template-areas:
    "content visual" !important;

  align-items:center !important;

  gap:
    clamp(70px,7vw,130px) !important;
}

/*
 * متن کاملاً داخل ستون چپ باقی بماند.
 */
.lbh-hero__content{
  grid-area:content !important;

  width:100% !important;
  max-width:700px !important;
  min-width:0 !important;

  justify-self:start !important;

  position:relative !important;
  z-index:5 !important;
}

/*
 * رندر کاملاً داخل ستون راست باقی بماند.
 */
.lbh-hero__visual{
  grid-area:visual !important;

  width:100% !important;
  max-width:860px !important;
  min-width:0 !important;

  justify-self:end !important;

  position:relative !important;
  z-index:2 !important;

  overflow:hidden !important;
}

/*
 * استیج رندر اجازه خروج به سمت متن ندارد.
 */
.lbh-hero__stage{
  width:100% !important;
  max-width:860px !important;
  min-width:0 !important;

  overflow:hidden !important;
}

/*
 * تصویر رندر:
 * بدون translate افقی
 * بدون ورود به ستون متن
 */
.lbh-hero__product{
  width:min(100%,880px) !important;
  max-width:100% !important;
  height:auto !important;

  transform:
    translateX(0)
    translateY(-6px)
    scale(1.035) !important;

  transform-origin:center center !important;
}

/*
 * هاله و سایه نیز فقط داخل ستون رندر.
 */
.lbh-hero__product-halo{
  width:78% !important;
  max-width:650px !important;

  left:50% !important;

  transform:
    translate(-50%,-53%) !important;
}

.lbh-hero__ground-shadow{
  width:70% !important;
  left:15% !important;
}

/*
 * خط جداکننده نامحسوس میان متن و رندر.
 */
.lbh-hero__visual::before{
  content:"";

  width:1px;
  height:72%;

  position:absolute;
  top:14%;
  left:-36px;
  z-index:6;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(12,83,165,.14) 25%,
      rgba(12,83,165,.14) 75%,
      transparent
    );
}

/*
 * لپ‌تاپ
 */
@media(max-width:1250px){

  .lbh-hero__inner{
    grid-template-columns:
      minmax(430px,.92fr)
      minmax(500px,1.08fr) !important;

    gap:55px !important;
  }

  .lbh-hero__visual{
    max-width:740px !important;
  }

  .lbh-hero__stage{
    max-width:740px !important;
  }

  .lbh-hero__product{
    width:100% !important;
  }

}

/*
 * تبلت و موبایل:
 * متن بالا، رندر پایین
 */
@media(max-width:980px){

  .lbh-hero__inner{
    grid-template-columns:1fr !important;

    grid-template-areas:
      "content"
      "visual" !important;

    gap:42px !important;
  }

  .lbh-hero__content{
    max-width:none !important;
    justify-self:stretch !important;
  }

  .lbh-hero__visual{
    max-width:900px !important;
    justify-self:center !important;

    overflow:hidden !important;
  }

  .lbh-hero__stage{
    max-width:900px !important;
  }

  .lbh-hero__visual::before{
    display:none !important;
  }

  .lbh-hero__product{
    width:min(100%,850px) !important;

    transform:
      translateX(0)
      translateY(-4px)
      scale(1) !important;
  }

}

/*
 * موبایل
 */
@media(max-width:680px){

  .lbh-hero__inner{
    gap:28px !important;
  }

  .lbh-hero__visual{
    width:100% !important;
    max-width:100% !important;
  }

  .lbh-hero__stage{
    width:100% !important;
    max-width:100% !important;
  }

  .lbh-hero__product{
    width:108% !important;
    max-width:108% !important;

    transform:
      translateX(0)
      translateY(-2px)
      scale(1) !important;
  }

}

/* LBH_LAYOUT_SWAP_END */

/* LBH_EDGE_ALIGNMENT_START */

/*
 * عرض کامل محتوای هیرو:
 * متن به چپ، رندر به راست.
 */
.lbh-hero__inner{
  width:100% !important;
  max-width:none !important;

  padding-right:
    clamp(18px,3vw,54px) !important;

  padding-left:
    clamp(18px,3vw,54px) !important;

  grid-template-columns:
    minmax(430px,.82fr)
    minmax(600px,1.18fr) !important;

  grid-template-areas:
    "content visual" !important;

  column-gap:
    clamp(90px,9vw,180px) !important;
}

/*
 * بلوک متن به لبه چپ فضای خودش بچسبد.
 * جهت نوشتار همچنان فارسی و RTL می‌ماند.
 */
.lbh-hero__content{
  width:100% !important;
  max-width:680px !important;

  justify-self:start !important;

  margin-right:0 !important;
  margin-left:0 !important;

  transform:none !important;
}

/*
 * رندر به لبه راست فضای خودش بچسبد.
 */
.lbh-hero__visual{
  width:100% !important;
  max-width:980px !important;

  justify-self:end !important;

  margin-right:0 !important;
  margin-left:0 !important;

  overflow:hidden !important;
}

/*
 * محتوای استیج و picture نیز به سمت راست بروند.
 */
.lbh-hero__stage{
  width:100% !important;
  max-width:980px !important;

  justify-content:flex-end !important;

  overflow:hidden !important;
}

.lbh-hero__stage picture{
  width:100% !important;

  justify-content:flex-end !important;
}

/*
 * رندر داخل ستون خودش به راست متمایل شود،
 * ولی از ستون خارج نشود.
 */
.lbh-hero__product{
  width:min(100%,930px) !important;
  max-width:100% !important;

  margin-right:0 !important;
  margin-left:auto !important;

  object-position:right center !important;

  transform:
    translateX(5%)
    translateY(-6px)
    scale(1.04) !important;
}

/*
 * هاله و سایه نیز همراه رندر به راست متمایل شوند.
 */
.lbh-hero__product-halo{
  left:56% !important;
}

.lbh-hero__ground-shadow{
  width:70% !important;
  left:24% !important;
}

/*
 * جداکننده وسط دقیقاً در فضای خالی قرار بگیرد.
 */
.lbh-hero__visual::before{
  left:
    calc(
      -1 * clamp(45px,4.5vw,90px)
    ) !important;
}

/* لپ‌تاپ */
@media(max-width:1250px){

  .lbh-hero__inner{
    grid-template-columns:
      minmax(400px,.88fr)
      minmax(500px,1.12fr) !important;

    column-gap:65px !important;

    padding-inline:26px !important;
  }

  .lbh-hero__content{
    max-width:620px !important;
  }

  .lbh-hero__visual,
  .lbh-hero__stage{
    max-width:800px !important;
  }

  .lbh-hero__product{
    transform:
      translateX(3%)
      translateY(-5px)
      scale(1.025) !important;
  }

}

/*
 * تبلت:
 * متن بالا و رندر پایین؛
 * هر دو دوباره وسط صفحه قرار بگیرند.
 */
@media(max-width:980px){

  .lbh-hero__inner{
    grid-template-columns:1fr !important;

    grid-template-areas:
      "content"
      "visual" !important;

    row-gap:40px !important;

    padding-inline:23px !important;
  }

  .lbh-hero__content{
    max-width:none !important;
    justify-self:stretch !important;
  }

  .lbh-hero__visual,
  .lbh-hero__stage{
    max-width:900px !important;
    justify-self:center !important;
  }

  .lbh-hero__stage,
  .lbh-hero__stage picture{
    justify-content:center !important;
  }

  .lbh-hero__product{
    width:min(100%,850px) !important;

    margin-inline:auto !important;

    object-position:center !important;

    transform:
      translateX(0)
      translateY(-4px)
      scale(1) !important;
  }

  .lbh-hero__product-halo{
    left:50% !important;
  }

  .lbh-hero__ground-shadow{
    width:76% !important;
    left:12% !important;
  }

}

/* موبایل */
@media(max-width:680px){

  .lbh-hero__inner{
    padding-inline:16px !important;
    row-gap:28px !important;
  }

  .lbh-hero__product{
    width:108% !important;
    max-width:108% !important;
  }

}

/* LBH_EDGE_ALIGNMENT_END */