/* ═══ TeamFluXit — tema 2026: tipografia Inter, colori raffinati, "filmato" animato ═══
   Caricato DOPO style.css: ridefinisce carattere, colori e dettagli in tutte le pagine. */
@font-face{font-family:"Inter";src:url("fonts/inter-var-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --ink:#0b1220; --txt:#3a4558; --muted:#6b778a; --line:#e7ebf2; --bg2:#f6f8fc;
  --blu:#1d64d8; --blu2:#2fa8e6; --blu-scuro:#123c8c; --blu-soft:#edf4ff; --vio:#6d5df5;
  --sh:0 1px 2px rgba(11,18,32,.04),0 8px 24px rgba(11,18,32,.06); --sh2:0 2px 6px rgba(11,18,32,.06),0 24px 60px rgba(11,18,32,.14);
  --r:18px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
body{font-family:var(--font);font-size:16.5px;line-height:1.65;color:var(--txt);font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font);letter-spacing:-.032em;text-wrap:balance}
h1{font-size:clamp(36px,5.4vw,64px);font-weight:700;line-height:1.04}
h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.1}
h3{font-size:18px;font-weight:650;letter-spacing:-.015em}
p{text-wrap:pretty}
.sec-head .eyebrow,.eyebrow{font-size:12.5px;letter-spacing:.14em;font-weight:700;color:var(--blu)}
.sec-head p{font-size:18px}
.btn{font-weight:600;letter-spacing:-.01em;border-radius:12px;background:linear-gradient(135deg,#1d64d8,#2f8fe6 55%,#38b6f0);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px rgba(29,100,216,.32)}
.btn-ghost{background:#fff;box-shadow:none}
.btn-glass{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none;backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(255,255,255,.12)}
.brand{font-size:20px;letter-spacing:-.025em}.brand b{font-weight:700}
.nav{background:rgba(255,255,255,.82)}
.links a{font-weight:500}
.card,.box{border-radius:var(--r)}
.feat .ic{border-radius:12px;background:linear-gradient(135deg,#edf4ff,#eef0ff);color:var(--blu)}
.price{font-weight:700;letter-spacing:-.035em}
.plan.best{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#1d64d8,#6d5df5,#2fa8e6) border-box;border:2px solid transparent}
.foot{background:#070b14}

/* ── apertura scura con luci in movimento ── */
.hero2{position:relative;overflow:hidden;background:#060a14;color:#c4cee0;padding:84px 0 56px;isolation:isolate}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%)}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-2;filter:blur(70px);opacity:.75}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:46vw;height:46vw;left:4%;top:-8%;background:radial-gradient(circle,#1d64d8 0,transparent 65%);animation:drift1 18s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;right:0;top:4%;background:radial-gradient(circle,#6d5df5 0,transparent 65%);animation:drift2 22s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:34vw;height:34vw;left:38%;top:30%;background:radial-gradient(circle,#0ea5e9 0,transparent 65%);animation:drift3 20s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(12%,10%) scale(1.15)}}@keyframes drift2{to{transform:translate(-14%,12%) scale(.9)}}@keyframes drift3{to{transform:translate(-10%,-14%) scale(1.2)}}
.hero2-in{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.hero2 h1{color:#fff}
.hero2 h1 em{font-style:normal;background:linear-gradient(100deg,#7cc4ff 0%,#a5b4fc 45%,#67e8f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker2{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:#dbe6ff;padding:6px 14px 6px 10px;border-radius:999px;margin-bottom:22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.kicker2 i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.lead2{font-size:clamp(17px,1.6vw,19.5px);color:#aab6cc;max-width:540px;line-height:1.6}
.trust2{display:flex;gap:18px;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-size:14px;color:#8d9ab2}
.trust2 li{display:flex;align-items:center;gap:6px}.trust2 .ico{width:17px;height:17px;color:#34d399}
.stats2{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:64px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.stats2>div{background:rgba(10,16,30,.6);padding:20px 22px;backdrop-filter:blur(8px)}
.stats2 b{display:block;color:#fff;font-weight:650;font-size:17px;letter-spacing:-.02em}.stats2 span{font-size:13.5px;color:#8d9ab2}
@media (max-width:980px){.hero2-in{grid-template-columns:1fr;gap:40px}.hero2{padding:56px 0 44px}}
@media (max-width:760px){.stats2{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.hero2 h1{font-size:clamp(34px,10vw,44px)}.stats2 b{font-size:15px}.stats2>div{padding:16px}}

/* ── il "filmato": scena di 16 s che si ripete ── */
.film{--T:16s;position:relative;padding:18px 26px 34px 0}
.win{position:relative;border-radius:16px;overflow:hidden;background:#0d1322;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 30px 80px rgba(0,0,0,.55),0 0 120px rgba(56,130,246,.18)}
.win-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07)}
.win-bar>i{width:10px;height:10px;border-radius:50%;background:#2a3348}.win-bar>i:nth-child(1){background:#f87171}.win-bar>i:nth-child(2){background:#fbbf24}.win-bar>i:nth-child(3){background:#34d399}
.win-bar b{margin-left:10px;font-size:12px;font-weight:600;color:#cbd5e1}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:#86efac;font-weight:600}
.live i{width:7px;height:7px;border-radius:50%;background:#34d399;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}
.cal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.col2{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:8px;min-height:212px}
.col2 h4{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:11.5px;font-weight:600;color:#cbd5e1}
.col2 h4 img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.ev2{position:relative;font-size:11px;color:#e2e8f0;padding:7px 8px 7px 10px;margin-bottom:7px;border-radius:9px;background:rgba(255,255,255,.05);border-left:3px solid var(--c)}
.ev2 b{display:block;font-size:10px;font-weight:600;color:#94a3b8}
.r2{position:absolute;right:6px;top:6px;font-size:9px;font-weight:700;color:#fff;background:#ef4444;border-radius:6px;padding:0 5px;animation:rpulse 2s infinite}
@keyframes rpulse{50%{transform:scale(1.12)}}
.ev-new{opacity:0;animation:evnew var(--T) infinite}
@keyframes evnew{0%,6%{opacity:0;transform:translateY(-10px) scale(.96);box-shadow:none}
  10%{opacity:1;transform:none;box-shadow:0 0 0 2px #38bdf8,0 0 22px rgba(56,189,248,.55)}
  30%{box-shadow:0 0 0 2px #38bdf8,0 0 22px rgba(56,189,248,.55)}40%,92%{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(56,189,248,.35)}98%,100%{opacity:0}}
.reply2{margin:0 12px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:10px 12px;opacity:0;animation:rpin var(--T) infinite}
@keyframes rpin{0%,30%{opacity:0;transform:translateY(8px)}34%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.rp-head{font-size:10.5px;color:#94a3b8;margin-bottom:6px}
.rp-msg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#fff}
.rp-msg .who{font-weight:600;color:#7cc4ff;font-size:11px}
.typed{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:typing var(--T) infinite}
@keyframes typing{0%,36%{clip-path:inset(0 100% 0 0)}50%,100%{clip-path:inset(0 0 0 0)}}
.typed{animation-timing-function:steps(28,end)}
.ticks2{position:relative;width:22px;height:14px;font-size:12px;font-weight:800;letter-spacing:-3px}
.ticks2 i{position:absolute;left:0;top:-2px;font-style:normal;opacity:0}
.ticks2 .t1{color:#94a3b8;animation:t1 var(--T) infinite}.ticks2 .t2{color:#38bdf8;animation:t2 var(--T) infinite}
@keyframes t1{0%,50%{opacity:0}52%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes t2{0%,59%{opacity:0}61%,92%{opacity:1}96%,100%{opacity:0}}
.toast2{position:absolute;left:-26px;top:-4px;z-index:3;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.96);color:var(--ink);border-radius:14px;padding:10px 14px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);font-size:12.5px;max-width:260px;opacity:0;animation:toast var(--T) infinite}
.toast2 b{display:block;font-size:12.5px;font-weight:650}.toast2 span{color:var(--muted);font-size:11.5px}
.toast2 .ti{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#1d64d8,#38b6f0);flex-shrink:0}
.toast2 .ti .ico{width:17px;height:17px}
@keyframes toast{0%,11%{opacity:0;transform:translateY(-12px)}14%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-8px)}}
.phone2{position:absolute;right:-6px;bottom:6px;z-index:2;width:118px;height:228px;border-radius:24px;background:linear-gradient(160deg,#1e293b,#0b1220);
  border:3px solid #2b3446;box-shadow:0 20px 50px rgba(0,0,0,.5);padding:24px 7px 10px;overflow:hidden}
.ph-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:40px;height:9px;border-radius:9px;background:#000}
.ph-time{text-align:center;color:#e2e8f0;font-weight:600;font-size:22px;letter-spacing:-.02em;margin:6px 0 10px}
.ph-n{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border-radius:10px;padding:6px 7px;margin-bottom:6px;font-size:8.5px;color:#e2e8f0;line-height:1.3;opacity:0}
.ph-n b{display:block;font-size:8px;color:#a5b4fc;font-weight:700}
.ph-n.n1{animation:ph1 var(--T) infinite}.ph-n.n2{animation:ph2 var(--T) infinite}
@keyframes ph1{0%,13%{opacity:0;transform:translateY(-8px)}16%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ph2{0%,61%{opacity:0;transform:translateY(-8px)}64%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.call2{position:absolute;left:-30px;top:96px;z-index:4;width:44%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:2px solid #34d399;
  box-shadow:0 24px 50px rgba(0,0,0,.55);opacity:0;animation:call var(--T) infinite;transform-origin:20% 90%}
.call2>img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.call-top{z-index:3;position:absolute;left:8px;top:8px;right:8px;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.45);border-radius:999px;padding:3px 9px;backdrop-filter:blur(4px)}
.call-top>i{width:7px;height:7px;border-radius:50%;background:#34d399}
.call2 .self2{height:auto;z-index:2;position:absolute;right:7px;bottom:7px;width:32%;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;border-radius:7px;border:1.5px solid rgba(255,255,255,.8)}
@keyframes call{0%,66%{opacity:0;transform:scale(.85) translateY(10px)}70%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.92)}}
@property --s{syntax:"<integer>";inherits:false;initial-value:0}
.timer{margin-left:auto;font-variant-numeric:tabular-nums;counter-reset:s var(--s);animation:tick var(--T) infinite}
.timer::after{content:"00:" counter(s,decimal-leading-zero)}
@keyframes tick{0%,70%{--s:0}90%,100%{--s:3}}
.timer{animation-timing-function:steps(3,end)}
@media (max-width:600px){.film{padding:14px 0 30px}.toast2{left:6px;top:-18px}.call2{left:4px;width:52%}.phone2{width:96px;height:186px;right:4px}.ph-time{font-size:17px}.cal{grid-template-columns:repeat(2,1fr)}.col2:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){
  .film *,.aurora i{animation:none!important}.ev-new,.reply2,.ph-n,.toast2{opacity:1}.typed{clip-path:none}.ticks2 .t2{opacity:1}.call2{opacity:0}}

/* ── comparsa graduale mentre si scorre (attivata da fx.js) ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── funzioni a mosaico ── */
.grid.bento{grid-template-columns:repeat(4,1fr)}
.grid.bento .feat:nth-child(1),.grid.bento .feat:nth-child(6){grid-column:span 2;background:linear-gradient(150deg,#0b1220,#16234a);border-color:#1e2b4d;color:#c4cee0}
.grid.bento .feat:nth-child(1) h3,.grid.bento .feat:nth-child(6) h3{color:#fff;font-size:21px}
.grid.bento .feat:nth-child(1) p,.grid.bento .feat:nth-child(6) p{color:#9fb0cc;font-size:16px}
.grid.bento .feat:nth-child(1) .ic,.grid.bento .feat:nth-child(6) .ic{background:rgba(255,255,255,.08);color:#7cc4ff}
@media (max-width:1060px){.grid.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.bento{grid-template-columns:1fr}.grid.bento .feat:nth-child(1),.grid.bento .feat:nth-child(6),.grid.bento .feat:nth-child(12){grid-column:auto}}

/* ── telefono: niente scritte che vanno a capo male ── */
@media (max-width:520px){
  body{font-size:16px}
  .sec-head p{font-size:16.5px}
  .btn.lg{width:100%}
  .cta{gap:10px}
  .launch{font-size:13px}
}

/* barra in alto: ritorno alla home di chatsolution.it e passaggio tra i prodotti */
.topbar{background:#060a14;color:#9fb0cc;font-size:13px;border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:60}
.topbar-in{display:flex;justify-content:space-between;align-items:center;height:38px;gap:12px}
.topbar a{color:#9fb0cc;text-decoration:none}.topbar a:hover{color:#fff}
.tb-home{color:#e2e8f0!important;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;margin-left:-10px;border-radius:8px}
.tb-home:hover{background:rgba(255,255,255,.08)}
.tb-prod a{margin-left:16px}.tb-prod a.on{color:#fff;font-weight:600}
@media (max-width:520px){.tb-l{display:none}.tb-prod a{margin-left:12px}}

/* pulsante "torna su" */
.totop{position:fixed;right:20px;bottom:20px;z-index:2147482000;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#1d64d8,#6d5df5);box-shadow:0 10px 26px rgba(29,100,216,.4);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s}
.totop.on{opacity:1;transform:none;pointer-events:auto}.totop:hover{transform:translateY(-2px)}
.totop svg{width:20px;height:20px}
@media (max-width:520px){.totop{right:14px;bottom:14px;width:42px;height:42px}}

/* selettore lingua IT | EN in alto a destra (resta visibile anche su telefono) */
.lang{display:inline-flex;flex-shrink:0;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);font-size:12.5px;font-weight:700;letter-spacing:.04em}
.lang a{padding:4px 10px;border-radius:999px;color:var(--mut);line-height:1.3}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--ink);color:#fff}
/* ordine in testata: logo · menu · lingua (su telefono: logo · lingua · ☰) */
.nav-in .lang{order:2;margin-left:auto}.nav-in .links{order:1}.nav-in .burger{order:3}
@media (min-width:861px){.nav-in .lang{margin-left:18px}.nav-in .links{margin-left:auto}}

/* finta email del mattino (riepilogo giornaliero inviato a ogni collega) */
.mailmock{background:#fff;border:1px solid #e3e8f1;border-radius:18px;box-shadow:0 2px 6px rgba(11,18,32,.06),0 24px 60px rgba(11,18,32,.14);overflow:hidden;color:#334155;font-size:13.5px;max-width:520px;margin:0 auto;width:100%}
.mm-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#f4f7fb;border-bottom:1px solid #e3e8f1;font-size:12.5px;color:#64748b}
.mm-bar b{color:#0b1220}.mm-bar .mm-time{margin-left:auto;font-weight:700;color:#1f6fd6}
.mm-dot{width:9px;height:9px;border-radius:50%;background:#1f6fd6;box-shadow:0 0 0 4px #1f6fd622}
.mm-head{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid #eef2f7}
.mm-logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#1f6fd6,#34a9e6);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mm-head b{display:block;color:#0b1220;font-size:14.5px}.mm-head span{font-size:12px;color:#64748b}
.mm-body{padding:14px 16px 16px}
.mm-h{font-weight:700;color:#0b1220;margin-bottom:10px}
.mm-sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin:12px 0 7px}
.mm-ev{border-left:4px solid var(--c);background:#f8fafc;border-radius:6px;padding:7px 10px;margin-bottom:6px}.mm-ev b{color:var(--c);margin-right:8px;font-family:ui-monospace,Consolas,monospace}
.mm-task{display:flex;justify-content:space-between;gap:10px;background:#f8fafc;border-radius:6px;padding:7px 10px;margin-bottom:6px}
.mm-task.late{background:#fff4f4;color:#9b1c1c}.mm-task i{font-style:normal;font-size:10px;font-weight:800;padding:2px 7px;border-radius:4px;background:#fde8e8;color:#c0392b;align-self:center}
.mm-task:not(.late) i{background:#fef9e7;color:#b9770e}
/* tre passi per partire */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.steps3>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;position:relative}
.steps3 b{display:block;color:var(--ink);font-size:15px;margin:6px 0 4px}.steps3 span{font-size:13.5px;color:var(--mut)}
.steps3 .n{width:28px;height:28px;border-radius:50%;background:var(--ta-soft,#eaf3ff);color:var(--ta,#1f6fd6);font-weight:800;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}

/* menu ☰ su telefono: collegamenti a ChatSolution e alla home del sito (solo nel menu, non su PC) */
.links .mo{display:none}
@media (max-width:860px){.links a.mo{display:block}.links a.mo-go{font-weight:800;color:#0284c7}}

/* riquadro "Dashboard": carico di lavoro del team + conferma di un collega */
.p-team{display:flex;flex-direction:column;gap:12px}
.p-team .pt-title{font-weight:800;font-size:15px}
.p-team .pt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-team .pt-stats div{background:#1b2232;border:1px solid #2a3350;border-radius:12px;padding:10px 12px}
.p-team .pt-stats b{display:block;font-size:22px;color:#fbbf24;line-height:1.1}.p-team .pt-stats span{font-size:12px;color:#9fb3d6}
.p-team .pt-stats .late b{color:#f87171}.p-team .pt-stats .ok b{color:#34d399}
.p-team .pt-sub{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fb3d6;margin-top:4px}
.p-team .pt-load{display:flex;flex-direction:column;gap:9px}
.p-team .pt-row{display:grid;grid-template-columns:28px 64px 1fr 22px;gap:10px;align-items:center;font-size:13px}
.p-team .pt-row img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.p-team .pt-row i{height:8px;border-radius:5px;background:#1b2232;overflow:hidden}
.p-team .pt-row em{display:block;height:100%;border-radius:5px;background:var(--c)}
.p-team .pt-row b{text-align:right;font-family:ui-monospace,Consolas,monospace;color:#cbd5e1}
.p-team .pt-reply{display:flex;gap:10px;align-items:center;margin-top:4px;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#13261f;border:1px solid #1f5b45}
.p-team .pt-reply img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.p-team .pt-reply div{flex:1;min-width:0}.p-team .pt-reply small{display:block;font-size:11.5px;color:#86efac}
.p-team .pt-reply b{font-size:13.5px}.p-team .pt-tk{color:#38bdf8;font-weight:800;letter-spacing:-3px}
.p-example{border-left:3px solid var(--blu,#2563eb);padding:10px 14px;background:rgba(37,99,235,.06);border-radius:0 10px 10px 0}

/* sezione "Assegna un compito": riquadro Dashboard + foto, uno sotto l'altro */
.ta-stack{display:flex;flex-direction:column;gap:22px;min-width:0}
.ta-photo{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--sh2)}
.ta-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:45% 40%}
.ta-photo .badge{position:absolute;left:14px;bottom:14px;background:rgba(13,27,46,.78);color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;display:flex;align-items:center;gap:7px}
.ta-photo .badge::before{content:"";width:9px;height:9px;border-radius:50%;background:#34d399}
/* scheda "nuovo evento" appoggiata sulla foto: il compito è scritto in TeamFluXit */
.ta-photo .ta-ev{position:absolute;left:14px;bottom:14px;width:min(64%,320px);display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:14px;
  background:rgba(13,27,46,.82);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3);backdrop-filter:blur(8px)}
.ta-photo .ta-ev img{width:30px;height:auto;aspect-ratio:auto;flex-shrink:0;background:#fff;border-radius:7px;padding:3px}
.ta-photo .ta-ev div{flex:1;min-width:0}.ta-photo .ta-ev small{display:block;font-size:11px;color:#93c5fd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-photo .ta-ev b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ta-photo .ta-ev span{color:#38bdf8;font-weight:800;letter-spacing:-3px}
.ta-photo>img[src*="assegna-compito-ta"]{object-position:40% 30%}
@media (max-width:520px){.ta-photo .ta-ev{width:calc(100% - 24px);left:12px;bottom:12px}.ta-photo .ta-ev b{font-size:12.5px}}

/* percorso di un compito: assegnato -> letto -> confermato */
.p-flow{display:flex;flex-direction:column}
.p-flow .pf-step{display:flex;gap:12px;align-items:flex-start;background:#1b2232;border:1px solid #2a3350;border-radius:14px;padding:12px 14px}
.p-flow .pf-ic{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,var(--blu,#2563eb),var(--blu2,#38bdf8));display:flex;align-items:center;justify-content:center;font-size:17px}
.p-flow .pf-mid .pf-ic{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.p-flow small{display:block;font-size:11.5px;color:#9fb3d6}.p-flow b{display:block;font-size:14px}.p-flow p{margin:2px 0 0;font-size:12.5px;color:#cbd5e1}
.p-flow .pf-line{width:2px;height:18px;margin-left:31px;background:linear-gradient(#2563eb,#34d399)}
.p-flow .pt-reply{margin-top:0}
/* sezione "Per i manager" */
.carico{background:linear-gradient(180deg,#f5f8ff,#fff)}
.carico .ta-photo>img{object-position:60% 30%}
/* risposta "Fatto" anche nel riquadro del percorso del compito */
.p-flow .pt-reply{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#13261f;border:1px solid #1f5b45}
.p-flow .pt-reply img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.p-flow .pt-reply div{flex:1;min-width:0}.p-flow .pt-reply small{color:#86efac}
.p-flow .pt-reply b{font-size:13.5px}.p-flow .pt-tk{color:#38bdf8;font-weight:800;letter-spacing:-3px}

/* ── Titolo in alto: "Rivoluziona il modo di gestire la tua Realtà" + "le attività e il personale" ── */
.hero-claim{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.hero-claim .hc-top{font-size:clamp(20px,2.4vw,28px);font-weight:800;letter-spacing:-.015em;line-height:1.15;
  background:linear-gradient(95deg,#7dd3fc 0%,#a5b4fc 45%,#f0abfc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-claim .hc-sub{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#93c5fd}
.hero-claim .hc-sub::before{content:"";width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,#38bdf8,#a78bfa)}
.kicker2.kicker2-low{margin:26px 0 20px}

/* ── Barra con "Home" sempre visibile in alto (pagine ChatSolution e TeamFluXit) ── */
.topbar{position:sticky!important;top:0;z-index:60}
.topbar-in{height:44px}
.topbar~.nav{top:44px!important}
section[id]{scroll-margin-top:124px}
.topbar a.tb-home{display:inline-flex;align-items:center;gap:9px;margin-left:0;padding:0;background:none;border:0;white-space:nowrap;color:#fff!important;font-size:14px;line-height:1}
.topbar a.tb-home b{font-weight:700;letter-spacing:.01em}
.topbar a.tb-home small{font-size:12.5px;font-weight:500;color:#8aa0c2;padding-left:10px;border-left:1px solid rgba(255,255,255,.18)}
.topbar .tb-circ{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(125,211,252,.35);transition:background .15s,border-color .15s,box-shadow .15s}
.topbar .tb-ico{width:15px;height:15px;fill:none;stroke:#7dd3fc;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.topbar a.tb-home:hover .tb-circ{background:linear-gradient(135deg,#0ea5e9,#6366f1);border-color:transparent;box-shadow:0 0 14px rgba(56,189,248,.45)}
.topbar a.tb-home:hover .tb-ico{stroke:#fff}
.topbar a.tb-home:hover small{color:#cbd5e1}
@media (max-width:520px){.topbar a.tb-home small{display:none}.topbar .tb-circ{width:26px;height:26px}}
#carico .ta-photo>img{object-position:60% 30%}
/* Riga "Novità" e garanzie sotto i pulsanti: spaziatura ordinata */
.trust2{gap:10px 22px}
@media (max-width:520px){
  .kicker2.kicker2-low{margin:24px 0 18px;font-size:12.5px;line-height:1.35;padding:7px 14px 7px 11px}
  .trust2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;font-size:13.5px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
  .trust2 li{align-items:flex-start;line-height:1.35}.trust2 .ico{margin-top:1px;flex-shrink:0}
}
/* ── Frase "Rivoluziona…" al centro, sopra tutta la sezione iniziale ── */
.hc-wrap{position:relative;z-index:2;text-align:center;margin-bottom:58px}
.hero-claim.hc-center{display:inline-flex;flex-direction:column;align-items:center;gap:18px;margin:0;position:relative;max-width:1000px}
.hero-claim.hc-center::before{content:"";position:absolute;inset:-30% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(56,189,248,.20),rgba(139,92,246,.12) 55%,transparent 75%);filter:blur(10px)}
.hero-claim.hc-center .hc-top{font-size:clamp(32px,5.2vw,64px);font-weight:900;letter-spacing:-.035em;line-height:1.04;text-wrap:balance;
  background:linear-gradient(100deg,#ffffff 0%,#e0f2fe 30%,#7dd3fc 50%,#e0f2fe 70%,#ffffff 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hcShine 7s ease-in-out infinite;
  filter:drop-shadow(0 6px 30px rgba(56,189,248,.28))}
.hero-claim.hc-center .hc-top em{font-style:normal;position:relative;white-space:nowrap;
  background:linear-gradient(90deg,#38bdf8,#818cf8 45%,#e879f9 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hcShine 5s ease-in-out infinite}
.hero-claim.hc-center .hc-top em::after{content:"";position:absolute;left:2%;right:2%;bottom:-.06em;height:.11em;border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,#818cf8,#e879f9);box-shadow:0 0 18px rgba(129,140,248,.7);transform-origin:left;animation:hcLine 1.1s .4s cubic-bezier(.2,.8,.2,1) both}
.hero-claim.hc-center .hc-sub{display:inline-flex;align-items:center;gap:16px;font-size:clamp(12px,1.3vw,15px);font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#bfdbfe}
.hero-claim.hc-center .hc-sub::before{content:none}
.hero-claim.hc-center .hc-sub i{width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#38bdf8)}
.hero-claim.hc-center .hc-sub i:last-child{background:linear-gradient(90deg,#a78bfa,transparent)}
@keyframes hcShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hcLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:980px){.hc-wrap{margin-bottom:38px}}
@media (max-width:520px){.hero-claim.hc-center{gap:14px}.hero-claim.hc-center .hc-sub{letter-spacing:.2em;gap:10px}.hero-claim.hc-center .hc-sub i{width:24px}}
@media (prefers-reduced-motion:reduce){.hero-claim.hc-center .hc-top,.hero-claim.hc-center .hc-top em,.hero-claim.hc-center .hc-top em::after{animation:none}}
/* Carico di lavoro: su PC la foto sotto la Dashboard è più bassa, così la colonna non supera il testo */
@media (min-width:981px){#carico .ta-stack{gap:18px}#carico .ta-photo>img{aspect-ratio:16/7;object-position:60% 28%}}

/* ═══ Psicologia del lavoro: sezione scura con "filmato" (i pensieri sparsi diventano un elenco ordinato) ═══ */
.psy{position:relative;overflow:hidden;background:#060a14;color:#c4cee0;padding:100px 0;isolation:isolate}
.psy .aurora{opacity:.55}
.psy-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.psy .eyebrow{color:#7cc4ff;text-transform:uppercase;margin-bottom:12px}
.psy h2{color:#fff;font-size:clamp(30px,3.8vw,46px);margin-bottom:18px}
.psy h2 em{font-style:normal;background:linear-gradient(100deg,#7cc4ff 0%,#a5b4fc 45%,#67e8f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.psy-lead{font-size:17.5px;line-height:1.65;color:#c4cee0}.psy-lead b{color:#fff}
.psy-pr{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.psy-pr li{display:flex;gap:14px;align-items:flex-start}
.psy-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#1d64d8,#6d5df5);box-shadow:0 8px 22px rgba(109,93,245,.35)}
.psy-ic .ico{width:21px;height:21px}
.psy-pr b{display:block;color:#fff;font-size:16px;margin-bottom:2px}.psy-pr span{font-size:14.5px;color:#9fb0c9;line-height:1.5}
.psy-res{margin:28px 0 0;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(124,196,255,.25);color:#c4cee0}
.psy-res b{color:#fff}

.psy-film{--T:14s;position:relative;height:640px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(124,196,255,.06),0 0 80px rgba(29,100,216,.18)}
.psy-film>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 35%}
.psy-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,20,.72) 0%,rgba(6,10,20,.35) 48%,rgba(6,10,20,0) 72%)}
/* pensieri sparsi (post-it) */
.pn{position:absolute;z-index:2;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.35);transform:rotate(var(--r));opacity:0;animation:psyPost var(--T) infinite both}
.pn1{left:5%;top:5%;--r:-6deg;background:#fde68a;color:#5b4300}
.pn2{left:27%;top:10%;--r:5deg;background:#fbcfe8;color:#6b1238;animation-delay:.5s}
.pn3{left:8%;top:16%;--r:3deg;background:#bae6fd;color:#0c4a6e;animation-delay:1s}
.pn4{left:31%;top:21%;--r:-4deg;background:#bbf7d0;color:#14532d;animation-delay:1.5s}
@keyframes psyPost{0%{opacity:0;transform:translateY(-12px) rotate(var(--r)) scale(.85)}5%{opacity:1;transform:rotate(var(--r))}
  13%{transform:translateY(-4px) rotate(calc(var(--r) * -1))}21%{transform:rotate(var(--r))}29%{opacity:1;transform:translateY(-3px) rotate(calc(var(--r) * -1))}
  38%{opacity:0;transform:translateY(90px) scale(.3) rotate(0deg)}100%{opacity:0;transform:translateY(90px) scale(.3)}}
/* l'elenco ordinato in TeamFluXit */
.psy-card{position:absolute;z-index:3;left:5%;top:31%;width:min(350px,52%);padding:12px;border-radius:16px;background:rgba(13,19,34,.86);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;animation:psyCard var(--T) infinite both}
.pc-h{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#9fb0c9;margin:0 2px 9px}.pc-h b{color:#fff}.pc-h img{width:20px;height:20px;border-radius:5px}
.pc-r{display:flex;align-items:center;gap:9px;padding:8px 9px;margin-top:6px;border-radius:10px;background:rgba(255,255,255,.05);font-size:13px;color:#e2e8f0;
  opacity:0;animation:psyRow var(--T) infinite both}
.pc-r span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:psyDoneTxt var(--T) infinite both}
.pc-r em{font-style:normal;font-size:11px;font-weight:700;color:#7cc4ff;background:rgba(124,196,255,.12);padding:2px 7px;border-radius:999px}
.pc-ck{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid #64748b;position:relative;animation:psyCk var(--T) infinite both}
.pc-ck::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;animation:psyCkM var(--T) infinite both}
.pr2{animation-delay:.35s}.pr3{animation-delay:.7s}.pr4{animation-delay:1.05s}
.pr2 .pc-ck,.pr2 .pc-ck::after,.pr2 span{animation-delay:1.2s}.pr3 .pc-ck,.pr3 .pc-ck::after,.pr3 span{animation-delay:2.4s}.pr4 .pc-ck,.pr4 .pc-ck::after,.pr4 span{animation-delay:3.6s}
@keyframes psyCard{0%,30%{opacity:0;transform:translateY(16px) scale(.97)}36%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(8px)}}
@keyframes psyRow{0%,35%{opacity:0;transform:translateX(-10px)}40%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes psyCk{0%,50%{background:transparent;border-color:#64748b;transform:none}53%{transform:scale(1.25)}56%,93%{background:#22c55e;border-color:#22c55e;transform:none}98%,100%{background:transparent;border-color:#64748b}}
@keyframes psyCkM{0%,52%{opacity:0}56%,93%{opacity:1}98%,100%{opacity:0}}
@keyframes psyDoneTxt{0%,54%{color:#e2e8f0}58%,93%{color:#94a3b8}100%{color:#e2e8f0}}
/* indicatori: carico mentale che scende, concentrazione che sale */
.psy-meter{position:absolute;z-index:3;left:5%;bottom:5%;width:min(350px,52%);padding:12px 14px;border-radius:14px;background:rgba(13,19,34,.8);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);display:grid;gap:10px}
.pm-h{display:flex;align-items:center;font-size:12px;color:#9fb0c9;margin-bottom:5px;position:relative}.pm-h span{flex:1}
.pm-h b{font-size:11.5px;position:absolute;right:0}.lv-hi{color:#f87171;animation:psyHi var(--T) infinite both}.lv-lo{color:#4ade80;animation:psyLo var(--T) infinite both}
.pm-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.pm-bar i{display:block;height:100%;border-radius:999px}
.pm-load{animation:psyLoad var(--T) infinite both}.pm-focus{background:linear-gradient(90deg,#1d64d8,#67e8f9);animation:psyFocus var(--T) infinite both}
@keyframes psyLoad{0%{width:30%;background:#f59e0b}12%{width:62%;background:#f97316}26%,46%{width:90%;background:#ef4444}80%,96%{width:22%;background:#22c55e}100%{width:30%;background:#f59e0b}}
@keyframes psyFocus{0%{width:45%}26%,46%{width:24%}82%,96%{width:92%}100%{width:45%}}
@keyframes psyHi{0%,8%{opacity:0}14%,62%{opacity:1}68%,100%{opacity:0}}
@keyframes psyLo{0%,62%{opacity:0}70%,94%{opacity:1}100%{opacity:0}}
.psy-toast{position:absolute;z-index:4;right:5%;top:6%;display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:#052e16;background:#4ade80;box-shadow:0 12px 30px rgba(34,197,94,.4);opacity:0;animation:psyToast var(--T) infinite both}
.psy-toast .ico{width:18px;height:18px}
@keyframes psyToast{0%,80%{opacity:0;transform:translateY(-10px) scale(.95)}84%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
/* l'animazione parte quando la sezione entra nello schermo (fx.js toglie .wait) */
.psy-film.wait *,.psy-film.wait *::after{animation-play-state:paused!important}
@media (max-width:900px){.psy{padding:72px 0}.psy-in{grid-template-columns:1fr;gap:36px}.psy-film{height:560px}}
@media (max-width:600px){
  .psy-film{height:540px;border-radius:18px}.psy-film>img{object-position:78% 40%}
  .psy-shade{background:linear-gradient(90deg,rgba(6,10,20,.8) 0%,rgba(6,10,20,.45) 60%,rgba(6,10,20,.1) 100%)}
  .pn{font-size:11.5px;padding:6px 9px}.pn2{left:34%}.pn4{left:36%}
  .psy-card,.psy-meter{left:4%;width:74%}.psy-card{top:30%}.pc-r{font-size:12px;padding:7px 8px}
  .psy-toast{right:4%;top:5%;font-size:12.5px}}
@media (prefers-reduced-motion:reduce){
  .psy-film *,.psy-film *::after{animation:none!important}.pn{display:none}.psy-card,.pc-r,.lv-lo{opacity:1}.lv-hi,.psy-toast{opacity:0}
  .pc-ck{background:#22c55e;border-color:#22c55e}.pc-ck::after{opacity:1}.pm-load{width:22%;background:#22c55e}.pm-focus{width:92%}}

/* SCHERMO CONDIVISO: chi guarda indica un punto, poi prende il controllo e sblocca l'ordine */
.sshare{--T:11s;background:#0b0e16;border-radius:20px;box-shadow:var(--sh2);border:1px solid #1f2637;color:#e8eaf6;padding:12px}
.ss-screen{position:relative;overflow:hidden;border-radius:12px;padding:5% 5% 13%;background:linear-gradient(135deg,#1e3a8a,#5b21b6);box-shadow:inset 0 0 0 3px #fbbf24}
.ss-win{background:#fff;border-radius:10px;overflow:hidden;color:#1e293b;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.ss-wt{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#f1f5f9;border-bottom:1px solid #e2e8f0;font-size:11.5px}
.ss-wt i{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.ss-wt b{margin-left:6px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-body{display:flex}
.ss-side{width:20%;flex-shrink:0;background:#f8fafc;border-right:1px solid #e2e8f0;padding:12px 9px;display:flex;flex-direction:column;gap:8px}
.ss-side em{display:block;height:7px;border-radius:4px;background:#e2e8f0}.ss-side em:nth-child(2){background:#c7d2fe}
.ss-tab{flex:1;min-width:0;padding:6px 8px 8px;font-size:12.5px}
.ss-r{display:grid;grid-template-columns:1.35fr 1fr .75fr;gap:6px;align-items:center;padding:8px 6px;border-bottom:1px solid #f1f5f9;border-radius:6px}
.ss-r>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss-r>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.ss-r.h{font-size:10.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
.st{display:inline-block;font-style:normal;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.st.ok{background:#dcfce7;color:#166534}.st.ko{background:#fee2e2;color:#b91c1c}.st.wt{background:#fef3c7;color:#92400e}
.ss-r.hl{animation:ssRow var(--T) infinite}
.ss-r>span.ss-st{position:relative;overflow:visible}
.ss-st .a{animation:ssA var(--T) infinite}
.ss-st .b{position:absolute;left:0;top:50%;margin-top:-10px;opacity:0;animation:ssB var(--T) infinite}
.ss-ring{position:absolute;left:30px;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:3px solid #fbbf24;box-shadow:0 0 16px #fbbf24;opacity:0;pointer-events:none;animation:ssRing var(--T) infinite}
.ss-cur{position:absolute;left:30px;top:50%;z-index:3;animation:ssCur var(--T) infinite}
.ss-cur svg{width:20px;height:20px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.ss-cur b{position:absolute;left:16px;top:17px;font-size:10.5px;font-weight:700;background:#f59e0b;color:#fff;padding:1px 8px;border-radius:999px;white-space:nowrap}
.ss-tip{position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);max-width:92%;background:rgba(11,14,22,.92);color:#fff;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0}
.ss-tip.t1{animation:ssTip1 var(--T) infinite}.ss-tip.t2{animation:ssTip2 var(--T) infinite}
.ss-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:12px 0 2px}
.ss-bar span{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:#1e2333;color:#cbd5e1}
.ss-bar .on{background:#1e3260;color:#93c5fd}.ss-bar .red{background:#ef4444;color:#fff}
.sshare .vc-head{gap:10px}.sshare .vc-head span:last-child{flex-shrink:0;color:#34d399}
@keyframes ssCur{0%{transform:translate(150px,90px);opacity:0}6%{opacity:1;transform:translate(150px,90px)}26%{transform:translate(0,0)}30%{transform:scale(.8)}33%,58%{transform:none}62%{transform:scale(.8)}65%,90%{transform:none;opacity:1}96%,100%{transform:none;opacity:0}}
@keyframes ssRing{0%,29%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1)}44%{opacity:1;transform:scale(1.3)}54%,100%{opacity:0;transform:scale(1.5)}}
@keyframes ssRow{0%,29%{background:transparent}32%,92%{background:#fffbeb}98%,100%{background:transparent}}
@keyframes ssA{0%,63%{opacity:1}65%,97%{opacity:0}100%{opacity:1}}
@keyframes ssB{0%,63%{opacity:0;transform:scale(.8)}66%{opacity:1;transform:scale(1.15)}69%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ssTip1{0%,30%{opacity:0}34%,55%{opacity:1}59%,100%{opacity:0}}
@keyframes ssTip2{0%,59%{opacity:0}63%,92%{opacity:1}96%,100%{opacity:0}}
@media (max-width:520px){.ss-tab{font-size:11px;padding:4px 4px 6px}.ss-r{padding:6px 4px;gap:4px}.st{font-size:9.5px;padding:2px 6px}
  .ss-side{display:none}.ss-tip{font-size:11px;padding:6px 10px}.ss-bar{gap:5px}.ss-bar span{font-size:11px;padding:6px 8px}.sshare .vc-head{font-size:11.5px}.ss-ring{left:24px}.ss-cur{left:24px}}
@media (prefers-reduced-motion:reduce){.sshare *{animation:none!important}.ss-ring,.ss-tip.t1{opacity:1}.ss-r.hl{background:#fffbeb}}

/* PRESENZE E TIMBRATURA: elenco di oggi + riepilogo del mese + finestra "confermi la presenza?" */
.pres{--T:9s;position:relative;background:linear-gradient(160deg,#0f1117,#182033);border-radius:20px;padding:20px;box-shadow:var(--sh2);color:#e8eaf6}
.pr-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.pr-head b{font-size:15px}.pr-head span{font-size:12px;color:#9fb3d6;white-space:nowrap}
.pr-row{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border-radius:12px;background:#1b2232;border:1px solid #2a3350}
.pr-row img,.pr-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pr-av{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,#f472b6,#7c3aed)}
.pr-n{flex:1;min-width:0}.pr-n b{display:block;font-size:13.5px}
.pr-n span{display:block;font-size:12px;color:#9fb3d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-st{flex-shrink:0;font-style:normal;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pr-st.g{background:#0f3328;color:#34d399}.pr-st.b{background:#232a3d;color:#cbd5e1}.pr-st.y{background:#3b2d0a;color:#fbbf24}.pr-st.v{background:#2a1f4a;color:#c4b5fd}
.pr-row:first-of-type{animation:prRow var(--T) infinite}
.pr-month{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(29,100,216,.25),rgba(109,93,245,.2));border:1px solid rgba(124,196,255,.25)}
.pr-month small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb3d6;font-weight:700}
.pr-month b{display:block;font-size:22px;line-height:1.2;color:#fff;font-variant-numeric:tabular-nums}
.pr-month span{font-size:12px;color:#c7d2fe}
.pr-btns{display:flex;gap:6px}.pr-btns span{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;background:#1e2333;color:#e8eaf6;border:1px solid #2a3350;white-space:nowrap}
.pr-pop{position:absolute;right:-14px;top:46px;width:250px;z-index:2;background:#fff;color:var(--ink);border-radius:16px;padding:14px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);opacity:0;animation:prPop var(--T) infinite}
.pr-pop-t{font-weight:700;font-size:14px}.pr-pop-s{font-size:12.5px;color:var(--muted);margin:4px 0 10px;line-height:1.45}
.pr-pop-b{position:relative;height:30px}
.pr-pop-b span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pr-ok{background:var(--blu);color:#fff;animation:prOk var(--T) infinite}
.pr-done{background:#dcfce7;color:#166534;opacity:0;animation:prDone var(--T) infinite}
@keyframes prPop{0%,6%{opacity:0;transform:translateY(-10px) scale(.96)}10%,62%{opacity:1;transform:none}68%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes prOk{0%,30%{opacity:1;transform:none}33%{transform:scale(.9)}36%{opacity:0;transform:scale(.9)}100%{opacity:0}}
@keyframes prDone{0%,35%{opacity:0;transform:scale(.9)}39%,64%{opacity:1;transform:none}68%,100%{opacity:0}}
@keyframes prRow{0%,36%{box-shadow:none;border-color:#2a3350}40%,70%{box-shadow:0 0 0 2px #34d399;border-color:#34d399}80%,100%{box-shadow:none;border-color:#2a3350}}
@media (max-width:900px){.pr-pop{right:10px}}
@media (max-width:520px){.pres{padding:14px}.pr-row{padding:8px 10px;gap:10px}.pr-st{font-size:10.5px;padding:3px 8px}
  .pr-pop{left:12px;right:12px;width:auto;top:40px}.pr-month b{font-size:19px}}
@media (prefers-reduced-motion:reduce){.pres *{animation:none!important}.pr-pop{display:none}}

/* Riquadri con data-play: fermi finché non entrano nello schermo (fx.js toglie .wait) */
[data-play].wait,[data-play].wait *,[data-play].wait *::before,[data-play].wait *::after{animation-play-state:paused!important}
.sw{position:relative;display:inline-block}.sw .b{position:absolute;left:0;top:0;opacity:0}
.pt-row .sw{display:block}.pt-row .sw .b{left:auto;right:0}
.p-team .pt-stats .sw span,.p-team .pt-row .sw span{font-size:inherit;color:inherit;font-weight:inherit;line-height:inherit}

/* CARICO DI LAVORO: le barre crescono, un impegno passa da Marco a Luca, arriva il "Fatto" e i contatori si aggiornano */
.p-team.ld{--T:10s}
.p-team.ld .pt-row em{transform-origin:left center;animation:ldBar var(--T) infinite both}
.p-team.ld .pt-row:nth-child(1) em{animation-name:ldMarco}
.p-team.ld .pt-row:nth-child(2) em{animation-name:ldGiulia}
.p-team.ld .pt-row:nth-child(3) em{animation-name:ldLuca}
.p-team.ld .pt-row:nth-child(1) .sw .a,.p-team.ld .pt-row:nth-child(3) .sw .a{animation:ldNumA var(--T) infinite both}
.p-team.ld .pt-row:nth-child(1) .sw .b,.p-team.ld .pt-row:nth-child(3) .sw .b{animation:ldNumB var(--T) infinite both}
.p-team.ld .pt-stats .sw .a{animation:ldStA var(--T) infinite both}
.p-team.ld .pt-stats .sw .b{animation:ldStB var(--T) infinite both}
.p-team.ld .pt-stats div{animation:ldCard var(--T) infinite both}.p-team.ld .pt-stats .late{animation:none}
.p-team.ld .pt-reply{animation:ldReply var(--T) infinite both}
.p-team.ld .pt-tk{animation:ldTk var(--T) infinite both}
@keyframes ldMarco{0%{transform:scaleX(0)}14%{transform:scaleX(1)}36%{transform:scaleX(1)}44%,92%{transform:scaleX(.875)}100%{transform:scaleX(0)}}
@keyframes ldGiulia{0%,3%{transform:scaleX(0)}17%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes ldLuca{0%,6%{transform:scaleX(0)}20%{transform:scaleX(1)}36%{transform:scaleX(1)}44%,92%{transform:scaleX(1.33)}100%{transform:scaleX(0)}}
@keyframes ldNumA{0%,39%{opacity:1}42%,97%{opacity:0}100%{opacity:1}}
@keyframes ldNumB{0%,39%{opacity:0;transform:translateY(4px)}42%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ldStA{0%,61%{opacity:1}64%,97%{opacity:0}100%{opacity:1}}
@keyframes ldStB{0%,61%{opacity:0;transform:translateY(6px)}64%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ldCard{0%,60%{box-shadow:none}64%{box-shadow:0 0 0 2px rgba(52,211,153,.55)}74%,100%{box-shadow:none}}
@keyframes ldReply{0%,50%{opacity:0;transform:translateY(12px) scale(.97)}55%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ldTk{0%,56%{color:#64748b}60%,100%{color:#38bdf8}}
@media (prefers-reduced-motion:reduce){.p-team.ld *{animation:none!important}.p-team.ld .pt-reply{opacity:1}}

/* TIMBRATURA AUTOMATICA: PC acceso → timbro di entrata → l'orologio corre → PC spento → timbro di uscita e totale */
.tclock{--T:12s;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 0% 0%,#1b2a4d 0,#0f1117 55%);border:1px solid #232c45;border-radius:20px;padding:18px 20px 16px;box-shadow:var(--sh2);color:#e8eaf6}
.tc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tc-who{flex:1;min-width:0}.tc-who b{display:block;font-size:15px}.tc-who small{display:block;font-size:12px;color:#9fb3d6}
.tc-pc{position:relative;width:34px;height:26px;flex-shrink:0;border:2px solid #475569;border-radius:5px;background:#0b0e16}
.tc-pc::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:4px;margin-left:-7px;border-radius:2px;background:#475569}
.tc-pc i{position:absolute;inset:2px;border-radius:2px;background:#111827;animation:tcScreen var(--T) infinite both}
.tc-live{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:#0f3328;color:#34d399;opacity:0;animation:tcLive var(--T) infinite both}
.tc-body{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center}
.tc-clock{position:relative;width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,#1e2640 0,#141a2c 70%);border:2px solid #2f3a5c;box-shadow:inset 0 0 22px rgba(0,0,0,.5),0 0 0 6px rgba(56,189,248,.06)}
.tc-clock::before{content:"";position:absolute;inset:6px;border-radius:50%;background:repeating-conic-gradient(from -1.5deg,#7c8db5 0 3deg,transparent 3deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 80%,#000 81%);mask:radial-gradient(circle,transparent 80%,#000 81%)}
.tc-clock::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#38bdf8;opacity:0;animation:tcRing var(--T) infinite both}
.tc-h,.tc-m{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px}
.tc-h{width:5px;height:29%;margin-left:-2.5px;background:#e8eaf6;animation:tcH var(--T) infinite linear both}
.tc-m{width:3px;height:40%;margin-left:-1.5px;background:#38bdf8;animation:tcM var(--T) infinite linear both}
.tc-c{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#e8eaf6;border:2px solid #0f1117}
.tc-log{display:flex;flex-direction:column;gap:8px;min-width:0}
.tc-ev{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:12px;background:#1b2232;border:1px solid #2a3350;opacity:0}
.tc-ev b{display:block;font-size:13px;font-variant-numeric:tabular-nums}.tc-ev small{display:block;font-size:11.5px;color:#9fb3d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-ev>div{min-width:0}
.tc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.tc-dot.g{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.tc-dot.b{background:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.18)}.tc-dot.r{background:#fb7185;box-shadow:0 0 0 4px rgba(251,113,133,.18)}
.tc-ev.e1{animation:tcE1 var(--T) infinite both}.tc-ev.e2{animation:tcE2 var(--T) infinite both}.tc-ev.e3{animation:tcE3 var(--T) infinite both}
.tc-track{position:relative;height:12px;margin:22px 4px 0;border-radius:999px;background:#1b2232;border:1px solid #2a3350}
.tc-fill{position:absolute;left:12.1%;top:1px;bottom:1px;width:76%;border-radius:999px;background:linear-gradient(90deg,#34d399,#38bdf8 55%,#6d5df5);transform-origin:left center;animation:tcFill var(--T) infinite linear both}
.tc-mk{position:absolute;top:-21px;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:#cbd5e1;font-variant-numeric:tabular-nums;opacity:0}
.tc-mk.m1{left:12.1%;animation:tcE1 var(--T) infinite both}.tc-mk.m2{left:88.1%;animation:tcE3 var(--T) infinite both}
.tc-scale{display:flex;justify-content:space-between;margin:6px 4px 0;font-size:10px;color:#64748b;font-variant-numeric:tabular-nums}
.tc-total{position:relative;height:34px;margin-top:12px}
.tc-total span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:13px;font-weight:600}
.tc-run{color:#34d399;background:rgba(52,211,153,.08);opacity:0;animation:tcRun var(--T) infinite both}
.tc-end{color:#e8eaf6;background:linear-gradient(90deg,rgba(29,100,216,.3),rgba(109,93,245,.3));border:1px solid rgba(124,196,255,.3);opacity:0;animation:tcEnd var(--T) infinite both}
.tc-end b{margin:0 6px;font-size:15px;color:#fff}
.tc-stamp{position:absolute;right:22px;top:58px;z-index:3;display:flex;flex-direction:column;align-items:center;padding:6px 14px 4px;border:3px solid;border-radius:10px;
  font-size:19px;font-weight:900;letter-spacing:.12em;line-height:1.1;opacity:0;pointer-events:none;background:rgba(15,17,23,.55)}
.tc-stamp small{font-size:12px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tc-stamp.s1{color:#34d399;border-color:#34d399;animation:tcSt1 var(--T) infinite both}
.tc-stamp.s2{color:#fb7185;border-color:#fb7185;animation:tcSt2 var(--T) infinite both}
@keyframes tcScreen{0%,7%{background:#111827;box-shadow:none}9%,75%{background:linear-gradient(135deg,#38bdf8,#6d5df5);box-shadow:0 0 12px rgba(56,189,248,.7)}78%,100%{background:#111827;box-shadow:none}}
@keyframes tcLive{0%,8%{opacity:0}11%,75%{opacity:1}78%,100%{opacity:0}}
@keyframes tcH{0%,13%{transform:rotate(253.5deg)}75%,100%{transform:rotate(527deg)}}
@keyframes tcM{0%,13%{transform:rotate(162deg)}75%,100%{transform:rotate(3444deg)}}
@keyframes tcRing{0%,13%{opacity:0;transform:rotate(0)}15%,73%{opacity:1}75%{opacity:0;transform:rotate(1440deg)}100%{opacity:0;transform:rotate(1440deg)}}
@keyframes tcFill{0%,13%{transform:scaleX(0)}75%,96%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes tcE1{0%,9%{opacity:0;transform:translateX(-10px)}12%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes tcE2{0%,15%{opacity:0;transform:translateX(-10px)}18%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes tcE3{0%,76%{opacity:0;transform:translateX(-10px)}79%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes tcRun{0%,14%{opacity:0}18%{opacity:1}30%{opacity:.55}42%{opacity:1}54%{opacity:.55}66%{opacity:1}74%{opacity:1}77%,100%{opacity:0}}
@keyframes tcEnd{0%,80%{opacity:0;transform:scale(.96)}83%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes tcSt1{0%,8%{opacity:0;transform:rotate(-12deg) scale(2.2)}11%{opacity:1;transform:rotate(-12deg) scale(.94)}13%,27%{opacity:1;transform:rotate(-12deg) scale(1)}32%,100%{opacity:0;transform:rotate(-12deg) scale(1)}}
@keyframes tcSt2{0%,76%{opacity:0;transform:rotate(10deg) scale(2.2)}79%{opacity:1;transform:rotate(10deg) scale(.94)}81%,90%{opacity:1;transform:rotate(10deg) scale(1)}94%,100%{opacity:0;transform:rotate(10deg) scale(1)}}
@media (max-width:520px){.tclock{padding:14px 14px 12px}.tc-body{grid-template-columns:100px 1fr;gap:12px}.tc-clock{width:100px;height:100px}
  .tc-ev{padding:7px 9px}.tc-ev b{font-size:12px}.tc-ev small{font-size:10.5px}.tc-stamp{right:12px;top:54px;font-size:15px}.tc-scale span:nth-child(even){visibility:hidden}}
@media (prefers-reduced-motion:reduce){.tclock *,.tclock *::before,.tclock *::after{animation:none!important}.tc-ev,.tc-mk,.tc-end{opacity:1}.tc-h{transform:rotate(527deg)}.tc-m{transform:rotate(204deg)}}

/* ASSISTENZA IN VIDEOCHIAMATA: chiamata → collegamento → il collega osserva (zoom + cerchio) → spiega → risolto */
.vcall.as{--T:15s}
.vcall.as .vc-one{overflow:hidden;border-radius:12px}
.as-h1,.as-h2{font-weight:600}.as-h2{display:none}
.vcall.as .as-h1{animation:asH1 var(--T) infinite both}.vcall.as .as-h2{display:inline;animation:asH2 var(--T) infinite both}
.vc-head span:first-child{position:relative}
.vcall.as .as-h2{position:absolute;left:16px;white-space:nowrap}
.as-live{color:#f87171;font-weight:800;letter-spacing:.06em;animation:asLive var(--T) infinite both}
.vcall.as .tile.main{overflow:hidden}
.as-zoom{position:absolute;inset:0;transform-origin:75% 32%;animation:asZoom var(--T) infinite both}
.as-zoom img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.vcall.as .tile svg.as-ring{position:absolute;left:75.4%;top:31.7%;width:24%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;z-index:2}
.as-ring circle{fill:none;stroke:#fbbf24;stroke-width:5;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;filter:drop-shadow(0 0 4px rgba(251,191,36,.8));animation:asRing var(--T) infinite both}
.as-tag{position:absolute;z-index:2;left:75.4%;top:calc(31.7% + 14%);transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:800;color:#0b1220;background:#fbbf24;border-radius:999px;padding:2px 8px;opacity:0;animation:asTag var(--T) infinite both}
.vcall.as .tile.self{animation:asSelf var(--T) infinite both}
.vcall.as .tile.main .wave{animation:asWave var(--T) infinite both}
.as-sub{position:absolute;left:12px;bottom:14px;max-width:62%;z-index:3;padding:8px 12px;border-radius:12px 12px 12px 4px;background:rgba(11,14,22,.88);color:#fff;font-size:12.5px;line-height:1.4;
  box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;backdrop-filter:blur(6px)}
.as-sub b{display:block;font-size:11px;color:#86efac;margin-bottom:1px}
.as-sub.me{background:rgba(29,100,216,.92);border-radius:12px 12px 4px 12px}.as-sub.me b{color:#bfdbfe}
.as-sub.s1{animation:asS1 var(--T) infinite both}.as-sub.s2{animation:asS2 var(--T) infinite both}.as-sub.s3{animation:asS3 var(--T) infinite both}
.as-ok{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;white-space:nowrap;padding:8px 14px;border-radius:999px;background:#22c55e;color:#052e16;font-size:13px;font-weight:800;
  box-shadow:0 10px 26px rgba(34,197,94,.45);opacity:0;animation:asOk var(--T) infinite both}
.as-call{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 42%,#1e2a4a,#0b0e16 70%);color:#e8eaf6;
  animation:asCall var(--T) infinite both}
.as-call b{font-size:16px;margin-top:8px}.as-call small{font-size:12.5px;color:#9fb3d6}
.as-av{position:relative;width:86px;height:86px;border-radius:50%}
.as-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 38%;position:relative;z-index:1}
.as-av::before,.as-av::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #34d399;animation:asPing 1.6s infinite}
.as-av::after{animation-delay:.8s}
@keyframes asPing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@keyframes asCall{0%,11%{opacity:1;visibility:visible}14%,100%{opacity:0;visibility:hidden}}
@keyframes asH1{0%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes asH2{0%,12%{opacity:0}15%,100%{opacity:1}}
@keyframes asLive{0%,12%{opacity:0}15%,100%{opacity:1}}
@keyframes asS1{0%,17%{opacity:0;transform:translateY(8px)}20%,31%{opacity:1;transform:none}34%,100%{opacity:0}}
@keyframes asZoom{0%,30%{transform:scale(1)}40%,66%{transform:scale(1.9)}74%,100%{transform:scale(1)}}
@keyframes asRing{0%,38%{stroke-dashoffset:264;opacity:1}46%,70%{stroke-dashoffset:0;opacity:1}74%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes asTag{0%,45%{opacity:0}48%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes asS2{0%,47%{opacity:0;transform:translateY(8px)}50%,66%{opacity:1;transform:none}69%,100%{opacity:0}}
@keyframes asSelf{0%,47%{box-shadow:0 8px 20px rgba(0,0,0,.45)}50%,66%{box-shadow:0 0 0 3px #38bdf8,0 8px 20px rgba(0,0,0,.45)}69%,100%{box-shadow:0 8px 20px rgba(0,0,0,.45)}}
@keyframes asWave{0%,17%{opacity:.25}20%,31%{opacity:1}34%,69%{opacity:.25}72%,84%{opacity:1}87%,100%{opacity:.25}}
@keyframes asS3{0%,71%{opacity:0;transform:translateY(8px)}74%,85%{opacity:1;transform:none}88%,100%{opacity:0}}
@keyframes asOk{0%,82%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.95)}86%,97%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%)}}
@media (max-width:520px){.as-sub{font-size:11px;max-width:66%;left:8px;bottom:10px;padding:6px 9px}.as-ok{font-size:11.5px;padding:6px 11px}.as-av{width:64px;height:64px}.vcall.as .as-h2{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.vcall.as *,.vcall.as *::before,.vcall.as *::after{animation:none!important}.as-call,.as-h1,.as-sub.s1,.as-sub.s3,.as-ok{display:none}
  .as-h2{display:inline;position:static!important}.as-sub.s2{opacity:1}.as-ring circle{stroke-dashoffset:0}.as-tag{opacity:1}}

/* ASSISTENZA: due scene che si alternano (cantiere 15 s → dissolvenza di mezzo secondo → ufficio 15 s) */
.vcall.as-alt{position:relative}
.as-alt .as-sc.sb{position:absolute;left:12px;right:12px;top:12px}
.as-alt .as-sc.sa{animation:asSceneA calc(var(--T) * 2) infinite both}
.as-alt .as-sc.sb{animation:asSceneB calc(var(--T) * 2) infinite both}
@keyframes asSceneA{0%,48.33%{opacity:1;visibility:visible}50%,98.33%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
@keyframes asSceneB{0%,48.33%{opacity:0;visibility:hidden}50%,98.33%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
/* scena ufficio: il problema è la finestrella d'errore sul monitor */
.as-sc.sb .as-zoom{transform-origin:20% 40%}
.as-sc.sb .as-zoom img{object-position:0% 50%}
.as-sc.sb .as-call .as-av img{object-position:80% 25%}
.vcall.as .as-sc.sb .tile svg.as-ring{left:20%;top:40%;width:42%}
.as-sc.sb .as-tag{left:24%;top:calc(40% + 24%)}
.as-err,.as-fix{position:absolute;left:12%;top:33%;width:16%;border-radius:3px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.35);font-family:system-ui,"Segoe UI",Arial,sans-serif;line-height:1.25}
.as-err b,.as-fix b{display:block;color:#fff;padding:2px 4px;font-size:6.5px;font-weight:700}
.as-err span,.as-fix span{display:block;background:#fff;color:#1f2937;padding:3px 4px 4px;font-size:6px}
.as-err b{background:#dc2626}.as-fix b{background:#16a34a}
.as-err{animation:asErr var(--T) infinite both}.as-fix{opacity:0;animation:asFix var(--T) infinite both}
@keyframes asErr{0%,70%{opacity:1}72%,100%{opacity:0}}
@keyframes asFix{0%,70%{opacity:0;transform:scale(.9)}73%,96%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.as-alt .as-sc.sb{display:none}.as-alt .as-sc.sa{opacity:1}}

/* ASSISTENZA: tre scene a rotazione (magazzino → ufficio → cantiere), 15 s ciascuna, dissolvenza di mezzo secondo */
.as-alt .as-sc.m{position:relative}
.as-alt .as-sc.sa,.as-alt .as-sc.sb{position:absolute;left:12px;right:12px;top:12px}
.as-alt .as-sc.m{animation:asSc1 calc(var(--T) * 3) infinite both}
.as-alt .as-sc.sb{animation:asSc2 calc(var(--T) * 3) infinite both}
.as-alt .as-sc.sa{animation:asSc3 calc(var(--T) * 3) infinite both}
@keyframes asSc1{0%,32.22%{opacity:1;visibility:visible}33.33%,98.89%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
@keyframes asSc2{0%,32.22%{opacity:0;visibility:hidden}33.33%,65.56%{opacity:1;visibility:visible}66.67%,100%{opacity:0;visibility:hidden}}
@keyframes asSc3{0%,65.56%{opacity:0;visibility:hidden}66.67%,98.89%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
/* scena magazzino: percorso disegnato sul pavimento fino allo scaffale giusto */
.as-sc.m .as-zoom{transform-origin:57% 41%}
.as-sc.m .as-zoom img{object-position:100% 50%}
.as-sc.m .as-call .as-av img{object-position:28% 30%}
.vcall.as .as-sc.m .tile svg.as-ring{left:57%;top:41%;width:22%}
.as-sc.m .as-tag{left:57%;top:calc(41% + 14%)}
.vcall.as .as-sc.m .tile svg.as-path{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.as-path path{fill:none;stroke:#fbbf24;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 2.2;vector-effect:non-scaling-stroke;stroke-width:4;
  opacity:0;clip-path:inset(100% 0 0 0);animation:asPath var(--T) infinite both;filter:drop-shadow(0 0 3px rgba(251,191,36,.8))}
@keyframes asPath{0%,47%{opacity:0;clip-path:inset(100% 0 0 0)}49%{opacity:1;clip-path:inset(100% 0 0 0)}58%,70%{opacity:1;clip-path:inset(0 0 0 0)}74%,100%{opacity:0;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.as-alt .as-sc.sa,.as-alt .as-sc.sb{display:none}.as-alt .as-sc.m{opacity:1}.as-path path{opacity:1;clip-path:none}}