/* Pagina "Automazioni AI per aziende di servizi": componenti propri, sopra servizio.css e campagne.css. Sfondi bianchi. */

/* 1. Apertura: video a tutta larghezza al posto della foto. Spazi su computer ridotti della metà (29/10). */
.sv-hero-top.cs-hero-top.au-hero-top { padding-bottom: clamp(40px, 4.6vw, 66px); }
.cs-hero-bg .au-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* 2. Il problema: titolo e sottotitolo centrati, le soluzioni nelle card */
.au-problem .sv-head > p { margin-top: 18px; }

/* 4. Che tipo di automazioni */
.au-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.au-type { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid #e6eaf1; box-shadow: 0 18px 40px -30px rgba(20,45,83,.45); }
.au-type-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; }
.au-type-ic--mail { background: #fff1e8; color: var(--orange-ink); }
.au-type-ic--bot { background: #eaf1fb; color: var(--navy); }
.au-type-ic--wa { background: #e9f8ef; color: #1b7a43; }
.au-type h3 { font-size: 28px; line-height: 1.08; letter-spacing: -.045em; }
.au-type p { color: #33456a; }

/* Gli strumenti che uso: striscia che scorre da sola */
.au-tools { margin-top: clamp(32px, 4.5vw, 52px); padding: 26px 0 30px; border-radius: 28px; background: #f2f5fa; }
.au-tools-title { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.au-tools-viewport { margin-top: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.au-tools-track { display: flex; width: max-content; animation: au-marquee 32s linear infinite; }
.au-tools:hover .au-tools-track { animation-play-state: paused; }
.au-tools-track ul { display: flex; gap: 16px; margin: 0; padding: 4px 16px 18px 0; list-style: none; }
.au-tool { display: flex; align-items: center; gap: 10px; height: 76px; padding: 0 30px; border-radius: 18px; background: #fff; border: 1px solid #e6eaf1; box-shadow: 0 10px 24px -18px rgba(20,45,83,.45); }
.au-tool img { display: block; width: auto; }
.au-tool span { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: #0d0d0d; }
@keyframes au-marquee { to { transform: translateX(-50%); } }

/* 5. Un contatto, dall'inizio alla fine: una linea arancione collega i quadrati e li accende uno dopo l'altro.
   Senza JavaScript o con il movimento ridotto si vede il percorso completo; l'animazione parte solo quando il percorso è in vista. */
.au-path-sec { padding: 0 clamp(12px, 2.2vw, 32px) clamp(72px, 9vw, 120px); }
.au-path { position: relative; overflow: hidden; isolation: isolate; max-width: 1376px; margin: 0 auto; padding: clamp(36px, 5.5vw, 84px) clamp(20px, 4vw, 64px); border-radius: 40px; color: #fff;
  background: radial-gradient(60% 70% at 55% -10%, rgba(255,102,0,.2) 0%, rgba(255,102,0,0) 60%), linear-gradient(160deg, #1d3b74 0%, #162e5e 55%, #0f2147 100%); }
.au-path-head { max-width: 760px; margin: 0 auto; text-align: center; }
.au-path-head h2 { font-size: clamp(40px, 5.5vw, 76px); line-height: 1; letter-spacing: -.06em; text-wrap: balance; }
.au-path-head h2 span { color: #ff6600; }
.au-path-head p { max-width: 620px; margin: 16px auto 0; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.86); }
.au-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.au-step { display: flex; flex-direction: column; gap: 18px; text-align: center; }
.au-step-line { display: flex; align-items: center; }
.au-seg { flex: 1 1 0; min-width: 0; height: 5px; background: rgba(255,255,255,.24); }
.au-seg-fill { display: block; height: 100%; border-radius: inherit; background: #ff6600; box-shadow: 0 0 14px rgba(255,102,0,.75); transform-origin: left center; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite; }
.au-seg--hide { visibility: hidden; }
.au-node { position: relative; display: grid; place-items: center; flex: none; width: 60px; height: 60px; box-sizing: border-box; border-radius: 16px; border: 2px solid rgba(255,255,255,.92); background: #2d4675; color: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.6); }
.au-node-on { position: absolute; inset: -2px; display: grid; place-items: center; border: 2px solid #fff; border-radius: inherit; background: #e8521a; }
.au-step-text { display: flex; flex-direction: column; gap: 6px; padding: 0 10px; }
.au-step-n { font-size: 24px; font-weight: 300; line-height: 1.1; color: rgba(255,255,255,.55); }
.au-step-text strong { font-size: 21px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.au-step-text span:last-child { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.72); }
/* Stato di partenza dell'animazione */
.au-path.is-anim .au-node-on { opacity: 0; }
.au-path.is-anim .au-step-text { opacity: .42; }
.au-path.is-anim .au-seg-fill { transform: scaleX(0); }
@keyframes au-n0 { 0%, 5.9% { opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1.1); } 10%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes au-t0 { 0%, 5.9% { opacity: .42; } 8%, 90% { opacity: 1; } 95%, 100% { opacity: .42; } }
.au-path.is-on .au-step:nth-child(1) .au-node-on { animation: au-n0 9s linear infinite; }
.au-path.is-on .au-step:nth-child(1) .au-step-text { animation: au-t0 9s linear infinite; }
@keyframes au-n1 { 0%, 20.9% { opacity: 0; transform: scale(.6); } 23% { opacity: 1; transform: scale(1.1); } 25%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes au-t1 { 0%, 20.9% { opacity: .42; } 23%, 90% { opacity: 1; } 95%, 100% { opacity: .42; } }
.au-path.is-on .au-step:nth-child(2) .au-node-on { animation: au-n1 9s linear infinite; }
.au-path.is-on .au-step:nth-child(2) .au-step-text { animation: au-t1 9s linear infinite; }
@keyframes au-n2 { 0%, 35.9% { opacity: 0; transform: scale(.6); } 38% { opacity: 1; transform: scale(1.1); } 40%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes au-t2 { 0%, 35.9% { opacity: .42; } 38%, 90% { opacity: 1; } 95%, 100% { opacity: .42; } }
.au-path.is-on .au-step:nth-child(3) .au-node-on { animation: au-n2 9s linear infinite; }
.au-path.is-on .au-step:nth-child(3) .au-step-text { animation: au-t2 9s linear infinite; }
@keyframes au-n3 { 0%, 50.9% { opacity: 0; transform: scale(.6); } 53% { opacity: 1; transform: scale(1.1); } 55%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes au-t3 { 0%, 50.9% { opacity: .42; } 53%, 90% { opacity: 1; } 95%, 100% { opacity: .42; } }
.au-path.is-on .au-step:nth-child(4) .au-node-on { animation: au-n3 9s linear infinite; }
.au-path.is-on .au-step:nth-child(4) .au-step-text { animation: au-t3 9s linear infinite; }
@keyframes au-n4 { 0%, 65.9% { opacity: 0; transform: scale(.6); } 68% { opacity: 1; transform: scale(1.1); } 70%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes au-t4 { 0%, 65.9% { opacity: .42; } 68%, 90% { opacity: 1; } 95%, 100% { opacity: .42; } }
.au-path.is-on .au-step:nth-child(5) .au-node-on { animation: au-n4 9s linear infinite; }
.au-path.is-on .au-step:nth-child(5) .au-step-text { animation: au-t4 9s linear infinite; }
@keyframes au-out0 { 0%, 6% { transform: scaleX(0); opacity: 1; } 13.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(1) .au-seg--out .au-seg-fill { animation-name: au-out0; }
@keyframes au-in0 { 0%, 13.5% { transform: scaleX(0); opacity: 1; } 21%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(2) .au-seg--in .au-seg-fill { animation-name: au-in0; }
@keyframes au-out1 { 0%, 21% { transform: scaleX(0); opacity: 1; } 28.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(2) .au-seg--out .au-seg-fill { animation-name: au-out1; }
@keyframes au-in1 { 0%, 28.5% { transform: scaleX(0); opacity: 1; } 36%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(3) .au-seg--in .au-seg-fill { animation-name: au-in1; }
@keyframes au-out2 { 0%, 36% { transform: scaleX(0); opacity: 1; } 43.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(3) .au-seg--out .au-seg-fill { animation-name: au-out2; }
@keyframes au-in2 { 0%, 43.5% { transform: scaleX(0); opacity: 1; } 51%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(4) .au-seg--in .au-seg-fill { animation-name: au-in2; }
@keyframes au-out3 { 0%, 51% { transform: scaleX(0); opacity: 1; } 58.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(4) .au-seg--out .au-seg-fill { animation-name: au-out3; }
@keyframes au-in3 { 0%, 58.5% { transform: scaleX(0); opacity: 1; } 66%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleX(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(5) .au-seg--in .au-seg-fill { animation-name: au-in3; }

/* 7. Caso reale anonimo: niente logo, il titolo al suo posto */
.au-res { flex-direction: row; align-items: flex-end; }
.au-res > div { flex: 1 1 auto; min-width: 0; }
.au-res .sv-res-top { flex-direction: column; align-items: flex-start; gap: 10px; }
.au-res .sv-res-top h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -.05em; }
.au-res .sv-stats > div { justify-content: flex-start; }
.au-res .sv-stats { max-width: 620px; }
.au-res .sv-big { flex: 0 0 auto; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid rgba(255,255,255,.3); }
.au-note { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: rgba(255,255,255,.9); }
.au-res .sv-big .au-note { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -.03em; color: #fff; }

@media (max-width: 980px) {
  .au-types { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 760px) {
  .au-type { padding: 22px 20px; }
  .au-type h3 { font-size: 25px; }
  .au-tools { border-radius: 22px; }
  .au-tool { height: 64px; padding: 0 22px; }
  .au-path { border-radius: 28px; }
  /* Su telefono il video sta dietro al titolo: velo più scuro per leggere bene */
  .au-hero-top .cs-hero-bg::after { background: linear-gradient(180deg, rgba(12,27,51,.9) 0%, rgba(22,46,94,.8) 50%, rgba(12,27,51,.9) 100%); }
  /* Su telefono il percorso va in verticale: quadrato a sinistra, testo a destra, la linea scende */
  .au-steps { grid-template-columns: minmax(0, 1fr); }
  .au-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; text-align: left; }
  .au-step-line { flex-direction: column; }
  .au-seg { flex: 0 0 14px; width: 4px; height: auto; }
  .au-seg--out { flex: 1 1 auto; min-height: 22px; }
  .au-seg-fill { width: 100%; transform-origin: center top; }
  .au-node { width: 52px; height: 52px; border-radius: 14px; }
  .au-step-text { gap: 4px; padding: 14px 0 26px; }
  .au-step:last-child .au-step-text { padding-bottom: 0; }
  .au-step-n { font-size: 18px; }
  .au-step-text strong { font-size: 19px; }
  .au-path.is-anim .au-seg-fill { transform: scaleY(0); }
@keyframes au-outv0 { 0%, 6% { transform: scaleY(0); opacity: 1; } 13.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(1) .au-seg--out .au-seg-fill { animation-name: au-outv0; }
@keyframes au-inv0 { 0%, 13.5% { transform: scaleY(0); opacity: 1; } 21%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(2) .au-seg--in .au-seg-fill { animation-name: au-inv0; }
@keyframes au-outv1 { 0%, 21% { transform: scaleY(0); opacity: 1; } 28.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(2) .au-seg--out .au-seg-fill { animation-name: au-outv1; }
@keyframes au-inv1 { 0%, 28.5% { transform: scaleY(0); opacity: 1; } 36%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(3) .au-seg--in .au-seg-fill { animation-name: au-inv1; }
@keyframes au-outv2 { 0%, 36% { transform: scaleY(0); opacity: 1; } 43.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(3) .au-seg--out .au-seg-fill { animation-name: au-outv2; }
@keyframes au-inv2 { 0%, 43.5% { transform: scaleY(0); opacity: 1; } 51%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(4) .au-seg--in .au-seg-fill { animation-name: au-inv2; }
@keyframes au-outv3 { 0%, 51% { transform: scaleY(0); opacity: 1; } 58.5%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(4) .au-seg--out .au-seg-fill { animation-name: au-outv3; }
@keyframes au-inv3 { 0%, 58.5% { transform: scaleY(0); opacity: 1; } 66%, 90% { transform: none; opacity: 1; } 95% { transform: none; opacity: 0; } 95.1%, 100% { transform: scaleY(0); opacity: 0; } }
.au-path.is-on .au-step:nth-child(5) .au-seg--in .au-seg-fill { animation-name: au-inv3; }
  .au-res { flex-direction: column; align-items: stretch; }
  .au-res .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .au-res .sv-stats dt { font-size: 10.5px; line-height: 1.3; }
  .au-note { font-size: 13px; }
  .au-res .sv-big { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
  .au-res .sv-big dd { font-size: clamp(56px, 17vw, 76px); }
}

@media (prefers-reduced-motion: reduce) {
  .au-tools-track { animation: none; width: auto; }
  .au-tools-track ul { flex-wrap: wrap; justify-content: center; padding: 4px 16px 6px; }
  .au-tools-dup, .au-tool[aria-hidden="true"] { display: none !important; }
}