/* ═══════════════════════════════════════════════════════
   Obzek.io — app hub (tools directory)
   Tokens mirror ../../styles.css so it reads as part of the site.
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:           #05020F;
  --bg-surface:   #0A0619;
  --bg-card:      #0F0A22;
  --purple-mid:   #4A1D96;
  --purple-vivid: #6D28D9;
  --gold:         #C47B0A;
  --gold-bright:  #F59E0B;
  --gold-light:   #FCD34D;
  --text:         #EDE8FF;
  --text-sub:     #9D8EC4;
  --text-muted:   #4D4068;
  --border:       rgba(109, 40, 217, 0.22);
  --border-gold:  rgba(245, 158, 11, 0.32);

  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --r: 12px;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(109,40,217,.20), transparent 65%),
    radial-gradient(45rem 35rem at 95% 5%, rgba(245,158,11,.07), transparent 60%);
}

/* The topbar and its tool switcher live in ../shared/css/topbar.css;
   the roster cards in ../shared/css/tool-cards.css. */

main { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

.page-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.page-head h1 { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; }
.page-head p { color: var(--text-sub); font-size: .98rem; }

/* ─── ROSTER SECTIONS ─────────────────────────────────── */
/* Live tools first, then what's coming — one heading each, so the
   list reads as a roadmap rather than a wall of equal cards. */
.roster + .roster { margin-top: 3rem; }
.roster-head {
  display: flex; align-items: baseline; gap: .75rem;
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.roster-head h2 {
  font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold-bright);
}
.roster-head p { font-size: .82rem; color: var(--text-muted); }

.hub-note { margin-top: 3rem; text-align: center; font-size: .85rem; color: var(--text-muted); }
.hub-note a { color: var(--gold-bright); text-decoration: none; }
.hub-note a:hover { color: var(--gold-light); }