body {
  margin: 0;
  background: #ff003c;
  font-family: Arial, sans-serif;
}

.landing-body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* container */
.landing {
  text-align: center;
}
.hero-img {
  width: min(80vw, 800px);
  height: auto;
  display: block;
  margin: auto;
}


/* entrance animation */
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}

/* CTA button */
.cta {
  margin-top: 40px;
  padding: 16px 36px;
  font-size: 18px;
  border: none;
  border-radius: 999px;
  background: #f5ec3fef;
  color: #ff003c;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.5s;
  will-change: transform, opacity;
}

.cta.show {
  opacity: 1;
  transform: translateY(0);
}

.cta:hover {
  background: #ffe3ea;
}
/* container center */
.login-container {
  text-align: center;
  color: #ffe3ea;
}

/* logo */
.login-logo {
  width: min(70vw, 700px);
  margin-bottom: 20px;
  animation: popIn 0.8s ease;
}

/* heading */
.login-container h1 {
  color: #f5ec3fef;
  font-size: 32px;
  margin-bottom: 10px;
}

/* subtitle */
.login-container p {
  color: #ffe3ea;
  opacity: 0.9;
  margin-bottom: 30px;
}

/* sign-in box */
.login-box {
  background: white;
  border-radius: 20px;
  padding: 30px;
  width: 320px;
  margin: auto;
}

/* button */
.login-box button {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  border: none;
  font-weight: bold;
  background: #f5ec3fef;
  color: #ff003c;
  cursor: pointer;
  transition: 0.3s;
}

.login-box button:hover {
  background: #ffe3ea;
}