:root{
  --bg:#0f0020;
  --card:#120428aa;
  --accent:#a351ff;
  --accent-2:#6f2cff;
  --muted:rgba(255,255,255,0.75);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
.bg-svg{position:fixed;inset:0;z-index:0;opacity:1;pointer-events:none}
.bg-svg svg{width:100%;height:100%;display:block}

.container{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.header{display:flex;justify-content:space-between;align-items:center;padding:28px 36px}
.logo{display:flex;align-items:center;gap:12px}
.mark{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 24px rgba(107,45,255,0.24)}
.brand{font-weight:700;font-size:18px}

.main{flex:1;display:grid;place-items:center;padding:48px}
.card{width:100%;max-width:760px;padding:44px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));box-shadow:0 12px 40px rgba(5,3,8,0.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.04)}
.card h1{margin:0 0 8px;font-size:36px}
.lead{margin:0 0 20px;color:var(--muted)}
.buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;box-shadow:0 8px 30px rgba(107,45,255,0.18)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted)}
.note{margin-top:18px;color:rgba(255,255,255,0.6);font-size:14px}

.footer{text-align:center;padding:20px;color:rgba(255,255,255,0.5)}

@media (max-width:640px){
  .card{padding:28px;border-radius:14px}
  .card h1{font-size:28px}
}