:root{
  --bg:#070A10;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:#eaf0ff;
  --muted:#a7b2c4;
  --primary:#5eead4;
  --blue:#60a5fa;
  --danger:#fb7185;
  --shadow:0 16px 50px rgba(0,0,0,.55);
  --r:20px;
  --r2:14px;
  --max:1100px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(94,234,212,.12), transparent 60%),
    radial-gradient(900px 600px at 10% -20%, rgba(96,165,250,.12), transparent 55%),
    linear-gradient(180deg, #070A10 0%, #05070c 100%);
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.bg-orbs{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(380px 220px at 20% 30%, rgba(94,234,212,.10), transparent 60%),
    radial-gradient(420px 260px at 80% 20%, rgba(96,165,250,.10), transparent 65%),
    radial-gradient(520px 340px at 50% 90%, rgba(251,113,133,.06), transparent 65%);
  filter: blur(10px);
  opacity:.9;
}

.container{width:min(var(--max), calc(100% - 28px)); margin: 18px auto 28px;}
.muted{color:var(--muted)}
.h1{margin:0 0 6px; font-size:28px; letter-spacing:.2px}