/* Sfondo Relay — the stream sits behind the page and is screened over the
   body colour: its black adds nothing, its light shows through every
   transparent section. */
#wst-stream { position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
#wst-stream canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease; }
#wst-stream canvas.is-on { opacity: 1; }
body.wst-on #smooth-wrapper, body.wst-on .page-wrapper { position: relative; z-index: 1; }
body.wst-on #smooth-wrapper { position: fixed; }

/* Servizi FX: its own ground off, so the page light runs behind the list */
body.wst-on .servizi-fx { background: transparent !important; }
body.wst-on .servizi-fx .sfx-veil { background: none !important; }

/* glass: the theme's solid bands (#272727) let the light through */
body.wst-glass .section-bg, body.wst-glass .choose-us-section { background-color: rgba(39, 39, 39, .55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* the hero sphere (a flat picture with a dark square overlay) is hidden: the stream is the hero visual */
body.wst-nosphere .hero-circle { display: none !important; }

/* the brands: a lit strip of glass across the page, red hairlines above and
   below, a slow sheen passing; the logos brought up from grey */
body.wst-brands .brand-section .brand-slider { position: relative; margin-top: 46px; padding: 30px 0; overflow: hidden;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.wst-brands .brand-section .brand-slider::before,
body.wst-brands .brand-section .brand-slider::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 71, 28, 0), rgba(255, 71, 28, .75) 30%, rgba(255, 154, 61, .9) 50%, rgba(255, 71, 28, .75) 70%, rgba(255, 71, 28, 0)); }
body.wst-brands .brand-section .brand-slider::before { top: 0; }
body.wst-brands .brand-section .brand-slider::after { bottom: 0; }
body.wst-brands .brand-section .swiper-wrapper { position: relative; z-index: 1; }
body.wst-brands .brand-section .brand-slider { --wst-sheen: radial-gradient(60% 120% at 50% 50%, rgba(255, 71, 28, .16), rgba(255, 71, 28, 0) 70%); }
body.wst-brands .brand-section .brand-slider { background-image: var(--wst-sheen), linear-gradient(90deg, rgba(20, 14, 12, 0) 0%, rgba(24, 16, 14, .82) 14%, rgba(24, 16, 14, .82) 86%, rgba(20, 14, 12, 0) 100%);
  background-size: 45% 100%, 100% 100%; background-repeat: no-repeat; background-position: -60% 0, 0 0; animation: wst-sheen 9s ease-in-out infinite; }
@keyframes wst-sheen { 0% { background-position: -60% 0, 0 0; } 50% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
body.wst-brands .brand-section .brand-box-1 { border-color: rgba(255, 255, 255, .06); transition: border-color .4s ease, background-color .4s ease; }
body.wst-brands .brand-section .brand-box-1:hover { border-color: rgba(255, 71, 28, .45); background-color: rgba(255, 71, 28, .05); }
/* only the grey logo is brightened; the theme swaps it for the colour one on hover (opacity untouched) */
body.wst-brands .brand-section .brand-img-1:first-child img { filter: brightness(1.9) contrast(1.05); }
body.wst-brands .brand-section .brand-box-1:hover .brand-img-1:last-child img { filter: drop-shadow(0 0 10px rgba(255, 71, 28, .35)); }
@media (max-width: 767px) { body.wst-brands .brand-section .brand-slider { margin-top: 30px; padding: 18px 0; } }
@media (prefers-reduced-motion: reduce) { body.wst-brands .brand-section .brand-slider { animation: none; background-position: 50% 0, 0 0; } }


/* "Contattaci ora": the theme's red picture off, dark glass like the blocks above, the stream behind */
body.wst-glass .lets-talk-section { background-image: none !important; background-color: rgba(16, 16, 16, .55) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); }
body.wst-glass .lets-talk-section > canvas { display: none !important; }

/* pagine costruite a sezioni "we-" (Servizi e simili): fondi pieni spenti sulla scia,
   schede in vetro scuro come in home, accenti dei titoli in Instrument Serif corsivo */
