:root {
  --bg-color: #000000;
  --text-primary: #ffffff;
  --text-grey: #888888;
  --text-light-grey: #cccccc;
  --accent-orange: #ff6a00;
  --accent-orange-glow: rgba(255, 106, 0, 0.45);
  --text-base-gradient: linear-gradient(180deg, #ffffff 20%, #3a3a3a 100%);
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

body {
  font-family: var(--font-heading);
  background-color: var(--bg-color);
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Background Canvas */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Glowing Blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  z-index: 0;
  opacity: 0.3;
  pointer-events: none;
  animation: float-blob 20s infinite alternate ease-in-out;
}

.blob-1 {
  width: 400px;
  height: 400px;
  background-color: var(--accent-orange);
  top: -100px;
  left: -100px;
  animation-duration: 25s;
}

.blob-2 {
  width: 450px;
  height: 450px;
  background-color: #333333;
  bottom: -150px;
  right: -50px;
  animation-duration: 30s;
}

.blob-3 {
  width: 300px;
  height: 300px;
  background-color: #1a1a1a;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 20s;
}

@keyframes float-blob {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 30px) scale(1.1); }
}

/* Centered Container */
.centered-container {
  position: relative;
  z-index: 1;
  text-align: center;
  user-select: none;
  padding: 2.5rem;
  display: inline-block;
}

/* Title text: visually optimized with 3-tier gradient rendering */
.coming-soon-title {
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.25;
  padding-bottom: 0.15em;
  background: 
    radial-gradient(
      circle 130px at var(--mouse-x, -999px) var(--mouse-y, -999px),
      #ffffff 0%,
      var(--accent-orange) 45%,
      rgba(255, 106, 0, 0.2) 75%,
      transparent 100%
    ),
    var(--text-base-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  cursor: default;
  position: relative;
  z-index: 1;
}

/* Responsive styles */
@media (max-width: 768px) {
  .coming-soon-title {
    font-size: 4rem;
    letter-spacing: -1px;
  }
}

@media (max-width: 480px) {
  .coming-soon-title {
    font-size: 3rem;
  }
}