/*
 * Light desktop hero carousel.
 * Structure and staggered motion are inspired by polished template-library
 * carousels, while colors remain intentionally light for Jiyi GEO sites.
 */

.site-header.site-header--hero {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(13, 27, 46, .30) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) saturate(112%) !important;
}

.site-header.site-header--hero .brand,
.site-header.site-header--hero .site-nav a {
  color: rgba(255, 255, 255, .96) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .24);
}

.site-header.site-header--hero .site-nav a::after {
  background: #fff !important;
}

.site-header.site-header--hero .site-nav a:hover,
.site-header.site-header--hero .site-nav .nav-link.is-current {
  color: #fff !important;
}

.site-header.site-header--hero.is-scrolled {
  border-color: rgba(228, 231, 236, .88) !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .08) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
}

.site-header.site-header--hero.is-scrolled .brand,
.site-header.site-header--hero.is-scrolled .site-nav a {
  color: #344054 !important;
  text-shadow: none;
}

.site-header.site-header--hero.is-scrolled .site-nav a::after {
  background: var(--site-brand) !important;
}

.site-header.site-header--hero.is-scrolled .site-nav a:hover,
.site-header.site-header--hero.is-scrolled .site-nav .nav-link.is-current {
  color: var(--site-brand) !important;
}

.growth-hero-carousel,
.growth-hero-carousel.has-hero-image {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #edf3fa !important;
}

.growth-hero-carousel::before,
.growth-hero-carousel::after {
  display: none !important;
}

.hero-slides,
.hero-slide,
.hero-slide-media {
  position: absolute;
  inset: 0;
}

.hero-slide {
  --hero-text-color: #17233c;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0s linear 1.05s, opacity 1.05s ease;
}

.hero-slide.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.hero-slide-media {
  background:
    var(--hero-slide-image, url("../images/defaults/hero.webp")) center / cover no-repeat,
    linear-gradient(135deg, #eef4fb, #f9fbfd);
}

.hero-slide-inner {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(1480px, calc(100% - 160px));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 132px 0 76px;
  align-items: center;
}

.growth-hero-carousel .hero-copy {
  width: min(760px, 58vw);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.growth-hero-carousel .hero-copy .hero-title,
.growth-hero-carousel .hero-text,
.growth-hero-carousel .hero-actions,
.growth-hero-carousel .hero-promises {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}

.hero-slide.is-active .hero-copy .hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

.hero-slide.is-active .hero-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .35s;
}

.hero-slide.is-active .hero-actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .48s;
}

.hero-slide.is-active .hero-promises {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .6s;
}

.growth-hero-carousel .hero-copy .hero-title {
  max-width: 760px;
  margin: 0;
  color: var(--hero-text-color) !important;
  font-size: clamp(54px, 5.2vw, 78px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.06em !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .28), 0 3px 24px rgba(15, 23, 42, .24) !important;
}

.growth-hero-carousel .hero-text {
  max-width: 690px;
  margin: 24px 0 0;
  color: color-mix(in srgb, var(--hero-text-color) 92%, transparent) !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .26), 0 2px 18px rgba(15, 23, 42, .22) !important;
}

.growth-hero-carousel .hero-actions {
  justify-content: flex-start !important;
  margin-top: 32px !important;
}

.growth-hero-carousel .hero-primary-link {
  padding: 14px 24px;
  border-radius: 10px;
  background: var(--site-brand);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--site-brand) 24%, transparent);
}

.growth-hero-carousel .hero-primary-link:hover {
  transform: translateY(-2px);
}

.growth-hero-carousel .hero-text-link {
  color: var(--hero-text-color) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .24), 0 1px 12px rgba(15, 23, 42, .20);
}

.growth-hero-carousel .hero-text-link span {
  color: var(--hero-text-color) !important;
}

.growth-hero-carousel .hero-promises {
  justify-content: flex-start !important;
  gap: 12px 26px !important;
  margin: 30px 0 0 !important;
}

.growth-hero-carousel .hero-promises span {
  color: color-mix(in srgb, var(--hero-text-color) 94%, transparent) !important;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .24), 0 1px 12px rgba(15, 23, 42, .20) !important;
}

.growth-hero-carousel .hero-promises span::before {
  background: var(--hero-text-color) !important;
}

.hero-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(92,112,139,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: #26364d;
  box-shadow: 0 12px 32px rgba(50,68,92,.10);
  cursor: pointer;
  opacity: .72;
  transform: translateY(-50%);
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
  backdrop-filter: blur(12px);
}

.growth-hero-carousel.is-multiple .hero-carousel-arrow {
  display: grid;
}

.hero-carousel-arrow:hover {
  border-color: color-mix(in srgb, var(--site-brand) 38%, transparent);
  color: var(--site-brand);
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
}

.hero-carousel-prev { left: 34px; }
.hero-carousel-next { right: 34px; }

.hero-carousel-dots {
  position: absolute;
  right: 0;
  bottom: 34px;
  left: 0;
  z-index: 4;
  display: none;
  justify-content: center;
  gap: 8px;
}

.growth-hero-carousel.is-multiple .hero-carousel-dots {
  display: flex;
}

.hero-carousel-arrow[hidden],
.hero-carousel-dots[hidden] {
  display: none !important;
}

.hero-carousel-dot {
  width: 34px;
  height: 18px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-carousel-dot span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(45,62,85,.22);
  overflow: hidden;
}

.hero-carousel-dot.is-active span {
  background: var(--site-brand);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide-media,
  .growth-hero-carousel .hero-copy .hero-title,
  .growth-hero-carousel .hero-text,
  .growth-hero-carousel .hero-actions,
  .growth-hero-carousel .hero-promises {
    transition-duration: .01ms !important;
  }
}

/* The site remains desktop-first. On phones only shorten the homepage hero so
 * a single slide does not consume the entire portrait screen. */
@media (orientation: portrait) and (max-device-width: 820px) {
  .growth-hero-carousel,
  .growth-hero-carousel.has-hero-image,
  .hero-slide-inner {
    min-height: 760px;
  }

  .hero-slide-inner {
    padding-top: 118px;
    padding-bottom: 58px;
  }
}