:root {
  --black-100: #000000;
  --black-95: #060709;
  --black-90: #0c0e12;
  --black-85: #12151a;
  --white-100: #f2f4f8;
  --white-90: rgba(242, 244, 248, 0.9);
  --white-80: rgba(242, 244, 248, 0.8);
  --white-75: rgba(242, 244, 248, 0.75);
  --white-55: rgba(242, 244, 248, 0.55);
  --white-35: rgba(242, 244, 248, 0.35);
  --white-20: rgba(242, 244, 248, 0.2);
  --white-12: rgba(242, 244, 248, 0.12);
  --line-light: rgba(242, 244, 248, 0.28);
  --line-soft: rgba(242, 244, 248, 0.14);
  --header-height: 76px;
  --mobile-cta-height: 50px;
  --shell-width: 1380px;
  --content-width: 540px;
  --section-min-h: 100svh;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  font-family: "Barlow Condensed", "DIN Alternate", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  background: var(--black-100);
  color: var(--white-100);
  font-size: clamp(0.95rem, 0.92rem + 0.12vw, 1rem);
  line-height: 1.42;
  letter-spacing: 0.01em;
}

a {
  color: inherit;
  text-decoration: none;
}

main {
  position: relative;
}

p,
li,
label,
input,
select,
textarea,
button,
cite,
dd,
dt {
  font-family: "Barlow Condensed", "DIN Alternate", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
}

h1,
h2,
h3,
h4 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

::selection {
  background: rgba(242, 244, 248, 0.24);
}