*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: white;
}

h1 {
  font-weight: 780;
}

.hero {
  position: relative;
  height: 100vh;
  align-items: flex-end;
  padding-bottom: 0;
}
.hero h2 {
  max-width: 100%;
  font-size: 1rem;
}
@media (min-width: 1001px) {
  .hero {
    align-items: initial;
    padding-bottom: 0;
  }
  .hero h2 {
    max-width: 590px;
    font-size: 1.2rem;
  }
}

.hero-buttons {
  display: flex;
  flex-direction: row;
  gap: 18px;
}

.wrapper {
  position: relative;
  min-height: 300vh;
  overflow-x: clip;
}

.container {
  position: relative;
  z-index: 2;
}

.tag {
  position: absolute;
  z-index: 10;
  transform: scale(0.6);
}
.tag--1 {
  bottom: 20%;
  left: 0%;
}
.tag--2 {
  bottom: 39%;
  left: -3%;
}
.tag--3 {
  bottom: 30%;
  left: 10%;
}
.tag--4 {
  bottom: 19%;
  left: 20%;
}

.spade {
  position: absolute;
  z-index: 2;
  --vw-factor: 90vw;
  --vh-factor: 80vh;
  --w: calc(min(var(--vw-factor), var(--vh-factor)) * 2);
  --h: calc(var(--w) * 1126 / 1271);
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  top: -20vh;
  left: calc(100% - var(--w) / 2 - 5vw);
}
@media (max-width: 480px) and (max-height: 700px) {
  .spade {
    --vw-factor: 65vw;
    --vh-factor: 65vh;
  }
}
@media (min-width: 481px) {
  .spade {
    --vw-factor: 70vw;
    --vh-factor: 75vh;
  }
}
@media (min-width: 821px) and (orientation: portrait) {
  .spade {
    --vw-factor: 70vw;
    top: -15vh;
  }
}
@media (min-width: 769px) and (orientation: landscape) {
  .spade {
    --vw-factor: 50vw;
    --vh-factor: 70vh;
  }
}
@media (min-width: 1400px) and (orientation: landscape) {
  .spade {
    --vw-factor: 50vw;
    --vh-factor: 90vh;
    top: unset;
    bottom: 0;
    left: calc(100% - var(--w) / 1.9);
  }
  .spade .tag {
    transform: scale(0.8);
  }
  .spade .tag--1 {
    bottom: 20%;
    left: 0%;
  }
  .spade .tag--2 {
    bottom: 39%;
    left: -1%;
  }
  .spade .tag--3 {
    bottom: 30%;
    left: 10%;
  }
  .spade .tag--4 {
    bottom: 19%;
    left: 20%;
  }
}
@media (min-width: 1001px) and (orientation: portrait) {
  .spade {
    --vw-factor: 60vw;
    --vh-factor: 80vh;
    top: -20vh;
  }
}
.spade__background {
  position: relative;
  width: 100%;
  height: 100%;
}
.spade__background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images-25-tb/img/home-background.png") center/auto no-repeat;
  pointer-events: none;
}
.spade__sphere {
  width: 85vmin;
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  bottom: -18vmin;
  right: 57%;
  animation: spin 50s linear infinite;
  filter: drop-shadow(0 0 30px rgba(64, 175, 255, 0.5333333333)) drop-shadow(0 0 21px #9FEEF6) drop-shadow(0 0 19px #277ADF);
}
.spade__mask {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}