.creen-hero-carousel {
  --hero-height: var(--hero-height-desktop, clamp(420px, 72vh, 760px));
  --hero-height-mobile: clamp(370px, 68svh, 520px);
  --hero-edge-space: clamp(0.8rem, 2.4vw, 1.4rem);
  --hero-media-offset-scale: 1;
  --hero-content-max: var(--site-container-max, 1400px);
  --hero-content-width: var(--site-container-width, 95%);
  --hero-gutter: max((100vw - min(var(--hero-content-max), var(--hero-content-width))) / 2, 0px);
  --hero-overlay: linear-gradient(112deg, rgba(7, 12, 21, 0.9) 0%, rgba(7, 12, 21, 0.68) 46%, rgba(7, 12, 21, 0.4) 100%);
  --hero-primary: #11c5bf;
  --hero-primary-hover: #0bb1ac;
  --hero-text: #f7fafc;
  --hero-muted: #d9e2ec;
  --hero-focus: #ffd166;
  position: relative;
  width: 100%;
  min-height: var(--hero-height);
  overflow: hidden;
  border: 0;
  outline: 0;
  background: #0b1220;
}

.creen-hero-carousel__viewport {
  position: relative;
  width: 100%;
  min-height: var(--hero-height);
}

.creen-hero-carousel__slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 560ms ease, transform 560ms ease;
  pointer-events: none;
}

.creen-hero-carousel.is-transition-slide .creen-hero-carousel__slide {
  transform: translateX(3.4%);
}

.creen-hero-carousel__slide.is-active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
  pointer-events: auto;
}

.creen-hero-carousel__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  opacity: var(--hero-overlay-opacity, 1);
}

.creen-hero-carousel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: clamp(2rem, 5vw, 4.2rem) max(var(--hero-gutter), var(--hero-edge-space));
}

