@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-deep);
  text-rendering: optimizeLegibility;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 10% 10%, rgba(55, 135, 255, 0.08), transparent 25%),
    radial-gradient(circle at 90% 20%, rgba(0, 255, 182, 0.06), transparent 22%),
    radial-gradient(circle at 20% 80%, rgba(255, 75, 135, 0.06), transparent 25%),
    var(--bg-deep);
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
}

a:hover {
  color: var(--accent-rose);
}

h1,
h2,
h3,
h4 {
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

p {
  color: var(--text-muted);
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 22px 72px;
}

.page > section + section {
  margin-top: 32px;
}

@media (max-width: 720px) {
  .page {
    padding: 24px 16px 56px;
  }
}
