/* Hero commerciale della Home: slider a tutto schermo con scene reali del sistema. */
.home-stage {
   position: relative;
   overflow: hidden;
   min-height: 640px;
   height: calc(100vh - 90px);
   max-height: 860px;
   color: #fff;
   background: #06102d;
}

.home-stage .swiper-container,
.home-stage .swiper-slide {
   height: 100%;
}

.home-stage-slide {
   position: relative;
   overflow: hidden;
}

.home-stage-bg {
   position: absolute;
   inset: 0;
   background-position: var(--home-stage-pos, center);
   background-size: var(--home-stage-size, cover);
   transform: scale(1.08);
   transition: transform 7s ease-out;
}

.swiper-slide-active .home-stage-bg {
   transform: scale(1);
}

/* Velo nei colori del sito: leggibilita del testo senza spegnere la foto. */
.home-stage-slide::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
      linear-gradient(90deg, rgba(6,16,45,.92) 0%, rgba(14,24,72,.74) 32%, rgba(40,20,100,.22) 58%, rgba(6,16,45,0) 100%),
      linear-gradient(0deg, rgba(6,16,45,.7) 0%, rgba(6,16,45,0) 34%);
}

.home-stage-device {
   position: absolute;
   z-index: 2;
   right: 7%;
   bottom: 10%;
   width: min(25vw, 300px);
   filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
   transform: translateY(0);
   transition: opacity .8s ease .5s, transform .9s ease .5s;
}

.home-stage.is-ready .home-stage-device {
   opacity: 0;
   transform: translateY(40px) rotate(3deg);
}

.home-stage-device.is-card {
   right: 4%;
   bottom: 14%;
   width: min(30vw, 430px);
   border-radius: 12px;
   border: 6px solid rgba(255,255,255,.9);
}

.home-stage.is-ready .home-stage-device.is-card {
   transform: translateY(40px) rotate(-2deg);
}

.home-stage.is-ready .swiper-slide-active .home-stage-device {
   opacity: 1;
   transform: translateY(0) rotate(0);
}

.home-stage-content {
   position: absolute;
   z-index: 3;
   inset: 0;
   display: flex;
   align-items: flex-start;
   padding-top: clamp(60px, 11vh, 120px);
   pointer-events: none;
}

.home-stage-content > .container {
   width: 100%;
}

.home-stage-copy {
   max-width: 640px;
   pointer-events: auto;
}

.home-stage-tag {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 8px 14px;
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
   border: 1px solid rgba(255,255,255,.28);
   border-radius: 999px;
   background: rgba(255,255,255,.1);
   backdrop-filter: blur(4px);
}

.home-stage-tag i {
   color: #ef19bd;
   font-size: 8px;
}

.home-stage-title {
   margin: 20px 0 16px;
   color: #fff;
   font-size: clamp(38px, 5vw, 68px);
   line-height: 1.03;
   letter-spacing: -.035em;
}

.home-stage-text {
   max-width: 560px;
   color: rgba(255,255,255,.84);
   font-size: 19px;
   line-height: 1.65;
}

/* Le animazioni partono solo con lo slider attivo: senza script il testo resta visibile. */
.home-stage.is-ready .home-stage-slide .home-stage-tag,
.home-stage.is-ready .home-stage-slide .home-stage-title,
.home-stage.is-ready .home-stage-slide .home-stage-text {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .6s ease, transform .6s ease;
}

.home-stage.is-ready .swiper-slide-active .home-stage-tag {
   opacity: 1;
   transform: none;
   transition-delay: .15s;
}

.home-stage.is-ready .swiper-slide-active .home-stage-title {
   opacity: 1;
   transform: none;
   transition-delay: .3s;
}

.home-stage.is-ready .swiper-slide-active .home-stage-text {
   opacity: 1;
   transform: none;
   transition-delay: .45s;
}

/* Invito alla prova: fisso sopra le slide, sempre visibile. */
.home-stage-claim {
   margin: 0 0 14px;
   color: rgba(255,255,255,.78);
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .12em;
   line-height: 1.4;
   text-transform: uppercase;
}

.home-stage-cta {
   position: absolute;
   z-index: 4;
   left: 0;
   right: 0;
   bottom: 84px;
   pointer-events: none;
}

