.bitstream-text {
  background: linear-gradient(
    to right,
    #ef008f,
    #6ec3f4,
    #7038ff,
    #ffba27,
    #ef008f
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% auto;
  animation-name: textShine !important;
  animation-duration: 6s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

@keyframes textShine {
  to { background-position: 200% center; }
}

.tx-hero-wrapper {
  position: relative;
}

.kb-illustration-band {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

#gradient-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: -1;
  --gradient-color-1: #ef008f;
  --gradient-color-2: #6ec3f4;
  --gradient-color-3: #7038ff;
  --gradient-color-4: #ffba27;
}

.tx-hero-band {
  width: 100%;
  background-color: rgb(255, 255, 255);
}
.dark .tx-hero-band {
  background-color: rgb(17, 24, 39);
}

.tx-hero {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 4rem;
  margin: 0 auto;
  text-align: center;
}
.tx-hero h1 {
  font-weight: 700;
  font-size: 38px;
  line-height: 46px;
  color: rgb(38, 38, 38);
}
@media screen and (max-width: 600px) {
  .tx-hero h1 { font-size: 28px; line-height: 36px; }
}
.dark .tx-hero h1 {
  color: rgb(220, 220, 220);
}
.tx-hero p {
  color: rgb(92, 92, 92);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (max-width: 1012px) {
  .tx-hero p {
    padding: 15px;
  }
}
.dark .tx-hero p {
  color: rgb(185, 185, 185);
}
.tx-hero__image {
  max-width: 800px;
  min-width: 300px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
.tx-hero__image img {
  padding: 15px 0;
  width: 100%;
  height: 100%;
  min-width: 0;
}