.flow-container {
  position: relative;
  width: 92%;
  margin: 50px auto 0;
}

/* Animation keyframes */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes growPath {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes growPathReverse {
  from {
    stroke-dashoffset: -1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: -12;
  }
}

@keyframes dash2 {
  to {
    stroke-dashoffset: 12;
  }
}

/* YOUR OFFER box */
.offer-wrapper {
  display: block;
  position: relative;
  width: 213px;
  height: 221px;
  margin: 0 auto;
}

.offer-glow {
  position: absolute;
  background: #e669e6;
  height: 100%;
  border-radius: 22px;
  box-shadow: 0px 4px 50px 0px rgba(230, 105, 230, 0.8);
  width: 100%;
  animation: fadeInScale 0.5s ease-out forwards;
  opacity: 0;
}

.offer-box {
  position: absolute;
  background: linear-gradient(to bottom, #602f82, #341a46);
  border: 1px solid #e669e6;
  border-radius: 22px;
  width: 100%;
  height: calc(100% - 7px);
  top: 0;
  animation: fadeInScale 0.5s ease-out forwards;
  opacity: 0;
}

.offer-text {
  position: absolute;
  background: linear-gradient(to bottom, #fd9afd, #e669e6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  width: 100%;
  top: 70px;
  animation: fadeInScale 0.5s ease-out forwards;
  opacity: 0;
  font-family: var(--fonts-inter-tight);
}



/* Top gradient lines */
.top-lines {
  position: relative;
  width: 100%;
}

.top-gradient-lines {
  position: relative;
  height: 100px;
  max-width: 81.775%;
  margin: 0 auto;
  opacity: 0;
  animation: fadeIn 0.3s 0.5s ease-out forwards;
}

.top-gradient-lines svg {
  position: absolute;
  bottom: 0;
  left: -1.55%;
  right: -1.55%;
  top: 0;
  display: block;
  width: auto;
  height: 100%;
}

.top-gradient-lines path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: growPath 1s 0.5s ease-in-out forwards;
}

/* Top dotted lines */
.top-dotted-lines {
  position: absolute;
  height: 100px;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  max-width: 81.775%;
  opacity: 0;
  animation: fadeIn 0.3s 1.5s ease-out forwards;
}

.top-dotted-lines svg {
  position: absolute;
  bottom: 0;
  left: -0.05%;
  right: -0.05%;
  top: 0;
  display: block;
  width: auto;
  height: 100%;
}

.top-dotted-lines path {
  animation: dash 1s linear infinite;
}

/* Channel boxes */
.channels {
  position: relative;
  display: flex;
  gap: 30px;
  width: 100%;
  z-index: 1;
  opacity: 0;
  animation: fadeInUp 0.5s 1.5s ease-out forwards;
}

.channel-card {
  background: linear-gradient(to bottom, #a14cb3, #8e30a2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  position: relative;
  border-radius: 22px;
  width: 213px;
  border: 1px solid #e669e6;
  flex-shrink: 0;
}

.channel-card:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0px;
  bottom: -16px;
  background: #e669e6;
  border-radius: 22px;
  box-shadow: 0px 4px 50px 0px rgba(230, 105, 230, 0.3);
  z-index: -1;
}

.channel-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.channel-title {
  display: block;
  width: 100%;
  font-family: var(--fonts-inter-tight);
  font-weight: 900;
  line-height: 1;
  color: #feefff;
  font-size: 24px;
  text-align: center;
  flex-shrink: 0;
}

.channel-description {
  font-weight: 400;
  line-height: 1.2;
  color: #fde0ff;
  font-size: 15px;
  text-align: center;
  width: 165px;
  flex-shrink: 0;
}

.channel-description.email,
.channel-description.brands {
  width: 175px;
}

.channel-description.display-wide {
  width: 165px;
}

/* Bottom gradient lines (reversed) */
.bottom-lines {
  position: relative;
  width: 100%;
}

.bottom-gradient-lines {
  position: relative;
  height: 100px;
  max-width: 81.775%;
  margin: 0 auto;
}

.bottom-gradient-lines svg {
  position: absolute;
  bottom: 0;
  left: -1.55%;
  right: -1.55%;
  top: 0;
  display: block;
  width: auto;
  height: 100%;
  transform: rotate(180deg);
}

.bottom-gradient-lines path {
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  animation: growPathReverse 1s 1.5s ease-in-out forwards;
}

/* Bottom dotted lines */
.bottom-dotted-lines {
  position: absolute;
  height: 100px;
  width: 100%;
  max-width: 81.775%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  opacity: 0;
  animation: fadeIn 0.3s 3s ease-out forwards;
}

.bottom-dotted-lines svg {
  position: absolute;
  bottom: 0;
  left: -0.05%;
  right: -0.05%;
  top: 0;
  display: block;
  width: auto;
  height: 100%;
  transform: rotate(180deg);
}

.bottom-dotted-lines path {
  animation: dash2 1s linear infinite;
}


/* Results section */
.results-bg {
  display: block;
  position: relative;
  max-width: 63.5%;
  margin: 0 auto;
}

.results-bg:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: -5px;
  background: rgba(230, 105, 230, 0.5);
  border-radius: 32px;
  box-shadow: 0px 4px 26px 0px rgba(230, 105, 230, 0.5);
  z-index: 0;
  opacity: 0;
  animation: fadeIn 0.3s 3s ease-out forwards;
}

.results {
  position: relative;
  width: 100%;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
  display: flex;
  gap: 30px;
  justify-content: center;
  padding: 24px;
  border-radius: 32px;
  border: 1px solid #fde0ff;
  margin: 0;
  opacity: 0;
  animation: fadeInUp 0.5s 3s ease-out forwards;
}

.result-card {
  background: linear-gradient(to bottom, #f379f3, #c55ac5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 26px 24px;
  position: relative;
  border-radius: 22px;
  width: 213px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.result-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.result-title {
  font-family: var(--fonts-inter-tight);
  font-weight: 900;
  line-height: 1;
  color: #feefff;
  font-size: 24px;
  text-align: center;
  flex-shrink: 0;
}

.result-description {
  font-weight: 400;
  line-height: 1.2;
  color: #fde0ff;
  font-size: 15px;
  text-align: center;
  width: 165px;
  flex-shrink: 0;
}

.mobile-line {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mobile-gradient-lines {
  display: block;
  width: 30px;
}

.mobile-gradient-lines path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: growPathReverse 1s 1.5s ease-in-out forwards;
}

.mobile-dotted-lines {
  display: block;
  width: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
}

.mobile-dotted-lines path {
  animation: dash2 1s linear infinite;
}


@media (max-width: 1439px) {
  .flow-container {width: 100%;}

  .top-gradient-lines, .bottom-gradient-lines {max-width: 84%;}
  .top-gradient-lines svg, .bottom-gradient-lines svg {width: 100%; left: 0px; right: auto;}
  .top-dotted-lines, .bottom-dotted-lines {max-width: 82%;}
  .top-dotted-lines svg, .bottom-dotted-lines svg {width: 100%; left: 0px; right: auto;}

  .channels {gap: 25px;}
  .channel-card {width: 203px;}

  .results {gap: 25px;}
  .result-card {width: 203px;}
}

@media (max-width: 1199px) {
  .flow-container {margin: 20px 0 0;}

  .top-gradient-lines, .bottom-gradient-lines {height: 80px;}
  .top-dotted-lines, .bottom-dotted-lines {height: 80px;}

  .channels {gap: 10px;}
  .channel-card {width: calc(20% - 8px); padding: 24px 14px;}
  .channel-card:before {bottom: -10px;}
  .channel-description {width: 100%;}
  .channel-description.email, .channel-description.brands {width: 100%;}
  .channel-description.display-wide {width: 100%;}

  .results-bg {max-width: 70%;}
  .results {gap: 10px;}
  .result-card {width: calc(33.33% - 6px); padding: 16px 14px;}
  .result-description {width: 100%;}
}

@media (max-width: 991px) {

  .top-gradient-lines, .bottom-gradient-lines {height: 60px;}
  .top-dotted-lines, .bottom-dotted-lines {height: 60px;}

  .channel-card {padding: 14px 10px;}
  .channel-title {font-size: 18px;}
  .channel-description {font-size: 12px;}

  .results {padding: 18px;}
  .result-card {padding: 14px 10px;}
  .result-title {font-size: 18px;}
  .result-description {font-size: 12px;}
}

@media (max-width: 767px) {
  .offer-wrapper {width: 100%; height: 77px; margin-bottom: 24px;}
  .offer-glow, .offer-box {border-radius: 20px;}
  .offer-text {top: 0; font-size: 24px; line-height: 70px;}
  .offer-text br {display: none;}

  .mobile-line {display: block;}

  .top-lines, .bottom-lines {display: none;}

  .channels {gap: 16px; flex-wrap: wrap; margin-bottom: 24px;}
  .channel-card {flex-wrap: wrap; flex-direction: initial; justify-content: flex-start; text-align: left; column-gap: 12px; row-gap: 8px; width: 100%; padding: 24px; border-radius: 24px;}
  .channel-card::before {bottom: -5px; border-radius: 24px;}
  .channel-icon {display: block; width: 24px; height: 24px;}
  .channel-title {width: auto; font-size: 20px;}
  .channel-description {font-size: 14px; text-align: left;}

  .results-bg {max-width: 100%;}
  .results {padding: 24px; flex-wrap: wrap; gap: 16px;}
  .result-card {flex-wrap: wrap; flex-direction: initial; justify-content: flex-start; text-align: left; column-gap: 12px; row-gap: 8px; width: 100%; padding: 24px; border-radius: 24px;}
  .result-icon {display: block; width: 24px; height: 24px;}
  .result-title {width: auto; font-size: 20px;}
  .result-description {font-size: 14px; text-align: left;}

}

@media (max-width: 567px) {
}

@media (max-width: 413px) {
}