:root {
  --bg: #0b1020;
  --card: rgba(16, 24, 48, 0.75);
  --text: #ecf2ff;
  --muted: #b4c3e0;
  --line: rgba(255,255,255,0.14);
  --a: #00d2ff;
  --b: #5b7cfa;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 700px at 10% 0%, #111936, #070b16 60%, #04060d 100%);
  overflow-x: hidden;
}
.container { width: min(980px, 92vw); margin: 3rem auto; position: relative; z-index: 2; }
.hero { text-align: center; margin-bottom: 1.6rem; }
.logo {
  width: 72px; height: 72px; border-radius: 18px; margin-bottom: 1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1) inset;
}
h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; margin: 0; letter-spacing: -.02em; }
.subtitle { color: var(--muted); margin-top: .65rem; }
.badges { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1rem; }
.badge {
  padding: .38rem .7rem; border-radius: 999px; font-size: .83rem; font-weight: 600;
  border: 1px solid var(--line); background: rgba(255,255,255,.06);
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  padding: 1.1rem;
}
.card h2 { margin: .3rem .4rem 1rem; font-size: 1.15rem; color: #dce8ff; }
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
}
.item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  padding: .75rem .85rem;
  min-height: 76px;
}
.item span { display:block; color: var(--muted); font-size: .83rem; margin-bottom: .35rem; }
.item strong { display:block; font-size: .95rem; word-break: break-word; }
.footer { margin-top: 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
code { color: #d8e4ff; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 8px; padding: .2rem .4rem; }
.bg-glow {
  position: fixed; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(70px);
  z-index: 1; opacity: .33; pointer-events: none;
}
.glow-a { background: var(--a); top: -8rem; left: -8rem; }
.glow-b { background: var(--b); bottom: -9rem; right: -7rem; }
@media (max-width: 740px){ .grid { grid-template-columns: 1fr; } }