.home-stage-cta .container > div {
   pointer-events: auto;
}

.home-stage-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.home-stage-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 56px;
   padding: 15px 26px;
   color: #fff;
   font-size: 17px;
   font-weight: 800;
   border-radius: 8px;
   background: linear-gradient(135deg, #7417cb, #ef19bd);
   box-shadow: 0 14px 34px rgba(239,25,189,.35);
   transition: transform .2s ease;
}

.home-stage-btn:hover {
   color: #fff;
   transform: translateY(-2px);
}

.home-stage-btn-ghost {
   color: #fff;
   background: rgba(255,255,255,.08);
   border: 1px solid rgba(255,255,255,.4);
   box-shadow: none;
   backdrop-filter: blur(4px);
}

.home-stage-trust {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
   margin: 16px 0 0;
   padding: 0;
   list-style: none;
   color: rgba(255,255,255,.86);
   font-size: 14px;
   font-weight: 600;
}

.home-stage-trust i {
   margin-right: 6px;
   color: #51d69a;
}

/* Navigazione: una pillola per scena con nome e barra di avanzamento. */
.home-stage-nav {
   position: absolute;
   z-index: 5;
   left: 0;
   right: 0;
   bottom: 0;
   border-top: 1px solid rgba(255,255,255,.12);
   background: rgba(6,16,45,.55);
   backdrop-filter: blur(8px);
}

.home-stage-nav ul {
   display: flex;
   gap: 4px;
   margin: 0;
   padding: 0;
   list-style: none;
   overflow-x: auto;
   scrollbar-width: none;
}

.home-stage-nav button {
   position: relative;
   flex: 1 0 auto;
   min-width: 120px;
   padding: 18px 12px 20px;
   color: rgba(255,255,255,.6);
   font-size: 13px;
   font-weight: 700;
   text-align: left;
   background: none;
   border: 0;
   cursor: pointer;
}

.home-stage-nav button::before {
   content: "";
   position: absolute;
   left: 12px;
   right: 12px;
   top: 0;
   height: 3px;
   background: rgba(255,255,255,.18);
}

.home-stage-nav button span {
   position: absolute;
   left: 12px;
   top: 0;
   height: 3px;
   width: 0;
   background: linear-gradient(90deg, #7417cb, #ef19bd);
}

.home-stage-nav button.is-active {
   color: #fff;
}

.home-stage-nav button.is-active span {
   width: calc(100% - 24px);
   transition: width var(--home-stage-delay, 6500ms) linear;
}

.home-stage-nav button.is-done span {
   width: calc(100% - 24px);
}

.home-stage-paused .home-stage-nav button.is-active span {
   transition: none;
}

.home-stage-lang {
   position: absolute;
   z-index: 6;
   top: 20px;
   right: 20px;
   color: rgba(255,255,255,.85);
   font-size: 13px;
   font-weight: 700;
}

.home-stage-lang:hover {
   color: #fff;
}

@media (max-width: 991px) {
   .home-stage {
      height: auto;
      min-height: 0;
      max-height: none;
   }

   .home-stage .swiper-container {
      height: 560px;
   }

   .home-stage-slide::after {
      background: linear-gradient(0deg, rgba(6,16,45,.96) 0%, rgba(14,24,72,.8) 48%, rgba(6,16,45,.25) 100%);
   }

   .home-stage-content {
      align-items: flex-end;
      padding-bottom: 40px;
   }

   .home-stage-text {
      font-size: 16px;
   }

   .home-stage-device {
      display: none;
   }

   .home-stage-cta {
      position: relative;
      bottom: auto;
      padding: 24px 0 26px;
      background: #06102d;
   }

   .home-stage-nav {
      position: relative;
   }
}

@media (max-width: 575px) {
   .home-stage .swiper-container {
      height: 520px;
   }

   .home-stage-title {
      font-size: 34px;
   }

   .home-stage-btn {
      width: 100%;
      justify-content: center;
   }
}

@media (prefers-reduced-motion: reduce) {
   .home-stage-bg,
   .home-stage-device,
   .home-stage-slide .home-stage-tag,
   .home-stage-slide .home-stage-title,
   .home-stage-slide .home-stage-text {
      transition: none;
   }
}