:root{
  --bg:#0e1729; --bg2:#101a2f; --bg3:#15223a;
  --text:#e8eeff; --muted:#9fb0d9;
  --card-r:16px; --shadow:0 10px 25px rgba(0,0,0,.25);
  --maxw:1100px; --link:#bcd3ff; --link2:#89a9ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.header{background:linear-gradient(180deg, var(--bg2), rgba(16,26,47,.2)); border-bottom:1px solid rgba(255,255,255,.06)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:22px 20px}
h1{margin:0 0 4px 0; font-size:24px}
.sub{color:var(--muted); font-size:13px}
.links{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:18px 0 0}
a.card{display:block; text-decoration:none; color:inherit; background:var(--bg2);
  border-radius:var(--card-r); box-shadow:var(--shadow); padding:14px 16px; border:1px solid rgba(255,255,255,.06)}
.card .title{font-weight:600; letter-spacing:.2px}
.card .desc{color:var(--muted); font-size:13px; margin-top:3px}
.card:hover{outline:1px solid rgba(188,211,255,.35)}
.footer{color:var(--muted); font-size:12px; padding:18px 20px; border-top:1px solid rgba(255,255,255,.06)}
a.inline{color:var(--link)}
a.inline:hover{color:var(--link2)}