:root {
  --font-family-base: 'Aeonik', sans-serif;
  interpolate-size: allow-keywords;
}
html {
  scroll-padding-top: 80px;
}
body {
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  color: #edeff5;
  background-color: #010b24;

  &.menu-open {
    overflow: clip;

    &::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(2, 13, 41, 0.4);
      backdrop-filter: blur(6px);
      z-index: 9;
    }
  }
}

h1 {
  font-size: 72px;
  font-weight: 700;
}

h2 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

h3 {
  font-size: 28px;
  font-weight: 700;
}

h4 {
  font-size: 24px;
  font-weight: 700;
}

.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;

  main {
    flex-grow: 1;
  }
}

.main__bg-circle {
  position: relative;
  background: url('/img/bg/bg-main-circle.webp') no-repeat 100% 100%;
  background-position: right 15%;
  overflow: clip;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url('/img/bg/bg-main.webp') no-repeat;
    background-size: auto;
    background-position: 50% 52%;
    z-index: -1;
  }
}

.bottom__bg {
  position: relative;
  background-size: 100% 100%;
  background-position: left;
  background-repeat: no-repeat;
  overflow: clip;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/bg/bottom-bg.webp');
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -1;
  }

  &.automation__bg {
    &::after {
      background-image: none;
    }
  }
}

.container {
  max-width: 1192px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 250px;
  width: 100%;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #010b24;
  border: 1px solid currentColor;
  overflow: hidden;
  border-radius: 50px;
  background: #edeff5;
  cursor: pointer;

  transition:
    scale 0.3s,
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;

  svg {
    transition: translate 0.3s;
  }

  &:hover {
    scale: 1.03;

    svg {
      translate: 10px 0;
    }
  }

  &.btn--secondary {
    border-radius: 50px;
    color: #edeff5;
    border: 1px solid #b4b4b4;
    background: rgba(52, 65, 73, 0.5);
    backdrop-filter: blur(13px);
    text-transform: capitalize;
  }

  &.btn--blue {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        270deg,
        #152e6b 0%,
        #037086 34.51%,
        #037086 60.81%,
        #053f68 100%
      );
      opacity: 0;
      filter: blur(10px);
      transition: opacity 0.5s ease;
      z-index: -1;
    }

    &:hover {
      &::before {
        opacity: 1;
      }
    }
  }

  &.btn--purple {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        270deg,
        #ff8803 0%,
        #ff00d6 34.51%,
        #ff00d6 60.81%,
        #6324cb 100%
      );
      filter: blur(10px);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: -1;
    }

    &:hover {
      &::before {
        opacity: 1;
      }
    }
  }

  &.btn--white {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(270deg, #0d8ed6 10%, #fff 59%, #010b24 100%);
      filter: blur(20px);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: -1;
    }

    &:hover {
      &::before {
        opacity: 1;
      }
    }
  }

  &.btn--gr {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        206% 131% at 108% -18%,
        #fff 0%,
        #00f0ff 26%,
        #0012b8 96%
      );
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: -1;
    }

    &:hover {
      color: #fff;
      border-color: #262626;

      &::before {
        opacity: 1;
      }
    }
  }
}

.highlight {
  text-transform: capitalize;
  background: linear-gradient(90deg, #ff8a00 0%, #ff00d6 62%, #6324cb 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(100%) !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

.form-wrapper {
  display: none;
  order: 1;

  &.is-visible {
    display: flex;
  }
}

/* #region MEDIA QUERIES */

@media (width <= 1200px) {
  .container {
    max-width: 100%;
  }

  .main__bg-circle {
    &::after {
      background-position: 50% 68%;
    }
  }
}

@media (width <= 768px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 32px;
  }
  .main__bg-circle {
    background-position: right 70%;

    &::after {
      background-position: 50% 58%;
    }
  }
  .bottom__bg {
    background-image: url('/img/bg/faq-bg.webp');
  }
}

/* #endregion MEDIA QUERIES */