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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap');

body, html {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', 'Inter Placeholder', sans-serif;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
}

#gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f2e6d9;
  z-index: -2;
  overflow: hidden;
}

#gradient-background::before {
  content: '';
  position: absolute;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle, rgba(255, 147, 61, 0.6) 0%, rgba(255, 103, 28, 0.4) 25%, transparent 50%);
  border-radius: 50%;
  filter: blur(30px);
  animation: blob1 12s ease-in-out infinite;
  top: -200px;
  left: -200px;
}

#gradient-background::after {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.6) 0%, rgba(255, 152, 0, 0.4) 25%, transparent 50%);
  border-radius: 50%;
  filter: blur(30px);
  animation: blob2 15s ease-in-out infinite;
  bottom: -150px;
  right: -150px;
}

@keyframes blob1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(300px, 100px) scale(1.1);
  }
  50% {
    transform: translate(150px, 300px) scale(0.9);
  }
  75% {
    transform: translate(-100px, 200px) scale(1.05);
  }
}

@keyframes blob2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(-200px, -150px) scale(1.15);
  }
  40% {
    transform: translate(-350px, 100px) scale(0.85);
  }
  60% {
    transform: translate(-100px, -200px) scale(1.1);
  }
  80% {
    transform: translate(-250px, 50px) scale(0.95);
  }
}



.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100vh;
  padding: 4rem;
  text-align: left;
  color: rgb(20, 52, 59);
}

.logo {
  opacity: 1;
  transform: none;
}

.logo h1 {
  font-family: 'Inter', 'Inter Placeholder', sans-serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 140%;
  margin-bottom: 0;
  text-align: left;
  color: rgb(20, 52, 59);
}

.logo h1 span {
  display: block;
}

.coming-soon {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  font-family: 'Inter', 'Inter Placeholder', sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1;
  color: rgb(20, 52, 59);
}

@media (max-width: 768px) {
  .logo h1 {
    font-size: 2rem;
    letter-spacing: 0.12rem;
  }
}

@media (max-width: 480px) {
  .logo h1 {
    font-size: 1.5rem;
  }
}