:root {
  --bg: #0b0b0b;
  --fg: #fafafa;
  --muted: #a3a3a3;
  /* Brand magenta. On this dark page #ae1b84 is a FILL only (white letter on it,
     6.38:1) — as text it would be 3.08:1 on --bg. Accent text, underline and focus
     ring use --accent-text (6.77:1 on --bg); the eyebrow outline --accent-line
     (4.85:1 on --bg, non-text ≥ 3:1). */
  --accent: #ae1b84;
  --on-accent: #ffffff;
  --accent-text: #e56dba;
  --accent-line: #d148a4;
  --line: #262626;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); }

.page {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo { display: block; height: 44px; width: auto; }

.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; max-width: 760px; }
.eyebrow {
  margin: 0; align-self: flex-start;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: 9999px; padding: 6px 12px;
}
h1 { margin: 0; font-size: clamp(32px, 6vw, 60px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
.lead { margin: 0; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: #d4d4d4; max-width: 620px; }
.ar { margin: 0; font-size: 18px; color: var(--muted); }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px;
}
.client { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent-text); text-underline-offset: 4px; }
.client:hover, .client:focus-visible { color: var(--accent-text); }
.client:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.copy { color: var(--muted); }
