/* SHAFO HERO V3 — clean flex rebuild */

.hero{
  position:relative!important;
  min-height:100vh!important;
  overflow:hidden!important;

  display:flex!important;
  align-items:center!important;

  padding:120px 70px 80px!important;

  background:
    linear-gradient(90deg,
      rgba(5,6,5,.86) 0%,
      rgba(5,6,5,.66) 36%,
      rgba(5,6,5,.22) 70%,
      rgba(5,6,5,.08) 100%),
    url("../assets/hero/hero-bg.png") center center / cover no-repeat!important;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 50%,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.24) 56%,
      rgba(0,0,0,.64) 100%);
}

.hero > *{
  position:relative;
  z-index:2;
}

.hero-left{
  width:min(760px, 100%)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:26px!important;
  margin:0!important;
  text-align:left!important;
}

.hero-topline{
  margin:0!important;
  padding:0!important;
  color:#c9a27e!important;
  font-size:13px!important;
  line-height:1!important;
  letter-spacing:.34em!important;
  text-transform:uppercase!important;
  opacity:.92!important;
}

.hero-brand{
  display:flex!important;
  align-items:center!important;
  gap:34px!important;
  margin:0 0 10px!important;
}

.hero-logo-img{
  position:static!important;
  width:170px!important;
  height:170px!important;
  flex:0 0 170px!important;
  margin:0!important;
  transform:none!important;
}

.hero-logo-img img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.hero-brand-title{
  position:static!important;
  margin:0!important;

  font-family:Georgia,serif!important;
  font-size:56px!important;
  line-height:1!important;
  letter-spacing:.22em!important;
  color:#d8b08a!important;
  text-transform:uppercase!important;
  text-shadow:0 8px 28px rgba(0,0,0,.75)!important;
}

.hero-title{
  margin:0!important;
  padding:0!important;
  max-width:760px!important;

  text-align:left!important;
  color:#fff4ea!important;
  font-family:Georgia,serif!important;
  font-size:clamp(42px,4.2vw,68px)!important;
  font-weight:400!important;
  line-height:1.08!important;
  letter-spacing:.01em!important;
  text-shadow:0 10px 32px rgba(0,0,0,.72)!important;
}

.hero-sub{
  margin:0!important;
  padding:0!important;
  max-width:760px!important;

  text-align:left!important;
  color:#e8d5c4!important;
  font-size:clamp(13px,1vw,17px)!important;
  line-height:1.65!important;
  letter-spacing:.12em!important;
  text-transform:none!important;
  text-shadow:0 8px 24px rgba(0,0,0,.65)!important;
}

.hero-cta{
  margin:10px 0 0!important;
  padding:0!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
}

.hero-cta .btn-primary,
.btn-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  min-height:52px!important;
  padding:16px 30px!important;
  border-radius:999px!important;

  background:linear-gradient(135deg,#c9a27e,#ead0b1)!important;
  color:#17110c!important;
  text-decoration:none!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
  box-shadow:0 18px 44px rgba(0,0,0,.32)!important;
}

@media(max-width:900px){
  .hero{
    padding:110px 28px 70px!important;
    align-items:center!important;
    background-position:center right!important;
  }

  .hero-left{
    gap:22px!important;
    width:100%!important;
  }

  .hero-brand{
    gap:22px!important;
  }

  .hero-logo-img{
    width:120px!important;
    height:120px!important;
    flex-basis:120px!important;
  }

  .hero-brand-title{
    font-size:34px!important;
    letter-spacing:.16em!important;
  }

  .hero-title{
    font-size:38px!important;
    line-height:1.12!important;
  }

  .hero-sub{
    font-size:12px!important;
    letter-spacing:.07em!important;
  }
}

