.primary-heading,
.secondary-heading,
.faq-heading {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );

  font-size: 2.25rem;
  font-weight: 600;
  line-height: 3.125rem;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.faq-heading {
  font-size: 3rem;
  line-height: 3rem;
}

.violet-text-gradient {
  background: linear-gradient(90deg, #8972ff 37.44%, #d1c8ff 61.42%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.section-heading {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );

  font-size: 2.25rem;
  font-weight: 600;
  line-height: 3.125rem;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.primary-button {
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  height: 44px;
  color: #ffffff;
  position: relative;
  white-space: nowrap;
  background: linear-gradient(270deg, #6b4eff 0%, #5533ff 100%);
}

.primary-button:hover {
  box-shadow: 0px 4px 40px 0px rgba(107, 78, 255, 0.6);
}

.secondary-button {
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  width: 100%;
  height: 44px;
  color: #ffffff;
  position: relative;
  background: radial-gradient(
    89.36% 183.33% at 37.06% -14.58%,
    rgba(255, 255, 255, 0.112) 0%,
    rgba(255, 255, 255, 0.024) 100%
  );
}

.secondary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background:
    radial-gradient(
      106.37% 282.8% at -3.82% -3.12%,
      rgba(21, 21, 21, 0.6) 0%,
      rgba(21, 21, 21, 0) 100%
    ),
    radial-gradient(
      131.07% 260.49% at 0% 0%,
      #6b4eff 0%,
      rgba(107, 78, 255, 0) 100%
    ),
    radial-gradient(
      98.54% 262.92% at 1.46% 0%,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.secondary-button:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0px 1px 40px;
  background: none;
}

.card-gradient-primary {
  background: radial-gradient(
    100% 266.55% at 0% 1.97%,
    rgba(255, 255, 255, 0.084) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  position: relative;
}

.card-gradient-primary::before {
  content: '';
  position: absolute;
  width: 100%;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
      98.54% 262.92% at 0% 0%,
      #151515 0%,
      rgba(21, 21, 21, 0) 100%
    ),
    radial-gradient(
      115% 266.82% at 0% 2.79%,
      #6b4eff 0%,
      rgba(107, 78, 255, 0) 100%
    ),
    radial-gradient(
      98.54% 262.92% at 1.46% 0%,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    );
  backdrop-filter: blur(21px);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.dark-lighter-button {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.45) 3.84%,
    #373445 103.86%
  );
  position: relative;
  width: 100%;
  height: 1.5rem;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  color: #b8b4c5;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
}

.dark-lighter-button::before {
  content: '';
  position: absolute;
  width: 100%;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    164.98deg,
    #373445 -10.78%,
    rgba(55, 52, 69, 0.01) 130.84%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.card-gradient-badge {
  background: radial-gradient(
    89.36% 183.33% at 37.06% -14.58%,
    rgba(255, 255, 255, 0.084) 0%,
    rgba(255, 255, 255, 0.018) 100%
  );

  position: relative;
}

.card-gradient-badge::before {
  content: '';
  position: absolute;
  width: 100%;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.8) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.light-purple-gradient {
  position: relative;
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.17) 3.84%,
    rgba(55, 52, 69, 0.46) 103.86%
  );
}

.light-purple-gradient::before {
  content: '';
  position: absolute;
  width: 100%;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    164.98deg,
    #373445 -10.78%,
    rgba(55, 52, 69, 0) 130.84%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.related-company {
  width: 134px;
  min-width: 134px;
  height: 40px;
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.white-text-gradient {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.review-card {
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  background: radial-gradient(
    89.36% 183.33% at 37.06% -14.58%,
    rgba(255, 255, 255, 0.0714) 0%,
    rgba(255, 255, 255, 0.0153) 100%
  );
}

.review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
      98.54% 262.92% at 0% 0%,
      #151515 0%,
      rgba(21, 21, 21, 0) 100%
    ),
    radial-gradient(
      115% 266.82% at 0% 2.79%,
      #6b4eff 0%,
      rgba(107, 78, 255, 0) 100%
    ),
    radial-gradient(
      98.54% 262.92% at 1.46% 0%,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Testimonial Slide Animations */
.testimonial-slide {
  transition:
    opacity 0.5s,
    z-index 0s 0.5s;
  z-index: 0;
}

.testimonial-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transition:
    opacity 0.5s,
    z-index 0s;
}

.testimonial-slide.animate-in {
  animation:
    slide-in-from-right 0.5s forwards,
    fade-in 0.5s forwards;
  z-index: 2;
}
.testimonial-slide.animate-out {
  animation:
    slide-out-to-left 0.5s forwards,
    fade-out 0.5s forwards;
  z-index: 1;
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(120px);
    opacity: 0.5;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-120px);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#right-left-cards {
  animation: right-left 60s infinite linear;
}

@keyframes right-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-66.67%);
  }
}

