@font-face {
  font-family: "rolenexus-iconfont";
  src: url("/fonts/rolenexus-iconfont/fonts/rolenexus-iconfont.eot?bio03k");
  src: url("/fonts/rolenexus-iconfont/fonts/rolenexus-iconfont.eot?bio03k#iefix") format("embedded-opentype"), url("/fonts/rolenexus-iconfont/fonts/rolenexus-iconfont.ttf?bio03k") format("truetype"), url("/fonts/rolenexus-iconfont/fonts/rolenexus-iconfont.woff?bio03k") format("woff"), url("/fonts/rolenexus-iconfont/fonts/rolenexus-iconfont.svg?bio03k#rolenexus-iconfont") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "rolenexus-iconfont" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-check:before {
  content: "\e926";
}

.icon-filter:before {
  content: "\e927";
}

.icon-facebook:before {
  content: "\e900";
}

.icon-google:before {
  content: "\e901";
}

.icon-instagram:before {
  content: "\e902";
}

.icon-discord:before {
  content: "\e903";
}

.icon-info:before {
  content: "\e904";
}

.icon-file:before {
  content: "\e905";
}

.icon-online:before {
  content: "\e906";
}

.icon-info1:before {
  content: "\e907";
}

.icon-search:before {
  content: "\e908";
}

.icon-other:before {
  content: "\e909";
}

.icon-archive:before {
  content: "\e90a";
}

.icon-back:before {
  content: "\e90b";
}

.icon-ban:before {
  content: "\e90c";
}

.icon-calendar:before {
  content: "\e90d";
}

.icon-chat:before {
  content: "\e90e";
}

.icon-chevron:before {
  content: "\e90f";
}

.icon-close:before {
  content: "\e910";
}

.icon-copy:before {
  content: "\e911";
}

.icon-delete:before {
  content: "\e912";
}

.icon-download:before {
  content: "\e913";
}

.icon-edit:before {
  content: "\e914";
}

.icon-eye:before {
  content: "\e915";
}

.icon-eye-off:before {
  content: "\e916";
}

.icon-flag:before {
  content: "\e917";
}

.icon-geo:before {
  content: "\e918";
}

.icon-group:before {
  content: "\e919";
}

.icon-location:before {
  content: "\e91a";
}

.icon-lock:before {
  content: "\e91b";
}

.icon-logout:before {
  content: "\e91c";
}

.icon-mail:before {
  content: "\e91d";
}

.icon-menu:before {
  content: "\e91e";
}

.icon-new-page:before {
  content: "\e91f";
}

.icon-next:before {
  content: "\e920";
}

.icon-notification:before {
  content: "\e921";
}

.icon-plus:before {
  content: "\e922";
}

.icon-report:before {
  content: "\e923";
}

.icon-share:before {
  content: "\e924";
}

.icon-user:before {
  content: "\e925";
}

@font-face {
  font-family: "Astoria";
  src: url("../../fonts/Astoria W00 Bold/Astoria W00 Bold/Web Fonts/astoria_w00_bold.eot");
  src: url("../../fonts/Astoria W00 Bold/Astoria W00 Bold/Web Fonts/astoria_w00_bold.eot?#iefix") format("embedded-opentype"), url("../../fonts/Astoria W00 Bold/Astoria W00 Bold/Web Fonts/astoria_w00_bold.woff") format("woff"), url("../../fonts/Astoria W00 Bold/Astoria W00 Bold/Web Fonts/astoria_w00_bold.woff2") format("woff2"), url("../../fonts/Astoria W00 Bold/Astoria W00 Bold/Web Fonts/astoria_w00_bold.ttf") format("truetype"), url("../../fonts/Astoria W00 Bold/Astoria W00 Bold/Web Fonts/astoria_w00_bold.svg#Astoria W00 Bold") format("svg");
  font-weight: bold;
  font-style: bold;
  font-display: swap;
}
@font-face {
  font-family: "Astoria";
  src: url("../../fonts/Astoria Medium/Astoria Medium/Web Fonts/astoria_medium.eot");
  src: url("../../fonts/Astoria Medium/Astoria Medium/Web Fonts/astoria_medium.eot?#iefix") format("embedded-opentype"), url("../../fonts/Astoria Medium/Astoria Medium/Web Fonts/astoria_medium.woff") format("woff"), url("../../fonts/Astoria Medium/Astoria Medium/Web Fonts/astoria_medium.woff2") format("woff2"), url("../../fonts/Astoria Medium/Astoria Medium/Web Fonts/astoria_medium.ttf") format("truetype"), url("../../fonts/Astoria Medium/Astoria Medium/Web Fonts/astoria_medium.svg#Astoria Medium") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
h1, h2, h3, h4, h5 {
  font-family: "Astoria";
  margin: 0;
}

h1 {
  font-size: clamp(4.6rem, 6vw, 6rem);
  font-weight: bold;
}

h2 {
  font-size: clamp(3.4rem, 6vw, 4rem);
  font-weight: bold;
}

h3 {
  font-size: clamp(2rem, 4.6vw, 3rem);
}

h4 {
  font-family: "Lato", sans-serif;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
}

p {
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.4;
  margin: 0;
}

:root {
  --space-xxs: 0.4rem;
  --space-xs: 0.8rem;
  --space-s: 1.6rem;
  --space-m: 3.2rem;
  --space-l: 6.4rem;
  --space-xl: 8rem;
  --space-xxl: 12rem;
  --fluid-m-l: clamp(var(--space-m), calc(var(--space-m) / 2 + 3vw), var(--space-l));
  --space-xl-xxl: clamp(var(--space-xl), calc(var(--space-xxl) / 2 + 4vw), var(--space-xxl));
  --space-m-l: clamp(var(--space-m), 4vw, var(--space-l));
  /* Type */
  --step-1: 1.2rem;
  --step-2: 1.4rem;
  --step-3: 1.6rem;
  --step-4: 1.8rem;
  --step-5: 2.4rem;
  --step-6: clamp(2.4rem, 2.12174rem + 0.8696vw, 3.2rem);
  --step-7: clamp(3.2rem, 2.64348rem + 1.7391vw, 4.8rem);
  --step-8: clamp(4rem, 2.6087rem + 4.3478vw, 8rem);
  --title-1: 3.4rem;
}

:root {
  --c--black: #131111;
  --c--dark: #231D1D;
  --c--darkin: #343232;
  --c--white: white;
  --c--white--20: rgba(255, 255, 255, 0.2);
  --c--white--15: rgba(255, 255, 255, 0.15);
  --c--white--06: rgba(255, 255, 255, 0.06);
  --c--white--03: rgba(255, 255, 255, 0.03);
  --c--black--03: rgba(19, 17, 17, 0.03);
  --c--black--06: rgba(19, 17, 17, 0.06);
  --c--black--15: rgba(19, 17, 17, 0.15);
  --c--black--30: rgba(19, 17, 17, 0.3);
  --c--black--60: rgba(19, 17, 17, 0.4);
  --c--primary--light: #E94848;
  --c--primary--hover: #821C1C;
  --c--primary: #AA2525;
  --c--primary--dark: #18181A;
  --c--secondary: #6B3535;
  --c--secondary-light: #D79393;
  --c--bg: #F5F5F5;
  --c--gray-light: #E7E7E7;
  --c--gray: #BEBEBE;
  --c--gray-dark: #7a7a7a;
  --c--violet: #6D28D9;
  --c--green: #2A9D8F;
  --c--green-notify: #35CD98;
  --c--blue: #1E3A8A;
  --c--blue-light: #0284C7;
  --c--yellow: #CA8A04;
  --c--orange: #D97706;
  --c--red: #900b09;
  --c--error: var(--c--red);
  --c--error--light: #ff1f1b;
  --f--color: var(--c--black);
  --f--family: "Lato", sans-serif;
  --f--family--header: "Astoria", "Lato", sans-serif;
  --f--size: 1.6rem;
  --border--lg: var(--space-xl-2xl);
  --header--height: 8rem;
  --p--container: clamp(var(--space-s), 7%, var(--space-l));
  --cta--bottom: 2rem;
  --cta--right: 2rem;
  --btn--height: 4.2rem;
  --c--input-placeholder: #757575;
  --container-padding: clamp(1rem, 5vw, 3rem);
}

button {
  all: unset;
}

body {
  background-color: red;
}

.btn,
button.btn,
a.btn {
  --c: var(--c--white);
  --c--bg: var(--c--black);
  --c--border: var(--c--black);
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-xxs) var(--space-s);
  background-color: var(--c--bg);
  border: 1px solid var(--c--border);
  color: var(--c);
  font-size: var(--step-3);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: 0.45s ease-in-out background-color, 0.45s ease-in-out color, 0.45s ease-in-out border-color;
  min-width: 16rem;
  min-height: var(--btn--height);
  text-decoration: none;
}
.btn svg path,
button.btn svg path,
a.btn svg path {
  fill: var(--c);
  transition: fill 0.45s ease-in-out;
}
.btn.btn-big,
button.btn.btn-big,
a.btn.btn-big {
  --btn--height: 5.4rem;
}
.btn.btn-small,
button.btn.btn-small,
a.btn.btn-small {
  height: auto;
  min-width: 0;
  padding: var(--space-xs);
}
.btn:hover, .btn:focus, .btn:active,
button.btn:hover,
button.btn:focus,
button.btn:active,
a.btn:hover,
a.btn:focus,
a.btn:active {
  --c: var(--c--white);
  --c--bg: var(--c--primary--hover);
  --c--border: var(--c--primary--hover);
}
.btn.btn-full,
button.btn.btn-full,
a.btn.btn-full {
  width: 100%;
  height: 4.2rem;
  display: inline-flex;
}
.btn.btn-primary,
button.btn.btn-primary,
a.btn.btn-primary {
  --c: var(--c--white);
  --c--bg: var(--c--primary);
  --c--border: var(--c--primary);
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus,
button.btn.btn-primary:active,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:active {
  --c: var(--c--white);
  --c--bg: var(--c--primary--hover);
  --c--boder: var(--c--primary--hover);
}
.btn.btn-white,
button.btn.btn-white,
a.btn.btn-white {
  --c--bg: var(--c--white);
  --c: var(--c--black);
  --c--border: var(--c--white);
}
.btn.btn-white:hover, .btn.btn-white:focus, .btn.btn-white:active,
button.btn.btn-white:hover,
button.btn.btn-white:focus,
button.btn.btn-white:active,
a.btn.btn-white:hover,
a.btn.btn-white:focus,
a.btn.btn-white:active {
  --c--bg: var(--c--primary);
  --c--border: var(--c--primary);
  --c: var(--c--white);
}
.btn.btn-social,
button.btn.btn-social,
a.btn.btn-social {
  --c: var(--c--black);
  --c--bg: transparent;
  --c--border: var(--c--gray);
  color: var(--c);
  gap: 1rem;
  align-items: center;
}
.btn.btn-social:hover, .btn.btn-social:focus, .btn.btn-social:active,
button.btn.btn-social:hover,
button.btn.btn-social:focus,
button.btn.btn-social:active,
a.btn.btn-social:hover,
a.btn.btn-social:focus,
a.btn.btn-social:active {
  --c: var(--c--white);
  --c--bg: var(--c--primary);
  --c--border: var(--c--primary);
}
.btn.btn-border,
button.btn.btn-border,
a.btn.btn-border {
  --c: var(--c--black);
  --c--bg: transparent;
  --c--border: var(--c--black);
}
.btn.btn-border:hover, .btn.btn-border:focus, .btn.btn-border:active,
button.btn.btn-border:hover,
button.btn.btn-border:focus,
button.btn.btn-border:active,
a.btn.btn-border:hover,
a.btn.btn-border:focus,
a.btn.btn-border:active {
  --c: white;
  --c--bg: var(--c--black);
  --c--border: var(--c--black);
}
.btn.btn-border-red,
button.btn.btn-border-red,
a.btn.btn-border-red {
  --c: var(--c--primary);
  --c--bg: transparent;
  --c--border: var(--c--primary);
}
.btn.btn-border-red:hover, .btn.btn-border-red:focus, .btn.btn-border-red:active,
button.btn.btn-border-red:hover,
button.btn.btn-border-red:focus,
button.btn.btn-border-red:active,
a.btn.btn-border-red:hover,
a.btn.btn-border-red:focus,
a.btn.btn-border-red:active {
  --c: white;
  --c--bg: var(--c--primary--hover);
  --c--border: var(--c--primary--hover);
}
.btn.btn-full-black,
button.btn.btn-full-black,
a.btn.btn-full-black {
  background-color: transparent !important;
  border-color: transparent !important;
  position: relative;
  transition: color 0.45s ease-in-out;
}
.btn.btn-full-black::after,
button.btn.btn-full-black::after,
a.btn.btn-full-black::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  background-color: var(--c--primary--hover);
  z-index: -1;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}
@media (min-width: 992px) {
  .btn.btn-full-black:hover::after, .btn.btn-full-black:focus::after, .btn.btn-full-black:active::after,
  button.btn.btn-full-black:hover::after,
  button.btn.btn-full-black:focus::after,
  button.btn.btn-full-black:active::after,
  a.btn.btn-full-black:hover::after,
  a.btn.btn-full-black:focus::after,
  a.btn.btn-full-black:active::after {
    opacity: 1;
  }
}
.btn.btn-border-white,
button.btn.btn-border-white,
a.btn.btn-border-white {
  --c: var(--c--white);
  --c--bg: transparent;
  --c--border: var(--c--gray-dark);
}
.btn.btn-border-white:hover, .btn.btn-border-white:focus, .btn.btn-border-white:active,
button.btn.btn-border-white:hover,
button.btn.btn-border-white:focus,
button.btn.btn-border-white:active,
a.btn.btn-border-white:hover,
a.btn.btn-border-white:focus,
a.btn.btn-border-white:active {
  --c: black;
  --c--bg: var(--c--white);
  --c--border: var(--c--white);
}
.btn.btn-border-white:disabled,
button.btn.btn-border-white:disabled,
a.btn.btn-border-white:disabled {
  opacity: 0.5;
  --c: var(--c--white);
  --c--bg: transparent;
  --c--border: var(--c--white);
}
.btn.btn-border-transparent,
button.btn.btn-border-transparent,
a.btn.btn-border-transparent {
  border-color: transparent !important;
}
.btn.btn-with-icon,
button.btn.btn-with-icon,
a.btn.btn-with-icon {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.btn.btn-with-icon i,
button.btn.btn-with-icon i,
a.btn.btn-with-icon i {
  margin-top: -0.1em;
}
.btn.btn-icon,
button.btn.btn-icon,
a.btn.btn-icon {
  --d: 5.4rem;
  align-items: center;
  min-width: var(--d);
  width: var(--d);
  height: var(--d);
  padding: initial;
}
.btn.btn-icon > i,
button.btn.btn-icon > i,
a.btn.btn-icon > i {
  font-size: calc(var(--d) * 0.25);
}
.btn.btn-transparent,
button.btn.btn-transparent,
a.btn.btn-transparent {
  --c: var(--c--dark);
  --c--bg: transparent !important;
  --c--border: transparent !important;
}
.btn.btn-transparent:hover, .btn.btn-transparent:focus, .btn.btn-transparent:active,
button.btn.btn-transparent:hover,
button.btn.btn-transparent:focus,
button.btn.btn-transparent:active,
a.btn.btn-transparent:hover,
a.btn.btn-transparent:focus,
a.btn.btn-transparent:active {
  --c: var(--c--primary);
}
.btn.btn-filter,
button.btn.btn-filter,
a.btn.btn-filter {
  min-width: initial;
  padding: 0 var(--space-s);
  gap: var(--space-xs);
}
.btn.btn-filter i,
button.btn.btn-filter i,
a.btn.btn-filter i {
  font-size: 0.8em;
}
.btn.btn-filter span,
button.btn.btn-filter span,
a.btn.btn-filter span {
  --d: 1.9rem;
  padding: 0 calc(var(--d) * 0.4) 0 calc(var(--d) * 0.3);
  height: var(--d);
  border-radius: calc(var(--d) * 0.8);
  font-size: calc(var(--d) * 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c--primary);
  width: 100%;
}
.btn.btn-logo,
button.btn.btn-logo,
a.btn.btn-logo {
  gap: var(--space-xs);
}
.btn:disabled,
button.btn:disabled,
a.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.btn.btn-loading,
button.btn.btn-loading,
a.btn.btn-loading {
  position: relative;
  pointer-events: none;
}
.btn.btn-loading::after,
button.btn.btn-loading::after,
a.btn.btn-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c--primary--hover);
  z-index: 1;
}
.btn.btn-loading::before,
button.btn.btn-loading::before,
a.btn.btn-loading::before {
  --d: 24px;
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--d);
  height: var(--d);
  border-radius: 100%;
  border: 3px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  z-index: 2;
}
@keyframes lds-dual-ring {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-s);
}
@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background-color: var(--c--white);
  padding: var(--space-s);
  border-radius: var(--radius-s);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}
