@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter_18pt-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter_18pt-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter_18pt-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  --paper: #f6f7f9;
  --ink: #172333;
  --muted: #576375;
  --line: #dce1e8;
  --blue: #5b78b3;
  --blue-dark: #354f85;
  --blue-light: #edf1f9;
  --white: #fff;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;
  --shell: 1400px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
button,
input {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid #8bafff;
  outline-offset: 5px;
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
.shell {
  width: min(calc(100% - 96px), var(--shell));
  margin-inline: auto;
}
.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  color: var(--white);
  mix-blend-mode: screen;
}
.header-inner {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff24;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-image {
  display: block;
  width: 206px;
  height: auto;
}
.site-header .brand-image {
  filter: invert(1);
  mix-blend-mode: screen;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-link {
  text-decoration: none;
  font-size: 0.875rem;
  color: #c5cede;
}
.nav-link:hover {
  color: white;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 50px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--blue);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background 180ms ease,
    transform 180ms ease;
}
.button:hover {
  background: #49669f;
  transform: translateY(-2px);
}
.button-small {
  min-height: 42px;
  padding: 10px 16px;
  border-color: #ffffff4f;
  background: #ffffff08;
}
.button-small:hover {
  background: #ffffff16;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: center;
  min-height: min(800px, calc(100svh - 24px));
  padding: 112px 0 60px;
  background: #101925;
  color: #f5f7fc;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(110deg, #0f1825 5%, #152135ba 42%, #101a28 100%);
}
.hero-light {
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -12%;
  width: 76%;
  height: 140%;
  transform: skewY(-15deg);
  opacity: 0.7;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 5%,
      #82a7e708 10%,
      #87aee129 11%,
      #26395026 18%,
      transparent 19%,
      transparent 32%,
      #8ca3d10c 33%,
      #c4d6ff30 34%,
      #6d8fbf09 41%,
      transparent 42%,
      transparent 61%,
      #a8c4f321 62%,
      #b3c4e838 63%,
      #b7cff70a 70%,
      transparent 71%
    ),
    linear-gradient(0deg, transparent 25%, #4067980d 60%, #c3d7fa13);
  mask-image: linear-gradient(transparent, black 28%, black 66%, transparent);
  animation: light-settle 5s ease-out both;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.eyebrow {
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--blue-dark);
}
.hero .eyebrow {
  max-width: 550px;
  margin-bottom: 22px;
  color: #b7c9ed;
  font-size: 0.75rem;
  letter-spacing: 0.075em;
}
h1,
h2,
h3,
p {
  text-wrap: pretty;
}
h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(2.75rem, 4.25vw, 4.25rem);
  font-weight: 450;
  letter-spacing: -0.05em;
  line-height: 1.09;
}
h1 span {
  color: #adbee0;
}
.hero-lead {
  max-width: 530px;
  margin: 24px 0 0;
  color: #c1cad8;
  font-size: 1rem;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 28px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-block: 10px;
  color: #d1dbeb;
  font-size: 0.875rem;
  text-decoration: none;
}
.text-link:hover {
  color: white;
}
@keyframes light-settle {
  from {
    opacity: 0.25;
    transform: translateX(24px) skewY(-15deg);
  }
  to {
    opacity: 0.7;
    transform: translateX(0) skewY(-15deg);
  }
}