/* Hero Te a'Nopa: bersih, seimbang, dan berfokus pada identitas merek. */
.hero {
  min-height: 730px;
  padding-top: 178px;
  padding-bottom: 82px;
}

.hero-copy {
  width: 55%;
}

.hero-visual {
  top: 185px;
  right: max(28px, calc((100vw - 1180px) / 2));
  width: 470px;
  height: 400px;
}

.hero-visual .orbit-one {
  inset: 10%;
  border-color: rgba(216, 172, 85, .22);
}

.hero-visual .orbit-two {
  inset: 0;
  border-color: rgba(216, 172, 85, .13);
  opacity: .72;
}

.hero-mark.logo-showcase {
  position: relative;
  z-index: 2;
  width: 465px;
  height: 305px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-mark.logo-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 126, 182, .20), transparent 68%);
  filter: blur(16px);
}

.logo-showcase .hero-logo-full {
  position: absolute;
  top: -33%;
  left: -3%;
  width: 114%;
  max-width: none;
  height: auto;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 18px 18px rgba(0, 0, 0, .32));
}

.hero-footnote {
  bottom: 28px;
}

@media (max-width: 1120px) and (min-width: 981px) {
  .hero-copy {
    width: 54%;
  }

  .hero-visual {
    right: 18px;
    width: 410px;
    height: 370px;
  }

  .hero-mark.logo-showcase {
    width: 405px;
    height: 270px;
  }
}

@media (max-width: 980px) {
  .hero {
    min-height: 890px;
    padding-top: 150px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-visual {
    top: auto;
    right: auto;
    width: 430px;
    height: 350px;
    margin-top: 36px;
  }

  .hero-mark.logo-showcase {
    width: 420px;
    height: 280px;
  }
}

@media (max-width: 620px) {
  .hero {
    min-height: 820px;
    padding-top: 124px;
  }

  .hero-visual {
    width: 300px;
    height: 260px;
    margin-top: 28px;
  }

  .hero-mark.logo-showcase {
    width: 294px;
    height: 200px;
  }

  .logo-showcase .hero-logo-full {
    top: -31%;
    left: -4%;
    width: 116%;
  }
}