@font-face {
  font-family: 'Serial B';
  src: url('Font/Font Family Serial B otf/SerialBBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Serial B';
  src: url('Font/Font Family Serial B otf/SerialBRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --deep-1: #0f2746;
  --deep-2: #112f57;
  --accent: #d93b8e;
  --muted-yellow: #d2ce7d;
  --brick: #b74031;
  --pale-pink: #e9c5c1;
  --ivory: #fcfbe7;
  --pale-blue: #e4eef3;
  --coral: #d38b82;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* softer pastel blob pattern derived from Colors folder */
  background:
    radial-gradient(420px 300px at 12% 18%, rgba(217,59,142,0.22), transparent 20%),
    radial-gradient(380px 260px at 85% 72%, rgba(228,238,243,0.18), transparent 20%),
    radial-gradient(520px 380px at 50% 12%, rgba(252,251,231,0.18), transparent 22%),
    radial-gradient(360px 260px at 22% 78%, rgba(210,206,125,0.14), transparent 18%),
    radial-gradient(300px 220px at 70% 30%, rgba(233,197,193,0.16), transparent 18%),
    linear-gradient(180deg, var(--deep-1) 0%, var(--deep-2) 72%);
  font-family: 'Serial B', serif;
  color: #071022;
}

/* stronger blurred pastel blobs rendered in fixed pseudo-elements
   so they remain visible and unaffected by content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(217,59,142,0.55) 0%, rgba(217,59,142,0.30) 18%, transparent 45%),
    radial-gradient(circle at 85% 72%, rgba(228,238,243,0.45) 0%, rgba(228,238,243,0.22) 18%, transparent 45%),
    radial-gradient(circle at 50% 12%, rgba(252,251,231,0.48) 0%, rgba(252,251,231,0.22) 18%, transparent 45%),
    radial-gradient(circle at 22% 78%, rgba(210,206,125,0.42) 0%, rgba(210,206,125,0.18) 18%, transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(233,197,193,0.42) 0%, rgba(233,197,193,0.18) 18%, transparent 45%);
  filter: blur(48px) saturate(120%);
  mix-blend-mode: screen;
  opacity: 0.95;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,0.02), transparent 40%), linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.18));
}

.center-hero { position: relative; z-index: 2; }

.center-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2rem;
  text-align: center;
}

.coming {
  font-size: 0.95rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin: 0;
}

.logo {
  width: min(1400px, calc(100vw - 64px));
  height: auto;
  display: block;
  margin: 0 auto;
  pointer-events: none;
  filter: drop-shadow(0 28px 60px rgba(7,16,34,0.55));
}

@media (max-width: 560px) {
  .logo { width: calc(100vw - 40px); }
}

.signup {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

/* unify control sizing and typography */
.signup input,
.signup button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Serial B', serif;
  font-size: 1rem;
  line-height: 1;
  border-radius: 8px;
}

.signup input {
  padding: 0 1.2rem;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.06);
  color: #fff;
  min-width: 280px;
  outline: none;
  display: inline-block;
}

.signup input::placeholder {
  color: rgba(255,255,255,0.65);
  text-transform: none;
}

.signup button {
  padding: 0 1.4rem;
  border: none;
  background-color: #000;
  background-image: none;
  mix-blend-mode: normal;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.message {
  margin-top: 0.6rem;
  color: rgba(255,255,255,0.9);
  min-height: 1.2rem;
}

.message[data-state="error"] {
  color: #ffd7d7;
}

.message[data-state="success"] {
  color: var(--ivory);
}

.message[data-state="pending"] {
  color: rgba(255,255,255,0.75);
}

@media (max-width: 560px) {
  .signup { flex-direction: column; width: 100%; }
  .signup input, .signup button { width: 100%; }
}