* {
  box-sizing: border-box;
}

/* ===== Background animation ===== */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.background span {
  position: absolute;
  bottom: -60px;
  opacity: 0.6;
  animation: floatUp linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6))
          drop-shadow(0 0 12px rgba(120,200,255,0.5));

}

.background span:nth-child(3n) {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.9))
    drop-shadow(0 0 18px rgba(180,120,255,0.8))
    drop-shadow(0 0 30px rgba(100,200,255,0.6));
}


/* Individual variations */
.background span:nth-child(1)  { left: 5%;  font-size: 22px; animation-duration: 18s; }
.background span:nth-child(2)  { left: 12%; font-size: 28px; animation-duration: 25s; }
.background span:nth-child(3)  { left: 20%; font-size: 24px; animation-duration: 21s; }
.background span:nth-child(4)  { left: 30%; font-size: 30px; animation-duration: 28s; }
.background span:nth-child(5)  { left: 38%; font-size: 26px; animation-duration: 19s; }
.background span:nth-child(6)  { left: 48%; font-size: 32px; animation-duration: 26s; }
.background span:nth-child(7)  { left: 58%; font-size: 24px; animation-duration: 22s; }
.background span:nth-child(8)  { left: 68%; font-size: 28px; animation-duration: 27s; }
.background span:nth-child(9)  { left: 78%; font-size: 22px; animation-duration: 20s; }
.background span:nth-child(10) { left: 88%; font-size: 34px; animation-duration: 30s; }
.background span:nth-child(11) { left: 95%; font-size: 26px; animation-duration: 24s; }
.background span:nth-child(12) { left: 45%; font-size: 20px; animation-duration: 17s; }

@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-120vh) rotate(360deg);
    opacity: 0;
  }
}

/* ===== Page layout ===== */
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(135deg, #1b1b2f, #162447);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Main card ===== */
.container {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 30px;
  max-width: 420px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
}

.logo {
  font-size: 64px;
  margin-bottom: 10px;
}

h1 {
  margin: 0;
  font-size: 2.2rem;
  letter-spacing: 1px;
}

.subtitle {
  margin-top: 12px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.pill {
  margin: 28px 0;
  font-size: 34px;
  animation: bob 3s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,0.7))
    drop-shadow(0 0 14px rgba(150,200,255,0.8))
    drop-shadow(0 0 24px rgba(180,120,255,0.6));
}

@keyframes glowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(255,255,255,0.6))
      drop-shadow(0 0 14px rgba(150,200,255,0.6));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,1))
      drop-shadow(0 0 26px rgba(180,120,255,0.9))
      drop-shadow(0 0 40px rgba(120,220,255,0.8));
  }
}

.logo img {
  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
  border-radius: 50%;
  width: 240px;
  height: auto;
  animation: neonPulse 3s ease-in-out infinite;
  filter:
    drop-shadow(0 0 8px rgba(180,220,255,0.8))
    drop-shadow(0 0 18px rgba(120,180,255,0.7))
    drop-shadow(0 0 30px rgba(180,120,255,0.6));
}


@keyframes neonPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(180,220,255,0.6))
      drop-shadow(0 0 18px rgba(120,180,255,0.6));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255,255,255,1))
      drop-shadow(0 0 32px rgba(180,120,255,0.9))
      drop-shadow(0 0 50px rgba(120,220,255,0.9));
  }
}


/* ===== Buttons ===== */
.buttons {
  display: grid;
  gap: 14px;
  margin-top: 25px;
}

.btn {
  padding: 14px;
  font-size: 1rem;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.telegram {
  background: linear-gradient(135deg, #2aabee, #229ed9);
}

.whatsapp {
  background: linear-gradient(135deg, #25D366, #1ebe5d);
}

.disabled {
  background: rgba(255, 255, 255, 0.15);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== Footer ===== */
footer {
  margin-top: 30px;
  font-size: 0.75rem;
  opacity: 0.6;
}