/* XAOS Portal — translucent cards (30% transparency) */
:root{
  --text:#e8eefc;
  --muted:#a5b1c7;
  --card-bg: rgba(11, 15, 23, 0.7); /* ~30% transparent */
  --card-bg-edge: rgba(21, 27, 39, 0.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
}

main{padding: clamp(16px, 3vw, 32px); max-width:1100px; margin:0 auto}
header{text-align:center; margin:16px 0 24px; text-shadow:0 2px 16px rgba(0,0,0,.35)}
h1{margin:0 0 8px; font-weight:800; letter-spacing:.5px}
.subtitle{margin:0; color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px}

.card{
  display:block;
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--card-bg-edge) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:18px 16px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  backdrop-filter: blur(6px);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(122,162,255,0.5);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.card h2{margin:6px 0 6px; font-size:1.1rem}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.emoji{font-size:1.8rem; line-height:1; display:inline-block}

footer{text-align:center; margin:28px 0 8px; color: var(--muted); opacity:.85}