body.wst-on .e-con.e-parent:has(.we-sw) { background-color: transparent !important; }
body.wst-on .we-sw, body.wst-on .we-shop-bg { background-color: transparent !important; }
body.wst-on .we-card, body.wst-on .we-cta { background-color: rgba(22, 22, 22, .55) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.wst-on .we-fcard { background-color: rgba(18, 18, 18, .72) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.wst-on .we-sw h1 em, body.wst-on .we-sw h2 em, body.wst-on .we-sw h1 .we-accent, body.wst-on .we-sw h2 .we-accent { font-family: "Instrument Serif", serif !important; font-style: italic; font-weight: 400; letter-spacing: 0; }
/* l'apertura scende sotto il menu, che non le passa più sopra */
body.wst-on .we-hero { padding-top: 150px !important; }
@media (max-width: 991px) { body.wst-on .we-hero { padding-top: 110px !important; } }
/* l'apertura in vetro leggero: la scia si intravede anche lì */
body.wst-on .we-sw .we-hero.we-hero--shop { background-image: linear-gradient(rgba(16, 16, 16, .5), rgba(14, 14, 14, .3)) !important; }
/* le schedine dell'apertura nascono chiare con testo scuro: sul vetro scuro il testo torna chiaro */
body.wst-on .we-fcard { color: #eef1f8 !important; }
body.wst-on .we-fcard b, body.wst-on .we-fcard strong { color: #fff !important; }

/* articoli del blog: titolo misurato, testo in una colonna leggibile su una lastra di vetro,
   immagini a tutta larghezza della colonna con angoli morbidi */
body.wst-on.single-post .breadcrumb-items .title { font-size: clamp(42px, 5vw, 80px) !important; line-height: 1.05 !important; max-width: 1100px; margin-left: auto; margin-right: auto; }
body.wst-on.single-post .post-content { max-width: 920px; margin: 0 auto; padding: clamp(28px, 4vw, 64px); border-radius: 32px; background: rgba(16, 16, 16, .62); border: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.wst-on.single-post .single-blog-post > .post-featured-thumb img,
body.wst-on.single-post .single-blog-post .post-featured-thumb img { border-radius: 28px; }
body.wst-on.single-post .bs-desc p { font-size: 19px; line-height: 1.75; color: #c9c9c9; }
body.wst-on.single-post .bs-desc > p:first-child { font-size: 22px; line-height: 1.6; color: #eef1f8; }
body.wst-on.single-post .bs-desc strong { color: #fff; }
body.wst-on.single-post .bs-desc h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 64px 0 22px; padding-top: 22px; position: relative; color: #fff; }
body.wst-on.single-post .bs-desc h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #ff471c, #ff9a3d); }
body.wst-on.single-post .bs-desc h3 { font-size: 24px; margin: 38px 0 12px; color: #fff; }
body.wst-on.single-post .bs-desc ul, body.wst-on.single-post .bs-desc ol { padding-left: 0; margin: 18px 0 26px; list-style: none; counter-reset: wst-n; }
body.wst-on.single-post .bs-desc li { position: relative; padding: 10px 0 10px 34px; font-size: 18px; line-height: 1.65; color: #c9c9c9; border-bottom: 1px solid rgba(255, 255, 255, .06); }
body.wst-on.single-post .bs-desc ul li::before { content: ""; position: absolute; left: 6px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: #ff471c; box-shadow: 0 0 12px rgba(255, 71, 28, .7); }
body.wst-on.single-post .bs-desc ol li { counter-increment: wst-n; }
body.wst-on.single-post .bs-desc ol li::before { content: counter(wst-n, decimal-leading-zero); position: absolute; left: 0; top: 11px; font: 600 14px/1.5 Urbanist, sans-serif; color: #ff471c; }
body.wst-on.single-post .bs-desc figure.wp-block-image { margin: 44px -24px; }
body.wst-on.single-post .bs-desc figure.wp-block-image img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 80px -30px rgba(255, 71, 28, .35); }
body.wst-on.single-post .bs-desc figure.wp-block-image figcaption { margin-top: 12px; font-size: 14px; color: #8a8a8a; text-align: center; }
body.wst-on.single-post .bs-desc .wp-block-table table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
body.wst-on.single-post .bs-desc .wp-block-table th, body.wst-on.single-post .bs-desc .wp-block-table td { padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: left; font-size: 16px; color: #c9c9c9; }
body.wst-on.single-post .bs-desc .wp-block-table thead th { background: rgba(255, 71, 28, .12); color: #fff; }
body.wst-on.single-post .bs-desc a { color: #ff7a4d; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  body.wst-on.single-post .post-content { border-radius: 22px; padding: 22px 18px; }
  body.wst-on.single-post .bs-desc figure.wp-block-image { margin: 30px 0; }
  body.wst-on.single-post .bs-desc p { font-size: 17px; }
  body.wst-on.single-post .bs-desc > p:first-child { font-size: 19px; }
}

/* home, apertura: niente "WEB ETICA SRL" sopra il titolo, testi su una lastra di vetro scuro
   e un po' più in alto (la sfera non c'è più) */
body.wst-on.home .hero-section-1 .hero-content > p.split-title { display: none !important; }
@media (min-width: 1200px) {
  body.wst-on.home .hero-section-1 .row > .col-xl-8 { align-self: center; margin-top: -40px; }
}
body.wst-on.home .hero-section-1 .hero-content { position: relative; padding: clamp(24px, 3vw, 44px); border-radius: 32px; background: linear-gradient(135deg, rgba(16, 16, 16, .62), rgba(16, 16, 16, .38)); border: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
body.wst-on.home .hero-section-1 .hero-content .hero-button { margin-top: 36px; }
@media (max-width: 767px) {
  body.wst-on.home .hero-section-1 .hero-content { border-radius: 22px; padding: 22px 18px; }
}

/* i tre contatori: occupano tutta la riga (il tema lascia una quarta colonna vuota) */
@media (min-width: 768px) { body.wst-on .choose-us-section .counter-wrapper { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 767px) { body.wst-on .choose-us-section .counter-wrapper { grid-template-columns: 1fr !important; } body.wst-on .choose-us-section .counter-wrapper .counter-box { max-width: none; width: 100%; } }

/* il video di presentazione: pulsante in italiano sul banner e finestra a tutto schermo */
body.wst-on .video-banner .video-circle.wst-vbtn { cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; }
body.wst-on .wst-vbtn .wst-vring { position: absolute; inset: 0; width: 100%; height: 100%; animation: wst-vspin 14s linear infinite; }
body.wst-on .wst-vbtn .wst-vring text { fill: #fff; font: 600 15.5px Urbanist, sans-serif; letter-spacing: .32em; }
body.wst-on .wst-vbtn .wst-vplay { position: relative; width: 38%; height: 38%; border-radius: 50%; background: #ff471c; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(255, 71, 28, .6); animation: wst-vpulse 2.2s ease-out infinite; transition: transform .3s ease; }
body.wst-on .wst-vbtn:hover .wst-vplay { transform: scale(1.08); }
body.wst-on .wst-vbtn .wst-vplay svg { width: 42%; height: 42%; fill: #fff; margin-left: 6%; }
@keyframes wst-vspin { to { transform: rotate(360deg); } }
@keyframes wst-vpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 71, 28, .55); } 100% { box-shadow: 0 0 0 26px rgba(255, 71, 28, 0); } }
.wst-vbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 4vw; background: rgba(6, 6, 6, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s ease; }
.wst-vbox.is-open { opacity: 1; }
.wst-vbox-inner { position: relative; width: min(1280px, 100%); transform: scale(.96); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.wst-vbox.is-open .wst-vbox-inner { transform: none; }
.wst-vbox video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: #000; box-shadow: 0 40px 120px -20px rgba(255, 71, 28, .35); }
.wst-vbox .wst-vclose { position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #ff471c; color: #fff; font: 400 28px/44px Urbanist, sans-serif; cursor: pointer; }
@media (max-width: 767px) { .wst-vbox .wst-vclose { top: -54px; right: 0; } }
@media (prefers-reduced-motion: reduce) { body.wst-on .wst-vbtn .wst-vring, body.wst-on .wst-vbtn .wst-vplay { animation: none; } }

/* home, "Our working process": la scheda bianca diventa vetro scuro con testi chiari */
body.wst-on .faq-section .faq-content-1 { background: rgba(16, 16, 16, .6) !important; border: 1px solid rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.wst-on .faq-section .faq-content-1 .section-title h2,
body.wst-on .faq-section .faq-content-1 .section-title h2 *,
body.wst-on .faq-section .faq-content-1 .sub-title,
body.wst-on .faq-section .faq-content-1 .acc-btn,
body.wst-on .faq-section .faq-content-1 .acc-btn * { color: #fff !important; }
body.wst-on .faq-section .faq-content-1 .section-title .style-color,
body.wst-on .faq-section .faq-content-1 .section-title .style-color * { color: #a8a8a8 !important; }
body.wst-on .faq-section .faq-content-1 .acc-btn.active,
body.wst-on .faq-section .faq-content-1 .acc-btn.active *,
body.wst-on .faq-section .faq-content-1 .acc-btn .number { color: #ff471c !important; }
body.wst-on .faq-section .faq-content-1 .acc-content, body.wst-on .faq-section .faq-content-1 .acc-content * { color: #c9c9c9 !important; }
body.wst-on .faq-section .faq-content-1 .accordion { border-color: rgba(255, 255, 255, .1) !important; }

/* home, "Chi siamo": il testo su una lastra di vetro scuro */
body.wst-on .about-wrapper .about-content { padding: clamp(24px, 3vw, 44px); border-radius: 28px; background: rgba(16, 16, 16, .58); border: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------- pagine servizio: più trasparenza ---------- */
body.wst-on .we-hero > div[class*="-bg"] { background-color: transparent !important; }
body.wst-on .we-stack-sticky { background-color: rgba(18, 18, 18, .5) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.wst-on .we-card, body.wst-on .we-cta { background-color: rgba(22, 22, 22, .45) !important; }
body.wst-on .nolith-fx, body.wst-on .cybershield-fx, body.wst-on .sorvine-fx, body.wst-on .emberline-fx, body.wst-on .app-fx, body.wst-on .ecommerce-fx,
body.wst-on .seo-fx, body.wst-on .social-fx, body.wst-on .gestionale-fx, body.wst-on .contatti-fx, body.wst-on .progetti-fx { background-color: rgba(10, 10, 10, .42) !important; }

/* ---------- infografiche animate dei blocchi .tex-block ---------- */
body .we-sw .we-mock.wst-ig { padding: 0 !important; background: #0f0f0f !important; display: block; }
.we-mock.wst-ig svg { display: block; width: 100%; height: 100%; }
.we-mock.wst-ig svg * { transform-box: fill-box; }
.wig-bar { transform-origin: 50% 100%; animation: wig-grow 2.6s cubic-bezier(.2, .7, .2, 1) infinite alternate; }
@keyframes wig-grow { 0% { transform: scaleY(.25); } 60%, 100% { transform: scaleY(1); } }
.wig-ring { animation: wig-ring 3.2s ease-in-out infinite alternate; }
@keyframes wig-ring { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--p); } }
.wig-pulse { transform-origin: 50% 50%; animation: wig-pulse 2.2s ease-in-out infinite; }
@keyframes wig-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .85; } }
.wig-cursor { animation: wig-cursor 4.5s ease-in-out infinite; }
@keyframes wig-cursor { 0% { transform: translate(300px, 210px); } 45%, 60% { transform: translate(150px, 110px); } 52% { transform: translate(150px, 110px) scale(.85); } 100% { transform: translate(300px, 210px); } }
.wig-pop { animation: wig-pop 4.5s ease-in-out infinite; }
@keyframes wig-pop { 0%, 18% { opacity: 0; transform: translateY(14px); } 30%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.wig-drop { animation: wig-drop 4s ease-in-out infinite; }
@keyframes wig-drop { 0%, 15% { opacity: 0; transform: translateY(-20px); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.wig-type { animation: wig-type 4.5s steps(24) infinite; clip-path: inset(0 100% 0 0); }
@keyframes wig-type { 0% { clip-path: inset(0 100% 0 0); } 25%, 100% { clip-path: inset(0 0 0 0); } }
.wig-type-line { transform-origin: 0 50%; animation: wig-line 3.6s ease-out infinite; }
@keyframes wig-line { 0% { transform: scaleX(0); opacity: 0; } 25%, 85% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; } }
.wig-rise { animation: wig-rise 4.5s ease-in-out infinite; }
@keyframes wig-rise { 0%, 10% { opacity: 0; transform: translateY(60px); } 28%, 100% { opacity: 1; transform: none; } }
.wig-dash { stroke-dasharray: 5 6; animation: wig-dash 1.2s linear infinite; }
@keyframes wig-dash { to { stroke-dashoffset: -22; } }
.wig-spin { animation: wig-spin 9s linear infinite; }
@keyframes wig-spin { to { transform: rotate(360deg); } }
.wig-in { animation: wig-in 3.8s ease-in-out infinite; }
@keyframes wig-in { 0% { opacity: 0; transform: translateY(10px); } 14%, 92% { opacity: 1; transform: none; } 100% { opacity: .4; } }
.wig-cycle { animation: wig-cycle 3.6s ease-in-out infinite; opacity: .35; }
@keyframes wig-cycle { 0%, 100% { opacity: .35; } 15%, 33% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 71, 28, .6)); } 45% { opacity: .35; } }
.wig-slide { animation: wig-slide 6s ease-in-out infinite; }
@keyframes wig-slide { 0%, 12% { transform: translateX(0); } 38%, 50% { transform: translateX(140px); } 76%, 92% { transform: translateX(280px); } 100% { transform: translateX(280px); opacity: 0; } }
.wig-gather { animation: wig-gather 4.6s ease-in-out infinite; }
@keyframes wig-gather { 0%, 20% { transform: none; opacity: 1; } 55%, 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
.wig-draw { stroke-dasharray: 600; animation: wig-draw 4s ease-in-out infinite; }
@keyframes wig-draw { 0% { stroke-dashoffset: 600; } 55%, 100% { stroke-dashoffset: 0; } }
.wig-float { animation: wig-float 2.8s ease-out infinite; opacity: 0; }
@keyframes wig-float { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(1.1); } }
.wig-climb { animation: wig-climb 5s ease-in-out infinite; }
@keyframes wig-climb { 0%, 15% { transform: translateY(0); } 70%, 100% { transform: translateY(-168px); } }
.wig-focus { transform-origin: 50% 50%; animation: wig-focus 3s ease-in-out infinite; }
@keyframes wig-focus { 0%, 100% { transform: scale(1.25); opacity: .5; } 40%, 80% { transform: scale(1); opacity: 1; } }
.wig-blink { animation: wig-blink 1.2s steps(2) infinite; }
@keyframes wig-blink { 50% { opacity: 0; } }
.wig-flash { opacity: 0; animation: wig-flash 3s ease-out infinite; }
@keyframes wig-flash { 0%, 80% { opacity: 0; } 83% { opacity: .55; } 100% { opacity: 0; } }
.wig-progress { transform-origin: 0 50%; animation: wig-progress 5s linear infinite; }
@keyframes wig-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wig-knob { animation: wig-knob 3.6s ease-in-out infinite alternate; }
@keyframes wig-knob { from { transform: translateX(-120px); } to { transform: translateX(80px); } }
.wig-sweep { animation: wig-sweep 2.4s ease-in infinite; }
@keyframes wig-sweep { 0%, 20% { transform: none; opacity: 1; } 80% { transform: translateX(200px) scale(.5); opacity: 0; } 100% { opacity: 0; } }
.wig-strike { stroke-dasharray: 110; animation: wig-strike 3s ease-in-out infinite; }
@keyframes wig-strike { 0%, 30% { stroke-dashoffset: 110; } 55%, 100% { stroke-dashoffset: 0; } }
.wig-radar { animation: wig-spin 3.6s linear infinite; transform-box: view-box !important; }
.wig-spin { transform-box: view-box !important; }
.wig-needle { transform-box: view-box !important; animation: wig-needle 5s ease-in-out infinite; }
@keyframes wig-needle { 0%, 15% { transform: rotate(55deg); } 55%, 100% { transform: rotate(-55deg); } }
@media (prefers-reduced-motion: reduce) { .we-mock.wst-ig svg * { animation: none !important; } }
.wst-vbox.is-vertical .wst-vbox-inner { width: min(420px, 92vw); }
.wst-vbox.is-vertical video { aspect-ratio: 9 / 16; max-height: 84vh; width: auto; margin: 0 auto; }
/* le infografiche stanno dentro i titoli: non ereditano spaziature, maiuscole o corsivi del titolo */
.we-mock.wst-ig svg, .we-mock.wst-ig svg text { letter-spacing: .01em !important; word-spacing: normal !important; text-transform: none !important; font-style: normal !important; line-height: normal !important; font-family: Urbanist, sans-serif !important; text-rendering: geometricPrecision; }
.we-sw .tex-frame:has(.wst-ig) { box-shadow: 0 30px 80px -30px rgba(255, 71, 28, .35), 0 0 0 1px rgba(255, 255, 255, .06); }