*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-0);
  background-image:
    radial-gradient(1200px 600px at 75% -10%, rgba(124, 92, 255, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(34, 211, 238, 0.10), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--text); text-decoration: none; transition: color var(--duration-fast) var(--easing); }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
h3 { font-size: 22px; }
h4 { font-size: 17px; }
p  { margin: 0; }

img, svg { display: block; max-width: 100%; }

input, button, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Utils */
.container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.container-narrow { max-width: 920px; margin-inline: auto; padding-inline: 24px; }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.mono { font-family: var(--font-mono); }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .hide-mobile { display: none !important; }
}