/* Web fonts are loaded via Google Fonts <link> in each page head:
  Space Grotesk is the primary Hypermine AI brand font. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  background: var(--sovereign-black);
  color: var(--cloud-white);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--grad-bg-dark);
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--neural-violet); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #060914; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--cyan-glow), var(--neural-violet)); border-radius: var(--radius-pill); }
:focus-visible { outline: 2px solid var(--cyan-glow); outline-offset: 4px; }
.container { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.section { padding-block: clamp(60px, 7vw, 92px); }
.kicker { display: inline-block; color: var(--cyan-glow); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-block-end: 14px; }
.text-gradient-wordmark, .text-gradient-tagline, .gradient-text {
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-tagline { background-image: var(--grad-tagline); }
h1, h2, h3, p { margin-block-start: 0; }
h1 { font-family: "Space Grotesk", "Segoe UI", sans-serif; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: 0.04em; text-transform: uppercase; }
h2 { font-family: "Space Grotesk", "Segoe UI", sans-serif; font-size: var(--fs-h2); line-height: 1.16; letter-spacing: 0.02em; }
h1, h2, h3 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { color: var(--muted); }
.lead { font-size: clamp(18px, 2vw, 23px); color: rgba(226, 230, 240, 0.84); max-width: 760px; }
.page-hero { display: grid; align-items: center; padding-block: 132px 48px; position: relative; overflow: hidden; }
.page-hero + .section { padding-block-start: clamp(36px, 4vw, 56px); }
.page-hero::after, .orb-glow {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--cyan-glow-rgb), 0.22), transparent 65%);
  filter: blur(12px);
  right: -140px;
  top: 120px;
  pointer-events: none;
}
.skip-link { position: absolute; left: -999px; top: 16px; background: var(--cyan-glow); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 20; }
.skip-link:focus { left: 16px; }