/* Shared base styles used by every top-level page.
   Page-specific layout and components stay in each page's own <style> block —
   see CLAUDE.md for the convention. */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #e0e0e0;
  background: #0a0f1e;
  background-image:
    radial-gradient(at 20% 30%, rgba(157,123,216,0.15) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(32,178,170,0.15) 0px, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gradient text — used on page headings and key stats */
.gradient-text {
  background: linear-gradient(135deg, #9d7bd8 0%, #20b2aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

footer { text-align: center; padding: 40px 20px; color: #9ca3af; font-size: 0.9em; }
footer a { color: #9d7bd8; text-decoration: none; }
footer a:hover { color: #20b2aa; }

/* Visible keyboard-focus ring — links, buttons, and form fields only show
   the browser's default outline otherwise, which is inconsistent and low
   contrast against the dark background. Skipped for mouse/touch clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #20b2aa;
  outline-offset: 3px;
  border-radius: 4px;
}