/* Hallmark · genre: playful · macrostructure: Split Studio · nav: N7 · footer: Ft8 · theme: custom (see tokens.css) */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--text-base);background:var(--color-paper);color:var(--color-ink);line-height:1.6;-webkit-font-smoothing:antialiased}
[id]{scroll-margin-top:96px}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.wrap{max-width:1520px;margin:0 auto;padding:0 var(--page-gutter);min-width:0}
section{padding:var(--space-3xl) 0}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-3xl);margin-bottom:var(--space-md)}
h3{font-size:var(--text-xl);line-height:1.2}
p{max-width:var(--measure)}
.lead{font-size:var(--text-lg);color:var(--color-ink-2)}
.eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-sm)}
.mono{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}
/* halftone band */
.band{background-color:var(--color-paper-2);background-image:radial-gradient(var(--color-rule) 1px,transparent 1.2px);background-size:9px 9px;border-top:var(--rule) solid var(--color-ink);border-bottom:var(--rule) solid var(--color-ink)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-h);gap:var(--space-sm);font-family:var(--font-display);font-weight:800;font-size:var(--text-base);line-height:1;white-space:nowrap;background:var(--color-accent);color:var(--color-accent-ink);padding:0 var(--space-lg);border:var(--rule) solid var(--color-ink);border-radius:var(--radius-sm);box-shadow:var(--shadow-hard);text-decoration:none;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--color-ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--color-ink)}
.btn.ghost{background:var(--color-paper);color:var(--color-ink)}
.btn[aria-disabled=true],.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
/* nav N7 */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--page-gutter);background:var(--color-paper);border-bottom:var(--rule) solid var(--color-ink)}
.nav .mark{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav .mark span{color:var(--color-accent)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:var(--space-lg)}
.lang{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);text-decoration:none;letter-spacing:.1em}
.lang:hover{color:var(--color-accent-2)}
.nav .btn{min-height:44px;padding:0 var(--space-md);font-size:var(--text-sm)}
/* hero split */
.hero{padding:var(--space-2xl) 0 var(--space-3xl)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-2xl);align-items:center}
.hero h1 em{font-style:normal;color:var(--color-accent);text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:6px;text-decoration-color:var(--color-ink)}
.hero .lead{margin:var(--space-lg) 0 var(--space-xl)}
.hero-cta{display:flex;gap:var(--space-md);flex-wrap:wrap}
.mascot{justify-self:center;width:min(100%,420px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(8px 8px 0 var(--color-ink))}
.hero-s .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.hero-s .mascot{width:min(100%,320px)}
.back{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);text-decoration:none;margin-bottom:var(--space-md);color:var(--color-muted)}
.back:hover{color:var(--color-ink)}
/* 4 tasti */
.tiles-s{padding:var(--space-xl) 0 var(--space-3xl)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg)}
.tile{background:var(--color-paper);border:var(--rule) solid var(--color-ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);padding:var(--space-lg);text-decoration:none;display:flex;flex-direction:column;gap:var(--space-sm);min-width:0;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.tile:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-hard-lg)}
.tile-art{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:var(--space-sm)}
.tile .tag{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);color:var(--color-accent-2);letter-spacing:.1em;text-transform:uppercase}
.tile h2{font-size:var(--text-xl);margin:0}
.tile p{font-size:var(--text-sm);color:var(--color-ink-2)}
.tile .more{margin-top:auto;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm)}
/* storia */
.bio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-2xl);align-items:center}
.bio img{border:var(--rule) solid var(--color-ink);border-radius:var(--radius);box-shadow:var(--shadow-hard)}
.story{list-style:none;display:grid;gap:var(--space-sm)}
.story li{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:var(--space-md);border-top:2px solid var(--color-ink);padding-top:var(--space-sm)}
.story b{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);color:var(--color-accent-2);letter-spacing:.08em;text-transform:uppercase;padding-top:var(--space-xs)}
.story span{color:var(--color-ink-2);font-size:var(--text-sm)}
/* passi */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-xl);counter-reset:s}
.steps li{background:var(--color-paper);border:var(--rule) solid var(--color-ink);border-radius:var(--radius);padding:var(--space-lg);min-width:0}
.steps b{display:inline-grid;place-items:center;width:40px;height:40px;border:var(--rule) solid var(--color-ink);border-radius:50%;background:var(--color-accent);font-family:var(--font-display);font-weight:800;margin-bottom:var(--space-md)}
.steps h3{margin-bottom:var(--space-sm)}
.steps p{font-size:var(--text-sm);color:var(--color-ink-2)}
/* chips */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.chips li{border:2px solid var(--color-ink);border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:500;background:var(--color-paper)}
/* numeri */
#numeri{padding-top:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg)}
.stat{border:var(--rule) solid var(--color-ink);border-radius:var(--radius);padding:var(--space-lg);background:var(--color-paper);box-shadow:var(--shadow-hard);min-width:0}
.stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-3xl);line-height:1;color:var(--color-accent-2)}
.stat span{font-size:var(--text-sm);color:var(--color-ink-2)}
/* pagine servizio */
.quotes{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg)}
.quotes li{position:relative;background:var(--color-paper);border:var(--rule) solid var(--color-ink);border-radius:var(--radius) var(--radius) var(--radius) var(--radius-sm);padding:var(--space-md) var(--space-lg);font-size:var(--text-base);font-weight:500}
.what{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-lg)}
.what li{border:var(--rule) solid var(--color-ink);border-radius:var(--radius);padding:var(--space-lg);background:var(--color-paper);min-width:0}
.what h3{margin-bottom:var(--space-sm)}
.what p{font-size:var(--text-sm);color:var(--color-ink-2)}
.case{background:var(--color-ink);color:var(--color-paper)}
.case h2,.case .eyebrow{color:var(--color-paper)}
.case .lead{color:var(--color-paper-3)}
/* faq */
.faq details{border-top:2px solid var(--color-ink);padding:var(--space-md) 0}
.faq details:last-of-type{border-bottom:2px solid var(--color-ink)}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);list-style:none;display:flex;justify-content:space-between;gap:var(--space-md);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);color:var(--color-accent-2);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:var(--space-sm);color:var(--color-ink-2)}
/* contatto */
.contact{padding-bottom:var(--space-3xl)}
.form{display:grid;gap:var(--space-md);max-width:560px;margin-top:var(--space-lg)}
.form select{height:var(--control-h);padding-block:0}.form select,.form textarea{width:100%;background:var(--color-paper);color:var(--color-ink);border:var(--rule) solid var(--color-ink);border-radius:var(--radius-sm);padding:var(--space-md);font-size:var(--text-base);font-family:inherit;transition:box-shadow var(--dur-fast)}.form select:user-invalid,.form textarea:user-invalid{border-color:var(--color-accent)}.form small{min-height:1lh;display:block}
.form select:hover,.form textarea:hover{box-shadow:3px 3px 0 var(--color-ink)}
.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.form textarea{min-height:120px;resize:vertical}
.form small{color:var(--color-muted);font-size:var(--text-xs)}
.form .btn{justify-self:start}
/* footer Ft8 */
footer{border-top:var(--rule) solid var(--color-rule);background:var(--color-footer);color:var(--color-ink)}
.foot{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;padding:var(--space-lg) var(--page-gutter);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em}
.foot a{color:var(--color-ink);text-decoration:none;border-bottom:1px solid var(--color-rule)}
.foot a:hover{color:var(--color-accent)}
/* consenso + sticky */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:1001;background:var(--color-paper);border:var(--rule) solid var(--color-ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);padding:var(--space-md);display:none;gap:var(--space-md);align-items:center;flex-wrap:wrap;max-width:560px;margin:0 auto}
.consent.show{display:flex}
.consent p{font-size:var(--text-xs);flex:1;min-width:200px}
.consent .btn{min-height:44px;padding:0 var(--space-md);font-size:var(--text-sm);box-shadow:3px 3px 0 var(--color-shadow)}
.sticky{display:none}
/* WhatsApp: sempre visibile, su ogni pagina e viewport */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:1002;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;border:var(--rule) solid var(--color-ink);box-shadow:4px 4px 0 var(--color-shadow);transition:transform var(--dur-fast) var(--ease-out)}
.wa-fab:hover{transform:translate(-2px,-2px)}
/* reveal */
.rv{opacity:0;transform:translateY(12px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;transform:none}
/* responsive */
@media(max-width:980px){.tiles,.steps,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hero .wrap,.hero-s .wrap,.bio{grid-template-columns:minmax(0,1fr)}.mascot{width:min(70%,320px);order:-1}.bio img{max-width:360px}}
@media(max-width:640px){section{padding:var(--space-2xl) 0}.tile-art{width:150px;margin:0 auto var(--space-sm)}.tiles,.steps,.stats,.quotes,.what{grid-template-columns:minmax(0,1fr)}.story li{grid-template-columns:minmax(0,1fr);gap:2px}.nav .btn{display:none}.nav-r{gap:var(--space-md)}.sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1000;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--color-paper);border-top:var(--rule) solid var(--color-ink)}.sticky .btn{width:100%;justify-content:center;box-shadow:none}body{padding-bottom:76px}.consent{bottom:86px}.wa-fab{right:16px;bottom:calc(88px + env(safe-area-inset-bottom))}.mascot{width:min(60%,260px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.btn,.tile{transition:none}}
/* ── mascotte: ondeggio lento (idle) + boing al passaggio ── */
.mascot,.tile-art{transform-origin:50% 100%;animation:bob 3.4s var(--ease-in-out) infinite;will-change:transform}
.tile:nth-child(2) .tile-art{animation-delay:-.8s}.tile:nth-child(3) .tile-art{animation-delay:-1.7s}.tile:nth-child(4) .tile-art{animation-delay:-2.5s}
.hero .mascot{animation-duration:4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
.tile:hover .tile-art,.hero .mascot:hover{animation:boing .55s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes boing{0%{transform:scale(1,1)}30%{transform:scale(1.08,.9) translateY(4px)}60%{transform:scale(.95,1.08) translateY(-10px)}100%{transform:scale(1,1)}}
@media(prefers-reduced-motion:reduce){.mascot,.tile-art{animation:none}.tile:hover .tile-art,.hero .mascot:hover{animation:none}}

/* video mascotte: il fondo crema sparisce con darken; niente drop-shadow sul rettangolo */
.vid{background:transparent}
.vid.flip{transform:scaleX(-1)}
.hero .vid.flip{animation-name:bob-flip}
@keyframes bob-flip{0%,100%{transform:scaleX(-1) translateY(0) rotate(1.2deg)}50%{transform:scaleX(-1) translateY(-9px) rotate(-1.2deg)}}
.hero .vid.flip:hover{animation:boing-flip .55s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes boing-flip{0%{transform:scaleX(-1)}30%{transform:scaleX(-1.08) scaleY(.9) translateY(4px)}60%{transform:scaleX(-.95) scaleY(1.08) translateY(-10px)}100%{transform:scaleX(-1)}}
/* ── screenshot veri ── */
.shot{margin:0;border:var(--rule) solid var(--color-ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);background:var(--color-paper);overflow:hidden;min-width:0}
.shot img{width:100%;height:auto;display:block}
.shot.tall{max-width:300px;justify-self:center}
.shot.tall img{aspect-ratio:auto}
.shot figcaption{font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);padding:var(--space-sm) var(--space-md);border-top:2px solid var(--color-ink);background:var(--color-paper-2);color:var(--color-ink-2)}
.shot figcaption a{color:var(--color-accent-2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* gallery */
.gallery{columns:3;column-gap:var(--space-lg);margin-top:var(--space-xl)}
.gallery .shot{break-inside:avoid;margin:0 0 var(--space-lg);display:inline-block;width:100%}
.gallery .shot.tall{max-width:none}
.gallery .shot.tall img{aspect-ratio:auto;object-fit:contain}
/* split rows */
.split{display:grid;gap:var(--space-2xl);margin-top:var(--space-xl)}
.split-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl);align-items:center}
.split-row:nth-child(even) .split-text{order:2}
.split-text .tag{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-2);display:block;margin-bottom:var(--space-sm)}
.split-text h3{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}
.split-text p{color:var(--color-ink-2)}
.split-text ul{list-style:none;margin-top:var(--space-md);display:grid;gap:6px;font-size:var(--text-sm)}
.split-text li{padding-left:var(--space-md);position:relative}.split-text li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--color-accent)}
.split-row .shot.tall{justify-self:center}
/* catalog */
.catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-xl)}
.cat{border-top:var(--rule) solid var(--color-ink);padding-top:var(--space-md);min-width:0}
.cat h3{font-size:var(--text-lg);margin-bottom:var(--space-md)}
.cat ul{list-style:none;display:grid;gap:10px}
.cat li{font-size:var(--text-sm);line-height:1.4}
.cat b{display:block;font-weight:700}
.cat span{color:var(--color-muted)}
/* modules */
.modules{list-style:none;display:grid;gap:var(--space-md);margin-top:var(--space-xl)}
.modules.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.modules.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.modules li{border:var(--rule) solid var(--color-ink);border-radius:var(--radius);padding:var(--space-lg);background:var(--color-paper);min-width:0}
.modules h3{font-size:var(--text-lg);margin-bottom:var(--space-sm)}
.modules p{font-size:var(--text-sm);color:var(--color-ink-2)}
/* timeline verticale */
.timeline{list-style:none;margin-top:var(--space-xl);display:grid;gap:0;border-left:var(--rule) solid var(--color-ink);margin-left:8px}
.timeline li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:var(--space-lg);padding:var(--space-md) 0 var(--space-lg) var(--space-lg);position:relative}
.timeline li::before{content:"";position:absolute;left:-11px;top:22px;width:16px;height:16px;border-radius:50%;background:var(--color-accent);border:var(--rule) solid var(--color-ink)}
.timeline .when{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-2);padding-top:6px}
.timeline h3{margin-bottom:4px}
.timeline p{font-size:var(--text-sm);color:var(--color-ink-2)}
/* tabella confronto */
.table-wrap{overflow-x:auto;margin-top:var(--space-xl);border:var(--rule) solid var(--color-ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);background:var(--color-paper)}
.compare{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:560px}
.compare th,.compare td{padding:var(--space-md);text-align:left;vertical-align:top;border-bottom:2px solid var(--color-rule)}
.compare thead th{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);border-bottom:var(--rule) solid var(--color-ink)}
.compare tbody th{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);width:22%}
.compare td.win{font-weight:600;background:var(--color-paper-2)}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
/* case con figura */
.case-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-2xl);align-items:center}
.case-grid .shot{box-shadow:6px 6px 0 var(--color-paper-3);border-color:var(--color-paper-3)}
.stats-s{padding-top:0}
@media(max-width:980px){.gallery{columns:2}.catalog,.modules.cols-3,.modules.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.split-row,.case-grid{grid-template-columns:minmax(0,1fr)}.split-row:nth-child(even) .split-text{order:0}}
@media(max-width:640px){.gallery{columns:1}.catalog,.modules.cols-3,.modules.cols-4{grid-template-columns:minmax(0,1fr)}.timeline li{grid-template-columns:minmax(0,1fr);gap:4px}.split-row .shot.tall,.shot.tall{max-width:260px}}
.shot{position:relative}
.ribbon{position:absolute;top:var(--space-sm);left:-6px;z-index:1;background:var(--color-ink);color:var(--color-paper);font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:2px solid var(--color-paper);box-shadow:3px 3px 0 var(--color-accent)}
/* prosa e ruoli */
.prose{display:grid;gap:var(--space-md);margin-top:var(--space-md);max-width:var(--measure)}
.prose p{color:var(--color-ink-2)}
.roles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-xl)}
.roles li{border-left:var(--rule) solid var(--color-accent);padding-left:var(--space-md);min-width:0}
.roles b{display:block;font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:6px}
.roles p{font-size:var(--text-sm);color:var(--color-ink-2)}
@media(max-width:980px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.roles{grid-template-columns:minmax(0,1fr)}}

