/* Zunely product accents. Load after the existing landing styles.
   Color-only overrides: geometry, timing, media and brand artwork stay intact. */

#research,
#moodboard,
#flows,
#export {
  --purple: #3979ef;
  --purple-soft: #e7efff;
}

#research .section-label,
#moodboard .section-label,
#flows .section-label {
  color: #245dbb;
  background-color: #e7efff;
}

#research .research-backdrop {
  background-image: radial-gradient(ellipse at 28% 28%, #d9e6fc 0%, #e7effd 32%, #eff3fb 54%, #f5f5f500 76%);
}

#flows .flows-backdrop {
  background-image: radial-gradient(ellipse at 72% 28%, #d9e6fc 0%, #e7effd 32%, #eff3fb 54%, #f5f5f500 76%);
}

#research .research-mockup {
  box-shadow: 0 16px 32px -16px #16346c38, 0 4px 10px #17171712;
}

#flows .flow-sequence {
  box-shadow: 0 16px 32px -16px #16346c38, 0 4px 10px #1717170a;
}

#research .research-page-scroll:focus-visible {
  outline-color: #3979ef;
}

#moodboard {
  background-color: #e7efff;
}

#moodboard .section-label {
  background-color: #d9e6fc;
}

#moodboard .guide-ready {
  color: #3979ef;
  background-color: #edf3fd;
}

#moodboard .guide-button-preview.secondary {
  color: #245dbb;
  background-color: #e7efff;
}

#moodboard #moodboard-beam-violet stop {
  stop-color: #3979ef;
}

#moodboard #moodboard-beam-white stop:not(:last-child) {
  stop-color: #e7efff;
}

#moodboard .beam-field {
  background-image: radial-gradient(ellipse at 100% 50%, #3979ef28 0%, #3979ef0e 38%, #3979ef00 74%);
}

#moodboard .beam-flight::before {
  background-image: radial-gradient(ellipse at 84% 50%, #76a7f5a6, #3979ef3d 36%, #3979ef00 76%);
}

#moodboard .beam-flight::after {
  background-image: linear-gradient(90deg, #3979ef00, #9bbcff 50%, #fff 96%);
  box-shadow: 0 0 4px #9bbcff, 0 0 12px #3979ef80;
}

#moodboard .beam-arrival {
  background-image: radial-gradient(ellipse at 100% 50%, #fff 0%, #e7efffad 9%, #92b4e875 26%, #3979ef24 48%, #3979ef00 72%);
}

#moodboard .beam-arrival::after {
  background-image: linear-gradient(#e7efff00, #fff 35%, #fff 65%, #e7efff00);
  box-shadow: 0 0 7px #a1c3ff, 0 0 18px #3979ef66;
}

#moodboard .moodboard-guide::before {
  background-image: linear-gradient(90deg, #3979ef16, #9bbcea0a 35%, #3979ef00 70%);
}

#moodboard .moodboard-guide::after {
  border-color: #98b8e7;
  background-image: radial-gradient(ellipse at 0% 50%, #b1ccf627, #3979ef00 42%);
  box-shadow: inset 1px 0 0 #f2f7ff;
}

#export .section-label,
#export .export-tabs > button[aria-current=step] .export-mobile-step {
  background-color: #17376c;
  color: #cedffc;
}

#export .export-tabs > button[aria-current=step] {
  border-left-color: #3979ef;
  border-bottom-color: #3979ef;
}

#export .export-tabs > button[aria-current=step] .icon {
  color: #adc8ff;
}

@media (max-width: 767px) {
  #research .research-backdrop,
  #flows .flows-backdrop {
    background-image: radial-gradient(ellipse at 22% 16%, #e7effd 0%, #eff3fb 48%, #f5f5f500 82%);
  }
}

@media (max-width: 760px) {
  #moodboard .moodboard-guide::before {
    background-image: linear-gradient(180deg, #3979ef16, #9bbcea0a 35%, #3979ef00 70%);
  }

  #moodboard .moodboard-guide::after {
    background-image: radial-gradient(ellipse at 50% 0%, #b1ccf627, #3979ef00 42%);
    box-shadow: inset 0 1px 0 #f2f7ff;
  }
}