@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --notte:#1C2B4A;      /* blu profondo: tecnologia, testo */
  --notte-2:#24365C;
  --lino:#E9EEF2;       /* fondo chiaro, freddo */
  --carta:#F7F9FB;
  --albicocca:#F2A65A;  /* ascolto, PARLAMI */
  --albicocca-scura:#9A5410;
  --salvia:#7FAE97;     /* Studio */
  --salvia-scura:#2F5E4A;
  --segnale:#B8322A;    /* solo 112 / 1522 */
  --testo:#1C2B4A;
  --testo-2:#4A5874;
  --chiaro-2:#B9C6DC;
  --r-s:6px; --r-m:14px; --r-l:28px;
  --gutter:clamp(16px,4vw,48px);
  --max:1120px;
  --display:"Bricolage",system-ui,sans-serif;
  --body:"Atkinson",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--lino);color:var(--testo);font:400 1.0625rem/1.65 var(--body);padding-bottom:64px}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--albicocca);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--notte);padding:8px 12px;border-radius:var(--r-s);z-index:100}
.skip:focus{left:8px}

/* Testata */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--notte) 92%,transparent);backdrop-filter:blur(10px);color:#fff}
.top .wrap{display:flex;align-items:center;gap:24px;height:64px}
.marchio{font:700 1.5rem/1 var(--display);letter-spacing:-.03em;text-decoration:none;display:flex;align-items:center;gap:10px}
.marchio svg{width:28px;height:28px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-size:.95rem;padding:8px 12px;border-radius:999px;color:var(--chiaro-2)}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.esci{background:#fff;color:var(--notte);border:0;font:700 .95rem/1 var(--body);padding:11px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.esci:hover{background:var(--albicocca)}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:9px 14px;font:inherit;font-size:.95rem;cursor:pointer}
@media (max-width:860px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--notte);padding:8px var(--gutter) 20px;margin:0}
  .nav.aperto{display:flex}
  .nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .menu-btn{display:block;margin-left:auto}
}

