:root {
  --ink: #ffffff;
  --muted: #dddddd;
  --black: #000000;
  --charcoal: #191919;
  --cyan: #009ad0;
  --red: #cc3020;
  --orange: #ed610c;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100svh;
  margin: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(237, 97, 12, 0.28), transparent 28%),
    radial-gradient(circle at 18% 76%, rgba(0, 154, 208, 0.24), transparent 30%),
    linear-gradient(135deg, var(--black) 0%, var(--charcoal) 58%, var(--black) 100%);
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}

.placeholder {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: clamp(28px, 6vw, 86px);
}

.wordmark {
  width: min(320px, 54vw);
  height: auto;
  margin-bottom: clamp(56px, 12vh, 120px);
}

.kicker {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1 {
  max-width: 980px;
  margin: 0 0 22px;
  font-size: clamp(4.8rem, 15vw, 12rem);
  line-height: 0.82;
  letter-spacing: 0;
}

.line {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.25rem, 2.4vw, 2.5rem);
  font-weight: 650;
  line-height: 1.08;
}

@media (max-width: 540px) {
  .wordmark {
    width: min(210px, 58vw);
    margin-bottom: 78px;
  }
}