/* ══ TEMA SCURO · griglia e sfumature (dal sito consulente) ══ */
section,header.hero{position:relative;overflow:hidden}
section>.wrap,header.hero>.wrap{position:relative;z-index:1}
.band{background-color:var(--color-paper);background-image:none;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px),radial-gradient(ellipse 82% 74% at 50% 30%,var(--glow-crimson),transparent 72%);background-size:40px 40px,40px 40px,100% 100%;-webkit-mask-image:radial-gradient(ellipse 88% 80% at 50% 33%,var(--color-shadow) 34%,transparent 84%);mask-image:radial-gradient(ellipse 88% 80% at 50% 33%,var(--color-shadow) 34%,transparent 84%)}
.hero{background:none}
.hero::before{content:"";position:absolute;top:-30%;left:-10%;width:900px;height:650px;background:radial-gradient(ellipse,var(--glow-crimson) 0%,transparent 65%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-40%;right:-10%;width:800px;height:600px;background:radial-gradient(ellipse,var(--glow-sand) 0%,transparent 65%);pointer-events:none}
#storia::after,#cosa::after,#moduli::after,#consegno::after,#progetti::after{content:"";position:absolute;bottom:-40%;left:-15%;width:800px;height:600px;background:radial-gradient(ellipse,var(--glow-sand) 0%,transparent 65%);pointer-events:none}
.faq::before,#prova::before,#ottieni::before,.contact::before{content:"";position:absolute;top:-30%;right:-15%;width:900px;height:600px;background:radial-gradient(ellipse,var(--glow-crimson-soft) 0%,transparent 65%);pointer-events:none}
.contact{background:none;border-top:1px solid var(--color-rule)}
/* bordi: crema attenuata sulle card, crema piena su bottoni e nav */
.tile,.stat,.steps li,.modules li,.what li,.quotes li,.shot,.table-wrap,.consent,.form select,.form textarea,.bio img,.chips li{border-color:var(--color-line);background:var(--color-paper-2)}
.chips li{background:var(--color-paper-2)}
.tile:hover{border-color:var(--color-ink)}
.shot figcaption{background:var(--color-paper-3);border-top-color:var(--color-line)}
.compare td.win{background:var(--color-paper-3)}
.timeline{border-left-color:var(--color-line)}
.timeline li::before{border-color:var(--color-paper)}
.faq details{border-top-color:var(--color-rule)}.faq details:last-of-type{border-bottom-color:var(--color-rule)}
.story li{border-top-color:var(--color-rule)}
.steps li{border-top:var(--rule) solid var(--color-line)}
.cat{border-top-color:var(--color-line)}
.roles li{border-left-color:var(--color-accent)}
.nav{background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom-color:var(--color-rule)}
.nav .btn{box-shadow:4px 4px 0 var(--color-shadow)}
.btn.ghost{background:var(--color-paper-2);border-color:var(--color-line)}
.btn.ghost:hover{background:var(--color-paper-3)}
.mascot{filter:drop-shadow(8px 8px 0 var(--color-shadow))}
.ribbon{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-paper);box-shadow:3px 3px 0 var(--color-accent)}
/* sezione "case" invertita: crema su scuro diventa il blocco chiaro */
.case{background:var(--color-ink);color:var(--color-paper)}
.case h2,.case .eyebrow{color:var(--color-paper)}
.case .lead{color:var(--color-case-lead)}
footer{background:var(--color-footer);color:var(--color-ink);border-top-color:var(--color-rule)}
.foot a{border-bottom-color:var(--color-rule)}
.sticky{background:var(--nav-bg);border-top-color:var(--color-rule)}
.hero h1 em{text-decoration-color:var(--color-sand)}
.tile .tag,.split-text .tag,.story b,.timeline .when,.stat b{color:var(--color-accent-2)}

