:root {
  --accent1:#2AABEE;
  --accent2:#9A5DFF;
}
@media (prefers-color-scheme: light){
  :root{
    --bg1:#f6fbff; --bg2:#eef6ff; --text:#0b1220; --muted:#334155; --card:rgba(255,255,255,0.9);
  }
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#181818; --bg2:#202020; --text:#e5e5e5; --muted:#b5b5b5; --card:rgba(32,32,32,0.86);
  }
}

body{
  margin:0; font-family:Inter, sans-serif; background:linear-gradient(160deg,var(--bg1),var(--bg2)); color:var(--text);
  display:flex; align-items:center; justify-content:center; padding:24px;
}

.card{
  width:100%; max-width:440px; background:var(--card); border-radius:16px; padding:22px; position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,0.25); text-align:center; overflow:hidden;
}

.card::before{
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%);
  pointer-events:none; mix-blend-mode: overlay;
}

.stars{
  position:absolute; inset:-20% -10% auto -10%; height:200%; width:120%; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 10%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 40% 40%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 70% 20%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 85% 60%, rgba(255,255,255,0.65), transparent 60%);
  opacity:0.12; transform-origin:center; animation: drift 14s linear infinite; mix-blend-mode: screen;
}

.blob{
  position:absolute; width:360px; height:360px; border-radius:50%; filter:blur(40px); opacity:0.14;
  left:50%; top:-50px; transform:translateX(-50%);
  background: linear-gradient(90deg,var(--accent1), var(--accent2)); mix-blend-mode: screen;
  animation: blobmove 9s ease-in-out infinite;
}
@keyframes blobmove{0%{transform:translate(-52%,-4px) scale(1)}50%{transform:translate(-48%,-18px) scale(1.02)}100%{transform:translate(-52%,-4px) scale(1) }}

@keyframes drift{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(2deg)}100%{transform:translateY(0) rotate(0deg)}}

.star{
  width:120px; margin:10px auto 20px; display:block; animation:fadeIn 1.2s ease both;
  border-radius:100px; padding:12px; background: rgba(255,255,255,0.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15);
}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

h1{
  margin:0 0 12px; font-size:1.6rem; font-weight:700;
}

p{
  margin:8px 0; color:var(--muted); font-size:1rem; line-height:1.45;
}

.muted{
  font-size:0.95rem;color:var(--muted);margin-top:10px;
}

.cta{
  margin-top:18px; display:inline-block; padding:12px 20px; font-weight:700; border-radius:12px; text-decoration:none;
  color:#fff; background: linear-gradient(90deg,var(--accent1), var(--accent2));
  box-shadow:0 8px 20px rgba(38,78,255,0.18);
}
.cta:active{transform:translateY(1px);}
.note{font-size:0.8rem;color:var(--muted);margin-top:12px;}
footer{font-size:0.72rem;color:var(--muted);margin-top:18px; opacity:0.6;}