:root{
  --bg:#0b1020;
  --panel:#0f1733;
  --text:#eaf0ff;
  --muted:#aebbe6;
  --accent:#5b8cff;
  --accent2:#7cf2c2;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(91,140,255,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(124,242,194,.14), transparent 55%),
    linear-gradient(180deg, #070a15, var(--bg));
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--max); margin:0 auto; padding:26px 20px 80px; }

.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  padding:10px 14px;
  border-radius: 12px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: linear-gradient(135deg, rgba(91,140,255,.95), rgba(91,140,255,.55));
  border-color: rgba(91,140,255,.65);
  box-shadow: 0 10px 24px rgba(91,140,255,.16);
}
.btn.primary:hover{ background: linear-gradient(135deg, rgba(91,140,255,1), rgba(91,140,255,.62)); }

.btn.ghost{ background: transparent; }

.linkish{ text-decoration:underline; text-underline-offset: 3px; color: rgba(234,240,255,.92); }