:root {
  --bg: linear-gradient(135deg,#0f172a 0%, #0b1220 100%);
  --card: rgba(255,255,255,0.04);
  --accent: #7c3aed;
  --muted: rgba(255,255,255,0.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.wrapper{width:100%;max-width:880px;padding:24px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:48px;
  text-align:center;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}
.icon{
  font-size:56px;
  margin-bottom:16px;
  animation: float 3s ease-in-out infinite;
}
@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}
h1{font-size:28px;margin:8px 0 12px}
.lead{color:var(--muted);font-size:16px;margin:0 0 20px}
.progress{height:12px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden;margin:20px 0}
.bar{height:100%;background:linear-gradient(90deg,var(--accent),#06b6d4);width:0%;transition:width 0.6s cubic-bezier(.2,.9,.2,1)}
.small{color:var(--muted);font-size:13px;margin:6px 0}
a{color:#cfe9ff;text-decoration:none}
.footer{margin-top:18px;font-size:13px;color:var(--muted)}

@media (max-width:520px){
  .card{padding:28px}
  h1{font-size:22px}
}