@media(max-width:520px){
  .hero{
    padding:96px 22px 64px!important;
  }

  .hero-topline{
    font-size:11px!important;
    letter-spacing:.22em!important;
  }

  .hero-brand{
    gap:16px!important;
  }

  .hero-logo-img{
    width:96px!important;
    height:96px!important;
    flex-basis:96px!important;
  }

  .hero-brand-title{
    font-size:27px!important;
    letter-spacing:.12em!important;
  }

  .hero-title{
    font-size:34px!important;
  }

  .hero-sub{
    font-size:11px!important;
  }

  .hero-cta .btn-primary,
  .btn-primary{
    width:100%!important;
    padding:15px 20px!important;
  }
}

/* ===== SHAFO HERO — composition tune 01 ===== */

.hero{
  padding:145px 70px 80px!important;
  align-items:flex-start!important;
}

.hero-left{
  width:720px!important;
  max-width:720px!important;
  gap:24px!important;
  margin-left:205px!important;
}

.hero-topline{
  font-size:12px!important;
  letter-spacing:.36em!important;
  margin-bottom:10px!important;
}

.hero-brand{
  gap:28px!important;
  margin-bottom:18px!important;
}

.hero-logo-img{
  width:145px!important;
  height:145px!important;
  flex-basis:145px!important;
}

.hero-brand-title{
  font-size:48px!important;
  letter-spacing:.22em!important;
}

.hero-title{
  max-width:700px!important;
  font-size:clamp(42px,3.5vw,58px)!important;
  line-height:1.08!important;
}

.hero-sub{
  max-width:760px!important;
  font-size:15px!important;
  letter-spacing:.14em!important;
  line-height:1.65!important;
}

.hero-cta{
  margin-top:22px!important;
}

.hero-cta .btn-primary,
.btn-primary{
  min-height:50px!important;
  padding:15px 28px!important;
  font-size:14px!important;
}

/* Mobile */
@media(max-width:900px){
  .hero{
    padding:112px 26px 70px!important;
    align-items:flex-start!important;
    background-position:center right!important;
  }

  .hero-left{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    gap:21px!important;
  }

  .hero-topline{
    font-size:11px!important;
    letter-spacing:.28em!important;
    margin-bottom:4px!important;
  }

  .hero-brand{
    gap:20px!important;
    margin-bottom:10px!important;
  }

  .hero-logo-img{
    width:112px!important;
    height:112px!important;
    flex-basis:112px!important;
  }

  .hero-brand-title{
    font-size:30px!important;
    letter-spacing:.16em!important;
  }

  .hero-title{
    max-width:500px!important;
    font-size:40px!important;
    line-height:1.12!important;
  }

  .hero-sub{
    max-width:500px!important;
    font-size:12px!important;
    letter-spacing:.08em!important;
    line-height:1.65!important;
  }

  .hero-cta{
    margin-top:18px!important;
  }

  .hero-cta .btn-primary,
  .btn-primary{
    width:auto!important;
    min-height:50px!important;
    padding:15px 26px!important;
    font-size:13px!important;
  }
}

@media(max-width:520px){
  .hero{
    padding:112px 26px 64px!important;
  }

  .hero-logo-img{
    width:104px!important;
    height:104px!important;
    flex-basis:104px!important;
  }

  .hero-brand-title{
    font-size:28px!important;
    letter-spacing:.13em!important;
  }

  .hero-title{
    font-size:38px!important;
    max-width:430px!important;
  }

  .hero-sub{
    max-width:430px!important;
    font-size:12px!important;
    letter-spacing:.06em!important;
  }

  .hero-cta .btn-primary,
  .btn-primary{
    width:auto!important;
  }
}

/* ===== SHAFO HERO — left shift 02 ===== */

.hero-left{
  margin-left:70px!important;
}

@media(max-width:900px){
  .hero-left{
    margin-left:0!important;
  }
}

/* ===== Final left adjustment ===== */

.hero-left{
    margin-left:30px!important;
}

@media(max-width:900px){
    .hero-left{
        margin-left:0!important;
    }
}

/* ===== SHAFO HERO — size tune desktop + mobile ===== */