.card h3 {
  font-size: 2.2rem;
  text-transform: uppercase;
  margin: var(--space-xxs) 0;
}
.card .cta-wrapper {
  margin-top: var(--space-s);
  display: flex;
  gap: var(--space-s);
}
.card .cta-wrapper a {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  text-decoration: none;
  color: var(--c--dark);
  font-weight: bold;
  font-size: 1.8rem;
  transition: color 0.3s ease;
}
.card .cta-wrapper a:hover, .card .cta-wrapper a:focus, .card .cta-wrapper a:active {
  color: var(--c--primary);
}
.card .cta-wrapper a:hover .icon-wrapper, .card .cta-wrapper a:focus .icon-wrapper, .card .cta-wrapper a:active .icon-wrapper {
  border-color: var(--c--primary);
}
.card .cta-wrapper a .icon-wrapper {
  --d: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--d);
  height: var(--d);
  border-radius: 0.8rem;
  border: 1px solid var(--c--gray);
  transition: border-color 0.3s ease;
}
.card .cta-wrapper a .icon-wrapper svg path {
  fill: var(--c--primary);
}

.footer {
  background-color: var(--c--black);
  color: var(--c--white);
  padding: var(--space-l) 0 12rem;
}
.footer .container {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  align-items: center;
}
.footer .container p {
  border-left: 1px solid var(--c--darkin);
  flex: 1;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-m);
}
@media (max-width: 767px) {
  .footer .container {
    gap: var(--space-s);
  }
  .footer .container p {
    padding-left: var(--space-s);
  }
}
.footer .logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.footer .logo h1 {
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: 400;
}
.footer .logo h1 strong {
  font-weight: bold;
}
.footer p.legal {
  font-size: 1.2rem;
  color: var(--c--gray);
}

