.hero-divider {
  height: 2px;
  align-self: stretch;
  background: radial-gradient(circle, var(--colorNeutralStroke2) 0%, transparent 80%);
}

.hero-container {
  background-repeat: no-repeat;
  width: 100%;
  background-size: 100vw 94%;

  display: flex;
  padding: 120px 80px 52px 80px;
  flex-direction: column;
  gap: 56px;
  align-self: stretch;
}

[data-theme="light"] .hero-container {
  background: radial-gradient(
      46.56% 45.08% at 56.04% 55.33%,
      rgba(0, 50, 255, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    radial-gradient(
      46.69% 41.74% at 69.64% 60.81%,
      rgba(192, 59, 196, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    radial-gradient(
      59.78% 45.73% at 30.42% 58.68%,
      rgba(0, 120, 212, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    radial-gradient(32.53% 31.57% at 50% 66.82%, rgba(70, 54, 104, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}

[data-theme="dark"] .hero-container {
  background: radial-gradient(
      46.56% 45.08% at 56.04% 55.33%,
      rgba(0, 50, 255, 0.2) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    radial-gradient(
      46.69% 41.74% at 69.64% 60.81%,
      rgba(192, 59, 196, 0.2) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    radial-gradient(
      59.78% 45.73% at 30.42% 58.68%,
      rgba(0, 120, 212, 0.2) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    radial-gradient(32.53% 31.57% at 50% 66.82%, rgba(70, 54, 104, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero-title {
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 24px */
  letter-spacing: -0.24px;
}

.hero-subtitle {
  text-align: center;
  font-size: 96px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 96px */
  letter-spacing: -1px;
  color: transparent;

  background: linear-gradient(
    127deg,
    #6dc2b1 -17.91%,
    #9ac6e5 19.34%,
    #3579d8 56.65%,
    #b145bd 96.75%
  );
  background-clip: text;
}

@media only screen and (max-width: 1024px) {
  .hero-subtitle {
    font-size: 68px;
  }
}

@media only screen and (max-width: 728px) {
  .hero-subtitle {
    font-size: 48px;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
}

.hero-description,
.overview-description {
  max-width: 600px;
  padding: 20px;
  text-align: center;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
}

.hero-demo {
  display: flex;
  padding: 0px 102px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;
}

@media only screen and (max-width: 728px) {
  .hero-demo {
    display: none;
  }
}

.overview {
  display: flex;
  flex-direction: column;
  gap: 128px;
  width: 100%;
  max-width: 100%;
  padding: 60px;
}

@media only screen and (max-width: 728px) {
  .overview {
    padding: 20px;
  }
}

.overview-subtitle {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
}

.overview-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.closing {
  display: flex;
  padding: 80px 60px;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  align-self: baseline;
}

.closing-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
}

@media only screen and (max-width: 728px) {
  .closing-title,
  .overview-subtitle {
    font-size: 32px;
    line-height: 40px;
  }
}

.closing-buttons {
  display: flex;
  gap: 8px;
}

.codeblock-seperator {
  height: 10px;
}
