.hero__inner {
  position: relative;
  width: 100vw;
  height: 100svh;
}

.hero__content {
  position: absolute;
  top: calc(190 * var(--m));
  left: calc(330 * var(--m));

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--m));
}

.hero__scene {
  position: absolute;
  left: calc(-304 * var(--m));
  bottom: clamp(calc(100lvh - 844 * var(--m)), 0px, 0px);
  width: calc(780 * var(--m));
  height: calc(844 * var(--m));
}


.hero__heading-line1 {
  font-family: 'Anton', sans-serif;
  font-size: calc(68 * var(--m));
  line-height: 130%;
  letter-spacing: 0.03em;
  color: var(--color-magenta);
}

.hero__heading-line2 {
  font-family: 'Anton', sans-serif;
  font-size: calc(68 * var(--m));
  line-height: 91%;
  letter-spacing: 0;
  color: var(--color-magenta);
}

.hero__image {
  position: absolute;
  left: calc(0 * var(--m));
  bottom: calc(-40 * var(--m));
  width: 100%;
  height: auto;
  z-index: 2;
}

.hero__cta {
  position: absolute;
  right: calc(85 * var(--m));;
  left: auto;
  gap: 0;
  bottom: calc(220 * var(--m));
  width: calc(273 * var(--s));
  height: calc(107 * var(--s));
  background: var(--color-magenta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: calc(12 * var(--s));
  text-decoration: none;
  z-index: 3;
}

.hero__cta-label {
  font-family: 'Anton', sans-serif;
  font-size: calc(54 * var(--s));
  line-height: 70%;
  letter-spacing: 0.05em;
  color: #00F5FF;
  padding-left: calc(12 * var(--s));
}

.hero__cta-arrow {
  width: calc(86 * var(--s));
  height: calc(86 * var(--s));
  flex-shrink: 0;
  transform: rotate(90deg);
}

.hero__cta-text {
  position: absolute;
  left: 0;
  bottom: 100%;
  font-family: 'Teko', sans-serif;
  font-weight: 600;
  font-size: calc(17.5 * var(--s));
  line-height: 120%;
  letter-spacing: 0.04em;
  color: #F7F7F7;
  z-index: 3;
  white-space: nowrap;
}

.hero__logo--mobile  { 
  display: block;
  position: relative;
  left: calc(197 * var(--m));
  right: auto;
  top: auto;
  bottom: auto;
  width: calc(156 * var(--m));
  height: auto;
  z-index: 3;
}


@media (max-width: 380px) and (max-height: 600px) {
  /* SE 3gen */
  .hero__image {
    left: calc(40 * var(--m));
    bottom: calc(-80 * var(--m));
    width: calc(700 * var(--m));
  }
  .hero__cta {
    bottom: calc(150 * var(--m));
    width: calc(330 * var(--s));
    height: calc(117 * var(--s));
  }
  .hero__cta-label{
    font-size: calc(64 * var(--s));
    line-height: 70%;
    letter-spacing: 0.05em;
    color: #00F5FF;
    padding-left: calc(20 * var(--s));
  }
  .hero__cta-text{
    font-size: calc(21.8 * var(--s));
    line-height: 120%;
    letter-spacing: 0.04em;
  }
  .hero__cta-arrow {
    width: calc(96 * var(--s));
    height: calc(96 * var(--s));
    flex-shrink: 0;
  }
  .hero__content {
    top: calc(290 * var(--m));
  }

}