/* Barra emergenza fissa */
.sos{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid #D3DBE6;box-shadow:0 -6px 24px rgba(28,43,74,.08)}
.sos .wrap{display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.sos p{margin:0;font-size:.9rem;color:var(--testo-2)}
.sos a{color:var(--segnale);font-weight:700;text-decoration:none;white-space:nowrap}
.sos a:hover{text-decoration:underline}
.sos .num{display:flex;gap:16px;margin-left:auto}
@media (max-width:560px){.sos p{display:none}.sos .num{margin:0 auto;gap:20px}}

/* Tipografia */
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.05;margin:0}
h1{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:750}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700}
h3{font-size:1.35rem;font-weight:650;letter-spacing:-.01em;line-height:1.2}
p{margin:0 0 1em;max-width:62ch}
.lead{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.55;color:var(--testo-2)}
.su-notte{background:var(--notte);color:#fff}
.su-notte .lead,.su-notte p{color:var(--chiaro-2)}
.su-notte h2,.su-notte h3{color:#fff}
section{padding:clamp(64px,10vw,128px) 0}

/* HERO tecnologia */
.hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,72px) 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;min-height:calc(100svh - 64px - 56px - 2*clamp(40px,6vw,72px))}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr;min-height:0}}
.hero h1{max-width:12ch}
.hero .lead{margin-top:24px;max-width:46ch}
.scena{position:relative;height:clamp(320px,34vw,430px)}
@media (max-width:960px){.scena{margin-top:8px}}
.scena .frase{position:absolute;left:0;right:0;top:16%;display:flex;flex-wrap:wrap;gap:.12em .3em;font:600 clamp(1.6rem,3.4vw,2.7rem)/1.15 var(--display);letter-spacing:-.02em;color:#fff}
.scena .p{display:inline-block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity 1.1s ease,filter 1.2s ease,color .6s ease;will-change:transform}
.scena .p.sparso{opacity:.35;filter:blur(2px)}
.scena .p.refuso{color:var(--albicocca);position:relative}
.scena .p.corretto{color:var(--albicocca)}
.scena .p.corretto::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:3px;border-radius:2px;background:var(--albicocca);transform-origin:left;animation:sottolinea .7s ease forwards}
@keyframes sottolinea{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scena svg.onda{position:absolute;left:0;right:0;bottom:64px;width:100%;height:46%;overflow:visible}
.onda path{fill:none;stroke-linecap:round}
.onda .ascolto{stroke:var(--albicocca);stroke-width:2.5;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.8s ease}
.onda .ramo{stroke-width:2.5;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.4s ease .2s}
.onda .ramo.a{stroke:var(--albicocca)}.onda .ramo.s{stroke:var(--salvia)}
.scena.ascolta .ascolto{stroke-dashoffset:0}
.scena.apre .ramo{stroke-dashoffset:0}
.porte{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .8s ease .9s,transform .8s ease .9s}
.scena.apre .porte{opacity:1;transform:none}
.porta{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff;padding:14px 20px;border-radius:var(--r-m);border:1.5px solid currentColor;min-width:min(44%,260px)}
.porta small{font-size:.85rem;color:var(--chiaro-2)}
.porta strong{font:650 1.15rem/1.2 var(--display)}
.porta.a{border-color:var(--albicocca)}.porta.s{border-color:var(--salvia);text-align:right;align-items:flex-end}
.porta:hover{background:rgba(255,255,255,.06)}
.scena .tag{position:absolute;top:0;left:0;font-size:.85rem;color:var(--chiaro-2);display:flex;gap:8px;align-items:center}
.scena .tag i{width:8px;height:8px;border-radius:50%;background:var(--albicocca);display:inline-block;animation:batte 1.6s ease-in-out infinite}
@keyframes batte{50%{transform:scale(1.6);opacity:.4}}
@media (prefers-reduced-motion:reduce){.scena .p,.porte,.onda path{transition:none!important}.scena .tag i{animation:none}}

/* Traccia: come legge un messaggio (sequenza reale) */
.traccia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:860px){.traccia{grid-template-columns:1fr}}
.passi{list-style:none;margin:0;padding:0;position:relative}
.passi::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--albicocca),var(--salvia))}
.passi li{position:relative;padding:0 0 32px 56px}
.passi li:last-child{padding-bottom:0}
.passi .n{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--carta);border:2px solid var(--albicocca);display:grid;place-items:center;font:700 .9rem/1 var(--display);color:var(--notte)}
.passi h3{margin-bottom:6px}
.passi p{color:var(--testo-2);margin:0}
.messaggio{background:var(--notte);color:#fff;border-radius:var(--r-l);padding:clamp(20px,3vw,32px);position:sticky;top:96px}
.messaggio .bolle{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bolla{background:var(--notte-2);padding:10px 14px;border-radius:16px 16px 16px 4px;font-size:1.05rem}
.lettura{margin-top:20px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;display:grid;gap:10px}
.lettura div{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:.95rem}
.lettura dt,.lettura .k{color:var(--chiaro-2)}
.lettura .v{color:#fff}
.lettura .v.alto{color:var(--albicocca);font-weight:700}
.nota{font-size:.85rem;color:var(--testo-2);margin-top:12px}
.su-notte .nota,.messaggio .nota{color:var(--chiaro-2)}

/* Principi */
.principi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:48px}
@media (max-width:860px){.principi{grid-template-columns:1fr}}
.principio{border-top:2px solid var(--albicocca);padding-top:20px}
.principio:nth-child(2){border-color:#fff}
.principio:nth-child(3){border-color:var(--salvia)}

/* Due servizi */
.servizi{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-l);overflow:hidden;margin-top:48px}
@media (max-width:760px){.servizi{grid-template-columns:1fr}}
.servizio{padding:clamp(28px,4vw,56px);text-decoration:none;display:flex;flex-direction:column;gap:14px;min-height:360px;transition:background .3s}
.servizio.a{background:var(--albicocca);color:var(--notte)}
.servizio.s{background:var(--salvia-scura);color:#fff}
.servizio h3{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em}
.servizio p{margin:0;max-width:40ch}
.servizio .vai{margin-top:auto;font-weight:700;display:inline-flex;gap:8px;align-items:center}
.servizio .vai span{transition:transform .25s}
.servizio:hover .vai span{transform:translateX(4px)}
.servizio.a:hover{background:#F5B472}.servizio.s:hover{background:#376B55}

/* Stato */
.stato{display:flex;gap:16px;align-items:flex-start;background:var(--carta);border:1px solid #D3DBE6;border-radius:var(--r-m);padding:20px 24px;max-width:760px}
.stato .punto{flex:none;width:12px;height:12px;border-radius:50%;background:var(--albicocca);margin-top:8px}
.stato p{margin:0}

/* Pagine servizio */
.intro{padding:clamp(56px,9vw,112px) 0 clamp(48px,7vw,88px)}
.intro.a{background:var(--albicocca);color:var(--notte)}
.intro.a .lead{color:#3A2A14}
.intro.s{background:var(--salvia-scura);color:#fff}
.intro.s .lead{color:#DCEBE3}
.intro h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:16ch}
.intro .lead{margin-top:20px}
.blocchi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px) clamp(32px,6vw,96px)}
@media (max-width:760px){.blocchi{grid-template-columns:1fr}}
.blocco h3{margin-bottom:10px}
.blocco p{color:var(--testo-2)}
.riquadro{background:var(--carta);border-radius:var(--r-l);padding:clamp(24px,4vw,48px);border:1px solid #D3DBE6}
.riquadro.allerta{border-left:6px solid var(--segnale)}
.riquadro ul{margin:0;padding-left:1.2em}
.riquadro li{margin:.4em 0}
.riquadro a.tel{color:var(--segnale);font-weight:700}
.voci{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.voce{display:flex;gap:12px;align-items:center;background:#fff;border-radius:999px;padding:8px 18px 8px 8px;border:1px solid #D3DBE6}
.voce i{width:40px;height:40px;border-radius:50%;display:block}
.voce.l i{background:radial-gradient(circle at 35% 35%,#FFD3A1,var(--albicocca))}
.voce.m i{background:radial-gradient(circle at 35% 35%,#AFC8EF,#4F6FA8)}
.voce strong{font-family:var(--display);font-size:1.1rem}
.filo{width:100%;height:auto;margin-top:8px}

/* Blog */
.articoli{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0}
.articoli li{border-top:1px solid #C9D3E1}
.articoli li:last-child{border-bottom:1px solid #C9D3E1}
.articoli a{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;padding:28px 0;text-decoration:none}
@media (max-width:640px){.articoli a{grid-template-columns:1fr;gap:8px}}
.articoli h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.articoli p{color:var(--testo-2);margin:.5em 0 0}
.articoli .meta{font-size:.9rem;color:var(--testo-2);text-align:right}
@media (max-width:640px){.articoli .meta{text-align:left}}
.articoli a:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.articolo{padding:clamp(48px,8vw,96px) 0}
.articolo .testa{max-width:760px}
.articolo h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.articolo .meta{color:var(--testo-2);margin-top:16px;font-size:.95rem}
.corpo{max-width:68ch;margin-top:40px;font-size:1.125rem;line-height:1.75}
.corpo h2{font-size:1.75rem;margin:1.8em 0 .5em}
.corpo p{max-width:none}
.corpo ul{padding-left:1.2em}
.corpo li{margin:.35em 0}
.corpo a{text-decoration-thickness:1.5px;text-underline-offset:3px}
.fonti{margin-top:48px;padding-top:24px;border-top:1px solid #C9D3E1;font-size:.95rem;color:var(--testo-2)}
.fonti ol{padding-left:1.2em}
.breve{font-size:.95rem;color:var(--testo-2)}

/* Piede */
.piede{background:var(--notte);color:var(--chiaro-2);padding:56px 0 40px;font-size:.95rem}
.piede .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media (max-width:760px){.piede .wrap{grid-template-columns:1fr}}
.piede strong{color:#fff;font-family:var(--display);font-size:1.4rem}
.piede a{color:#fff;text-decoration:none}
.piede a:hover{text-decoration:underline}
.piede ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.piede .legale{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:.85rem}

/* ===== Telefono 3D ===== */
.palco{perspective:1600px;display:grid;place-items:center;position:relative;min-height:640px}
@media (max-width:560px){.palco{min-height:560px}}
.telefono{--rx:8deg;--ry:-20deg;position:relative;width:300px;height:620px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (max-width:560px){.telefono{transform:scale(.86) rotateX(var(--rx)) rotateY(var(--ry))}}
.telefono .spessore{position:absolute;inset:0;border-radius:48px;background:#0F1A2E;transform:translateZ(-14px);box-shadow:0 60px 80px -30px rgba(10,18,36,.65),0 30px 40px -20px rgba(10,18,36,.4)}
.telefono .spessore::before{content:"";position:absolute;inset:0;border-radius:48px;background:linear-gradient(90deg,#2A3A5E,#0F1A2E 12%,#0F1A2E 88%,#2A3A5E);transform:translateZ(7px)}
.telefono .scocca{position:absolute;inset:0;border-radius:48px;background:linear-gradient(145deg,#3A4B70,#141F36 40%,#0E1628);padding:12px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.telefono .schermo{position:relative;height:100%;border-radius:37px;overflow:hidden;background:#F4F6F9;display:flex;flex-direction:column}
.telefono .isola{position:absolute;top:10px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#05080F;z-index:3}
.telefono .riflesso{position:absolute;inset:12px;border-radius:37px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 32%);z-index:4}
.app-testa{padding:46px 16px 12px;display:flex;align-items:center;gap:10px;background:#fff;border-bottom:1px solid #E3E8EF}
.app-testa i{width:34px;height:34px;border-radius:50%;flex:none}
.app-testa i.l{background:radial-gradient(circle at 35% 35%,#FFD3A1,var(--albicocca))}
.app-testa i.s{background:radial-gradient(circle at 35% 35%,#CFE5DA,var(--salvia))}
.app-testa b{font:650 .98rem/1.1 var(--display);color:var(--notte);display:block}
.app-testa small{font-size:.75rem;color:var(--testo-2)}
.chat{flex:1;padding:14px 12px;-webkit-mask-image:linear-gradient(transparent,#000 48px);mask-image:linear-gradient(transparent,#000 48px);display:flex;flex-direction:column;gap:8px;justify-content:flex-end;overflow:hidden;font-size:.9rem;line-height:1.4}
.msg{max-width:82%;padding:9px 12px;border-radius:18px;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .4s ease,transform .4s ease}
.msg.vis{opacity:1;transform:none}
.msg.io{align-self:flex-end;background:var(--notte);color:#fff;border-bottom-right-radius:6px}
.msg.lei{align-self:flex-start;background:#fff;color:var(--notte);border:1px solid #E3E8EF;border-bottom-left-radius:6px}
.msg .err{text-decoration:underline wavy rgba(242,166,90,.9);text-underline-offset:3px}
.msg .chip{display:inline-block;margin:6px 6px 0 0;padding:5px 10px;border-radius:999px;background:var(--segnale);color:#fff;font-weight:700;font-size:.8rem}
.scrive{align-self:flex-start;background:#fff;border:1px solid #E3E8EF;border-radius:18px;padding:10px 14px;display:none;gap:4px}
.scrive.vis{display:flex}
.scrive span{width:6px;height:6px;border-radius:50%;background:#9AA7BD;animation:punti 1s infinite}
.scrive span:nth-child(2){animation-delay:.15s}.scrive span:nth-child(3){animation-delay:.3s}
@keyframes punti{50%{transform:translateY(-4px);opacity:.5}}
.app-piede{padding:10px 12px 22px;background:#fff;border-top:1px solid #E3E8EF}
.app-piede div{height:38px;border-radius:999px;background:#EEF2F6;color:#93A0B5;font-size:.85rem;display:flex;align-items:center;padding:0 14px}

/* etichette che fluttuano davanti al telefono */
.fluttua{position:absolute;transform-style:preserve-3d;pointer-events:none;inset:0}
.etichetta{position:absolute;background:#fff;color:var(--notte);border-radius:14px;padding:10px 14px;font-size:.85rem;line-height:1.3;box-shadow:0 18px 40px -12px rgba(10,18,36,.45);opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);min-width:150px}
.etichetta b{display:block;font:650 .95rem/1.2 var(--display)}
.etichetta span{color:var(--testo-2)}
.etichetta.vis{opacity:1}
.etichetta.alto b{color:var(--albicocca-scura)}
.etichetta i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--albicocca);top:14px;right:-5px}
.e1{top:120px;left:-150px;transform:translateZ(90px)}
.e2{top:270px;right:-160px;transform:translateZ(130px)}
.e3{top:420px;left:-130px;transform:translateZ(70px)}
@media (max-width:760px){.e1{left:-20px;top:90px}.e2{right:-20px;top:250px}.e3{left:-10px;top:440px}.etichetta{min-width:0;max-width:170px}}

/* riepilogo per il professionista (Studio) */
.coppia{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,48px);flex-wrap:wrap}
.pannello{width:min(360px,100%);background:#fff;border-radius:22px;padding:22px;box-shadow:0 40px 70px -30px rgba(10,18,36,.5);transform:perspective(1400px) rotateY(14deg) rotateX(6deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);color:var(--notte)}
.pannello h4{font:650 1.05rem/1.2 var(--display);margin:0 0 4px}
.pannello .sub{font-size:.8rem;color:var(--testo-2);margin:0 0 16px}
.pannello ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pannello li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;opacity:0;transform:translateX(12px);transition:opacity .4s,transform .4s}
.pannello li.vis{opacity:1;transform:none}
.pannello li i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--salvia)}
.pannello li.att i{background:var(--albicocca)}
.simulazione{font-size:.8rem;color:var(--testo-2);text-align:center;margin-top:12px}
.su-notte .simulazione{color:var(--chiaro-2)}
@media (prefers-reduced-motion:reduce){.telefono,.pannello,.etichetta,.msg,.pannello li{transition:none}}

/* ===== Movimento legato allo scorrimento ===== */
/* Hero: il titolo sale e sfuma, la scena si avvicina */
.hero{--p:0}
.hero .wrap>div:first-child{transform:translateY(calc(var(--p)*-90px));opacity:calc(1 - var(--p)*1.1)}
.hero .scena{transform:translateY(calc(var(--p)*60px)) scale(calc(1 + var(--p)*.1));opacity:calc(1 - var(--p)*.9)}

/* Racconto: sezione alta, contenuto fermo, la conversazione avanza scorrendo */
.racconto{position:relative;padding:0;height:calc(var(--passi,4) * 85vh + 100vh)}
.racconto .pin{position:sticky;top:64px;height:calc(100vh - 64px - 56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);overflow:visible}
.racconto .pin.invertito{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.racconto .pin.invertito .testo-r{order:2}
.racconto h2{margin-bottom:20px}
.racconto .avanzamento{height:3px;background:rgba(127,140,160,.25);border-radius:2px;margin:0 0 28px;overflow:hidden}
.racconto .avanzamento i{display:block;height:100%;width:calc(var(--p)*100%);background:linear-gradient(90deg,var(--albicocca),var(--salvia))}
.passo{display:grid;grid-template-columns:36px 1fr;gap:4px 16px;padding:14px 0;opacity:.32;transition:opacity .5s ease,transform .5s ease;transform:translateX(0)}
.passo .n{grid-row:1/3;width:32px;height:32px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font:700 .9rem/1 var(--display);transition:background .4s,border-color .4s,color .4s}
.passo h3{font-size:1.3rem}
.passo p{margin:0;max-height:0;overflow:hidden;transition:max-height .6s ease;color:var(--testo-2)}
.su-notte .passo p{color:var(--chiaro-2)}
.passo.fatto{opacity:.55}
.passo.attivo{opacity:1;transform:translateX(8px)}
.passo.attivo p{max-height:9em}
.passo.attivo .n{background:var(--albicocca);border-color:var(--albicocca);color:var(--notte)}
.racconto .palco{min-height:0;height:100%}
.racconto .galleggia{animation:galleggia 6s ease-in-out infinite}
@keyframes galleggia{50%{transform:translateY(-12px)}}
.msg.nascosto{display:none}
.racconto .pannello{position:absolute;right:-16%;bottom:10%;transform:translateZ(160px) translateX(calc((1 - var(--p))*80px)) rotateY(-8deg);opacity:0;transition:opacity .6s}
.racconto.con-pannello .pin{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
.racconto .simulazione{position:absolute;bottom:4px;left:0;right:0}
@media (max-width:860px){
  .racconto .pin,.racconto .pin.invertito,.racconto.con-pannello .pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding-top:16px;gap:0}
  .racconto .pin.invertito .testo-r{order:0}
  .racconto h2{font-size:1.5rem;margin-bottom:10px}
  .racconto .lead{display:none}
  .racconto .avanzamento{margin-bottom:8px}
  .passo{display:none;padding:6px 0}
  .passo.attivo{display:grid;transform:none}
  .passo h3{font-size:1.1rem}
  .passo p{font-size:.95rem}
  .racconto .palco{align-items:start}
  .racconto .telefono{transform:scale(.6) rotateX(var(--rx)) rotateY(var(--ry));transform-origin:top center}
  .racconto .pannello{right:2%;left:auto;bottom:6%;width:260px;padding:16px;transform:translateX(calc((1 - var(--p))*60px));font-size:.85rem}
  .racconto .etichetta{transform:none!important}
}
.pannello{transition:opacity .6s}
.racconto .pannello{opacity:calc(var(--p)*6 - 3.6)}

/* Principi: la linea si disegna mentre scorri, il testo sale */
.principio{border-top:0;position:relative;padding-top:22px;opacity:calc(.2 + var(--p)*.8);transform:translateY(calc((1 - var(--p))*40px))}
.principio::before{content:"";position:absolute;top:0;left:0;height:2px;width:calc(var(--p)*100%);background:var(--albicocca)}
.principio:nth-child(2)::before{background:#fff}
.principio:nth-child(3)::before{background:var(--salvia)}

/* Servizi: i due pannelli arrivano dai lati */
.servizi{--p:0;overflow:visible}
.servizio.a{transform:translateX(calc((1 - var(--p))*-12%));border-radius:var(--r-l) 0 0 var(--r-l)}
.servizio.s{transform:translateX(calc((1 - var(--p))*12%));border-radius:0 var(--r-l) var(--r-l) 0}
.servizio{opacity:calc(.3 + var(--p)*.7)}
@media (max-width:760px){.servizio.a,.servizio.s{border-radius:var(--r-l);transform:translateY(calc((1 - var(--p))*40px))}.servizi{gap:16px}}

/* Blocchi delle pagine interne: una linea si allunga e il testo arriva */
.blocco{position:relative;padding-top:20px;opacity:calc(.15 + var(--p)*.85);transform:translateY(calc((1 - var(--p))*36px))}
.blocco::before{content:"";position:absolute;top:0;left:0;height:2px;width:calc(var(--p)*64px);background:var(--albicocca)}
.studio-pagina .blocco::before{background:var(--salvia)}
.blocco:nth-child(even){transform:translateY(calc((1 - var(--p))*60px))}

/* Titoli che entrano parola per parola */
.parola{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);animation:parola .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes parola{to{opacity:1;transform:none}}

/* Intro delle pagine interne: onda che si disegna con lo scorrimento */
.intro{position:relative;overflow:hidden}
.intro .onda-intro{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:120px;pointer-events:none}
.intro .onda-intro path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:calc(1600 - var(--p)*1600)}
.intro.a .onda-intro path{stroke:var(--notte)}
.intro.s .onda-intro path{stroke:var(--salvia)}
.intro .wrap{transform:translateY(calc(var(--p)*-50px));opacity:calc(1 - var(--p)*.6)}
.filo path{stroke-dashoffset:calc(200 - var(--p)*200)}
.filo .viaggia{transform:translateX(calc(var(--p)*880px))}

/* Riquadri finali */
.riquadro{transform:scale(calc(.94 + var(--p)*.06));opacity:calc(.3 + var(--p)*.7)}

/* Blog: barra di lettura e articoli che scorrono */
.barra-lettura{position:fixed;top:64px;left:0;height:3px;width:calc(var(--p,0)*100%);background:var(--albicocca);z-index:45}
.articoli li{opacity:calc(.2 + var(--p)*.8);transform:translateX(calc((1 - var(--p))*-30px))}

/* Movimento ridotto: tutto fermo e visibile */
.statico .hero .wrap>div:first-child,.statico .hero .scena,.statico .principio,.statico .servizio,.statico .blocco,.statico .intro .wrap,.statico .riquadro,.statico .articoli li{transform:none!important;opacity:1!important}
.statico .parola{animation:none;opacity:1;transform:none}
.statico .racconto{height:auto}
.statico .racconto .pin{position:relative;top:0;height:auto;padding:64px var(--gutter)}
.statico .passo{opacity:1}.statico .passo p{max-height:none}
.statico .racconto .galleggia{animation:none}

/* ===== Laboratorio interattivo (home) ===== */
.lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:860px){.lab{grid-template-columns:1fr}}
.frammenti{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 20px}
.frammento{font:600 1rem/1 var(--body);padding:12px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.frammento:hover{border-color:var(--albicocca)}
.frammento:active{transform:scale(.96)}
.frammento.usato{background:rgba(242,166,90,.16);border-color:var(--albicocca)}
.ricomincia{background:none;border:0;color:var(--chiaro-2);font:inherit;text-decoration:underline;cursor:pointer;padding:6px 0}
.lab-schermo{background:var(--notte-2);border-radius:var(--r-l);padding:clamp(20px,3vw,28px);min-height:420px;display:flex;flex-direction:column;gap:18px}
.lab-chat{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-height:120px;justify-content:flex-end}
.lab-chat .msg{background:#fff;color:var(--notte);border-bottom-right-radius:6px}
.lab-chat .vuoto{align-self:center;color:var(--chiaro-2);font-size:.95rem}
.lab-lettura{display:grid;gap:12px;margin:0;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.lab-lettura div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
.lab-lettura dt{color:var(--chiaro-2);font-size:.9rem;padding-top:2px}
.lab-lettura dd{margin:0;color:#fff}
.lab-lettura mark{background:none;color:var(--albicocca);font-weight:700;border-bottom:2px solid var(--albicocca)}
.livello{display:flex;gap:6px;align-items:center}
.livello i{width:34px;height:10px;border-radius:5px;background:rgba(255,255,255,.14);transition:background .4s}
.livello[data-l="1"] i:nth-child(-n+1),.livello[data-l="2"] i:nth-child(-n+2),.livello[data-l="3"] i:nth-child(-n+3),.livello[data-l="4"] i:nth-child(-n+4){background:var(--albicocca)}
.livello[data-l="4"] i{background:var(--segnale)!important}
.livello b{margin-left:8px;font-family:var(--display)}
.lab-lettura .chip{display:inline-block;margin:6px 6px 0 0;padding:5px 10px;border-radius:999px;background:var(--segnale);color:#fff;font-weight:700;font-size:.85rem}
.flash{animation:flash .6s ease}
@keyframes flash{0%{background:rgba(242,166,90,.25)}100%{background:transparent}}

/* ===== Approcci (Studio) ===== */
.approcci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.approcci{grid-template-columns:1fr}}
.schede{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.scheda{font:600 .95rem/1 var(--body);padding:11px 16px;border-radius:999px;border:1.5px solid #B9C9C0;background:#fff;color:var(--salvia-scura);cursor:pointer}
.scheda[aria-selected="true"]{background:var(--salvia-scura);border-color:var(--salvia-scura);color:#fff}
.conversa{background:#fff;border-radius:var(--r-l);padding:clamp(20px,3vw,32px);border:1px solid #D3DBE6;display:flex;flex-direction:column;gap:12px;min-height:280px}
.conversa .msg{opacity:1;transform:none;max-width:88%}
.conversa .msg.lei{background:#EEF5F1;border-color:#D5E6DC}
.conversa .msg.cambia{animation:entra .45s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.conversa .chi{font-size:.8rem;color:var(--testo-2)}

/* ===== Prossima pagina ===== */
.prossimo{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;padding:clamp(28px,4vw,44px) 0;border-top:1px solid #C9D3E1}
.prossimo small{display:block;color:var(--testo-2);font-size:.9rem}
.prossimo strong{font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--display);letter-spacing:-.02em}
.prossimo .freccia{font:700 2rem/1 var(--display);transition:transform .25s}
.prossimo:hover .freccia{transform:translateX(8px)}

/* ===== Home tecnologica (pagina scura) ===== */
body.scuro{background:var(--notte);color:#fff}
.scuro .lead,.scuro p{color:var(--chiaro-2)}
.scuro h2,.scuro h3{color:#fff}
.scuro .nota{color:var(--chiaro-2)}
.scuro .sos{background:#121D33;border-top-color:rgba(255,255,255,.08);box-shadow:none}
.scuro .sos p{color:var(--chiaro-2)}
.scuro .sos a{color:#FF8F84}
.scuro .stato{background:var(--notte-2);border-color:rgba(255,255,255,.08)}
.scuro .stato p{color:#fff}
.scuro .prossimo{border-top-color:rgba(255,255,255,.14)}
.scuro .prossimo small{color:var(--chiaro-2)}
.scuro .piede{background:#121D33}
.scuro section+section{border-top:1px solid rgba(255,255,255,.06)}
.scuro .passo p{color:var(--chiaro-2)}
.scuro .passo .n{color:#fff}
.scuro .passo.attivo .n{color:var(--notte)}

.hero-tec{padding:clamp(40px,5vw,72px) 0 0;position:relative;overflow:hidden}
.hero-tec h1{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:19ch;letter-spacing:-.035em}
.hero-tec .lead{margin-top:24px;max-width:56ch}
.hero-testo{transform:translateY(calc(var(--p)*-70px));opacity:calc(1 - var(--p)*1.2)}
.campo{position:relative;height:clamp(280px,36vw,420px);margin-top:clamp(24px,4vw,48px);border-top:1px solid rgba(255,255,255,.06)}
.campo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.didascalie{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:space-between;font-size:.82rem;color:var(--chiaro-2);pointer-events:none}
.didascalie span:nth-child(2){color:var(--albicocca)}
@media (max-width:560px){.didascalie span:nth-child(2){display:none}}

.dati{padding:clamp(48px,7vw,88px) 0 clamp(32px,5vw,56px)}
.dati-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:860px){.dati-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dati-griglia div{opacity:calc(.25 + var(--p)*.75);transform:translateY(calc((1 - var(--p))*30px))}
.dati-griglia b{display:block;font:750 clamp(2.6rem,6vw,4.4rem)/1 var(--display);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.dati-griglia div:nth-child(4) b{color:var(--albicocca)}
.dati-griglia span{display:block;margin-top:10px;color:var(--chiaro-2);font-size:.98rem;max-width:26ch}
.dati .nota{margin-top:24px}

/* schema del motore */
.architettura{--passi:6}
.architettura .visivo{display:grid;place-items:center;height:100%}
.schema{width:100%;max-width:480px;height:auto;max-height:calc(100vh - 180px);overflow:visible}
.schema .nodo rect{fill:var(--notte-2);stroke:rgba(255,255,255,.14);stroke-width:1.5;transition:fill .4s,stroke .4s}
.schema .nodo text{fill:rgba(255,255,255,.4);font:600 17px var(--display);text-anchor:middle;dominant-baseline:middle;transition:fill .4s}
.schema .nodo.acceso rect{stroke:var(--albicocca)}
.schema .nodo.acceso text{fill:#fff}
.schema .nodo.ora rect{fill:var(--albicocca);stroke:var(--albicocca)}
.schema .nodo.ora text{fill:var(--notte)}
.schema .nodo.uscita.acceso rect{stroke:var(--salvia)}
.schema .nodo.uscita.ora rect{fill:var(--salvia);stroke:var(--salvia)}
.schema .arco path{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2;stroke-dasharray:4 6}
.schema .arco.acceso path{stroke:var(--albicocca);stroke-dasharray:none;animation:corre 1.2s linear infinite}
@keyframes corre{from{stroke-dashoffset:0}to{stroke-dashoffset:-20}}
.schema .arco.acceso path{stroke-dasharray:10 10}
@media (max-width:860px){.schema{max-height:calc(100vh - 330px)}.architettura .visivo{align-items:start}}
.statico .schema .nodo text{fill:#fff}

/* ===================== PALETTE NOTTURNA (sostituisce la palette chiara) ===================== */
:root{
  --notte:#0F0C22;      /* sezioni profonde */
  --notte-2:#221C47;    /* superfici */
  --lino:#15112E;       /* fondo pagina */
  --carta:#1E1940;      /* riquadri */
  --albicocca:#FFB547;  /* ambra viva: ascolto, Parlami */
  --albicocca-scura:#FFB547;
  --salvia:#E0569B;     /* magenta caldo: Studio */
  --salvia-scura:#5A1E4A;
  --segnale:#FF5A4E;    /* solo 112 / 1522 */
  --testo:#F4F1FF;
  --testo-2:#B3ACD6;
  --chiaro-2:#B3ACD6;
  --linea:rgba(255,255,255,.1);
}
body{background:var(--lino);color:var(--testo)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(60vw 50vh at 85% -10%,rgba(224,86,155,.16),transparent 60%),radial-gradient(50vw 45vh at -5% 30%,rgba(255,181,71,.10),transparent 60%)}
h1,h2,h3{color:#fff}
.top{background:color-mix(in srgb,var(--notte) 85%,transparent);border-bottom:1px solid var(--linea)}
.esci{background:#fff;color:var(--notte)}
.su-notte{background:transparent}
section+section{border-top:1px solid rgba(255,255,255,.05)}
.sos{background:#0B0919;border-top:1px solid var(--linea);box-shadow:none}
.sos p{color:var(--testo-2)}
.sos a{color:#FF8A80}
.piede{background:#0B0919}

/* hero */
.scena .p.refuso,.scena .p.corretto{color:var(--albicocca)}
.onda .ascolto{stroke:url(#g)}
.porta small{color:var(--testo-2)}

/* passi e racconti */
.passo .n{color:#fff}
.passo.attivo .n{background:var(--albicocca);border-color:var(--albicocca);color:var(--notte)}
.racconto .avanzamento{background:rgba(255,255,255,.1)}
.racconto .avanzamento i{background:linear-gradient(90deg,var(--albicocca),var(--salvia))}

/* telefono: interfaccia scura */
.telefono .schermo{background:#17132F}
.app-testa{background:#1D1838;border-bottom-color:var(--linea)}
.app-testa b{color:#fff}.app-testa small{color:var(--testo-2)}
.msg.io{background:var(--albicocca);color:#1A1430}
.msg.lei{background:#2A2452;color:#fff;border-color:transparent}
.msg .err{text-decoration-color:#1A1430}
.app-piede{background:#1D1838;border-top-color:var(--linea)}
.app-piede div{background:#2A2452;color:#8C85B5}
.scrive{background:#2A2452;border-color:transparent}
.telefono .scocca{background:linear-gradient(145deg,#4A3F86,#1C1640 40%,#110D27)}
.telefono .spessore{background:#0B0919}
.telefono .spessore::before{background:linear-gradient(90deg,#3A3170,#0B0919 12%,#0B0919 88%,#3A3170)}
.etichetta{background:#fff;color:#1A1430}
.etichetta.alto b{color:#C2410C}
.etichetta i{background:var(--salvia)}

/* principi, servizi, stato */
.principio::before{background:var(--albicocca)}
.principio:nth-child(2)::before{background:#fff}
.principio:nth-child(3)::before{background:var(--salvia)}
.servizio.a{background:linear-gradient(135deg,#FFB547,#FF8A3D);color:#1A1430}
.servizio.a p{color:#3B2410}
.servizio.a h3{color:#1A1430}
.servizio.s{background:linear-gradient(135deg,#B8357A,#5A1E4A);color:#fff}
.servizio.s p{color:#F6D7E8}
.servizio.a:hover{background:linear-gradient(135deg,#FFC266,#FF9A55)}
.servizio.s:hover{background:linear-gradient(135deg,#C9418A,#6A2558)}
.stato{background:var(--carta);border-color:var(--linea)}
.stato p{color:#fff}

/* laboratorio */
.lab-schermo{background:var(--carta);border:1px solid var(--linea)}
.lab-chat .msg{background:var(--albicocca);color:#1A1430}
.livello i{background:rgba(255,255,255,.12)}
.frammento{border-color:rgba(255,255,255,.22)}
.frammento.usato{background:rgba(255,181,71,.15)}

/* pagine interne */
.intro.a,.intro.s{background:transparent;color:#fff}
.intro.a{background:radial-gradient(70vw 60vh at 80% 0%,rgba(255,181,71,.28),transparent 65%)}
.intro.s{background:radial-gradient(70vw 60vh at 80% 0%,rgba(224,86,155,.32),transparent 65%)}
.intro.a .lead,.intro.s .lead{color:var(--testo-2)}
.intro.a .onda-intro path{stroke:var(--albicocca)}
.intro.s .onda-intro path{stroke:var(--salvia)}
.filo text{fill:var(--testo-2)}
.blocco p{color:var(--testo-2)}
.blocco::before{background:var(--albicocca)}
.studio-pagina .blocco::before{background:var(--salvia)}
.riquadro{background:var(--carta);border-color:var(--linea)}
.riquadro.allerta{border-left-color:var(--segnale)}
.riquadro a.tel{color:#FF8A80}
.riquadro a{color:#fff}
.voce{background:var(--carta);border-color:var(--linea)}
.voce strong{color:#fff}
.voce.m i{background:radial-gradient(circle at 35% 35%,#F7B6D6,var(--salvia))}
.pannello{background:#fff;color:#1A1430}
.pannello li i{background:var(--salvia)}
.pannello li.att i{background:#FF8A3D}
.scheda{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.scheda[aria-selected="true"]{background:var(--salvia);border-color:var(--salvia);color:#fff}
.conversa{background:var(--carta);border-color:var(--linea)}
.conversa .msg.io{background:var(--albicocca);color:#1A1430}
.conversa .msg.lei{background:#2A2452;color:#fff;border-color:transparent}
.conversa .chi{color:var(--testo-2)}
.prossimo{border-top-color:var(--linea)}
.prossimo strong{color:#fff}

/* blog */
.articoli li{border-color:var(--linea)!important}
.articoli h2{color:#fff}
.corpo{color:#E6E2F7}
.corpo a{color:var(--albicocca)}
.fonti{border-top-color:var(--linea)}
.fonti a{color:var(--testo-2)}
.breve a{color:var(--testo-2)}
:focus-visible{outline-color:var(--albicocca)}

/* ===== Ragionamento visibile (home) ===== */
.ragiona .pin{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.pensieri{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;height:min(46vh,420px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
.pensiero{display:none;position:relative;padding:14px 16px 14px 20px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--linea);opacity:.45;transition:opacity .4s,border-color .4s,background .4s}
.pensiero.vis{display:block;animation:pensa .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pensa{from{opacity:0;transform:translateY(12px)}}
.pensiero.ultimo{opacity:1;border-color:rgba(255,181,71,.6);background:rgba(255,181,71,.08)}
.pensiero::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--albicocca);opacity:.5}
.pensiero.ultimo::before{opacity:1}
.pensiero .tipo{display:inline-block;font-size:.8rem;font-weight:700;color:var(--albicocca);margin-bottom:4px}
.pensiero p{margin:0;color:#fff;font-size:1rem;line-height:1.5}
@media (max-width:860px){
  .ragiona .pin{grid-template-columns:1fr}
  .ragiona .lead{display:none}
  .pensieri{height:auto;max-height:none;-webkit-mask-image:none;mask-image:none}
  .pensiero.vis{display:none}
  .pensiero.vis.ultimo{display:block}
  .pensiero p{font-size:.92rem}
}
.statico .pensiero{display:block;opacity:1}
.statico .pensieri{height:auto;-webkit-mask-image:none;mask-image:none}

/* ===================== PALETTE FINALE: «dalla notte all'alba» =====================
   Notte fonda: l'ora in cui spesso si scrive. Ambra: una luce accesa, l'ascolto.
   Rosa aurora: l'alba tra una seduta e l'altra, il colore di Studio.
   Il rosso resta riservato a 112 e 1522. */
:root{
  --notte:#0E0D24;
  --notte-2:#211E47;
  --lino:#13122E;
  --carta:#1C1A3E;
  --albicocca:#FFB547;
  --salvia:#F08DB5;
  --salvia-scura:#7A3460;
  --segnale:#FF6B5E;
  --testo:#F5F3FF;
  --testo-2:#B7B2DA;
  --chiaro-2:#B7B2DA;
  --linea:rgba(255,255,255,.09);
}
body::after{background:radial-gradient(60vw 50vh at 85% -10%,rgba(240,141,181,.14),transparent 60%),radial-gradient(50vw 45vh at -5% 30%,rgba(255,181,71,.10),transparent 60%)}
.servizio.a{background:linear-gradient(135deg,#FFC25E,#FF9B4A)}
.servizio.s{background:linear-gradient(135deg,#F08DB5,#8E3C6E);color:#fff}
.servizio.s p{color:#FFE6F0}
.servizio.s:hover{background:linear-gradient(135deg,#F59CC0,#9D477B)}
.intro.s{background:radial-gradient(70vw 60vh at 80% 0%,rgba(240,141,181,.30),transparent 65%)}
.intro.m{background:radial-gradient(60vw 55vh at 15% 0%,rgba(255,181,71,.22),transparent 65%),radial-gradient(60vw 55vh at 90% 10%,rgba(240,141,181,.22),transparent 65%)}
.intro.m .onda-intro path{stroke:url(#g2)}
.intro.m .onda-intro path{stroke:var(--albicocca)}
.intro .lead{color:var(--testo-2)}
.scheda[aria-selected="true"]{background:var(--salvia);border-color:var(--salvia);color:#1A1430}
.con-pannello .pensiero.ultimo{border-color:rgba(240,141,181,.6);background:rgba(240,141,181,.08)}
.con-pannello .pensiero::before{background:var(--salvia)}
.con-pannello .pensiero .tipo{color:var(--salvia)}
.studio-pagina .msg.io,.con-pannello .msg.io{background:var(--salvia);color:#1A1430}
.app-testa i.s{background:radial-gradient(circle at 35% 35%,#FFD6E6,var(--salvia))}
.telefono .scocca{background:linear-gradient(145deg,#4B4590,#1D1A44 40%,#100F2A)}
.racconto .avanzamento i,.onda .ascolto{}
.etichetta i,.pannello li i{background:var(--salvia)}
/* il pensiero nel layout invertito (Parlami) sta a destra */
.ragiona .pin.invertito{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
/* schema del motore con la palette finale */
.schema .nodo.uscita.acceso rect{stroke:var(--salvia)}
.schema .nodo.uscita.ora rect{fill:var(--salvia);stroke:var(--salvia)}
.architettura .passo p{color:var(--testo-2)}
.dati-griglia div:nth-child(4) b{color:var(--albicocca)}
@media (max-width:860px){
  .racconto .pannello{bottom:15%;width:236px;padding:12px 14px}
  .pannello h4{font-size:.9rem}.pannello .sub{font-size:.72rem;margin-bottom:8px}
  .pannello li{font-size:.78rem}.pannello ul{gap:6px}
}

/* ===================== RUOLI DEI COLORI =====================
   Motore (la tecnologia): pervinca, luce fredda e precisa.
   Parlami (chi chiede aiuto): ambra, una luce accesa nella notte.
   Studio (chi cura): rosa aurora, l'alba tra una seduta e l'altra.
   Rosso: solo 112 e 1522. Ogni pagina eredita l'accento del suo mondo. */
:root{--motore:#A7B0FF;--ambra:#FFB547;--aurora:#F08DB5}
body.t-motore{--albicocca:var(--motore)}
body.t-parlami{--albicocca:var(--ambra)}
body.t-studio{--albicocca:var(--aurora)}

/* elementi che appartengono sempre a un servizio, qualunque sia la pagina */
.porta.a,.onda .ramo.a{border-color:var(--ambra);stroke:var(--ambra)}
.porta.s,.onda .ramo.s{border-color:var(--aurora);stroke:var(--aurora)}
.onda .ascolto{stroke:var(--motore)}
.t-motore .racconto .msg.io,.t-parlami .msg.io{background:var(--ambra);color:#1A1430}
.t-studio .msg.io{background:var(--aurora);color:#1A1430}
.app-testa i.l{background:radial-gradient(circle at 35% 35%,#FFE0B0,var(--ambra))}
.app-testa i.s{background:radial-gradient(circle at 35% 35%,#FFD6E6,var(--aurora))}
.lab-chat .msg{background:var(--ambra);color:#1A1430}
.livello[data-l="3"] i:nth-child(-n+3){background:var(--ambra)}
.livello[data-l="2"] i:nth-child(-n+2),.livello[data-l="1"] i:nth-child(-n+1){background:var(--motore)}
.racconto .avanzamento i{background:linear-gradient(90deg,var(--albicocca),color-mix(in srgb,var(--albicocca) 40%,#fff))}
.t-motore .racconto .avanzamento i{background:linear-gradient(90deg,var(--motore),var(--ambra),var(--aurora))}

/* il motore si riconosce dal suo bagliore */
.t-motore .hero .scena .tag i{background:var(--motore)}
.intro.m{background:radial-gradient(60vw 55vh at 20% 0%,rgba(167,176,255,.28),transparent 65%),radial-gradient(40vw 40vh at 95% 20%,rgba(240,141,181,.14),transparent 65%)}
.intro.m .onda-intro path{stroke:var(--motore)}
.t-motore .pensiero.ultimo{border-color:rgba(167,176,255,.6);background:rgba(167,176,255,.08)}
.t-parlami .pensiero.ultimo{border-color:rgba(255,181,71,.6);background:rgba(255,181,71,.08)}
.t-studio .pensiero.ultimo{border-color:rgba(240,141,181,.6);background:rgba(240,141,181,.08)}
.pensiero::before{background:var(--albicocca)}
.pensiero .tipo{color:var(--albicocca)}
.dati-griglia b{background:linear-gradient(180deg,#fff,var(--motore));-webkit-background-clip:text;background-clip:text;color:transparent}
.dati-griglia div:nth-child(4) b{background:linear-gradient(180deg,#fff,var(--ambra));-webkit-background-clip:text;background-clip:text;color:transparent}
.dati-home{padding:clamp(40px,6vw,72px) 0}
.dati .nota a{color:var(--motore)}
.chi-e{display:block;color:#fff;font-weight:700;margin-bottom:8px}
.principio:nth-child(1)::before{background:var(--motore)}
.principio:nth-child(2)::before{background:var(--ambra)}
.principio:nth-child(3)::before{background:var(--aurora)}
.schema .nodo.acceso rect{stroke:var(--motore)}
.schema .nodo.ora rect{fill:var(--motore);stroke:var(--motore)}
.schema .arco.acceso path{stroke:var(--motore)}
.schema .nodo.uscita.acceso rect{stroke:var(--ambra)}
.schema .nodo.uscita.ora rect{fill:var(--ambra);stroke:var(--ambra)}

/* /aiuto: l'aiuto arriva subito */
.aiuto-subito{padding:0 0 clamp(32px,5vw,56px)}
.aiuto-subito .riquadro{transform:none!important;opacity:1!important;background:rgba(255,107,94,.08);border:1px solid rgba(255,107,94,.35);border-left:6px solid var(--segnale)}

/* blog: categorie con il colore del loro pubblico */
.c-riconoscere,.c-proteggersi,.c-aiutare{--cat:var(--ambra)}
.c-sedute{--cat:var(--aurora)}
.c-tecnologia{--cat:var(--motore)}
.categoria{display:inline-block;font-size:.85rem;font-weight:700;color:var(--cat,var(--motore));margin-bottom:6px}
.filtri{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filtro{text-decoration:none;padding:9px 14px;border-radius:999px;border:1.5px solid var(--cat);color:#fff;font-weight:600;font-size:.95rem}
.filtro:hover{background:color-mix(in srgb,var(--cat) 18%,transparent)}
.gruppo{margin-top:56px;padding:0;border:0!important}
.gruppo-titolo{font-size:clamp(1.5rem,3vw,2rem);display:flex;align-items:center;gap:12px}
.gruppo-titolo::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cat)}
.gruppo-desc{color:var(--testo-2);margin:8px 0 0}
.gruppo .articoli{margin-top:20px}
.articoli a:hover h2{text-decoration-color:var(--cat)}
.articolo.c-riconoscere,.articolo.c-proteggersi,.articolo.c-aiutare,.articolo.c-sedute,.articolo.c-tecnologia{--albicocca:var(--cat)}
.articolo .categoria{font-size:.95rem}
.barra-lettura{background:var(--motore)}
.corpo a{color:var(--cat,var(--motore))}
.voce.m i{background:radial-gradient(circle at 35% 35%,#FFD9A8,#D9822B)}

/* ===================== IDENTITÀ FINALE =====================
   Parlami (vittime): notte + ambra, come l'app: scuro e discreto.
   Studio (psicologi): bianco + verde, come l'app Studio: chiaro e professionale.
   Motore (home, tecnologia): notte + pervinca, con pause chiare per non stancare. */
:root{--verde:#2E8B68;--verde-scuro:#1E5A46;--verde-chiaro:#E6F2EC}

/* --- sezioni chiare nella home --- */
.chiaro{background:#F4F2FB;color:#17142F}
.chiaro h2,.chiaro h3{color:#17142F}
.chiaro .lead,.chiaro p{color:#4A4670}
.chiaro .nota{color:#6A668E}
.chiaro .frammento{color:#17142F;border-color:#CFCBE6}
.chiaro .frammento:hover{border-color:var(--motore)}
.chiaro .frammento.usato{background:#E6E8FF;border-color:#7F8AF0}
.chiaro .ricomincia{color:#4A4670}
.chiaro .lab-schermo{background:#17142F;border:0;box-shadow:0 40px 80px -40px rgba(23,20,47,.6)}
.chiaro .lab-schermo p,.chiaro .lab-schermo .nota{color:#B7B2DA}
.chiaro .servizio.a h3{color:#1A1430}
.chiaro .servizio p{color:inherit}
.servizio.s{background:linear-gradient(135deg,#3BA37C,#1E5A46)!important;color:#fff}
.servizio.s p{color:#E3F3EB!important}
.servizio.s:hover{background:linear-gradient(135deg,#46B489,#236A52)!important}
.porta.s,.onda .ramo.s{border-color:#5CC79B;stroke:#5CC79B}
.principio:nth-child(3)::before{background:#5CC79B}
.c-sedute{--cat:#5CC79B}

/* --- pagina Studio: chiara, bianco e verde --- */
body.t-studio{--albicocca:var(--verde);--lino:#F6F8F7;--carta:#FFFFFF;--testo:#14302A;--testo-2:#4E6A62;--chiaro-2:#4E6A62;--linea:#DCE6E1;background:#F6F8F7;color:#14302A}
body.t-studio::after{background:radial-gradient(60vw 50vh at 85% -10%,rgba(46,139,104,.12),transparent 60%)}
.t-studio h1,.t-studio h2,.t-studio h3,.t-studio h4{color:#14302A}
.t-studio .lead,.t-studio p{color:#4E6A62}
.t-studio .intro.s{background:linear-gradient(180deg,#E6F2EC,#F6F8F7)}
.t-studio .intro.s .onda-intro path{stroke:var(--verde)}
.t-studio .filo path{stroke:var(--verde)}
.t-studio .filo circle{fill:var(--verde)}
.t-studio .filo text{fill:#4E6A62}
.t-studio section+section{border-top-color:#E4ECE8}
.t-studio .passo .n{color:#14302A}
.t-studio .racconto .avanzamento{background:#DCE6E1}
.t-studio .racconto .avanzamento i{background:var(--verde)}
.t-studio .pensiero{background:#fff;border-color:#DCE6E1;opacity:.55}
.t-studio .pensiero p{color:#14302A}
.t-studio .pensiero.ultimo{background:#fff;border-color:var(--verde);opacity:1;box-shadow:0 18px 40px -24px rgba(30,90,70,.45)}
.t-studio .pensiero::before{background:var(--verde)}
.t-studio .pensiero .tipo{color:var(--verde-scuro)}
.t-studio .simulazione{color:#6B857D}
/* il telefono di Studio ha l'interfaccia dell'app: chiara */
.t-studio .telefono .scocca{background:linear-gradient(145deg,#D9E3DE,#9FB2AA 40%,#7D928A)}
.t-studio .telefono .spessore{background:#6E827A}
.t-studio .telefono .spessore::before{background:linear-gradient(90deg,#B9C9C2,#6E827A 12%,#6E827A 88%,#B9C9C2)}
.t-studio .telefono .schermo{background:#F6F8F7}
.t-studio .app-testa{background:#fff;border-bottom-color:#E4ECE8}
.t-studio .app-testa b{color:#14302A}.t-studio .app-testa small{color:#6B857D}
.t-studio .app-testa i.s{background:radial-gradient(circle at 35% 35%,#CDEBDD,var(--verde))}
.t-studio .msg.io{background:var(--verde);color:#fff}
.t-studio .msg .err{text-decoration-color:#fff}
.t-studio .msg.lei{background:#fff;color:#14302A;border:1px solid #DCE6E1}
.t-studio .app-piede{background:#fff;border-top-color:#E4ECE8}
.t-studio .app-piede div{background:#EEF3F1;color:#8AA39A}
.t-studio .pannello{border:1px solid #DCE6E1;box-shadow:0 40px 70px -30px rgba(30,90,70,.35)}
.t-studio .pannello li i{background:var(--verde)}
.t-studio .pannello li.att i{background:#E3A23B}
.t-studio .scheda{background:#fff;color:var(--verde-scuro);border-color:#C9DAD2}
.t-studio .scheda[aria-selected="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.t-studio .conversa{background:#fff;border-color:#DCE6E1}
.t-studio .conversa .msg.io{background:var(--verde);color:#fff}
.t-studio .conversa .msg.lei{background:var(--verde-chiaro);color:#14302A;border-color:transparent}
.t-studio .conversa .chi{color:#6B857D}
.t-studio .blocco::before{background:var(--verde)}
.t-studio .blocco p{color:#4E6A62}
.t-studio .riquadro{background:#fff;border-color:#DCE6E1}
.t-studio .riquadro h2{color:#14302A}
.t-studio .prossimo{border-top-color:#DCE6E1}
.t-studio .prossimo strong,.t-studio .prossimo .freccia{color:#14302A}
.t-studio .prossimo small{color:#6B857D}
.t-studio .piede p{color:var(--chiaro-2)}
.t-studio .piede{--chiaro-2:#B7B2DA}
.t-studio .piede,.t-studio .piede p{color:#B7B2DA}
.t-studio .top .nav a,.t-studio .sos p{color:#B7B2DA}.t-studio .top .nav a:hover,.t-studio .top .nav a[aria-current="page"]{color:#fff}.t-studio .menu-btn{color:#fff}

/* ===== Lista d'attesa e FAQ (Studio) ===== */
.lista{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:24px;max-width:760px}
@media (max-width:640px){.lista{grid-template-columns:1fr}}
.campo-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo-f label{font-weight:700;font-size:.95rem;color:#14302A}
.campo-f label span{font-weight:400;color:#6B857D}
.campo-f input{font:inherit;padding:12px 14px;border-radius:12px;border:1.5px solid #C9DAD2;background:#fff;color:#14302A}
.campo-f input:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(46,139,104,.18)}
.consenso{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:#4E6A62}
.consenso input{margin-top:4px;accent-color:var(--verde);width:18px;height:18px}
.invia{grid-column:1/-1;justify-self:start;font:700 1rem/1 var(--body);padding:15px 22px;border-radius:999px;border:0;background:var(--verde);color:#fff;cursor:pointer}
.invia:hover{background:var(--verde-scuro)}
.esito{grid-column:1/-1;margin:0;font-weight:700;color:var(--verde-scuro)}
.esito.errore{color:#B42318}
.faq h2{margin-bottom:28px}
.faq-lista{display:grid;gap:10px;max-width:860px}
.faq-voce{background:#fff;border:1px solid #DCE6E1;border-radius:14px;padding:4px 20px}
.faq-voce summary{cursor:pointer;font:650 1.1rem/1.3 var(--display);color:#14302A;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-voce summary::-webkit-details-marker{display:none}
.faq-voce summary::after{content:"+";color:var(--verde);font-size:1.4rem;line-height:1}
.faq-voce[open] summary::after{content:"–"}
.faq-voce p{margin:0 0 18px;color:#4E6A62}

/* ===================== MOBILE: revisione finale ===================== */
@media (max-width:860px){
  .ragiona .pin,.ragiona .pin.invertito,.racconto.con-pannello .pin{grid-template-columns:1fr!important}
  .racconto .pin{overflow:hidden;padding-top:12px}
  .racconto h2{font-size:1.35rem;line-height:1.15}
  .racconto .avanzamento{margin:6px 0 10px}
  .pensiero.vis.ultimo{padding:12px 14px 12px 18px}
  .pensiero .tipo{font-size:.75rem}
  .pensiero p{font-size:.9rem;line-height:1.45}
  .racconto .visivo{display:flex;flex-direction:column;align-items:center}
  .racconto .palco{height:auto;width:100%;display:flex;justify-content:center}
  .racconto .telefono{transform:scale(.74) rotateX(var(--rx)) rotateY(var(--ry));transform-origin:top center;margin-bottom:-160px}
  .racconto .simulazione{position:static;margin:0;font-size:.72rem;padding:0 8px;text-align:center}
  .racconto .pannello{right:50%;transform:translateX(50%) translateY(calc((1 - var(--p))*40px));bottom:56px;width:min(300px,88vw)}
  .hero .scena{height:300px}
  .hero h1{font-size:2.6rem}
  .dati-griglia b{font-size:2.4rem}
  .lab-schermo{min-height:0}
  .servizio{min-height:0;padding:28px 24px}
  .servizio h3{font-size:1.9rem}
  .intro h1{font-size:2.3rem}
  .blocchi{gap:28px}
  .prossimo strong{font-size:1.5rem}
}
@media (max-width:380px){.racconto .telefono{transform:scale(.66) rotateX(var(--rx)) rotateY(var(--ry));margin-bottom:-210px}}
/* desktop: il layout invertito resta tale solo su schermi larghi */
@media (min-width:861px){.ragiona .pin.invertito{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
/* Parlami: più presenza dell'ambra, il suo colore */
.t-parlami .intro.a{background:radial-gradient(80vw 70vh at 75% -10%,rgba(255,181,71,.38),transparent 62%),radial-gradient(50vw 50vh at 0% 100%,rgba(255,140,60,.12),transparent 60%)}
.t-parlami .intro h1{color:#fff;text-shadow:0 0 60px rgba(255,181,71,.35)}
.t-studio .intro.s h1{color:#14302A}

/* =====================================================================
   HOME DEFINITIVA — «Legge tra le righe»
   La tecnologia non ha un terzo colore: è la sintesi dei due servizi,
   una sfumatura dall'ambra (Parlami) al verde (Studio) su notte e bianco.
   ===================================================================== */
:root{--sfuma:linear-gradient(100deg,#FFB547 0%,#E9C46A 45%,#5CC79B 100%);--motore:#FFFFFF}
body.t-motore{--albicocca:#FFFFFF}
.t-home::after{background:radial-gradient(55vw 50vh at 0% 0%,rgba(255,181,71,.16),transparent 60%),radial-gradient(55vw 55vh at 100% 70%,rgba(92,199,155,.14),transparent 60%)}
.t-home .sos{display:none}
.t-home{padding-bottom:0}
.sfuma{background:var(--sfuma);-webkit-background-clip:text;background-clip:text;color:transparent}

/* aiuto sempre a portata, compatto, in alto */
.aiuto-pill{display:inline-flex;align-items:center;gap:2px;border:1.5px solid rgba(255,107,94,.55);border-radius:999px;padding:3px 4px 3px 12px;font-size:.85rem;white-space:nowrap}
.aiuto-pill small{color:#FFB3AB;font-size:.8rem;margin-right:4px}
.aiuto-pill a{color:#fff;text-decoration:none;font-weight:700;padding:6px 9px;border-radius:999px;background:rgba(255,107,94,.18)}
.aiuto-pill a+a{margin-left:3px}
.aiuto-pill a:hover{background:#FF6B5E}
.top .wrap{gap:14px}
@media (max-width:860px){.aiuto-pill{margin-left:auto}.aiuto-pill small{display:none}.aiuto-pill{padding:3px}.menu-btn{margin-left:0;padding:8px 12px}.esci{padding:10px 13px;font-size:.88rem}.marchio{font-size:1.25rem}.marchio svg{width:24px;height:24px}}
@media (max-width:400px){.marchio{font-size:0}.marchio svg{width:30px;height:30px}}

/* ---------- Hero ---------- */
.h-hero{padding:clamp(48px,8vw,110px) 0 clamp(56px,8vw,110px);overflow:hidden}
.h-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:900px){.h-hero-grid{grid-template-columns:1fr}}
.h-hero h1{font-size:clamp(3rem,7.6vw,6.4rem);line-height:.95;letter-spacing:-.045em;max-width:9ch}
.h-hero .lead{margin-top:28px;font-size:clamp(1.1rem,1.8vw,1.3rem);max-width:34ch;color:#C9C4E6}
.h-cta{display:inline-flex;margin-top:32px;padding:15px 24px;border-radius:999px;background:#fff;color:#14112B;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}
.h-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(255,181,71,.6)}
.h-hero .wrap>div:first-child{transform:translateY(calc(var(--py,0)*-0.25px))}

/* il messaggio che si scompone: oggetto 3D con strati in profondità */
.scomponi{position:relative;perspective:1400px}
.sc-scena{transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-14deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sc-msg{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:22px;border-radius:26px;background:linear-gradient(160deg,#25214D,#17142F);border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 90px -40px rgba(0,0,0,.7);transform:translateZ(0)}
.sc-msg span{background:var(--ambra);color:#1A1430;padding:9px 14px;border-radius:18px 18px 6px 18px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.sc-msg span.vis{opacity:1;transform:none}
.sc-msg s{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6;margin-right:4px}
.sc-msg b{display:none}
.sc-msg.riparato s{display:none}.sc-msg.riparato b{display:inline;font-weight:800;box-shadow:inset 0 -3px 0 #1A1430}
.sc-strati{list-style:none;margin:14px 0 0 -6%;padding:0;display:grid;gap:8px;transform-style:preserve-3d;width:min(100%,460px)}
.sc-strati li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;padding:11px 16px;border-radius:14px;background:rgba(255,255,255,.96);color:#17142F;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);opacity:0;transform:translateZ(calc(var(--z,40px))) translateX(-24px);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.sc-strati li:nth-child(1){--z:60px}.sc-strati li:nth-child(2){--z:80px}.sc-strati li:nth-child(3){--z:100px}.sc-strati li:nth-child(4){--z:120px}.sc-strati li:nth-child(5){--z:140px}.sc-strati li:nth-child(6){--z:160px}
.sc-strati li.vis{opacity:1;transform:translateZ(var(--z)) translateX(0)}
.sc-strati i{font-style:normal;font:700 .95rem/1 var(--display);background:var(--sfuma);-webkit-background-clip:text;background-clip:text;color:transparent;filter:saturate(1.3) brightness(.8)}
.sc-strati span{font-size:.95rem;line-height:1.35}
.sc-strati li.sc-out{background:var(--sfuma);color:#1A1430}
.sc-strati li.sc-out i{background:none;color:#1A1430;filter:none}
.scomponi .nota{margin-top:18px;color:#8F89B8;font-size:.82rem}
@media (max-width:900px){.sc-strati{margin:-14px 0 0 0;width:100%}.sc-strati li{grid-template-columns:80px 1fr;padding:10px 12px}.sc-strati span{font-size:.88rem}}

/* ---------- Doppio Cervello: sei capacità ---------- */
.h-capacita{padding:clamp(72px,10vw,140px) 0}
.h-capacita h2,.h-numeri h2{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.035em}
.h-capacita .lead{margin-top:18px;max-width:58ch}
.cap-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px;perspective:1200px}
@media (max-width:900px){.cap-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cap-griglia{grid-template-columns:1fr}}
.cap{position:relative;padding:26px 24px 24px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);transform-style:preserve-3d;
  transform:translateY(calc((1 - var(--p,1))*60px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));opacity:calc(.2 + var(--p,1)*.8);transition:transform .25s ease-out,border-color .3s}
.cap:nth-child(3n+2){transform:translateY(calc((1 - var(--p,1))*110px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.cap:nth-child(3n){transform:translateY(calc((1 - var(--p,1))*160px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.cap:hover{border-color:rgba(255,255,255,.3)}
.cap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--sfuma);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.cap:hover::before{opacity:1}
.cap b{display:block;font:750 clamp(1.7rem,3vw,2.3rem)/1.1 var(--display);letter-spacing:-.03em;margin-bottom:18px;transform:translateZ(40px);background:var(--sfuma);-webkit-background-clip:text;background-clip:text;color:transparent}
.cap b s{opacity:.45;text-decoration-thickness:3px}
.cap h3{transform:translateZ(24px)}
.cap p{margin:6px 0 0;color:#B7B2DA;transform:translateZ(12px)}

/* ---------- Numeri ---------- */
.h-numeri{padding:clamp(72px,10vw,130px) 0}
.dati-griglia.tre{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px}
@media (max-width:700px){.dati-griglia.tre{grid-template-columns:1fr}}
.h-numeri .dati-griglia b{font-size:clamp(3.4rem,8vw,6rem);background:var(--sfuma);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-numeri .dati-griglia div:nth-child(4) b{background:var(--sfuma)}
.h-numeri .nota{margin-top:24px}

/* ---------- Blog in home ---------- */
.h-blog{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.h-blog{grid-template-columns:1fr}}
.h-blog a{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px;border-radius:18px;border:1px solid var(--linea);text-decoration:none;transition:border-color .25s,transform .25s}
.h-blog a:hover{border-color:var(--cat);transform:translateY(-3px)}
.h-blog b{font:650 1.15rem/1.3 var(--display);color:#fff}
.h-link{color:#fff;font-weight:700;text-underline-offset:4px}

/* lab e servizi in home: più aria */
.t-home .chiaro{padding:clamp(72px,10vw,130px) 0}
.t-home .servizi{margin-top:40px}
.t-home .h-capacita,.t-home .h-numeri,.t-home section+section{border-top:0}
.statico .cap,.statico .sc-strati li,.statico .sc-msg span{opacity:1!important;transform:none!important}
.statico .sc-msg s{display:none}.statico .sc-msg b{display:inline}
@media (max-width:900px){
  .sc-strati li:nth-child(n){--z:20px}
  .sc-strati li:nth-child(4),.sc-strati li:nth-child(5),.sc-strati li:nth-child(6){--z:30px}
  .scomponi{perspective:2200px}
}
@media (max-width:400px){.marchio{font-size:1.1rem}.marchio svg{width:22px;height:22px}.esci{padding:9px 11px}}
@media (max-width:350px){.marchio{font-size:0}}

/* =====================================================================
   VERSIONE UFFICIALE — più profondità in home, due viste in Studio,
   anteprima di Ludo e Marco in /aiuto
   ===================================================================== */
/* stato e data di apertura in home */
.h-stato{display:flex;gap:10px;align-items:flex-start;margin-top:26px;max-width:40ch;font-size:.92rem;color:#A9A3D2;line-height:1.45}
.h-stato i{flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--sfuma);box-shadow:0 0 0 4px rgba(233,196,106,.15);animation:pulsa 2.4s ease-in-out infinite}
@keyframes pulsa{50%{box-shadow:0 0 0 8px rgba(233,196,106,0)}}

/* scena 3D: orbite dietro il messaggio, strati che si aprono scorrendo */
.scomponi{isolation:isolate}
.sc-orbite{position:absolute;inset:-8% -6% -4% -6%;z-index:-1;pointer-events:none;transform-style:preserve-3d;perspective:900px}
.sc-orbite i{position:absolute;left:50%;top:48%;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;border:1px solid transparent;
  background:linear-gradient(#0000,#0000) padding-box,var(--sfuma) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.35;transform:rotateX(72deg) rotateZ(0deg);animation:orbita var(--t) linear infinite}
.sc-orbite i:nth-child(1){--d:min(92vw,560px);--t:38s}
.sc-orbite i:nth-child(2){--d:min(70vw,420px);--t:26s;animation-direction:reverse;opacity:.25}
.sc-orbite i:nth-child(3){--d:min(48vw,280px);--t:18s;opacity:.18}
.sc-orbite b{position:absolute;left:50%;top:48%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#FFB547;box-shadow:0 0 18px 4px rgba(255,181,71,.6);
  transform:rotateX(72deg) rotateZ(0deg) translateX(min(46vw,280px));animation:orbita-p 38s linear infinite}
.sc-orbite b+b{background:#5CC79B;box-shadow:0 0 18px 4px rgba(92,199,155,.6);animation-duration:26s;animation-direction:reverse;transform:rotateX(72deg) rotateZ(180deg) translateX(min(35vw,210px))}
@keyframes orbita{to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes orbita-p{from{transform:rotateX(72deg) rotateZ(0deg) translateX(min(46vw,280px))}to{transform:rotateX(72deg) rotateZ(360deg) translateX(min(46vw,280px))}}
.sc-strati li{transform:translateZ(calc(var(--z,40px)*var(--apri,1))) translateX(-24px)}
.sc-strati li.vis{transform:translateZ(calc(var(--z)*var(--apri,1))) translateX(calc((var(--apri,1) - 1)*var(--k,0)*14px))}
.sc-strati li:nth-child(1){--k:1}.sc-strati li:nth-child(2){--k:2}.sc-strati li:nth-child(3){--k:3}.sc-strati li:nth-child(4){--k:4}.sc-strati li:nth-child(5){--k:5}.sc-strati li:nth-child(6){--k:6}
.sc-scena{transition:transform .25s ease-out}
.statico .sc-orbite i,.statico .sc-orbite b,.statico .h-stato i{animation:none}

/* capacità: entrano dal fondo, ruotando in profondità */
.cap{transform:translateY(calc((1 - var(--p,1))*60px)) translateZ(calc((1 - var(--p,1))*-160px)) rotateX(calc((1 - var(--p,1))*38deg + var(--rx,0deg))) rotateY(var(--ry,0deg))}
.cap:nth-child(3n+2){transform:translateY(calc((1 - var(--p,1))*110px)) translateZ(calc((1 - var(--p,1))*-200px)) rotateX(calc((1 - var(--p,1))*44deg + var(--rx,0deg))) rotateY(var(--ry,0deg))}
.cap:nth-child(3n){transform:translateY(calc((1 - var(--p,1))*160px)) translateZ(calc((1 - var(--p,1))*-240px)) rotateX(calc((1 - var(--p,1))*50deg + var(--rx,0deg))) rotateY(var(--ry,0deg))}
.cap{transform-origin:50% 100%}

/* ---------- Studio: le due viste ---------- */
.due-viste{padding:clamp(72px,10vw,130px) 0}
.due-viste h2{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.03em;max-width:20ch}
.due-viste .lead{max-width:60ch}
.viste{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px);margin-top:48px;align-items:start;perspective:1600px}
@media (max-width:900px){.viste{grid-template-columns:1fr}}
.vista{margin:0;display:grid;gap:26px}
.vista figcaption h3{font-size:1.4rem;margin-bottom:10px}
.vista figcaption ul{margin:0;padding-left:20px;display:grid;gap:8px;color:#3D4A45}
.vista figcaption li::marker{color:var(--verde)}
.vista.paz{transform:rotateY(calc((1 - var(--p,1))*28deg)) translateZ(calc((1 - var(--p,1))*-120px));transform-origin:0 50%;opacity:calc(.25 + var(--p,1)*.75)}
.vista.psi{transform:rotateY(calc((1 - var(--p,1))*-24deg)) translateZ(calc((1 - var(--p,1))*-120px));transform-origin:100% 50%;opacity:calc(.25 + var(--p,1)*.75)}
.v-tel{width:min(100%,300px);justify-self:center;border-radius:38px;padding:12px;background:#14211C;box-shadow:0 40px 80px -36px rgba(20,60,45,.55)}
.v-tel>*{background:#F6F8F7}
.v-tel-top{display:flex;gap:10px;align-items:center;padding:16px 14px 12px;border-radius:28px 28px 0 0;border-bottom:1px solid #E1E9E5}
.v-tel-top b{display:block;font-size:.82rem;color:#1E2B26}.v-tel-top small{font-size:.72rem;color:#5F6F69}
.v-ava{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#BFE8D6,var(--verde))}
.v-tel-chat{display:flex;flex-direction:column;gap:8px;padding:14px 12px;min-height:300px}
.v-tel .m{margin:0;max-width:86%;padding:9px 12px;font-size:.84rem;line-height:1.35;border-radius:16px}
.v-tel .io{align-self:flex-end;background:var(--verde);color:#fff;border-bottom-right-radius:5px}
.v-tel .lei{align-self:flex-start;background:#fff;color:#1E2B26;border:1px solid #DCE6E1;border-bottom-left-radius:5px}
.v-tel-scrivi{margin:0;padding:12px 16px 18px;border-radius:0 0 28px 28px;color:#8A9893;font-size:.82rem;border-top:1px solid #E1E9E5}
.v-dash{display:grid;grid-template-columns:130px minmax(0,1fr);border-radius:18px;overflow:hidden;background:#fff;border:1px solid #DCE6E1;box-shadow:0 40px 80px -40px rgba(20,60,45,.45);font-size:.84rem}
.v-dash-lato{display:flex;flex-direction:column;gap:4px;padding:16px 10px;background:#1E5A46;color:#CFE6DC}
.v-dash-lato b{color:#fff;font-size:.78rem;margin:0 6px 8px}
.v-dash-lato span{padding:7px 8px;border-radius:8px}
.v-dash-lato .on{background:rgba(255,255,255,.14);color:#fff}
.v-dash-corpo{padding:16px;display:grid;gap:12px;background:#F6F8F7}
.v-scheda{display:flex;gap:10px;align-items:center}
.v-scheda b{display:block;color:#1E2B26}.v-scheda small{color:#5F6F69}
.v-box{background:#fff;border:1px solid #E1E9E5;border-radius:12px;padding:12px 14px}
.v-box h4{margin:0 0 8px;font:700 .8rem/1.2 var(--testo,inherit);color:#1E5A46}
.v-box ul{margin:0;padding-left:16px;color:#3D4A45;display:grid;gap:3px}
.v-box li.att{color:#8A5A12}
.v-avvisi .ok{margin:0;color:#1E5A46;font-weight:700}
.v-avvisi .ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--verde);margin-right:8px}
.v-avvisi .reg{margin:6px 0 0;color:#5F6F69;font-size:.78rem}
.v-chip{display:flex;flex-wrap:wrap;gap:6px}
.v-chip span{padding:4px 9px;border-radius:999px;background:#E6F2EC;color:#1E5A46;font-size:.76rem}
.v-chip .no{background:#FBECEA;color:#9B3328}
@media (max-width:560px){.v-dash{grid-template-columns:1fr}.v-dash-lato{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px}.v-dash-lato b{margin:0 6px 0 0}}
.due-viste>.wrap>.nota{margin-top:28px}
.statico .vista{transform:none!important;opacity:1!important}

/* ---------- /aiuto: anteprima di Ludo e Marco ---------- */
.avatar-sez{padding:clamp(56px,8vw,110px) 0}
.avatar-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.avatar-griglia{grid-template-columns:1fr}}
.avatar-sez h2{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.03em}
.avatar-sez .schede{margin-top:24px}
.avatar-palco{--c1:#FFB547;--c2:rgba(255,181,71,.35);position:relative;display:grid;justify-items:center;gap:18px;padding:44px 24px 32px;border-radius:32px;background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);overflow:hidden;perspective:900px}
.avatar-palco[data-chi="marco"]{--c1:#5CC79B;--c2:rgba(92,199,155,.35)}
.anteprima{position:absolute;top:16px;left:16px;font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#E9E4FF}
.av-alone{position:absolute;top:22px;left:50%;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:radial-gradient(circle,var(--c2),transparent 65%);filter:blur(10px);transition:background .6s}
.av-volto{position:relative;width:min(56vw,210px);height:auto;transform:rotateY(var(--gy,0deg)) rotateX(var(--gx,0deg));transition:transform .8s cubic-bezier(.2,.8,.2,1);animation:respira 5s ease-in-out infinite}
.av-testa{fill:url(#av-l);transition:opacity .4s}
[data-chi="marco"] .av-testa{fill:url(#av-m)}
.av-occhi ellipse{fill:#1A1430;transform-box:fill-box;transform-origin:center;animation:sbatti 5.5s infinite}
.av-bocca{fill:#1A1430;transform-box:fill-box;transform-origin:center;transform:scaleY(.6)}
.parla .av-bocca{animation:bocca .32s ease-in-out infinite alternate}
@keyframes bocca{0%{transform:scaleY(.5) scaleX(.9)}100%{transform:scaleY(2.1) scaleX(.8)}}
@keyframes sbatti{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes respira{50%{translate:0 -4px}}
.av-onda{display:flex;align-items:center;gap:4px;height:48px}
.av-onda i{width:4px;height:8px;border-radius:4px;background:var(--c1);opacity:.45;transition:background .6s}
.parla .av-onda i{opacity:1;animation:onda .9s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-73ms)}
@keyframes onda{0%{height:6px}35%{height:var(--h)}70%{height:14px}100%{height:var(--h2)}}
.av-battuta{margin:0;min-height:3em;max-width:30ch;text-align:center;color:#EDE9FF;font-size:1.02rem;transition:opacity .35s}
.av-battuta.via{opacity:0}
.statico .av-volto,.statico .av-occhi ellipse,.statico .av-onda i,.statico .av-bocca{animation:none!important}

/* avatar: ritratto stilizzato in luce, senza tratti del volto */
.av-volto{width:min(60vw,230px);overflow:visible}
.av-testa,.av-spalle{fill:url(#av-l)}
.av-capelli{fill:#B8692A;opacity:.9}
[data-chi="marco"] .av-testa,[data-chi="marco"] .av-spalle{fill:url(#av-m)}
[data-chi="marco"] .av-capelli{fill:#2E6F59}
.av-m-cap{display:none}[data-chi="marco"] .av-m-cap{display:block}[data-chi="marco"] .av-l-cap{display:none}
.av-busto{transform-origin:100px 200px;transition:filter .4s}
.parla .av-busto{animation:annuisce 2.6s ease-in-out infinite}
@keyframes annuisce{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.2deg) translateY(-1px)}65%{transform:rotate(1deg)}}
.parla .av-alone{animation:alone 1.3s ease-in-out infinite alternate}
@keyframes alone{to{transform:scale(1.12);opacity:.85}}
.avatar-palco{padding-top:56px}
.t-parlami .avatar-sez .scheda[aria-selected="true"]{background:#FFB547;color:#1A1430;border-color:#FFB547}
.t-parlami .avatar-sez .scheda{color:#fff}
.statico .av-busto,.statico .av-alone{animation:none!important}
@media (max-width:900px){.sc-strati{margin-top:12px}}