/* VILIANTE HOME HERO CLEAN 3-BREAKPOINT SYSTEM v2 */
/* 0-900 phone-like | 901-1024 tablet/wide mobile | 1025+ desktop */

.hero-showcase{
  position:relative !important;
  height:100svh !important;
  min-height:100svh !important;
  overflow:hidden !important;
  background:#071225 !important;
}

/* Kill old hero systems completely */
.hero-showcase > .hero-slider,
.hero-showcase > .viliante-shared-hero-actions,
.hero-showcase > .hero-product-float{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.viliante-final-hero-stage{
  position:absolute !important;
  inset:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

.viliante-final-hero-slide{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .7s ease, visibility .7s ease !important;
}

.viliante-final-hero-slide.is-active{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.viliante-final-hero-bg{
  position:absolute !important;
  inset:0 !important;
  background-repeat:no-repeat !important;
}

/* home-hero-bg-quality-reset-desktop-mobile-v1
Restore actual image layer quality after older homepage.css opacity/filter.
Applies to both desktop and mobile. */
.hero-showcase .viliante-final-hero-bg{
  opacity:1 !important;
  filter:none !important;
}

.viliante-final-hero-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
}

.viliante-final-hero-slide .hero-showcase-content{
  position:absolute !important;
  z-index:5 !important;
  padding:0 !important;
}

.viliante-final-hero-slide .eyebrow{
  display:inline-flex !important;
  margin:0 0 14px !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.viliante-final-hero-slide h1{
  margin:0 0 14px !important;
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:-.055em !important;
}

.viliante-final-hero-slide p{
  margin:0 !important;
  color:rgba(255,255,255,.93) !important;
  font-weight:650 !important;
}

.viliante-final-hero-slide .hero-actions{
  margin-top:22px !important;
}

.viliante-final-hero-slide .hero-actions .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.viliante-final-hero-slide .btn-primary{
  color:#fff !important;
  background:linear-gradient(135deg,#1357b7,#0a3f8d) !important;
}

.viliante-final-hero-slide .btn-secondary,
.viliante-final-hero-slide .btn-ghost{
  color:#0a3678 !important;
  background:rgba(255,255,255,.94) !important;
}

.viliante-final-hero-dots{
  position:absolute !important;
  left:50% !important;
  bottom:24px !important;
  transform:translateX(-50%) !important;
  z-index:10 !important;
}

/* PHONE / SMALL TABLET: 0-900 */
@media (max-width:900px){
  .viliante-final-hero-bg{
    background-image:var(--mobile-bg) !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  .viliante-final-hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(8,18,32,.42) 0%,
      rgba(8,18,32,.24) 48%,
      rgba(8,18,32,.10) 100%
    ) !important;
  }

  .viliante-final-hero-slide .hero-showcase-content{
    left:22px !important;
    right:22px !important;
    bottom:96px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
  }

  .viliante-final-hero-slide h1{
    font-size:clamp(34px, 10.5vw, 48px) !important;
    line-height:1.02 !important;
  }

  .viliante-final-hero-slide p{
    max-width:94% !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .viliante-final-hero-slide .hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  .viliante-final-hero-slide .hero-actions .btn{
    width:100% !important;
    min-height:48px !important;
    padding:12px 12px !important;
    font-size:13.5px !important;
  }

  .viliante-final-hero-slide .hero-actions .hero-ghost{
    display:none !important;
  }
}

/* TABLET / WIDE MOBILE: 901-1024 */
@media (min-width:901px) and (max-width:1024px){
  .viliante-final-hero-bg{
    background-image:var(--desktop-bg) !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  .viliante-final-hero-overlay{
    background:linear-gradient(
      90deg,
      rgba(8,18,32,.48) 0%,
      rgba(8,18,32,.30) 42%,
      rgba(8,18,32,.10) 72%,
      rgba(8,18,32,.02) 100%
    ) !important;
  }

  .viliante-final-hero-slide .hero-showcase-content{
    left:clamp(34px, 5vw, 58px) !important;
    right:auto !important;
    top:52% !important;
    bottom:auto !important;
    transform:translateY(-32%) !important;
    width:min(560px, calc(100vw - 68px)) !important;
    max-width:560px !important;
  }

  .viliante-final-hero-slide h1{
    max-width:560px !important;
    font-size:clamp(42px, 6.2vw, 62px) !important;
    line-height:.98 !important;
  }

  .viliante-final-hero-slide p{
    max-width:500px !important;
    font-size:clamp(15px, 1.8vw, 18px) !important;
    line-height:1.42 !important;
  }

  .viliante-final-hero-slide .hero-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    width:auto !important;
  }

  .viliante-final-hero-slide .hero-actions .btn{
    width:auto !important;
    min-width:148px !important;
    min-height:50px !important;
    padding:13px 22px !important;
    font-size:13.5px !important;
  }

  .viliante-final-hero-slide .hero-actions .hero-ghost{
    display:none !important;
  }
}

/* DESKTOP: 1025+ */
@media (min-width:1025px){
  .viliante-final-hero-bg{
    background-image:var(--desktop-bg) !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  .viliante-final-hero-overlay{
    background:linear-gradient(
      90deg,
      rgba(8,18,32,.56) 0%,
      rgba(8,18,32,.34) 42%,
      rgba(8,18,32,.10) 72%,
      rgba(8,18,32,.03) 100%
    ) !important;
  }

  .viliante-final-hero-slide .hero-showcase-content{
    left:clamp(42px, 7vw, 116px) !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-38%) !important;
    width:min(760px, calc(100vw - 84px)) !important;
    max-width:760px !important;
  }

  .viliante-final-hero-slide h1{
    max-width:760px !important;
    font-size:clamp(56px, 6.3vw, 116px) !important;
    line-height:.96 !important;
  }

  .viliante-final-hero-slide p{
    max-width:620px !important;
    font-size:clamp(17px, 1.35vw, 24px) !important;
    line-height:1.42 !important;
  }

  .viliante-final-hero-slide .hero-actions{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:14px !important;
  }

  .viliante-final-hero-slide .hero-actions .btn{
    width:auto !important;
    min-width:148px !important;
    min-height:52px !important;
    padding:14px 24px !important;
    font-size:14px !important;
  }
}

/* SMALL DESKTOP: 1025-1250 */
@media (min-width:1025px) and (max-width:1250px){
  .viliante-final-hero-slide .hero-showcase-content{
    left:42px !important;
    transform:translateY(-36%) !important;
    width:min(640px, calc(100vw - 84px)) !important;
    max-width:640px !important;
  }

  .viliante-final-hero-slide h1{
    font-size:clamp(44px, 5.2vw, 68px) !important;
    max-width:640px !important;
  }

  .viliante-final-hero-slide p{
    font-size:clamp(15px, 1.35vw, 18px) !important;
    max-width:520px !important;
  }
}

/* VILIANTE HERO EYEBROW BADGE CONTRAST FIX v1 */
/*
  Fix hero badge readability.
  The badge background is light, so the text must be dark.
  Applies to homepage hero only.
*/
.viliante-final-hero-slide .eyebrow{
  color:#0b3f7a !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 10px 28px rgba(8,18,32,.14) !important;
  text-shadow:none !important;
}

.viliante-final-hero-slide .eyebrow::before,
.viliante-final-hero-slide .eyebrow .dot{
  background:#1357b7 !important;
  box-shadow:none !important;
}
/* END VILIANTE HERO EYEBROW BADGE CONTRAST FIX v1 */