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

:root {
  --emerald: #00ffa3;
  --teal: #00c2ff;
  --violet: #8b5cf6;
  --mint: #a8edea;
  --indigo: #4f46e5;
  --bg: #04080f;
  --card-bg: rgba(4, 8, 20, 0.55);
  --card-border: rgba(255, 255, 255, 0.1);
  --text: #f0f4ff;
  --muted: rgba(240, 244, 255, 0.5);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 100;
}

/* ── Aurora blobs ── */
.aurora {
  position: fixed;
  inset: -10%;          /* extra room so blobs can drift without clipping */
  overflow: hidden;
  z-index: 0;
  will-change: transform;
  transition: transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
  will-change: transform;
}

/* Elongated curtain shapes for aurora realism */
.blob-1 {
  width: 70vw;
  height: 45vw;
  background: var(--emerald);
  top: -20%;
  left: -15%;
  animation: drift1 9s ease-in-out infinite alternate;
}

.blob-2 {
  width: 55vw;
  height: 38vw;
  background: var(--violet);
  top: 5%;
  right: -20%;
  animation: drift2 7s ease-in-out infinite alternate;
}

.blob-3 {
  width: 50vw;
  height: 32vw;
  background: var(--teal);
  bottom: -15%;
  left: 15%;
  animation: drift3 11s ease-in-out infinite alternate;
}

.blob-4 {
  width: 40vw;
  height: 28vw;
  background: var(--indigo);
  bottom: 0%;
  right: -5%;
  animation: drift4 8s ease-in-out infinite alternate;
}

.blob-5 {
  width: 35vw;
  height: 22vw;
  background: var(--mint);
  top: 35%;
  left: 30%;
  animation: drift5 6s ease-in-out infinite alternate;
  opacity: 0.45;
}

@keyframes drift1 {
  0%   { transform: translate(0,     0)     rotate(-8deg)  scale(1);    }
  40%  { transform: translate(14vw,  10vh)  rotate(6deg)   scale(1.15); }
  100% { transform: translate(8vw,   20vh)  rotate(-4deg)  scale(0.92); }
}
@keyframes drift2 {
  0%   { transform: translate(0,     0)     rotate(10deg)  scale(1);    }
  35%  { transform: translate(-14vw, 12vh)  rotate(-8deg)  scale(1.18); }
  100% { transform: translate(-6vw,  22vh)  rotate(5deg)   scale(0.88); }
}
@keyframes drift3 {
  0%   { transform: translate(0,     0)     rotate(5deg)   scale(1);    }
  50%  { transform: translate(10vw, -14vh)  rotate(-12deg) scale(1.22); }
  100% { transform: translate(18vw, -6vh)   rotate(8deg)   scale(0.95); }
}
@keyframes drift4 {
  0%   { transform: translate(0,     0)     rotate(-6deg)  scale(1);    }
  45%  { transform: translate(-12vw, -10vh) rotate(9deg)   scale(1.12); }
  100% { transform: translate(-4vw,  -18vh) rotate(-5deg)  scale(0.9);  }
}
@keyframes drift5 {
  0%   { transform: translate(0,     0)     rotate(3deg)   scale(1);    }
  60%  { transform: translate(-8vw,  12vh)  rotate(-15deg) scale(1.2);  }
  100% { transform: translate(6vw,   8vh)   rotate(10deg)  scale(0.82); }
}

/* ── Stage (centers card) ── */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  padding: 1.5rem;
}

/* ── Glassmorphism card ── */
.card {
  position: relative;
  width: min(560px, 100%);
  padding: 3.5rem 3rem 3rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(255, 255, 255, 0.06) inset;
  text-align: center;
  overflow: hidden;
}

/* inner top sheen */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,0.1) 0%, transparent 45%);
  pointer-events: none;
}

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  border: 1px solid rgba(0, 255, 163, 0.35);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--emerald);
  text-shadow: 0 0 12px rgba(0, 255, 163, 0.6);
  box-shadow: 0 0 18px rgba(0, 255, 163, 0.12);
  animation: fadeIn 0.6s 0.1s ease both;
}

/* ── Brand name ── */
.brand {
  margin-top: 1.6rem;
  font-size: clamp(2rem, 7vw, 4.2rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 30%, rgba(168, 237, 234, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 28px rgba(0, 255, 163, 0.25));
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.3s;
}

/* ── Divider ── */
.divider {
  margin: 1.4rem auto;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 255, 163, 0.6), transparent);
  animation: fadeIn 0.6s ease both;
  animation-delay: 0.55s;
}

/* ── Tagline ── */
.tagline {
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: lowercase;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.5s;
}


/* ── Entrance animations ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Responsive tweaks ── */
@media (max-width: 480px) {
  .card {
    padding: 2.5rem 1.8rem 2.2rem;
    border-radius: 20px;
  }
}