body {
  font-family: 'Quicksand', sans-serif;
  background: radial-gradient(circle at top, #1b1b3a, #0f1025);
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}


/* Layer 1 - pink glow */
.sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.sparkles span {
  position: absolute;
  color: white;
  font-size: 14px;
  animation: twinkle 3s infinite ease-in-out alternate;
}
@keyframes twinkle {
  0% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.6; transform: scale(1); }
}

@keyframes sparkleMove {
  from { background-position: 0 0; }
  to { background-position: 1000px 1000px; }
}

/* 💎 Crystal Background Shapes */
.crystal {
  position: fixed;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(199,125,255,0.4), transparent 70%);
  filter: blur(60px);
  z-index: 0;
}

.crystal1 {
  top: 10%;
  right: 5%;
}

.crystal2 {
  bottom: 15%;
  left: 10%;
  background: radial-gradient(circle, rgba(125,249,255,0.4), transparent 70%);
}

.crystal3 {
  top: 50%;
  right: 60%;
  background: radial-gradient(circle, rgba(255,141,225,0.4), transparent 70%);
}