/* Sfondi scelti dal pannello, sezione per sezione. */
main>section.bg-verde{background-color:#00ffd1;color:var(--ink)}
main>section.bg-rosa{background-color:#ff78d7;color:var(--ink)}
main>section.bg-viola{background-color:#4020e9;color:#fff}
main>section.bg-giallo{background-color:#edff38;color:var(--ink)}
main>section.bg-bianco{background-color:#fff;color:var(--ink)}
main>section.bg-inchiostro{background-color:var(--ink);color:#fff}

/* Pagine senza apertura: l'header non deve coprire la prima sezione. */
.no-hero .header{color:var(--ink)}
.no-hero main>section:first-child{padding-top:clamp(150px,14vw,210px)}

/* Testo libero (privacy, note, articoli). */
.prose{background:#fff;color:var(--ink)}
.prose-inner{max-width:780px}
.prose-title{font-size:clamp(42px,6vw,88px);line-height:.95;letter-spacing:-.045em;font-weight:800;margin:18px 0 44px}
.prose-title em{font-style:normal;color:#491bd4}
.prose-body{font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.prose-body>*+*{margin-top:1em}
.prose-body h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin-top:1.8em}
.prose-body h3{font-size:clamp(21px,2vw,26px);line-height:1.2;font-weight:700;margin-top:1.5em}
.prose-body ul,.prose-body ol{padding-left:1.2em}
.prose-body ul{list-style:disc}
.prose-body ol{list-style:decimal}
.prose-body li+li{margin-top:.4em}
.prose-body a{text-decoration:underline;text-underline-offset:.18em}
.prose-body em{color:#491bd4}

/* Footer da solo, sulle pagine senza sezione contatti. */
.site-footer footer .footer-grid{margin-top:0}
.person-name{display:flex;align-items:center;gap:12px}
.person-in{display:inline-grid;place-items:center;width:34px;height:34px;border:1.5px solid currentColor;border-radius:50%;transition:background .3s var(--ease),color .3s var(--ease),transform .4s var(--ease)}
.person-in svg{width:15px;height:15px;fill:currentColor}
.person-in:hover,.person-in:focus-visible{background:var(--dark);border-color:var(--dark);color:#fff;transform:rotate(-8deg) scale(1.08)}

/* Domande frequenti. */
.faq{background:#fff;color:var(--ink)}
.faq-list{border-top:1.5px solid currentColor}
.faq details{border-bottom:1.5px solid currentColor}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;cursor:pointer;list-style:none;font-size:clamp(21px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;flex:none;width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;transition:transform .45s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;translate:-50% -50%}
.faq-icon::after{rotate:90deg;transition:rotate .45s var(--ease)}
.faq details[open] .faq-icon::after{rotate:0deg}
.faq summary:hover .faq-icon,.faq summary:focus-visible .faq-icon{background:var(--ink);color:#fff;transform:rotate(-8deg) scale(1.06)}
.faq-a{max-width:760px;padding:0 0 32px;font-size:clamp(17px,1.35vw,20px);line-height:1.55}
.faq-a>*+*{margin-top:.8em}
.faq-a a{text-decoration:underline;text-underline-offset:.18em}
.faq-a em{font-style:normal;color:#491bd4}
@media (prefers-reduced-motion:no-preference){.faq details[open] .faq-a{animation:faq-in .5s var(--ease)}}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:700px){.faq summary{padding:22px 0}.faq-icon{width:38px;height:38px}}

/* ---------- Pagine interne ---------- */
/* Intestazione: più bassa dell'apertura, senza foglia 3D, con il percorso dalla home. */
.pagehead{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);padding-bottom:clamp(56px,6vw,96px)}
.no-hero main>section.pagehead:first-child{padding-top:clamp(130px,12vw,180px)}
.head-dark .header{color:#fff}
.head-dark .header .brand img{content:url(/site/assets/lockup-light.svg)}
.head-dark .header .menu-toggle i{background:#fff}
.crumbs{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;font-size:14px;font-weight:500;margin-bottom:clamp(36px,4vw,60px)}
.crumbs a{opacity:.7;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s}
.crumbs a:hover{opacity:1;border-color:currentColor}
.crumbs>span[aria-hidden]{opacity:.4}
.pagehead-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:end}
.pagehead .ph-title{margin-top:22px;font-size:clamp(52px,7.2vw,118px);line-height:.92;letter-spacing:-.05em;font-weight:800}
.pagehead .ph-title em{font-style:normal;font-weight:400}
.pagehead-side p{font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:470px}
.pagehead-side strong{font-weight:700}
.pagehead-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pagehead.bg-viola .pill.dark,.pagehead.bg-inchiostro .pill.dark{background:var(--green);color:var(--ink)}
.pagehead.bg-viola .pill.outline,.pagehead.bg-inchiostro .pill.outline{border-color:#ffffff88;color:#fff}
.pagehead-facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(56px,6vw,96px) 0 0;border-top:1.5px solid currentColor}
.pagehead-facts>div{padding:22px 24px 0 0}
.pagehead-facts>div+div{padding-left:24px;border-left:1.5px solid color-mix(in srgb,currentColor 30%,transparent)}
.pagehead-facts dt{font-size:clamp(34px,3.4vw,54px);line-height:1;letter-spacing:-.04em;font-weight:800}
.pagehead.bg-viola .pagehead-facts dt,.pagehead.bg-inchiostro .pagehead-facts dt{color:var(--green)}
.pagehead-facts dd{margin:10px 0 0;font-size:15px;line-height:1.35;max-width:200px;opacity:.85}
.pagehead-leaf{position:absolute;z-index:0;right:-4vw;top:8%;width:clamp(240px,30vw,480px);height:auto;opacity:.12;rotate:-18deg;pointer-events:none}
.head-dark .pagehead-leaf{filter:brightness(0) invert(1);opacity:.08}

/* Titoli delle sezioni interne: più contenuti di quelli della home. */
.list-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:clamp(32px,5vw,90px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.list-head .eyebrow{grid-column:1/-1}
.list-head h2{margin-top:20px;font-size:clamp(40px,4.6vw,76px);line-height:.98;letter-spacing:-.045em}
.list-head h2 em{font-style:normal;font-weight:400}
.list-head>p{font-size:clamp(17px,1.35vw,20px);max-width:440px}
.list-items{list-style:none;margin:0;padding:0}
.list-index{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.list-body h3{font-size:clamp(24px,2.4vw,36px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.list-body p{margin-top:12px;font-size:clamp(16px,1.25vw,19px);line-height:1.5;max-width:620px}
.list .build-tags li{border-color:currentColor}
.list .build-note{border-top-color:color-mix(in srgb,currentColor 30%,transparent)}

/* Righe: numero, titolo e testo, etichette a destra. */
.list-righe .list-items{border-top:1.5px solid currentColor}
.list-righe .list-items>li{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,260px);gap:clamp(20px,3vw,48px);align-items:start;padding:clamp(28px,3vw,44px) 0;border-bottom:1.5px solid color-mix(in srgb,currentColor 30%,transparent);transition:padding .45s var(--ease)}
.list-righe .list-index{padding-top:8px}
.list-righe .build-tags{margin:0;justify-content:flex-end;padding-top:6px}
@media (hover:hover){.list-righe .list-items>li:hover{padding-left:14px}}

/* Colonne: affiancate, separate da filetti. */
.list-colonne .list-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1.5px solid currentColor}
.list-colonne .list-items>li{display:flex;flex-direction:column;gap:22px;padding:30px clamp(20px,2.4vw,40px) 10px 0}
.list-colonne .list-items>li+li{padding-left:clamp(20px,2.4vw,40px);border-left:1.5px solid color-mix(in srgb,currentColor 30%,transparent)}
.list-colonne .list-index{font-size:clamp(46px,4.4vw,72px);line-height:.9;letter-spacing:-.05em;opacity:.3}
.list-colonne .build-tags{margin-top:auto}

/* Tappe: linea del tempo con i passaggi numerati. */
.list-tappe .list-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,3vw,48px);counter-reset:tappa}
.list-tappe .list-items>li{position:relative;padding-top:64px}
.list-tappe .list-items>li::before{content:"";position:absolute;top:21px;left:0;right:calc(-1 * clamp(24px,3vw,48px));height:1.5px;background:color-mix(in srgb,currentColor 35%,transparent)}
.list-tappe .list-items>li:last-child::before{right:0}
.list-tappe .list-index{position:absolute;top:0;left:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:var(--ink)}
.list-tappe.bg-verde .list-index{background:var(--ink);color:#00ffd1}
.list-tappe .build-tags{margin-top:18px}

/* Voi + noi. */
.split{background:#fff;color:var(--ink)}
.split-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,48px);align-items:stretch}
.split-side{padding:clamp(26px,3vw,44px);border-radius:4px}
.split-side.is-left{border:1.5px solid currentColor}
.split-side.is-right{background:var(--dark);color:#fff}
.split-side h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.04em;font-weight:800;margin-bottom:22px}
.split-side ul{list-style:none;margin:0;padding:0}
.split-side li{padding:13px 0 13px 28px;position:relative;font-size:clamp(17px,1.3vw,20px);border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.split-side li::before{content:"→";position:absolute;left:0}
.split-side.is-right li::before{color:var(--green)}
.split-plus{align-self:center;font-size:clamp(40px,4vw,64px);font-weight:300;line-height:1}
.split-points{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,2.4vw,40px)}
.split-points li{padding-top:18px;border-top:1.5px solid currentColor}
.split-points h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.split-points p{margin-top:8px;font-size:16px;line-height:1.45;opacity:.85}

/* Contatti compatti. */
.contact-compact .cta-box{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:end;padding-bottom:clamp(56px,6vw,96px);border-bottom:1.5px solid currentColor}
.contact-compact h2{margin:20px 0 22px;font-size:clamp(44px,5.4vw,90px);line-height:.95;letter-spacing:-.05em}
.contact-compact .cta-box p{font-size:clamp(17px,1.35vw,20px);max-width:480px}
.contact-compact .contact-options{display:flex;flex-direction:column;align-items:flex-end;gap:22px}

@media (max-width:900px){
 .pagehead-grid,.list-head,.contact-compact .cta-box{grid-template-columns:1fr}
 .list-head>p{margin-top:20px}
 .pagehead-facts{grid-template-columns:1fr 1fr;row-gap:28px}
 .pagehead-facts>div:nth-child(3){padding-left:0;border-left:0}
 .list-righe .list-items>li{grid-template-columns:44px 1fr}
 .list-righe .build-tags{grid-column:2;justify-content:flex-start}
 .split-cols{grid-template-columns:1fr}
 .contact-compact .contact-options{align-items:flex-start}
 .split-plus{justify-self:center}
 .list-colonne .list-items>li+li{padding-left:0;border-left:0;border-top:1.5px solid color-mix(in srgb,currentColor 30%,transparent)}
 .list-tappe .list-items>li::before{right:0}
}
.list{background:#fff;color:var(--ink)}

/* Collegamenti ad altre pagine. */
.links-block{background:#fff;color:var(--ink)}
.link-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.link-grid a{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:28px 28px 70px;border:1.5px solid currentColor;border-radius:4px;transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--ease)}
.link-grid h3{font-size:clamp(22px,2vw,30px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.link-grid p{font-size:16px;line-height:1.45;opacity:.85}
.link-arrow{position:absolute;left:28px;bottom:24px;display:grid;place-items:center;width:36px;height:36px;border:1.5px solid currentColor;border-radius:50%;transition:transform .45s var(--ease)}
.link-grid a:hover,.link-grid a:focus-visible{background:var(--ink);color:#fff;transform:translateY(-3px)}
.link-grid a:hover .link-arrow{transform:rotate(-45deg)}
.links-block.bg-inchiostro .link-grid a:hover,.links-block.bg-viola .link-grid a:hover{background:#fff;color:var(--ink)}

/* "Scopri di più" nelle schede che hanno una pagina di approfondimento. */
.card-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:16px;font-weight:700;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.card-more span{transition:transform .35s var(--ease)}
.card-more:hover span{transform:translateX(4px)}
.care-grid .card-more{margin-top:22px}

/* Intestazione con illustrazione: titolo e testo a sinistra, disegno a destra. */
.pagehead.has-visual .pagehead-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.pagehead.has-visual .ph-title{font-size:clamp(46px,5.6vw,96px)}
.pagehead.has-visual .pagehead-title>p:not(.ph-title){margin-top:28px;font-size:clamp(18px,1.4vw,21px);line-height:1.45;max-width:540px}
.pagehead.has-visual .pagehead-title strong{font-weight:700}
.pagehead-visual{position:relative;padding:4% 4% 6% 2%}
.pagehead-logos{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pagehead-logos li{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:50%;transition:transform .4s var(--ease),background .3s,border-color .3s}
.pagehead-logos svg{width:20px;height:20px;fill:currentColor}
.pagehead-logos li[title=WooCommerce] svg{width:32px;height:32px}
.pagehead-logos li:hover{transform:translateY(-3px) rotate(-6deg);border-color:currentColor}
/* Colori dell'intestazione per famiglia di servizi. */
.pagehead.bg-rosa .pill.outline,.pagehead.bg-giallo .pill.outline,.pagehead.bg-verde .pill.outline{border-color:color-mix(in srgb,var(--ink) 50%,transparent)}
.pagehead.bg-inchiostro .pagehead-facts dt{color:var(--green)}
@media (max-width:900px){
 .pagehead.has-visual .pagehead-grid{grid-template-columns:1fr}
 .pagehead-visual{padding:0 4% 4% 0;max-width:560px}
}

/* Barra flottante sui fondi scuri: diventa chiara per restare visibile. */
.island{transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s,background .45s var(--ease),color .45s var(--ease),border-color .45s}
.on-dark .island{color:var(--ink);background:color-mix(in srgb,#fff 90%,transparent);border-color:#17132f22;box-shadow:0 10px 40px -12px #00000080}
.on-dark .island-blob{background:var(--ink)}
.on-dark .island-links a.is-on{color:#fff}
.on-dark .island-menu{background:#17132f14}
.on-dark .island-menu i{background:var(--ink)}

/* ---------- Menu Servizi a tendina (desktop) ---------- */
.nav-drop{display:flex;align-items:center}
.nav-caret{display:grid;place-items:center;width:24px;height:30px;margin-left:2px;padding:0;border:0;background:none;color:inherit}
.nav-caret i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform .35s var(--ease)}
.nav-drop:hover .nav-caret i,.nav-drop.is-open .nav-caret i{transform:translateY(25%) rotate(-135deg)}
.mega{position:absolute;left:var(--g);right:var(--g);top:calc(100% - 22px);padding-top:22px;z-index:20;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.nav-drop:hover .mega,.nav-drop.is-open .mega,.mega:focus-within{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s}
.mega-panel{background:#fff;color:var(--ink);border:2.5px solid var(--ink);border-radius:12px;box-shadow:8px 8px 0 var(--ink);padding:14px}
.mega-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.mega-grid>li{display:flex;flex-direction:column;border-radius:8px;transition:background .25s}
.mega-grid>li:hover{background:#00ffd133}
.desktop-nav .mega a::after{display:none}
.desktop-nav .mega-main{display:flex;flex-direction:column;gap:6px;padding:14px 16px 8px}
.mega-main b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.mega-main span{font-size:13px;line-height:1.4;opacity:.75;text-wrap:pretty}
.mega-main[aria-current] b{color:var(--dark)}
.mega-sub{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 14px}
.desktop-nav .mega-sub a{padding:4px 11px;font-size:13px;font-weight:700;border:1.5px solid var(--ink);border-radius:99px;transition:background .25s,color .25s}
.desktop-nav .mega-sub a:hover,.mega-sub a[aria-current]{background:var(--ink);color:#fff}
.desktop-nav .mega-all{display:flex;justify-content:space-between;margin-top:8px;padding:14px 16px;border-top:1.5px solid #17132f22;font-weight:700;font-size:15px}
.desktop-nav .mega-all span{transition:transform .35s var(--ease)}
.desktop-nav .mega-all:hover span{transform:translateX(5px)}
@media (max-width:1180px){.mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Menu mobile: i servizi sotto la loro voce. */
.mobile-menu nav .menu-sub{list-style:none;margin:0;padding:6px 0 14px 34px;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;border-bottom:1px solid color-mix(in srgb,var(--agency-fg) 22%,transparent)}
.mobile-menu nav .menu-sub a{counter-increment:none;display:block;padding:7px 0;border:0;font-size:16px;font-weight:500;letter-spacing:0;line-height:1.3;opacity:.85}
.mobile-menu nav .menu-sub a::before,.mobile-menu nav .menu-sub a::after{display:none}
.mobile-menu nav .menu-sub a[aria-current]{color:var(--agency-accent);opacity:1}
.mobile-menu nav{overflow-y:auto;overscroll-behavior:contain}

/* ---------- Indice delle pagine (blocco Collegamenti) ---------- */
.index-list{list-style:none;margin:0;padding:0;border-top:1.5px solid currentColor;counter-reset:none}
.index-list>li{border-bottom:1.5px solid color-mix(in srgb,currentColor 30%,transparent)}
.index-list a{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr) 56px;align-items:center;gap:clamp(16px,3vw,48px);padding:clamp(20px,2.4vw,34px) 0;transition:padding .5s var(--ease),color .3s}
.index-num{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.6}
.index-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px}
.index-text b{font-size:clamp(30px,4.2vw,68px);line-height:1;letter-spacing:-.045em;font-weight:800;transition:transform .5s var(--ease)}
.index-text>span{flex:1 1 280px;max-width:420px;font-size:15px;line-height:1.45;opacity:.75}
.index-arrow{display:grid;place-items:center;width:52px;height:52px;border:1.5px solid currentColor;border-radius:50%;font-size:20px;transition:transform .45s var(--ease),background .3s,color .3s}
.index-vis{position:absolute;z-index:3;right:90px;top:50%;width:min(340px,30vw);opacity:0;transform:translateY(-50%) scale(.85) rotate(4deg);transition:opacity .35s var(--ease),transform .5s var(--ease);pointer-events:none}
.index-vis *{animation-play-state:paused!important}
@media (hover:hover){
 .index-list a:hover{padding-left:18px}
 .index-list a:hover .index-arrow{transform:rotate(-45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
 .index-list a:hover .index-vis{opacity:1;transform:translateY(-50%) scale(1) rotate(-3deg)}
 .index-list a:hover .index-vis *{animation-play-state:running!important}
 .index-list a:hover .index-text>span{opacity:0}
}
.links-block.bg-inchiostro .index-list a:hover .index-arrow,.links-block.bg-viola .index-list a:hover .index-arrow{background:#fff;color:var(--ink)}
@media (max-width:700px){.index-list a{grid-template-columns:34px minmax(0,1fr) 40px}.index-arrow{width:40px;height:40px}.index-vis{display:none}}

/* ---------- Prossimo servizio ---------- */
.next-page{background:var(--ink);color:#fff;padding-top:clamp(70px,8vw,130px);padding-bottom:clamp(50px,5vw,80px)}
.next-link{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);grid-template-areas:"eye vis" "title vis" "sum vis";column-gap:clamp(30px,5vw,90px);align-items:end}
.next-link .eyebrow{grid-area:eye;color:var(--green)}
.next-title{grid-area:title;margin-top:18px;font-size:clamp(48px,7.4vw,124px);line-height:.92;letter-spacing:-.055em;font-weight:800}
.next-title span{display:inline-block;color:var(--green);transition:transform .5s var(--ease)}
.next-sum{grid-area:sum;margin-top:22px;max-width:520px;font-size:clamp(17px,1.35vw,20px);opacity:.8}
.next-vis{grid-area:vis;align-self:center;transition:transform .6s var(--ease)}
.next-link:hover .next-title span{transform:translateX(14px)}
.next-link:hover .next-vis{transform:rotate(-2deg) scale(1.03)}
.next-more{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1.5px solid #ffffff33;font-size:16px;font-weight:700}
.next-more a{opacity:.8;transition:opacity .3s}
.next-more a:hover{opacity:1}
@media (max-width:800px){.next-link{grid-template-columns:1fr;grid-template-areas:"eye" "title" "sum" "vis"}.next-vis{margin-top:30px;max-width:420px}}

/* ---------- Confronto senza riquadri ---------- */
.split-side{padding:0;border:0!important;background:none!important;color:inherit!important;border-radius:0}
.split-cols{grid-template-columns:1fr auto 1fr;align-items:start}
.split-side h3{display:flex;align-items:center;gap:14px;font-size:clamp(30px,3.4vw,54px);letter-spacing:-.045em;padding-bottom:18px;margin-bottom:6px;border-bottom:3px solid currentColor}
.split-side h3::before{content:"";flex:none;width:.42em;height:.42em;border-radius:50%;border:2.5px solid currentColor}
.split-side.is-right h3::before{background:var(--section-mark,#ff40ca);border-color:var(--section-mark,#ff40ca)}
.split-side li{padding:16px 0 16px 32px;font-size:clamp(18px,1.5vw,23px);line-height:1.3;border-top:0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.split-side li::before{content:"";top:1.05em;width:12px;height:12px;border-radius:50%;border:2px solid currentColor}
.split-side.is-right li::before{background:var(--section-mark,#ff40ca);border-color:var(--section-mark,#ff40ca)}
.split-plus{align-self:stretch;display:flex;align-items:center;font-size:clamp(46px,5vw,80px);font-weight:300;opacity:.35}
.split.bg-rosa,.split.bg-giallo,.split.bg-verde{--section-mark:#4020e9}
.split.bg-viola,.split.bg-inchiostro{--section-mark:#00ffd1}

/* ---------- Righe: titolo fermo a sinistra mentre le voci scorrono ---------- */
@media (min-width:901px){
 .list-righe{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);column-gap:clamp(40px,6vw,110px);align-items:start}
 .list-righe>.list-head{display:block;position:sticky;top:110px;margin-bottom:0}
 .list-righe>.list-head h2{font-size:clamp(38px,4vw,66px)}
 .list-righe>.list-head>p{margin-top:24px}
 .list-righe>.list-items,.list-righe>.build-note{grid-column:2}
 .list-righe .list-items>li{grid-template-columns:56px minmax(0,1fr)}
 .list-righe .build-tags{grid-column:2;justify-content:flex-start;padding-top:0;margin-top:-6px}
}

/* ======================= Revisione per la giuria ======================= */

/* Passaggio tra pagine: la nuova pagina si apre in una foglia che cresce dal punto del clic.
   Solo nei browser con le View Transitions tra documenti; altrove si naviga come sempre. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-old .85s cubic-bezier(.7,0,.2,1) both}
::view-transition-new(root){-webkit-mask:url(/site/assets/leaf-mask.svg) no-repeat;mask:url(/site/assets/leaf-mask.svg) no-repeat;animation:vt-leaf .85s cubic-bezier(.7,0,.2,1) both}
@keyframes vt-old{to{transform:scale(.95);filter:brightness(.55)}}
@keyframes vt-leaf{
 from{-webkit-mask-size:0 0;mask-size:0 0;-webkit-mask-position:var(--vt-x,50vw) var(--vt-y,50vh);mask-position:var(--vt-x,50vw) var(--vt-y,50vh)}
 to{-webkit-mask-size:440vmax 440vmax;mask-size:440vmax 440vmax;-webkit-mask-position:calc(var(--vt-x,50vw) - 220vmax) calc(var(--vt-y,50vh) - 220vmax);mask-position:calc(var(--vt-x,50vw) - 220vmax) calc(var(--vt-y,50vh) - 220vmax)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Ritmo: meno vuoto tra le sezioni delle pagine interne. */
.inner main>.section:not(.pagehead){padding-top:clamp(64px,7vw,120px);padding-bottom:clamp(64px,7vw,120px)}
.inner main>.client-band{padding-top:clamp(36px,4vw,60px);padding-bottom:clamp(36px,4vw,60px)}

/* Intestazione con illustrazione: titolo più contenuto e bilanciato, più spazio al disegno. */
@media (min-width:901px){.pagehead.has-visual .pagehead-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.pagehead.has-visual .ph-title{font-size:clamp(44px,5vw,84px);text-wrap:balance}
.pagehead .ph-title .rv-line{padding-bottom:.06em}
.pagehead-title>p:not(.ph-title){text-wrap:pretty}
/* Loghi: etichette con il nome, non cerchi muti. */
.pagehead-logos li{width:auto;height:auto;gap:8px;display:inline-flex;align-items:center;padding:7px 14px 7px 10px;border-radius:99px;font-size:14px;font-weight:700}
.pagehead-logos svg{width:18px;height:18px}
.pagehead-logos li[data-logo=woocommerce] svg{width:52px;height:12px}
@media (max-width:900px){
 .pagehead.has-visual .pagehead-visual{order:-1;max-width:560px;width:100%;padding:0 6% 2% 0;margin-bottom:6px}
 .pagehead.has-visual .crumbs{margin-bottom:22px}
}

/* Righe: contatore grande della voce che si sta leggendo, le altre si abbassano. */
.list-counter{display:none}
@media (min-width:901px){
 .list-counter{display:flex;align-items:flex-end;gap:10px;margin-top:clamp(30px,4vw,60px);font-weight:800;line-height:.85}
 .list-counter b{display:block;overflow:clip;font-size:clamp(90px,11vw,170px);letter-spacing:-.06em;color:var(--dark)}
 .list-counter b span{display:block}
 .list-counter i{font-style:normal;font-size:20px;opacity:.5;padding-bottom:.6em}
 .list-righe.bg-inchiostro .list-counter b,.list-righe.bg-viola .list-counter b{color:var(--green)}
 .list-righe .list-items>li{transition:opacity .45s var(--ease),padding .45s var(--ease)}
 .list-righe.is-reading .list-items>li:not(.is-active){opacity:.32}
}

/* Tappe: la linea si disegna (variabile --draw animata da inner.js). */
.list-tappe .list-items>li::before{transform-origin:left;transform:scaleX(var(--draw,1))}

/* Colonne: numeri pieni, non sbiaditi. */
.list-colonne .list-index{opacity:1;color:var(--dark)}
.list-colonne.bg-inchiostro .list-index,.list-colonne.bg-viola .list-index{color:var(--green)}

/* Domande frequenti: titolo fermo a sinistra, domande a destra. */
@media (min-width:901px){
 .faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);column-gap:clamp(40px,6vw,110px);align-items:start}
 .faq>.section-head{display:block;position:sticky;top:110px;margin:0}
 .faq>.section-head h2{font-size:clamp(38px,4vw,66px)}
 .faq>.section-head>p{margin-top:24px;max-width:360px}
}
.faq details[open] .faq-icon{background:var(--ink);color:#fff;transform:rotate(180deg)}

/* Indice dei servizi: numeri allineati ai titoli di sezione. */
.index-list a{grid-template-columns:40px minmax(0,1fr) 56px}

/* Chiusura: niente doppia linea, titolo più grande. */
.contact-compact .cta-box{border-bottom:0;padding-bottom:clamp(40px,4vw,64px)}
.contact-compact h2{font-size:clamp(56px,7.4vw,124px);line-height:.92}

/* Prossimo servizio: meno vuoto. */
.next-page{padding-top:clamp(60px,6vw,100px);padding-bottom:clamp(40px,4vw,64px);overflow:clip}

/* Correzioni dalla verifica: contrasto, allineamenti, menu mobile. */
.index-num{opacity:1}
.crumbs a{opacity:.85}
@media (min-width:701px){.index-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:center;gap:28px}.index-text>span{max-width:none}}
.mobile-menu nav>a[aria-current=true]{color:var(--agency-accent)}
.mobile-menu nav .menu-sub a[aria-current=true]{color:var(--agency-accent);opacity:1}
.mobile-menu nav .menu-sub{padding-bottom:8px}
.mobile-menu nav .menu-sub a{padding:5px 0}

/* Nastro: spazio sopra e sotto, così le etichette inclinate al passaggio non vengono tagliate. */
main>.band-nastro .client-window{padding:16px 0}
main>.band-nastro .client-window+.client-window{margin-top:-14px}

/* Tendina aperta: l'header passa sopra il titolo e la foglia 3D della home (sotto il cursore, livello 15). */
.header:has(.nav-drop:hover,.nav-drop.is-open){z-index:14;transition-delay:0s}
/* chiudendo, l'header resta sopra finché il pannello non è sparito (la tendina ci mette .4s): se no il titolo gli passa davanti */
.header:has(.nav-drop){transition:z-index 0s .4s}

/* pillole delle tecnologie con una loro pagina: tutta la pillola è il link */
.pagehead-logos li:has(a){padding:0}
.pagehead-logos a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:inherit;color:inherit}
.pagehead-logos li:has(a):hover{background:color-mix(in srgb,currentColor 12%,transparent)}
/* WooCommerce: il logo contiene già il nome, il testo resta solo per i lettori di schermo */
.pagehead-logos li[data-logo=woocommerce] svg{width:76px;height:17px}
.pagehead-logos li[data-logo=woocommerce] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Mobile: confronto in colonna, tappe come linea del tempo verticale ---------- */
@media (max-width:900px){
 .split-cols{grid-template-columns:1fr;gap:clamp(44px,10vw,64px)}
 .split-plus{display:none}
 .split-side h3{font-size:clamp(30px,8vw,40px)}
}
@media (max-width:700px){
 .list-tappe .list-items{grid-template-columns:1fr;gap:0}
 .list-tappe .list-items>li{padding:0 0 36px 62px}
 .list-tappe .list-items>li:last-child{padding-bottom:0}
 .list-tappe .list-items>li::before,.list-tappe .list-items>li:last-child::before{top:44px;bottom:0;left:21px;right:auto;width:1.5px;height:auto;transform-origin:top;transform:scaleY(var(--draw,1))}
 .list-tappe .list-items>li:last-child::before{display:none}
 .list-tappe .list-body{padding-top:8px}
}