/* No-purple override */
:root {
  --lavender: #225ae3;
  --soft-lavender: #f7faff;
  --softest-lavender: #eef6ff;
  --vaa-accent: #f97316; /* coral */
}

/* ===============================
   Header overrides
   =============================== */

/* Header: compact spacing after reducing nav items (ex-Webflow) */
.nav-menu--compact {
  gap: 3rem;
}

/* Coming Soon Badge */
.nav-coming-soon {
  cursor: not-allowed;
  opacity: 0.8;
  pointer-events: none;
}

.nav-icon-item-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coming-soon-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--lavender);
  color: white;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* option */
.nav-coming-soon:hover {
  opacity: 0.5;
}

/* ===============================
   Footer overrides
   =============================== */

footer .footer-logo-img {
  max-width: 10rem;
  margin-left: -0.4rem;
}

footer .footer-links-legal {
  justify-content: flex-start;
  gap: 0.8rem;
}

/* Integration */

.integration-mobile {
  display: none;
}

.integration-lottie {
  width: 100%;
  aspect-ratio: 1710 / 540;
  max-width: 100%;
}

@media (max-width: 768px) {
  .integration-desktop {
    display: none;
  }

  .integration-mobile {
    display: block;
  }

  .integration-lottie {
    display: none;
  }
}

/* Brands marquee */

.brands {
  overflow: hidden;
}

.brands-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.brands-wrapper {
  display: flex;
  gap: 2rem;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =========================
   Social proof scroll
   ========================= */

.scroll_up {
  animation: scrollUp 45s linear infinite;
}

.scroll_down {
  animation: scrollDown 45s linear infinite;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1120px);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-1120px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Pause on hover */
.social_proof_column:hover {
  animation-play-state: paused;
}

/* Tablet and below */
@media (max-width: 991px) {
  .scroll_up {
    animation: scrollRight 45s linear infinite;
  }

  .scroll_down {
    animation: scrollLeft 45s linear infinite;
  }

  @keyframes scrollRight {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-1000px);
    }
  }

  @keyframes scrollLeft {
    0% {
      transform: translateX(-1000px);
    }
    100% {
      transform: translateX(0);
    }
  }
}

.social_proof_badge {
  background-color: var(--lavender); /* дефолт */
}

/* variants */
.social_proof_badge.is-lavender {
  background-color: var(--lavender);
}

.social_proof_badge.is-highlight {
  background-color: var(--highlighter);
}

.social_proof_badge.is-gray {
  background-color: var(--gray-tint);
}

.social_proof_badge.is-flamingo {
  background-color: var(--color);
}

/* add accent to hero */

.emphasis-overhaul {
  color: var(--vaa-accent);
}

/* Recolor the navigation icons to blue (#225ae3) */

.icon-link-recolor-blue {
  filter: brightness(0) saturate(100%) invert(29%) sepia(85%) saturate(1767%)
    hue-rotate(208deg) brightness(93%) contrast(92%);
}

.icon-link-recolor-coral {
  filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(4528%)
    hue-rotate(3deg) brightness(96%) contrast(87%);
}

/* Recolor the text scroll in the index) */

.text_scroll {
  background-image: linear-gradient(90deg, #225ae3, var(--black));
}

/* Demo Form Styles */
.demo-form-wrapper {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 32px rgba(34, 90, 227, 0.1);
}

.demo-form .mktoFormRow {
  margin-bottom: 1.25rem;
}

.demo-form .mktoLabel {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.demo-form .mktoAsterix {
  color: #e74c3c;
  margin-left: 2px;
}

.demo-form .mktoField {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  color: #1a1a1a;
  transition: border-color 0.2s;
}

.demo-form .mktoField:focus {
  outline: none;
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(34, 90, 227, 0.1);
}

.demo-form .mktoField::placeholder {
  color: #959597;
}

.demo-form .mktoButton {
  width: 100%;
  background: white;
  border: 1px solid var(--lavender);
  border-radius: 100vw;
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lavender);
  font-family: Inter, sans-serif;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0px 4px 32px rgba(34, 90, 227, 0.3);
  margin-top: 0.5rem;
}

.demo-form .mktoButton:hover {
  background: var(--lavender);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0px 8px 40px rgba(34, 90, 227, 0.4);
}

.demo-form .mktoButton:active {
  transform: translateY(0);
}

/* Privacy Notice */
.privacy-notice {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e3e3e3;
}

.privacy-text {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
  margin: 0;
}

.privacy-text a {
  color: var(--lavender);
  text-decoration: underline;
}

.privacy-text a:hover {
  color: var(--vaa-accent);
}

/* Hero Demo Layout */
.hero--demo-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  /* padding: 4rem 0; */
}

@media (max-width: 991px) {
  .hero--demo-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Background decoration */
.hero--demo-bg-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(34, 90, 227, 0.05) 0%,
    rgba(149, 67, 246, 0.05) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Success Message */
.demo-success-message {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #10b981;
  border-radius: 16px;
}

.success-icon {
  width: 80px;
  height: 80px;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  margin: 0 auto 1.5rem;
  animation: checkmarkPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 0.75rem;
}

.success-text {
  color: #047857;
  line-height: 1.6;
  margin: 0;
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

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

/* faq-animations.css */
.faq_accordion {
  transition: all 0.3s ease;
}

.faq_body {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq_icon {
  transition: transform 0.3s ease;
}

.faq_heading {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.faq_heading:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.faq_heading:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* .split-lines .line {
  color: transparent;
  position: relative;
  background-color: #f1f1ff;
  background-image: linear-gradient(
    90deg,
    #225ae3,
    #225ae3 var(--line-width, 0%),
    hsla(0, 0%, 0%, 0) var(--line-width, 0%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  transition: --line-width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;

  --line-width: 0%;
} */

.split-lines .line {
  color: #225ae3 !important;
}

.split-lines .word {
  color: #225ae3 !important;
}

.split-lines .line::selection {
  background-color: transparent;
}

.split-lines .word {
  background-color: transparent;
}