h1, h2, h3, h4, .display, .section-title, .hero-headline {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.mono, .num {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow.bare { gap: 0; }
.eyebrow.bare::before { content: none; }
.eyebrow:not(.bare)::before {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
}
.eyebrow.on-dark { color: var(--bone); opacity: 0.7; }

.section-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.section-title .moss { color: var(--moss); }
.section-title .lime-text { color: var(--moss); }

.lead {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 580px;
  font-weight: 400;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform .2s var(--ease-out), background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { background: var(--graphite); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(10,10,10,0.4); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--ink); color: var(--lime); transform: translateY(-1px); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: inherit;
}
.brand-mark .glyph { width: 28px; height: 28px; display: inline-flex; }
.brand-mark .glyph svg { width: 100%; height: 100%; }
.brand-mark .word { font-family: 'Archivo', sans-serif; font-size: 22px; }