/* Home-only adjustments; retain the existing section and tile geometry. */

/* Trusted-by logo strip, just below the hero: same look as ai-crm.html's brand marquee
   (rts-brand-area.area-2 in assets/flowbit/css/style.scoped.css) reproduced without pulling in
   that whole stylesheet. The logo list is duplicated in the markup and the animation runs
   exactly -50% so the loop is seamless and never has to "reset" mid-scroll; it never pauses,
   including on hover (no animation-play-state rule anywhere touches it). */
.home-trusted-by { background: #fff; padding: 50px 0; position: relative; z-index: 1; }
.home-trusted-by-inner { overflow: hidden; position: relative; z-index: 1; }
.home-trusted-by-inner::before, .home-trusted-by-inner::after { content: ""; position: absolute; z-index: 2; top: 0; height: 100%; width: 14%; pointer-events: none; }
.home-trusted-by-inner::before { left: 0; background: linear-gradient(270deg, rgba(255,255,255,0) 0%, #fff 100%); }
.home-trusted-by-inner::after { right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 100%); }
.home-trusted-by-desc { color: #1e0442; text-align: center; font-size: 22px; font-weight: 500; margin: 0 0 40px; }
.home-trusted-by-marquee { display: flex; align-items: center; width: max-content; will-change: transform; animation: home-trusted-by-scroll 24s linear infinite; }
.home-trusted-by-marquee:hover { animation-play-state: running; }
.home-trusted-by-logo { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 45px; border-right: 1px solid #e8e8e8; }
.home-trusted-by-logo img { height: 32px; width: auto; object-fit: contain; }
@keyframes home-trusted-by-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) { .home-trusted-by { padding: 32px 0; } .home-trusted-by-desc { font-size: 15px; margin-bottom: 24px; } .home-trusted-by-logo { padding: 0 24px; } .home-trusted-by-logo img { height: 22px; } }
@media (prefers-reduced-motion: reduce) { .home-trusted-by-marquee { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }
.as-integration-list .item img { width: 70%; height: 70%; object-fit: contain; }
@media (max-width: 1199px) {
  .as-integration-list .item img { width: 100%; height: 100%; }
}
.as-introduction-logo .xb-item--logo { transform: translate(-50%, 50%) scale(.8) !important; }
#how-it-works { scroll-margin-top: 100px; }
.home-video-testimonials { background: #160b2e; display: flex; flex-direction: column; }
.home-video-testimonials::before { display: none; }
.home-video-viewport { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: thin; }
.home-video-slide { height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; }
.home-video-slide a { color: #fff; font-size: 13px; text-align: center; padding: 8px; }
.home-video-controls { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 8px; color: #fff; font-size: 13px; }
.home-video-controls button { width: 32px; height: 32px; border: 1px solid #ffffff50; border-radius: 50%; background: transparent; color: #fff; }
.home-video-controls button:disabled { opacity: .35; }
.home-video-testimonials :focus-visible { outline: 3px solid #b69aff; outline-offset: -3px; }
.home-video-slide .home-video-thumbnail { position: relative; display: block; flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.home-video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.home-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; padding-left: 4px; border-radius: 50%; color: #fff; background: #6b22ddd9; box-shadow: 0 0 0 1px #ffffff70; font-size: 24px; }
.home-video-modal { position: fixed; inset: 0; margin: auto; width: min(440px, 92vw); max-width: 92vw; max-height: 92dvh; padding: 42px 12px 12px; border: 1px solid #ffffff40; border-radius: 16px; background: #160b2e; color: #fff; overflow: auto; }
.home-video-modal::backdrop { background: #080312cc; }
.home-video-modal iframe { display: block; width: 100%; height: min(68dvh, 680px); border: 0; }
.home-video-close { position: absolute; right: 10px; top: 4px; width: 36px; height: 36px; background: transparent; border: 0; color: #fff; font-size: 28px; }
.home-video-external { display: block; padding-top: 12px; text-align: center; color: #fff; font-size: 13px; }
.home-video-modal :focus-visible { outline: 3px solid #b69aff; outline-offset: 2px; }

/* Hero title was overflowing the viewport on Android widths (5 wrapped lines at 44px), forcing a
   scroll before the CTA/image were visible. Shrink it. */
@media (max-width: 767px) {
  .hero-area--three .xb-hero-content .sec-title .title { font-size: 32px; line-height: 1.2; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-area--three .xb-hero-content .sec-title .title { font-size: 36px; }
}

/* The single hero dashboard image inherited a two-image-layout's negative margin-left: -60px
   (meant for the overlapping .img/.img--2 desktop variant), pinning it off-center to the left. */
.hero-area--three .xb-hero-content .xb-item--img-single { margin-left: 0; }

/* Mobile-only swipeable carousel for the "Everything You Need in One CRM" feature grid.
   Desktop keeps the plain grid untouched; Swiper only takes over below 768px (see home-updates.js). */
@media (max-width: 767px) {
  .feature-swiper { position: relative; overflow: hidden; }
  /* Swiper is configured with custom wrapperClass/slideClass (feature-slide-track / feature-slide)
     instead of its own swiper-wrapper/swiper-slide, since those ship unconditional base rules
     (e.g. .swiper-slide { width: 100% }) in swiper.min.css that would squash the desktop grid too.
     The row this wrapper reuses also carries Bootstrap's .row (flex-wrap: wrap), which would
     otherwise beat Swiper's own flex layout and make the "carousel" wrap into a vertical stack. */
  .feature-swiper .feature-slide-track { display: flex; flex-wrap: nowrap; margin: 0; position: relative; }
  /* Drop the Bootstrap column gutter (12px each side) so the card fills the slide instead of
     looking small and inset; Swiper's own spaceBetween already provides the gap between cards. */
  .feature-swiper .feature-slide { flex-shrink: 0; height: auto; position: relative; padding-left: 0; padding-right: 0; }
  .feature-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
  .feature-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9cdf2;
    opacity: 1;
    cursor: pointer;
  }
  .feature-pagination .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    background: linear-gradient(90deg, #7b2ff7, #a855f7);
  }
}

/* Mobile-only swipeable carousel for the "Problems" cards (same technique as .feature-swiper
   above): custom wrapperClass/slideClass so swiper.min.css's unconditional base rules never
   touch the desktop three-column grid. Unlike .as-feature-inner, .as-problem-inner's children
   are direct CSS grid items (grid-template-columns: repeat(3,1fr)) with no pre-existing wrapper,
   so on desktop the injected .problem-slide-track wrapper must disappear from layout (display:
   contents) or it would collapse the grid to a single column. */
.problem-slide-track { display: contents; }
@media (max-width: 767px) {
  .problem-swiper { position: relative; overflow: hidden; }
  .problem-swiper .problem-slide-track { display: flex; flex-wrap: nowrap; margin: 0; position: relative; }
  .problem-swiper .problem-slide { flex-shrink: 0; height: auto; }
  .problem-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
  .problem-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9cdf2;
    opacity: 1;
    cursor: pointer;
  }
  .problem-pagination .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    background: linear-gradient(90deg, #7b2ff7, #a855f7);
  }
}

/* Hero dashboard image opens the demo video popup (same .popup-video handler as the demo button). */
.hero-video-trigger { position: relative; display: block; cursor: pointer; }
.hero-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 84px; height: 84px; padding-left: 4px; border-radius: 50%; background: #781afe; box-shadow: 0 0 0 10px rgba(120, 26, 254, .28), 0 12px 36px rgba(20, 5, 45, .5); transition: transform .25s, box-shadow .25s; }
.hero-video-trigger:hover .hero-video-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 16px rgba(120, 26, 254, .28), 0 12px 36px rgba(20, 5, 45, .5); }
@media (max-width: 767px) { .hero-video-play { width: 56px; height: 56px; } .hero-video-play svg { width: 22px; height: 22px; } }