/* ===================== Base ===================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #0f0c29;
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #1a1a40);
  background-size: 400% 400%;
  animation: gradientShift 18s ease infinite;
  color: #f1f1f1;
  overflow-x: hidden;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===================== Floating bubbles background ===================== */
.bg-animation {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-animation span {
  position: absolute;
  display: block;
  bottom: -150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  animation: floatUp linear infinite;
}

.bg-animation span:nth-child(1)  { left: 5%;  width: 80px;  height: 80px;  animation-duration: 22s; }
.bg-animation span:nth-child(2)  { left: 15%; width: 30px;  height: 30px;  animation-duration: 14s; animation-delay: 2s; }
.bg-animation span:nth-child(3)  { left: 28%; width: 110px; height: 110px; animation-duration: 28s; }
.bg-animation span:nth-child(4)  { left: 40%; width: 45px;  height: 45px;  animation-duration: 18s; animation-delay: 4s; }
.bg-animation span:nth-child(5)  { left: 52%; width: 70px;  height: 70px;  animation-duration: 24s; }
.bg-animation span:nth-child(6)  { left: 63%; width: 25px;  height: 25px;  animation-duration: 12s; animation-delay: 1s; }
.bg-animation span:nth-child(7)  { left: 74%; width: 95px;  height: 95px;  animation-duration: 26s; animation-delay: 3s; }
.bg-animation span:nth-child(8)  { left: 82%; width: 40px;  height: 40px;  animation-duration: 16s; }
.bg-animation span:nth-child(9)  { left: 90%; width: 60px;  height: 60px;  animation-duration: 20s; animation-delay: 5s; }
.bg-animation span:nth-child(10) { left: 96%; width: 20px;  height: 20px;  animation-duration: 10s; }

@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(40px) scale(1.4); opacity: 0; }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 20%, rgba(124, 58, 237, 0.25), transparent 60%);
}

/* ===================== Header / Brand ===================== */
header, main, footer { position: relative; z-index: 1; }

.brand {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}
.brand i { color: #a78bfa; }
.brand span {
  background: linear-gradient(90deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===================== Badge ===================== */
.badge-pill {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #c4b5fd;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ===================== Headline ===================== */
.display-title {
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.8rem);
  line-height: 1.15;
  margin-bottom: 1.2rem;
  color: #fff;
}

.gradient-text {
  background: linear-gradient(90deg, #a78bfa, #f472b6, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: shine 6s linear infinite;
}

@keyframes shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.lead-text {
  max-width: 640px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2.5rem;
}

/* ===================== Countdown ===================== */
.countdown {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.time-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  width: 92px;
  padding: 1rem 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}
.time-box:hover { transform: translateY(-6px); }

.time-num {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.time-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.6);
  margin-top: 0.25rem;
}

/* ===================== Progress ===================== */
.progress-wrap {
  max-width: 420px;
  margin: 0 auto 2.5rem;
  color: rgba(255,255,255,0.6);
}
.progress {
  background: rgba(255,255,255,0.1);
  border-radius: 50px;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #fbbf24);
  border-radius: 50px;
  transition: width 1.6s ease;
}

/* ===================== Social icons ===================== */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
}
.social-icons a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.social-icons a:hover {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  transform: translateY(-4px);
  border-color: transparent;
}

/* ===================== Footer ===================== */
footer small {
  color: rgba(255,255,255,0.45);
}

/* ===================== Entrance animations ===================== */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.8s ease forwards;
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }
.delay-5 { animation-delay: 0.75s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== Responsive ===================== */
@media (max-width: 480px) {
  .time-box { width: 72px; padding: 0.75rem 0.25rem; }
  .time-num { font-size: 1.5rem; }
  .subscribe-form .input-group { flex-wrap: wrap; border-radius: 24px; }
  .btn-notify { width: 100%; margin-top: 0.4rem; }
}