.creen-hero-carousel__layout {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(220px, var(--hero-media-width, 460px));
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.creen-hero-carousel__layout.has-no-media {
  grid-template-columns: minmax(0, 700px);
}

.creen-hero-carousel__content {
  --hero-content-pad-effective: var(--hero-content-pad, clamp(1rem, 2.2vw, 1.6rem));
  --hero-align-nudge-effective: var(--hero-align-nudge, clamp(6px, 0.9vw, 14px));
  max-width: min(700px, 100%);
  position: relative;
  top: var(--hero-content-nudge-y, 0px);
  margin-left: calc((var(--hero-content-pad-effective) * -1) - var(--hero-align-nudge-effective));
  padding: var(--hero-content-pad-effective);
  background: rgba(7, 12, 21, 0.45);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(7, 12, 21, 0.22);
  animation: heroContentRise 700ms ease;
  overflow-wrap: anywhere;
}

.creen-hero-carousel__media {
  --hero-media-align-nudge: 0px;
  justify-self: end;
  width: min(100%, var(--hero-media-width, 460px));
  transform-origin: center bottom;
  transform: translate(
    calc((var(--hero-media-offset-x, 0px) + var(--hero-media-slide-offset-x, 0px)) * var(--hero-media-offset-scale, 1) - var(--hero-media-align-nudge)),
    calc((var(--hero-media-offset-y, 0px) + var(--hero-media-slide-offset-y, 0px)) * var(--hero-media-offset-scale, 1))
  ) scale(calc(var(--hero-media-scale, 1) * var(--hero-media-slide-scale, 1)));
  animation: heroContentRise 820ms ease;
}

.creen-hero-carousel.is-align-left .creen-hero-carousel__media {
  --hero-media-align-nudge: var(--hero-align-nudge, 0px);
}

.creen-hero-carousel__media img {
  display: block;
  width: 100%;
  max-height: min(calc(var(--hero-height) - 5rem), var(--hero-media-max-height, 560px));
  object-fit: contain;
  filter: drop-shadow(0 24px 46px rgba(5, 10, 18, 0.34));
}

.creen-hero-carousel.is-align-center .creen-hero-carousel__content {
  margin: 0 auto;
  text-align: center;
}

.creen-hero-carousel.is-align-center .creen-hero-carousel__layout {
  grid-template-columns: minmax(0, 700px);
  justify-content: center;
}

.creen-hero-carousel.is-align-center .creen-hero-carousel__media {
  display: none;
}

.creen-hero-carousel__eyebrow {
  margin: 0 0 0.85rem;
  transform: translateY(var(--hero-eyebrow-nudge-y, 0px));
  color: var(--hero-eyebrow-color, #f8d06f);
  font-family: var(--hero-eyebrow-font-family, inherit);
  font-size: var(--hero-eyebrow-font-size, clamp(0.74rem, 1.15vw, 0.9rem));
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(5, 10, 18, 0.35);
}

.creen-hero-carousel h1 {
  margin: 0;
  color: var(--hero-text);
  font-family: var(--hero-title-font-family, inherit);
  font-size: var(--hero-title-size, clamp(2rem, 5.5vw, 4rem));
  font-weight: var(--hero-title-font-weight, 700);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 24px rgba(5, 10, 18, 0.46);
  text-wrap: balance;
}

.creen-hero-carousel p {
  margin: 1rem 0 0;
  color: var(--hero-muted);
  font-family: var(--hero-subtitle-font-family, inherit);
  font-size: var(--hero-subtitle-font-size, clamp(1rem, 1.75vw, 1.24rem));
  line-height: 1.6;
  text-shadow: 0 2px 16px rgba(5, 10, 18, 0.4);
  max-width: 56ch;
  text-wrap: pretty;
}

.creen-hero-carousel.is-align-center p {
  margin-left: auto;
  margin-right: auto;
}

.creen-hero-carousel.is-align-center .creen-hero-carousel__eyebrow {
  margin-left: auto;
  margin-right: auto;
}

.creen-hero-carousel p.creen-hero-carousel__eyebrow {
  margin: 0 0 0.85rem;
  transform: translateY(var(--hero-eyebrow-nudge-y, 0px));
  color: var(--hero-eyebrow-color, #f8d06f);
  font-family: var(--hero-eyebrow-font-family, inherit);
  font-size: var(--hero-eyebrow-font-size, clamp(0.74rem, 1.15vw, 0.9rem));
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(5, 10, 18, 0.35);
}

.creen-hero-carousel__buttons {
  margin-top: clamp(1.2rem, 2.2vw, 1.9rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.creen-hero-carousel.is-align-center .creen-hero-carousel__buttons {
  justify-content: center;
}

.creen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-btn-min-height, 46px);
  padding: var(--hero-btn-pad-v, 0.74rem) var(--hero-btn-pad-h, 1.2rem);
  border-radius: var(--hero-btn-radius, 999px);
  text-decoration: none;
  font-weight: var(--hero-btn-font-weight, 700);
  font-size: var(--hero-btn-font-size, 15px);
  letter-spacing: var(--hero-btn-letter-spacing, 0.01em);
  text-transform: var(--hero-btn-text-transform, none);
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
  max-width: 100%;
}

.creen-btn--primary,
.creen-btn--ghost {
  overflow: hidden;
  text-overflow: ellipsis;
}

.creen-btn--primary {
  background: var(--hero-primary);
  color: var(--hero-btn-text, #03272a);
  border: var(--hero-btn-border-width, 0px) solid var(--hero-btn-border-color, transparent);
  box-shadow: var(--hero-btn-shadow, 0 12px 28px rgba(17, 197, 191, 0.32));
}

.creen-btn--primary:hover {
  background: var(--hero-primary-hover);
  color: var(--hero-btn-text-hover, #03272a);
  transform: translateY(-1px) scale(1.01);
}

.creen-btn--ghost {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(3px);
}

.creen-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}

.creen-hero-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 14, 24, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  color: #ffffff;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.creen-hero-carousel__nav:hover {
  background: rgba(8, 14, 24, 0.72);
}

.creen-hero-carousel__nav--prev {
  left: clamp(0.45rem, 2.3vw, 1.4rem);
}

.creen-hero-carousel__nav--next {
  right: clamp(0.45rem, 2.3vw, 1.4rem);
}

.creen-hero-carousel__dots {
  position: absolute;
  bottom: clamp(0.95rem, 2vw, 1.4rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}

.creen-hero-carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.38);
  transition: transform 180ms ease, background-color 180ms ease;
}

.creen-hero-carousel__dot.is-active {
  background: #ffffff;
  transform: scale(1.16);
}

.creen-hero-carousel a:focus-visible,
.creen-hero-carousel button:focus-visible {
  outline: 2px solid var(--hero-focus);
  outline-offset: 3px;
}

@keyframes heroContentRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@media (max-width: 1180px) {
  .creen-hero-carousel h1 {
    font-size: clamp(1.7rem, calc(var(--hero-title-size, 64px) * 0.7), var(--hero-title-size, 64px));
  }

  .creen-hero-carousel__layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, clamp(260px, 34vw, 420px));
    gap: clamp(1rem, 3.2vw, 2.2rem);
  }

  .creen-hero-carousel__content {
    max-width: min(640px, 100%);
  }
}

