:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08090b;
  color: #f1f2f4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 5%, rgba(111, 66, 193, .28), transparent 34rem),
    linear-gradient(150deg, #08090b 0%, #121419 65%, #17131e 100%);
}

main {
  width: min(760px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 7rem) 0;
}

.brand-mark {
  display: block;
  width: clamp(4rem, 12vw, 6rem);
  height: auto;
  margin: 0 0 1.4rem;
}

.eyebrow {
  margin: 0 0 .75rem;
  color: #b99cff;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.lead {
  max-width: 40rem;
  margin: 1.4rem 0 3rem;
  color: #c8cbd2;
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  line-height: 1.55;
}

section {
  margin: 1rem 0;
  padding: 1.4rem;
  border: 1px solid #30333b;
  border-radius: 16px;
  background: rgba(23, 25, 31, .84);
}

h2 { margin: 0 0 .65rem; font-size: 1.1rem; }
p, li { color: #d5d7dc; line-height: 1.65; }
ul { padding-left: 1.25rem; }
a { color: #c7b4ff; text-underline-offset: .2em; }
a:hover, a:focus-visible { color: #fff; }

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: 2rem;
}

.meta { margin-top: 2rem; color: #969ba7; font-size: .92rem; }