/* Homepage first slide only; content geometry and mode cards remain unchanged. */
.page-home .banner .item.fecify-saas-hero {
  position: relative;
  isolation: isolate;
  /* Clip decoration without creating a focus-scrollable inner viewport. */
  overflow: clip;
  box-sizing: border-box;
  color: #fff;
  background: #1d63cf;
}
.page-home .banner .item.hero--fancy-bg {
  /* Clear azure reading area; fresh cyan light is weighted to the right. */
  background: linear-gradient(112deg, #1d63cf 0%, #2671dd 45%, #167ebd 74%, #117e98 100%);
}
.page-home .banner .hero--fancy-bg::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  inset: -30% -15% -25% 38%;
  background:
    radial-gradient(ellipse at 52% 42%, rgb(79 184 255 / 30%), transparent 58%),
    radial-gradient(ellipse at 82% 62%, rgb(66 224 213 / 24%), transparent 56%);
  transform: translate3d(0, 0, 0) scale(1);
  opacity: .85;
  animation: fecify-ambient-glow 20s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.page-home .banner .hero--fancy-bg::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 130%;
  height: 68%;
  left: -10%;
  bottom: -49%;
  border-radius: 50%;
  border-top: 1px solid rgb(176 232 255 / 30%);
  background: linear-gradient(180deg, rgb(106 206 255 / 20%), rgb(81 222 210 / 7%) 75%);
  transform: translate3d(0, 0, 0) rotate(-8deg);
  animation: fecify-ambient-horizon 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.page-home .banner .hero--fancy-bg > .hero-ambient-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: .09;
  background-image:
    linear-gradient(rgb(190 235 255 / 52%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(190 235 255 / 52%) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 85% 48%, #000, transparent 66%);
  mask-image: radial-gradient(ellipse at 85% 48%, #000, transparent 66%);
}
.page-home .banner .hero--fancy-bg.swiper-slide-active::before,
.page-home .banner .hero--fancy-bg.swiper-slide-active::after { animation-play-state: running; }
@keyframes fecify-ambient-glow {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  to { transform: translate3d(-18px, 12px, 0) scale(1.035); opacity: 1; }
}
@keyframes fecify-ambient-horizon {
  from { transform: translate3d(0, 0, 0) rotate(-8deg); opacity: .65; }
  to { transform: translate3d(0, -10px, 0) rotate(-6deg); opacity: .95; }
}

.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 / 45%); background: rgb(14 56 126 / 28%); }
.fecify-saas-hero__mode--cloud { border-left-color: #b7efff; background: rgb(14 56 126 / 18%); }
.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) {
  /* Two inexpensive static layers on phones: base gradient + one soft glow. */
  .page-home .banner .item.hero--fancy-bg {
    background: linear-gradient(155deg, #1d63cf 0%, #2474d6 68%, #117e98 100%);
  }
  .page-home .banner .hero--fancy-bg::before {
    inset: 15% -35% -15% 0;
    background: radial-gradient(ellipse at 76% 62%, rgb(83 211 239 / 20%), transparent 64%);
    animation: none;
    transform: none;
    opacity: .8;
  }
  .page-home .banner .hero--fancy-bg::after,
  .page-home .banner .hero--fancy-bg > .hero-ambient-grid { display: none; }
  .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) {
  .page-home .banner .hero--fancy-bg::before {
    animation: none;
    transform: none;
    opacity: .85;
  }
  .page-home .banner .hero--fancy-bg::after {
    animation: none;
    transform: rotate(-8deg);
    opacity: .8;
  }
}