@media (max-width: 980px) {
  .creen-hero-carousel {
    --hero-height: clamp(500px, 86svh, 760px);
    --hero-media-offset-scale: 0.82;
  }

  .creen-hero-carousel__inner {
    padding-top: clamp(1.4rem, 4.8vw, 2.2rem);
    padding-bottom: clamp(3.7rem, 9vw, 5rem);
  }

  .creen-hero-carousel__layout,
  .creen-hero-carousel__layout.has-no-media {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .creen-hero-carousel__content {
    --hero-align-nudge: 0px;
    margin-left: 0;
    max-width: min(100%, 760px);
  }

  .creen-hero-carousel__media {
    --hero-media-align-nudge: 0px;
    justify-self: start;
    width: min(100%, clamp(240px, 62vw, 420px));
    max-width: 100%;
    order: 2;
  }

  .creen-hero-carousel__media img {
    max-height: min(45svh, 360px);
  }

  .creen-hero-carousel__dots {
    bottom: clamp(0.75rem, 2.8vw, 1.1rem);
  }
}

@media (max-width: 820px) {
  .creen-hero-carousel {
    --hero-height: var(--hero-height-mobile);
    --hero-gutter: clamp(0.85rem, 4vw, 1.2rem);
    --hero-media-offset-scale: 0.68;
  }

  .creen-hero-carousel__media {
    display: none;
  }

  .creen-hero-carousel__nav {
    width: 40px;
    height: 40px;
    top: auto;
    bottom: clamp(0.5rem, 2.8vw, 1rem);
    transform: none;
  }

  .creen-hero-carousel__inner {
    padding-top: clamp(1.2rem, 5vw, 2rem);
    padding-bottom: clamp(3.4rem, 12vw, 4.2rem);
  }

  .creen-hero-carousel__content {
    --hero-align-nudge: 0px;
    margin-left: 0;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(7, 12, 21, 0.22);
  }

  .creen-hero-carousel__media {
    justify-self: start;
    width: min(100%, clamp(230px, 72vw, 360px));
  }

  .creen-hero-carousel__media img {
    max-height: min(38svh, 300px);
  }

  .creen-hero-carousel__nav--prev {
    left: clamp(0.5rem, 2.8vw, 1rem);
  }

  .creen-hero-carousel__nav--next {
    right: clamp(0.5rem, 2.8vw, 1rem);
  }

  .creen-hero-carousel__dots {
    left: 50%;
    bottom: clamp(0.85rem, 3.2vw, 1.2rem);
    gap: 0.42rem;
  }

  .creen-hero-carousel h1 {
    font-size: clamp(1.65rem, 7vw, 2.5rem);
    line-height: 1.12;
  }

  .creen-hero-carousel p {
    font-size: clamp(0.96rem, 3.1vw, 1.08rem);
    line-height: 1.5;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .creen-hero-carousel {
    --hero-height-mobile: clamp(350px, 62svh, 470px);
    --hero-media-offset-scale: 0.56;
  }

  .creen-hero-carousel__buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.62rem;
  }

  .creen-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .creen-hero-carousel__dot {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 480px) {
  .creen-hero-carousel {
    --hero-height-mobile: clamp(330px, 58svh, 430px);
    --hero-edge-space: clamp(0.72rem, 4vw, 0.9rem);
    --hero-media-offset-scale: 0.48;
  }

  .creen-hero-carousel__inner {
    padding-top: clamp(0.95rem, 4.5vw, 1.3rem);
    padding-bottom: clamp(3.6rem, 14vw, 4.8rem);
  }

  .creen-hero-carousel__content {
    --hero-content-pad-effective: clamp(0.78rem, 2.7vw, 1rem);
  }

  .creen-hero-carousel__nav {
    width: 36px;
    height: 36px;
  }

  .creen-hero-carousel__media {
    width: min(100%, 280px);
  }
}

@media (max-width: 380px) {
  .creen-hero-carousel h1 {
    font-size: clamp(1.44rem, 8.4vw, 1.9rem);
  }

  .creen-hero-carousel p {
    font-size: 0.94rem;
  }

  .creen-hero-carousel__dots {
    gap: 0.34rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .creen-hero-carousel {
    --hero-height: clamp(360px, 100svh, 520px);
    --hero-media-offset-scale: 0.5;
  }

  .creen-hero-carousel__inner {
    padding-top: 0.85rem;
    padding-bottom: 3.2rem;
  }

  .creen-hero-carousel__content {
    --hero-content-pad-effective: clamp(0.72rem, 1.5vw, 0.9rem);
  }

  .creen-hero-carousel h1 {
    font-size: clamp(1.3rem, 4.6vw, 2rem);
  }

  .creen-hero-carousel p {
    margin-top: 0.6rem;
    font-size: clamp(0.9rem, 2.1vw, 1rem);
  }

  .creen-hero-carousel__media img {
    max-height: min(42svh, 200px);
  }
}