:root{
  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 25px 70px rgba(0,0,0,.55);
}

html, body{ height: 100%; }
body{
  background: radial-gradient(1100px 700px at 15% 15%, rgba(30, 120, 255, .18), transparent 55%),
              radial-gradient(900px 600px at 85% 20%, rgba(176, 120, 255, .18), transparent 55%),
              radial-gradient(1000px 800px at 55% 90%, rgba(125, 255, 214, .14), transparent 55%),
              linear-gradient(180deg, #070A12, #0B1020);
  overflow-x: hidden;
}

/* Background blobs + subtle grid */
.bg-blobs{ position: fixed; inset:0; pointer-events:none; overflow:hidden; }
.bg-blobs .blob{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(24px);
  opacity: .75;
  transform: translate3d(0,0,0);
  animation: floaty 12s ease-in-out infinite alternate;
}
.bg-blobs .blob-1{ left:-160px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(125,255,214,.40), rgba(125,255,214,0)); }
.bg-blobs .blob-2{ right:-200px; top: 40px;  background: radial-gradient(circle at 30% 30%, rgba(176,120,255,.42), rgba(176,120,255,0)); animation-duration: 14s; }
.bg-blobs .blob-3{ left: 18%; bottom:-260px; background: radial-gradient(circle at 30% 30%, rgba(93,196,255,.38), rgba(93,196,255,0)); animation-duration: 16s; }

.bg-blobs .grid{
  position:absolute; inset:-10%;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .18;
  transform: perspective(800px) rotateX(60deg) translateY(-120px);
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,.88) 45%, rgba(0,0,0,0) 75%);
  animation: drift 18s linear infinite;
}

@keyframes floaty{
  0%{ transform: translate(-2%, -1%) scale(1); }
  100%{ transform: translate(3%, 2%) scale(1.05); }
}
@keyframes drift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 0 480px, 480px 0; }
}

/* Glass card */
.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand-gradient{
  background: linear-gradient(90deg, rgba(125,255,214,1), rgba(93,196,255,1), rgba(176,120,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge-soft{
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.16);
}

/* Hero illustration hover */
.hero-illus{
  max-width: 460px;
  width: 100%;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.55));
  animation: bob 4.8s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

/* Countdown tiles */
.time-tile{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
}
.time-num{ font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .4px; }
.time-lbl{ font-size: .78rem; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }

/* Input */
.form-control, .btn{ border-radius: 14px; }
.form-control{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.form-control::placeholder{ color: rgba(255,255,255,.55); }
.form-control:focus{
  background: rgba(0,0,0,.28);
  border-color: rgba(125,255,214,.55);
  box-shadow: 0 0 0 .2rem rgba(125,255,214,.18);
  color: rgba(255,255,255,.95);
}

.btn-glow{
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(125,255,214,.24), rgba(176,120,255,.22));
}
.btn-glow:hover{ filter: brightness(1.07); transform: translateY(-1px); }
.btn-glow:active{ transform: translateY(0px); }

/* Progress shimmer */
.progress{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}
.progress-bar{
  position: relative;
  overflow:hidden;
}
.progress-bar::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%);} }

/* Toast */
.toast{
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce){
  .bg-blobs .blob, .bg-blobs .grid, .hero-illus, .progress-bar::after{ animation:none !important; }
  .btn-glow:hover{ transform:none; }
}