:root {
  color-scheme: dark;
  --text: #ebf5f2;
  --muted: #9db0ba;
  --line: rgba(159, 209, 194, 0.16);
  --accent: #49cfa7;
  --bg-1: #070d13;
  --bg-2: #0e171f;
  --bg-3: #152d32;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
  font-family: "Manrope", sans-serif;
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 12%, rgba(84, 164, 210, 0.2), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(62, 205, 162, 0.22), transparent 42%);
}

.site-header, main {
  width: min(760px, 92vw);
  margin: 0 auto;
}

.site-header { padding: 1.4rem 0 0.8rem; }

.brand {
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

main { padding: clamp(1rem, 4vw, 3rem) 0 3rem; }

.hero {
  padding: clamp(1.4rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18, 29, 37, 0.78), rgba(15, 24, 30, 0.62));
  box-shadow: 0 22px 56px rgba(3, 7, 10, 0.52);
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  max-width: 12ch;
  margin: 0.45rem 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.15rem, 8vw, 4.35rem);
  line-height: 1.03;
}

.lead {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  line-height: 1.7;
}