/* PC */
.hero-logo-img{
  width:158px!important;
  height:158px!important;
  flex-basis:158px!important;
}

.hero-brand-title{
  font-size:54px!important;
  letter-spacing:.23em!important;
}

.hero-title{
  font-size:clamp(38px,3.25vw,54px)!important;
  line-height:1.1!important;
  max-width:680px!important;
}

.hero-cta{
  width:100%!important;
  justify-content:center!important;
  margin-top:24px!important;
}

/* Mobile */
@media(max-width:900px){
  .hero-logo-img{
    width:122px!important;
    height:122px!important;
    flex-basis:122px!important;
  }

  .hero-brand-title{
    font-size:34px!important;
    letter-spacing:.16em!important;
  }

  .hero-title{
    font-size:35px!important;
    line-height:1.13!important;
    max-width:460px!important;
  }

  .hero-sub{
    max-width:460px!important;
    font-size:11.5px!important;
    letter-spacing:.055em!important;
  }

  .hero-cta{
    width:100%!important;
    justify-content:center!important;
    margin-top:20px!important;
  }
}

@media(max-width:520px){
  .hero-logo-img{
    width:112px!important;
    height:112px!important;
    flex-basis:112px!important;
  }

  .hero-brand-title{
    font-size:32px!important;
    letter-spacing:.13em!important;
  }

  .hero-title{
    font-size:34px!important;
    line-height:1.13!important;
    max-width:430px!important;
  }

  .hero-sub{
    max-width:430px!important;
    font-size:11.5px!important;
    letter-spacing:.045em!important;
  }

  .hero-cta{
    justify-content:center!important;
  }
}

/* ===== SHAFO HERO — premium calm button ===== */

/* Desktop */
.hero-cta{
  width:auto!important;
  justify-content:flex-start!important;
  margin-top:22px!important;
  margin-left:0!important;
}

.hero-cta .btn-primary,
.btn-primary{
  min-height:46px!important;
  padding:13px 30px!important;
  border-radius:999px!important;

  background:rgba(218,176,137,.86)!important;
  color:#16110d!important;

  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.075em!important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.22)!important;

  border:1px solid rgba(255,232,206,.34)!important;
}

/* Mobile */
@media(max-width:900px){
  .hero-cta{
    width:100%!important;
    justify-content:center!important;
    margin-top:18px!important;
  }

  .hero-cta .btn-primary,
  .btn-primary{
    min-height:46px!important;
    padding:13px 28px!important;
    font-size:12.5px!important;
    letter-spacing:.065em!important;
    background:rgba(218,176,137,.84)!important;
  }
}

@media(max-width:520px){
  .hero-cta{
    justify-content:center!important;
  }

  .hero-cta .btn-primary,
  .btn-primary{
    width:auto!important;
    min-width:300px!important;
    max-width:88vw!important;
  }
}

/* ===== FINAL TYPOGRAPHY ===== */

.hero-brand-title{
    font-size:58px!important;
}

.hero-title{
    font-size:clamp(36px,3vw,50px)!important;
    line-height:1.12!important;
}

@media(max-width:900px){

    .hero-brand-title{
        font-size:36px!important;
    }

    .hero-title{
        font-size:33px!important;
        line-height:1.14!important;
    }

}

@media(max-width:520px){

    .hero-brand-title{
        font-size:34px!important;
    }

    .hero-title{
        font-size:32px!important;
        line-height:1.15!important;
    }

}

/* ===== SHAFO HERO — phone alive ===== */

.lux-phone-bar{
  border:1px solid rgba(216,176,138,.42)!important;
  background:rgba(8,9,8,.34)!important;
  box-shadow:
    0 0 0 1px rgba(255,232,205,.06),
    0 10px 28px rgba(0,0,0,.34),
    0 0 28px rgba(216,176,138,.10)!important;
  backdrop-filter:blur(8px)!important;
}

.lux-phone-bar a{
  color:#e9c9a8!important;
  letter-spacing:.24em!important;
  text-shadow:
    0 0 10px rgba(216,176,138,.28),
    0 2px 10px rgba(0,0,0,.65)!important;
}

