/* =========================================
   ✨ TYPOGRAPHY — Integral Nexus
   Premium, cinematic, restrained hierarchy
   ========================================= */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "cv01" 1, "cv11" 1;
}

/* =========================================
   Headings
   ========================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

h1 {
  font-size: clamp(2.8rem, 5.1vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
}

h2 {
  font-size: clamp(1.9rem, 2.7vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

h4 {
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================================
   Paragraphs
   ========================================= */

p {
  margin: 0;
  color: rgba(232, 238, 255, 0.8);
}

/* =========================================
   Eyebrow / Kicker
   ========================================= */

.eyebrow {
  margin-bottom: 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.88);
}

.text-lede {
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(232, 238, 255, 0.82);
}

.text-subtle {
  color: rgba(232, 238, 255, 0.58);
}

/* =========================================
   Utility Text Styles
   ========================================= */

.text-muted {
  color: rgba(232, 238, 255, 0.6);
}

.text-strong {
  color: #ffffff;
}

.text-balance {
  text-wrap: balance;
}

/* =========================================
   Links
   ========================================= */

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}

a:hover {
  color: #ffffff;
  opacity: 1;
}

/* =========================================
   Small text
   ========================================= */

small {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(232, 238, 255, 0.52);
}

/* =========================================
   Responsive tightening
   ========================================= */

@media (max-width: 640px) {
  h1 {
    font-size: clamp(2.25rem, 8vw, 3.4rem);
    line-height: 0.94;
  }

  h2 {
    font-size: clamp(1.65rem, 6vw, 2.1rem);
    line-height: 1.1;
  }

  h3,
  h4 {
    letter-spacing: 0.1em;
  }

  p {
    line-height: 1.62;
  }

  .text-lede {
    font-size: 0.98rem;
    line-height: 1.68;
  }
}