.roadmap-list {
  --d: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: 0 0 0 var(--d);
}
.roadmap-list li {
  position: relative;
  padding-left: var(--space-s);
  list-style: none;
}
.roadmap-list li:not(.roadmap-list li:last-child):before {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% + var(--space-s));
  background-color: var(--c--white);
  position: absolute;
  left: calc(var(--d) * -0.52);
  top: 4px;
}
.roadmap-list li h4 {
  margin-top: calc(var(--space-s) * -1);
}
.roadmap-list li .roadmap-step {
  position: absolute;
  left: 0;
  top: calc(var(--space-s) * -0.3);
  width: var(--d);
  height: var(--d);
  transform: translateX(-100%);
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--d) * 0.4);
}
.roadmap-list li .roadmap-step svg {
  position: absolute;
  left: 52%;
  top: 52%;
  z-index: -1;
  width: 100%;
  width: var(--d);
  transform: translate(-50%, -50%);
}
.roadmap-list li:first-child .roadmap-step {
  color: var(--c--primary);
}
.roadmap-list li:first-child .roadmap-step path {
  fill: var(--c--white);
}

.sticky-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-s);
  background-color: var(--c--white);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
  z-index: 50;
  font-family: "Astoria";
  font-weight: bold;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.sticky-action .cta-wrapper {
  display: flex;
  flex-direction: row;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
}
.sticky-action .cta-wrapper .btn {
  max-width: 340px;
}
@media (max-width: 767px) {
  .sticky-action .cta-wrapper .btn {
    max-width: 100%;
  }
}
.sticky-action.visible {
  opacity: 1;
  transform: translateY(0);
}