.lux-phone-bar:hover{
  border-color:rgba(232,201,169,.72)!important;
  box-shadow:
    0 0 0 1px rgba(255,232,205,.10),
    0 12px 32px rgba(0,0,0,.36),
    0 0 34px rgba(216,176,138,.20)!important;
}

.lux-phone-bar:hover a{
  color:#f4d9ba!important;
}

/* ===== SHAFO HERO — animated scroll button ===== */

.hero-scroll-down{
  position:absolute!important;
  left:50%!important;
  bottom:34px!important;
  transform:translateX(-50%)!important;
  z-index:20!important;

  width:54px!important;
  height:86px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;

  text-decoration:none!important;
  opacity:.78!important;
  transition:opacity .35s ease, transform .35s ease!important;
}

.hero-scroll-down:hover{
  opacity:1!important;
  transform:translateX(-50%) translateY(-4px)!important;
}

.hero-scroll-down .scroll-line{
  width:1px!important;
  height:42px!important;
  display:block!important;
  background:linear-gradient(
    to bottom,
    rgba(216,176,138,0),
    rgba(216,176,138,.85),
    rgba(216,176,138,0)
  )!important;
  box-shadow:0 0 16px rgba(216,176,138,.28)!important;
}

.hero-scroll-down .scroll-dot{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  display:block!important;
  background:#d8b08a!important;
  box-shadow:0 0 18px rgba(216,176,138,.7)!important;
  animation:shafoScrollDot 1.65s ease-in-out infinite!important;
}

.hero-scroll-down .scroll-text{
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:.28em!important;
  text-transform:uppercase!important;
  color:rgba(232,201,169,.72)!important;
  writing-mode:vertical-rl!important;
  transform:rotate(180deg)!important;
}

@keyframes shafoScrollDot{
  0%{
    transform:translateY(-8px);
    opacity:.25;
  }
  45%{
    opacity:1;
  }
  100%{
    transform:translateY(10px);
    opacity:.25;
  }
}

@media(max-width:900px){
  .hero-scroll-down{
    bottom:22px!important;
    width:46px!important;
    height:70px!important;
    opacity:.62!important;
  }

  .hero-scroll-down .scroll-line{
    height:34px!important;
  }

  .hero-scroll-down .scroll-text{
    display:none!important;
  }
}

/* =======================================================
   SHAFO PREMIUM SCROLL
======================================================= */

.hero-scroll-down{
    position:absolute!important;
    left:50%!important;
    bottom:34px!important;
    transform:translateX(-50%)!important;
    z-index:30!important;

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

    width:44px!important;
    height:70px!important;

    opacity:.82!important;
    transition:.35s!important;
}

.hero-scroll-down:hover{
    opacity:1!important;
    transform:translateX(-50%) translateY(-3px)!important;
}

.hero-scroll-down .mouse{

    width:26px;
    height:42px;

    border:1px solid rgba(216,176,138,.45);

    border-radius:18px;

    display:flex;
    justify-content:center;

    position:relative;

    backdrop-filter:blur(6px);

    box-shadow:
        0 0 18px rgba(216,176,138,.10);
}

.hero-scroll-down .wheel{

    width:4px;
    height:8px;

    border-radius:20px;

    background:#d8b08a;

    margin-top:7px;

    box-shadow:
        0 0 10px rgba(216,176,138,.55);

    animation:shafoWheel 1.8s infinite;
}

@keyframes shafoWheel{

    0%{
        transform:translateY(0);
        opacity:1;
    }

    65%{
        transform:translateY(13px);
        opacity:.15;
    }

    100%{
        transform:translateY(0);
        opacity:1;
    }

}

@media(max-width:900px){

.hero-scroll-down{

    bottom:18px!important;

}

.hero-scroll-down .mouse{

    width:22px;
    height:36px;

}

}


