html[lang="en"] .hero h1 {
  max-width: 555px;
  white-space: normal;
  font-size: 58px;
  letter-spacing: -2px;
}

html[lang="en"] .hero-body {
  max-width: 560px;
  font-size: 21px;
}

.hero {
  grid-template-columns: 44% 56%;
}

.hero h1 {
  font-size: clamp(56px, 4.45vw, 68px);
  letter-spacing: -12px;
}

.hero-wave {
  position: absolute;
  z-index: 0;
  left: -140px;
  top: 245px;
  width: 870px;
  height: 290px;
  object-fit: contain;
  opacity: 0.16;
  pointer-events: none;
}

.product-window {
  z-index: 1;
}

.qr-image {
  position: relative;
  display: block;
  width: 148px;
  height: 148px;
  margin: auto;
}

.qr-image > img:first-child {
  width: 148px;
  height: 148px;
}

.qr-image .qr-logo {
  position: absolute;
  left: 57px;
  top: 57px;
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 7px;
  background: white;
}

.hero-side-note {
  position: absolute;
  z-index: 2;
  right: 5px;
  top: 278px;
  color: #66616c;
  font-family: "Kaiti SC", "STKaiti", cursive;
  font-size: 14px;
  line-height: 1.65;
  transform: rotate(-8deg);
}

.download-grid > * {
  min-width: 0;
}

.download-card span {
  overflow: hidden;
}

.download-card p {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  html[lang="en"] .hero h1 {
    font-size: 45px;
  }

  .hero-wave {
    left: -180px;
    top: 265px;
    opacity: 0.12;
  }

  .qr-image,
  .qr-image > img:first-child {
    width: 116px;
    height: 116px;
  }

  .qr-image .qr-logo {
    left: 43px;
    top: 43px;
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 1400px) {
  .hero {
    padding-left: 24px;
    padding-right: 86px;
  }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-side-note {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero h1,
  html[lang="en"] .hero h1 {
    letter-spacing: -4px;
  }
}