/* ══ mascotte interattive (mascot/*.js + GSAP). Senza JS resta l'ondeggio CSS qui sopra ══ */
.pet{position:relative;perspective:900px}
.m-on .mascot,.m-on .tile-art,.m-on .hero .vid.flip{animation:none}
.m-rig{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-act,.m-idle{display:block;transform-origin:50% 100%}
.m-idle{will-change:transform}
.m-idle{position:relative}
.m-idle>*{display:block}
.m-idle>.m-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:none}.m-idle>.tile-art{margin-inline:auto}
.m-rig:focus-visible{outline:3px solid var(--color-focus);outline-offset:6px;border-radius:var(--radius)}
/* la larghezza passa dall'asset al rig, così il perno delle rotazioni è il personaggio e non la colonna */
.pet-hero .m-rig{width:min(100%,520px)}
.hero-s .pet-hero .m-rig{width:min(100%,400px)}
.pet-hero .m-rig .mascot,.pet-dock .m-rig .mascot{width:100%}
.tile.pet{overflow:visible}
/* fumetto: lo aprono e lo chiudono GSAP (scale + autoAlpha), qui solo aspetto e ancoraggio */
.bubble{position:absolute;left:8px;right:8px;top:8px;width:fit-content;margin-inline:auto;visibility:hidden;opacity:0;z-index:3;max-width:min(280px,calc(100vw - 32px));background:var(--color-ink);color:var(--color-paper);font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);line-height:1.3;padding:var(--space-sm) var(--space-md);border:var(--rule) solid var(--color-paper);border-radius:14px 14px 4px 14px;box-shadow:4px 4px 0 var(--color-accent);text-align:center;transform-origin:85% 100%;pointer-events:none}
.bubble[role]{pointer-events:auto}
.bubble p{margin:0;max-width:none;font-size:inherit;color:inherit}
.bubble::after{content:"";position:absolute;right:24px;bottom:-12px;border:8px solid transparent;border-top-color:var(--color-ink);border-bottom:0}
.pet-hero .bubble{left:auto;right:8%;top:auto;bottom:94%;margin:0;width:max-content}
.pet-hero .bubble.below{top:98%;bottom:auto;border-radius:14px 4px 14px 14px;transform-origin:85% 0}
.bubble.below::after{bottom:auto;top:-12px;border-top:0;border-bottom:8px solid var(--color-ink)}
.bubble-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:var(--space-sm)}
.bubble-actions button{min-height:40px;padding:0 12px;font:inherit;font-size:var(--text-xs);background:var(--color-accent);color:var(--color-accent-ink);border:2px solid var(--color-paper);border-radius:var(--radius-sm);cursor:pointer}
.bubble-x{position:absolute;top:-14px;right:-14px;width:28px;height:28px;padding:0;font:inherit;line-height:1;background:var(--color-paper);color:var(--color-ink);border:2px solid var(--color-ink);border-radius:50%;cursor:pointer}
.bubble button:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
/* mascotte ancorata: in basso a destra, accanto a WhatsApp (il form e i testi stanno a sinistra); su telefono vive dentro la barra, senza coprire nulla */
.pet-dock{position:fixed;right:96px;bottom:20px;z-index:1001;width:104px;visibility:hidden;perspective:600px}
.pet-dock .mascot{aspect-ratio:1;filter:drop-shadow(4px 4px 0 var(--color-shadow))}
.pet-dock .bubble{left:auto;right:0;top:auto;bottom:calc(100% + 12px);margin:0;width:max-content;transform-origin:90% 100%}
.consent.show{z-index:1003}
@media(max-width:1023px){.pet-dock{width:80px;right:88px;bottom:12px}}
@media(max-width:640px){.pet-dock{width:56px;left:12px;right:auto;bottom:calc(10px + env(safe-area-inset-bottom))}.pet-dock .bubble{left:0;right:auto;border-radius:14px 14px 14px 4px;transform-origin:10% 100%;max-width:calc(100vw - 104px)}/* 104 = margini + tasto WhatsApp: sui telefoni stretti il fumetto non gli finisce sotto */.pet-dock .bubble::after{right:auto;left:24px}.pet-dock .mascot{filter:none}.m-on .sticky{padding-left:80px}}

