:root {
  --sky-blue: #56b4e9;
  --light-sky: #87ceeb;
  --deep-navy: #0a1628;
  --dark-lead: #1a2744;
  --accent: #3a7bd5;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--light-sky);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: var(--deep-navy);
}

body::before {
  position: fixed;
  inset: -30%;
  z-index: -2;
  content: "";
  background:
    radial-gradient(ellipse at 18% 28%, rgba(86, 180, 233, 0.58) 0 12%, transparent 35%),
    radial-gradient(ellipse at 80% 22%, rgba(58, 123, 213, 0.62) 0 14%, transparent 38%),
    radial-gradient(ellipse at 48% 78%, rgba(135, 206, 235, 0.42) 0 13%, transparent 42%),
    radial-gradient(ellipse at 72% 70%, rgba(26, 39, 68, 0.9) 0 18%, transparent 45%);
  filter: blur(74px) saturate(1.28);
  opacity: 0.95;
  animation: liquid-gradient 14s ease-in-out infinite alternate;
}

body::after {
  position: fixed;
  inset: -20%;
  z-index: -1;
  content: "";
  background:
    conic-gradient(
      from 90deg at 50% 50%,
      rgba(86, 180, 233, 0.08),
      rgba(10, 22, 40, 0.2),
      rgba(58, 123, 213, 0.16),
      rgba(135, 206, 235, 0.08),
      rgba(86, 180, 233, 0.08)
    );
  filter: blur(34px);
  opacity: 0.78;
  animation: liquid-swirl 22s linear infinite;
}

.coming-soon {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  text-align: center;
}

h1 {
  margin: 0;
  color: #eefaff;
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.96;
  text-shadow:
    0 0 24px rgba(135, 206, 235, 0.22),
    0 18px 52px rgba(0, 0, 0, 0.52);
  white-space: nowrap;
}

@keyframes liquid-gradient {
  0% {
    transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1);
    border-radius: 44% 56% 62% 38% / 52% 40% 60% 48%;
  }

  50% {
    transform: translate3d(4%, 5%, 0) rotate(16deg) scale(1.08);
    border-radius: 58% 42% 36% 64% / 38% 60% 40% 62%;
  }

  100% {
    transform: translate3d(6%, -4%, 0) rotate(-10deg) scale(1.04);
    border-radius: 42% 58% 54% 46% / 64% 36% 58% 42%;
  }
}

@keyframes liquid-swirl {
  to {
    transform: rotate(1turn) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: clamp(2.5rem, 13vw, 4.5rem);
    white-space: normal;
  }
}