:root {
  --ink: #f5f7fa;
  --muted: #9ba3ad;
  --canvas: #0c0c0e;
  --surface: #12151a;
  --surface-2: #181c22;
  --line: rgba(255, 255, 255, 0.16);
  --blue: #159fe8;
  --blue-bright: #37b8ff;
  --blue-dark: #08689d;
  --success: #28c76f;
  --danger: #ff6868;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --step--1: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.563rem, 1.4rem + 0.8vw, 2rem);
  --step-3: clamp(1.953rem, 1.7rem + 1.2vw, 2.75rem);
  --step-4: clamp(2.441rem, 2rem + 2vw, 3.75rem);
  --step-5: clamp(3rem, 2.5rem + 3vw, 5.5rem);
  --step-6: clamp(3.75rem, 3rem + 4vw, 8rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --section: clamp(5rem, 10vw, 10rem);
  --container: 88rem;
  --radius: 0;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-nav: 30;
  --z-overlay: 40;
  --z-floating: 50;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, [role="button"] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 4px; }
::selection { color: #061017; background: var(--blue-bright); }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
p { max-width: 68ch; }

.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
.section-line { border-top: 1px solid var(--line); }
.surface { background: var(--surface); }
.surface-2 { background: var(--surface-2); }
.blue-text { color: var(--blue-bright); }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--space-3);
  color: var(--blue-bright);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow::before { width: 2.5rem; height: 1px; background: currentColor; content: ""; }
.display { font-size: var(--step-6); }
.outline-text { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.45); }
.lead { color: #d6dbe1; font-size: var(--step-1); line-height: 1.55; }
.kicker { color: var(--muted); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; }
.grid-2 { display: grid; gap: var(--space-4); }
.skip-link { position: fixed; top: 0; left: 1rem; z-index: 60; padding: 0.75rem 1rem; background: var(--blue); opacity: 0; pointer-events: none; transform: translateY(calc(-100% - 0.5rem)); }
.skip-link:focus, .skip-link:focus-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(2rem); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }

@media (min-width: 48rem) {
  .container { width: min(calc(100% - 4rem), var(--container)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}