.wrapper {
  background: linear-gradient(180deg, #0c0f30 0%, #01020d 100%);
  font-family: "Source Sans Pro", serif;
  color: #fff;
  padding: 51px 0;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  .content {
    max-width: 1860px;
    width: 100%;
    position: relative;
    margin: 0 auto;
  }
  .headerGradient {
    position: absolute;
    left: 50%;
    margin-left: calc(1860px / -2);
    top: -441px;
    ellipse {
      mix-blend-mode: overlay;
    }
  }
  .box {
    position: absolute;
    left: 50%;
    margin-left: calc(1860px / -2);
    top: -120px;
    z-index: -1;
  }
  .headingContent {
    position: relative;
    z-index: 1;
  }
  main {
    position: relative;
    z-index: 1;
    margin-top: 420px;
  }
  h1 {
    font-weight: 700;
    font-size: 103px;
    line-height: 112%;
    text-align: center;
    background: linear-gradient(114.83deg, #ffffff 55.09%, #78738e 92.47%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 8px;
  }
  h2 {
    font-weight: 700;
    font-size: 46px;
    line-height: 58px;
    text-align: center;
    letter-spacing: -0.017em;
    background: linear-gradient(180deg, #ffffff 50%, #443c66 106.65%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 3px;
  }
  .subhead {
    font-weight: 300;
    font-size: 30px;
    line-height: 120%;
    text-align: center;
  }
  .items {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 48px;
    margin-top: 65px;
    .item {
      flex: 1;
      max-width: 330px;
      border-radius: 10px;
      gap: 48px;
      position: relative;
      padding: 17px 27px;
      padding-bottom: 47px;
      &::before {
        content: "";
        background: radial-gradient(
          70.96% 70.96% at 50% 50%,
          #2d2075 0%,
          #06081d 100%
        );
        opacity: 0.5;
        backdrop-filter: blur(8px);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
      }
      &:hover {
        &::before {
          content: "";
          position: absolute;
          background: radial-gradient(
            70.96% 70.96% at 50% 50%,
            #8146ff 0%,
            #06081d 100%
          );
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
        }
      }
      .border {
        position: absolute;
        border-radius: 10px;
        background: linear-gradient(
          90deg,
          rgba(23, 25, 46, 1) 0%,
          rgba(85, 34, 161, 1) 50%,
          rgba(23, 25, 46, 1) 100%
        );
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        &::before {
          content: "";
          position: absolute;
          background-color: #01020d;
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px;
        }
      }
      h5 {
        position: relative;
        color: #805ad5;
        font-weight: 700;
        font-size: 21px;
        line-height: 153.7%;
        letter-spacing: 0.012em;
        z-index: 1;
        margin-bottom: 4px;
      }
      p {
        position: relative;
        font-weight: 400;
        font-size: 16px;
        line-height: 153.7%;
        letter-spacing: 0.012em;
        color: #eeeeee;
        z-index: 1;
        margin-bottom: 1em;
      }
      a {
        font-weight: 800;
        color: #eeeeee;
      }
      a:hover {
        color: #805ad5;
      }
    }
  }
  footer {
    margin-top: 122px;
    width: 100%;
    text-align: center;
    position: relative;
    .links {
      display: flex;
      gap: 24px;
      justify-content: center;
      a {
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        text-decoration: none;
        color: #ffffff;
      }
    }
    .separator {
      position: absolute;
      left: 50%;
      margin-left: calc(1860px / -2);
      top: 50px;
    }
    .fides {
      margin: 0 auto;
      margin-top: 75px;
    }
  }
}

.whatInTheBox {
  width: 1022px;
  margin: 0 auto;
  border: 1px solid #474e62;
  border-radius: 10px;
  margin-top: 122px;
  padding: 54px 0;
  position: relative;
  .tooltip {
    width: 320px;
    padding: 8px;
    background: #2d3748;
    border-radius: 4px;
    position: absolute;
    text-align: center;
    z-index: 1;
    font-weight: 400;
    .tooltipContent {
    }
    svg.arrow {
      position: absolute;
      left: calc(320px / 2 - 16px / 2);
      bottom: -8px;
    }
  }
  svg.schema {
    margin-top: -111px;
    z-index: 0;
    position: relative;
    pointer-events: none;
    rect {
      pointer-events: all;
    }
  }
}
