:root {
  --navy: #16212B;
  --bg: #F3F4F1;
  --card: #FBFBF9;
  --yellow: #E2B007;
  --green: #1D7A4D;
  --text: #4B5661;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  line-height: 1.6;
}
.hero { max-width: 880px; margin: 0 auto; padding: 96px 16px; }
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--navy);
  border-left: 4px solid var(--yellow);
  padding-left: 10px;
}
h1 { color: var(--navy); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; margin: 16px 0; }
.lead { font-size: 1.15rem; max-width: 46em; }
.contact { margin-top: 40px; }
a { color: var(--green); }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }