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

html, body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  font-weight: 500;
}

a { color: inherit; text-decoration: none; }

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

button, input, select, textarea { font-family: inherit; }

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.page--wide {
  max-width: 1080px;
}

h1, h2, h3 { margin: 0 0 var(--space-2); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 var(--space-3); color: var(--text-secondary); font-weight: 500; }

.text-muted { color: var(--text-secondary); }
.text-center { text-align: center; }
.text-gradient {
  background: var(--brand-five-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; }