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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.2), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.2), transparent 50%),
    url('/assets/backgrounds/hero-bg.jpg');
  background-repeat: no-repeat;
  background-size: 700px 700px, 900px 900px, cover;
  background-position: top 120px right -200px, bottom -200px left -150px, center;
  background-attachment: fixed, fixed, fixed;
  background-blend-mode: screen, color-dodge, soft-light;
  min-height: 100vh;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul {
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-text-primary), var(--color-text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}