/* Modern synchronized home carousel */
.mh-carousel {
  --mh-gold: #e3bf25;
  --mh-gold-light: #f8d75c;
  --mh-black: #000000;
  --mh-white: #ffffff;
  --mh-panel: rgba(0, 0, 0, .48);
  --mh-border: rgba(255, 255, 255, .22);
  --mh-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  position: relative;
  min-height: clamp(560px, 78vh, 820px);
  background: #000;
  overflow: hidden;
  isolation: isolate;
}

.mh-carousel__viewport,
.mh-carousel__slide {
  position: absolute;
  inset: 0;
}

.mh-carousel__slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 650ms ease, visibility 650ms ease, transform 1000ms ease;
  pointer-events: none;
}

.mh-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

.mh-carousel__image {
  width: 100%;
  height: 100%;
  min-height: clamp(560px, 78vh, 820px);
  object-fit: cover;
  object-position: center;
}

.mh-carousel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 25%, rgba(227, 191, 37, .28), transparent 30%),
    linear-gradient(90deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .62) 44%, rgba(0, 0, 0, .28) 100%);
}

.mh-carousel__content-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items:flex-end;
  padding-bottom:120px;
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  padding: 96px 96px 104px 0;
}

.mh-carousel__content.is-visible{
    opacity:1;
    transform:none;
    filter:none;
    transition:
        opacity .8s ease,
        transform .8s ease,
        filter .8s ease;
}

.mh-carousel__content{
    max-width:800px;
    padding:clamp(2rem,4vw,3rem);
    background:rgba(9,15,28,.38);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:32px;
    box-shadow:0 20px 60px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06);
    opacity:0;
    transform:translateY(22px);
    filter:blur(12px);
}

.mh-carousel__slide.is-active .mh-carousel__content {
  opacity: 1;
  transform: translateY(0);
}

.mh-hero__brand{
    margin-bottom:2rem;
}

.mh-hero__logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 22px;
    border-radius:20px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}

.mh-hero__logo img{
    display:block;
    width:clamp(180px,18vw,200px);
    height:auto;
    filter:
        drop-shadow(0 8px 24px rgba(0,0,0,.35));
}


.mh-carousel__content h2 {
  margin: 0;
  color: var(--mh-white);
  font-family: "Proxima Nova ScOsf ExCn Rg", sans-serif;
  font-size: clamp(1.8rem, 3.7vw, 4.85rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .035em;
  text-wrap: balance;
}

.mh-carousel__bullets {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
}

.mh-carousel__bullets li {
  position: relative;
  padding-left: 28px;
}

.mh-carousel__bullets li::before {
  content: "";
  position: absolute;
  top: .63em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mh-gold), var(--mh-gold-light));
  box-shadow: 0 0 0 5px rgba(227, 191, 37, .16);
}

.mh-carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 20px;
  padding: 15px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mh-gold), var(--mh-gold-light));
  color: var(--mh-black);
  font-family: "Poppins", "Inter", Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(227, 191, 37, .24);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  letter-spacing:.02em;
}

.mh-carousel__button:hover,
.mh-carousel__button:focus-visible {
  color: var(--mh-black);
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: 0 20px 44px rgba(227, 191, 37, .32);
}

.mh-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(0, 0, 0, .34);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}



.mh-carousel__arrow span {
  display: block;
  margin-top: -10px;
  font-size: 44px;
  line-height: 1;
}

.mh-carousel__arrow:hover,
.mh-carousel__arrow:focus-visible {
  background: rgba(227, 191, 37, .9);
  border-color: rgba(227, 191, 37, .95);
  color: #000;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .34);
}

.mh-carousel__arrow:hover {
  transform: translateY(-50%) scale(1.06);
}

.mh-carousel__arrow--prev {
    left: 5%;
}

.mh-carousel__arrow--next {
    right: 5%;
}

.mh-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 5;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.mh-carousel__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease, transform 220ms ease;
}

.mh-carousel__dot.is-active {
  width: 34px;
  background: var(--mh-gold);
}

.mh-carousel__dot:hover,
.mh-carousel__dot:focus-visible {
  transform: scale(1.12);
  background: var(--mh-gold-light);
}

.mh-hero__features{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:2rem;
    padding:0;
    list-style:none;
}

.mh-hero__features li{
    display:flex;
    align-items:center;
}

.mh-hero__features span{
    padding:10px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.92);
    font-size:.95rem;
    font-weight:500;
}


.mh-carousel__button:hover{
    transform:translateY(-3px);
}


@media (max-width: 900px) {
  .mh-carousel,
  .mh-carousel__image {
    min-height: 680px;
  }

  .mh-carousel__content-wrap {
    align-items: flex-end;
    padding: 120px 74px 96px 0;
  }

  .mh-carousel__content {
    max-width: 100%;
  }

  .mh-carousel__arrow {
    width: 52px;
    height: 52px;
  }

  .mh-carousel__arrow--prev {
    left: 16px;
  }

  .mh-carousel__arrow--next {
    right: 16px;
  }
}

@media (max-width: 640px) {
  .mh-carousel,
  .mh-carousel__image {
    min-height: 720px;
  }

  .mh-carousel__content-wrap {
    width: calc(100% - 28px);
    padding: 96px 58px 92px 0;
  }

  .mh-carousel__content {
    padding: 22px;
    border-radius: 18px;
  }

  .mh-carousel__content h2 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .mh-carousel__bullets {
    font-size: .98rem;
  }

  .mh-carousel__button {
    width: 100%;
  }

  .mh-carousel__arrow {
    width: 48px;
    height: 48px;
  }

  .mh-carousel__arrow span {
    font-size: 36px;
  }

  .mh-carousel__arrow--prev {
    left: 10px;
  }

  .mh-carousel__arrow--next {
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-carousel *,
  .mh-carousel *::before,
  .mh-carousel *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}