/* ══ griglia e sfumature: hero, tasti, contatto e bande ══ */
.hero::before{top:-35%;left:-12%;width:1000px;height:760px;background:radial-gradient(ellipse,var(--glow-crimson) 0%,transparent 62%)}
.hero::after{bottom:-45%;right:-12%;width:900px;height:700px;background:radial-gradient(ellipse,var(--glow-sand) 0%,transparent 62%)}
.hero .grid-layer,.tiles-s::after,.contact::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 40%,var(--color-shadow) 30%,transparent 85%);mask-image:radial-gradient(ellipse 90% 85% at 50% 40%,var(--color-shadow) 30%,transparent 85%)}
.hero .grid-layer{z-index:0}
.band::after{background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px),radial-gradient(ellipse 82% 74% at 50% 30%,var(--glow-crimson-soft),transparent 72%)}
.tiles-s{padding-top:var(--space-2xl)}
.contact::before{width:1000px;height:700px;top:-25%;left:50%;right:auto;transform:translateX(-50%);background:radial-gradient(ellipse,var(--glow-crimson) 0%,transparent 62%)}
.faq::before{background:radial-gradient(ellipse,var(--glow-sand) 0%,transparent 65%)}
/* ══ sfumature su un solo strato (body): niente tagli ai confini tra sezioni ══ */
.hero::before,.hero::after,#storia::after,#cosa::after,#moduli::after,#consegno::after,#progetti::after,.faq::before,#prova::before,#ottieni::before,.contact::before{content:none}
section,header.hero{overflow:visible}
.band{background-color:transparent}
.band::after{background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);background-size:40px 40px}
body{background-color:var(--color-paper);background-repeat:no-repeat;
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-sand),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-sand),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson),transparent 70%);
  background-size:1300px 950px,1400px 1000px,1500px 1050px,1400px 1000px,1400px 950px;
  background-position:-380px -320px,right -420px top 22%,left -460px 48%,right -420px top 72%,center bottom -360px}