.section-hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c--primary);
  background: var(--c--primary) url("https://static.rolenexus.com/imgproxy/insecure/rs:fit:1942:624:no:0/plain/local:///teaser/hero.jpg@webp") center center no-repeat;
  background-size: cover;
  color: var(--c--white);
  text-align: center;
}
.section-hero .logo svg {
  width: clamp(14rem, 20dvw, 22rem);
  height: auto;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition-delay: 0.8s;
}
.section-hero h1 {
  margin-top: clamp(2rem, 4dvw, 4rem);
  font-size: clamp(4.6rem, 9dvw, 6rem);
  text-transform: uppercase;
  font-weight: 300;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition-delay: 0.95s;
}
.section-hero .arrow {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translate(-50%, 2rem);
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition-delay: 1.6s;
  z-index: 1;
}
.section-hero .arrow i {
  font-size: 3rem;
  color: var(--c--white);
}

.loaded .section-hero .logo svg {
  opacity: 1;
  transform: translateY(0);
}
.loaded .section-hero h1 {
  opacity: 1;
  transform: translateY(0);
}
.loaded .section-hero .arrow {
  opacity: 1;
  transform: translate(-50%, 0);
}

.section {
  --c: var(--c--dark);
  --c-bg: transparent;
  color: var(--c);
  background-color: var(--c-bg);
  padding: var(--space-l) 0;
}
.section a {
  color: var(--c);
}
.section.section-lg {
  padding: var(--space-xl) 0;
}
.section.section-white {
  --c: var(--c--dark);
  --c-bg: var(--c--white);
}
.section.section-black {
  --c: var(--c--white);
  --c-bg: var(--c--black);
}
.section.section-primary {
  --c: var(--c--white);
  --c-bg: var(--c--primary);
}
.section .section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.section .section-header + * {
  margin-top: var(--space-m);
}
.section.section-with-image {
  padding-bottom: 0;
}
.section.section-with-image .section-image {
  margin-top: var(--space-l);
}
.section.section-with-image img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100dvw;
}
@media (min-width: 768px) {
  .section.section-with-image {
    padding: 0;
  }
  .section.section-with-image.section-black {
    background-color: var(--c--black) !important;
  }
  .section.section-with-image.section-black .section-image {
    padding-top: 4rem;
  }
  .section.section-with-image.section-white .section-image {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .section.section-with-image:nth-child(odd) .container {
    flex-direction: row-reverse;
  }
  .section.section-with-image:nth-child(odd) .container .section-header {
    padding: var(--space-l) 0 var(--space-l) var(--space-l);
  }
  .section.section-with-image .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section.section-with-image .container .section-header {
    width: 50%;
    padding: var(--space-l) var(--space-l) var(--space-l) 0;
  }
  .section.section-with-image .container .section-image {
    width: 50%;
    margin-top: 0;
  }
  .section.section-with-image .container .section-image img {
    width: 100%;
  }
}

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

html {
  font-size: 62.5%;
  min-height: 100%;
}

* {
  outline: none;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  font-size: clamp(1.6rem, 3vw, 1.8rem);
  background-color: var(--c--bg);
  color: var(--c--black);
  line-height: 1.1;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}
body:before {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 140%;
  content: "";
  display: block;
  background-color: var(--c--primary);
  z-index: 100;
  transform: translateY(-50%) skewY(10deg);
  transition: top 1s ease-in-out;
}
body.loaded:before {
  top: -100%;
}

.container {
  max-width: 990px;
  margin: 0 auto;
  padding: 0 var(--space-m);
}

img {
  display: block;
  width: 100%;
}

.t-center {
  text-align: center;
}

.hidden {
  opacity: 0;
  transform: translate(0, 2rem);
  transition: all 0.45s ease-in-out;
}
.hidden.hidden-left {
  transform: translate(-2rem, 0);
}
.hidden.hidden-right {
  transform: translate(2rem, 0);
}
.hidden[data-at="100"] {
  transition-delay: 0.1s;
}
.hidden[data-at="200"] {
  transition-delay: 0.2s;
}
.hidden[data-at="300"] {
  transition-delay: 0.3s;
}
.hidden.visible {
  opacity: 1;
  transform: translate(0, 0) !important;
}
/*# sourceMappingURL=main.css.map */