/* Caratteri ospitati nel sito (nessuna richiesta a Google, nessun ritardo tra una pagina e l'altra) */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/spacegrotesk.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/poppins-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
/* Passaggio fluido tra le pagine (Chrome e Android): l'intestazione resta ferma */
@view-transition{navigation:auto}
header.site{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
:root{--bg:#fff;--bg2:#f5f7fb;--ink:#0b1b3a;--muted:#55607a;--brand:#35508f;--brand-d:#283f73;--dark:#0b1b3a;--line:#e1e6f0;--max:1120px;--r:14px}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 "Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--brand-d)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
header.site{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:nowrap;max-width:1240px}
.logo{font-weight:800;font-size:1.25rem;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
.logo span{color:var(--brand)}
nav{display:flex;align-items:center;gap:20px}
nav a{text-decoration:none;color:var(--ink);font-weight:500;font-size:.92rem;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--brand)}
nav a.btn{margin:0;padding:9px 18px;color:#fff}
.btn{display:inline-block;background:var(--brand);color:#fff!important;padding:13px 26px;border-radius:10px;font-weight:600;text-decoration:none;border:1.5px solid var(--brand);cursor:pointer;font-size:1rem;transition:background .15s}
.btn:hover{background:var(--brand-d)}
.btn.alt{background:transparent;color:var(--ink)!important;border-color:var(--line)}
.btn.alt:hover{background:var(--bg2)}
/* hero chiaro, centrato */
.hero{background:linear-gradient(180deg,#eef1f8,#fff);padding:84px 0 56px;text-align:center}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1.08;letter-spacing:-.03em;margin:0 auto 20px;max-width:860px}
.hero p{font-size:1.2rem;color:var(--muted);max-width:660px;margin:0 auto 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
section{padding:84px 0}
section.alt{background:var(--bg2)}
.eyebrow{color:var(--brand);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 14px;line-height:1.15;letter-spacing:-.02em}
.lead{color:var(--muted);max-width:700px;margin:0 0 40px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{margin:0 0 8px;font-size:1.1rem}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.badge{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--brand-d);border-radius:999px;padding:5px 14px;font-size:.85rem;font-weight:600;margin-bottom:22px}
/* finestra di chat dimostrativa */
.chat{max-width:760px;margin:48px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -24px rgba(11,27,58,.25);text-align:left;overflow:hidden}
.chat .bar{padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg2);font-size:.85rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.chat .bar i{width:10px;height:10px;border-radius:50%;background:#d3d9e6;display:inline-block}
.chat .bar b{margin-left:10px;font-weight:600}
.chat .body{padding:22px;display:grid;gap:14px}
.msg{max-width:88%;padding:12px 16px;border-radius:14px;font-size:.97rem}
.msg.q{background:var(--brand);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.msg.a{background:var(--bg2);border-bottom-left-radius:4px}
.msg.a table{border-collapse:collapse;margin-top:8px;width:100%;font-size:.9rem}
.msg.a td,.msg.a th{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left}
.msg.a td:last-child,.msg.a th:last-child{text-align:right}
.mocknote{font-size:.8rem;color:var(--muted);text-align:center;margin-top:12px}
/* blocchi alternati */
.split{display:grid;gap:48px;grid-template-columns:1fr 1fr;align-items:center}
.split.rev>:first-child{order:2}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:16px 20px;margin:0 0 14px;font-size:1.02rem}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding-left:30px;position:relative;margin-bottom:12px}
ul.check li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E")}
details{border-bottom:1px solid var(--line);padding:18px 0}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::after{content:"+";float:right;color:var(--brand);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);margin:10px 0 0}
.cta-band{background:var(--dark);color:#fff;text-align:center;padding:76px 0}
.cta-band p{opacity:.85;max-width:600px;margin:0 auto 26px}
.cta-band .btn.alt{color:#fff!important;border-color:rgba(255,255,255,.4)}
form{display:grid;gap:16px;max-width:560px}
label{font-weight:600;display:grid;gap:6px}
input,select,textarea{font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.note{font-size:.9rem;color:var(--muted)}
#esito{padding:12px;border-radius:10px;background:#fff3cd;display:none}
footer{background:#070f24;color:#aab3cb;padding:40px 0;font-size:.92rem}
footer a{color:#fff}
footer .maker{display:flex;align-items:center;gap:14px}
footer .maker img{flex:none;width:46px;height:46px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media(max-width:800px){.split{grid-template-columns:1fr;gap:28px}.split.rev>:first-child{order:0}header.site .wrap{padding-block:8px;flex-wrap:wrap}nav{gap:18px;width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:4px}nav a.btn{margin-left:auto}.hero{padding:56px 0 40px}section{padding:56px 0}}

/* ===== Come funziona: schede e animazioni ===== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.tabs button{font:inherit;font-weight:600;font-size:.95rem;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.tabs button:hover{border-color:var(--brand)}
.tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.tabpanel[hidden]{display:none}
.vis{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:28px;min-height:320px;display:flex;flex-direction:column;justify-content:center}
.tag{display:inline-block;align-self:flex-start;background:var(--brand);color:#fff;font-weight:600;font-size:.9rem;padding:6px 14px;border-radius:999px;margin-top:16px;opacity:0}
/* 1 flusso */
.flow{display:grid;gap:0}
.node{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 56px;font-weight:600;opacity:.3;transform:translateX(-12px);margin-bottom:22px}
.node b{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.85rem}
.node:not(:last-child)::after{content:"";position:absolute;left:28px;top:100%;height:22px;width:2px;background:var(--line)}
.on .node{animation:nodeIn .5s ease forwards;animation-delay:calc(var(--i)*.55s)}
@keyframes nodeIn{to{opacity:1;transform:none}}
/* 2 controlli */
.checks{display:grid;gap:12px}
.row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-weight:500;opacity:0;transform:translateY(8px)}
.tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}
.on .row{animation:rowIn .4s ease forwards;animation-delay:calc(var(--i)*.6s)}
.on .row .tick{animation:tickOn .3s ease forwards;animation-delay:calc(var(--i)*.6s + .35s)}
.tick::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.on .row .tick::after{animation:fadeIn .2s ease forwards;animation-delay:calc(var(--i)*.6s + .4s)}
@keyframes rowIn{to{opacity:1;transform:none}}
@keyframes tickOn{to{background:var(--brand);border-color:var(--brand)}}
@keyframes fadeIn{to{opacity:1}}
/* 3 circuito */
.circ{display:grid;gap:10px}
.crow{display:flex;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-left:28px;opacity:0;transform:translateX(-10px)}
.crow.top{margin-left:0;font-weight:700;border-color:var(--brand)}
.on .crow{animation:nodeIn .45s ease forwards;animation-delay:calc(var(--i)*.5s)}
.on .tag{animation:fadeIn .4s ease forwards;animation-delay:calc(var(--i)*.5s + .2s)}
/* 4 barre */
.bars{display:grid;gap:18px}
.brow{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:center;font-weight:600;font-size:.95rem}
.track{height:18px;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--brand);border-radius:999px}
.on .track i{animation:grow 1.1s ease forwards}
.brow:nth-child(2) .track i{animation-delay:.3s;background:#5b82f7}
.brow:nth-child(3) .track i{animation-delay:.6s;background:#93aefa}
@keyframes grow{to{width:var(--w)}}
.on .bars .tag{animation:fadeIn .4s ease 1.8s forwards}
/* 5 confronto */
.cmp{display:flex;gap:28px;align-items:flex-end;height:220px;justify-content:space-around;border-bottom:1px solid var(--line)}
.col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;font-size:.85rem;color:var(--muted)}
.pair{display:flex;gap:6px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.pair i{display:block;width:32%;max-width:36px;height:0;border-radius:6px 6px 0 0}
.prev{background:#c3cce0}.curr{background:var(--brand)}
.on .pair i{animation:rise .9s ease forwards}
.on .col:nth-child(2) .pair i{animation-delay:.25s}
.on .col:nth-child(3) .pair i{animation-delay:.5s}
@keyframes rise{to{height:var(--h)}}
.legend{display:flex;gap:20px;justify-content:center;margin-top:14px;font-size:.88rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
@media(prefers-reduced-motion:reduce){
  .node,.row,.crow,.tag{opacity:1!important;transform:none!important;animation:none!important}
  .tick{background:var(--brand)!important;border-color:var(--brand)!important}.tick::after{opacity:1!important;animation:none!important}
  .track i{width:var(--w)!important;animation:none!important}
  .pair i{height:var(--h)!important;animation:none!important}
}

/* ===== CRM e agenda ===== */
.pill{display:inline-block;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;background:#e8ecf5;color:var(--brand-d);margin-left:auto;white-space:nowrap}
.row .ev{display:grid;gap:2px;line-height:1.3}
.row .ev small{color:var(--muted);font-weight:400}
.row .ev+.pill{margin-left:auto}
.steps-note{font-size:.85rem;color:var(--muted);margin-top:4px}
.node.end{border-style:dashed}

/* ===== Aree del software: timeline orizzontale ===== */
.tl{position:relative;margin-top:18px}
.tl::before{content:"";position:absolute;left:4%;right:4%;top:46px;height:2px;background:var(--line);transform-origin:left;transform:scaleX(0)}
.tl.on::before{animation:drawLine 1.4s ease forwards}
@keyframes drawLine{to{transform:scaleX(1)}}
.tl-row{display:flex;gap:14px;overflow-x:auto;padding:8px 4px 14px;scroll-snap-type:x proximity;position:relative}
.tl-row .tl-card{flex:1 0 170px;scroll-snap-align:start}
.tl-card{font:inherit;color:inherit;text-align:center;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 14px 16px;cursor:pointer;display:grid;gap:4px;justify-items:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.tl-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px -14px rgba(11,27,58,.35)}
.tl-card[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 12px 28px -14px rgba(53,80,143,.5);transform:translateY(-4px)}
.tl-card strong{font-size:1rem}
.tl-card small{color:var(--muted)}
.tl-n{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:8px}
.tl .tl-card{opacity:0;transform:translateY(14px)}
.tl.on .tl-card{animation:nodeIn .5s ease forwards;animation-delay:calc(var(--i)*.22s)}
.tl .tl-card[aria-pressed="true"]{transform:translateY(-4px)}
.tl.on .tl-card[aria-pressed="true"]{animation:none;opacity:1}
.tl-support .tl-card{padding:14px 12px;flex:1 0 150px;opacity:1;transform:none}
#tlMain{min-height:128px}#tlSupport{min-height:74px}
.detail{margin-top:20px;margin-bottom:8px;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:30px}
.detail.in{animation:rowIn .4s ease both}
.detail-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px}
.detail-head h2{margin-bottom:6px}
.detail-num{flex:none;width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.1rem}
.voices{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.voices li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.95rem;opacity:0;animation:rowIn .35s ease forwards;animation-delay:calc(var(--i)*.04s)}
.shot{width:100%;border-radius:12px;border:1px solid var(--line);margin-top:22px}

/* ===== Grafici dimostrativi (assistente AI) ===== */
.demo .chat{margin:0 auto;max-width:860px}
.demo .msg.a{max-width:100%}
.demo .msg.a p{margin:0 0 10px}
.demo .msg.a p:last-of-type{margin-bottom:0}
.dv{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px}
.dv svg{width:100%;height:auto;display:block;overflow:visible}
.dv .grid{stroke:#e6eaf3;stroke-width:1}
.dv .ax{fill:var(--muted);font-size:13px}
.dv .lab{fill:var(--ink);font-size:14px}
.dv .val{fill:var(--ink);font-size:14px;font-weight:600}
.dv .bar,.dv .hbar{fill:#2a78d6}
.dv .bar.partial{opacity:.45}
.dv .hbar.prev{fill:#98a2b8}
.dv .hbar.pale{fill:#cdd3e0}
.dv .hbar.s1{fill:#1f5fb8}.dv .hbar.s2{fill:#2a78d6}.dv .hbar.s3{fill:#a9c8f0}
.dv .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.dv .hbar{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.dv .val,.dv .ln,.dv .dot{opacity:0}
.dv .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dv .ln.a{stroke:#98a2b8}.dv .ln.b{stroke:#2a78d6}.dv .ln.dash{stroke-dasharray:6 5}
.dv .dot{stroke:#fff;stroke-width:2}.dv .dot.a{fill:#98a2b8}.dv .dot.b{fill:#2a78d6}
.dv .hit{fill:transparent}
.tabpanel.on .dv .bar{animation:growY .7s ease forwards;animation-delay:var(--d,0s)}
.tabpanel.on .dv .hbar{animation:growX .8s ease forwards;animation-delay:var(--d,0s)}
.tabpanel.on .dv .val{animation:fadeIn .4s ease .7s forwards}
.tabpanel.on .dv .ln.a{animation:fadeIn .5s ease forwards}
.tabpanel.on .dv .ln.b{animation:fadeIn .5s ease .5s forwards}
.tabpanel.on .dv .dot{animation:fadeIn .3s ease 1s forwards}
@keyframes growY{to{transform:scaleY(1)}}
@keyframes growX{to{transform:scaleX(1)}}
.lg{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin:0 0 6px}
.lg span{display:inline-flex;align-items:center;gap:6px}
.lg i{display:inline-block;width:12px;height:12px;border-radius:3px}
.lg i.ln{height:3px;border-radius:2px;width:18px}
.lg i.ln.dash{background:repeating-linear-gradient(90deg,#2a78d6 0 6px,transparent 6px 10px)}
.dt{margin-top:10px;font-size:.85rem;color:var(--muted)}
.dt summary{cursor:pointer}
.dtw{overflow-x:auto;margin-top:8px}
.dt table{border-collapse:collapse;width:100%}
.dt th,.dt td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;font-variant-numeric:tabular-nums}
.dt th:not(:first-child),.dt td:not(:first-child){text-align:right}
.ins{background:#eef1f8;border-radius:10px;padding:10px 14px;font-size:.93rem}
@media(prefers-reduced-motion:reduce){.dv .bar,.dv .hbar{transform:none!important;animation:none!important}.dv .val,.dv .ln,.dv .dot{opacity:1!important;animation:none!important}}

/* ===== Telefono: scritte più piccole ===== */
@media(max-width:640px){
  html{font-size:14px}
  body{font-size:15px;line-height:1.55}
  .hero p{font-size:1.05rem}
  .lead{font-size:.98rem}
  .card h3{font-size:1rem}
  .card p,.voices li,.msg{font-size:.92rem}
  .tabs button{font-size:.88rem;padding:8px 14px}
  .tl-card strong{font-size:.95rem}
  .btn{padding:11px 20px;font-size:.95rem}
  nav a{font-size:.88rem}
  footer{font-size:.85rem}
}

/* ===== Stile titoli: compatto, maiuscolo, di impatto ===== */
.hero h1,h2{font-family:"Space Grotesk","Poppins",system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
.hero h1{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.04;color:#0a0a0a}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
ul.check li::before{border-radius:0;width:18px;height:18px;top:.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.8 5 11 7.2 16 8C11 8.8 8.8 11 8 16C7.2 11 5 8.8 0 8C5 7.2 7.2 5 8 0Z' fill='%230b1b3a'/%3E%3C/svg%3E") center/contain no-repeat}
ul.check li{padding-left:34px}
[id]{scroll-margin-top:84px}
@media(max-width:1100px){header.site .wrap{flex-wrap:wrap;padding-block:8px}nav{width:100%;overflow-x:auto;padding-bottom:4px}[id]{scroll-margin-top:110px}}
@media(max-width:640px){
  .hero h1{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  h2{font-size:clamp(1.55rem,7.4vw,2rem)}
  .btn{border-radius:999px}
  .hero .cta .btn,.cta-band .btn{width:100%;text-align:center}
  nav a.btn{width:auto}
}

/* ===== Menu compatto su telefono e schermi stretti: logo, menu a tre linee, pulsante demo ===== */
.menu-btn{display:none}
@media(max-width:1100px){
  header.site .wrap{flex-wrap:wrap;min-height:60px;padding-block:8px;row-gap:0}
  .logo{order:1}
  .menu-btn{display:grid;place-items:center;order:2;margin-left:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;content:""}
  .menu-btn span{position:relative}
  .menu-btn span::before{position:absolute;top:-6px}
  .menu-btn span::after{position:absolute;top:6px}
  nav{display:contents}
  nav a.btn{order:3;margin-left:0;width:auto;padding:9px 16px;font-size:.88rem}
  nav a:not(.btn){display:none;order:4;flex-basis:100%;padding:13px 0;border-top:1px solid var(--line);font-size:1rem}
  header.site.open nav a:not(.btn){display:block}
  [id]{scroll-margin-top:84px}
}

/* ===== Schede con bordo leggero e ombra ===== */
.card{background:linear-gradient(180deg,#fff 0%,#fcfcfe 100%);border:1px solid #e1e5ee;border-radius:20px;padding:28px;box-shadow:0 1px 2px rgba(11,27,58,.05),0 14px 32px -16px rgba(11,27,58,.22);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,27,58,.06),0 22px 40px -18px rgba(11,27,58,.3)}
.card h3{font-family:"Space Grotesk","Poppins",system-ui,sans-serif;font-weight:600;font-size:1.25rem;line-height:1.2;letter-spacing:-.01em;margin-bottom:10px}
.card p{font-size:.97rem;line-height:1.55}
/* Stesso bordo e stessa ombra su tutti i riquadri */
.panel,.vis,.detail{background:linear-gradient(180deg,#fff 0%,#fcfcfe 100%);border:1px solid #e1e5ee;border-radius:20px;box-shadow:0 1px 2px rgba(11,27,58,.05),0 14px 32px -16px rgba(11,27,58,.22)}
.tl-card{border:1px solid #e1e5ee;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#fcfcfe 100%);box-shadow:0 1px 2px rgba(11,27,58,.05),0 10px 24px -14px rgba(11,27,58,.22)}
.tl-card[aria-pressed="true"]{border-color:var(--brand)}
.chat{border-radius:20px;border-color:#e1e5ee}
.dv,.voices li,.quote{border-color:#e1e5ee;box-shadow:0 1px 2px rgba(11,27,58,.04),0 6px 16px -12px rgba(11,27,58,.2)}
.dv{border-radius:16px}
details{border-bottom-color:#e1e5ee}
/* Timeline senza scorrimento: su schermi stretti le schede vanno in griglia */
.tl-row{scrollbar-width:none}
.tl-row::-webkit-scrollbar{display:none}
@media(max-width:900px){
  .tl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));overflow:visible;gap:12px;padding:6px 0 10px}
  .tl-row .tl-card,.tl-support .tl-card{flex:none;min-width:0}
  .tl::before{display:none}
  .tl-card{padding:16px 10px 14px}
  .tl-n{width:34px;height:34px;margin-bottom:6px}
  #tlMain{min-height:0}#tlSupport{min-height:0}
}
@media(max-width:640px){
  #tlMain{grid-template-columns:repeat(2,1fr)}
  #tlMain .tl-card:last-child{grid-column:1/-1}
  #tlSupport{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}
@media(prefers-reduced-motion:reduce){.tl::before{transform:none!important;animation:none!important}.tl .tl-card,.voices li,.detail.in{opacity:1!important;transform:none!important;animation:none!important}}

/* Dimostrazione video (Come funziona) */
.demo-video{margin:44px 0 0}
.demo-video h3{font-size:clamp(1.05rem,2.6vw,1.3rem);margin:0 0 16px;text-wrap:balance}
.demo-video .frame{border-radius:16px;overflow:hidden;border:1px solid #e1e5ee;background:#fff;box-shadow:0 1px 2px rgba(11,27,58,.05),0 18px 40px -20px rgba(11,27,58,.28)}
.demo-video video{display:block;width:100%;height:auto;aspect-ratio:1280/686;background:#0d1a36}
.demo-video figcaption{margin-top:12px;font-size:.92rem;color:var(--muted,#5b6677);max-width:70ch}

/* Schermate del gestionale nel pannello delle aree */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:36px 0 0}
.shots figure:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:600px){.shots{grid-template-columns:minmax(0,1fr)}}
.shots figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.shots button{display:block;width:100%;padding:0;border:1px solid #e1e5ee;border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:0 1px 2px rgba(11,27,58,.05),0 14px 28px -18px rgba(11,27,58,.3);transition:transform .2s ease,box-shadow .2s ease}
.shots button:hover,.shots button:focus-visible{transform:translateY(-2px);box-shadow:0 2px 4px rgba(11,27,58,.08),0 18px 34px -16px rgba(11,27,58,.38)}
.shots img{display:block;width:100%;height:auto;aspect-ratio:1660/990}
.shots figcaption{font-size:.9rem;color:var(--muted,#5b6677);line-height:1.45}
#lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,16,36,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));cursor:zoom-out}
#lightbox[hidden]{display:none}
#lightbox img{max-width:min(100%,1660px);max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#lightbox p{margin:0;color:#e6ebf5;font-size:.95rem;text-align:center;max-width:70ch}
#lightbox .lb-x{position:absolute;top:max(10px,env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
body.lb-open{overflow:hidden}

/* Telefono: niente scorrimento laterale */
html,body{overflow-x:clip}
img,video,svg{max-width:100%}

/* Pannello delle aree su telefono: titolo e numero non devono allargare la pagina */
.detail-head>div{min-width:0}
.detail-head h2{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:480px){.detail{padding:22px 16px}.detail-head{gap:12px}.detail-num{width:40px;height:40px;font-size:1rem}.detail-head h2{font-size:1.45rem}}

/* Pulsanti demo: blu scuro */
.btn{background:#1f3868;border-color:#1f3868}
.btn:hover{background:#2b4a85;border-color:#2b4a85}
.btn.alt{background:transparent;border-color:var(--line)}
.btn.alt:hover{background:var(--bg2)}
.tabs button:hover{border-color:#0a0a0a}
.tabs button[aria-selected="true"]{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.cta-band .btn:not(.alt){background:#fff;border-color:#fff;color:#0a0a0a!important}
.cta-band .btn:not(.alt):hover{background:#e6e8ee;border-color:#e6e8ee}