/* =========================================
   TELUM TARGET — TYPOGRAPHY
========================================= */

/* =========================================
   TYPOGRAPHY SCALE
========================================= */

:root {

  --font-family-primary:
    'Exo 2', sans-serif;

  /* Hero */

  --font-size-hero:
    clamp(3rem, 7vw, 6rem);

  --font-size-hero-subtitle:
    clamp(1.05rem, 1.8vw, 1.35rem);

  /* Titles */

  --font-size-h1:
    clamp(2.5rem, 6vw, 5rem);

  --font-size-h2:
    clamp(2rem, 5vw, 3.5rem);

  --font-size-h3:
    clamp(1.35rem, 3vw, 1.8rem);

  --font-size-h4:
    1.25rem;

  /* Body */

  --font-size-body-large:
    1.2rem;

  --font-size-body:
    1rem;

  --font-size-body-small:
    0.92rem;

  /* UI */

  --font-size-button:
    0.95rem;

  --font-size-caption:
    0.82rem;

  /* Weights */

  --font-weight-light:
    300;

  --font-weight-regular:
    400;

  --font-weight-medium:
    500;

  --font-weight-semibold:
    600;

  --font-weight-bold:
    700;

  --font-weight-extrabold:
    800;

  /* Letter spacing */

  --tracking-tight:
    -0.02em;

  --tracking-normal:
    0em;

  --tracking-wide:
    0.04em;

  --tracking-ultra:
    0.08em;
}

/* =========================================
   HEADINGS
========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family:
    var(--font-family-primary);

  font-weight:
    var(--font-weight-bold);

  line-height: 1.1;

  letter-spacing:
    var(--tracking-wide);

  color:
    var(--color-text-primary);
}

h1 {

  font-size:
    var(--font-size-h1);
}

h2 {

  font-size:
    var(--font-size-h2);
}

h3 {

  font-size:
    var(--font-size-h3);
}

h4 {

  font-size:
    var(--font-size-h4);
}

/* =========================================
   PARAGRAPHS
========================================= */

p {

  font-size:
    var(--font-size-body);

  font-weight:
    var(--font-weight-regular);

  line-height: 1.8;

  color:
    var(--color-text-secondary);
}

/* =========================================
   HERO TYPOGRAPHY
========================================= */

.hero-title {

  font-family:
    'Orbitron',
    sans-serif;

  font-size:
    var(--font-size-hero);

  font-weight:
    var(--font-weight-extrabold);

  line-height: 0.95;

  letter-spacing:
    var(--tracking-ultra);

  text-transform: uppercase;
}

.hero-title span {

  font-family:
    'Orbitron',
    sans-serif;

  font-weight: 600;

  letter-spacing: 0.08em;

  color:
    var(--color-accent);
}

.hero-subtitle {

  font-size:
    var(--font-size-hero-subtitle);

  font-weight:
    var(--font-weight-light);

  line-height: 1.9;

  max-width: 820px;

  margin-inline: auto;

  color:
    var(--color-text-secondary);
}

/* =========================================
   SECTION TITLES
========================================= */

.section-title {

  text-align: center;

  margin-bottom: 80px;
}

.section-title h2 {

  margin-bottom: 18px;

  text-transform: uppercase;
}

.section-title p {

  max-width: 800px;

  margin-inline: auto;
}

/* =========================================
   NAVBAR
========================================= */

.nav-links a {

  font-size:
    var(--font-size-button);

  font-weight:
    var(--font-weight-medium);

  letter-spacing:
    0.02em;
}

/* =========================================
   BUTTONS
========================================= */

.btn-primary,
.btn-secondary {

  font-size:
    var(--font-size-button);

  font-weight:
    var(--font-weight-semibold);

  letter-spacing:
    0.03em;
}

/* =========================================
   FEATURE CARDS
========================================= */

.feature-card h3 {
  margin-bottom: 18px;
}

.feature-card p {
  font-size: var(--font-size-body);
}

/* =========================================
   STATUS SECTION
========================================= */

.status-pill {

  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
}

.status-box p {

  font-size:
    var(--font-size-body-large);
}

/* =========================================
   FOOTER
========================================= */

.footer-text {
  font-size: var(--font-size-body-small);
  line-height: 1.7;
}

.footer-right {
  font-size:var(--font-size-caption);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

  .hero-title {line-height: 1;}
  .hero-subtitle {font-size:1rem;}

  .section-title {margin-bottom: 60px;}

  p {font-size:0.98rem;}
}