/* =========================================================
   TYPOGRAPHY — START
   Manrope is the ONLY typeface on the entire site. Variation
   between elements (hero, nav, cards, footer, etc.) comes
   from size / weight / line-height / letter-spacing / color —
   never from swapping font families.
   ========================================================= */

/* Base document typography */
html {
  font-family: var(--font-primary);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-primary-text);
}

/* -----------------------------------------------------------
   HERO TYPOGRAPHY
   ----------------------------------------------------------- */

/* Small tracked-out label above the hero headline, e.g. "WELCOME TO TECHROCK" */
.hero-eyebrow {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}

/* Shared "display heading" recipe — the largest, boldest type on
   the site. Every major section's main heading (hero, growth, and
   any future section) uses this SAME size/weight/spacing so the
   typographic scale stays consistent site-wide, even if that means
   a given section runs taller than one screen. text-stroke adds a
   touch more visual weight on top of Manrope's heaviest available
   weight (800 — there is no 900/Black cut in the loaded family). */
.hero-heading,
.growth-heading,
.display-heading {
  font-family: var(--font-primary);
  font-weight: var(--font-extrabold);
  font-size: clamp(52px, 5.2vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  -webkit-text-stroke: 0.5px currentColor;
}

/* Word(s) inside a display heading that should read as the brand accent */
.hero-heading .accent,
.growth-heading .accent,
.display-heading .accent {
  color: var(--color-primary-purple);
  -webkit-text-stroke: 0.5px var(--color-primary-purple);
}

.hero-paragraph {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-primary-text);
}

/* -----------------------------------------------------------
   NAVIGATION TYPOGRAPHY
   ----------------------------------------------------------- */
.nav-link {
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-primary-text);
}

/* -----------------------------------------------------------
   BUTTON TYPOGRAPHY
   ----------------------------------------------------------- */
.btn {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  font-size: 16px;
  line-height: 1;
}

/* -----------------------------------------------------------
   SECTION HEADINGS (used from Section 2 onward)
   ----------------------------------------------------------- */
.section-heading {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-primary-text);
}

.section-heading.is-extrabold {
  font-weight: var(--font-extrabold);
}

/* Small tracked-out uppercase label above a section heading */
.section-eyebrow {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}

/* -----------------------------------------------------------
   CARD TYPOGRAPHY
   ----------------------------------------------------------- */
.card-heading {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-primary-text);
}

.card-body {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-secondary-text);
}

/* -----------------------------------------------------------
   STANDARD BODY / SMALL TEXT
   ----------------------------------------------------------- */
.body-text {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-secondary-text);
}

.small-text {
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-muted-text);
}

/* =========================================================
   TYPOGRAPHY — END
   ========================================================= */