:root {

  --bg:
    #eef2f6;

  --surface:
    #eef2f6;

  --surface-white:
    #ffffff;

  --text:
    #17263d;

  --text-muted:
    #68758a;

  --text-faint:
    #98a3b3;

  --navy:
    #0f2747;

  --navy-light:
    #234c7d;

  --navy-dark:
    #0a1d35;

  --navy-glow:
    rgba(15, 39, 71, .22);

  --success:
    #16a34a;

  --danger:
    #dc3545;

  --border:
    rgba(15, 39, 71, .09);

  --nm-dark:
    rgba(163, 174, 190, .56);

  --nm-light:
    rgba(255, 255, 255, .98);

  --raised-xs:
    3px 3px 7px var(--nm-dark),
    -2px -2px 6px var(--nm-light);

  --raised-sm:
    6px 6px 14px var(--nm-dark),
    -5px -5px 12px var(--nm-light);

  --raised:
    10px 10px 22px var(--nm-dark),
    -8px -8px 19px var(--nm-light);

  --raised-lg:
    15px 15px 34px var(--nm-dark),
    -11px -11px 28px var(--nm-light);

  --inset-xs:
    inset 3px 3px 7px var(--nm-dark),
    inset -2px -2px 6px var(--nm-light);

  --inset-sm:
    inset 5px 5px 11px var(--nm-dark),
    inset -4px -4px 9px var(--nm-light);

  --inset:
    inset 7px 7px 15px var(--nm-dark),
    inset -6px -6px 13px var(--nm-light);

  --radius-sm:
    12px;

  --radius:
    20px;

  --radius-lg:
    26px;

  --font-display:
    'Space Grotesk',
    sans-serif;

  --font-body:
    'Inter',
    sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;

  font-family:
    var(--font-body);

  color:
    var(--text);

  background:
    var(--bg);

  line-height:
    1.55;

  -webkit-font-smoothing:
    antialiased;

  overflow-x:
    hidden;
}

button,
input {
  font:
    inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  text-decoration:
    none;

  color:
    inherit;
}

img {
  max-width:
    100%;

  display:
    block;
}

[hidden] {
  display:
    none !important;
}

::selection {
  background:
    var(--navy);

  color:
    #fff;
}

.neu-raised {
  background:
    var(--surface);

  box-shadow:
    var(--raised);
}

.neu-inset {
  background:
    var(--surface);

  box-shadow:
    var(--inset);
}

.ambient-bg {
  position:
    fixed;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  overflow:
    hidden;
}

.ambient-bg::before,
.ambient-bg::after {
  content:
    '';

  position:
    absolute;

  width:
    360px;

  height:
    360px;

  border-radius:
    50%;

  filter:
    blur(100px);
}

.ambient-bg::before {
  top:
    -160px;

  right:
    -100px;

  background:
    rgba(15, 39, 71, .07);
}

.ambient-bg::after {
  bottom:
    -170px;

  left:
    -110px;

  background:
    rgba(89, 117, 145, .08);
}