@media(max-width:640px){body{background-size:800px 600px,700px 560px,760px 600px,700px 560px,900px 640px;background-position:-300px -220px,right -300px top 22%,left -320px top 48%,right -280px 73%,center bottom -260px}}
/* ══ griglia continua + 9 punti di sfumatura, tutto su body ══ */
.band::after,.tiles-s::after,.contact::after,.hero .grid-layer{content:none;display:none}
body{
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-sand-mid),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson-mid),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-sand-mid),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson-mid),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-sand-mid),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson-mid),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-sand-mid),transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%,var(--glow-crimson),transparent 70%),
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:1300px 950px,1300px 950px,1300px 950px,1300px 950px,1300px 950px,1300px 950px,1300px 950px,1300px 950px,1400px 950px,40px 40px,40px 40px;
  background-position:-380px -320px,right -420px top 12%,left -440px top 24%,right -420px top 36%,left -440px top 48%,right -420px top 60%,left -440px top 72%,right -420px top 84%,center bottom -360px,0 0,0 0;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat}
@media(max-width:640px){body{background-size:800px 600px,800px 600px,800px 600px,800px 600px,800px 600px,800px 600px,800px 600px,800px 600px,900px 640px,40px 40px,40px 40px;background-position:-300px -220px,right -300px top 12%,left -320px top 24%,right -300px top 36%,left -320px top 48%,right -300px top 60%,left -320px top 72%,right -300px top 84%,center bottom -260px,0 0,0 0}}
/* ══ niente bordi sulle bande; griglia ancorata al margine sinistro del contenuto ══ */
.band{border-top:0;border-bottom:0}
body{background-position:-380px -320px,right -420px top 12%,left -440px top 24%,right -420px top 36%,left -440px top 48%,right -420px top 60%,left -440px top 72%,right -420px top 84%,center bottom -360px,max(calc(var(--page-gutter) - 40px),calc((100% - 1520px) / 2 + var(--page-gutter) - 20px)) 0,0 0}
@media(max-width:640px){body{background-position:-300px -220px,right -300px top 12%,left -320px top 24%,right -300px top 36%,left -320px top 48%,right -300px top 60%,left -320px top 72%,right -300px top 84%,center bottom -260px,max(calc(var(--page-gutter) - 40px),calc((100% - 1520px) / 2 + var(--page-gutter) - 20px)) 0,0 0}}
.shot.plain{border:0;box-shadow:none;background:transparent;overflow:visible}
.shot.plain img{filter:drop-shadow(8px 8px 0 var(--color-shadow))}
.shot.plain figcaption{background:transparent;border-top:0;padding-left:0;color:var(--color-muted)}
.gallery.cols-1{columns:1;max-width:none}.gallery.cols-1 .shot{margin-bottom:var(--space-xl)}

