:root {
  color-scheme: dark;
  --ink: #f2efff;
  --muted: #bdb9cf;
  --ground: #0c0b13;
  --line: #302b41;
  --cyan: #73f8ff;
  --pink: #ff66b8;
  --lime: #b9ff83;
  font-family: system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
}
.wrap { width: min(100% - 3rem, 72rem); margin-inline: auto; }
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.masthead a, .wordmark, footer {
  font: 0.82rem/1.55 ui-monospace, Menlo, monospace;
}
.wordmark { font-weight: 700; }
.wordmark span { color: var(--muted); }
a { color: var(--cyan); text-underline-offset: 0.23em; }
a:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 11vw, 9rem) 0 clamp(3rem, 9vw, 6rem);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--cyan), var(--pink), var(--lime)) 1;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 22%, #51125666, transparent 52%),
    radial-gradient(ellipse at 65% 84%, #086a7760, transparent 54%),
    repeating-linear-gradient(90deg, transparent 0 31px, #aaa3ff13 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 31px, #aaa3ff13 31px 32px);
  mask-image: linear-gradient(90deg, transparent, black 75%);
}
h1 {
  margin: 0;
  font-size: clamp(3rem, 9.4vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.075em;
}
h1 span {
  color: var(--cyan);
  text-shadow: 2px 2px 0 #ad347f;
}
p, dd { color: var(--muted); line-height: 1.65; }
.hero p {
  max-width: 35rem;
  margin: 1.7rem 0 0;
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
}
.services, .engagement { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
h2 { margin: 0 0 1.25rem; font-size: clamp(1.65rem, 4vw, 2.45rem); letter-spacing: -0.045em; }
dl { margin: 0; }
dl div {
  --accent: var(--cyan);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 0.45rem 2rem;
  padding: 1.25rem 0 1.25rem 1rem;
  border-top: 1px solid var(--line);
  border-left: 2px solid var(--accent);
}
dl div:nth-child(3n + 2) { --accent: var(--pink); }
dl div:nth-child(3n) { --accent: var(--lime); }
dt { font-weight: 700; color: var(--accent); }
dd, .engagement p { margin: 0; }
.engagement { border-top: 1px solid var(--line); }
.engagement p { max-width: 43rem; }
footer { padding-block: 1.25rem 2rem; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 40rem) {
  .wrap { width: calc(100% - 2rem); }
  h1 { font-size: clamp(2.55rem, 10.8vw, 4.4rem); }
  dl div { grid-template-columns: minmax(0, 1fr); }
}