.testimonial-card {
  position: relative;
  background: radial-gradient(
    100% 266.55% at 0% 1.97%,
    rgba(255, 255, 255, 0.084) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background:
    radial-gradient(
      98.54% 262.92% at 0% 0%,
      #151515 0%,
      rgba(21, 21, 21, 0) 100%
    ),
    radial-gradient(
      100% 266.82% at 0% 2.79%,
      #6b4eff 0%,
      rgba(107, 78, 255, 0) 100%
    ),
    radial-gradient(
      98.54% 262.92% at 1.46% 0%,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.dark-gradient-card {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.0612) 3.84%,
    rgba(55, 52, 69, 0.1656) 103.86%
  );

  position: relative;
}

.dark-gradient-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background: linear-gradient(
    164.98deg,
    #373445 -10.78%,
    rgba(55, 52, 69, 0) 130.84%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.outer-border {
  background: radial-gradient(
    89.36% 183.33% at 37.06% -14.58%,
    rgba(255, 255, 255, 0.0504) 0%,
    rgba(255, 255, 255, 0.0108) 100%
  );

  position: relative;
}

.inner-border {
  position: relative;
}

.outer-border::before,
.inner-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.71) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.inner-border::before {
  padding: 0 0 1px 1px;
  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        #151515 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.outer-inner-border-overshadow {
  background: linear-gradient(
    180.24deg,
    #040018 -3.96%,
    rgba(4, 0, 24, 0) 128.05%
  );
}

.pill-button {
  background: radial-gradient(
    89.36% 183.33% at 37.06% -14.58%,
    rgba(255, 255, 255, 0.084) 0%,
    rgba(255, 255, 255, 0.018) 100%
  );
  border-radius: 24px;
  font-weight: 500;
  color: #8972ff;
  position: relative;
  padding: 4px 8px;
}

.pill-button::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.8) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.accordion .accordion-item[aria-expanded='true'] .accordion-content {
  max-height: 100vh;
}

.accordion .accordion-item[aria-expanded='false'] .accordion-content {
  max-height: 0;
}

.accordion .accordion-item[aria-expanded='true'] .accordion-icon {
  transform: rotate(45deg);
  color: white;
}

.accordion .accordion-item[aria-expanded='true'] .accordion-content {
  transition: all 3000ms cubic-bezier(0.33, 0.76, 0.59, 1);
}
.accordion
  .accordion-item[aria-expanded='true']
  .accordion-content#how-does-the-credit-system-work {
  transition: all 1500ms cubic-bezier(0.33, 0.76, 0.59, 1);
}
.accordion
  .accordion-item[aria-expanded='true']
  .accordion-content#how-does-the-pricing-work {
  transition: all 2000ms cubic-bezier(0.33, 0.76, 0.59, 1);
}

.accordion .accordion-item[aria-expanded='false'] .accordion-content {
  transition: all 400ms cubic-bezier(0.33, 0.76, 0.59, 1);
}

.faq-action-icon {
  background: radial-gradient(
    108.62% 296.06% at 0% 1.97%,
    rgba(255, 255, 255, 0.1218) 0%,
    rgba(255, 255, 255, 0.0696) 100%
  );
  position: relative;
}

.faq-action-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
        100% 266.82% at 0% 2.79%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 0% 0%,
        #151515 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.section-card-heading {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.25rem;
  text-align: left;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.research-workflow-li,
.verification-point {
  background: linear-gradient(
    182.26deg,
    #ffffff 32.82%,
    rgba(255, 255, 255, 0.66) 110.13%
  );
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

.research-workflow-li {
  cursor: pointer !important;
}

.active-research-workflow-li,
.active-verification-point {
  background: linear-gradient(90deg, #8972ff 2.78%, #b2a3ff 35.76%);
}

.track-line {
  background: linear-gradient(
    108.13deg,
    rgba(4, 0, 24, 0.89) 13.19%,
    rgba(107, 78, 255, 0.6) 61.46%,
    #6b4eff 100%
  );
}

@media screen and (min-width: 640px) {
  .primary-heading {
    font-size: 3rem;
    line-height: 4rem;
  }

  .secondary-heading,
  .section-heading {
    font-size: 2.75rem;
    line-height: 3.75rem;
  }

  .section-card-heading {
    font-size: 1.5rem;
    line-height: 100%;
  }

  .faq-heading {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}

@media screen and (min-width: 768px) {
  .section-heading,
  .secondary-heading {
    font-size: 3rem;
    line-height: 4rem;
  }
}

@media screen and (min-width: 1024px) {
  .primary-heading {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }

  .faq-heading {
    font-size: 4rem;
    line-height: 5rem;
  }
}

@media screen and (min-width: 1280px) {
  .section-card-heading {
    font-size: 1.75rem;
    line-height: 100%;
  }
  .section-heading {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
}

@media screen and (min-width: 1024px) and (min-height: 1080px) {
  #high-quality-research-section {
    margin-top: 68px;
  }
}

@media screen and (min-width: 1024px) and (min-height: 920px) {
  #participant-verification-section {
    margin-top: 68px;
  }

  #research-workflow {
    margin-top: 68px;
  }
}