/* ══ contenuti a tutta larghezza (richiesta 19.09): niente colonne di testo strette ══ */
p,.lead,.prose,.hero .lead,.faq details p{max-width:none}
.prose{max-width:none}
.form{max-width:760px}
.hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.hero .mascot{width:min(100%,520px)}
.hero-s .wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.hero-s .mascot{width:min(100%,400px)}
.tile-art{max-width:none}
.bio{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.bio img{width:100%;max-width:none}
/* screenshot da telefono: larghezza da telefono, così si vede intero senza scorrere */
.split-row .shot.tall{justify-self:center;max-width:380px}
.shot.tall{max-width:none}
.gallery .shot.tall img{max-height:none}
.mod-shot{margin:calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-md);border:0;border-bottom:var(--rule) solid var(--color-line);border-radius:var(--radius) var(--radius) 0 0;box-shadow:none}
.mod-shot img{aspect-ratio:8/5;object-fit:cover;object-position:top;width:100%}
.mod-shot figcaption{padding:6px var(--space-md);font-size:var(--text-xs)}
.modules li{overflow:hidden}

/* ══ hero su tablet e telefono: una colonna, mascotte sopra il titolo (la regola a tutta larghezza qui sopra vinceva sulle media query) ══ */
@media(max-width:980px){.hero .wrap,.hero-s .wrap{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.pet-hero{order:-1}.pet-hero .m-rig,.hero-s .pet-hero .m-rig{width:min(70%,320px);margin-inline:auto}.pet-hero .m-rig .mascot{height:auto}}
@media(max-width:640px){.hero{padding-top:var(--space-lg)}.pet-hero .m-rig,.hero-s .pet-hero .m-rig{width:min(60%,260px)}}

/* ══ telefono e tablet: correzioni emerse dall'audit mobile (il blocco "tutta larghezza" vinceva sulle media query) ══ */
@media(max-width:980px){.bio{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.bio img{max-width:420px}}
@media(max-width:640px){
/* l'attributo height="300" teneva il riquadro della mascotte alto il doppio dell'immagine: metà card era vuota */
.tile-art{height:auto}
/* la tabella di confronto deve stare tutta nello schermo: la colonna "su misura" finiva fuori, senza indizi che si potesse scorrere */
.compare{min-width:0;table-layout:fixed;font-size:var(--text-xs)}
.compare th,.compare td{padding:var(--space-sm);overflow-wrap:anywhere}
.compare thead th{font-size:var(--text-sm)}
.compare tbody th{width:25%;letter-spacing:.02em}
/* bersagli da dito: almeno 44px */
.faq details{padding:var(--space-xs) 0}
.faq summary{min-height:44px;align-items:center;padding:var(--space-sm) 0}
.faq details p{margin:0 0 var(--space-md)}
.back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:0}
footer a{display:inline-flex;align-items:center;min-height:44px}
.nav .lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}