body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}
/* Hero Section Container */
.hero {
  padding: 120px 0 80px; /* Gives the top more breathing room */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Fluid Typography for the H1 */
.hero-h1 {
  /* clamp(min, preferred, max) - This is the secret to "natural" scaling */
  font-size: clamp(3rem, 8vw, 5rem); 
  line-height: 1.05;
  letter-spacing: -0.03em; /* Tighter tracking looks more high-end for bold headers */
  margin-bottom: 24px;
  font-weight: 800;
}

/* Subtitle Styling */
.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 700px; /* Prevents the text from stretching too wide */
  margin: 0 auto 40px; /* Centers the subtitle and adds space below */
  color: #4a4a4a; /* Or your preferred soft grey */
  opacity: 0.9;
}

/* CTA Spacing */
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .hero-cta {
    flex-direction: column; /* Stacks buttons on small phones */
    width: 100%;
    padding: 0 20px;
  }
}