:root {
  --tl-bg0: #0a1214;
  --tl-bg1: #122428;
  --tl-ink: #e6f4f4;
  --tl-muted: #8eb0b0;
  --tl-accent: #5ec8c8;
  --tl-line: rgba(94, 200, 200, 0.22);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(94, 200, 200, 0.16), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(40, 90, 120, 0.35), transparent 50%),
    linear-gradient(165deg, var(--tl-bg0), var(--tl-bg1) 55%, #0d181a);
  color: var(--tl-ink);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.typing-landing {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3.5rem 1.35rem 4rem;
}

.typing-landing h1 {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

.typing-landing .lead {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--tl-muted);
  margin: 0 0 1.75rem;
  max-width: 36rem;
}

.typing-landing .cta {
  display: inline-block;
  padding: 0.85rem 1.35rem;
  border-radius: 0.4rem;
  background: var(--tl-accent);
  color: #062020;
  font-weight: 700;
  text-decoration: none;
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}

.typing-landing .cta-secondary {
  display: inline-block;
  padding: 0.85rem 1.1rem;
  color: var(--tl-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--tl-line);
}

.typing-landing section {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--tl-line);
}

.typing-landing h2 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.typing-landing p,
.typing-landing li {
  line-height: 1.6;
  color: var(--tl-muted);
}

.typing-landing ul {
  padding-left: 1.2rem;
}

.typing-landing a {
  color: var(--tl-accent);
}