/* ===================================================
   SHAFO HERO — Premium Reveal Animation
=================================================== */

/* Немного усиливаем бренд */
.hero-brand-title{
    font-size:61px!important;
}

/* Начальное состояние */

.hero-topline,
.hero-logo-img,
.hero-brand-title,
.hero-title,
.hero-sub,
.hero-cta{

    opacity:0;

    transform:translateY(22px);

    animation:shafoReveal 1.15s cubic-bezier(.22,.61,.36,1) forwards;

}

/* Последовательность */

.hero-topline{
    animation-delay:.05s;
}

.hero-logo-img{
    animation-delay:.15s;
}

.hero-brand-title{
    animation-delay:.28s;
}

.hero-title{
    animation-delay:.42s;
}

.hero-sub{
    animation-delay:.58s;
}

.hero-cta{
    animation-delay:.74s;
}

/* Появление */

@keyframes shafoReveal{

    0%{

        opacity:0;

        transform:
            translateY(22px);

    }

    100%{

        opacity:1;

        transform:
            translateY(0);

    }

}

/* Лёгкое дыхание логотипа */

.hero-logo-img img{

    animation:
        shafoRevealLogo 10s ease-in-out infinite;

}

@keyframes shafoRevealLogo{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.012);
    }

    100%{
        transform:scale(1);
    }

}


/* ===== SHAFO HERO — premium subtitle ===== */

.hero-sub{

    color:#e7c8a3!important;

    text-shadow:
        0 2px 10px rgba(0,0,0,.65),
        0 0 18px rgba(216,176,138,.10)!important;

    font-weight:400!important;

    opacity:.96!important;

}

/* ===== SHAFO HERO — Premium Small CTA ===== */

.hero-cta{
    margin-top:18px!important;
}

.hero-cta .btn-primary,
.btn-primary{

    min-height:40px!important;

    padding:10px 20px!important;

    font-size:11.8px!important;

    font-weight:600!important;

    letter-spacing:.10em!important;

    border-radius:999px!important;

    box-shadow:
        0 8px 20px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.18)!important;

    transition:all .25s ease!important;
}

.hero-cta .btn-primary:hover{

    transform:translateY(-1px)!important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.24),
        0 0 16px rgba(216,176,138,.16)!important;

}

/* =====================================================
   HERO IMAGE BRIGHTNESS
===================================================== */

/* Ослабляем затемнение Hero */

.hero{

    background:
      linear-gradient(
        90deg,

        rgba(5,6,5,.68) 0%,
        rgba(5,6,5,.44) 34%,
        rgba(5,6,5,.10) 68%,
        rgba(5,6,5,.02) 100%
      ),

      url("../assets/hero/hero-bg.png")
      center center / cover no-repeat!important;

}

/* Ослабляем дополнительную тень */

.hero::before{

    background:

    radial-gradient(

        circle at 18% 50%,

        rgba(0,0,0,0) 0%,

        rgba(0,0,0,.12) 58%,

        rgba(0,0,0,.36) 100%

    )!important;

}


/* ===== HERO BRIGHTNESS v2 ===== */

.hero{

    background:
      linear-gradient(
        90deg,

        rgba(5,6,5,.56) 0%,
        rgba(5,6,5,.30) 34%,
        rgba(5,6,5,.04) 70%,
        rgba(5,6,5,0) 100%
      ),

      url("../assets/hero/hero-bg.png")
      center center / cover no-repeat!important;

}

.hero::before{

    background:

    radial-gradient(

        circle at 18% 50%,

        rgba(0,0,0,0) 0%,

        rgba(0,0,0,.08) 60%,

        rgba(0,0,0,.22) 100%

    )!important;

}


/* ===== Android mobile phone bar alignment fix ===== */
@media (max-width: 480px){
  .lux-phone-bar{
    top: 8px !important;
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    line-height: 1.15 !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .lux-phone-bar a{
    letter-spacing: 0.16em !important;
    line-height: 1.15 !important;
  }
}