html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #050816;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 72% 14%, rgba(94,72,255,.26), transparent 30rem),
    radial-gradient(circle at 24% 38%, rgba(255,193,54,.18), transparent 28rem),
    linear-gradient(135deg, #02040d 0%, #050816 52%, #09051b 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

.page {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vmin, 24px);
}

.hero {
  width: min(760px, 92vw, calc(64svh * 16 / 9));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(8px, 1.6vmin, 20px);
}

.hero-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  border-radius: clamp(14px, 2.4vmin, 36px);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    0 28px 80px rgba(0,0,0,.60),
    0 0 70px rgba(68,111,255,.16),
    0 0 60px rgba(255,200,61,.10);
}

.coming-soon {
  margin: 0;
  color: #a76cff;
  text-align: center;
  font-size: clamp(.9rem, 2.2vmin, 1.8rem);
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.signup {
  width: 100%;
  margin: 0 auto;
  padding: clamp(14px, 2.2vmin, 28px);
  text-align: center;
  border-radius: clamp(18px, 2.4vmin, 30px);
  background: rgba(5,8,22,.48);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 56px rgba(0,0,0,.28);
}

.statement {
  margin: 0 auto;
  max-width: 850px;
  color: #ffffff;
  font-size: clamp(1rem, 2.25vmin, 2.05rem);
  line-height: 1.28;
  font-weight: 800;
}

.statement span {
  color: #ffc83d;
}

form {
  margin: clamp(12px, 1.8vmin, 24px) auto 0;
  display: flex;
  gap: clamp(8px, 1.2vmin, 12px);
  max-width: 720px;
}

input,
button {
  min-height: clamp(46px, 5.5vmin, 58px);
  border: 0;
  border-radius: 999px;
  font: inherit;
}

input {
  flex: 1;
  min-width: 0;
  padding: 0 clamp(16px, 2vmin, 24px);
  color: #ffffff;
  background: rgba(255,255,255,.10);
  outline: 1px solid rgba(255,255,255,.13);
}

input::placeholder {
  color: rgba(255,255,255,.50);
}

button {
  padding: 0 clamp(18px, 2.4vmin, 28px);
  color: #160f02;
  background: linear-gradient(180deg, #ffe28c, #ffc83d);
  font-weight: 900;
  cursor: pointer;
}

.message {
  margin: clamp(10px, 1.6vmin, 22px) auto 0;
  font-weight: 800;
}

.message.success { color: #8cffbd; }
.message.error { color: #ff8a8a; }

.site-footer {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;

  color: rgba(255,255,255,.52);
  font-size: .95rem;
}

.site-footer a {
  color: #a76cff;
  text-decoration: none;
  font-weight: 600;
}

.site-footer a:hover {
  color: #c69aff;
}

.separator {
  color: rgba(255,255,255,.35);
  font-size: .9rem;
}

@media (max-width: 700px) {
  .page {
    padding: 16px;
    min-height: 100svh;
  }

  .hero {
    width: 100%;
    max-width: 100%;
    gap: 16px;
  }

  .hero-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
      0 20px 50px rgba(0,0,0,.50),
      0 0 40px rgba(68,111,255,.12);

    margin: 0;
  }

  .coming-soon {
    margin: 4px 0 0;
    font-size: 1.1rem;
    letter-spacing: .22em;
  }

  .signup {
    width: 100%;
    margin: 0;

    padding: 22px 18px 24px;

    border-radius: 24px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(5,8,22,.55);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
      0 20px 50px rgba(0,0,0,.35);
  }

  .statement {
    font-size: clamp(0.95rem, 4vw, 1.25rem);
    line-height: 1.3;
  }

  .statement span {
    white-space: nowrap;
  }

  form {
    flex-direction: column;
    gap: 12px;
  }

  input,
  button {
    width: 100%;
  }

  footer {
    margin-top: 18px;
  }

}

@media (max-height: 760px) and (min-width: 701px) {
  .hero {
    width: min(760px, 92vw, calc(56svh * 16 / 9));
  }

  .signup {
    padding: 16px 22px;
  }

  .statement {
    font-size: clamp(1rem, 2vmin, 1.55rem);
  }

  form {
    margin-top: 14px;
  }

  input,
  button {
    min-height: 46px;
  }

  .site-footer {
    margin-top: 12px;
  }
}