@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-02BA; }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-02BA; }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-02BA; }
@font-face { font-family: Unbounded; font-weight: 500; font-display: swap; src: url(../fonts/unbounded-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F; }
@font-face { font-family: Unbounded; font-weight: 500; font-display: swap; src: url(../fonts/unbounded-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-02BA; }

:root {
  color-scheme: dark;
  --ink: #F2F6FF;
  --ink-soft: #B9C8EA;
  --navy: #00051A;
  --electric: #2F7BFF;
  --cyan: #45C8FF;
  --line: rgba(120, 175, 255, .28);
  --glass: rgba(4, 13, 52, .62);
  --gutter: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--navy); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--navy);
  font: 400 clamp(16px, 1.05vw, 18px)/1.65 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }

.eyebrow {
  font: 500 clamp(11px, .85vw, 13px)/1.4 Unbounded, Inter, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(44px) scale(.985);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Without the script nothing would ever reveal, so stay visible until it runs. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
