:root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --ink:#0f172a;
    --muted:#64748b;
    --primary:#1b1464;   /* deep purple */
    --accent:#00c2ff;    /* cyan */
    --border:#e5e7eb;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(0,194,255,.12), transparent 50%),
                radial-gradient(1200px 600px at 80% 0%, rgba(27,20,100,.12), transparent 55%),
                var(--bg);
    color:var(--ink);
  }
  .page{min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:32px 16px}
  .header{width:100%; max-width:820px; display:flex; justify-content:center; margin-bottom:20px}
  .brand{display:flex; align-items:center; gap:14px}
  .logo{height:54px; width:auto}
  
  .card{
    width:100%;
    max-width:820px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:28px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  }
  h1{margin:0 0 10px; font-size:28px; letter-spacing:-0.02em}
  p{margin:10px 0; line-height:1.55}
  .muted{color:var(--muted)}
  .small{font-size:13px}
  
  .info{
    margin:18px 0;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid var(--border);
    background: linear-gradient(180deg, rgba(0,194,255,.06), rgba(27,20,100,.03));
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    color:white;
    background: linear-gradient(90deg, var(--primary), #2a1a86);
    border: 1px solid rgba(27,20,100,.2);
    box-shadow: 0 10px 24px rgba(27,20,100,.18);
    margin-top:10px;
  }
  .btn:hover{transform: translateY(-1px)}
  .btn.secondary{
    color:var(--primary);
    background: white;
    border: 1px solid rgba(27,20,100,.25);
    box-shadow:none;
  }
  
  .footer{
    width:100%;
    max-width:820px;
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:13px;
  }
  a{color:var(--primary)}
  