/* fonts.css */
@font-face{font-family:Cabinet;src:url(fonts/CabinetGrotesk-400.woff2) format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:Cabinet;src:url(fonts/CabinetGrotesk-500.woff2) format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:Cabinet;src:url(fonts/CabinetGrotesk-700.woff2) format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:Cabinet;src:url(fonts/CabinetGrotesk-800.woff2) format("woff2");font-weight:800;font-display:swap;}
/* Cabinet non ha le frecce: senza questo ogni dispositivo le prendeva da un font diverso (su iPhone anche come emoji).
   Solo le frecce di IBM Plex Mono (OFL), ~1 KB. */
@font-face{font-family:Frecce;src:url(fonts/Frecce.woff2) format("woff2");unicode-range:U+2190-2199;font-display:swap;}

/* style.css */
:root{--green:#00ffd1;--ink:#072e28;--dark:#09251f;--paper:#f4f7ef;--muted:#42655b;--line:#bfd0c5;--g:clamp(22px,4.2vw,80px);--ease:cubic-bezier(.22,.75,.2,1);--layer-nav:5;--layer-cursor:15}*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:35px}body{margin:0;color:var(--ink);background:var(--paper);font:400 19px/1.45 Cabinet,Frecce,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,figure{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}img,svg{display:block;max-width:100%;height:auto}button,a,summary{outline-offset:5px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid currentColor}::selection{background:var(--green);color:var(--ink)}main{overflow-x:clip}.section{padding:clamp(88px,10vw,168px) var(--g)}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;line-height:1.4}.skip{position:fixed;z-index:var(--layer-cursor);top:15px;left:15px;padding:12px 20px;background:var(--ink);color:var(--paper);transform:translateY(-200%)}.skip:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:35px;z-index:var(--layer-nav);padding:25px var(--g);color:var(--ink)}.brand{width:151px;flex-shrink:0}.brand img{width:100%}.desktop-nav{margin:auto;display:flex;gap:28px;font-size:16px}.desktop-nav a{padding:10px 0;position:relative}.desktop-nav a::after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}.desktop-nav a:hover::after{transform:scaleX(1)}.header-contact{display:flex;align-items:center;gap:15px;font-size:16px}.header-contact span{border:1px solid #072e2855;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:23px;transition:transform .4s var(--ease)}.header-contact:hover span{transform:rotate(45deg)}.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:1px solid currentColor;border-radius:50%;background:transparent;position:relative}.menu-toggle i{position:absolute;height:1px;width:20px;background:currentColor;left:11px;top:16px}.menu-toggle i:last-child{top:25px}.menu-toggle[aria-expanded=true] i{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] i:last-child{transform:translateY(-5px) rotate(-45deg)}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:8px 8px 8px 24px;min-height:56px;border-radius:40px;font-size:17px;font-weight:500;border:1px solid transparent;transition:transform .35s var(--ease),background .35s var(--ease)}.pill>span{display:grid;place-items:center;width:40px;height:40px;font-size:22px;border-radius:50%;transition:transform .35s var(--ease);background:#ffffff1b}.pill:hover{transform:translateY(-3px)}.pill:hover>span{transform:rotate(-35deg)}.pill:active{transform:scale(.98)}.pill.dark{background:var(--ink);color:var(--paper)}.pill.light{background:var(--green);color:var(--ink)}.pill.light>span{background:#072e2811}.pill.outline{border-color:#072e2877;color:var(--ink);background:transparent}.pill.outline>span{background:#072e2810}.text-link{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid currentColor;padding:13px 0;gap:35px;font-size:17px}.text-link span{font-size:24px}.text-link:hover span{transform:translate(3px,-3px)}
.hero{position:relative;min-height:900px;min-height:max(800px,100svh);padding:145px var(--g) 30px;display:flex;flex-direction:column;align-items:center;text-align:center;isolation:isolate;background:radial-gradient(ellipse at 88% 42%,#9effdf,transparent 42%),radial-gradient(ellipse at 8% 95%,#88ffdc,transparent 38%),#00ffd1;overflow:hidden}.hero-eyebrow{z-index:2;margin:10px 0 40px}.hero .hero-title{position:relative;z-index:2;font-size:clamp(86px,12.4vw,196px);letter-spacing:-.055em;font-weight:800;line-height:.88;width:100%;max-width:1400px;margin:0 auto;pointer-events:none}.hero .hero-title>.line{display:block;overflow:clip;padding:.055em 0}.hero .hero-title>.line>span{display:block}.hero-copy{z-index:2;position:relative;max-width:540px;margin:32px 0 28px;font-size:22px;line-height:1.35}.hero-copy strong{font-weight:700}.hero-actions{display:flex;justify-content:center;gap:14px;position:relative;z-index:2}.hero-bottom{margin-top:auto;padding-top:52px;width:100%;display:flex;justify-content:space-between;align-items:end;font-size:13px;line-height:1.4;text-align:left;position:relative;z-index:2}.hero-bottom>span:nth-child(2){text-align:center}.hero-bottom>a{display:grid;place-items:center;width:45px;height:45px;border:1px solid #072e2833;border-radius:50%}.hero-bottom img{transform:rotate(130deg)}.sculpture{position:absolute;right:-8%;top:6%;width:44%;height:71%;z-index:1;pointer-events:none;opacity:.85}.sculpture{container-type:size}.sculpture canvas{width:100%;height:100%;display:block;opacity:0}.sculpture.ready canvas{opacity:1}/* immagine di attesa della foglia 3D: stessa camera di sculpture.js (sotto 0.85 di proporzione si allontana) */.sculpture-poster{position:absolute;inset:0;background:url(assets/leaf-poster-a.webp) center/auto 100% no-repeat}@container (aspect-ratio < 0.85){.sculpture-poster{background-image:url(assets/leaf-poster-b.webp)}}.sculpture.ready .sculpture-poster{visibility:hidden}.client-band{background:var(--ink);color:var(--paper);padding:40px 0 44px}.client-band>p{font-size:13px;text-align:center;margin-bottom:22px}.client-window{overflow:hidden;width:100%}.client-track{display:flex;width:max-content;will-change:transform}.client-set{display:flex;align-items:center;gap:75px;padding-right:75px}.client-set>span{font-size:clamp(24px,2.5vw,42px);font-weight:500;letter-spacing:-.02em;white-space:nowrap}.section-head{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:60px}.section-head h2{margin-top:25px}h2{font-size:clamp(55px,6.6vw,106px);line-height:.97;letter-spacing:-.05em;font-weight:700}h2 em{font-style:normal;font-weight:400}.section-head>p,.work-intro{max-width:370px;font-size:21px}.work-intro .text-link{margin-top:20px}.selected{padding-bottom:95px}.slider-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.slide-current{font-size:35px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}.slider-total{font-size:15px;margin-left:8px}.slider-actions{display:flex;gap:10px;align-items:center}.drag-label{font-size:14px;margin-right:22px;color:var(--muted)}.slider-actions button{border:1px solid #072e2866;border-radius:50%;height:50px;width:50px;background:transparent;font-size:25px;transition:background .3s var(--ease),color .3s var(--ease)}.slider-actions button:hover:not(:disabled){background:var(--ink);color:var(--paper)}.slider-actions button:disabled{opacity:.25}.project-rail{margin-right:calc(-1 * var(--g));margin-left:calc(-1 * var(--g));padding:0 var(--g);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--g);scrollbar-width:none;touch-action:pan-x pan-y}.project-rail::-webkit-scrollbar{display:none}.project-track{display:flex;gap:30px;width:max-content;padding-right:var(--g)}.project-slide{width:min(76vw,1160px);scroll-snap-align:start;scroll-snap-stop:always}.project-image{display:block;position:relative;padding:6px;background:color-mix(in srgb,var(--project-color) 70%,#fff);border-radius:18px;overflow:hidden}.image-inner{background:var(--project-color);border-radius:12px;padding:54px 10%;overflow:hidden}.image-inner img{width:100%;height:auto;box-shadow:0 12px 45px #082e2810;transition:transform .75s var(--ease)}.project-image:hover img{transform:scale(1.025) translateY(-4px)}.project-open{position:absolute;right:24px;bottom:23px;display:flex;align-items:center;gap:15px;background:var(--ink);color:var(--paper);border-radius:40px;font-size:14px;padding:6px 6px 6px 17px}.project-open i{width:34px;height:34px;border-radius:50%;background:#ffffff20;display:grid;place-items:center;font-size:21px;font-style:normal}.project-caption{display:flex;justify-content:space-between;align-items:end;gap:35px;padding:23px 0}.project-caption .eyebrow{font-size:11px}.project-caption h3,.archive-project .project-caption h2{font-size:36px;letter-spacing:-.035em;font-weight:700;line-height:1.15;margin-top:7px}.project-caption p{font-size:18px;max-width:280px;text-align:right;margin-bottom:5px}.work-outro{display:flex;align-items:center;justify-content:space-between;gap:45px;border-top:1px solid var(--line);padding-top:35px;margin-top:28px}.work-outro>p{max-width:550px;font-size:18px;color:var(--muted)}.project-rail.is-dragging{scroll-snap-type:none;scroll-behavior:auto}.project-rail.is-dragging *{cursor:grabbing!important;user-select:none}
.agency{background:var(--dark);color:var(--paper);position:relative}.agency-intro{max-width:1200px}.agency h2{margin-top:30px}.agency h2 em{color:var(--green)}.agency-body{display:grid;grid-template-columns:1fr 1fr;gap:9%;margin-top:75px;align-items:start}.agency-stat strong{font-size:clamp(145px,22vw,350px);font-weight:500;line-height:.9;letter-spacing:-.09em;color:var(--green);display:block}.agency-stat strong span{font-size:.4em;vertical-align:top;display:inline-block;padding-top:.2em;letter-spacing:-.06em}.agency-stat>p{font-size:25px;line-height:1.2;margin-top:20px}.agency-copy h3{font-size:36px;line-height:1.12;letter-spacing:-.025em;font-weight:500}.agency-copy>p{font-size:21px;margin:30px 0 36px}.agency-copy ul{padding:0;list-style:none;margin:0 0 35px}.agency-copy li{padding:20px 0;border-top:1px solid #e6fff42b;display:grid;grid-template-columns:140px 1fr;gap:20px}.agency-copy li>span{color:var(--green);font-size:16px}.agency-copy li p{font-size:17px}.capabilities{background:#dee8dc}.capability-list details{border-top:1px solid #072e283a}.capability-list details:last-child{border-bottom:1px solid #072e283a}.capability-list summary{list-style:none;display:flex;align-items:center;gap:30px;padding:27px 0;cursor:pointer}.capability-list summary::-webkit-details-marker{display:none}.capability-list h3{font-size:clamp(23px,2.5vw,39px);line-height:1.13;letter-spacing:-.025em;font-weight:500}.cap-tech{font-size:15px;margin-left:auto;max-width:175px;text-align:right}.plus{font-size:33px;width:30px;text-align:center;flex-shrink:0;transition:transform .4s var(--ease);font-weight:400}.capability-list details[open] .plus{transform:rotate(45deg)}.cap-body{display:flex;gap:60px;justify-content:space-between;padding:4px 60px 34px 0;font-size:19px}.cap-body p{max-width:640px}.cap-body a{white-space:nowrap;align-self:end;border-bottom:1px solid currentColor}.method{background:var(--paper)}.method-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}.method-heading h2{font-size:clamp(50px,5.3vw,83px);margin:30px 0}.method-heading p{font-size:21px}.method-progress{height:2px;width:160px;background:#c8d3c9;margin-top:40px}.method-progress i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(.08)}.method-steps article{padding:0 0 60px;margin-bottom:50px;border-bottom:1px solid var(--line)}.step-number{display:block;color:#47695f;font-size:15px;margin-bottom:20px}.method-steps h3{font-size:36px;line-height:1.05;font-weight:500;letter-spacing:-.03em;margin-bottom:25px}.method-steps p{font-size:20px;max-width:470px}.crm-preview{background:#e4eee2;border-radius:18px;border:6px solid #dce8da;padding:28px}.crm-preview header{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-bottom:24px;border-bottom:1px solid #072e2830}.crm-preview header>span{font-size:12px}.crm-title{padding:26px 0}.crm-title>span{font-size:13px}.crm-title h4{font-size:38px;letter-spacing:-.03em;font-weight:500;line-height:1.1;margin-top:12px}.crm-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 0;border-top:1px solid #072e2825;font-size:16px}.crm-row b{font-size:12px;font-weight:500;background:var(--ink);color:var(--paper);border-radius:25px;padding:5px 12px}.crm-preview>a{display:inline-block;font-size:15px;margin-top:25px;border-bottom:1px solid currentColor;padding-bottom:4px}.studio{background:#e2dbee}.studio-heading h2{margin-top:30px;max-width:1150px}.inline-people{display:inline-flex;height:.8em;vertical-align:baseline;margin-right:.15em;position:relative;top:.045em}.inline-people img{width:.8em;height:.8em;object-fit:cover;border-radius:50%;border:3px solid #e2dbee;filter:grayscale(1)}.inline-people img+img{margin-left:-.15em}.studio-heading>p{font-size:24px;line-height:1.4;max-width:655px;margin:40px 0 65px 38%}.people{display:grid;grid-template-columns:1fr 1fr;gap:38px}.portrait{overflow:hidden;border-radius:12px}.portrait img{width:100%;filter:grayscale(1);transition:filter .6s var(--ease),transform .8s var(--ease)}.portrait:hover img{filter:none;transform:scale(1.025)}.people figcaption{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:20px}.people h3{font-size:25px;font-weight:500;letter-spacing:-.02em}.people figcaption>span{font-size:14px}.contact{background:radial-gradient(ellipse at 95% 55%,#a2ffe5,transparent 40%),#00ffd1;padding-bottom:25px}.contact-intro{display:flex;justify-content:space-between;align-items:start;gap:40px}.contact-intro>p{font-size:20px;max-width:390px}.contact-title-link{display:flex;align-items:end;gap:25px;justify-content:space-between;margin:65px 0 45px}.contact-title-link h2{font-size:clamp(65px,9.4vw,155px);font-weight:800;line-height:.95;letter-spacing:-.045em}.contact-title-link>span{font-size:10vw;line-height:1.1}.contact-options{display:flex;align-items:center;gap:15px}.email{margin-left:auto;font-size:clamp(24px,2.5vw,40px);letter-spacing:-.02em;border-bottom:1px solid}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:45px;font-size:16px;padding-top:35px;border-top:1px solid #072e2840;margin-top:90px}.footer-grid>div{display:flex;flex-direction:column;gap:13px;align-items:start}.footer-grid>div:last-child{align-items:end}.footer-logo{width:100%;height:auto;margin-top:70px}.footer-bottom{display:flex;justify-content:space-between;font-size:13px;margin-top:35px}.cursor{position:fixed;z-index:var(--layer-cursor);left:0;top:0;pointer-events:none;opacity:0;mix-blend-mode:difference;display:flex;align-items:center;gap:7px;color:white}.cursor.visible{opacity:1}.cursor img{width:28px;transition:transform .25s var(--ease)}.cursor span{font-size:12px}.cursor.is-link img{transform:rotate(-22deg) scale(1.1)}.custom-cursor,.custom-cursor *{cursor:none!important}.custom-cursor :is(input:not([type=checkbox],[type=radio]),textarea,select){cursor:auto!important}.dialog-open{overflow:hidden}.case-dialog{width:min(1160px,94vw);max-height:92svh;overflow:auto;border:0;border-radius:20px;background:var(--paper);color:var(--ink);padding:35px}.case-dialog::backdrop,.mobile-menu::backdrop{background:#001d18c9;backdrop-filter:blur(8px)}.case-bar{display:flex;justify-content:space-between;align-items:center;gap:25px}.case-close,.menu-close{font-size:16px;border:1px solid currentColor;border-radius:40px;padding:10px 18px;background:transparent}.case-heading{margin:40px 0 25px}.case-heading h2{font-size:clamp(42px,6vw,90px);margin-bottom:17px}.case-category{font-size:16px}.case-image{width:100%;height:auto;border-radius:12px}.case-bottom{display:grid;grid-template-columns:2fr 1fr;gap:60px;margin:35px 0}.case-description{font-size:21px}.case-stack{margin:10px 0 15px}.case-site{font-size:16px;border-bottom:1px solid currentColor}.mobile-menu{border:0;background:var(--ink);color:var(--paper);width:100%;max-width:100%;min-height:100svh;margin:0;padding:24px var(--g);max-height:100svh}.menu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px}.mobile-menu nav{display:flex;flex-direction:column;gap:12px}.mobile-menu nav a{font-size:clamp(28px,7vw,48px);line-height:1.25;letter-spacing:-.03em}.client-area{display:inline-block;margin-top:45px;font-size:16px;border-bottom:1px solid currentColor}.motion-off,.motion-off *{scroll-behavior:auto!important}.motion-off *{transition:none!important;animation:none!important}
.archive-page{background:var(--paper)}.archive-page .header{position:relative}.archive-hero{padding-top:60px}.back-link{display:inline-block;margin-bottom:60px;font-size:15px}.archive-hero h1{font-size:clamp(49px,7.9vw,126px);line-height:1;letter-spacing:-.04em;font-weight:800;margin-top:24px}.archive-hero h1 em{font-style:normal;font-weight:400}.archive-intro{display:flex;justify-content:space-between;gap:65px;align-items:end;margin-top:45px}.archive-intro>p{font-size:22px;max-width:650px}.archive-intro .text-link{font-size:16px;max-width:320px}.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:70px 0 40px}.filter-bar>div{display:flex;gap:10px;flex-wrap:wrap}.filter-bar button{padding:10px 19px;border-radius:35px;border:1px solid #072e2844;background:transparent;font-size:16px}.filter-bar button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.filter-count{font-size:14px}.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 30px;grid-auto-flow:dense}.archive-project .image-inner{padding:40px 8%}.archive-project .project-caption h2{font-size:30px}
@media(min-width:1700px){.hero{min-height:1060px}.hero-eyebrow{margin:25px 0 65px}}
@media(max-width:1100px){.desktop-nav{gap:20px}.desktop-nav a{font-size:15px}.hero{min-height:820px}.hero .hero-title{font-size:12.5vw}.hero-copy{font-size:21px}.sculpture{top:4%;right:-13%;width:50%;height:65%}.section-head{gap:40px}.section-head>p,.work-intro{font-size:19px;max-width:310px}.project-caption p{font-size:17px}.agency-body{gap:7%}.agency-copy h3{font-size:30px}.agency-copy li{grid-template-columns:1fr;gap:7px}.cap-tech{max-width:140px;font-size:13px}.method-layout{gap:7%}.method-heading h2{font-size:5.5vw}.method-steps h3{font-size:32px}.studio-heading>p{margin-left:25%}.contact-options .pill{font-size:15px;padding-left:18px;gap:15px}.people figcaption{display:block}.people figcaption>span{display:block;margin-top:5px}}
@media(max-width:800px){.header{gap:20px;padding-top:20px}.brand{width:132px}.desktop-nav{display:none}.header-contact{margin-left:auto;font-size:15px}.header-contact span{display:none}.menu-toggle{display:block}.hero{min-height:780px;padding-top:135px}.hero-eyebrow{margin-bottom:50px;font-size:11px}.hero .hero-title{font-size:12.2vw}.hero-copy{font-size:21px;max-width:450px}.hero-actions .pill{font-size:16px;gap:15px}.sculpture{right:-12%;width:59%;height:60%;top:2%;opacity:.65}.hero-bottom{font-size:12px;padding-top:50px}.client-band{padding:30px 0}.client-set{gap:45px;padding-right:45px}.client-set>span{font-size:27px}.section-head{display:block;margin-bottom:40px}.section-head h2{font-size:62px}.section-head>p,.work-intro{margin-top:28px;max-width:470px}.work-intro .text-link{max-width:330px}.project-slide{width:83vw}.image-inner{padding:45px 8%}.project-caption{display:block}.project-caption p{text-align:left;margin-top:10px;max-width:none;font-size:17px}.project-caption h3{font-size:31px}.work-outro{display:block}.work-outro .pill{margin-top:25px}.agency-body{grid-template-columns:1fr 1fr;gap:7%}.agency-stat strong{font-size:23vw}.agency-stat>p{font-size:20px}.agency-copy>p{font-size:19px}.cap-tech{display:none}.plus{margin-left:auto}.cap-body{padding-right:0;font-size:18px}.method-layout{grid-template-columns:1fr}.method-heading h2{font-size:62px}.method-heading{margin-bottom:55px}.method-progress{display:none}.method-steps{max-width:650px}.method-steps p{max-width:100%}.method-steps article{padding-bottom:35px;margin-bottom:35px}.studio-heading h2{font-size:62px}.studio-heading>p{margin:35px 0 45px;max-width:580px;font-size:21px}.people{gap:25px}.contact-intro{gap:25px}.contact-intro>p{font-size:18px}.contact-title-link h2{font-size:9.5vw}.contact-options{flex-wrap:wrap}.email{margin:20px 0 0;width:fit-content;flex-basis:auto}.footer-grid{font-size:14px;gap:30px}.archive-intro{display:block}.archive-intro .text-link{margin-top:20px}.filter-bar{display:block}.filter-count{margin-top:20px}.archive-grid{gap:35px 20px}.archive-project .image-inner{padding:30px 7%}.archive-project .project-open{font-size:12px;bottom:14px;right:14px}.archive-project .project-open i{width:27px;height:27px}.archive-project .project-caption h2{font-size:27px}}
@media(max-width:520px){.section{padding:75px var(--g)}.header{padding-top:18px;gap:15px}.brand{width:115px}.header-contact{font-size:14px}.hero{min-height:770px;padding-top:126px;padding-bottom:25px}.hero-eyebrow{max-width:250px;margin:10px 0 90px;font-size:10px}.hero .hero-title{font-size:12.4vw;line-height:1.01;letter-spacing:-.04em}.hero .hero-title>.line:first-child{font-size:1.23em}.hero-copy{font-size:20px;margin:28px 0 25px;max-width:330px}.hero-actions{gap:10px;flex-wrap:wrap;width:100%}.hero-actions .pill{font-size:14px;gap:10px;min-height:50px;padding:6px 6px 6px 15px}.hero-actions .pill>span{width:32px;height:32px;font-size:19px}.sculpture{width:74%;height:40%;top:4%;right:-12%;opacity:.8}.hero-bottom{font-size:11px;padding-top:45px}.hero-bottom>span:nth-child(2){text-align:right}.hero-bottom>a{display:none}.client-band>p{font-size:12px}.client-set{gap:35px;padding-right:35px}.client-set>span{font-size:25px}.eyebrow{font-size:11px}.section-head h2,h2{font-size:49px;line-height:1.02}.section-head>p,.work-intro{font-size:19px;max-width:none}.section-head h2{margin-top:22px}.slider-actions button{width:44px;height:44px;font-size:24px}.slider-actions{gap:7px}.drag-label{display:none}.slider-total{font-size:13px;margin-left:5px}.slide-current{font-size:30px}.project-slide{width:86vw}.project-track{gap:18px}.project-image{padding:4px;border-radius:14px}.image-inner{padding:40px 7% 52px;border-radius:10px}.project-open{right:14px;bottom:13px;font-size:12px;padding:4px 4px 4px 12px;gap:10px}.project-open i{width:29px;height:29px;font-size:19px}.project-caption{padding-top:19px}.project-caption h3{font-size:29px}.project-caption .eyebrow{font-size:10px}.project-caption p{font-size:17px;margin-top:10px;max-width:300px}.work-outro{margin-top:10px;padding-top:26px}.work-outro>p{font-size:17px}.pill{font-size:15px;padding-left:18px;gap:15px}.agency h2{font-size:48px}.agency-body{grid-template-columns:1fr;gap:50px;margin-top:40px}.agency-stat strong{font-size:53vw}.agency-stat>p{font-size:22px}.agency-copy h3{font-size:31px}.agency-copy>p{font-size:19px;margin:25px 0}.agency-copy li{grid-template-columns:125px 1fr;gap:15px;padding:17px 0}.agency-copy li>span{font-size:14px}.agency-copy li p{font-size:16px}.capability-list summary{padding:24px 0;gap:15px}.capability-list h3{font-size:25px;max-width:290px}.plus{font-size:29px}.cap-body{display:block;font-size:18px;padding-bottom:25px}.cap-body a{display:inline-block;margin-top:20px}.method-heading h2{font-size:48px}.method-heading p{font-size:19px}.method-steps h3{font-size:31px}.method-steps p{font-size:19px}.crm-preview{padding:20px;border-width:4px}.crm-preview header>span{font-size:11px;max-width:100px;text-align:right}.crm-title h4{font-size:33px}.crm-row{font-size:15px}.studio-heading h2{font-size:43px;letter-spacing:-.045em}.studio-heading>p{font-size:20px}.inline-people{height:.8em}.people{grid-template-columns:1fr;gap:35px}.people figcaption{display:flex;align-items:start}.people h3{font-size:23px}.people figcaption>span{font-size:12px;margin-top:5px}.contact-intro{display:block}.contact-intro>p{margin-top:22px;font-size:19px}.contact-title-link{margin:40px 0 30px;gap:5px}.contact-title-link h2{font-size:11.7vw;max-width:100%;line-height:1.02;letter-spacing:-.045em}.contact-title-link>span{display:none}.contact-options{gap:12px}.contact-options .pill{font-size:14px;gap:12px;padding-left:15px}.contact-options .pill>span{width:34px;height:34px}.email{font-size:29px;margin-top:18px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px 20px;margin-top:60px;padding-top:25px;font-size:14px}.footer-grid>span{grid-column:1/-1}.footer-grid>div:last-child{align-items:start}.footer-logo{margin-top:45px}.footer-bottom{font-size:11px;gap:20px}.footer-bottom>span:last-child{text-align:right}.case-dialog{padding:22px;width:94vw;border-radius:15px}.case-bar>.eyebrow{font-size:10px}.case-close{font-size:14px;padding:9px 13px}.case-heading{margin:30px 0 22px}.case-heading h2{font-size:38px}.case-bottom{display:block}.case-description{font-size:19px}.case-bottom>div{margin-top:25px}.case-site{display:inline-block}.case-dialog>.pill{margin-top:0}.archive-hero{padding-top:35px}.back-link{margin-bottom:38px}.archive-hero h1{font-size:11vw}.archive-intro{margin-top:30px}.archive-intro>p{font-size:20px}.filter-bar{margin:40px 0 30px}.filter-bar>div{gap:7px}.filter-bar button{font-size:14px;padding:9px 13px}.archive-grid{grid-template-columns:1fr;gap:30px}.archive-project .image-inner{padding:40px 8% 50px}.archive-project .project-caption h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

@media(min-width:801px){.selected{padding-top:96px}.selected .section-head{margin-bottom:42px}}
.project-slide{display:flex;flex-direction:column}.project-slide .project-caption{order:-1;padding-top:0;padding-bottom:22px}

.client-heading{display:flex;justify-content:space-between;gap:20px;padding:0 var(--g);margin-bottom:22px;align-items:center}.client-heading p{font-size:14px}.client-pause{color:inherit;font-size:12px;border:0;border-bottom:1px solid #ffffff55;background:transparent;padding:5px 0}.motion-off .client-track{width:100%;transform:none!important}.motion-off .client-set{flex-wrap:wrap;justify-content:center;gap:20px 35px;padding:0 var(--g)}.motion-off .client-set[aria-hidden=true]{display:none}

/* Touch: area toccabile di almeno ~32px sui link piccoli, senza spostare niente
   (padding compensato dal margine negativo; sui link nel testo il padding verticale non cambia la riga). */
@media(pointer:coarse){.header-contact{padding-block:12px;margin-block:-12px}.footer-grid a{padding-block:6px;margin-block:-6px}:is(p,li) a{padding-block:6px}}

/* il cursore è un popover: niente stili del browser per i popover */
.cursor[popover]{inset:0 auto auto 0;margin:0;padding:0;border:0;background:none;overflow:visible;width:auto;height:auto}
.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused!important}

/* colors.css */
/* Saturated colour systems. Brand green remains exact in the Ortica palette. */
:root{
 --ink:#17132f;--paper:#ffffff;--dark:#4020e9;--muted:#17132f;--line:#17132f55;
 --hero-bg:#00ffd1;--hero-fg:#17132f;--hero-accent:#491bd4;--hero-hot:#ff43c8;
 --work-bg:#ff78d7;--work-fg:#17132f;--agency-bg:#4020e9;--agency-fg:#ffffff;--agency-accent:#00ffd1;
 --cap-bg:#00ffd1;--cap-fg:#17132f;--method-bg:#ffffff;--method-fg:#17132f;
 --studio-bg:#edff38;--studio-fg:#17132f;--contact-bg:#00ffd1;--contact-fg:#17132f;--contact-hot:#00c3ff;
 --sculpture-front:#ff40ca;--sculpture-rim:#6633ff;
}
body{background:var(--contact-bg)}
.header{color:var(--hero-fg)}
.header-contact span{border-color:currentColor}
.hero{background:var(--hero-bg);color:var(--hero-fg)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 112% 80%,var(--hero-hot) 0%,transparent 42%)}
.hero .hero-title>.line:first-child{color:var(--hero-accent)}
.hero .pill.dark{background:var(--hero-fg);color:var(--hero-bg)}
.hero .pill.outline{border-color:var(--hero-fg);color:var(--hero-fg);background:var(--hero-bg)}
.hero-bottom>a{border-color:currentColor}
.sculpture{opacity:1}
.client-band{background:var(--ink);color:#fff}
.client-set>span:nth-child(3n+2){color:var(--green)}
.client-set>span:nth-child(3n){color:#ff96e6}
.selected,.archive-page,.archive-hero{background:var(--work-bg);color:var(--work-fg)}
.selected{--muted:var(--work-fg);--line:color-mix(in srgb,var(--work-fg) 35%,transparent)}
.archive-page>.header{background:var(--work-bg);color:var(--work-fg)}
.slider-actions button{border:1.5px solid currentColor}
.slider-actions button:hover:not(:disabled){background:var(--work-fg);color:var(--work-bg)}
.project-image{border-radius:4px;padding:7px;background:var(--ink)}
.image-inner{border-radius:0}
.project-open{background:var(--ink);color:#fff}
.project-caption .eyebrow{font-weight:800}
.agency{background:var(--agency-bg);color:var(--agency-fg)}
.agency h2 em,.agency-stat strong,.agency-copy li>span{color:var(--agency-accent)}
.agency-stat strong{font-weight:800;letter-spacing:-.065em}
.agency-copy li{border-color:color-mix(in srgb,var(--agency-fg) 35%,transparent)}
.agency .pill.light{background:var(--agency-accent);color:var(--agency-bg)}
.capabilities{background:var(--cap-bg);color:var(--cap-fg)}
.capability-list details,.capability-list details:last-child{border-color:color-mix(in srgb,var(--cap-fg) 40%,transparent)}
.capability-list details[open]{border-top-width:3px}
.method{background:var(--method-bg);color:var(--method-fg)}
.method-progress{height:4px;background:#dfdbf1}
.method-progress i{background:#491bd4}
.step-number{color:#491bd4;font-weight:800}
.crm-preview{background:#fff;border:5px solid var(--ink);border-radius:4px;box-shadow:9px 9px 0 var(--green)}
.crm-row b{background:var(--green);color:var(--ink)}
.studio{background:var(--studio-bg);color:var(--studio-fg)}
.portrait{border-radius:4px;border:5px solid var(--ink)}
.inline-people img{border-color:var(--studio-bg)}
.contact{background:radial-gradient(ellipse at 100% 70%,var(--contact-hot),transparent 50%),var(--contact-bg);color:var(--contact-fg)}
.contact-title-link h2{font-weight:800}
.footer-logo{filter:brightness(0)}
.contact .pill.dark{background:var(--contact-fg);color:var(--contact-bg)}
.contact .pill.outline{border-color:var(--contact-fg);color:var(--contact-fg)}
.footer-grid{border-color:color-mix(in srgb,var(--contact-fg) 40%,transparent)}

.case-dialog{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:5px}
.case-dialog .pill.dark{background:var(--ink);color:#fff}
.mobile-menu{background:var(--agency-bg);color:var(--agency-fg)}
.mobile-menu nav a:hover{color:var(--agency-accent)}
@media(max-width:520px){
 .hero::before{background:radial-gradient(ellipse at 135% 70%,var(--hero-hot),transparent 50%)}
 .project-image{padding:5px;border-radius:4px}.image-inner{border-radius:0}
 .sculpture{opacity:1}
 .crm-preview{box-shadow:6px 6px 0 var(--green)}
}

.hero-bottom{padding-bottom:58px}

/* sections.css */
/* Sezioni senza portfolio: cosa costruiamo, prodotti, dopo il lancio. */

/* Cosa costruiamo */
.build{background:var(--work-bg);color:var(--work-fg)}
.build .section-head>p{max-width:400px;font-size:21px}
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.build-card{position:relative;display:flex;flex-direction:column;gap:28px;min-height:360px;padding:clamp(26px,3vw,46px);background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:4px;box-shadow:8px 8px 0 var(--ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.build-card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.build-card.is-wide{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:clamp(24px,4vw,70px)}
.build-card.is-wide .build-index{align-self:start;margin-top:12px}
.build-index{font-size:15px;font-weight:800;color:var(--dark)}
.build-card h3{font-size:clamp(30px,3.4vw,56px);line-height:1;letter-spacing:-.045em;font-weight:800;margin-bottom:20px}
.build-card.is-wide h3{font-size:clamp(38px,4.6vw,76px)}
.build-card p{font-size:19px;max-width:620px}
.build-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:auto 0 0}
.build-card.is-wide .build-tags{margin:0;max-width:260px;justify-content:flex-end}
.build-tags li{font-size:14px;font-weight:700;padding:6px 13px;border:1.5px solid var(--ink);border-radius:30px}
.build-note{margin-top:46px;padding-top:30px;border-top:1.5px solid color-mix(in srgb,var(--work-fg) 35%,transparent);font-size:clamp(19px,1.6vw,24px);max-width:900px}
.build-note a{border-bottom:1.5px solid currentColor;white-space:nowrap}

/* Prodotti */
.products{background:var(--ink);color:#fff;--line:#ffffff33}
.products h2 em{color:var(--green)}
.products .section-head>p{max-width:400px;font-size:21px;color:#ffffffcc}
.product-feature{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(26px,4vw,60px);border:1.5px solid #ffffff38;border-radius:6px;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--sculpture-front) 45%,transparent),transparent 55%),#1f1a3d}
.product-badge{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border-radius:30px;background:var(--green);color:var(--ink)}
.product-badge.ghost{background:transparent;color:#fff;border:1.5px solid #ffffff66}
.product-copy h3{font-size:clamp(44px,5vw,84px);line-height:.95;letter-spacing:-.05em;font-weight:800;margin:24px 0 14px}
.product-lead{font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--green);margin-bottom:20px}
.product-copy>p:not(.product-lead){font-size:18px;color:#ffffffcc;max-width:520px}
.product-copy ul{list-style:none;padding:0;margin:28px 0 34px}
.product-copy li{padding:12px 0;border-top:1px solid #ffffff26;font-size:17px;display:flex;gap:12px}
.product-copy li::before{content:"✓";color:var(--green);font-weight:800}
.products .pill.light{background:var(--green);color:var(--ink)}
.product-mock{background:#fff;color:var(--ink);border:5px solid #fff;border-radius:8px;padding:22px;box-shadow:12px 12px 0 var(--sculpture-front);font-size:15px}
.product-mock header{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid #17132f22;font-size:12px}
.mock-dots{display:flex;gap:6px}.mock-dots i{width:10px;height:10px;border-radius:50%;background:#17132f22}
.mock-dots i:first-child{background:var(--sculpture-front)}.mock-dots i:nth-child(2){background:var(--green)}
.mock-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px 0}
.mock-summary div{background:#f1f0f8;border-radius:6px;padding:14px}
.mock-summary strong{display:block;font-size:clamp(24px,2.4vw,36px);font-weight:800;letter-spacing:-.04em;line-height:1}
.mock-summary span{font-size:12px;color:#17132fb0}
.mock-list{list-style:none;padding:0;margin:0}
.mock-list li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid #17132f1c}
.mock-site{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-list b{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px}
.mock-list b.ok{background:var(--green);color:var(--ink)}
.mock-list b.warn{background:#ffe03a;color:var(--ink)}
.mock-meta{font-size:12px;color:#17132fa0}
.mock-bar{height:6px;border-radius:6px;background:#f1f0f8;margin-top:14px;overflow:hidden}
.mock-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--sculpture-front));transform-origin:left}
.product-soon{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.soon-card{padding:clamp(26px,3vw,44px);border:1.5px dashed #ffffff4d;border-radius:6px}
.soon-card h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.035em;font-weight:800;line-height:1.05;margin:20px 0 12px}
.soon-card p{font-size:17px;color:#ffffffb3}
.soon-card.is-blur h3,.soon-card.is-blur p{filter:blur(5px);opacity:.6;user-select:none}

/* Dopo il lancio */
.care{background:var(--cap-bg);color:var(--cap-fg)}
.care .section-head>p{max-width:400px;font-size:21px}
.care-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.care-grid article{padding:clamp(26px,3vw,46px);border:3px solid currentColor;border-radius:4px}
.care-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.care-grid h3{font-size:clamp(30px,3.2vw,52px);line-height:1;letter-spacing:-.045em;font-weight:800;margin:22px 0 18px}
.care-grid p{font-size:19px;max-width:520px}
.care-grid ul{list-style:none;padding:0;margin:26px 0 0}
.care-grid li{padding:13px 0;border-top:1.5px solid color-mix(in srgb,var(--cap-fg) 30%,transparent);font-size:17px;display:flex;gap:12px}
.care-grid li::before{content:"→";font-weight:800}

@media(max-width:1000px){
 .build-card.is-wide{grid-template-columns:1fr}
 .care-grid{grid-template-columns:1fr 1fr}.care-grid article:first-child{grid-column:1/-1}
 .build-card.is-wide .build-tags{justify-content:flex-start;max-width:none}
 .product-feature{grid-template-columns:1fr}
}
@media(max-width:800px){
 .build-grid,.care-grid,.product-soon{grid-template-columns:1fr}
 .build-card{min-height:0}
 .build .section-head>p,.products .section-head>p,.care .section-head>p{font-size:19px;margin-top:24px}
 .product-mock{box-shadow:6px 6px 0 var(--sculpture-front);padding:16px}
 .mock-list li{grid-template-columns:1fr auto}
 .mock-meta{display:none}
}

/* Home: link alle pagine agenzie e studio */
.agency-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.studio-heading>.page-link{width:fit-content}
.studio-heading>p:has(+.page-link){margin-bottom:24px}
.studio-heading>.page-link{margin:0 0 65px 38%}
@media(max-width:1100px){.studio-heading>.page-link{margin-left:25%}}
@media(max-width:800px){.studio-heading>.page-link{margin:0 0 45px}}

/* titoli di sezione: righe equilibrate, niente parola sola a capo */
h2{text-wrap:balance}

/* fx.css */
/* Effetti e microinterazioni (fx.js). */
.scroll-progress{position:fixed;left:0;top:0;right:0;height:4px;z-index:20;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--hero-accent),var(--sculpture-front),var(--green));pointer-events:none}
.motion-off .scroll-progress{display:none}

/* Hero */
/* La sfumatura fucsia dell'hero diventa un livello che si sposta col puntatore (fx.js): stessa sfumatura di hero::before, un po' più grande per non scoprire i bordi. */
.hero.has-hot::before{display:none}
.hero-hot{position:absolute;inset:-40px;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 112% 80%,var(--hero-hot) 0%,transparent 42%);-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%);will-change:transform}
.flow-on .hero-hot{opacity:.9}
.motion-off .hero-hot{transform:none!important}
/* Bagliore morbido che segue il puntatore: tinta chiara, niente fucsia pieno. */
.hero-glow{position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;background:radial-gradient(circle,color-mix(in srgb,#fff 55%,transparent) 0%,color-mix(in srgb,var(--hero-accent) 12%,transparent) 40%,transparent 70%);filter:blur(20px);transition:opacity .8s var(--ease);will-change:transform}
.hero.is-glowing .hero-glow{opacity:.75}
.motion-off .hero-glow{display:none}
.word{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transform-origin:50% 100%;will-change:transform}

/* Titoli a righe */
.rv-line{display:block;overflow:clip;padding-bottom:.09em;margin-bottom:-.09em}
.hero .hero-title>.line.wave-open,.rv-line.wave-open{overflow:visible}
.rv-inner{display:inline-block;transform-origin:0 100%}

/* Bottoni */
.pill,.header-contact{transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.pill:hover{transform:none}
.pill>span{transition:transform .5s var(--ease),background .35s}
.pill:hover>span{transform:rotate(-45deg) scale(1.08)}

/* Card con luce */
.build-card,.care-grid article,.soon-card{position:relative;transform-style:preserve-3d;transition:box-shadow .45s var(--ease)}
.build-card:hover{transform:none;box-shadow:14px 14px 0 var(--ink)}
.build-card::after,.care-grid article::after,.soon-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--sculpture-front) 28%,transparent),transparent 70%)}
.care-grid article::after{background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),#ffffff8c,transparent 70%)}
.soon-card::after{background:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),#ffffff1f,transparent 70%)}
.is-lit::after{opacity:1}
.build-card h3,.build-card p,.build-tags{position:relative;z-index:1}
.build-tags li{transition:background .25s,color .25s,transform .25s var(--ease)}
.build-tags li:hover{background:var(--ink);color:#fff;transform:translateY(-2px) rotate(-3deg)}
.build-index{align-self:flex-start;display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border:1.5px solid currentColor;border-radius:30px;transition:background .35s var(--ease),color .35s var(--ease)}
.build-card:hover .build-index{background:var(--dark);border-color:var(--dark);color:#fff}
.soon-card.is-blur:hover h3,.soon-card.is-blur:hover p{filter:blur(3px)}

/* Dashboard */
.mock-list b{display:inline-block;transition:background .3s,color .3s}
.mock-list b.busy{background:var(--ink);color:#fff;animation:mock-pulse .7s ease-in-out infinite alternate}
@keyframes mock-pulse{to{opacity:.45}}
.mock-summary strong{display:block}
.mock-foot{display:flex;align-items:center;gap:16px;margin-top:16px}
.mock-progress{flex:1;min-width:0}
.mock-progress-label{font-size:12px;color:#17132fb0}
.mock-foot .mock-bar{margin-top:8px}
.mock-run{flex:none;display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:30px;background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:700;padding:9px 16px;cursor:pointer;transition:background .25s,color .25s}
.mock-run:hover{background:#fff;color:var(--ink)}
.mock-run span{display:inline-block;transition:transform .6s var(--ease)}
.mock-run:hover span{transform:rotate(180deg)}
.mock-run:disabled{opacity:.7;cursor:progress}
.mock-run:disabled span{animation:mock-spin 1s linear infinite}
@keyframes mock-spin{to{transform:rotate(360deg)}}
.mock-run:focus-visible{outline:3px solid var(--sculpture-front);outline-offset:2px}

/* Battito della sezione manutenzione */
.care-pulse{position:relative;display:flex;align-items:center;gap:22px;margin:-20px 0 44px}
.care-pulse svg{flex:1;height:64px;overflow:visible}
.care-pulse path{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pulse-base{opacity:.22}
.pulse-run{stroke-dasharray:160 840;animation:pulse-run 3.2s linear infinite}
@keyframes pulse-run{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.care-live{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;flex:none}
.care-live i{position:relative;width:12px;height:12px;border-radius:50%;background:currentColor}
.care-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:live-ping 1.6s ease-out infinite}
@keyframes live-ping{to{transform:scale(3);opacity:0}}
.motion-off .pulse-run{stroke-dasharray:none;opacity:.9}

/* Fascia competenze */
.client-set>span{transition:transform .35s var(--ease),color .25s}
.client-set>span:hover{transform:skewX(-10deg) scale(1.06);color:var(--sculpture-front)}

/* Contatti */
.contact-title-link>span{display:inline-block;transition:transform .6s var(--ease)}
.contact-title-link:hover>span{transform:rotate(45deg) scale(1.15)}

@media(max-width:800px){.care-pulse{margin:-10px 0 30px;gap:14px}.care-pulse svg{height:46px}.mock-foot{flex-wrap:wrap}.mock-run{width:100%;justify-content:center}}

/* Come lavoriamo: titolo sticky e passaggi che si impilano. */
.method-heading{position:sticky;top:110px}
.method-steps{display:flex;flex-direction:column;gap:28px}
.method-steps article,.method-steps .crm-preview{position:sticky;margin:0;transform-origin:50% 0}
.method-steps article{top:110px;padding:clamp(28px,3vw,46px);min-height:300px;background:#fff;border:3px solid var(--ink);border-radius:6px;box-shadow:8px 8px 0 var(--ink)}
.method-steps article:nth-child(2){top:130px;background:#f4f1ff}
.method-steps article:nth-child(3){top:150px;background:#e9fff9}
.method-steps .crm-preview{top:170px}
.method-steps article .step-number{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border:1.5px solid currentColor;border-radius:30px;margin-bottom:26px}
@media(max-width:800px){
 .method-heading{position:static}
 .method-steps article{top:80px;min-height:0}
 .method-steps article:nth-child(2){top:95px}.method-steps article:nth-child(3){top:110px}.method-steps .crm-preview{top:125px}
}




/* Isola di navigazione */
.scroll-progress{display:none}
/* niente sfocatura dietro la barra: andava ricalcolata a ogni fotogramma di scroll; fondo quasi pieno, stesso effetto */
.island{position:fixed;z-index:12;top:14px;left:0;right:0;margin:0 auto;width:fit-content;display:flex;align-items:center;gap:6px;padding:6px;border-radius:100px;color:#fff;background:color-mix(in srgb,#17132f 94%,transparent);border:1px solid #ffffff26;box-shadow:0 10px 40px -12px #17132f80,inset 0 1px 0 #ffffff1f;transform:translateY(-140%);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s;overflow:hidden;max-width:calc(100vw - 24px)}
.island.is-visible{transform:none;opacity:1}
.island-leaf{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--hero-accent);flex:none;transition:transform .5s var(--ease)}
.island-leaf:hover{transform:rotate(-20deg) scale(1.08)}
.island-leaf img{width:18px}
.island-current{display:block;font-size:14px;font-weight:700;white-space:nowrap;padding:0;min-width:0;overflow:hidden;max-width:0;opacity:0;transition:max-width .6s var(--ease),opacity .3s,padding .6s var(--ease)}
.island.is-compact .island-current{max-width:220px;opacity:1;padding:0 10px 0 6px}
.island-links{display:grid;grid-template-columns:1fr;transition:grid-template-columns .6s var(--ease),opacity .4s}
.island.is-compact .island-links{grid-template-columns:0fr;opacity:0}
.island-links-inner{position:relative;display:flex;overflow:hidden;min-width:0}
.island-links a{position:relative;z-index:1;padding:11px 15px;font-size:14px;white-space:nowrap;border-radius:40px;transition:color .3s}
.island-links a.is-on{color:#17132f}
.island-blob{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:40px;background:#fff;opacity:0;transition:transform .5s cubic-bezier(.34,1.4,.64,1),width .5s cubic-bezier(.34,1.4,.64,1),opacity .3s}
.island-cta{display:flex;align-items:center;gap:10px;flex:none;padding:0 6px 0 18px;height:42px;border-radius:40px;background:var(--green);color:#17132f;font-size:14px;font-weight:700;transition:background .3s}
.island-cta span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#17132f;color:var(--green);transition:transform .5s var(--ease)}
.island-cta:hover span{transform:rotate(45deg)}
.island-menu{display:none;position:relative;width:42px;height:42px;border-radius:50%;border:0;background:#ffffff1f;flex:none}
.island-menu i{position:absolute;left:13px;width:16px;height:1.5px;background:#fff;top:17px}.island-menu i+i{top:23px}
.island-progress{position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--sculpture-front));transform-origin:left;transform:scaleX(0)}
.island a:focus-visible,.island button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:1000px){
 .island-links{display:none}
 .island .island-current{max-width:220px;opacity:1;padding:0 10px 0 6px}
 .island-menu{display:block}
}
@media(max-width:800px){.island.is-visible.is-compact{transform:translateY(-140%);opacity:0}}
@media(max-width:420px){.island-cta{padding:0;width:42px;justify-content:center;font-size:0;gap:0}.island-cta span{font-size:16px}}
.motion-off .island{transition:opacity .2s}

/* Fascia: anteprima che segue il cursore */
.client-band{position:relative}
.band-preview{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:#fff;color:#17132f;box-shadow:6px 6px 0 var(--sculpture-front);pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap}
.band-preview.is-on{opacity:1}
.band-preview code{font:600 13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.band-preview-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 35%,transparent)}
.client-set>span[data-preview]{cursor:default}

/* Prova: foglia che accompagna lo scroll e diventa CTA */
.leaf-follow body>.sculpture{position:fixed;right:-6vw;top:9vh;width:42vw;height:68vh;z-index:6;transform-origin:50% 50%;will-change:transform}
.leaf-follow .hero{isolation:auto}
.leaf-follow .hero .hero-title,.leaf-follow .contact-title-link,.leaf-follow .hero-copy,.leaf-follow .hero-actions,.leaf-follow .hero-bottom{position:relative;z-index:7}
.leaf-cta{position:fixed;right:26px;top:calc(var(--leaf-cy,calc(100vh - 91px)) - 65px);z-index:11;width:130px;height:130px;border-radius:50%;pointer-events:none;outline:none}
.leaf-docked .leaf-cta{pointer-events:auto;cursor:pointer}
.leaf-cta::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1.5px dashed currentColor;opacity:0;transform:scale(.8) rotate(0);transition:opacity .4s,transform .6s var(--ease);color:var(--ink)}
.leaf-docked .leaf-cta:hover::before,.leaf-docked .leaf-cta:focus-visible::before{opacity:.5;transform:scale(1.08) rotate(90deg)}
.leaf-bubble{position:absolute;right:calc(100% - 6px);bottom:62%;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:12px 12px 12px 18px;border-radius:24px 24px 6px 24px;background:#17132f;color:#fff;font-size:15px;font-weight:700;box-shadow:6px 6px 0 var(--green);opacity:0;transform:translate(14px,10px) scale(.7);transform-origin:100% 100%;transition:opacity .3s,transform .55s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.leaf-bubble-text{display:inline-block}
.leaf-disc{display:none}
/* foglia presa in prestito da un'altra sezione (index.js): niente fumetto, niente disco */
.leaf-busy .leaf-cta,.leaf-busy .leaf-disc{opacity:0;pointer-events:none!important}
.leaf-bubble i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#17132f;font-style:normal;transition:transform .5s var(--ease)}
.leaf-docked .leaf-cta:hover .leaf-bubble,.leaf-docked .leaf-cta:focus-visible .leaf-bubble,.leaf-docked .leaf-cta.is-peek .leaf-bubble{opacity:1;transform:none}
.leaf-cta:hover .leaf-bubble i{transform:rotate(45deg)}
.leaf-docked .leaf-cta:focus-visible .leaf-bubble{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:800px){
 .leaf-follow body>.sculpture{right:-12vw;top:5vh;width:74vw;height:40vh}
 .leaf-cta{right:12px;top:calc(var(--leaf-cy,calc(100vh - 45px)) - 33px);width:66px;height:66px}
 .leaf-cta::before{display:none}
 /* disco scuro sotto la foglia parcheggiata: si legge come pulsante e non si confonde col testo */
 .leaf-disc{display:block;position:fixed;z-index:5;right:15px;top:calc(var(--leaf-cy,calc(100vh - 45px)) - 30px);width:60px;height:60px;border-radius:50%;background:#17132f;border:1px solid #ffffff26;box-shadow:4px 4px 0 var(--green);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
 .leaf-docked .leaf-disc{transform:none}
 .leaf-docked body>.sculpture{opacity:1}
 .leaf-follow .hero .hero-eyebrow{position:relative;z-index:7}
 .leaf-bubble{font-size:13px;padding:9px 9px 9px 14px;right:calc(100% + 2px);bottom:50%;width:max-content;max-width:calc(100vw - 100px);white-space:normal;line-height:1.25}
 .leaf-bubble i{width:24px;height:24px;flex:none}
}
.build-index,.method-steps article .step-number{line-height:1;text-box:trim-both cap alphabetic;font-variant-numeric:tabular-nums}
/* Illustrazioni dei passaggi: in alto a destra, si disegnano quando la scheda arriva */
.method-steps article{position:sticky}
.method-steps article .step-art{position:absolute;top:clamp(18px,2.4vw,34px);right:clamp(18px,2.6vw,40px);width:clamp(110px,11vw,170px);height:auto;color:var(--ink);overflow:visible}
.method-steps article h3{padding-right:clamp(0px,9vw,150px)}
.step-art .fill{transform:translate(6px,6px)}
.step-art .art-lines{stroke-width:2.5;opacity:0}
.art-ready .step-art .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.art-ready .step-art .fill{opacity:0;transform:translate(0,0);transition:opacity .3s,transform .6s cubic-bezier(.34,1.56,.64,1) .55s}
.art-ready .step-art .art-ring{transform-origin:80px 60px;transform:scale(1.35);transition:transform 1.1s cubic-bezier(.34,1.3,.64,1) .2s}
.art-ready .step-art .art-corners{transform-origin:80px 60px;transform:scale(1.18);transition:transform .9s var(--ease) .3s}
.art-ready .step-art .art-drop{transform:translateY(-46px);opacity:0;transition:transform .7s cubic-bezier(.3,1.6,.6,1) .5s,opacity .2s .5s}
.art-ready .step-art .art-drop .art-lines{transition:opacity .2s 1s}
.art-ready .is-in .step-art .draw{stroke-dashoffset:0}
.art-ready .is-in .step-art .draw:nth-of-type(2){transition-delay:.12s}
.art-ready .is-in .step-art .draw:nth-of-type(3){transition-delay:.24s}
.art-ready .is-in .step-art .art-pulse{transition:stroke-dashoffset 1.4s cubic-bezier(.5,0,.3,1) .35s}
.art-ready .is-in .step-art .fill{opacity:1;transform:translate(6px,6px)}
.art-ready .is-in .step-art .art-ring,.art-ready .is-in .step-art .art-corners{transform:none}
.art-ready .is-in .step-art .art-drop{transform:none;opacity:1}
.art-ready .is-in .step-art .art-drop .art-lines{opacity:1}
.is-in .step-art .art-live-ring{transform-origin:124px 27px;animation:art-live 1.8s ease-out 1.2s infinite}
@keyframes art-live{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.method-steps article:hover .step-art .art-ring{transform:scale(.92);transition-delay:0s}
.method-steps article:hover .step-art .art-drop{transform:translateY(-6px) rotate(-3deg);transition-delay:0s}
.motion-off .step-art *{transition:none!important;animation:none!important}
@media(max-width:700px){.method-steps article .step-art{width:92px;top:20px;right:18px}.method-steps article h3{padding-right:0}}

/* Menu mobile: si apre dal bottone come un'estensione dell'header.
   Logo e bottone restano al loro posto, il ☰ diventa ✕. */
.mobile-menu{inset:0;width:100%;max-width:100%;height:100dvh;max-height:none;min-height:0;margin:0;padding:0 var(--g) calc(24px + env(safe-area-inset-bottom));flex-direction:column;overflow:hidden auto;overscroll-behavior:contain;background:var(--agency-bg);color:var(--agency-fg)}
.mobile-menu[open]{display:flex}
.mobile-menu::backdrop{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-top{position:relative;z-index:1;display:flex;align-items:center;gap:20px;margin:0;padding-top:20px}
.menu-brand{width:132px;flex:none}
.menu-brand img{display:block;width:100%;height:auto}
.menu-top .lang-switch{margin:0 0 0 auto;min-height:44px;min-width:44px}
.menu-close{position:relative;flex:none;width:44px;height:44px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:0}
.menu-close i{position:absolute;left:11px;top:16px;width:20px;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.menu-close i:last-child{top:25px}
.mobile-menu.is-open .menu-close i{transform:translateY(4.5px) rotate(45deg)}
.mobile-menu.is-open .menu-close i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mobile-menu nav{position:relative;z-index:1;counter-reset:m;display:flex;flex-direction:column;gap:0;margin-top:clamp(28px,7vh,64px)}
.mobile-menu nav a{counter-increment:m;display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid color-mix(in srgb,var(--agency-fg) 22%,transparent);font-size:clamp(30px,8.4vw,46px);font-weight:500;line-height:1.05;letter-spacing:-.04em;transition:color .3s}
.mobile-menu nav a:first-child{border-top:1px solid color-mix(in srgb,var(--agency-fg) 22%,transparent)}
.mobile-menu nav a::before{content:counter(m,decimal-leading-zero);align-self:flex-start;margin-top:.35em;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;opacity:.6}
.mobile-menu nav a::after{content:"↗";margin-left:auto;font-size:.55em;opacity:.35;transition:transform .4s var(--ease),opacity .3s}
.mobile-menu nav a:is(:hover,:active,.is-current){color:var(--agency-accent)}
.mobile-menu nav a:is(:hover,:active,.is-current)::after{opacity:1;transform:translate(3px,-3px)}
.mobile-menu nav a.is-current::before{opacity:1}
.menu-foot{position:relative;z-index:1;margin-top:auto;padding-top:36px}
.menu-cta{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:8px 8px 8px 24px;border-radius:100px;background:var(--agency-accent);color:#17132f;font-size:20px;font-weight:700;box-shadow:6px 6px 0 #17132f}
.menu-cta span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#17132f;color:var(--agency-accent);font-size:22px;transition:transform .5s var(--ease)}
.menu-cta:is(:hover,:active) span{transform:rotate(45deg)}
.menu-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;margin-top:26px;font-size:15px}
.menu-meta a{border-bottom:1px solid color-mix(in srgb,currentColor 45%,transparent)}
.menu-meta .client-area{margin:0;font-size:15px}
.menu-leaf{position:absolute;right:-22vw;bottom:18vh;width:min(88vw,520px);height:auto;opacity:.09;transform:rotate(-18deg);pointer-events:none}
@media(max-width:520px){.menu-top{padding-top:18px;gap:15px}.menu-brand{width:115px}}
@media(max-height:620px){.mobile-menu nav a{padding:10px 0;font-size:28px}.menu-foot{padding-top:24px}}
/* Le frecce di Frecce.woff2 stanno ~0,1em sopra il centro della riga di Cabinet: nei cerchi le riportiamo al centro. */
.header-contact span,.menu-cta span,.island-cta span,.pill>span,.leaf-bubble i{padding-top:.2em}

/* Barra flottante (16/10): si legge come indice della pagina, il menu del sito è dietro le lineette */
/* 1. il bottone del menu c'è anche su desktop, in fondo dopo "Parliamone" */
.island-menu{display:block}
.island-menu:hover{background:#ffffff33}
/* 2. la foglia porta in cima: al passaggio diventa una freccia */
.island-leaf{position:relative;overflow:hidden}
.island-leaf img,.island-up{transition:transform .45s var(--ease),opacity .3s}
.island-up{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;font-weight:700;color:#fff;transform:translateY(100%);opacity:0}
.island-leaf:hover{transform:none}
.island-leaf:hover img,.island-leaf:focus-visible img{transform:translateY(-120%);opacity:0}
.island-leaf:hover .island-up,.island-leaf:focus-visible .island-up{transform:none;opacity:1}
/* 3. etichetta prima delle voci */
.island-label{position:relative;z-index:1;align-self:center;padding:0 4px 0 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.55}

/* Pannello del menu sotto la barra flottante: stesso fondo, bordo e ombra della barra, attaccato sotto */
.island-panel{position:fixed;z-index:12;padding:10px;border-radius:30px;color:#fff;background:#17132f;border:1px solid #ffffff26;box-shadow:0 24px 60px -16px #17132f99,inset 0 1px 0 #ffffff1f;transform-origin:50% 0;transform:translateY(-10px) scaleY(.92);opacity:0;transition:transform .45s cubic-bezier(.34,1.3,.64,1),opacity .25s}
.island-panel.is-open{transform:none;opacity:1}
.ip-links{list-style:none;margin:0;padding:0}
.ip-links li{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease);transition-delay:calc(var(--i) * 45ms + 80ms)}
.island-panel.is-open .ip-links li{opacity:1;transform:none}
.ip-links a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.02em;transition:background .25s,color .25s}
.ip-links a:hover,.ip-links a:focus-visible{background:#fff;color:#17132f}
.ip-links a[aria-current]{color:var(--green)}
.ip-links a[aria-current]:hover{color:#17132f}
.ip-num{font-size:12px;font-weight:700;letter-spacing:.06em;opacity:.5}
.ip-arrow{margin-left:auto;transition:transform .35s var(--ease)}
.ip-links a:hover .ip-arrow{transform:translateX(4px)}
.ip-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;margin-top:6px;padding:14px 18px 8px;border-top:1px solid #ffffff1f;font-size:14px}
.ip-foot a{opacity:.75;transition:opacity .2s}
.ip-foot a:hover{opacity:1;text-decoration:underline}
/* le lineette diventano ✕ sul posto */
.island-menu i{transition:transform .4s var(--ease),top .4s var(--ease)}
.island.menu-open .island-menu{background:#fff}
.island.menu-open .island-menu i{top:20px;background:#17132f;transform:rotate(45deg)}
.island.menu-open .island-menu i+i{transform:rotate(-45deg)}
/* con il pannello aperto la barra resta larga e visibile */
.island.menu-open{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.island-panel,.ip-links li,.island-menu i{transition:none}}

/* Sottomenu Servizi: una card che sale sopra il pannello */
.island-panel{overflow:hidden;transition:transform .45s cubic-bezier(.34,1.3,.64,1),opacity .25s,height .45s var(--ease)}
.ip-main{transition:opacity .3s,transform .45s var(--ease)}
.island-panel.has-sub .ip-main{opacity:.35;transform:scale(.97)}
.ip-open{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;border-radius:20px;background:none;color:inherit;font:inherit;font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.02em;text-align:left;cursor:pointer;transition:background .25s,color .25s}
.ip-open:hover,.ip-open:focus-visible{background:#fff;color:#17132f}
.ip-open:hover .ip-arrow{transform:translateX(4px)}
.ip-sub{position:absolute;left:6px;right:6px;top:6px;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 16px;border-radius:24px;background:#2a2450;border:1px solid #ffffff26;box-shadow:0 -10px 40px -10px #0008;transform:translateY(40px) scale(.98);opacity:0;transition:transform .5s cubic-bezier(.34,1.2,.64,1),opacity .3s}
.ip-sub.is-open{transform:none;opacity:1}
.ip-sub-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ip-back{padding:9px 14px;border:1px solid #ffffff33;border-radius:99px;background:none;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ip-back:hover{background:#fff;color:#17132f}
.ip-all{font-size:14px;font-weight:700;opacity:.8}
.ip-all:hover{opacity:1;text-decoration:underline}
.ip-sub-title{margin:16px 4px 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.ip-sub-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ip-sub-list li{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease);transition-delay:calc(var(--i) * 35ms + 120ms)}
.ip-sub.is-open .ip-sub-list li{opacity:1;transform:none}
.ip-sub-main{display:block;padding:10px 12px;border-radius:14px;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.01em}
.ip-sub-main:hover,.ip-sub-main:focus-visible{background:#fff;color:#17132f}
.ip-sub-main[aria-current]{color:var(--green)}
.ip-sub-tech{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.ip-sub-tech a{padding:4px 10px;border:1px solid #ffffff2e;border-radius:99px;font-size:13px;opacity:.85}
.ip-sub-tech a:hover{background:#fff;color:#17132f;opacity:1}
/* lingue: una pillola per lingua, quella attuale piena */
.ip-foot{align-items:center}
.ip-langs{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.ip-langs a{display:block;min-width:38px;padding:6px 10px;border:1px solid #ffffff33;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.06em;text-align:center;opacity:1}
.ip-langs a:hover{background:#ffffff1f;text-decoration:none}
.ip-langs a[aria-current]{background:#fff;color:#17132f;border-color:#fff}
@media(prefers-reduced-motion:reduce){.ip-sub,.ip-sub-list li,.ip-main,.island-panel{transition:none}}
/* voce della pagina attuale: al passaggio scura come le altre (verde su bianco non si leggeva) */
.ip-sub-main[aria-current]:hover,.ip-sub-main[aria-current]:focus-visible{color:#17132f}
/* spazio tra le tecnologie di un servizio e il servizio dopo */
.ip-sub-list{gap:10px}
.ip-sub-tech{padding:4px 12px 0}
/* uscita verso un'altra pagina: le voci sfumano mentre parte il passaggio */
.mobile-menu.is-leaving nav,.mobile-menu.is-leaving .menu-foot,.island-panel.is-leaving .ip-main,.island-panel.is-leaving .ip-sub{opacity:.25;transition:opacity .35s}

/* ritratti.css */
/* Ritratti scontornati: varianti "fuori cornice" (ritratti.js). */
.portrait{position:relative}
[data-portrait-fx] .portrait{overflow:visible;border:0;background:none;border-radius:0}
[data-portrait-fx] .portrait>img:not(.p-cut){visibility:hidden}
.p-frame,.p-shadow,.p-sticker,.p-hello{display:none}
.p-frame{position:absolute;inset:0;border-radius:6px;border:5px solid var(--ink);background:var(--green)}
.p-cut,.p-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;pointer-events:none;transform-origin:50% 100%;transform:translate(var(--px,0px),var(--py,0px))}
.p-cut{object-fit:cover;object-position:50% 100%;filter:grayscale(1)}
.portrait.is-hover .p-cut{filter:none}
.p-shadow{-webkit-mask:var(--cut) 50% 100%/cover no-repeat;mask:var(--cut) 50% 100%/cover no-repeat;background:var(--hero-accent)}
.p-sticker{position:absolute;z-index:2;top:12%;right:-14px;padding:9px 16px;border-radius:30px;background:var(--ink);color:var(--green);font-size:15px;font-weight:800;white-space:nowrap;transform:rotate(9deg) scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.portrait.is-hover .p-sticker{transform:rotate(9deg) scale(1);transition-delay:.12s}
/* ritaglio dentro la cornice che si apre verso l'alto all'hover */
[data-portrait-fx] .p-cut,[data-portrait-fx] .p-shadow{clip-path:inset(5px 5px 5px 5px round 3px);transition:clip-path .7s cubic-bezier(.34,1.3,.64,1),filter .5s,scale .8s cubic-bezier(.34,1.56,.64,1),translate .8s cubic-bezier(.34,1.56,.64,1),opacity .4s}
[data-portrait-fx] .p-frame{transition:transform .7s cubic-bezier(.34,1.56,.64,1),background .5s}
[data-portrait-fx] .p-frame:not(.p-frame-2):not(.p-frame-3),[data-portrait-fx] .p-cut,[data-portrait-fx] .p-sticker{display:block}

/* 1. Fuori cornice */
[data-portrait-fx="cornice"] .portrait.is-hover .p-frame{transform:scale(.9) rotate(-2deg);background:var(--sculpture-front)}
[data-portrait-fx="cornice"] figure:nth-child(2) .portrait.is-hover .p-frame{transform:scale(.9) rotate(2deg)}
[data-portrait-fx="cornice"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% 5px -25% round 3px);scale:1.2;translate:0 -9%}

/* 2. Ombra pop: una sagoma colorata sfalsata dà profondità */
[data-portrait-fx="ombra"] .p-shadow{display:block;opacity:0}
[data-portrait-fx="ombra"] .portrait.is-hover .p-frame{transform:scale(.92)}
[data-portrait-fx="ombra"] .portrait.is-hover .p-cut,[data-portrait-fx="ombra"] .portrait.is-hover .p-shadow{clip-path:inset(-60% -25% 5px -25% round 3px);scale:1.18;translate:0 -8%}
[data-portrait-fx="ombra"] .portrait.is-hover .p-shadow{opacity:1;translate:22px calc(-8% + 14px)}

/* 3. Sbircia: si vede solo il ciuffo, all'hover salta fuori */
[data-portrait-fx="sbircia"] .p-frame{background:var(--ink)}
[data-portrait-fx="sbircia"] .p-cut{translate:0 66%;clip-path:inset(5px 5px calc(66% + 5px) 5px round 3px)}
[data-portrait-fx="sbircia"] .p-hello{display:block;position:absolute;z-index:2;left:50%;top:38%;translate:-50% 0;font-size:clamp(22px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--green);white-space:nowrap;transition:opacity .3s,scale .5s cubic-bezier(.34,1.56,.64,1)}
[data-portrait-fx="sbircia"] .p-sticker{display:none}
[data-portrait-fx="sbircia"] .portrait.is-hover .p-frame{background:var(--green);transform:scale(.94)}
[data-portrait-fx="sbircia"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% 5px -25% round 3px);translate:0 -10%;scale:1.16;transition:clip-path .7s cubic-bezier(.34,1.3,.64,1),filter .5s,scale .8s cubic-bezier(.34,1.56,.64,1),translate .75s cubic-bezier(.3,1.7,.6,1)}
[data-portrait-fx="sbircia"] .portrait.is-hover .p-hello{opacity:0;scale:.6}
@media(hover:none){[data-portrait-fx="sbircia"] .p-cut{translate:0 0;clip-path:inset(5px 5px 5px 5px round 3px)}[data-portrait-fx="sbircia"] .p-hello{display:none}[data-portrait-fx="sbircia"] .p-frame{background:var(--green)}}

/* 4. Ventaglio: le cornici dietro si aprono come carte */
[data-portrait-fx="ventaglio"] .p-frame-2,[data-portrait-fx="ventaglio"] .p-frame-3{display:block}
[data-portrait-fx="ventaglio"] .p-frame-2{background:var(--sculpture-front)}
[data-portrait-fx="ventaglio"] .p-frame-3{background:var(--hero-accent)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-frame-3{transform:rotate(-7deg) translate(-18px,6px)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-frame-2{transform:rotate(4deg) translate(14px,-4px)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-frame:not(.p-frame-2):not(.p-frame-3){transform:scale(.94)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% 5px -25% round 3px);scale:1.18;translate:0 -9%}

/* 5. Adesivo: la persona diventa uno sticker con bordo bianco che si stacca */
[data-portrait-fx="adesivo"] .p-cut{filter:grayscale(1) drop-shadow(0 0 0 #fff)}
[data-portrait-fx="adesivo"] .portrait.is-hover .p-frame{transform:scale(.93) rotate(1.5deg);background:var(--hero-accent)}
[data-portrait-fx="adesivo"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% -10% -25%);scale:1.12;translate:0 -7%;rotate:-4deg;filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(10px 12px 0 var(--ink))}
[data-portrait-fx="adesivo"] figure:nth-child(2) .portrait.is-hover .p-cut{rotate:4deg}
[data-portrait-fx="adesivo"] .p-cut{transition:clip-path .7s cubic-bezier(.34,1.3,.64,1),filter .4s,scale .8s cubic-bezier(.34,1.56,.64,1),translate .8s cubic-bezier(.34,1.56,.64,1),rotate .8s cubic-bezier(.34,1.56,.64,1)}

/* Mobile: l'etichetta del ruolo va sulla maglia, non sul viso; la testa esce meno e c'è più spazio
   tra una persona e l'altra, così non copre nome e LinkedIn di quella sopra. */
@media(max-width:800px){
 .people{row-gap:80px}
 .p-sticker{top:auto;bottom:9%;right:-8px;padding:7px 13px;font-size:13px;transform:rotate(-5deg) scale(0)}
 .portrait.is-hover .p-sticker{transform:rotate(-5deg) scale(1)}
 [data-portrait-fx="cornice"] .portrait.is-hover .p-cut{clip-path:inset(-30% -25% 5px -25% round 3px);scale:1.1;translate:0 -5%}
}

/* Selettore temporaneo per provare gli effetti */

/* flow.css */
/* Transizione di colore tra le sezioni: fondo e testo seguono la sezione attiva (flow.js). */
.color-stage{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--flow-bg)}
.color-stage>i{position:absolute;inset:0;opacity:0;will-change:opacity}
.flow-on body{background:transparent}
.flow-on main>section{background-color:transparent!important;color:var(--flow-fg)!important}
.flow-on .hero::before{opacity:.9}
.flow-on .inline-people img{border-color:transparent}
/* Il viola dell'hero si spegne prima del bordo, così non si taglia. */
.hero::before{-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%)}
/* I bottoni pieni/contornati seguono anche loro i colori del fondo. */
.flow-on main .pill.dark{background:var(--flow-fg);color:var(--flow-bg)}
.flow-on main .pill.outline{border-color:var(--flow-fg);color:var(--flow-fg);background:transparent}
/* Gli accenti della sezione agenzie (cyan su blu) sfumano verso il colore del testo insieme al fondo:
   nel passaggio al bianco non restano chiari sul chiaro. */
.agency{--section-accent:var(--agency-accent)}
.flow-on .agency h2 em,.flow-on .agency-stat strong,.flow-on .agency-copy li>span{color:var(--flow-accent)}
.flow-on .agency .pill.light{background:var(--flow-accent);color:var(--flow-bg)}

/* i18n.css */
/* Selettore lingua. */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;padding:0 10px;border:1px solid currentColor;border-radius:100px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;transition:background .3s var(--ease),color .3s var(--ease)}
.lang-switch:hover{background:currentColor}
.lang-switch:hover span{color:var(--hero-bg)}
.header .lang-switch{margin-right:-15px}
.menu-top .lang-switch{margin-left:auto;margin-right:12px}
.footer-grid .lang-link{border-bottom:1px solid currentColor}
@media(max-width:800px){.header .lang-switch{display:none}}

/* Selettore della lingua nell'header: "IT ▾" apre una card con le lingue (nome nella sua lingua + sigla) */
.lang-pick{position:relative;margin-left:auto;margin-right:12px}
.lang-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border:1px solid currentColor;border-radius:100px;background:none;color:inherit;font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.lang-btn i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.lang-btn[aria-expanded=true] i{transform:translateY(1px) rotate(-135deg)}
.lang-btn:hover,.lang-btn[aria-expanded=true]{background:currentColor}
.lang-btn:hover span,.lang-btn[aria-expanded=true] span{color:var(--hero-bg)}
.lang-btn:hover i,.lang-btn[aria-expanded=true] i{border-color:var(--hero-bg)}
@media(max-width:800px){.header .lang-pick{display:none}}
.lang-list{position:absolute;right:0;top:calc(100% + 10px);z-index:20;min-width:210px;margin:0;padding:8px;list-style:none;border-radius:22px;background:#17132f;color:#fff;border:1px solid #ffffff26;box-shadow:0 24px 60px -16px #17132f99;transform-origin:top right;transform:translateY(-6px) scale(.96);opacity:0;transition:transform .35s cubic-bezier(.34,1.3,.64,1),opacity .2s}
.lang-list.is-open{transform:none;opacity:1}
.lang-list a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:11px 14px;border-radius:14px;font-size:16px;font-weight:600;transition:background .2s,color .2s}
.lang-list a b{font-size:11px;letter-spacing:.08em;opacity:.55}
.lang-list a:hover,.lang-list a:focus-visible{background:#fff;color:#17132f}
.lang-list a[aria-current]{color:var(--green)}
.lang-list a[aria-current] span::after{content:'';display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:currentColor;vertical-align:middle}
.lang-list a[aria-current]:hover{color:#17132f}
/* menu da telefono: le lingue come pillole sopra il bottone */
.menu-foot .ip-langs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0}
.menu-foot .ip-langs a{display:block;min-width:42px;padding:8px 11px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:99px;font-size:13px;font-weight:700;letter-spacing:.06em;text-align:center}
.menu-foot .ip-langs a[aria-current]{background:#fff;color:#17132f;border-color:#fff}
@media(prefers-reduced-motion:reduce){.lang-list,.lang-btn i{transition:none}}
/* il menu resta al centro dell'header anche con il selettore della lingua a destra */
/* menu al centro: logo a sinistra e gruppo a destra (lingua, Parliamone, menu) hanno la stessa larghezza;
   il menu non si stacca dall'header, così la tendina Servizi resta larga quanto l'header */
/* il contenitore del logo si allarga (per centrare il menu), il logo no: resta della sua misura, allineato a sinistra */
.header>.brand{flex:1 1 0;width:auto;display:flex}
.header>.brand img{width:151px;max-width:100%}
.header-end{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:inherit}
.header-end .lang-pick{margin-left:0}
@media(max-width:800px){.header>.brand{flex:0 1 auto}.header>.brand img{width:132px}.header-end{flex:1 1 auto}}
@media(max-width:520px){.header>.brand img{width:115px}}
/* tendina aperta: l'header passa sopra la foglia 3D dell'apertura */
.header:has(.lang-list:not([hidden])){z-index:60;transition-delay:0s}
/* lingua attuale: fondo leggero e pallino; al passaggio o col focus scura su bianco come le altre */
.lang-list a[aria-current]{background:#ffffff14}
.lang-list a[aria-current]:focus-visible,.lang-list a[aria-current]:hover{color:#17132f;background:#fff}

/* blocks.css */
/* 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}
}

/* bench.css */
/* Banco da lavoro: attrezzi-adesivo (stili Banco e Nastro) */
.tool{display:inline-flex;align-items:center;gap:.5em;padding:.5em .95em .5em .7em;border:2.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:clamp(18px,1.9vw,31px);font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap;box-shadow:0 5px 0 rgba(0,0,0,.35);user-select:none;-webkit-user-select:none}
.tool .ico{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.tool .ico-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool.tone-0{background:#00ffd1}
.tool.tone-1{background:#ff96e6}
.tool.tone-2{background:#fff}
.tool.tone-3{background:#edff38}
.tool.tone-4{background:#c9b8ff}

/* --- Banco --- */
.band-banco{overflow:hidden;padding:clamp(56px,7vw,110px) 0 0}
.bench-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:0 var(--g);margin-bottom:clamp(20px,3vw,40px)}
.bench-head h2{font-size:clamp(44px,6.6vw,112px);font-weight:800;line-height:.92;letter-spacing:-.045em;max-width:9ch}
.bench-hint{font-size:14px;opacity:.7;padding-bottom:.6em;display:none}
@media (hover:hover) and (pointer:fine){.bench-hint{display:block}}
.motion-off .bench-hint{display:none}
/* il tappetino da taglio: griglia fine, righe maggiori ogni 5 quadretti, righello sul bordo */
.bench{position:relative;list-style:none;margin:0 var(--g);padding:clamp(28px,4vw,56px) clamp(16px,3vw,48px);display:flex;flex-wrap:wrap;justify-content:center;align-content:end;gap:14px 10px;min-height:clamp(300px,28vw,430px);border:2px solid #ffffff2e;border-bottom:0;border-radius:18px 18px 0 0;
 background:
  repeating-linear-gradient(90deg,#ffffff38 0 1px,transparent 1px 100%) 0 0/100% 12px no-repeat,
  linear-gradient(#ffffff17 1px,transparent 1px) 0 0/160px 160px,
  linear-gradient(90deg,#ffffff17 1px,transparent 1px) 0 0/160px 160px,
  linear-gradient(#ffffff0a 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,#ffffff0a 1px,transparent 1px) 0 0/32px 32px,
  #251d55}
.bench>li{display:block}
.bench:not(.is-live)>li:nth-child(odd) .tool{rotate:-4deg}
.bench:not(.is-live)>li:nth-child(3n) .tool{rotate:6deg}
.bench:not(.is-live)>li:nth-child(4n+1) .tool{rotate:2deg}
/* con la fisica attiva ogni attrezzo è posizionato da bench.js */
.bench.is-live{display:block;height:clamp(300px,28vw,430px);padding:0;overflow:visible}
.bench.is-live>li{display:contents}
.bench.is-live .tool{rotate:none;position:absolute;left:0;top:0;transform:translate3d(-999px,-999px,0);will-change:transform;cursor:grab}
.bench.is-dragging,.bench.is-dragging .tool{cursor:grabbing}
.tool.is-held{box-shadow:0 14px 0 rgba(0,0,0,.3)}
@media(max-width:700px){
 .bench-head{display:block}
 .tool{font-size:16px;border-width:2px}
 .bench,.bench.is-live{min-height:0;height:auto;margin:0 12px}
 .bench.is-live{height:min(440px,110vw);overflow:clip}
}

/* --- Nastro: parole sopra, loghi sotto in senso contrario --- */
.band-nastro .client-window+.client-window{margin-top:18px}
.band-nastro .client-set{gap:18px;padding-right:18px}
.band-nastro .client-set>span.tool{color:var(--ink);transform:none}
.band-nastro .client-set>.tool{font-size:clamp(20px,2.2vw,36px);transition:rotate .35s var(--ease),scale .35s var(--ease)}
.band-nastro .client-set>.tool:hover{rotate:-5deg;scale:1.06}
.band-nastro .client-track[data-reverse] .tool{font-size:clamp(17px,1.6vw,26px)}

/* brief.css */
/* Form "Parliamone": pannello laterale a passi (brief.js). */
.brief{position:fixed;inset:0 0 0 auto;margin:0;width:min(740px,100vw);height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-left:4px solid var(--ink);background:#fff;color:var(--ink);overflow:clip}
.brief[open]{animation:brief-in .55s var(--ease)}
.brief::backdrop{background:#17132fb3;backdrop-filter:blur(6px);animation:brief-fade .4s ease}
@keyframes brief-in{from{transform:translateX(100%)}}
@keyframes brief-fade{from{opacity:0}}
.motion-off .brief[open],.motion-off .brief::backdrop{animation:none}
.brief-form{display:flex;flex-direction:column;height:100%}

.brief-top{position:relative;display:flex;align-items:center;gap:16px;padding:22px 28px 20px}
.brief-title{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.brief-count{margin-left:auto;font-size:14px;color:color-mix(in srgb,var(--ink) 65%,transparent)}
.brief-close{width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;background:transparent;font-size:24px;line-height:1;transition:transform .35s var(--ease),background .3s var(--ease)}
.brief-close:hover{background:var(--green);transform:rotate(90deg)}
.brief-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#dfdbf1}
.brief-bar i{position:absolute;inset:0;background:#491bd4;transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease)}

.brief-body{flex:1;min-height:0;overflow-y:auto;padding:clamp(28px,5vh,56px) 28px 28px;overscroll-behavior:contain}
.brief-step{margin:0;padding:0;border:0;min-width:0}
.brief-q{padding:0;font-size:clamp(30px,4.2vw,42px);line-height:1.02;letter-spacing:-.04em;font-weight:800}
.brief-hint{margin-top:12px;font-size:17px;color:color-mix(in srgb,var(--ink) 70%,transparent)}

.brief-fields{display:grid;gap:16px;margin-top:30px}
.brief-field{display:grid;gap:7px;font-size:15px;font-weight:600}
.brief-field small{font-weight:400;opacity:.65;font-size:inherit}
.brief-field input,.brief-field textarea{width:100%;padding:14px 16px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font:400 18px/1.4 Cabinet,Frecce,sans-serif}
.brief-field textarea{resize:vertical;min-height:170px}
.brief-field input:focus,.brief-field textarea:focus{outline:none;box-shadow:5px 5px 0 var(--green)}
.brief-consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:15px;line-height:1.4;cursor:pointer}
.brief-consent input{flex-shrink:0;width:22px;height:22px;margin:0;accent-color:#491bd4}
.brief-consent a{text-decoration:underline;text-underline-offset:.18em;white-space:nowrap}
.brief-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.brief-summary{margin:28px 0 0;border-top:2px solid var(--ink)}
.brief-summary>div{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.brief-summary dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.brief-summary dd{grid-column:1;margin:0;font-size:17px;white-space:pre-line;overflow-wrap:anywhere}
.brief-summary button{grid-column:2;grid-row:1/3;align-self:center;padding:6px 0;border:0;background:none;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:.2em}

.brief-done{text-align:left;outline:none}
.brief-done img{margin-bottom:26px}
.brief-done .pill{margin-top:34px}
.brief-error{margin-top:20px;padding:12px 16px;border-radius:10px;background:#ffe3f5;color:#8a0059;font-size:15px}

.brief-nav{display:flex;align-items:center;gap:14px;padding:16px 28px calc(16px + env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.brief-back,.brief-skip{padding:10px 4px;border:0;background:none;font-size:16px;font-weight:600}
.brief-skip{opacity:.7;text-decoration:underline;text-underline-offset:.2em}
.brief-back:hover,.brief-skip:hover{opacity:1;color:#491bd4}
.brief-next{margin:0 0 0 auto}
.brief .pill.dark{background:var(--ink);color:#fff}
.brief-next:disabled{opacity:.6;transform:none}
.brief-nav:has(.brief-back[hidden]):has(.brief-skip[hidden]):has(.brief-next[hidden]){display:none}

/* Gruppi di domande nello stesso passo. */
.brief-group{margin:30px 0 0;padding:0;border:0;min-width:0}
.brief-group+.brief-group{margin-top:26px}
.brief-group:has(.brief-field)+.brief-group:has(.brief-field),.brief-group:has(.brief-field)+.brief-group:has(.brief-consent){margin-top:16px}
.brief-label{padding:0;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.brief-note{margin:-4px 0 12px;font-size:15px;color:color-mix(in srgb,var(--ink) 70%,transparent)}

/* Scelte: etichette tipo adesivo, singole e multiple. Il segno a sinistra (cerchio per le singole,
   "+" per le multiple) diventa una spunta; l'adesivo scelto prende un colore della palette,
   si inclina un poco e lascia l'ombra piena come le card del sito. */
.brief-chips{display:flex;flex-wrap:wrap;gap:10px}
.brief-chip{position:relative;display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 18px 8px 8px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-size:16px;font-weight:500;line-height:1.2;text-align:left;cursor:pointer;transition:background .25s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.brief-chip:has(small){border-radius:18px}
.brief-chip input{position:absolute;opacity:0;pointer-events:none}
.brief-chip b{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);font-weight:700;font-size:18px;line-height:1;transition:transform .35s var(--ease),background .25s}
.is-multi .brief-chip b::before{content:"+"}
.is-single .brief-chip b::before{content:"";width:10px;height:10px;border:2px solid currentColor;border-radius:50%}
.brief-chip:hover{background:color-mix(in srgb,var(--c) 45%,#fff)}
.brief-chip:has(:checked){background:var(--c);color:var(--ink);box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px) rotate(var(--tilt));animation:brief-pop .4s var(--ease)}
.brief-chip:has(:checked) b{background:var(--ink);color:var(--c);transform:none}
.brief-chip:has(:checked) b::before{content:"✓";width:auto;height:auto;border:0;font-size:15px}
.brief-chip:has(:focus-visible){outline:3px solid #491bd4;outline-offset:3px}
.motion-off .brief-chip{animation:none}
.brief-chip:has([value=non-so]),.brief-chip:has([value=altro]){border-style:dashed}
.tone-0{--c:#00ffd1;--tilt:-1.2deg}.tone-1{--c:#ff78d7;--tilt:.9deg}.tone-2{--c:#edff38;--tilt:-.7deg}.tone-3{--c:#b9a6ff;--tilt:1.3deg}
@keyframes brief-pop{40%{transform:translate(-2px,-2px) rotate(var(--tilt)) scale(1.05)}}
/* Domanda da sola nel passo: adesivi grandi, due per riga su desktop. */
.is-big{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.is-big .brief-chip{min-height:70px;padding:14px 18px 14px 14px;border-radius:18px;font-size:18px}
.is-big .brief-chip b{width:32px;height:32px}

/* Riga di spiegazione sotto le risposte e sotto i gruppi. */
.brief-opt{display:flex;flex-direction:column;gap:3px;min-width:0}
.brief-opt small{font-size:14px;font-weight:400;line-height:1.3;opacity:.68}
.brief-chip:has(:checked) small{opacity:.85}
.brief-links{margin-top:18px}
.brief-links input{font-size:17px}

/* Campo per scrivere "Altro": compare solo quando "Altro" è scelto. */
.brief-other{display:none;margin-top:12px}
.brief-pick:has(input[value=altro]:checked) .brief-other{display:block;animation:brief-fade .3s ease}
.brief-other textarea{display:block;width:100%;min-height:76px;padding:13px 16px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font:400 17px/1.4 Cabinet,Frecce,sans-serif;resize:vertical}
.brief-other textarea:focus{outline:none;box-shadow:5px 5px 0 var(--green)}

/* Maniglia del foglio: solo su mobile. */
.brief-handle{display:none}
.brief.is-closing{pointer-events:none}

/* Mobile: foglio che sale dal basso, lascia vedere la pagina sopra e si chiude trascinandolo giù. */
@media(max-width:700px){
 .brief{inset:auto 0 0 0;width:100%;height:calc(100dvh - 64px);border:0;border-top:4px solid var(--ink);border-radius:22px 22px 0 0;transition:transform .3s var(--ease)}
 .brief.is-dragging{transition:none}
 .brief[open]{animation:brief-up .5s var(--ease)}
 .brief::backdrop{opacity:calc(1 - var(--drag,0))}
 @keyframes brief-up{from{transform:translateY(100%)}}
 .brief-handle{display:block;padding:10px 0 2px;touch-action:none;cursor:grab}
 .brief-handle i{display:block;width:44px;height:5px;margin:0 auto;border-radius:5px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
 .brief-top{padding:6px 18px 14px;touch-action:none}
 .brief-body{padding:24px 18px 22px}
 .brief-nav{padding-left:18px;padding-right:18px}
 .is-big{grid-template-columns:1fr}
  .brief-q{font-size:30px}
}

/* visuals.css */
/* Illustrazioni delle pagine interne: base comune. Ogni illustrazione ha il suo file visuals-gruppo-*.css.
   Stile: riquadri bianchi con bordo inchiostro e ombra piena (come le schede della home), colori Ortica,
   movimenti lenti e piccoli. Niente JavaScript. */
.vis{--vi:#17132f;--vg:#00ffd1;--vr:#ff78d7;--vf:#ff40ca;--vv:#4020e9;--vy:#edff38;--vw:#fff;
 position:relative;width:100%;aspect-ratio:5/4;font-family:Cabinet,Frecce,sans-serif;color:var(--vi);font-size:clamp(10px,.95vw,14px);line-height:1.3;user-select:none;pointer-events:none}
.vis *{box-sizing:border-box}
.vis .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0}
/* Finestra: bordo, ombra piena, barra con i tre pallini. */
.vis .win{position:absolute;background:var(--vw);border:2.5px solid var(--vi);border-radius:10px;box-shadow:7px 7px 0 var(--vi);overflow:hidden}
.vis .win-bar{display:flex;align-items:center;gap:6px;height:2.4em;padding:0 .9em;border-bottom:2px solid var(--vi);font-weight:700;font-size:.9em}
.vis .win-bar i{width:.75em;height:.75em;border-radius:50%;border:1.5px solid var(--vi);flex:none}
.vis .win-bar i:nth-child(1){background:var(--vf)}.vis .win-bar i:nth-child(2){background:var(--vy)}.vis .win-bar i:nth-child(3){background:var(--vg)}
.vis .win-bar b{margin-left:.6em;font-weight:700}
/* Etichette, pastiglie, righe "finte" di testo. */
.vis .chip{display:inline-flex;align-items:center;gap:.4em;padding:.25em .75em;border:1.5px solid var(--vi);border-radius:99px;font-weight:700;font-size:.85em;background:var(--vw);white-space:nowrap}
.vis .chip.ok{background:var(--vg)}.vis .chip.warn{background:var(--vy)}.vis .chip.hot{background:var(--vf);color:var(--vw)}.vis .chip.dark{background:var(--vi);color:var(--vw)}
.vis .line{display:block;height:.55em;border-radius:99px;background:color-mix(in srgb,var(--vi) 16%,transparent)}
/* Cursore con nome, come in Figma. */
/* Cursore finto con nome. Classe sua: .cursor è la foglia che segue il mouse e app.js la cerca per classe. */
.vis .vis-cursor{position:absolute;display:flex;align-items:flex-start;gap:2px;z-index:5}
.vis .vis-cursor svg{width:1.4em;height:1.4em;filter:drop-shadow(1px 1px 0 var(--vi))}
.vis .vis-cursor span{margin-top:1.1em;padding:.2em .6em;border-radius:6px;font-weight:700;font-size:.8em;line-height:1.3;color:var(--vw);background:var(--vv);white-space:nowrap}
/* Movimenti di base, riusabili. */
@keyframes vis-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes vis-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes vis-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vis-spin{to{transform:rotate(360deg)}}
.vis .float{animation:vis-float 6s ease-in-out infinite}
.vis .float.d1{animation-delay:-2s}.vis .float.d2{animation-delay:-4s}
@media (prefers-reduced-motion:reduce){.vis *,.vis *::before,.vis *::after{animation:none!important;transition:none!important}}

/* visuals-gruppo-a.css */
/* Illustrazioni del gruppo A: servizi, siti web, UI/UX, Payload, WordPress, agenzie. */
/* Scalano con la larghezza dell'illustrazione: 1em = 2.5% della larghezza (40em × 32em in tutto). */
.vis-servizi,.vis-siti-web,.vis-ui-ux,.vis-payload,.vis-wordpress,.vis-agenzie{container-type:inline-size}
.vis-servizi>*,.vis-siti-web>*,.vis-ui-ux>*,.vis-payload>*,.vis-wordpress>*,.vis-agenzie>*{font-size:2.5cqw}

/* ---------- Servizi: tutto quello che facciamo, sovrapposto ---------- */
.vis-servizi .sv-site{left:2%;top:6%;width:58%;height:52%}
.vis-servizi .sv-hero{padding:1em 1.1em .6em;display:grid;gap:.5em;background:var(--vg);border-bottom:2px solid var(--vi)}
.vis-servizi .sv-hero .line{height:.8em;width:80%;background:var(--vi)}
.vis-servizi .sv-hero .line.s{width:55%;height:.55em;opacity:.4}
.vis-servizi .sv-btn{width:5em;height:1.5em;border-radius:99px;background:var(--vi)}
.vis-servizi .sv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:.8em 1.1em}
.vis-servizi .sv-cards i{height:4.4em;border:1.5px solid var(--vi);border-radius:5px;background:var(--vw)}
.vis-servizi .sv-cards i:nth-child(2){background:var(--vr)}
.vis-servizi .sv-text{display:grid;gap:.45em;padding:0 1.1em}.vis-servizi .sv-text .line{width:70%}.vis-servizi .sv-text .line.s{width:45%}
.vis-servizi .sv-board{right:2%;top:2%;width:42%;height:40%;background:#f3f1ff}
.vis-servizi .sv-frames{display:flex;gap:.7em;padding:1em}
.vis-servizi .sv-frames i{flex:1;height:7.4em;border:1.5px dashed var(--vi);border-radius:5px;background:var(--vw)}
.vis-servizi .sv-frames i.on{border:2px solid var(--vv);background:var(--vy);box-shadow:0 0 0 .3em color-mix(in srgb,var(--vv) 20%,transparent)}
.vis-servizi .sv-measure{position:absolute;right:1.1em;bottom:.7em;padding:.1em .4em;border-radius:4px;background:var(--vf);color:var(--vw);font-size:.8em}
.vis-servizi .sv-term{left:8%;bottom:4%;width:48%;height:34%;background:var(--vi);color:var(--vw)}
.vis-servizi .sv-term .win-bar{border-color:#ffffff33}
.vis-servizi .sv-code{padding:.8em 1em;font-size:.95em;display:grid;gap:.25em}
.vis-servizi .sv-code b{color:var(--vf)}
.vis-servizi .sv-code .ok{color:var(--vg)}
.vis-servizi .sv-code .ok:nth-child(2){animation:vis-in .6s 1s both}
.vis-servizi .sv-code .ok:nth-child(3){animation:vis-in .6s 1.8s both}
.vis-servizi .sv-code .blink{animation:vis-pulse 1s steps(2) infinite}
.vis-servizi .sv-phone{position:absolute;right:9%;bottom:3%;width:24%;height:56%;display:flex;flex-direction:column;border:2.5px solid var(--vi);border-radius:1.6em;background:var(--vw);box-shadow:7px 7px 0 var(--vi);padding:.5em;z-index:3}
.vis-servizi .sv-notch{width:38%;height:.6em;margin:0 auto .7em;border-radius:99px;background:var(--vi)}
.vis-servizi .sv-screen{display:grid;gap:.55em;padding:.3em}
.vis-servizi .sv-pill{padding:.45em .6em;border-radius:.7em;background:var(--vv);color:var(--vw);font-weight:700;font-size:.8em;animation:vis-in .8s 2.4s both}
.vis-servizi .sv-screen i{height:2.4em;border-radius:.6em;border:1.5px solid var(--vi);background:var(--vy)}
.vis-servizi .sv-screen i:nth-of-type(2){background:var(--vr)}
.vis-servizi .sv-screen i.s{height:1.2em;width:60%;background:var(--vg)}
.vis-servizi .sv-screen i{height:3em}
.vis-servizi .sv-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:.6em 0 .3em;border-top:1.5px solid var(--vi)}
.vis-servizi .sv-tabs b{width:1em;height:1em;border-radius:50%;background:color-mix(in srgb,var(--vi) 20%,transparent)}.vis-servizi .sv-tabs b:first-child{background:var(--vv)}
.vis-servizi .sv-chip{position:absolute;left:30%;top:60%;z-index:4;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--vi)}

/* ---------- Siti web: la pagina si compone ---------- */
.vis-siti-web .sw-win{inset:3% 4% 6% 2%}
.vis-siti-web .sw-page{padding:1em 1.2em;display:grid;gap:.8em}
.vis-siti-web .sw-page>*{animation:sw-build 9s ease-in-out infinite both}
.vis-siti-web .sw-nav{display:flex;align-items:center;gap:.8em;animation-delay:0s}
.vis-siti-web .sw-nav b{margin-right:auto;font-weight:800}
.vis-siti-web .sw-nav span{width:3em;height:.5em;border-radius:99px;background:color-mix(in srgb,var(--vi) 25%,transparent)}
.vis-siti-web .sw-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1em;align-items:center;padding:1em;border:2px solid var(--vi);border-radius:8px;background:var(--vy);animation-delay:.3s!important}
.vis-siti-web .sw-hero>div{display:grid;gap:.5em}
.vis-siti-web .sw-hero strong{font-size:1.9em;font-weight:800;letter-spacing:-.04em;line-height:1}
.vis-siti-web .sw-hero .line{width:90%}.vis-siti-web .sw-hero .line.s{width:60%}
.vis-siti-web .sw-hero em{justify-self:start;font-style:normal;font-weight:700;font-size:.85em;padding:.35em .9em;border-radius:99px;background:var(--vi);color:var(--vw)}
.vis-siti-web .sw-img{aspect-ratio:1;border:2px solid var(--vi);border-radius:50% 50% 8px 8px;background:radial-gradient(circle at 30% 30%,var(--vf),var(--vv))}
.vis-siti-web .sw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;animation-delay:.6s!important}
.vis-siti-web .sw-grid i{height:4.2em;border:2px solid var(--vi);border-radius:6px;background:var(--vw);box-shadow:3px 3px 0 var(--vi)}
.vis-siti-web .sw-grid i:nth-child(1){background:var(--vg)}.vis-siti-web .sw-grid i:nth-child(3){background:var(--vr)}
.vis-siti-web .sw-foot{display:grid;gap:.4em;padding:.8em 1em;border-radius:6px;background:var(--vi);animation-delay:.9s!important}
.vis-siti-web .sw-foot .line{background:#ffffff55;width:40%}.vis-siti-web .sw-foot .line.s{width:25%}
@keyframes sw-build{0%{opacity:0;transform:translateY(14px) scale(.97)}8%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
.vis-siti-web .sw-tag{position:absolute;left:-1%;top:44%;transform:rotate(-6deg);font-family:ui-monospace,Menlo,monospace;box-shadow:3px 3px 0 var(--vf)}
.vis-siti-web .sw-cur{left:60%;top:30%;animation:sw-cur 9s ease-in-out infinite}
.vis-siti-web .sw-cur span{color:var(--vw)}
@keyframes sw-cur{0%,10%{transform:translate(0,0)}30%{transform:translate(-8em,6em)}55%{transform:translate(4em,10em)}80%{transform:translate(-3em,1em)}100%{transform:translate(0,0)}}

/* ---------- UI/UX: tavola di Figma ---------- */
.vis-ui-ux .ux-canvas{inset:4% 4% 8% 1%;background:#f1efff;background-image:radial-gradient(color-mix(in srgb,var(--vi) 18%,transparent) 1px,transparent 1.5px);background-size:1.2em 1.2em}
.vis-ui-ux .ux-canvas .win-bar{background:var(--vw)}
.vis-ui-ux .ux-grid{display:grid;grid-template-columns:1fr auto 1.15fr;align-items:center;gap:.8em;padding:2.4em 1.4em 1.4em}
.vis-ui-ux .ux-frame{position:relative;height:18em;border-radius:8px}
.vis-ui-ux .ux-label{position:absolute;top:-1.5em;left:0;font-size:.75em;font-weight:700;opacity:.7}
.vis-ui-ux .ux-wire{border:1.5px dashed var(--vi);background:var(--vw);padding:1em;display:grid;align-content:start;gap:.6em}
.vis-ui-ux .ux-wire .x{height:7em;border:1.5px solid color-mix(in srgb,var(--vi) 40%,transparent);background:linear-gradient(to top right,transparent calc(50% - 1px),color-mix(in srgb,var(--vi) 40%,transparent),transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),color-mix(in srgb,var(--vi) 40%,transparent),transparent calc(50% + 1px))}
.vis-ui-ux .ux-wire b{width:55%;height:1.6em;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--vi) 40%,transparent)}
.vis-ui-ux .ux-arrow{font-size:1.8em;font-weight:800;color:var(--vv)}
.vis-ui-ux .ux-ui{display:grid;place-items:center}
.vis-ui-ux .ux-card{width:100%;height:100%;padding:1em;display:grid;align-content:start;gap:.55em;border:2.5px solid var(--vi);border-radius:10px;background:var(--vw);box-shadow:5px 5px 0 var(--vi)}
.vis-ui-ux .ux-card i{height:7.5em;border-radius:7px;background:linear-gradient(135deg,var(--vg),var(--vy))}
.vis-ui-ux .ux-card strong{font-size:1.4em;font-weight:800;letter-spacing:-.03em}
.vis-ui-ux .ux-card em{justify-self:start;font-style:normal;font-weight:700;font-size:.85em;padding:.4em 1em;border-radius:99px;background:var(--vv);color:var(--vw);animation:ux-btn 5s ease-in-out infinite}
@keyframes ux-btn{0%,40%{background:var(--vv)}50%,90%{background:var(--vf)}100%{background:var(--vv)}}
.vis-ui-ux .ux-sel{position:absolute;inset:-.4em;border:1.5px solid var(--vv);pointer-events:none}
.vis-ui-ux .ux-sel i{position:absolute;width:.6em;height:.6em;background:var(--vw);border:1.5px solid var(--vv)}
.vis-ui-ux .ux-sel i:nth-child(1){left:-.35em;top:-.35em}.vis-ui-ux .ux-sel i:nth-child(2){right:-.35em;top:-.35em}.vis-ui-ux .ux-sel i:nth-child(3){left:-.35em;bottom:-.35em}.vis-ui-ux .ux-sel i:nth-child(4){right:-.35em;bottom:-.35em}
.vis-ui-ux .ux-measure{position:absolute;right:.2em;top:-1.6em;padding:.1em .4em;border-radius:4px;background:var(--vf);color:var(--vw);font-size:.8em}
.vis-ui-ux .ux-swatches{display:flex;align-items:center;gap:.5em;padding:0 1.2em}
.vis-ui-ux .ux-swatches i{width:1.6em;height:1.6em;border-radius:50%;border:1.5px solid var(--vi)}
.vis-ui-ux .ux-swatches i:nth-child(1){background:var(--vg)}.vis-ui-ux .ux-swatches i:nth-child(2){background:var(--vf)}.vis-ui-ux .ux-swatches i:nth-child(3){background:var(--vv)}.vis-ui-ux .ux-swatches i:nth-child(4){background:var(--vy)}
.vis-ui-ux .ux-swatches span{margin-left:.6em;font-size:.8em;opacity:.7}
.vis-ui-ux .ux-c1{left:70%;top:58%;animation:ux-c1 7s ease-in-out infinite}
.vis-ui-ux .ux-c2{left:22%;top:66%;animation:ux-c2 8s ease-in-out infinite}
@keyframes ux-c1{0%,100%{transform:translate(0,0)}35%{transform:translate(-3em,-5em)}70%{transform:translate(2em,-2em)}}
@keyframes ux-c2{0%,100%{transform:translate(0,0)}40%{transform:translate(4em,-3em)}75%{transform:translate(1em,2em)}}
.vis-ui-ux .ux-comment{position:absolute;right:0;top:12%;z-index:6;display:flex;align-items:center;gap:.5em;padding:.45em .8em .45em .45em;border:2px solid var(--vi);border-radius:1.2em 1.2em 1.2em .2em;background:var(--vy);font-weight:700;font-size:.9em;box-shadow:3px 3px 0 var(--vi);animation:vis-float 5s ease-in-out infinite}
.vis-ui-ux .ux-comment b{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--vv);color:var(--vw);font-size:.85em}

/* ---------- Payload: pannello e anteprima ---------- */
.vis-payload .pl-admin{left:1%;top:3%;width:52%;height:92%;background:var(--vi);color:var(--vw)}
.vis-payload .pl-admin .win-bar{border-color:#ffffff33}
.vis-payload .pl-body{padding:1em;display:grid;gap:.45em}
.vis-payload .pl-lab{font-size:.75em;font-weight:700;opacity:.65;margin-top:.3em}
.vis-payload .pl-field{padding:.55em .7em;border:1.5px solid #ffffff55;border-radius:6px;background:#ffffff12;font-size:.95em;overflow:hidden;white-space:nowrap}
.vis-payload .pl-block{display:flex;align-items:center;gap:.6em;padding:.55em .7em;border:1.5px solid #ffffff40;border-radius:6px;font-weight:700;font-size:.9em}
.vis-payload .pl-block b{opacity:.5}
.vis-payload .pl-block:nth-of-type(2){border-color:var(--vg);background:color-mix(in srgb,var(--vg) 14%,transparent)}
.vis-payload .pl-block.add{justify-content:center;border-style:dashed;opacity:.6}
.vis-payload .pl-media{display:flex;align-items:center;gap:.6em;padding:.4em;border:1.5px solid #ffffff40;border-radius:6px;font-size:.85em}
.vis-payload .pl-media i{width:2.6em;height:2em;border-radius:4px;background:linear-gradient(135deg,var(--vf),var(--vv))}
.vis-payload .pl-seo{padding:.85em .7em}.vis-payload .pl-seo .line{background:#ffffff40;width:70%}
.vis-payload .chip{color:var(--vi)}
.vis-payload .pl-actions{display:flex;gap:.5em;margin-top:.5em}
.vis-payload .pl-actions .chip.dark{background:var(--vg);color:var(--vi);border-color:var(--vg)}
.vis-payload .pl-preview{right:1%;top:12%;width:50%;height:76%;z-index:2}
.vis-payload .pl-page{position:relative;padding:1.1em;display:grid;gap:.6em}
.vis-payload .pl-live{display:inline-flex;align-items:center;gap:.4em;justify-self:start;font-size:.75em;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.vis-payload .pl-live i{width:.6em;height:.6em;border-radius:50%;background:var(--vf);animation:vis-pulse 1.4s infinite}
.vis-payload .pl-page strong{font-size:1.75em;font-weight:800;letter-spacing:-.04em;line-height:1.05;min-height:2.1em}
.vis-payload .pl-page .line{width:90%}.vis-payload .pl-page .line.s{width:65%}
.vis-payload .pl-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:.3em}
.vis-payload .pl-cards i{height:6em;border:2px solid var(--vi);border-radius:6px;background:var(--vr)}
.vis-payload .pl-cards i+i{background:var(--vy)}
.vis-payload .pl-foot{display:grid;gap:.45em;margin-top:.6em;padding:.9em;border-radius:6px;background:var(--vi)}.vis-payload .pl-foot .line{background:#ffffff55;width:60%}.vis-payload .pl-foot .line.s{width:35%}
/* Il titolo si scrive nello stesso momento nel campo e nell'anteprima. */
.vis-payload .pl-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:pl-type 7s steps(22) infinite}
.vis-payload .pl-field .pl-type{border-right:2px solid var(--vg)}
.vis-payload .pl-page .pl-type{white-space:normal;display:block;animation:pl-show 7s steps(22) infinite}
@keyframes pl-type{0%{max-width:0}45%,85%{max-width:100%}100%{max-width:0}}
@keyframes pl-show{0%{clip-path:inset(0 100% 0 0)}45%,85%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.vis-payload .pl-link{position:absolute;left:48%;top:46%;z-index:3;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;border:2px solid var(--vi);background:var(--vg);font-weight:800;box-shadow:3px 3px 0 var(--vi)}

/* ---------- WordPress: bacheca e plugin ---------- */
.vis-wordpress .wp-win{inset:3% 6% 5% 1%}
.vis-wordpress .wp-top{display:flex;align-items:center;gap:.6em;height:2.8em;padding:0 .9em;background:var(--vi);color:var(--vw)}
.vis-wordpress .wp-logo svg{width:1.5em;height:1.5em;fill:var(--vw);display:block}
.vis-wordpress .wp-staging{margin-left:auto;color:var(--vi);animation:vis-in .8s .4s both}
.vis-wordpress .wp-body{display:grid;grid-template-columns:3.2em 1fr;height:calc(100% - 2.8em)}
.vis-wordpress .wp-side{display:grid;align-content:start;gap:.8em;padding:1em .8em;background:#ecebf5;border-right:2px solid var(--vi)}
.vis-wordpress .wp-side i{height:1.5em;border-radius:5px;background:color-mix(in srgb,var(--vi) 18%,transparent)}
.vis-wordpress .wp-side i.on{background:var(--vv)}
.vis-wordpress .wp-main{padding:1em 1.1em}
.vis-wordpress .wp-main strong{display:block;font-size:1.4em;font-weight:800;letter-spacing:-.03em;margin-bottom:.5em}
.vis-wordpress .wp-main ul{list-style:none;margin:0;padding:0;display:grid;gap:.45em}
.vis-wordpress .wp-main li{display:flex;align-items:center;gap:.6em;padding:.6em .7em;border:1.5px solid var(--vi);border-radius:7px;background:var(--vw)}
.vis-wordpress .wp-main li:nth-child(5){background:#fff3fb}
.vis-wordpress .wp-ico{width:1.5em;height:1.5em;border-radius:5px;background:var(--vv);flex:none}
.vis-wordpress li:nth-child(2) .wp-ico{background:var(--vg)}.vis-wordpress li:nth-child(3) .wp-ico{background:var(--vy)}.vis-wordpress li:nth-child(4) .wp-ico{background:var(--vr)}.vis-wordpress li:nth-child(5) .wp-ico{background:var(--vf)}
.vis-wordpress .wp-main li b{font-weight:700;margin-right:auto}
.vis-wordpress .wp-main .chip{font-size:.75em}
.vis-wordpress .wp-testing{animation:wp-test 6s ease-in-out infinite}
@keyframes wp-test{0%,45%{background:var(--vy)}55%,100%{background:var(--vg)}}
.vis-wordpress .wp-toggle{position:relative;width:2.4em;height:1.3em;border-radius:99px;border:1.5px solid var(--vi);background:#ddd;flex:none}
.vis-wordpress .wp-toggle i{position:absolute;top:.12em;left:.15em;width:.85em;height:.85em;border-radius:50%;background:var(--vw);border:1.5px solid var(--vi);transition:left .3s}
.vis-wordpress .wp-toggle.on{background:var(--vv)}
.vis-wordpress .wp-toggle.on i{left:1.2em}
.vis-wordpress li:nth-child(3) .wp-toggle{animation:wp-tog 6s ease-in-out infinite}
.vis-wordpress li:nth-child(3) .wp-toggle i{animation:wp-knob 6s ease-in-out infinite}
@keyframes wp-tog{0%,45%{background:#ddd}55%,100%{background:var(--vv)}}
@keyframes wp-knob{0%,45%{left:.15em}55%,100%{left:1.2em}}
.vis-wordpress .wp-backup{display:flex;align-items:center;gap:.6em;margin-top:.7em;padding:.6em .8em;border-radius:7px;background:var(--vi);color:var(--vw);font-weight:700;font-size:.9em}
.vis-wordpress .wp-backup span{color:var(--vg)}.vis-wordpress .wp-backup b{margin-left:auto;color:var(--vg)}
.vis-wordpress .wp-badge{position:absolute;right:0;bottom:0;z-index:3;display:grid;place-items:center;width:5.5em;height:5.5em;border-radius:50%;border:2.5px solid var(--vi);background:var(--vg);box-shadow:5px 5px 0 var(--vi)}
.vis-wordpress .wp-badge svg{width:62%;height:62%;fill:var(--vi)}

/* ---------- Agenzie: il vostro marchio davanti, il nostro codice dietro ---------- */
.vis-agenzie .ag-code{left:16%;top:5%;width:82%;height:72%;background:var(--vi);color:var(--vw)}
.vis-agenzie .ag-code .win-bar{border-color:#ffffff33}
.vis-agenzie .ag-lines{padding:1.2em 1.3em;display:grid;gap:.5em;font-size:1.05em}
.vis-agenzie .ag-lines .c{color:#ffffff70;margin-top:.4em}
.vis-agenzie .ag-lines .k{color:var(--vf)}.vis-agenzie .ag-lines .f{color:var(--vy)}.vis-agenzie .ag-lines .t{color:var(--vg)}.vis-agenzie .ag-lines .a{color:#b9a8ff}.vis-agenzie .ag-lines .s{color:var(--vy)}
.vis-agenzie .ag-lines p{animation:vis-in .5s both}
.vis-agenzie .ag-lines p:nth-child(2){animation-delay:.2s}.vis-agenzie .ag-lines p:nth-child(3){animation-delay:.4s}.vis-agenzie .ag-lines p:nth-child(4){animation-delay:.6s}.vis-agenzie .ag-lines p:nth-child(5){animation-delay:.8s}.vis-agenzie .ag-lines p:nth-child(6){animation-delay:1s}.vis-agenzie .ag-lines p:nth-child(7){animation-delay:1.2s}.vis-agenzie .ag-lines p:nth-child(8){animation-delay:1.6s}
.vis-agenzie .ag-card{position:absolute;left:1%;bottom:4%;z-index:3;display:flex;align-items:center;gap:1em;width:68%;padding:1.3em 1.4em;border:2.5px solid var(--vi);border-radius:12px;background:var(--vw);box-shadow:8px 8px 0 var(--vi)}
.vis-agenzie .ag-mark{display:grid;place-items:center;flex:none;width:2.6em;height:2.6em;border-radius:10px;background:var(--vg);border:2px solid var(--vi);font-size:1.5em;font-weight:800}
.vis-agenzie .ag-card strong{display:block;font-size:1.7em;font-weight:800;letter-spacing:-.04em;line-height:1}
.vis-agenzie .ag-card div span{display:block;margin-top:.3em;font-size:.95em;opacity:.7}
.vis-agenzie .ag-stamp{position:absolute;right:4%;bottom:14%;z-index:4;padding:.45em 1em;border:2.5px solid var(--vi);border-radius:8px;background:var(--vy);font-weight:800;font-size:1.1em;text-transform:uppercase;letter-spacing:.06em;transform:rotate(-8deg);box-shadow:4px 4px 0 var(--vi);animation:ag-stamp 6s ease-in-out infinite}
@keyframes ag-stamp{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-4deg) scale(1.04)}}
.vis-agenzie .ag-nda{position:absolute;right:6%;top:0;z-index:4;box-shadow:3px 3px 0 var(--vi)}

/* visuals-gruppo-b.css */
/* Illustrazioni del gruppo b: ecommerce, shopify, prestashop, saas. */

/* ---------- Ecommerce: prodotto, carrello, checkout, pacco ---------- */
.vis-ecommerce .prod{left:2%;top:4%;width:74%;height:66%}
.vis-ecommerce .cart{margin-left:auto;position:relative;display:flex}
.vis-ecommerce .cart svg{width:1.6em;height:1.6em;fill:none;stroke:var(--vi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vis-ecommerce .cart circle{fill:var(--vi)}
.vis-ecommerce .cart em{position:absolute;right:-.7em;top:-.5em;width:1.45em;height:1.45em;border-radius:50%;background:var(--vf);color:var(--vw);border:1.5px solid var(--vi);font-style:normal;font-size:.8em;font-weight:800;overflow:hidden;display:block}
.vis-ecommerce .cart em span{display:grid;place-items:center;height:100%;animation:vb-count 9s steps(1) infinite}
@keyframes vb-count{0%,33%{transform:translateY(0)}34%,66%{transform:translateY(-100%)}67%,100%{transform:translateY(-200%)}}
.vis-ecommerce .cart em{animation:vb-pop 3s ease-in-out infinite}
@keyframes vb-pop{0%,85%,100%{transform:scale(1)}92%{transform:scale(1.35)}}
.vis-ecommerce .prod-body{display:grid;grid-template-columns:46% 1fr;gap:6%;padding:5% 6%;height:calc(100% - 2.4em)}
.vis-ecommerce .prod-img{position:relative;border:2px solid var(--vi);border-radius:8px;background:var(--vr);display:grid;place-items:center;overflow:hidden}
.vis-ecommerce .prod-img svg{width:78%;fill:var(--vw);stroke:var(--vi);stroke-width:2.5;stroke-linejoin:round;animation:vb-sway 6s ease-in-out infinite;transform-origin:50% 80%}
.vis-ecommerce .prod-img .stripe{fill:var(--vy)}
@keyframes vb-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.vis-ecommerce .prod-img .chip{position:absolute;left:6%;top:6%}
.vis-ecommerce .prod-info{display:flex;flex-direction:column;gap:.45em;min-width:0}
.vis-ecommerce .prod-name{font-size:1.35em;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.vis-ecommerce .prod-price{font-weight:800;font-size:1.1em}
.vis-ecommerce .prod-price s{font-weight:500;opacity:.45;font-size:.8em;margin-left:.3em}
.vis-ecommerce .prod-lbl{font-size:.75em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin-top:.2em}
.vis-ecommerce .swatches,.vis-ecommerce .sizes{display:flex;gap:.4em}
.vis-ecommerce .swatches i{width:1.4em;height:1.4em;border-radius:50%;border:2px solid var(--vi)}
.vis-ecommerce .swatches i:nth-child(1){background:var(--vr);box-shadow:0 0 0 2px var(--vw),0 0 0 3.5px var(--vi)}
.vis-ecommerce .swatches i:nth-child(2){background:var(--vg)}.vis-ecommerce .swatches i:nth-child(3){background:var(--vv)}
.vis-ecommerce .sizes i{font-style:normal;font-weight:800;font-size:.8em;width:2em;height:2em;display:grid;place-items:center;border:1.5px solid var(--vi);border-radius:6px}
.vis-ecommerce .sizes i.on{background:var(--vi);color:var(--vw)}
.vis-ecommerce .add{margin-top:auto;padding:.6em .8em;border-radius:99px;background:var(--vi);color:var(--vg);font-weight:800;font-size:.85em;text-align:center;animation:vb-press 3s ease-in-out infinite}
@keyframes vb-press{0%,80%,100%{transform:none}86%{transform:scale(.93)}}
.vis-ecommerce .steps{left:8%;bottom:4%;width:66%;padding:4.5% 5%}
.vis-ecommerce .steps-row{display:flex;align-items:center;gap:3%}
.vis-ecommerce .step{display:flex;flex-direction:column;align-items:center;gap:.35em;font-weight:800;font-size:.78em;white-space:nowrap}
.vis-ecommerce .step i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;border:2px solid var(--vi);font-style:normal;background:var(--vw)}
.vis-ecommerce .step.s1 i{background:var(--vg)}
.vis-ecommerce .step.s2 i{animation:vb-s2 6s ease-in-out infinite}
.vis-ecommerce .step.s3 i{animation:vb-s3 6s ease-in-out infinite}
@keyframes vb-s2{0%,30%{background:var(--vw)}40%,100%{background:var(--vg)}}
@keyframes vb-s3{0%,70%{background:var(--vw);color:var(--vi)}80%,95%{background:var(--vv);color:var(--vw);transform:scale(1.15)}100%{background:var(--vv);color:var(--vw)}}
.vis-ecommerce .bar{flex:1;height:.45em;border-radius:99px;background:color-mix(in srgb,var(--vi) 15%,transparent);overflow:hidden;margin-bottom:1.4em}
.vis-ecommerce .bar u{display:block;height:100%;background:var(--vi);transform-origin:left;animation:vb-fill1 6s ease-in-out infinite}
.vis-ecommerce .bar.b2 u{animation-name:vb-fill2}
@keyframes vb-fill1{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
@keyframes vb-fill2{0%,40%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
.vis-ecommerce .box{position:absolute;right:2%;bottom:16%;width:26%;aspect-ratio:1;background:#e7b779;border:2.5px solid var(--vi);border-radius:6px;box-shadow:6px 6px 0 var(--vi);transform:rotate(6deg)}
.vis-ecommerce .box-tape{position:absolute;left:42%;top:0;bottom:0;width:16%;background:color-mix(in srgb,var(--vw) 55%,transparent);border-left:1.5px solid var(--vi);border-right:1.5px solid var(--vi)}
.vis-ecommerce .box-label{position:absolute;left:10%;right:10%;bottom:12%;padding:.4em .5em;background:var(--vw);border:1.5px solid var(--vi);border-radius:4px;display:flex;flex-direction:column;font-size:.68em;gap:.15em}
.vis-ecommerce .box-label b{font-weight:800;color:var(--vf)}
.vis-ecommerce .box-label i{height:.9em;background:repeating-linear-gradient(90deg,var(--vi) 0 2px,transparent 2px 4px,var(--vi) 4px 5px,transparent 5px 8px)}

/* ---------- Shopify: editor del tema e Liquid ---------- */
.vis-shopify .editor{left:2%;top:4%;width:84%;height:70%}
.vis-shopify .logo{margin-left:auto;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#95bf47;border:1.5px solid var(--vi)}
.vis-shopify .logo svg{width:1.1em;height:1.1em;fill:var(--vw)}
.vis-shopify .ed-body{display:grid;grid-template-columns:34% 1fr;height:calc(100% - 2.4em)}
.vis-shopify .ed-side{display:flex;flex-direction:column;gap:.35em;padding:6% 7%;border-right:2px solid var(--vi);background:#f6f4ff}
.vis-shopify .ed-h{font-size:.72em;font-weight:800;text-transform:uppercase;letter-spacing:.07em;opacity:.55;margin-bottom:.2em}
.vis-shopify .ed-item{padding:.45em .6em;border-radius:6px;font-weight:700;font-size:.85em;border:1.5px solid transparent}
.vis-shopify .ed-item.on{background:var(--vw);border-color:var(--vi);box-shadow:3px 3px 0 var(--vv)}
.vis-shopify .ed-add{margin-top:auto;font-weight:800;font-size:.8em;color:var(--vv)}
.vis-shopify .ed-prev{padding:5%;display:flex;flex-direction:column;gap:5%}
.vis-shopify .pv-hero{position:relative;flex:1.3;border:2px solid var(--vv);border-radius:8px;background:var(--vy);padding:6%;display:flex;flex-direction:column;gap:.5em;overflow:hidden;outline:2px dashed var(--vv);outline-offset:3px;animation:vb-sel 4s ease-in-out infinite}
@keyframes vb-sel{0%,100%{outline-color:var(--vv)}50%{outline-color:transparent}}
.vis-shopify .pv-hero b{font-size:1.25em;font-weight:800;letter-spacing:-.02em;max-width:60%;line-height:1.05}
.vis-shopify .pv-hero .line{width:45%}
.vis-shopify .pv-btn{align-self:flex-start;margin-top:auto;padding:.35em .9em;border-radius:99px;background:var(--vi);color:var(--vw);font-weight:800;font-size:.75em}
.vis-shopify .pv-shape{position:absolute;right:-10%;bottom:-25%;width:52%;aspect-ratio:1;border-radius:50%;background:var(--vf);border:2px solid var(--vi);animation:vb-sway 7s ease-in-out infinite}
.vis-shopify .pv-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.vis-shopify .pv-grid i{border:2px solid var(--vi);border-radius:6px;background:var(--vr)}
.vis-shopify .pv-grid i:nth-child(2){background:var(--vg)}.vis-shopify .pv-grid i:nth-child(3){background:#f6f4ff}
.vis-shopify .code{right:2%;bottom:3%;width:56%;background:var(--vi);color:var(--vw);box-shadow:7px 7px 0 var(--vv)}
.vis-shopify .code-bar{padding:.5em .9em;font-size:.75em;border-bottom:1.5px solid #ffffff30;color:var(--vg)}
.vis-shopify .code pre{margin:0;padding:.7em .9em .9em;font-size:.78em;line-height:1.55;white-space:pre;overflow:hidden}
.vis-shopify .c-t{color:#ffffffa0}.vis-shopify .c-l{color:var(--vg)}.vis-shopify .c-k{color:var(--vr)}
.vis-shopify .caret{display:inline-block;width:.5em;height:1.1em;background:var(--vy);vertical-align:-.2em;margin-left:.2em;animation:vis-pulse 1s steps(1) infinite}
.vis-shopify .vis-cursor{animation:vb-cur 7s ease-in-out infinite}
.vis-shopify .vis-cursor span{background:#5e8e3e}
@keyframes vb-cur{0%,100%{transform:translate(0,0)}35%{transform:translate(110%,120%)}65%{transform:translate(40%,180%)}}

/* ---------- PrestaShop: catalogo e modulo ---------- */
.vis-prestashop .cat{left:2%;top:4%;width:82%;height:72%}
.vis-prestashop .logo{margin-left:auto;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#df0067;border:1.5px solid var(--vi)}
.vis-prestashop .logo svg{width:1.15em;height:1.15em;fill:var(--vw)}
.vis-prestashop .cat-head,.vis-prestashop .cat-row{display:grid;grid-template-columns:22% 1fr auto;align-items:center;gap:4%;padding:0 5%}
.vis-prestashop .cat-head{height:2.2em;font-size:.72em;text-transform:uppercase;letter-spacing:.06em;opacity:.6;border-bottom:1.5px solid color-mix(in srgb,var(--vi) 25%,transparent)}
.vis-prestashop .cat-row{height:calc((100% - 2.4em - 1.6em) / 4);border-bottom:1.5px solid color-mix(in srgb,var(--vi) 12%,transparent);font-weight:700;font-size:.9em}
.vis-prestashop .cat-row:last-child{border-bottom:0}
.vis-prestashop .cat-row .mono{font-size:.85em;opacity:.65}
.vis-prestashop .cat-row>span:nth-child(2){display:flex;align-items:center;gap:.6em;white-space:nowrap;overflow:hidden}
.vis-prestashop .th{width:1.9em;height:1.9em;border-radius:6px;border:1.5px solid var(--vi);flex:none}
.vis-prestashop .t1{background:var(--vg)}.vis-prestashop .t2{background:var(--vr)}.vis-prestashop .t3{background:var(--vv)}.vis-prestashop .t4{background:var(--vy)}
.vis-prestashop .cat-row:nth-child(4){animation:vb-row 5s ease-in-out infinite}
@keyframes vb-row{0%,100%{background:transparent}50%{background:color-mix(in srgb,var(--vy) 55%,transparent)}}
.vis-prestashop .mod{right:2%;bottom:3%;width:54%;padding:4.5% 5%;display:flex;flex-direction:column;gap:.8em;box-shadow:7px 7px 0 #df0067}
.vis-prestashop .mod-top{display:flex;align-items:center;gap:.8em}
.vis-prestashop .mod-top>span:last-child{display:flex;flex-direction:column}
.vis-prestashop .mod-top b{font-weight:800;font-size:1.05em}
.vis-prestashop .mod-top small{font-size:.75em;opacity:.6}
.vis-prestashop .mod-ico{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:8px;background:var(--vy);border:2px solid var(--vi);flex:none}
.vis-prestashop .mod-ico svg{width:1.5em;fill:var(--vw);stroke:var(--vi);stroke-width:1.6;stroke-linejoin:round;animation:vis-spin 8s linear infinite}
.vis-prestashop .mod-bar{height:.7em;border:1.5px solid var(--vi);border-radius:99px;overflow:hidden}
.vis-prestashop .mod-bar u{display:block;height:100%;background:var(--vg);transform-origin:left;animation:vb-install 6s ease-in-out infinite}
@keyframes vb-install{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
.vis-prestashop .mod-state{position:relative;height:1.8em}
.vis-prestashop .mod-state>*{position:absolute;left:0;top:0}
.vis-prestashop .ing{font-weight:700;font-size:.85em;opacity:.7;line-height:1.8em;animation:vb-hide 6s ease-in-out infinite}
.vis-prestashop .done{animation:vb-show 6s ease-in-out infinite}
@keyframes vb-hide{0%,58%{opacity:.7}62%,100%{opacity:0}}
@keyframes vb-show{0%,60%{opacity:0;transform:scale(.8)}66%,100%{opacity:1;transform:none}}

/* ---------- SaaS: piani, spazi di lavoro, crescita ---------- */
.vis-saas .plans{left:2%;top:4%;width:64%;height:56%}
.vis-saas .plan-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;padding:6% 5% 5%;height:calc(100% - 2.4em);align-items:end}
.vis-saas .plan{position:relative;display:flex;flex-direction:column;gap:.5em;padding:10% 10%;border:2px solid var(--vi);border-radius:8px;height:80%}
.vis-saas .plan b{font-size:1.3em;font-weight:800;letter-spacing:-.02em}
.vis-saas .plan .line.s{width:60%}
.vis-saas .pick{margin-top:auto;text-align:center;padding:.4em;border-radius:99px;border:1.5px solid var(--vi);font-weight:800;font-size:.75em}
.vis-saas .plan.hi{height:100%;background:var(--vv);color:var(--vw);box-shadow:5px 5px 0 var(--vi);animation:vis-float 5s ease-in-out infinite}
.vis-saas .plan.hi .line{background:#ffffff55}
.vis-saas .plan.hi .pick{background:var(--vg);color:var(--vi);border-color:var(--vi)}
.vis-saas .plan .tag{position:absolute;top:-.95em;left:50%;transform:translateX(-50%);font-size:.7em}
.vis-saas .ws{right:1%;top:28%;width:38%;padding:3% 4%;display:flex;align-items:center;gap:.7em;overflow:visible;z-index:2;flex-wrap:wrap}
.vis-saas .ws>span:nth-child(2){display:flex;flex-direction:column;line-height:1.15}
.vis-saas .ws small{font-size:.7em;opacity:.6;font-weight:700}
.vis-saas .ws b{font-weight:800}
.vis-saas .ws-car{margin-left:auto;font-weight:800}
.vis-saas .ws-dot{display:grid;place-items:center;width:2em;height:2em;border-radius:8px;background:var(--vf);color:var(--vw);border:1.5px solid var(--vi);font-weight:800;font-style:normal;flex:none;font-size:.9em}
.vis-saas .ws-dot.b{background:var(--vy);color:var(--vi)}.vis-saas .ws-dot.c{background:var(--vw);color:var(--vi)}
.vis-saas .ws-list{flex-basis:100%;display:flex;flex-direction:column;gap:.4em;border-top:1.5px solid color-mix(in srgb,var(--vi) 20%,transparent);padding-top:.6em;font-weight:700;font-size:.85em}
.vis-saas .ws-list span{display:flex;align-items:center;gap:.6em}
.vis-saas .ws-list .ws-dot{width:1.7em;height:1.7em}
.vis-saas .chart{left:8%;bottom:3%;width:54%;height:34%;padding:3.5% 5% 4%;display:flex;flex-direction:column;gap:6%}
.vis-saas .ch-top{display:flex;align-items:center;justify-content:space-between;font-weight:800}
.vis-saas .bars{flex:1;display:flex;align-items:flex-end;gap:5%;border-bottom:2px solid var(--vi)}
.vis-saas .bars i{flex:1;height:var(--h);background:var(--vg);border:2px solid var(--vi);border-bottom:0;border-radius:4px 4px 0 0;transform-origin:bottom;animation:vb-grow 6s ease-in-out infinite}
.vis-saas .bars i:last-child{background:var(--vf)}
.vis-saas .bars i:nth-child(2){animation-delay:.1s}.vis-saas .bars i:nth-child(3){animation-delay:.2s}.vis-saas .bars i:nth-child(4){animation-delay:.3s}.vis-saas .bars i:nth-child(5){animation-delay:.4s}.vis-saas .bars i:nth-child(6){animation-delay:.5s}.vis-saas .bars i:nth-child(7){animation-delay:.6s}
@keyframes vb-grow{0%{transform:scaleY(.15)}25%,85%{transform:scaleY(1)}100%{transform:scaleY(.15)}}

/* visuals-gruppo-c.css */
/* Illustrazioni del gruppo C: webapp, app, manutenzione, manutenzione WordPress, performance, server e DevOps. */

/* ---------- Webapp: dashboard di un gestionale ---------- */
.vis-webapp .main{inset:4% 3% 6% 2%}
.vis-webapp .body{display:flex;height:calc(100% - 2.4em)}
.vis-webapp aside{width:24%;padding:1em .8em;border-right:2px solid var(--vi);background:var(--vi);color:var(--vw);display:flex;flex-direction:column;gap:.55em}
.vis-webapp .logo{width:1.8em;height:1.8em;border-radius:50%;background:var(--vg);margin-bottom:.6em}
.vis-webapp .nav{display:flex;align-items:center;gap:.5em;padding:.4em .5em;border-radius:6px;font-weight:700;font-size:.9em;opacity:.75}
.vis-webapp .nav i{width:.7em;height:.7em;border-radius:3px;background:currentColor;opacity:.6}
.vis-webapp .nav.on{background:var(--vg);color:var(--vi);opacity:1}
.vis-webapp .content{flex:1;padding:1em;display:flex;flex-direction:column;gap:.9em;min-width:0}
.vis-webapp .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.vis-webapp .tile{position:relative;padding:.6em .7em;border:2px solid var(--vi);border-radius:8px;height:3.6em}
.vis-webapp .tile small{font-size:.75em;font-weight:700}
.vis-webapp .tile b{position:absolute;right:.5em;bottom:.3em;font-size:1.1em}
.vis-webapp .t1{background:var(--vg)}.vis-webapp .t2{background:var(--vy)}.vis-webapp .t3{background:var(--vr)}
.vis-webapp .chart{flex:1;display:flex;align-items:flex-end;gap:5%;padding:.6em .6em 0;border-bottom:2px solid var(--vi);min-height:4em}
.vis-webapp .chart span{flex:1;height:var(--h);background:var(--vv);border:2px solid var(--vi);border-bottom:0;border-radius:5px 5px 0 0;transform-origin:bottom;animation:vc-grow 5s var(--d) ease-in-out infinite}
.vis-webapp .chart span:nth-child(6){background:var(--vf)}
@keyframes vc-grow{0%,8%{transform:scaleY(.15)}30%,85%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
.vis-webapp .table{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35em}
.vis-webapp .table li{display:flex;align-items:center;gap:.6em;font-size:.85em;font-weight:700;animation:vis-in .6s var(--d) both}
.vis-webapp .table .line{flex:1}
.vis-webapp .vis-cursor{left:58%;top:52%;animation:vc-wcur 7s ease-in-out infinite}
@keyframes vc-wcur{0%,100%{transform:translate(0,0)}35%{transform:translate(-160%,170%)}60%{transform:translate(90%,-110%)}}

/* ---------- App: due telefoni e una notifica ---------- */
.vis-app .phone{position:absolute;height:96%;aspect-ratio:9/17;border:2.5px solid var(--vi);border-radius:2.2em;background:var(--vi);padding:.45em;box-shadow:8px 8px 0 var(--vi)}
.vis-app .phone .screen{position:relative;height:100%;border-radius:1.8em;background:var(--vw);overflow:hidden;padding:7.2em .9em .9em;display:flex;flex-direction:column;gap:.7em}
.vis-app .front{left:36%;top:1%;z-index:2;transform:rotate(3deg)}
.vis-app .back{left:6%;top:5%;height:88%;transform:rotate(-10deg)}
.vis-app .back .screen{background:var(--vr);padding-top:2.4em}
.vis-app .back .line{background:color-mix(in srgb,var(--vi) 30%,transparent);height:.8em}
.vis-app .back .line.s{width:60%}
.vis-app .back .block{height:24%;border:2px solid var(--vi);border-radius:1em;background:var(--vw)}
.vis-app .back .b2{background:var(--vy)}
.vis-app .notch{position:absolute;z-index:3;left:50%;top:.9em;width:30%;height:1.1em;border-radius:1em;background:var(--vi);transform:translateX(-50%)}
.vis-app .toast{position:absolute;z-index:2;left:.6em;right:.6em;top:2.4em;display:flex;align-items:center;gap:.6em;padding:.6em .7em;border:2px solid var(--vi);border-radius:1em;background:var(--vy);box-shadow:3px 3px 0 var(--vi);animation:vc-toast 6s ease-in-out infinite}
.vis-app .toast .dot{flex:none;width:1.6em;height:1.6em;border-radius:.5em;background:var(--vv)}
.vis-app .toast b{display:block;font-size:.85em}
.vis-app .toast small{font-size:.75em}
@keyframes vc-toast{0%,12%{transform:translateY(-180%);opacity:0}22%,70%{transform:none;opacity:1}82%,100%{transform:translateY(-180%);opacity:0}}
.vis-app .hello{margin-top:.3em}
.vis-app .hello small{display:block;font-size:.8em}
.vis-app .hello b{font-size:1.15em;line-height:1.1;letter-spacing:-.02em}
.vis-app ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
.vis-app li{display:flex;align-items:center;gap:.6em;padding:.55em .6em;border:2px solid var(--vi);border-radius:.8em;font-weight:700;font-size:.85em}
.vis-app li i{width:1.3em;height:1.3em;border-radius:.4em;border:1.5px solid var(--vi)}
.vis-app li .c0{background:var(--vg)}.vis-app li .c1{background:var(--vf)}.vis-app li .c2{background:var(--vv)}
.vis-app li em{margin-left:auto;font-style:normal}
.vis-app nav{margin-top:auto;display:flex;justify-content:space-around;padding:.6em 0 .2em;border-top:2px solid var(--vi)}
.vis-app nav span{width:1.1em;height:1.1em;border-radius:50%;border:2px solid var(--vi)}
.vis-app nav .on{background:var(--vi)}
.vis-app .stores{position:absolute;right:3%;bottom:10%;display:flex;flex-direction:column;gap:.6em;z-index:3}
.vis-app .stores span{display:grid;place-items:center;width:3.2em;height:3.2em;border:2.5px solid var(--vi);border-radius:50%;background:var(--vw);box-shadow:4px 4px 0 var(--vi);animation:vis-float 5s ease-in-out infinite}
.vis-app .stores span+span{animation-delay:-2.5s;background:var(--vg)}
.vis-app .stores svg{width:1.5em;height:1.5em;fill:var(--vi)}

/* ---------- Manutenzione: aggiornamenti in staging ---------- */
.vis-manutenzione .main{top:8%;left:2%;right:8%;box-shadow:8px 8px 0 var(--vg)}
.vis-manutenzione .body{font-size:1.12em;padding:1.1em 1.2em 1.3em;display:flex;flex-direction:column;gap:.9em}
.vis-manutenzione .head{display:flex;align-items:center;justify-content:space-between;gap:1em;font-size:1.15em;letter-spacing:-.02em}
.vis-manutenzione ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55em}
.vis-manutenzione li{display:flex;align-items:center;gap:.7em;padding:.55em .7em;border:2px solid var(--vi);border-radius:8px;font-weight:700;animation:vc-mrow 7.2s var(--d) infinite}
.vis-manutenzione li .line{flex:1;max-width:30%;margin-left:auto}
.vis-manutenzione .st{position:relative;flex:none;width:1.6em;height:1.6em}
.vis-manutenzione .spin{position:absolute;inset:0;border:2.5px solid color-mix(in srgb,var(--vi) 25%,transparent);border-top-color:var(--vv);border-radius:50%;animation:vis-spin .9s linear infinite,vc-hide 7.2s var(--d) infinite}
.vis-manutenzione .done{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--vg);border:2px solid var(--vi);color:var(--vi);animation:vc-show 7.2s var(--d) infinite}
.vis-manutenzione .done svg{width:70%;height:70%}
@keyframes vc-hide{0%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes vc-show{0%,12%{opacity:0;transform:scale(.4)}16%,100%{opacity:1;transform:none}}
@keyframes vc-mrow{0%,12%{background:var(--vw)}14%,20%{background:color-mix(in srgb,var(--vg) 45%,var(--vw))}26%,100%{background:var(--vw)}}
.vis-manutenzione .switch{display:flex;align-items:center;gap:.7em;margin-top:.2em;font-weight:700;font-size:.9em}
.vis-manutenzione .track{position:relative;width:3.4em;height:1.7em;border:2px solid var(--vi);border-radius:99px;background:var(--vy)}
.vis-manutenzione .track i{position:absolute;top:.15em;left:.15em;width:1.15em;height:1.15em;border-radius:50%;background:var(--vi);animation:vc-switch 7.2s ease-in-out infinite}
@keyframes vc-switch{0%,55%{transform:none;background:var(--vi)}62%,95%{transform:translateX(1.7em);background:var(--vv)}100%{transform:none}}
.vis-manutenzione .badge{position:absolute;right:2%;bottom:6%;z-index:3}
.vis-manutenzione .badge .chip{font-size:1em;padding:.5em 1em;border-width:2.5px;box-shadow:4px 4px 0 var(--vw)}
.vis-manutenzione .badge .ck{width:1.1em;height:1.1em}

/* ---------- Manutenzione WordPress: plugin e scudo ---------- */
.vis-manutenzione-wordpress .main{top:10%;left:2%;right:12%;box-shadow:8px 8px 0 var(--vg)}
.vis-manutenzione-wordpress .body{font-size:1.12em;padding:1em 1.1em 1.2em;display:flex;flex-direction:column;gap:.8em}
.vis-manutenzione-wordpress .head{display:flex;align-items:center;gap:.6em;font-size:1.15em;letter-spacing:-.02em}
.vis-manutenzione-wordpress .wp{display:grid;place-items:center;width:1.9em;height:1.9em}
.vis-manutenzione-wordpress .wp svg{width:100%;height:100%;fill:var(--vi)}
.vis-manutenzione-wordpress ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
.vis-manutenzione-wordpress li{display:flex;align-items:center;gap:.7em;padding:.5em .7em;border:2px solid var(--vi);border-radius:8px;font-weight:700;animation:vis-in .5s var(--d) both}
.vis-manutenzione-wordpress li .ic{flex:none;width:1.4em;height:1.4em;border-radius:5px;border:2px solid var(--vi);background:var(--vg)}
.vis-manutenzione-wordpress li.warn .ic{background:var(--vy)}
.vis-manutenzione-wordpress li.hot{background:color-mix(in srgb,var(--vf) 14%,var(--vw))}
.vis-manutenzione-wordpress li.hot .ic{background:var(--vf)}
.vis-manutenzione-wordpress li.hot .chip{animation:vis-pulse 1.6s ease-in-out infinite}
.vis-manutenzione-wordpress .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis-manutenzione-wordpress .shield{position:absolute;right:0;top:0;width:24%;z-index:3}
.vis-manutenzione-wordpress .shield svg{width:100%;height:auto;display:block;filter:drop-shadow(5px 5px 0 var(--vw))}

/* ---------- Performance: misuratori ---------- */
.vis-performance .main{top:9%;left:2%;right:7%;box-shadow:8px 8px 0 var(--vg)}
.vis-performance .body{font-size:1.1em;padding:1.4em 1.2em 1.2em;display:flex;flex-direction:column;gap:1.1em}
.vis-performance .gauges{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8em;text-align:center}
.vis-performance .gauge-arrow{order:1;font-size:2.4em;font-weight:800;line-height:1;margin-top:-.8em}
.vis-performance .g1{order:2}
.vis-performance .gauge{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4em}
.vis-performance .gauge svg{width:82%;height:auto;transform:rotate(-90deg)}
.vis-performance .gauge circle{fill:none;stroke-width:9}
.vis-performance .gauge .bg{stroke:color-mix(in srgb,var(--vi) 12%,transparent)}
.vis-performance .gauge .fg{stroke:var(--vi);stroke-linecap:round;stroke-dasharray:var(--n) 100;stroke-dashoffset:var(--n);animation:vc-fill 6s ease-out infinite}
.vis-performance .g0 .fg{stroke:#ff4e42}.vis-performance .g1 .fg{stroke:#0cce6b;animation-delay:.6s}
.vis-performance .gauge.g0 b{color:#c3271c}
.vis-performance .gauge svg{filter:drop-shadow(0 0 0 transparent)}
@keyframes vc-fill{0%{stroke-dashoffset:var(--n)}35%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--n)}}
.vis-performance .gauge b{position:absolute;top:0;left:0;right:0;aspect-ratio:1/1;width:82%;margin:0 auto;display:grid;place-items:center;font-size:1.9em;font-weight:800;letter-spacing:-.04em;color:#0a8a4a}
.vis-performance .gauge small{font-weight:700;font-size:.85em}
.vis-performance .metrics{list-style:none;margin:0;padding:.8em 0 0;border-top:2px solid var(--vi);display:flex;flex-direction:column;gap:.45em}
.vis-performance .metrics li{display:flex;align-items:center;gap:.7em;font-size:.9em;animation:vis-in .5s var(--d) both}
.vis-performance .metrics i{width:.8em;height:.8em;border-radius:50%;background:#0cce6b;border:1.5px solid var(--vi)}
.vis-performance .metrics b{width:2.6em}
.vis-performance .metrics em{margin-left:auto;font-style:normal;font-weight:700;color:#0a8a4a}
.vis-performance .bolt{position:absolute;right:0;top:-2%;width:14%;z-index:3}
.vis-performance .bolt svg{width:100%;height:auto;display:block;filter:drop-shadow(4px 4px 0 var(--vw));transform:rotate(12deg)}

/* ---------- Server e DevOps: terminale e monitoraggio ---------- */
.vis-server-devops .term{top:4%;left:0;right:8%;background:#0f0c24;border-color:var(--vw);box-shadow:8px 8px 0 var(--vg);color:var(--vw)}
.vis-server-devops .term .win-bar{border-color:color-mix(in srgb,var(--vw) 35%,transparent);color:var(--vw)}
.vis-server-devops .term .win-bar i{border-color:var(--vw)}
.vis-server-devops .term .body{padding:1.2em 1.2em 1.6em;font-size:1.1em;display:flex;flex-direction:column;gap:.5em}
.vis-server-devops .term p{margin:0;white-space:nowrap;overflow:hidden;width:0;animation:vc-type 8s var(--d) steps(26,end) infinite}
.vis-server-devops .term .cmd{color:var(--vw)}
.vis-server-devops .term .ok{color:var(--vg)}
.vis-server-devops .term p:nth-child(5){color:var(--vy)}
.vis-server-devops .term .cur{animation:vc-type 8s var(--d) steps(2,end) infinite}
.vis-server-devops .term .cur i{display:inline-block;width:.6em;height:1em;vertical-align:-.15em;background:var(--vg);animation:vis-pulse 1s steps(1) infinite}
@keyframes vc-type{0%{width:0}10%,92%{width:100%}100%{width:0}}
.vis-server-devops .mon{left:22%;right:0;bottom:6%;height:28%;box-shadow:6px 6px 0 var(--vf);z-index:2}
.vis-server-devops .mon .body{display:flex;align-items:center;gap:.8em;padding:.4em .9em;height:calc(100% - 2.4em)}
.vis-server-devops .mon .chip{flex:none}
.vis-server-devops .live{width:.6em;height:.6em;border-radius:50%;background:var(--vi);animation:vis-pulse 1.4s ease-in-out infinite}
.vis-server-devops .mon svg{flex:1;height:80%;min-width:0}
.vis-server-devops .pulse{fill:none;stroke:var(--vv);stroke-width:3;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:vc-pulse 3.5s linear infinite}
@keyframes vc-pulse{to{stroke-dashoffset:0}}
.vis-server-devops .srv{position:absolute;right:0;top:-4%;display:flex;gap:.5em;z-index:3}
.vis-server-devops .srv svg{width:2.6em;height:2.6em;padding:.55em;border:2.5px solid var(--vi);border-radius:50%;background:var(--vy);fill:var(--vi)}
.vis-server-devops .srv svg+svg{background:var(--vg)}

/* Sotto i 900px il testo non può scendere sotto i 10px: le finestre con elenchi diventano un po' più alte. */
@media (max-width:900px){
 .vis-manutenzione,.vis-manutenzione-wordpress,.vis-webapp{aspect-ratio:1/1}
 .vis-manutenzione .main{top:3%}
 .vis-manutenzione .badge{bottom:3%}
 .vis-manutenzione-wordpress .main{top:8%}
}

/* visuals-gruppo-d.css */
/* Illustrazioni del gruppo d: woocommerce, magento, shopware, migrazione ecommerce, react, nodejs. */

/* Logo nella barra della finestra: cerchio col colore del marchio. */
.vis-woocommerce .logo,.vis-magento .logo,.vis-shopware .logo,.vis-react .logo{margin-left:auto;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;border:1.5px solid var(--vi)}
.vis-woocommerce .logo svg,.vis-magento .logo svg,.vis-shopware .logo svg,.vis-react .logo svg{width:1.1em;height:1.1em;fill:var(--vw)}
.vis-woocommerce .logo{background:#7f54b3}
.vis-magento .logo{background:#f46f25}
.vis-shopware .logo{background:#189eff}
.vis-react .logo{background:var(--vi)}
.vis-react .logo svg{fill:#61dafb;animation:vis-spin 14s linear infinite}

/* ---------- WooCommerce: ordini dentro WordPress ---------- */
.vis-woocommerce .orders{left:2%;top:4%;width:84%;height:68%}
.vis-woocommerce .o-body{display:grid;grid-template-columns:14% 1fr;height:calc(100% - 2.4em)}
.vis-woocommerce aside{display:flex;flex-direction:column;align-items:center;gap:.7em;padding-top:.8em;background:var(--vi)}
.vis-woocommerce aside .wp svg{width:1.5em;height:1.5em;fill:var(--vw)}
.vis-woocommerce aside i{width:46%;height:.45em;border-radius:99px;background:#ffffff40}
.vis-woocommerce aside i.on{background:#7f54b3;box-shadow:0 0 0 1.5px var(--vw)}
.vis-woocommerce ul{list-style:none;margin:0;padding:3% 4%;display:flex;flex-direction:column}
.vis-woocommerce li{flex:1;display:grid;grid-template-columns:16% 1fr 14% 36%;align-items:center;gap:3%;font-weight:700;font-size:.85em;border-bottom:1.5px solid color-mix(in srgb,var(--vi) 12%,transparent)}
.vis-woocommerce li:last-child{border-bottom:0}
.vis-woocommerce li .mono{opacity:.6}
.vis-woocommerce li .tot{font-weight:800}
.vis-woocommerce .st{position:relative;height:1.9em}
.vis-woocommerce .st em{position:absolute;left:0;top:0;font-style:normal;font-size:.85em}
.vis-woocommerce .r0{animation:vd-flash 8s ease-in-out infinite}
@keyframes vd-flash{0%,8%{background:color-mix(in srgb,var(--vy) 60%,transparent)}20%,100%{background:transparent}}
.vis-woocommerce .s-a{animation:vd-out 8s ease-in-out infinite}
.vis-woocommerce .s-b{animation:vd-in 8s ease-in-out infinite}
@keyframes vd-out{0%,55%{opacity:1}60%,100%{opacity:0}}
@keyframes vd-in{0%,57%{opacity:0;transform:scale(.8)}63%,100%{opacity:1;transform:none}}
.vis-woocommerce .note{right:1%;top:12%;width:40%;padding:3% 4%;display:flex;align-items:center;gap:.8em;box-shadow:6px 6px 0 #7f54b3;z-index:2}
.vis-woocommerce .note>span:last-child{display:flex;flex-direction:column}
.vis-woocommerce .note b{font-weight:800}
.vis-woocommerce .note small{font-size:.75em;opacity:.65}
.vis-woocommerce .bell{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--vf);color:var(--vw);border:1.5px solid var(--vi);font-size:.8em;animation:vis-pulse 2s ease-in-out infinite;flex:none}
.vis-woocommerce .stock{left:12%;bottom:3%;width:38%;padding:3% 4%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2em .6em}
.vis-woocommerce .stock small{font-size:.75em;font-weight:700;opacity:.6;grid-column:1/-1}
.vis-woocommerce .stock b{display:block;height:1.4em;overflow:hidden;font-size:1.5em;font-weight:800;line-height:1.4}
.vis-woocommerce .stock b span{display:block;animation:vd-tick 8s steps(1) infinite}
@keyframes vd-tick{0%,62%{transform:translateY(0)}63%,100%{transform:translateY(-100%)}}
.vis-woocommerce .stock .chip{font-style:normal;font-size:.75em}

/* ---------- Magento: terminale e cache ---------- */
.vis-magento .term{left:2%;top:4%;width:86%;height:64%;background:var(--vi);color:var(--vw);box-shadow:7px 7px 0 #f46f25}
.vis-magento .term .win-bar{border-color:#ffffff30;color:var(--vw)}
.vis-magento .t-body{padding:4% 5%;font-size:.8em;line-height:1.75}
.vis-magento .t-body p{margin:0;white-space:nowrap;overflow:hidden;opacity:0;animation:vd-line 8s ease-in-out infinite;animation-delay:var(--d)}
.vis-magento .t-body p b{color:#f46f25}
.vis-magento .t-body p.ok,.vis-magento .t-body p.ok b{color:var(--vg)}
@keyframes vd-line{0%{opacity:0;transform:translateX(-6px)}5%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.vis-magento .caret{display:inline-block;width:.55em;height:1.1em;background:var(--vy);vertical-align:-.2em;animation:vis-pulse 1s steps(1) infinite}
.vis-magento .cache{right:2%;bottom:3%;width:50%;padding:3.5% 4.5%;display:flex;flex-direction:column;gap:.55em}
.vis-magento .cache>b{font-weight:800}
.vis-magento .row{display:grid;grid-template-columns:38% 1fr;align-items:center;gap:6%;font-weight:700}
.vis-magento .row small{font-size:.78em}
.vis-magento .row i{display:block;height:.75em;border:1.5px solid var(--vi);border-radius:99px;overflow:hidden}
.vis-magento .row u{display:block;height:100%;width:var(--v);background:#f46f25;transform-origin:left;animation:vd-fill 6s ease-in-out infinite;animation-delay:var(--d)}
.vis-magento .row:nth-child(3) u{background:var(--vg)}.vis-magento .row:nth-child(4) u{background:var(--vy)}
@keyframes vd-fill{0%{transform:scaleX(.1)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(.1)}}

/* ---------- Shopware: Rule Builder e prezzo ---------- */
.vis-shopware .rules{left:2%;top:4%;width:80%;height:64%}
.vis-shopware .r-body{padding:5% 6%;display:flex;flex-direction:column;gap:.75em}
.vis-shopware .r-h{font-size:.8em;opacity:.7}
.vis-shopware .r-h b{opacity:1}
.vis-shopware .cond,.vis-shopware .then{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;font-size:.85em}
.vis-shopware em{font-style:normal;font-weight:800;width:3.4em;color:#189eff}
.vis-shopware .pill{padding:.3em .7em;border:1.5px solid var(--vi);border-radius:6px;font-weight:700;background:#f6f4ff}
.vis-shopware .pill.v{background:var(--vy)}
.vis-shopware .pill.hot{background:var(--vf);color:var(--vw)}
.vis-shopware .op{font-weight:800}
.vis-shopware .c2{animation:vis-in .6s ease-out both}
.vis-shopware .then{padding-top:.6em;border-top:1.5px dashed color-mix(in srgb,var(--vi) 30%,transparent)}
.vis-shopware .tog{margin-left:auto;width:2.6em;height:1.4em;border:1.5px solid var(--vi);border-radius:99px;position:relative;animation:vd-tog-bg 6s ease-in-out infinite}
.vis-shopware .tog i{position:absolute;top:.12em;left:.15em;width:1em;height:1em;border-radius:50%;background:var(--vi);animation:vd-tog 6s ease-in-out infinite}
@keyframes vd-tog{0%,30%{transform:none}40%,100%{transform:translateX(1.15em)}}
@keyframes vd-tog-bg{0%,30%{background:var(--vw)}40%,100%{background:var(--vg)}}
.vis-shopware .price{right:2%;bottom:3%;width:44%;padding:3.5% 4%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:.3em .8em;align-items:center;box-shadow:6px 6px 0 #189eff}
.vis-shopware .ph{grid-row:1/4;width:3.4em;height:3.4em;border-radius:8px;border:2px solid var(--vi);background:radial-gradient(circle at 50% 35%,var(--vy) 0 30%,transparent 31%),var(--vr)}
.vis-shopware .pn{font-weight:800;font-size:.9em;line-height:1.1}
.vis-shopware .pp{display:flex;gap:.5em;align-items:baseline}
.vis-shopware .pp s{opacity:.45;font-size:.8em;animation:vd-strike 6s ease-in-out infinite}
.vis-shopware .pp b{font-weight:800;color:var(--vf);animation:vd-show 6s ease-in-out infinite}
@keyframes vd-show{0%,35%{opacity:0}45%,100%{opacity:1}}
@keyframes vd-strike{0%,35%{opacity:1;text-decoration:none}45%,100%{opacity:.45;text-decoration:line-through}}
.vis-shopware .price .chip{justify-self:start;font-size:.7em}

/* ---------- Migrazione ecommerce: dal vecchio al nuovo ---------- */
.vis-migrazione-ecommerce .shop{top:4%;width:40%;height:44%}
.vis-migrazione-ecommerce .old{left:2%;filter:grayscale(.9);opacity:.85}
.vis-migrazione-ecommerce .new{right:2%;box-shadow:7px 7px 0 var(--vv)}
.vis-migrazione-ecommerce .grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:8%;height:calc(100% - 2.4em)}
.vis-migrazione-ecommerce .grid i{border:2px solid var(--vi);border-radius:6px;background:var(--vr)}
.vis-migrazione-ecommerce .grid i:nth-child(2){background:var(--vg)}.vis-migrazione-ecommerce .grid i:nth-child(3){background:var(--vy)}.vis-migrazione-ecommerce .grid i:nth-child(4){background:#f6f4ff}
.vis-migrazione-ecommerce .new .grid i{animation:vd-pop 6s ease-in-out infinite}
.vis-migrazione-ecommerce .new .grid i:nth-child(2){animation-delay:.3s}.vis-migrazione-ecommerce .new .grid i:nth-child(3){animation-delay:.6s}.vis-migrazione-ecommerce .new .grid i:nth-child(4){animation-delay:.9s}
@keyframes vd-pop{0%,30%{transform:scale(.2);opacity:0}45%,90%{transform:none;opacity:1}100%{transform:scale(.2);opacity:0}}
.vis-migrazione-ecommerce .lane{position:absolute;left:30%;right:30%;top:22%;height:10%}
.vis-migrazione-ecommerce .pkt{position:absolute;left:0;top:0;font-size:.75em;z-index:3;animation:vd-move 6s ease-in-out infinite}
.vis-migrazione-ecommerce .p0{background:var(--vy)}
.vis-migrazione-ecommerce .p1{background:var(--vg);animation-delay:-2s}
.vis-migrazione-ecommerce .p2{background:var(--vr);animation-delay:-4s}
@keyframes vd-move{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(110%,-60%)}90%{opacity:1}100%{transform:translate(220%,0);opacity:0}}
.vis-migrazione-ecommerce .redir{left:6%;bottom:3%;width:88%;padding:3% 4.5%;display:flex;flex-direction:column;gap:.35em;background:var(--vi);color:var(--vw);box-shadow:7px 7px 0 var(--vy)}
.vis-migrazione-ecommerce .rd-h{font-size:.75em;color:var(--vy);text-transform:uppercase;letter-spacing:.08em}
.vis-migrazione-ecommerce .redir p{margin:0;display:grid;grid-template-columns:1fr auto 1fr auto;gap:.6em;align-items:center;font-size:.75em;white-space:nowrap;opacity:0;animation:vd-line 6s ease-in-out infinite;animation-delay:var(--d)}
.vis-migrazione-ecommerce .redir span{overflow:hidden;text-overflow:ellipsis}
.vis-migrazione-ecommerce .redir p>b{color:var(--vg)}
.vis-migrazione-ecommerce .ck{color:var(--vg);display:grid}
.vis-migrazione-ecommerce .ck svg{width:1.1em;height:1.1em}

/* ---------- React: albero dei componenti, anteprima, codice ---------- */
.vis-react .tree{left:2%;top:4%;width:56%;height:62%}
.vis-react .tr-body{display:flex;flex-direction:column;gap:.55em;padding:6% 7%;font-size:.82em}
.vis-react .n{align-self:flex-start;padding:.3em .6em;border:1.5px solid var(--vi);border-radius:6px;background:var(--vw);font-weight:700;position:relative}
.vis-react .n1{margin-left:1.4em}.vis-react .n2{margin-left:2.8em}
.vis-react .n1::before,.vis-react .n2::before{content:"";position:absolute;right:100%;top:50%;width:.9em;border-top:1.5px solid var(--vi)}
.vis-react .n2.hot{animation:vd-render 3s ease-in-out infinite}
.vis-react .n2.b{animation:vd-render 3s ease-in-out infinite;animation-delay:.25s}
@keyframes vd-render{0%,60%,100%{background:var(--vw);box-shadow:none}70%,80%{background:#61dafb;box-shadow:3px 3px 0 var(--vi)}}
.vis-react .ui{right:2%;top:16%;width:46%;height:50%;padding:3.5% 4%;display:flex;flex-direction:column;gap:6%;box-shadow:7px 7px 0 var(--vg);z-index:2}
.vis-react .ui-top{display:flex;align-items:center;justify-content:space-between;gap:.4em}
.vis-react .ui-top b{font-weight:800}
.vis-react .seg{display:flex;border:1.5px solid var(--vi);border-radius:99px;overflow:hidden;font-size:.7em;font-weight:700}
.vis-react .seg i{font-style:normal;padding:.2em .6em}
.vis-react .seg i.on{background:var(--vi);color:var(--vw)}
.vis-react .ui-bars{flex:1;display:flex;align-items:flex-end;gap:6%;border-bottom:2px solid var(--vi)}
.vis-react .ui-bars span{flex:1;height:var(--h);background:#61dafb;border:2px solid var(--vi);border-bottom:0;border-radius:4px 4px 0 0;transform-origin:bottom;animation:vd-bars 3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes vd-bars{0%,60%,100%{transform:scaleY(1)}75%{transform:scaleY(.55)}}
.vis-react .ui-rows{display:flex;flex-direction:column;gap:.4em}
.vis-react .ui-rows .s{width:60%}
.vis-react .code{left:8%;bottom:4%;width:74%;padding:3% 4.5%;background:var(--vi);color:var(--vw);font-size:.75em;white-space:nowrap;overflow:hidden;box-shadow:7px 7px 0 #61dafb}
.vis-react .c-k{color:var(--vr)}.vis-react .c-l{color:#61dafb}.vis-react .c-s{color:var(--vy)}
.vis-react .caret{display:inline-block;width:.5em;height:1.1em;background:var(--vy);vertical-align:-.2em;margin-left:.2em;animation:vis-pulse 1s steps(1) infinite}

/* ---------- Node.js: gestionale, API, negozio e registro ---------- */
.vis-nodejs .nodes{position:absolute;left:2%;right:2%;top:6%;height:50%}
.vis-nodejs .nd{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;width:28%;height:52%;background:var(--vw);border:2.5px solid var(--vi);border-radius:10px;box-shadow:6px 6px 0 var(--vi);z-index:2}
.vis-nodejs .nd b{font-weight:800;font-size:1.15em}
.vis-nodejs .nd small{font-size:.72em;opacity:.65;font-weight:700}
.vis-nodejs .erp{left:0;top:0;background:var(--vy)}
.vis-nodejs .shop{right:0;top:0;background:var(--vr)}
.vis-nodejs .api{left:36%;top:44%;box-shadow:6px 6px 0 #5fa04e;animation:vis-float 5s ease-in-out infinite}
.vis-nodejs .api .logo{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:#5fa04e;border:1.5px solid var(--vi)}
.vis-nodejs .api .logo svg{width:1.05em;height:1.05em;fill:var(--vw)}
.vis-nodejs .wire{position:absolute;top:26%;height:2.5px;background:repeating-linear-gradient(90deg,var(--vi) 0 6px,transparent 6px 11px);transform-origin:left}
.vis-nodejs .w1{left:14%;width:33%;transform:rotate(28deg)}
.vis-nodejs .w2{left:53%;width:33%;top:68%;transform:rotate(-28deg)}
.vis-nodejs .wire i{position:absolute;top:-.4em;left:0;width:.85em;height:.85em;border-radius:50%;background:var(--vg);border:1.5px solid var(--vi);animation:vd-packet 3s linear infinite}
.vis-nodejs .wire i.b{background:var(--vf);animation-delay:-1.5s}
@keyframes vd-packet{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - .85em);opacity:0}}
.vis-nodejs .log{left:10%;bottom:3%;width:80%;height:36%;background:var(--vi);color:var(--vw);box-shadow:7px 7px 0 #5fa04e}
.vis-nodejs .log .win-bar{border-color:#ffffff30}
.vis-nodejs .lg-body{padding:3% 5%;font-size:.78em;line-height:1.7}
.vis-nodejs .lg-body p{margin:0;white-space:nowrap;overflow:hidden;opacity:0;animation:vd-line 6s ease-in-out infinite;animation-delay:var(--d)}
.vis-nodejs .lg-body b{color:var(--vg)}

/* Movimento ridotto: le righe che entrano in sequenza restano visibili, gli stati alternati mostrano quello finale. */
@media (prefers-reduced-motion:reduce){
 .vis-magento .t-body p,.vis-nodejs .lg-body p,.vis-migrazione-ecommerce .redir p{opacity:1}
 .vis-woocommerce .s-a,.vis-migrazione-ecommerce .lane{display:none}
}

/* lost.css */
/* Pagina 404: il "404", la foglia e i link cadono in fondo allo schermo (lost.js). Senza JS restano ammucchiati, fermi. */
.is-404{background:var(--agency-bg)}
.lost{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--agency-bg);color:#fff;padding:clamp(130px,15vh,190px) var(--g) clamp(18px,3vh,32px)}
.lost-text{position:relative;z-index:2;max-width:760px;pointer-events:none}
.lost h1{font-size:clamp(46px,6.4vw,104px);line-height:.92;letter-spacing:-.05em;font-weight:800}
.lost h1 em{font-style:normal;font-weight:400}
.lost-text p{margin-top:22px;max-width:30em;font-size:clamp(17px,1.4vw,21px)}
.lost-hint{opacity:.7;font-size:15px!important}
.lost-hint .for-touch{display:none}
@media (hover:none),(pointer:coarse){.lost-hint .for-mouse{display:none}.lost-hint .for-touch{display:inline}}

/* Il mucchio fermo (senza JS, movimento ridotto, prima che parta la fisica) */
.lost-stage{position:relative;z-index:1;flex:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:0 clamp(4px,1vw,14px);margin-top:28px}
.lost-num{display:block;font-size:min(25vw,34svh);line-height:.74;font-weight:800;letter-spacing:-.04em;color:var(--green);text-shadow:0 .035em 0 var(--ink);user-select:none;-webkit-user-select:none}
.lost-num:nth-child(1){rotate:-7deg}
.lost-num:nth-child(2){rotate:4deg;translate:0 -.04em}
.lost-num:nth-child(3){rotate:-2deg}
.lost-leaf{display:block;width:min(13vw,17svh);aspect-ratio:170/204;background:var(--hero-hot);-webkit-mask:url(assets/leaf.svg) center/contain no-repeat;mask:url(assets/leaf.svg) center/contain no-repeat;rotate:-24deg;align-self:center;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
.lost-links{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.lost-link{font-size:clamp(17px,1.6vw,26px);cursor:pointer}
.lost-link:nth-child(odd){rotate:-3deg}
.lost-link:nth-child(3n){rotate:4deg}
.lost-link:hover{background:var(--ink);color:#fff}
.lost-link:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* Con la fisica: tutto in posizione assoluta, lo muove lost.js */
.lost-stage.is-live{position:absolute;inset:0;margin:0;display:block}
.lost-stage.is-live>*,.lost-stage.is-live .lost-link{position:absolute;left:0;top:0;rotate:none;translate:none;transform:translate3d(-999px,-999px,0);will-change:transform}
.lost-stage.is-live .lost-links{display:contents}
/* anche qui il puntatore è la nostra foglia (app.js), non quello di sistema */
.custom-cursor .lost-stage,.custom-cursor .lost-stage *{cursor:none!important}
.lost-stage .is-held{filter:drop-shadow(0 14px 0 rgba(0,0,0,.3))}
.lost-stage.is-live .lost-link{z-index:2}
@media (max-width:700px){
 .lost-num{font-size:min(36vw,30svh)}
 .lost-leaf{width:min(20vw,15svh)}
 .lost-link{font-size:17px}
}
/* fermo, le istruzioni per giocarci non servono */
@media (prefers-reduced-motion:reduce){.lost-hint{display:none}}
.motion-off .lost-hint{display:none}

/* home-index.css */
/* Home: indice dei servizi (blocco Cosa costruiamo, impaginazione "indice"). Titoli a caratteri grandi,
   al passaggio la riga si riempie e l'illustrazione del servizio segue il cursore (index.js). */
.home-index .hx{position:relative;margin-top:clamp(36px,5vw,80px)}
.hx-group+.hx-group{margin-top:clamp(56px,7vw,110px)}
.hx-label{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1.5px solid currentColor;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hx-label span{font-variant-numeric:tabular-nums;opacity:.6}
.hx-list{list-style:none;margin:0;padding:0}
.hx-row{position:relative;isolation:isolate;border-bottom:1.5px solid color-mix(in srgb,currentColor 28%,transparent)}
/* banda che riempie la riga dal basso */
.hx-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--flow-fg,var(--ink));transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.hx-link{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(12px,1.4vw,22px) 0;transition:color .35s var(--ease)}
.hx-row:has(.hx-sub) .hx-link{padding-bottom:clamp(4px,.6vw,8px)}
.hx-title{font-size:clamp(38px,6.4vw,112px);line-height:.98;letter-spacing:-.055em;font-weight:800;transition:transform .6s var(--ease),opacity .4s var(--ease)}
.hx-arrow{flex:none;display:grid;place-items:center;width:clamp(44px,4vw,60px);aspect-ratio:1;border:1.5px solid currentColor;border-radius:50%;font-size:clamp(18px,1.6vw,24px);transition:transform .5s var(--ease)}
.hx-sub{position:relative;display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0 0 clamp(14px,1.6vw,22px);transition:transform .6s var(--ease),color .35s var(--ease)}
.hx-sub a{display:inline-block;padding:5px 13px;border:1.5px solid currentColor;border-radius:99px;font-size:14px;font-weight:700;transition:background .25s,color .25s}

@media (hover:hover) and (pointer:fine){
 .hx-row:hover::before{transform:scaleY(1)}
 .hx-row:hover .hx-link,.hx-row:hover .hx-sub{color:var(--flow-bg,#fff)}
 .hx-row:hover .hx-title,.hx-row:hover .hx-sub{transform:translateX(clamp(12px,1.6vw,28px))}
 .hx-row:hover .hx-arrow{transform:rotate(45deg)}
 .hx-sub a:hover{background:var(--flow-bg,#fff);color:var(--flow-fg,var(--ink))}
 /* le altre righe si spengono un po', così si legge quella sotto il cursore */
 .hx-list:has(.hx-row:hover) .hx-row:not(:hover) .hx-title{opacity:.4}
}

/* Anteprima che segue il cursore: le illustrazioni delle pagine servizi, una alla volta */
.hx-preview{display:none}
@media (hover:hover) and (pointer:fine){
 .hx-preview{display:block;position:absolute;left:0;top:0;z-index:3;width:min(400px,30vw);aspect-ratio:1;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);will-change:transform}
 .hx-preview.is-visible{opacity:1}
 .hx-card{position:absolute;inset:0;display:flex;align-items:center;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)}
 .hx-card.is-on{clip-path:inset(-20px -20px -20px -20px)}
 .hx-card .vis{font-size:12px}
 .hx-card:not(.is-on) *{animation-play-state:paused!important}
}
.motion-off .hx-card{transition:none}

/* home-scroll.css */
/* Home, "Cosa costruiamo" a scorrimento orizzontale: tre pannelli per area. Con index.js la sezione si blocca
   e i pannelli passano di lato; senza JS, con movimento ridotto o su schermi stretti restano uno sotto l'altro. */
.home-scroll .hz{margin-top:clamp(36px,5vw,72px)}
.hz-track{display:grid;gap:22px}
.hz-panel{--pb:#fff;--pf:var(--ink);--pa:var(--dark);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,72px);padding:clamp(28px,4vw,64px);background:var(--pb);color:var(--pf);border:2.5px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink)}
.hz-custom{--pb:#4020e9;--pf:#fff;--pa:#00ffd1}
.hz-shop{--pb:#00ffd1;--pf:#17132f;--pa:#4020e9}
.hz-care{--pb:#edff38;--pf:#17132f;--pa:#ff40ca}
.hz-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hz-num{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--pa)}
.hz-num span{color:var(--pf);opacity:.5}
.hz-copy .eyebrow{margin-top:clamp(18px,2.4vw,36px)}
.hz-title{margin-top:14px;font-size:clamp(40px,5.2vw,92px);line-height:.95;letter-spacing:-.055em;font-weight:800}
.hz-title em{font-style:normal;font-weight:400;color:var(--pa)}
.hz-copy>p{margin-top:clamp(18px,2vw,28px);max-width:30em;font-size:clamp(17px,1.35vw,21px);line-height:1.45}
.hz-main{margin-top:clamp(22px,2.6vw,36px)}
/* il bottone prende i colori del pannello, non quelli del fondo che cambia (flow.css) */
.hz-panel .pill.dark,.flow-on main .hz-panel .pill.dark{background:var(--pf);color:var(--pb)}
.hz-links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.hz-links a{display:inline-block;padding:5px 13px;border:1.5px solid currentColor;border-radius:99px;font-size:14px;font-weight:700;transition:background .25s,color .25s}
.hz-links a:hover{background:var(--pf);color:var(--pb)}
.hz-vis{min-width:0}
.hz-vis .vis{font-size:clamp(11px,1vw,15px)}
.hz-progress{display:none}
@media(max-width:900px){.hz-panel{grid-template-columns:1fr}.hz-vis{order:-1;max-width:460px}}

/* Orizzontale: la sezione resta ferma per tutta l'altezza dello schermo e la fila scorre di lato */
/* larga quanto lo schermo, oltre il margine della sezione */
.hz.is-horizontal{height:100svh;width:100vw;margin-left:calc(50% - 50vw);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hz.is-horizontal .hz-track{display:flex;gap:clamp(20px,2.4vw,36px);width:max-content;padding:0 var(--g);will-change:transform}
.hz.is-horizontal .hz-panel{width:min(84vw,1260px);height:min(calc(100svh - 190px),720px)}
.hz.is-horizontal .hz-progress{display:block;height:3px;margin:clamp(22px,3vh,36px) var(--g) 0;background:color-mix(in srgb,currentColor 22%,transparent)}
.hz-progress i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:left}

/* home-morph.css */
/* Home, "Cosa costruiamo" dal disegno al codice: i passaggi scorrono a sinistra, a destra una finestra ferma che
   si trasforma. index.js mette sulla finestra le classi at-0…at-4 (cumulative: al passaggio 3 ci sono at-0…at-3). */
.home-morph .mx{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,96px);margin-top:clamp(36px,5vw,72px)}
.mx-steps{list-style:none;margin:0;padding:0}
.mx-step{min-height:72svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:6svh 0;transition:opacity .5s var(--ease)}
/* con JS i passaggi non attivi si attenuano; senza, si leggono tutti */
.mx.is-live .mx-step{opacity:.28}
.mx-step:first-child{min-height:56svh;justify-content:flex-start;padding-top:12svh}
.mx-step:last-child{min-height:60svh}
.mx.is-live .mx-step.is-active{opacity:1}
.mx-num{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.6}
.mx-step .eyebrow{margin-top:14px}
.mx-step h3{margin-top:12px;font-size:clamp(34px,3.6vw,60px);line-height:1;letter-spacing:-.05em;font-weight:800}
.mx-step p{margin-top:16px;max-width:27em;font-size:clamp(17px,1.3vw,20px);line-height:1.45}
.mx-step .pill{margin-top:24px}
.mx-links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.mx-links a{display:inline-block;padding:5px 13px;border:1.5px solid currentColor;border-radius:99px;font-size:14px;font-weight:700;transition:background .25s,color .25s}
.mx-links a:hover{background:var(--flow-fg,var(--ink));color:var(--flow-bg,#fff)}
.mx-sticky{position:sticky;top:calc(50svh - min(19vw,330px));align-self:start;padding-right:14px}
.mx-dots{display:flex;gap:8px;justify-content:center;list-style:none;margin:28px 0 0;padding:0}
.mx-dots li{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.25;transition:opacity .3s,transform .3s}
.mx-dots li.on{opacity:1;transform:scale(1.4)}

/* ---------- La finestra ---------- */
.mx-stage{--i:#17132f;--g:#00ffd1;--p:#ff78d7;--f:#ff40ca;--v:#4020e9;--y:#edff38;--w:#fff;--soft:#e6e3f0;position:relative;font-size:clamp(10px,.85vw,14px);color:var(--i);line-height:1.3}
.mx-stage *,.mx-stage *::before{box-sizing:border-box}
.mx-win{position:relative;aspect-ratio:16/11;background:var(--w);border:2.5px solid var(--i);border-radius:14px;box-shadow:10px 10px 0 var(--i);overflow:hidden}
.mx-bar{position:relative;display:flex;align-items:center;gap:6px;height:3.4em;padding:0 1em;border-bottom:2px solid var(--i)}
.mx-bar>i{width:.85em;height:.85em;border-radius:50%;border:1.5px solid var(--i)}
.mx-bar>i:nth-child(1){background:var(--f)}.mx-bar>i:nth-child(2){background:var(--y)}.mx-bar>i:nth-child(3){background:var(--g)}
.mx-url{position:relative;flex:1;max-width:60%;height:2em;margin-left:1em;border:1.5px solid var(--i);border-radius:99px;background:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.mx-url b{position:absolute;inset:0;display:flex;align-items:center;padding:0 1em;font-weight:500;opacity:0;transform:translateY(40%);transition:opacity .35s,transform .45s var(--ease)}
.mx-live{margin-left:auto;padding:.25em .8em;border:1.5px solid var(--i);border-radius:99px;background:var(--g);font-weight:700;font-size:.9em;opacity:0;transform:scale(.6);transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.mx-body{position:absolute;inset:3.4em 0 0}
.mx-body>div{position:absolute;inset:0;transition:opacity .55s var(--ease),transform .7s var(--ease),clip-path .7s var(--ease)}

/* 0 · wireframe */
.mx-wire{display:grid;grid-template-columns:22% 1fr;gap:1.4em;padding:1.4em;background:repeating-linear-gradient(0deg,transparent 0 23px,#17132f08 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,#17132f08 23px 24px)}
.mx-wire div,.mx-wire i{border:1.5px dashed #17132f66;border-radius:8px}
.w-side{display:flex;flex-direction:column;gap:.8em;padding:1em;border-style:solid!important}
.w-side i{display:block;height:1.1em;border-radius:99px!important}
.w-main{display:grid;grid-template-rows:auto auto 1fr auto;gap:1em;border:0!important}
.w-head{height:2.4em}
.w-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;border:0!important}
.w-box{height:4.6em}
.w-img{background:linear-gradient(to top right,transparent calc(50% - 1px),#17132f44 50%,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),#17132f44 50%,transparent calc(50% + 1px))}
.w-lines{display:grid;gap:.6em;border:0!important}
.w-lines i{display:block;height:.7em;border-radius:99px!important}
.w-lines i:nth-child(2){width:80%}.w-lines i:nth-child(3){width:55%}

/* 1 · gestionale */
.mx-app{display:grid;grid-template-columns:22% 1fr;opacity:0;clip-path:inset(0 0 0 100%)}
.a-side{display:flex;flex-direction:column;gap:.5em;padding:1.2em .9em;background:var(--i);color:#fff;font-weight:600}
.a-side b{width:1.8em;height:1.8em;margin-bottom:.8em;border-radius:50%;background:var(--g)}
.a-side span{padding:.35em .6em;border-radius:6px;opacity:.75}
.a-side span.on{background:var(--g);color:var(--i);opacity:1}
.a-main{display:grid;grid-template-rows:auto 1fr auto;gap:1em;padding:1.2em}
.a-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.k{padding:.6em .8em;border:2px solid var(--i);border-radius:8px}
.k0{background:var(--g)}.k1{background:var(--y)}.k2{background:var(--p)}
.k small{display:block;font-weight:600;font-size:.85em}
.k strong{font-size:1.6em;font-weight:800;letter-spacing:-.03em}
.a-chart{display:flex;align-items:flex-end;gap:5%;padding:0 .4em;border-bottom:2px solid var(--i)}
.a-chart i{flex:1;height:var(--h);background:var(--v);border:2px solid var(--i);border-bottom:0;border-radius:5px 5px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease) var(--d)}
.a-chart i.hot{background:var(--f)}
.a-rows{display:grid;gap:.45em}
.r{display:flex;align-items:center;gap:.8em;font-weight:600}
.r em{flex:1;height:.55em;border-radius:99px;background:var(--soft)}
.r b{padding:.15em .7em;border:1.5px solid var(--i);border-radius:99px;font-size:.85em}
.st0{background:var(--y)}.st1,.st2{background:var(--g)}

/* 2 · negozio */
.mx-shop{display:grid;grid-template-columns:44% 1fr;gap:1.6em;align-items:center;padding:1.6em 2em;opacity:0;transform:translateY(12%)}
.s-img{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--p);border:2.5px solid var(--i);border-radius:12px}
.s-img svg{width:58%}
.s-img span{position:absolute;top:.7em;left:.7em;padding:.15em .6em;border:1.5px solid var(--i);border-radius:99px;background:var(--f);color:#fff;font-weight:800;font-size:.85em}
.s-info h4{font-size:1.7em;letter-spacing:-.03em;font-weight:800}
.s-price{margin-top:.3em;font-size:1.3em;font-weight:800}
.s-price s{font-size:.7em;font-weight:500;opacity:.5}
.s-dots{display:flex;gap:.5em;margin-top:.9em}
.s-dots i{width:1.5em;height:1.5em;border-radius:50%;border:2px solid var(--i);background:var(--p)}
.s-dots i:nth-child(2){background:var(--g)}.s-dots i:nth-child(3){background:var(--v)}
.s-sizes{display:flex;gap:.4em;margin-top:.8em}
.s-sizes span{display:grid;place-items:center;width:2.2em;height:2.2em;border:1.5px solid var(--i);border-radius:6px;font-weight:700;font-size:.9em}
.s-sizes .on{background:var(--i);color:#fff}
.mx-shop button{margin-top:1.1em;padding:.75em 1.4em;border:0;border-radius:99px;background:var(--i);color:var(--g);font:inherit;font-weight:700;pointer-events:none;transition:transform .2s}
.s-cart{position:absolute;top:1em;right:1.4em;font-size:1.4em}
.s-cart b{position:absolute;top:-.5em;right:-.7em;display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:var(--f);color:#fff;font-size:.6em;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1) .9s}

/* 3 · terminale del rilascio */
.mx-term{top:auto!important;height:46%;padding:1.2em 1.6em;background:var(--i);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;border-top:2.5px solid var(--i);transform:translateY(105%)}
.mx-term p{margin:0 0 .5em;opacity:0;transform:translateX(-.6em);transition:opacity .3s,transform .4s var(--ease)}
.mx-term p:nth-child(2),.mx-term p:nth-child(3){color:var(--g)}
.mx-term p:last-child{color:var(--y);font-weight:700}

/* 4 · tenuto in piedi: elementi fuori dalla finestra */
.mx-care>div{position:absolute;z-index:2;opacity:0;transform:translateY(20px) scale(.9);transition:opacity .4s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.c-gauge{top:-6%;right:-4%;width:24%;padding:.8em .9em .6em;background:#fff;border:2.5px solid var(--i);border-radius:12px;box-shadow:6px 6px 0 var(--i);text-align:center;font-weight:800}
.c-gauge .g-arc{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s var(--ease) .3s}
.c-chip{padding:.55em 1em;border:2px solid var(--i);border-radius:99px;font-weight:700;white-space:nowrap;box-shadow:4px 4px 0 var(--i)}
.c1{left:-5%;bottom:22%;background:var(--y);transition-delay:.15s!important}
.c2{right:6%;bottom:-5%;background:var(--g);transition-delay:.3s!important}

/* cursori finti: si spostano dove si lavora */
.mx-cur{position:absolute;z-index:3;left:var(--x);top:var(--y);display:flex;align-items:flex-start;gap:2px;pointer-events:none;transition:left 1s var(--ease),top 1s var(--ease),opacity .4s}
.mx-cur svg{width:1.6em;height:1.6em;filter:drop-shadow(1px 1px 0 #17132f)}
.mx-cur span{margin-top:1.2em;padding:.2em .6em;border-radius:6px;color:#fff;font-weight:700;font-size:.85em}
.cur-r span{background:var(--v)}
.cur-d span{background:var(--f)}
.cur-r{--x:44%;--y:42%}
.cur-d{--x:70%;--y:90%;opacity:0}

/* ---------- Passaggi ---------- */
.at-0 .mx-url b[data-s="0"]{opacity:1;transform:none}
.at-1 .mx-url b[data-s="0"],.at-2 .mx-url b[data-s="1"],.at-3 .mx-url b[data-s="2"],.at-4 .mx-url b[data-s="3"]{opacity:0;transform:translateY(-40%)}
.at-1:not(.at-2) .mx-url b[data-s="1"],.at-2:not(.at-3) .mx-url b[data-s="2"],.at-3:not(.at-4) .mx-url b[data-s="3"],.at-4 .mx-url b[data-s="4"]{opacity:1;transform:none}
.at-1 .mx-wire{opacity:0;transform:scale(.96)}
.at-1 .mx-app{opacity:1;clip-path:inset(0)}
.at-1 .a-chart i{transform:scaleY(1)}
.at-1 .cur-r{--x:71%;--y:56%}
.at-2 .mx-app{opacity:0;transform:translateY(-8%)}
.at-2 .mx-shop{opacity:1;transform:none}
.at-2 .s-cart b{transform:scale(1)}
.at-2 .cur-r{--x:64%;--y:80%}
.at-3 .mx-live{opacity:1;transform:none}
.at-3 .mx-term{transform:none}
.at-3 .mx-term p{opacity:1;transform:none;transition-delay:calc(.35s + var(--d))}
.at-3 .cur-r{opacity:0}
.at-3 .cur-d{opacity:1;--x:44%;--y:78%}
.at-4 .mx-term{transform:translateY(105%)}
.at-4 .mx-care>div{opacity:1;transform:none}
.at-4 .g-arc{stroke-dashoffset:12}
.at-4 .cur-d{--x:80%;--y:14%}

@media(max-width:900px){
 .home-morph .mx{grid-template-columns:1fr;gap:0}
 .mx-sticky{grid-row:1;top:64px;z-index:2;padding:12px 14px 14px 0;background:var(--flow-bg,var(--paper))}
 .mx-dots{margin-top:14px}
 .mx-step,.mx-step:first-child,.mx-step:last-child{min-height:62svh;padding:6svh 0;justify-content:flex-start}
 .mx-stage{font-size:2.3vw}
}
.motion-off .mx-stage *,.motion-off .mx-step{transition:none!important}

/* home-explode.css */
/* Home, "Cosa costruiamo" a spaccato: una finestra che mentre si scorre si apre in quattro strati 3D (disegno, gestionale,
   negozio, server), li passa in rassegna uno alla volta e alla fine si richiude nel prodotto finito.
   index.js blocca la sezione e muove le variabili --rx --rz --gap --f --sc della pila. Senza JS, con movimento ridotto
   o su schermi bassi la pila resta aperta e i passaggi si leggono in fila. Gli interni degli strati sono in home-morph.css. */
.home-explode .ex{margin-top:clamp(36px,5vw,72px)}
.ex-scene{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,4vw,72px);align-items:center}
.ex-caps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,5vw,72px)}
.ex-cap{display:flex;flex-direction:column;align-items:flex-start}
.ex-cap .mx-num span{opacity:.5}
.ex-cap .eyebrow{margin-top:14px}
.ex-cap h3{margin-top:12px;font-size:clamp(34px,3.8vw,64px);line-height:1;letter-spacing:-.05em;font-weight:800}
.ex-cap p{margin-top:16px;max-width:27em;font-size:clamp(17px,1.3vw,20px);line-height:1.45}
.ex-cap .pill{margin-top:24px}
.ex-progress{display:none}

/* ---------- La pila ---------- */
/* valori della pila aperta (--rx…--open): sono quelli che si vedono senza JS; index.js li cambia mentre si scorre */
.ex-view{--rx:56;--rz:-38;--gap:8;--f:1.5;--sc:.78;--open:1;--i:#17132f;--g:#00ffd1;--p:#ff78d7;--f:#ff40ca;--v:#4020e9;--y:#edff38;--w:#fff;--soft:#e6e3f0;position:relative;display:grid;place-items:center;min-height:min(78svh,760px);perspective:2600px;font-size:clamp(8px,.78vw,13px);color:var(--i);line-height:1.3}
.ex-view *,.ex-view *::before{box-sizing:border-box}
.ex-stack{position:relative;width:52em;aspect-ratio:16/11;transform-style:preserve-3d;
 transform:scale(var(--sc)) rotateX(calc(var(--rx)*1deg)) rotateZ(calc(var(--rz)*1deg)) translateZ(calc((var(--f) - 1.5)*var(--gap)*1em))}
/* --up (index.js): lo strato si alza sopra quello a fuoco */
.ex-layer{--up:0;position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc((1.5 - var(--i))*var(--gap)*1em + var(--up)*14em))}
.ex-card{position:absolute;inset:0;overflow:hidden;background:var(--w);border:2.5px solid var(--i);border-radius:14px;box-shadow:.7em .7em 0 var(--i)}
/* etichetta dello strato: sta fuori dal bordo sinistro e si legge solo quando la pila è aperta */
.ex-tag{position:absolute;right:100%;top:0;display:flex;align-items:center;gap:.6em;margin-right:1.4em;padding:.45em 1em;border:2px solid var(--i);border-radius:99px;background:var(--w);font-size:1.25em;font-weight:800;white-space:nowrap;opacity:var(--open);transform:translateZ(.1em)}
.ex-tag b{font-variant-numeric:tabular-nums;opacity:.5}
.ex-tag{transition:background .3s,color .3s}
.is-focus .ex-tag{background:var(--i);color:#fff}
/* linee tratteggiate agli angoli che tengono insieme gli strati, come in un disegno esploso */
.ex-pins i{position:absolute;width:0;height:calc(3*var(--gap)*1em);border-left:2px dashed #17132f55;transform-origin:0 0;transform:translateZ(calc(1.5*var(--gap)*1em)) rotateX(-90deg);opacity:var(--open)}
.ex-pins i:nth-child(1){left:0;top:0}.ex-pins i:nth-child(2){right:0;top:0}.ex-pins i:nth-child(3){left:0;bottom:0}.ex-pins i:nth-child(4){right:0;bottom:0}
/* ombra a terra: si allarga quando la pila si apre */
.ex-floor{position:absolute;left:50%;top:50%;width:46em;height:16em;margin:-8em 0 0 -23em;border-radius:50%;background:radial-gradient(closest-side,#17132f33,transparent);transform:translateY(calc(10em + var(--open)*8em)) scale(calc(.8 + var(--open)*.35));filter:blur(4px);pointer-events:none}

/* 0 · disegno: vetro con il wireframe */
.ex-l0 .ex-card{background:#fff;border-style:dashed}
.ex-l0 .mx-wire{position:absolute;inset:0}
.ex-l0 .cur-r{--x:58%;--y:46%}
.ex-l0 .mx-cur{transition:none}
/* 1 · gestionale, con la barra del browser (è lo strato che resta in cima a pila chiusa) */
.ex-l1 .ex-card{display:flex;flex-direction:column}
.ex-l1 .mx-app{position:relative;flex:1;opacity:1;clip-path:none}
.ex-view .mx-url b{opacity:1;transform:none}
.ex-view .mx-live{transform-origin:right}
/* 2 · negozio */
.ex-l2 .ex-card{background:#fff6fc}
.ex-l2 .mx-shop{position:absolute;inset:0;opacity:1;transform:none}
/* 3 · server: codice e rilascio */
.ex-l3 .ex-card{display:grid;grid-template-rows:1fr auto;background:var(--i);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05em}
.ex-code{padding:1.6em 1.8em;counter-reset:ln}
.ex-code p{margin:0 0 .45em;white-space:pre;counter-increment:ln}
.ex-code p::before{content:counter(ln);display:inline-block;width:2em;opacity:.35}
.c-k{color:var(--p)}.c-f{color:var(--g)}.c-s{color:var(--y)}.c-p{color:#b9b4d9}
.ex-term{padding:1.1em 1.8em;border-top:2px solid #ffffff2a;background:#0f0c24}
.ex-term p{margin:0 0 .4em;opacity:.25;transition:opacity .3s}
.ex-term p:nth-child(2),.ex-term p:nth-child(3){color:var(--g)}
.ex-term p:last-child{color:var(--y);font-weight:700}

/* elementi del prodotto finito, fuori dalla pila */
.ex-care{position:absolute;inset:0;pointer-events:none}
.ex-care>div{position:absolute;z-index:2;opacity:0;transform:translateY(20px) scale(.9);transition:opacity .4s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.ex-care .c-gauge{top:8%;right:2%;width:15em;padding:.8em .9em .6em;background:#fff;border:2.5px solid var(--i);border-radius:12px;box-shadow:6px 6px 0 var(--i);text-align:center;font-weight:800;font-size:1.1em}
.ex-care .g-arc{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s var(--ease) .3s}
.ex-care .c-chip{font-size:1.2em}
.ex-care .c1{left:0;bottom:22%;background:var(--y);transition-delay:.15s}
.ex-care .c2{left:22%;right:auto;bottom:4%;background:var(--g);transition-delay:.3s}

/* animazioni interne, accese da index.js con le classi on-0…on-4 sulla vista (senza JS: tutto acceso) */
.ex-view .a-chart i{transform:scaleY(1)}
.ex-view .s-cart b{transform:scale(1)}
.ex-view .ex-term p{opacity:1}
.ex-view .mx-live{opacity:1;transform:none}
.ex.is-live .a-chart i{transform:scaleY(0)}
.ex.is-live .s-cart b{transform:scale(0)}
.ex.is-live .ex-term p{opacity:.15}
.ex.is-live .mx-live{opacity:0;transform:scale(.6)}
.ex.is-live .on-1 .a-chart i{transform:scaleY(1)}
.ex.is-live .on-2 .s-cart b{transform:scale(1)}
.ex.is-live .on-3 .ex-term p{opacity:1;transition-delay:calc(.2s + var(--d))}
.ex.is-live .on-4 .mx-live{opacity:1;transform:none}
.ex.is-live .on-4 .ex-care>div{opacity:1;transform:none}
.ex.is-live .on-4 .g-arc{stroke-dashoffset:12}

/* ---------- Bloccata: la sezione resta ferma e i passaggi si sostituiscono ---------- */
.ex.is-live .ex-scene{height:100svh;padding:calc(var(--header-h,72px) + 2svh) 0 4svh}
.ex.is-live .ex-caps{position:relative;display:block;align-self:center;min-height:22em}
.ex.is-live .ex-cap{position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.ex.is-live .ex-cap.is-active{opacity:1;visibility:visible;transform:none;transition-delay:.1s,.1s,0s}
.ex.is-live .ex-view{min-height:0;height:100%}
.ex.is-live .ex-progress{display:block;position:absolute;left:0;bottom:3svh;width:min(34%,320px);height:3px;background:color-mix(in srgb,currentColor 22%,transparent)}
.ex.is-live .ex-progress i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:left}
.ex.is-live .ex-scene{position:relative}

@media(max-width:900px){
 .ex-scene{grid-template-columns:1fr}
 .ex-view{grid-row:1;min-height:110vw;font-size:1.55vw}
 .ex-tag{font-size:1.6em}
 .ex.is-live .ex-scene{grid-template-rows:minmax(0,1fr) auto;gap:8px;padding-top:calc(var(--header-h,64px) + 1svh)}
 .ex.is-live .ex-view{grid-row:1}
 .ex.is-live .ex-caps{grid-row:2;min-height:16.5em}
 .ex.is-live .ex-cap h3{font-size:30px}
 .ex.is-live .ex-cap p{font-size:16px;margin-top:10px}
 .ex.is-live .ex-cap .pill{margin-top:14px}
 .ex.is-live .ex-cap .mx-links{display:none}
 .ex.is-live .ex-progress{left:0;right:0;width:auto;bottom:1.5svh}
}
.motion-off .ex-view *{transition:none!important}

/* punti dove lavora la foglia 3D (index.js li legge sullo schermo); non si vedono */
.ex-spot{position:absolute;z-index:4;width:2px;height:2px;pointer-events:none}
/* bagliore sotto la foglia quando arriva su uno strato */
.ex-spot::after{content:"";position:absolute;left:-3em;top:-3em;width:6em;height:6em;border-radius:50%;background:radial-gradient(closest-side,#ff40ca66,transparent);opacity:0;transform:scale(.4);transition:opacity .4s,transform .6s var(--ease)}
.is-focus .ex-spot::after{opacity:1;transform:none}

/* works.css */
/* Lavori. In home (.works-scroll) i progetti scorrono di lato: con index.js la sezione si blocca e la fila passa,
   senza JS, su schermi stretti o con movimento ridotto si sfogliano col dito. Nella pagina Lavori (.works-story)
   ogni progetto è raccontato con il video grande, il telefono e i dettagli da vicino. */
.wk-slide,.wk-story,.case-c{--wb:#fff;--wf:var(--ink);--wa:#4020e9}
.wk-slide.bg-rosa,.wk-story.bg-rosa,.case-c.bg-rosa{--wb:#ff40ca;--wf:#17132f;--wa:#edff38}
.wk-slide.bg-viola,.wk-story.bg-viola,.case-c.bg-viola{--wb:#4020e9;--wf:#fff;--wa:#00ffd1}
.wk-slide.bg-giallo,.wk-story.bg-giallo,.case-c.bg-giallo{--wb:#edff38;--wf:#17132f;--wa:#4020e9}
.wk-slide.bg-verde,.wk-story.bg-verde,.case-c.bg-verde{--wb:#00ffd1;--wf:#17132f;--wa:#4020e9}
.wk-slide.bg-inchiostro,.wk-story.bg-inchiostro,.case-c.bg-inchiostro{--wb:#17132f;--wf:#fff;--wa:#00ffd1}

/* Finestra del browser e telefono */
.wk-media{position:relative;min-width:0}
.wk-browser{position:relative;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff;box-shadow:10px 10px 0 var(--ink)}
.wk-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:2.5px solid var(--ink);background:#fff;color:#17132f}
.wk-bar i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink)}
.wk-bar i:nth-child(1){background:#ff40ca}.wk-bar i:nth-child(2){background:#edff38}.wk-bar i:nth-child(3){background:#00ffd1}
.wk-bar span{margin:0 auto;padding:3px 14px;border-radius:99px;background:#17132f0f;font-size:12px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.wk-screen{position:relative;aspect-ratio:16/10;background:#f3f1ec;overflow:hidden}
.wk-screen img,.wk-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.wk-screen video{opacity:0;transition:opacity .5s}
.wk-screen video.is-playing{opacity:1}
.wk-phone{position:absolute;right:-3%;bottom:-9%;width:clamp(78px,15%,170px);aspect-ratio:390/844;border:2.5px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 var(--ink);transform:rotate(4deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wk-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* telefono con il video sopra la schermata */
.wk-screen-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s}
.wk-screen-m video.is-playing{opacity:1}
.wk-media:hover .wk-phone{transform:rotate(-2deg) translateY(-10px)}

/* Testi */
.wk-num{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--wa)}
.wk-num span{color:var(--wf);opacity:.5}
.wk-kind{margin-top:14px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wk-year{display:inline-block;padding:1px 9px;border:1.5px solid currentColor;border-radius:99px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wk-name{margin-top:10px;font-size:clamp(38px,4.6vw,84px);line-height:.95;letter-spacing:-.05em;font-weight:800}
.wk-lead{margin-top:clamp(14px,1.6vw,24px);max-width:26em;font-size:clamp(18px,1.45vw,23px);line-height:1.35;font-weight:600}
.wk-lead em{font-style:normal;color:var(--wa)}
.wk-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:clamp(16px,1.8vw,26px) 0 0;padding:0}
.wk-tags li{padding:4px 12px;border:1.5px solid currentColor;border-radius:99px;font-size:13px;font-weight:700}
.wk-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(20px,2.2vw,32px)}
.wk-site{font-weight:800;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
/* il bottone prende i colori della scheda, non quelli del fondo che cambia (flow.css) */
.wk-slide .pill.dark,.wk-story .pill.dark,.flow-on main .wk-slide .pill.dark,.flow-on main .wk-story .pill.dark{background:var(--wf);color:var(--wb)}

/* ---------- Home: la fila ---------- */
.works-scroll .wk{margin-top:clamp(36px,5vw,72px)}
.wk-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--g) 40px;margin:0 calc(-1 * var(--g));scrollbar-width:none;overscroll-behavior-x:contain}
.wk-track::-webkit-scrollbar{display:none}
.wk-slide{position:relative;flex:0 0 min(88vw,1320px);scroll-snap-align:center;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,72px);padding:clamp(24px,3.6vw,60px) clamp(24px,3.6vw,60px) clamp(36px,4.6vw,72px);background:var(--wb);color:var(--wf);border:2.5px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink);overflow:hidden;isolation:isolate}
.wk-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* il nome enorme dietro, scorre più lento della scheda (index.js) */
.wk-ghost{position:absolute;left:0;bottom:-.18em;z-index:-1;font-size:clamp(120px,15vw,280px);line-height:1;font-weight:800;letter-spacing:-.06em;white-space:nowrap;color:transparent;-webkit-text-stroke:2px var(--wf);opacity:.16;pointer-events:none;will-change:transform}
.wk-end{flex:0 0 min(60vw,520px);scroll-snap-align:center;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,3.6vw,60px);border:2.5px dashed currentColor;border-radius:18px;transition:background .3s,color .3s}
.wk-end-title{font-size:clamp(36px,4.2vw,76px);line-height:.95;letter-spacing:-.05em;font-weight:800}
.wk-end-arrow{align-self:flex-end;display:grid;place-items:center;width:clamp(70px,7vw,120px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:#fff;font-size:clamp(28px,3vw,48px);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.wk-end:hover .wk-end-arrow{transform:rotate(-45deg) scale(1.08)}
.wk-foot{display:flex;align-items:center;gap:18px;margin-top:8px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.wk-progress{flex:1;height:3px;background:color-mix(in srgb,currentColor 22%,transparent)}
.wk-progress i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:left}
.wk-count b{font-size:22px}
@media(max-width:900px){
 .wk-slide{grid-template-columns:1fr;flex-basis:86vw;align-content:start}
 .wk-media{margin-right:6%}
 .wk-ghost{display:none}
 .wk-end{flex-basis:70vw;min-height:320px}
}

/* Con index.js su schermi larghi: la sezione resta ferma e la fila scorre di lato */
.wk.is-horizontal{height:100svh;width:100vw;margin-left:calc(50% - 50vw);margin-top:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.wk.is-horizontal .wk-track{overflow:visible;scroll-snap-type:none;width:max-content;margin:0;padding:0 var(--g) 14px;will-change:transform}
.wk.is-horizontal .wk-slide{height:min(calc(100svh - 170px),760px)}
.wk.is-horizontal .wk-end{height:min(calc(100svh - 170px),760px)}
.wk.is-horizontal .wk-foot{margin:clamp(20px,3vh,34px) var(--g) 0}
.wk.is-horizontal .wk-drag{display:none}
/* la scheda attiva è piena, le altre un po' indietro */
.wk.is-horizontal .wk-slide{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s}
.wk.is-horizontal .wk-slide:not(.is-current){transform:scale(.94);opacity:.7}

/* ---------- Pagina Lavori: il racconto ---------- */
.wk-stories{display:grid;gap:clamp(40px,6vw,96px);margin-top:clamp(36px,5vw,72px)}
.wk-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px) clamp(28px,4vw,72px);padding:clamp(24px,4vw,64px);background:var(--wb);color:var(--wf);border:2.5px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink);scroll-margin-top:100px}
.wk-story-head{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:6px 24px}
.wk-story-head .wk-num{font-size:clamp(16px,1.4vw,22px);margin-bottom:.9em}
.wk-story-head .wk-name{margin:0;font-size:clamp(44px,7vw,128px)}
.wk-story-head .wk-kind{margin:0 0 .8em;text-align:right}
.wk-story .wk-media{grid-column:1/-1;margin:0 4% clamp(18px,3vw,40px) 0}
.wk-story .wk-phone{width:clamp(90px,16%,210px)}
.wk-story-body{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.wk-story-text .wk-lead{margin-top:0}
.wk-story-text>div:not(.wk-links),.wk-story-text>p:not(.wk-lead){margin-top:14px;max-width:34em;font-size:clamp(16px,1.15vw,18px);line-height:1.6}
.wk-story-text p+p{margin-top:12px}
.wk-facts{display:grid;gap:0;margin:0}
.wk-facts div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:2px solid currentColor}
.wk-facts div:last-child{border-bottom:2px solid currentColor}
.wk-facts dt{font-size:clamp(22px,2.2vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1}
.wk-facts dd{margin:0;font-size:15px;line-height:1.4}
.wk-story-side .wk-tags{margin-top:22px}
.wk-details{grid-column:1/-1}
.wk-details ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;list-style:none;margin:14px 0 0;padding:0}
.wk-details figure{margin:0}
.wk-lens{border:2.5px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff;box-shadow:8px 8px 0 var(--ink)}
.wk-lens video{display:block;width:100%;height:auto}
.wk-details figcaption{margin-top:12px;font-weight:700;text-align:center}
@media(max-width:900px){
 .wk-story,.wk-story-body{grid-template-columns:1fr}
 .wk-story-head{grid-template-columns:auto 1fr}
 .wk-story-head .wk-kind{grid-column:1/-1;text-align:left;margin:0}
}

@media(prefers-reduced-motion:reduce){.wk-phone,.wk-end-arrow,.wk.is-horizontal .wk-slide{transition:none}}

/* ---------- Fuori dai lavori: solo da guardare (16/10) ---------- */
/* Home: la scheda è quasi tutta sito; a destra numero, nome, tipo e la freccia verso il lavoro */
.wk-slide{grid-template-columns:minmax(0,2.1fr) minmax(0,.9fr);align-items:end}
.wk-info{align-self:stretch;justify-content:flex-end}
.wk-info .wk-num{margin-bottom:auto}
/* sottolineatura sotto le lettere di ogni riga (non in fondo alla riga, che con l'interlinea stretta tocca la riga dopo) */
.wk-name-link{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em;text-decoration-color:transparent;transition:text-decoration-color .35s}
.wk-name-link:hover{text-decoration-color:currentColor}
.wk-info .wk-kind{margin-top:16px}
.wk-go{display:grid;place-items:center;width:clamp(58px,5.4vw,84px);aspect-ratio:1;margin-top:clamp(20px,2.4vw,36px);border-radius:50%;background:var(--wf);color:var(--wb);font-size:clamp(22px,2vw,32px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wk-slide:hover .wk-go,.wk-go:hover{transform:rotate(45deg) scale(1.06)}
.wk-slide .wk-media{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wk-slide:hover .wk-media{transform:translateY(-6px) rotate(-.6deg)}
.wk-slide:hover .wk-phone{transform:rotate(-3deg) translateY(-18px)}
@media(max-width:900px){.wk-info .wk-num{margin-bottom:0}}

/* Logo del cliente: maschera nel colore del testo */
.wk-logo{display:block;height:clamp(30px,3vw,46px);aspect-ratio:var(--ratio,3);max-width:100%;background:currentColor;-webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}

/* Pagina Lavori: tessere grandi sfalsate, tutta la tessera è un link */
.wk-tiles{display:grid;gap:clamp(48px,7vw,120px);list-style:none;margin:clamp(48px,7vw,110px) 0 0;padding:0}
.wk-tile{--wb:#fff;--wf:var(--ink);--wa:#4020e9}
.wk-tile.bg-rosa{--wb:#ff40ca;--wf:#17132f;--wa:#edff38}
.wk-tile.bg-viola{--wb:#4020e9;--wf:#fff;--wa:#00ffd1}
.wk-tile.bg-giallo{--wb:#edff38;--wf:#17132f;--wa:#4020e9}
.wk-tile.bg-verde{--wb:#00ffd1;--wf:#17132f;--wa:#4020e9}
.wk-tile.bg-inchiostro{--wb:#17132f;--wf:#fff;--wa:#00ffd1}
.wk-tile-l{margin-right:clamp(0px,12vw,200px)}
.wk-tile-r{margin-left:clamp(0px,12vw,200px)}
.wk-tile-link,.wk-tile>.wk-media{display:block}
.wk-tile .wk-media{padding:clamp(28px,5vw,80px) clamp(28px,5vw,80px) clamp(40px,6vw,96px);background:var(--wb);border:2.5px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wk-tile .wk-phone{right:2%;bottom:-6%}
.wk-tile-link:hover .wk-media{transform:translateY(-8px)}
.wk-tile-link:hover .wk-phone{transform:rotate(-3deg) translateY(-24px)}
.wk-tile-foot{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'num logo go' 'num name go' 'num kind go';align-items:end;gap:8px 20px;margin-top:clamp(20px,2.6vw,36px)}
.wk-tile-foot .wk-num{grid-area:num;align-self:start;margin-top:.4em;color:inherit;opacity:.6}
.wk-tile-logo{grid-area:logo;height:clamp(26px,2.4vw,38px);margin-bottom:6px}
.wk-tile-foot .wk-name{grid-area:name;margin:0;font-size:clamp(40px,6vw,108px)}
.wk-tile-foot .wk-kind{grid-area:kind;margin:0}
.wk-tile-foot .wk-go{grid-area:go;margin:0;background:var(--ink);color:#fff}
.wk-tile-link:hover .wk-go{transform:rotate(45deg) scale(1.06)}
@media(max-width:700px){.wk-tile-l,.wk-tile-r{margin:0}.wk-tile-foot .wk-go{width:52px}}
/* pagina Lavori su fondo inchiostro: il cerchio della freccia passa al verde, se no sparisce nel fondo */
.works-story.bg-inchiostro .wk-tile-foot .wk-go{background:#00ffd1;color:#17132f}
/* il telefono sporge sotto la finestra: spazio perché non venga tagliato dal bordo della scheda */
.wk-slide .wk-media{margin-bottom:clamp(18px,3.4vw,56px)}
/* il telefono resta in basso a destra, sopra l'angolo della finestra */
.case-phone{position:relative}
/* scheda bloccata: la finestra si misura sull'altezza disponibile, così nome, tipo e freccia restano dentro */
.wk.is-horizontal .wk-slide{grid-template-rows:minmax(0,1fr);align-items:center}
.wk.is-horizontal .wk-slide .wk-media{width:min(100%,calc((min(100svh - 170px,760px) - 200px) * 1.6));margin-bottom:0}
.wk.is-horizontal .wk-slide .wk-phone{bottom:-12%}
/* Home: tutta la scheda è il link al lavoro (il link del nome si allarga sopra la scheda) */
.wk-stretch::after{content:'';position:absolute;inset:0;z-index:3}
.wk-slide:has(.wk-stretch){cursor:pointer}
.wk-slide:hover .wk-name-link{text-decoration-color:currentColor}
.wk-top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin-bottom:auto}
.wk-top .wk-num{margin:0}
.wk-card-logo{height:clamp(28px,2.6vw,42px);flex:0 1 auto}
.wk-go{pointer-events:none}
/* I nomi restano dentro la scheda: dimensione calcolata sulla parola più lunga (--w) e sulla larghezza della colonna */
.wk-info,.wk-tile-foot{container-type:inline-size;min-width:0}
.wk-info .wk-name{font-size:min(clamp(38px,4.6vw,84px),calc(100cqi / (var(--w,10) * .6)))}
.wk-tile-foot .wk-name{font-size:min(clamp(40px,6vw,108px),calc(100cqi / (var(--w,10) * .62)))}
.wk-name{overflow-wrap:anywhere}
/* su schermi stretti la scheda torna a una colonna (la regola sopra per le schede larghe la sovrascriveva) */
@media(max-width:900px){.wk-slide{grid-template-columns:1fr;align-items:start}.wk-info{align-self:auto}}

/* Ultima scheda "Tutti i lavori": al passaggio sale il verde, le anteprime si aprono a ventaglio, la freccia gira */
.wk-end{position:relative;overflow:hidden;isolation:isolate;transition:color .45s,border-color .45s}
.wk-end::before{content:'';position:absolute;inset:0;z-index:-1;background:#00ffd1;transform:translateY(101%);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.wk-end:hover,.wk-end:focus-visible{color:#17132f;border-style:solid}
.wk-end:hover::before,.wk-end:focus-visible::before{transform:none}
.wk-end-arrow{background:#fff;color:#17132f;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .45s,color .45s}
.wk-end:hover .wk-end-arrow,.wk-end:focus-visible .wk-end-arrow{background:#17132f;color:#fff;transform:rotate(45deg) scale(1.12)}
.wk-fan{position:relative;flex:1;display:block;min-height:120px;margin:24px 0}
.wk-fan-card{position:absolute;left:50%;top:50%;width:min(70%,300px);aspect-ratio:16/10;border:2px solid #17132f;border-radius:10px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 #17132f;transform:translate(-50%,-50%) rotate(calc((var(--k) - 1.5) * 3deg)) translateY(calc(var(--k) * -4px));transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k) * 40ms)}
.wk-fan-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.wk-end:hover .wk-fan-card,.wk-end:focus-visible .wk-fan-card{transform:translate(-50%,-50%) translateX(calc((var(--k) - 1.5) * 34%)) rotate(calc((var(--k) - 1.5) * 9deg)) translateY(calc(abs(var(--k) - 1.5) * 14px))}
@media(prefers-reduced-motion:reduce){.wk-end::before,.wk-fan-card,.wk-end-arrow{transition:none}}

/* case.css */
/* Pagina del lavoro. Il movimento (finestra che si raddrizza, parole che si accendono, pagine che scorrono dentro
   la finestra, telefoni che salgono) è in case.js; senza JS o con movimento ridotto si vede tutto fermo. */

/* Apertura: colore del progetto, nome enorme, la finestra sotto */
.case-hero{background:var(--wb);color:var(--wf);padding-top:clamp(120px,14vw,190px);padding-bottom:0;overflow:hidden}
.flow-on main .case-hero{background:var(--wb);color:var(--wf)}
.case-hero .crumbs{color:inherit}
.case-head{margin-top:clamp(28px,4vw,64px);container-type:inline-size}
.case-logo{height:clamp(24px,2.2vw,36px);margin-bottom:clamp(14px,1.6vw,22px);animation:case-fade .9s .1s both}
.case-kind{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.case-name{margin-top:clamp(10px,1.4vw,22px);font-size:clamp(44px,min(13.5cqi,calc(138cqi / var(--n,10))),250px);line-height:.84;letter-spacing:-.065em;font-weight:800;white-space:nowrap}
.case-name>span{display:inline-block}
.cl{display:inline-block;animation:case-rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 32ms + 120ms)}
.cl-word{display:inline-block;white-space:nowrap}
@keyframes case-rise{from{transform:translateY(.5em) rotate(4deg);opacity:0}}
.case-lead{margin-top:clamp(18px,2.2vw,34px);max-width:24em;font-size:clamp(22px,2.3vw,38px);line-height:1.15;letter-spacing:-.02em;font-weight:600;animation:case-fade 1s .5s both}
.case-lead em{font-style:normal;color:var(--wa)}
@keyframes case-fade{from{opacity:0;transform:translateY(20px)}}
/* la finestra: parte inclinata e piccola, si raddrizza scorrendo (case.js) */
.case-stage{margin-top:clamp(40px,6vw,96px);perspective:1600px;perspective-origin:50% 0}
.case-tilt{transform-origin:50% 0;will-change:transform}
.case-tilt .wk-browser{box-shadow:0 30px 80px -20px #17132f80,10px 10px 0 var(--ink)}
.case-page .case-hero .wk-screen video{opacity:1}

/* La frase che si accende */
.case-statement{padding-block:clamp(90px,14vw,220px)}
.case-words{max-width:22em;font-size:clamp(30px,4.4vw,74px);line-height:1.08;letter-spacing:-.035em;font-weight:700}
.cw-line{display:block}
.cw{transition:opacity .3s}
.case-words.is-live .cw{opacity:.16}
.case-words.is-live .cw.on{opacity:1}
.cw em{font-style:normal;color:var(--hero-accent,#4020e9)}

/* Cosa serviva / cosa abbiamo fatto */
.case-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,96px)}
.case-col .eyebrow{display:block;margin-bottom:18px}
.case-col p{font-size:clamp(18px,1.45vw,23px);line-height:1.5}
.case-col p+p{margin-top:14px}
.case-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(48px,7vw,110px) 0 0;border-top:2.5px solid currentColor}
.case-facts div{padding:clamp(18px,2vw,28px) clamp(14px,2vw,28px) 0 0}
.case-facts div+div{padding-left:clamp(14px,2vw,28px);border-left:2.5px solid currentColor}
.case-facts dt{font-size:clamp(40px,5.4vw,96px);line-height:.95;letter-spacing:-.05em;font-weight:800}
.case-facts dd{margin:12px 0 0;max-width:18em;font-size:16px;line-height:1.4}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:clamp(36px,4vw,60px) 0 0;padding:0}
.case-tags li{padding:6px 14px;border:2px solid currentColor;border-radius:99px;font-size:15px;font-weight:700}

/* Le pagine interne: finestre sfalsate, la pagina lunga scorre dentro mentre si scorre (case.js) */
.case-shots{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,64px) clamp(18px,2vw,32px);margin-top:clamp(36px,5vw,72px)}
.case-shot{margin:0;grid-column:span 7}
.case-shot-1{grid-column:6/span 7}
.case-shot-2{grid-column:2/span 6}
.case-shot-3{grid-column:7/span 6;margin-top:-6%}
.case-window{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f3f1ec}
.case-window img{display:block;width:100%;height:auto;will-change:transform}

/* Tre telefoni */
.case-phones{overflow:hidden}
.case-phone-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,56px);margin-top:clamp(40px,6vw,90px);padding-bottom:clamp(30px,5vw,80px)}
.case-phone{width:clamp(140px,22vw,320px);aspect-ratio:390/844;border:2.5px solid #fff;border-radius:clamp(22px,2.6vw,40px);overflow:hidden;background:#fff;box-shadow:10px 10px 0 #00ffd1;will-change:transform}
.case-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.case-phone-1{margin-top:clamp(40px,7vw,120px);box-shadow:10px 10px 0 #ff40ca}
.case-phone-2{box-shadow:10px 10px 0 #edff38}

/* Velocità e server: anelli dei punteggi e cosa c'è sotto */
.case-speed .list-head p{max-width:40em}
.case-rings{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);list-style:none;margin:clamp(36px,5vw,72px) 0 0;padding:0}
.case-rings li{position:relative;display:grid;justify-items:center;gap:12px;width:clamp(130px,14vw,190px);text-align:center}
.case-rings svg{width:100%;transform:rotate(-90deg)}
.case-rings circle{fill:none;stroke-width:9}
.ring-bg{stroke:color-mix(in srgb,currentColor 16%,transparent)}
.ring{stroke:#00ffd1;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v));transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.case-rings.is-waiting .ring{stroke-dashoffset:100}
.case-rings strong{position:absolute;top:0;left:0;right:0;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(36px,4vw,56px);font-weight:800;letter-spacing:-.04em}
.case-rings span{font-size:14px;font-weight:700}
.case-measured{margin-top:18px;font-size:13px;opacity:.7}
.case-under{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;list-style:none;margin:clamp(40px,6vw,90px) 0 0;padding:0;border-top:2px solid currentColor}
.case-under li{padding:22px 22px 0 0}
.case-under li+li{padding-left:22px;border-left:2px solid currentColor}
.case-under-n{font-size:13px;font-weight:800;color:#00ffd1}
.case-under h3{margin-top:10px;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em;line-height:1.05}
.case-under p{margin-top:10px;font-size:16px;line-height:1.5;opacity:.85}
@media(max-width:700px){.case-under li+li{padding-left:0;border-left:0;border-top:2px solid currentColor;margin-top:18px}}

/* Dettagli da vicino */
.case-lenses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;list-style:none;margin:clamp(36px,5vw,72px) 0 0;padding:0}
.case-lenses figure{margin:0}
.case-lenses figcaption{margin-top:14px;text-align:center;font-weight:700}

/* Vai al sito */
.case-visit{background:var(--wb);color:var(--wf);display:grid;gap:0}
.flow-on main .case-visit{background:var(--wb);color:var(--wf)}
.case-visit-link{display:block;padding:clamp(20px,3vw,44px) 0;border-top:2.5px solid currentColor}
.case-visit-link:last-child{border-bottom:2.5px solid currentColor}
.case-visit-host{display:block;margin-top:10px;font-size:clamp(34px,6.4vw,120px);line-height:.95;letter-spacing:-.055em;font-weight:800;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.case-visit-link:hover .case-visit-host{transform:translateX(clamp(10px,2vw,30px))}

/* Prossimo lavoro: tutto lo schermo è un link */
.case-next{background:var(--wb);color:var(--wf);padding-block:clamp(70px,10vw,160px)}
.flow-on main .case-next{background:var(--wb);color:var(--wf)}
.case-next-link{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);align-items:center;gap:clamp(28px,4vw,72px)}
.case-next-text{display:block;min-width:0;container-type:inline-size}
.case-next-name{display:block;margin-top:14px;font-size:min(clamp(56px,11vw,210px),calc(100cqi / (var(--w,10) * .62)));line-height:.88;letter-spacing:-.065em;font-weight:800}
.case-next-kind{display:block;margin-top:18px;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.case-next-img{display:block;width:100%;aspect-ratio:16/10;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--ink);transform:rotate(4deg) scale(.94);opacity:.9;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s}
.case-next-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.case-next-link:hover .case-next-img{transform:rotate(-2deg) scale(1);opacity:1}
.case-all{display:inline-block;margin-top:clamp(36px,5vw,64px);font-weight:800;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

@media(max-width:900px){
 .case-name{white-space:normal;font-size:clamp(44px,min(17cqi,calc(170cqi / var(--n,10))),120px)}
 .case-cols,.case-facts{grid-template-columns:1fr}
 .case-facts div+div{padding-left:0;border-left:0;border-top:2px solid currentColor;margin-top:18px}
 .case-shots{grid-template-columns:1fr}
 .case-shot,.case-shot-1,.case-shot-2,.case-shot-3{grid-column:1;margin-top:0}
 .case-phone-row{gap:10px}
 .case-phone{width:31%}
 .case-next-link{grid-template-columns:1fr}
 .case-next-img{margin-top:8px;transform:rotate(2deg)}
 .case-next-link:hover .case-next-img{transform:none}
}
@media(prefers-reduced-motion:reduce){.cl,.case-lead{animation:none}.case-words.is-live .cw{opacity:1}}

/* note.css */
/* Note: intestazione con data e tempo di lettura, testo lungo leggibile, servizi usati nei lavori */
.note-headline{max-width:1100px;margin-top:clamp(36px,5vw,72px)}
.note-meta{margin:0}
.note-head .ph-title.note-title{font-size:clamp(44px,6.2vw,104px);text-wrap:balance}
.note-summary{max-width:680px;margin-top:clamp(24px,3vw,40px);font-size:clamp(19px,1.6vw,24px);line-height:1.4}
.note-body .prose-inner{margin:0 auto}
.note-body .prose-body strong{font-weight:700}
.note-all{margin-top:clamp(32px,4vw,56px)}
.case-services{margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.case-services-list{display:flex;flex-wrap:wrap;gap:12px}

.note-list .index-text b{font-size:clamp(26px,3vw,48px)}
.note-list a:hover .index-text>span{opacity:.75}

/* Intestazione della nota: titolo e firma a sinistra, illustrazione del servizio a destra */
.note-head-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,90px);align-items:center;margin-top:clamp(36px,5vw,72px)}
.note-head:not(.has-visual) .note-head-grid{grid-template-columns:1fr}
.note-head .note-headline{margin-top:0}
.note-visual{min-width:0}
.note-byline{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,40px);font-size:16px;line-height:1.3}
.note-byline b{display:block;font-weight:700}
.note-byline span span{opacity:.75}
.note-byline:hover b{text-decoration:underline;text-underline-offset:.18em}
.note-avatar{flex:none;aspect-ratio:1;height:auto;border-radius:50%;object-fit:cover;object-position:50% 25%;background:#ffffff55}
/* Risposta breve in un riquadro, poi il sommario */
.note-short{margin-bottom:clamp(32px,4vw,52px);padding:clamp(22px,2.6vw,34px);border:2px solid var(--ink);border-radius:18px;background:#f4f7ef;box-shadow:8px 8px 0 #00ffd1;font-size:clamp(18px,1.5vw,22px);line-height:1.5}
.note-short strong{font-weight:700}
.note-toc{margin-bottom:clamp(40px,5vw,64px);padding-bottom:clamp(24px,3vw,36px);border-bottom:1.5px solid color-mix(in srgb,currentColor 20%,transparent)}
.note-toc ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:10px}
.note-toc li{counter-increment:toc;display:flex;gap:14px;font-size:clamp(17px,1.3vw,19px)}
.note-toc li::before{content:counter(toc,decimal-leading-zero);font-size:13px;font-weight:800;opacity:.5;padding-top:.25em;font-variant-numeric:tabular-nums}
.note-toc a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:.2em}
.note-toc a:hover{text-decoration-color:currentColor}
.note-body .prose-body h2{scroll-margin-top:100px}
/* Tabelle nel testo */
.prose-body .lexical-table-container{margin:1.6em 0;overflow-x:auto;border:2px solid var(--ink);border-radius:14px}
.prose-body table{width:100%;border-collapse:collapse;font-size:clamp(15px,1.1vw,17px);line-height:1.4}
.prose-body th,.prose-body td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.prose-body tr:last-child td{border-bottom:0}
.prose-body th{background:var(--ink);color:#fff;font-weight:700}
.prose-body th p,.prose-body td p{margin:0}
.prose-body td:first-child{font-weight:700}
/* Chi ha scritto la nota, in fondo al testo */
.note-author{display:grid;grid-template-columns:88px minmax(0,1fr);gap:22px;align-items:start;margin-top:clamp(48px,6vw,80px);padding-top:clamp(28px,3vw,40px);border-top:1.5px solid color-mix(in srgb,currentColor 20%,transparent)}
.note-author-name{margin:8px 0 6px;font-size:22px;font-weight:700}
.note-author-name span{font-weight:400;opacity:.75;font-size:17px}
.note-author p+p{font-size:17px;line-height:1.5;opacity:.85}
.note-author-more{display:inline-block;margin-top:12px;font-weight:700;text-decoration:underline;text-underline-offset:.2em}
/* Elenco: autore e minuti al posto della data */
.note-list .index-num.note-by{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;line-height:1.35;opacity:1}
.note-list .index-num.note-by>span{opacity:.7}
.note-list a{grid-template-columns:200px minmax(0,1fr) 56px}
/* Pagina di una persona: il ritratto al posto dell'illustrazione */
.ph-portrait{margin:0;border:2.5px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:12px 12px 0 var(--ink);transform:rotate(2deg);aspect-ratio:3/2}
.ph-portrait img{width:100%;height:100%;object-fit:cover}
.person-name h3 a span{display:inline-block;transition:transform .3s}
.person-name h3 a:hover span{transform:translateX(4px)}
@media (max-width:900px){.note-head-grid{grid-template-columns:1fr}.note-visual{max-width:440px}}
@media (max-width:700px){.note-list a{grid-template-columns:minmax(0,1fr) 40px}.note-list .index-num.note-by{grid-column:1/-1}.note-author{grid-template-columns:56px minmax(0,1fr)}.note-author .note-avatar{width:56px;height:56px}}