/* SaaS-specific background and comparison; shared geometry is in home-hero.css. */
.page-home .banner .item.fecify-saas-hero {
  --fecify-hero-travel: 90px;
  position: relative;
  isolation: isolate;
  /* Clip decoration without creating a focus-scrollable inner viewport. */
  overflow: clip;
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(112deg, #124ba9 0%, #255bd5 48%, #5741c9 100%);
}
.fecify-saas-hero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  left: 60%;
  top: -50%;
  width: 420px;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgb(143 190 255 / 26%) 38%, rgb(193 167 255 / 30%) 62%, transparent);
  animation: fecify-hero-sweep 3s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.fecify-saas-hero.swiper-slide-active::before { animation-play-state: running; }
@keyframes fecify-hero-sweep {
  from { transform: translate3d(calc(-1 * var(--fecify-hero-travel)), 0, 0) skewX(-24deg); }
  to { transform: translate3d(var(--fecify-hero-travel), 0, 0) skewX(-24deg); }
}

.fecify-saas-hero__brand { position: absolute; top: -38px; margin: 0; font-size: 18px; line-height: 1.5; color: #dce7ff; }

.fecify-saas-hero__modes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fecify-saas-hero__mode { padding: 18px 22px; border-left: 2px solid rgb(255 255 255 / 38%); background: rgb(12 34 100 / 16%); }
.fecify-saas-hero__mode--cloud { border-left-color: #b8d7ff; background: rgb(255 255 255 / 12%); }
.fecify-saas-hero .fecify-saas-hero__mode h3 { margin: 0 0 4px; color: #fff; font-size: 23px; line-height: 1.4; font-weight: 600; }
.fecify-saas-hero__mode-label { margin: 0 0 8px; color: #e1ebff; font-size: 16px; line-height: 1.5; }
.fecify-saas-hero__mode-description { margin: 0; color: #f1f4ff; font-size: 15px; line-height: 1.6; }

@media (max-width: 900px) {

  .fecify-saas-hero__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 767px) {
  .page-home .banner .item.fecify-saas-hero { --fecify-hero-travel: 45px;  }

  .fecify-saas-hero::before { left: 55%; width: 260px; }
  .fecify-saas-hero__brand { top: -32px; font-size: 16px; }

  .fecify-saas-hero__modes { gap: 12px; }
  .fecify-saas-hero__mode { padding: 12px; }
  .fecify-saas-hero .fecify-saas-hero__mode h3 { font-size: 18px; }
  .fecify-saas-hero__mode-label { font-size: 13px; }
  .fecify-saas-hero__mode-description { font-size: 14px; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  .fecify-saas-hero::before { animation: none; transform: skewX(-24deg); }

}