:root {
  color-scheme: dark;
  --ink: #f2fbff;
  --muted: #a9bdc8;
  --navy: #06151d;
  --panel: #0c222d;
  --cyan: #35d3e5;
  --mint: #62e8b7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 10%, rgba(53, 211, 229, .16), transparent 35rem),
    linear-gradient(150deg, #071821, var(--navy) 55%);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

a { color: var(--cyan); }

header, main, footer { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }

header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; }

nav { display: flex; gap: 1rem; flex-wrap: wrap; }

nav a, .brand { color: var(--ink); text-decoration: none; }

.brand { display: inline-flex; gap: .75rem; align-items: center; font-weight: 750; }

.mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  border: .2rem solid var(--cyan);
  border-right-color: var(--mint);
  border-radius: 50%;
  color: var(--mint);
}

.hero { padding: 7rem 0 5rem; max-width: 52rem; }

.eyebrow { color: var(--mint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

h1 { margin: .35rem 0 1.2rem; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.06em; }

h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; }

p { color: var(--muted); }

.lead { max-width: 45rem; font-size: clamp(1.2rem, 2.3vw, 1.55rem); }

.button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--mint));
  color: #03202a;
  font-weight: 800;
  text-decoration: none;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding: 2rem 0 6rem; }

.card { padding: 1.5rem; border: 1px solid rgba(98, 232, 183, .18); border-radius: 1.25rem; background: rgba(12, 34, 45, .76); }

.card h2 { margin-top: 0; font-size: 1.3rem; }

.document { max-width: 48rem; padding: 3rem 0 7rem; }

.document h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }

.document h2 { margin-top: 2.5rem; }

footer { padding: 2rem 0 3rem; border-top: 1px solid rgba(169, 189, 200, .16); color: var(--muted); }

@media (max-width: 42rem) {
  header { align-items: flex-start; gap: 1rem; }
  nav { justify-content: flex-end; font-size: .9rem; }
  .hero { padding-top: 4rem; }
}