/* Pagina siti web (siti-web-nuova.html), sopra il CSS delle pagine generaliste (custom.min.css).
Scura dalla testata fino allo slider dei lavori; da Recensioni in poi la pagina diventa bianca
con bg-mode.js ([data-bg-chiaro]): finche' il fondo e' ancora nero i testi restano bianchi. */
.sw-contenitore { width: min(1280px, 100% - 10vw); margin: 0 auto; }
@media (max-width: 479px) { .sw-contenitore { width: calc(100% - 30px); } }
/* etichetta e titolo uguali a quelli delle pagine nuove (.ht-etichetta, .ht-titolo di hub-nuovo.css) */
.sw-etichetta { display: inline-block; margin-bottom: 18px; padding: 5px 10px; border-radius: 6px; font-family: 'Satoshi', sans-serif;
font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; background: rgba(139, 92, 255, 0.2); color: #c9b6ff; transition: background-color 0.4s ease, color 0.4s ease; }
.sw-titolo { margin: 0; max-width: 760px; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 3.5rem; line-height: 1.1; font-weight: 500;
-webkit-text-stroke: 0.4px currentColor; color: #fff; transition: color 0.4s ease; }
.sw-testo { margin: 20px 0 0; max-width: 560px; font-family: 'Satoshi', sans-serif; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); transition: color 0.4s ease; }
@media (max-width: 991px) { .sw-titolo { font-size: 2.25rem; } .sw-testo { font-size: 16px; } }
/* sul bianco */
.bg-light .sw-etichetta { background: rgba(139, 92, 255, 0.12); color: #8b5cff; }
.bg-light .sw-titolo { color: #1a1a1a; }
.bg-light .sw-testo { color: #454643; }
.sw-link { font-size: 16px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.sw-link:hover { color: #c9b6ff; }
/* ---------- Testata: testo a sinistra, i siti che scorrono a destra, al centro dello schermo ---------- */
.sw-testata { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 120px 0 72px; overflow: hidden; color: #fff; }
.sw-testata__griglia { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.sw-testata__testi > * { animation: sw-entra 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sw-testata__testi > :nth-child(2) { animation-delay: 0.1s; }
.sw-testata__testi > :nth-child(3) { animation-delay: 0.2s; }
.sw-testata__testi > :nth-child(4) { animation-delay: 0.3s; }
@keyframes sw-entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.sw-testata .breadcrumb { margin-bottom: 28px; }
.sw-testata h1 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: clamp(2.6rem, 4.6vw, 4.25rem); line-height: 1.05; font-weight: 500;
-webkit-text-stroke: 0.5px currentColor; color: #fff; }
.sw-testata__sotto { margin: 24px 0 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.sw-testata__bottoni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.sw-vetrina { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: min(560px, 70vh); overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
animation: sw-entra 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.sw-vetrina__colonna { overflow: hidden; }
.sw-vetrina__nastro { display: flex; flex-direction: column; gap: 16px; animation: sw-scorre 90s linear infinite; }
.sw-vetrina__colonna--su .sw-vetrina__nastro { animation-direction: reverse; animation-duration: 100s; }
.sw-vetrina img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
/* il nastro ha i siti due volte: scorre di meta' (un giro intero) e riparte senza scatto */
@keyframes sw-scorre { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .sw-vetrina__nastro { animation: none; } }
@media (max-width: 991px) {
.sw-testata { min-height: 0; padding: 130px 0 48px; }
.sw-testata__griglia { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sw-testata__sotto { font-size: 16px; }
.sw-vetrina { height: 360px; }
}
/* ---------- Lavori (ancora sul nero): la frase e il marquee dei clienti come sulla pagina /siti-web,
poi lo slider dei casi di successo (usecase-slider.js) con i siti nelle schede ---------- */
/* spazi fra le sezioni come le pagine nuove: 120px sopra ogni sezione (80 al telefono), niente sotto */
.sw-lavori { position: relative; padding: 24px 0 0; color: #fff; }
.sw-clienti { margin: 0 0 28px; text-align: center; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.sw-lavori .hn-marquee { margin: 0 0 120px; }
.sw-slider { margin-top: 48px; }
/* schede come quelle dei casi di successo dell'hub: immagine larga quanto la scheda e alta 200px,
tutte alte uguali (il link, quando c'e', sta in fondo) */
.sw-lavori .feature-slide-image-wrap-2, .sw-schermo { width: 100% !important; max-width: none !important; }
.sw-schermo { position: relative; overflow: hidden; }
.sw-schermo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; user-select: none; -webkit-user-drag: none; }
.sw-lavori .w-slider-mask > div { align-items: stretch; }
.sw-lavori .feature-slide.magix { height: auto !important; }
.sw-lavori .feature-slide-item, .sw-lavori .feature-slide-item > div, .sw-lavori .feature-slide-item > div > div:last-child { display: flex; flex-direction: column; flex: 1; }
.sw-lavori .feature-slide-item { height: 100%; align-items: stretch; }
.sw-lavori .feature-slide-title-2 { color: #fff; }
.sw-lavori .feature-slide .sw-link { align-self: flex-start; margin-top: auto; padding-top: 16px; font-size: 15px; }
@media (max-width: 991px) {
.sw-clienti { font-size: 17px; }
.sw-lavori .hn-marquee { margin-bottom: 72px; }
.sw-slider { margin-top: 32px; }
}
/* ---------- Recensioni: griglia su tre colonne che sfuma in basso; il bottone la apre tutta ---------- */
.sw-recensioni { padding: 120px 0 0; }
/* titolo delle recensioni al centro */
.sw-recensioni .sw-contenitore { text-align: center; }
.sw-recensioni .sw-titolo { margin-left: auto; margin-right: auto; }
.sw-recensioni__griglia { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; max-height: 720px; overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
/* al telefono se ne vedono 4, l'ultima sfuma, e il bottone apre le altre; sul computer niente bottone */
.sw-recensioni__griglia.is-aperta { max-height: none; -webkit-mask-image: none; mask-image: none; }
.sw-recensioni__altre { display: none; justify-content: center; margin-top: 16px; position: relative; }
.sw-recensioni__bottone { padding: 0.8rem 30px; border: 1px solid #d9dad7; border-radius: 0.5rem; background: #fff; font: inherit; font-size: 16px; font-weight: 700;
color: #1a1a1a; cursor: pointer; transition: border-color 0.25s, color 0.25s; }
.sw-recensioni__bottone:hover { border-color: #8b5cff; color: #8b5cff; }
.sw-recensione { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px; border-radius: 1rem; text-align: left;
background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.sw-recensione__testa { display: flex; align-items: center; justify-content: space-between; }
.sw-recensione__stelle { display: flex; gap: 2px; }
.sw-recensione__stelle svg { width: 16px; height: 16px; fill: #ffd026; }
.sw-recensione__testa img { width: 20px; height: 20px; }
/* blockquote e figure hanno stili di Webflow (fondo arancio, testo al centro): qui si azzerano */
.sw-recensione blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; font-size: inherit; }
.sw-recensione blockquote p { margin: 0; font-size: 15px; line-height: 1.6; color: #454643; }
.sw-recensione blockquote p + p { margin-top: 8px; }
.sw-recensione blockquote b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 18px; font-weight: 500; color: #1a1a1a; }
.sw-recensione figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: auto; padding-top: 14px; border-top: 1px solid #d9dad7; text-align: left; }
.sw-recensione figcaption b { font-size: 15px; color: #1a1a1a; }
.sw-recensione figcaption span { font-size: 13px; color: #a6a8a4; }
@media (max-width: 991px) {
.sw-recensioni { padding-top: 80px; }
.sw-recensioni__griglia { grid-template-columns: minmax(0, 1fr); margin-top: 32px; max-height: none;
-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.sw-recensioni__griglia:not(.is-aperta) .sw-recensione:nth-child(n+5) { display: none; }
.sw-recensioni__altre { display: flex; }
}
/* ---------- Modulo di contatto (subito prima delle domande frequenti) ---------- */
.sw-contatti { padding: 120px 0 0; }
.sw-contatti__griglia { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.sw-modulo { padding: 32px; border-radius: 1.5rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.sw-modulo__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sw-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sw-campo--largo, .sw-modulo__privacy, .sw-modulo__invia { grid-column: 1 / -1; }
.sw-campo span { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.sw-campo input, .sw-campo textarea { width: 100%; margin: 0; padding: 12px 14px; border: 1px solid #d9dad7; border-radius: 10px; background: #fff;
font: inherit; font-size: 16px; color: #1a1a1a; }
.sw-campo textarea { resize: vertical; min-height: 120px; }
.sw-campo input:focus, .sw-campo textarea:focus { outline: none; border-color: #8b5cff; }
.sw-modulo__privacy { margin: 0; font-size: 13px; line-height: 1.5; color: #a6a8a4; }
.sw-modulo__privacy a { color: #454643; text-decoration: underline; }
.sw-modulo__invia { justify-self: start; padding: 0.8rem 30px; border: 0; border-radius: 0.5rem; background: #fe4a22; font: inherit; font-size: 16px; font-weight: 700;
color: #fff; cursor: pointer; transition: background-color 0.25s; }
.sw-modulo__invia:hover { background: #8b5cff; }
.sw-modulo__invia:disabled { opacity: 0.6; cursor: default; }
/* il modulo ha display: grid, che vincerebbe sull'attributo hidden: dopo l'invio restava visibile
e la conferma finiva sotto il bottone */
.sw-modulo [hidden] { display: none !important; }
/* conferma al posto del modulo, dentro lo stesso riquadro */
.sw-modulo__grazie { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 24px; text-align: center; outline: none;
animation: sw-entra 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sw-modulo__spunta { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #8b5cff; }
.sw-modulo__spunta svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sw-modulo__grazie h3 { margin: 8px 0 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 500; color: #1a1a1a; }
.sw-modulo__grazie p { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.6; color: #454643; }
.sw-modulo__esito { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid #d9dad7; font-size: 15px; line-height: 1.55; color: #454643; }
.sw-modulo__esito a { color: #1a1a1a; text-decoration: underline; }
/* le domande frequenti arrivano subito dopo il modulo (meno spazio di quello della sezione generalista) */
.sw-contatti + .bg-faqs-section { margin-top: 0 !important; padding-top: 120px !important; }
@media (max-width: 991px) {
.sw-contatti { padding-top: 80px; }
.sw-contatti__griglia { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sw-modulo { padding: 20px; }
.sw-modulo__form { grid-template-columns: minmax(0, 1fr); }
.sw-contatti + .bg-faqs-section { padding-top: 80px !important; }
}
/* titolo delle recensioni su una riga sola (al telefono va a capo da solo) */
.sw-titolo--riga { max-width: none; }
@media (min-width: 992px) { .sw-titolo--riga { white-space: nowrap; } }
/* box finale: al posto del disegno con i grafici, tre dei nostri siti a ventaglio */
/* l'id w-node della vecchia immagine la mette nella colonna di destra ma la allinea al bordo: qui si allarga */
.sw-cta-siti { position: relative; align-self: stretch; justify-self: stretch !important; width: 100%; min-height: 380px; overflow: hidden; border-radius: 0 1rem 1rem 0; }
.sw-cta-siti img { position: absolute; width: 62%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px;
height: auto; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.sw-cta-siti img:nth-child(1) { top: 14%; left: 6%; transform: rotate(-6deg); }
.sw-cta-siti img:nth-child(2) { top: 30%; left: 22%; transform: rotate(2deg); }
.sw-cta-siti img:nth-child(3) { top: 46%; left: 38%; transform: rotate(-2deg); }
@media (max-width: 991px) {
.sw-cta-siti { min-height: 260px; border-radius: 0 0 1rem 1rem; }
.sw-cta-siti img { width: 66%; }
}
/* domande frequenti: nelle generaliste stanno dentro un contenitore che da' il margine ai lati (60px sul
tablet, 15 al telefono); qui no, e i testi partivano dal bordo dello schermo. no15 di Webflow li azzera: !important */
@media (max-width: 991px) { .sw-contatti + .bg-faqs-section > .w-layout-blockcontainer { padding-left: 60px !important; padding-right: 60px !important; } }
@media (max-width: 479px) {
.sw-contatti + .bg-faqs-section { padding-left: 15px !important; padding-right: 15px !important; }
.sw-contatti + .bg-faqs-section > .w-layout-blockcontainer { padding-left: 0 !important; padding-right: 0 !important; }
}