/* Font di riserva con la stessa larghezza dei web font: quando Inter e Space Grotesk arrivano
   il testo non va a capo in modo diverso e la pagina non "salta" (CLS). */
@font-face{font-family:"Inter Fallback";font-weight:100 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:106.2%;ascent-override:91%;descent-override:22.6%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:101.5%;ascent-override:95%;descent-override:23.6%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback R";font-weight:100 500;src:local("Roboto"),local("Roboto-Regular");size-adjust:107.5%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback R";font-weight:600 900;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:103%;ascent-override:94%;descent-override:23.4%;line-gap-override:0%}
@font-face{font-family:"SG Fallback";font-weight:100 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:101.3%;ascent-override:97%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"SG Fallback R";font-weight:100 900;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:103%;ascent-override:96%;descent-override:28%;line-gap-override:0%}
/* AIReaLeads — landing futuristica. Tema scuro di default, tema chiaro con html[data-theme="light"].
   .dk = zona sempre scura (hero video, filmato a scroll, nav sopra l'hero). */
:root{--page:#050d1c;--page-deep:#040a16;color-scheme:dark}
html[data-theme="light"]{--page:#f3f6fb;--page-deep:#e8eef6;color-scheme:light}
:root,.dk{
  --text:#eef4fb;--text-2:#d3dce8;--muted:#a7b6ca;--strong:#fff;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.18);
  --surface:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --flat:rgba(255,255,255,.04);
  --panel:linear-gradient(180deg,rgba(12,28,54,.9),rgba(7,17,35,.9));
  --glass:rgba(5,13,28,.62);--nav-bg:rgba(5,13,28,.86);--menu-bg:rgba(5,13,28,.97);
  --accent:#45e6d2;--accent-bg:rgba(24,182,164,.14);--accent-line:rgba(69,230,210,.3);--accent-strong:rgba(69,230,210,.55);
  --blue:#8fbaff;--blue-bg:rgba(61,125,255,.2);--amber:#f5b85c;--amber-bg:rgba(245,184,92,.14);--red:#ff7a85;--red-bg:rgba(255,122,133,.1);
  --grid:rgba(255,255,255,.028);--glow:rgba(24,182,164,.13);
  --btn-g:rgba(255,255,255,.05);--btn-g-h:rgba(255,255,255,.1);--input:rgba(255,255,255,.05);--option:#0B1F3B;
  --shadow:0 40px 90px -50px #000,0 0 60px -30px rgba(24,182,164,.5);
  --grad-a:#45e6d2;--grad-b:#7fb8ff;--track:rgba(255,255,255,.1);
  color:var(--text);
}
html[data-theme="light"]{
  --text:#0B1F3B;--text-2:#31455e;--muted:#58697f;--strong:#06152b;
  --line:rgba(11,31,59,.10);--line-2:rgba(11,31,59,.2);
  --surface:linear-gradient(180deg,#fff,#fbfdff);
  --flat:#f5f8fc;
  --panel:linear-gradient(180deg,#fff,#f6f9fd);
  --glass:rgba(255,255,255,.8);--nav-bg:rgba(255,255,255,.88);--menu-bg:rgba(255,255,255,.98);
  --accent:#0a7d70;--accent-bg:rgba(24,182,164,.12);--accent-line:rgba(14,148,133,.35);--accent-strong:rgba(14,148,133,.6);
  --blue:#2a63d6;--blue-bg:rgba(47,111,224,.12);--amber:#a45f00;--amber-bg:rgba(245,184,92,.2);--red:#c93544;--red-bg:rgba(214,60,75,.08);
  --grid:rgba(11,31,59,.045);--glow:rgba(24,182,164,.18);
  --btn-g:#fff;--btn-g-h:#f1f5fa;--input:#fff;--option:#fff;
  --shadow:0 30px 70px -40px rgba(11,31,59,.4),0 0 50px -30px rgba(24,182,164,.45);
  --grad-a:#0a8f80;--grad-b:#2a63d6;--track:rgba(11,31,59,.1);
}
:root{
  --teal:#18B6A4;--on-accent:#03201c;
  --disp:"Space Grotesk","SG Fallback","SG Fallback R",Inter,system-ui,sans-serif;--sans:Inter,"Inter Fallback","Inter Fallback R",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,5vw,64px);--max:1200px;--r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd{margin:0}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(30px,4.4vw,52px)}
.g{background:linear-gradient(100deg,var(--grad-a),var(--grad-b) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:880px}
.sec{padding:clamp(72px,10vw,136px) 0;position:relative}
.sec.tight{padding:clamp(40px,6vw,72px) 0}
.head{max-width:760px;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.head p{color:var(--muted);font-size:clamp(17px,1.5vw,19px);margin-top:14px;text-wrap:pretty}
.tag{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:8px 13px;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-bg);margin-bottom:18px}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 500px at 85% -5%,var(--glow),transparent 60%),
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 56px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/56px 100%}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:14px;font:600 16px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-p{background:linear-gradient(180deg,#27d3bf,var(--teal));color:var(--on-accent);box-shadow:0 0 0 1px rgba(69,230,210,.4) inset,0 12px 36px -10px rgba(24,182,164,.75)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(69,230,210,.6) inset,0 18px 44px -10px rgba(24,182,164,.95)}
.btn-g{background:var(--btn-g);color:var(--text);border-color:var(--line-2);backdrop-filter:blur(8px)}
.btn-g:hover{background:var(--btn-g-h);border-color:var(--accent-strong);transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}

/* card */
.card{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:26px;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
html[data-theme="light"] .card{box-shadow:0 14px 40px -28px rgba(11,31,59,.35)}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,-40%),var(--accent-bg),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card h3{font-size:20px;margin-bottom:8px}
.card p{color:var(--muted);font-size:16px}
a.card{display:block;text-decoration:none}
.ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--accent-bg);border:1px solid var(--accent-line);color:var(--accent);margin-bottom:18px;flex:none}
.ico svg{width:22px;height:22px}
.ico.w{background:var(--red-bg);border-color:color-mix(in srgb,var(--red) 35%,transparent);color:var(--red)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:640px){.g4,.g2{grid-template-columns:1fr}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.on,.nav.open{background:var(--nav-bg);backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;height:68px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--disp);text-decoration:none;letter-spacing:-.02em;color:var(--text);margin-right:auto}
.logo i{width:32px;height:32px;border-radius:9px;background:var(--teal);display:grid;place-items:center;box-shadow:0 0 18px rgba(24,182,164,.6)}
.logo b{color:var(--accent)}
.links{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.links a{text-decoration:none;color:var(--muted);transition:color .2s}
.links a:hover,.links a[aria-current="page"]{color:var(--strong)}
.links .btn{min-height:42px;padding:0 18px;font-size:14.5px;color:var(--on-accent)}
.iconbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:var(--btn-g);color:var(--text);cursor:pointer;display:grid;place-items:center;flex:none;transition:border-color .2s,background .2s}
.iconbtn:hover{border-color:var(--accent-strong)}
.iconbtn svg{width:20px;height:20px}
.theme .sun{display:none}
html[data-theme="light"] .theme .sun{display:block}
html[data-theme="light"] .theme .moon{display:none}
.burger{display:none}
@media(max-width:1060px){
  .burger{display:grid}
  .links{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 22px;background:var(--menu-bg);border-bottom:1px solid var(--line);display:none}
  .nav.open .links{display:flex}
  .links a{padding:14px 2px;font-size:17px;border-bottom:1px solid var(--line)}
  .links .btn{margin-top:16px;min-height:52px;border:0}
}

/* hero (home): sempre scuro, è un video notturno */
.hero{min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;position:relative;isolation:isolate;overflow:hidden;background:#050d1c}
.hero .media{position:absolute;inset:0;z-index:-2;background:#040a16 url(../img/agency.webp) 70% 50%/cover no-repeat}
.hero video{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:0;transition:opacity .8s}
.hero video.on{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,13,28,.92) 0%,rgba(5,13,28,.6) 38%,rgba(5,13,28,0) 62%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;z-index:-1;background:linear-gradient(0deg,var(--page),transparent);pointer-events:none}
.hero .wrap{width:100%}
.hero h1{font-size:clamp(36px,5.3vw,70px);max-width:9.64em;margin-bottom:22px}
.hero .lead{color:#d2dcea;font-size:clamp(17px,1.5vw,19.5px);max-width:32em;text-wrap:pretty}
.hero .lead strong{color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.pills li{font-size:13.5px;color:#cfe;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(5,13,28,.5);backdrop-filter:blur(6px);display:flex;gap:8px;align-items:center}
.pills li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:820px){
  .hero{align-items:flex-end;padding:calc(68px + min(74vw,40svh)) 0 48px;min-height:0}
  .hero .media{inset:68px 0 auto 0;height:min(82vw,44svh);background-image:url(../img/agency-m.webp);background-position:74% 50%}
  .hero video{object-position:74% 50%}
  .hero::before{background:linear-gradient(0deg,#050d1c 0%,#050d1c calc(100% - 68px - min(82vw,44svh)),rgba(5,13,28,0) calc(100% - 68px - min(82vw,44svh) + 100px))}
  .hero::after{height:70px}
  .cta .btn{flex:1 1 100%}
}

/* page header (pagine interne) */
.phead{padding:clamp(120px,14vw,170px) 0 clamp(28px,4vw,48px);text-align:center;position:relative}
.phead h1{font-size:clamp(34px,5vw,60px);max-width:13em;margin:0 auto}
.phead p{color:var(--muted);font-size:clamp(17px,1.6vw,20px);max-width:41.6em;margin:18px auto 0;text-wrap:pretty}
.phead.left{text-align:left}.phead.left h1,.phead.left p{margin-left:0}

/* live demo */
.live{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1.15fr);align-items:stretch;gap:0}
.panel{border-radius:var(--r);border:1px solid var(--line-2);background:var(--panel);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.bar small{margin-left:auto;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.rec{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
#wave{width:100%;height:76px}
.chat{padding:6px 18px 20px;display:flex;flex-direction:column;gap:10px;min-height:268px}
.msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.msg.in{opacity:1;transform:none}
.msg.ai{background:var(--accent-bg);border:1px solid var(--accent-line);border-top-left-radius:5px}
.msg.cl{align-self:flex-end;background:var(--flat);border:1px solid var(--line);border-top-right-radius:5px}
.msg b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.msg.cl b{color:var(--muted)}
.flow{position:relative;display:grid;place-items:center}
.flow svg{width:64px;height:24px;overflow:visible}
.flow path{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:6 8;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
.lc{padding:20px}
.lc-h{display:flex;align-items:center;gap:12px}
.av{width:44px;height:44px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font-weight:700;display:grid;place-items:center;flex:none}
.lc-h small{display:block;color:var(--muted);font-size:13.5px}
.badge{margin-left:auto;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;background:var(--amber-bg);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);white-space:nowrap}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.f{padding:11px 13px;border-radius:13px;background:var(--flat);border:1px solid var(--line);opacity:.25;transition:opacity .5s,border-color .5s}
.f.in{opacity:1;border-color:var(--accent-line)}
.f small{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.f span{font-weight:600;font-size:15px}
.rings{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ring{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:var(--flat);border:1px solid var(--line)}
.ring svg{width:74px;height:74px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7;stroke:var(--track)}
.ring circle+circle{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:188.5;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.ring.b circle+circle{stroke:var(--blue)}
.ring .n{font:700 30px/1 var(--disp);font-variant-numeric:tabular-nums}
.ring .n sub{font:500 13px var(--sans);color:var(--muted);vertical-align:baseline}
.ring small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.note{color:var(--muted);font-size:13px;text-align:center;margin-top:18px}
@media(max-width:900px){
  .live{grid-template-columns:1fr}
  .flow{height:54px}.flow svg{transform:rotate(90deg)}
  .chat{min-height:300px}
}
@media(max-width:420px){.rings{grid-template-columns:1fr}}

/* scrub (sempre scuro) */
.scrub{height:400vh;background:#03070f}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,7,15,.9) 0%,rgba(3,7,15,.55) 36%,rgba(3,7,15,0) 66%),linear-gradient(0deg,rgba(3,7,15,.85),rgba(3,7,15,0) 30%),linear-gradient(180deg,rgba(3,7,15,.7),rgba(3,7,15,0) 22%)}
.stage .top{position:absolute;left:0;right:0;top:92px}
.stage .top h2{font-size:clamp(26px,3.4vw,42px)}
.stage .top p{color:#cdd8e6;margin-top:6px}
.beats{position:absolute;inset:0;pointer-events:none}
.beat{position:absolute;left:var(--pad);top:56%;width:min(500px,46vw);opacity:0;will-change:opacity,transform;padding:26px 28px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(14px)}
.beat .n{font:700 15px/1 var(--disp);color:var(--on-accent);background:var(--accent);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 22px rgba(69,230,210,.7)}
.beat h3{font-size:clamp(22px,2.5vw,30px);margin:16px 0 10px}
.beat p{color:var(--text-2);font-size:16.5px}
.rail{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;height:2px;background:rgba(255,255,255,.14)}
.rail i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);box-shadow:0 0 14px var(--teal)}
.loadnote{position:absolute;right:var(--pad);bottom:44px;font-size:12px;color:var(--muted);transition:opacity .4s}
@media(min-width:1260px){.beat{left:calc((100vw - var(--max))/2 + var(--pad))}}
@media(max-width:820px){
  .stage .shade{background:linear-gradient(0deg,rgba(3,7,15,.96) 0%,rgba(3,7,15,.8) 42%,rgba(3,7,15,0) 66%),linear-gradient(180deg,rgba(3,7,15,.85),rgba(3,7,15,0) 30%)}
  .beat{left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:58px;padding:20px}
  .beat p{font-size:15.5px}
}

/* channels */
.chan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.chan .lead{color:var(--muted);margin:16px 0 26px;font-size:18px}
.ticks{list-style:none;padding:0;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='black' stroke-width='1.6' opacity='.45'/%3E%3Cpath d='M6.5 11.4l3 3 6-6.3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='black' stroke-width='1.6' opacity='.45'/%3E%3Cpath d='M6.5 11.4l3 3 6-6.3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks li.no{color:var(--muted)}
.ticks li.no::before{background:var(--muted);opacity:.7;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 7l8 8M15 7l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 7l8 8M15 7l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.fine{color:var(--muted);font-size:13.5px;margin-top:18px}
.fine a,.tlink{color:var(--accent)}
.merge{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:24px}
.merge svg{width:100%;height:auto;overflow:visible}
.merge .ln{fill:none;stroke:var(--accent-line);stroke-width:2}
.merge .pk{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:26 400;animation:run 2.4s linear infinite}
.merge .pk.b{animation-delay:-1.2s}
@keyframes run{from{stroke-dashoffset:26}to{stroke-dashoffset:-400}}
.merge text{font-family:var(--sans);fill:var(--text)}
.merge .node{fill:var(--accent-bg);stroke:var(--accent-strong)}
.merge .out{fill:var(--page);stroke:var(--accent)}
.merge .trk{fill:var(--track)}.merge .va{fill:var(--accent)}.merge .vb{fill:var(--blue)}
.merge text.sm{fill:var(--muted)}
@media(max-width:900px){.chan{grid-template-columns:1fr}}

/* scores */
.score h3{font-size:26px;margin:10px 0 10px}
.score .k{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.score.b .k{color:var(--blue)}
.score h4{font-size:14px;margin:20px 0 12px;color:var(--text-2);font-weight:600}
.meter{height:8px;border-radius:8px;background:var(--track);overflow:hidden;margin-top:22px}
.meter i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--teal),var(--accent));transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.score.b .meter i{background:linear-gradient(90deg,#3d7dff,var(--blue))}
.score.b .ticks li::before{background:var(--blue)}

/* insights */
.ins{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
.tabs{display:grid;gap:12px}
.tab{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--flat);transition:border-color .25s,background .25s}
.tab:hover{border-color:var(--line-2)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tab[aria-selected="true"]{border-color:var(--accent-strong);background:var(--accent-bg);box-shadow:0 0 40px -18px var(--teal)}
.tab .n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:700 16px var(--disp);background:var(--flat);border:1px solid var(--line);color:var(--accent)}
.tab small{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--muted);font-weight:600}
.tab strong{font:600 18px/1.25 var(--disp)}
.tab em{display:block;font-style:normal;color:var(--muted);font-size:14px;margin-top:3px}
.pane{border-radius:var(--r);border:1px solid var(--line-2);background:var(--panel);padding:clamp(22px,3vw,34px);min-height:340px;box-shadow:var(--shadow)}
.pane[hidden]{display:none}
.pane h4{font:600 20px var(--disp);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.pane h4::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.pane p,.pane li{color:var(--text-2);font-size:16px}
.pane ul{padding-left:20px;display:grid;gap:10px;margin:0}
.pane .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.pane .chips li{font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--accent-bg);border:1px solid var(--accent-line);color:var(--accent)}
.pane h5{font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:18px 0 10px;color:var(--accent)}
.pane h5.warn{color:var(--amber)}
.pane mark{background:none;color:var(--strong);font-weight:600}
.pane.anim{animation:pane .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pane{from{opacity:0;transform:translateY(12px)}}
@media(max-width:900px){.ins{grid-template-columns:1fr}.tab em{display:none}}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:30px}
.plan.hot{border-color:var(--accent-strong);background:linear-gradient(180deg,var(--accent-bg),transparent),var(--surface);box-shadow:0 30px 90px -45px var(--teal)}
.plan .pop{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--teal);color:var(--on-accent);padding:5px 11px;border-radius:999px;margin-bottom:14px}
.plan .sub{color:var(--muted);font-size:15px;margin-top:2px}
.price{font:700 54px/1.1 var(--disp);letter-spacing:-.03em;margin:8px 0 4px}
.price small{font:500 16px var(--sans);color:var(--muted);letter-spacing:0}
.plan .ticks{margin:20px 0 28px;gap:11px;font-size:15.5px;color:var(--text-2)}
.plan .btn{margin-top:auto}
.plan .extra{color:var(--muted);font-size:13.5px;text-align:center;margin-top:12px}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* callout */
.tldr{border-radius:18px;border:1px solid var(--accent-line);border-left:4px solid var(--teal);background:var(--accent-bg);padding:20px 22px;color:var(--text-2)}
.tldr>p:first-child,.tldr .cap{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* faq */
.faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq details{border-radius:18px;border:1px solid var(--line);background:var(--flat);transition:border-color .25s,background .25s}
.faq details[open]{border-color:var(--accent-strong);background:var(--accent-bg)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font:600 18px/1.35 var(--disp);display:flex;justify-content:space-between;gap:16px;align-items:center;border-radius:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s;margin-top:-6px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:6px}
.faq .a{padding:0 22px 22px;color:var(--text-2);display:grid;gap:12px;font-size:16px}
.faq .a strong{color:var(--strong)}

/* form */
.formsec{background:radial-gradient(800px 420px at 50% 0%,var(--glow),transparent 70%)}
.formbox{max-width:680px;margin:0 auto;border-radius:26px;border:1px solid var(--line-2);background:var(--panel);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow)}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form .full{grid-column:1/-1}
label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--input);border:1px solid var(--line-2);border-radius:13px;padding:14px 15px;transition:border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
select option{background:var(--option);color:var(--text)}
textarea{resize:vertical;min-height:96px}
.err{grid-column:1/-1;color:var(--red);font-size:15px}
.ok{text-align:center;padding:20px 0}
.ok .ico{margin:0 auto 18px;width:64px;height:64px;border-radius:50%}
.ok .ico svg{width:30px;height:30px}
.ok p{color:var(--muted);margin-top:8px}
@media(max-width:600px){form{grid-template-columns:1fr}}

/* steps (pagine interne) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps .card{counter-increment:s}
.steps .card.num::after{content:counter(s);position:absolute;right:18px;top:10px;font:700 64px/1 var(--disp);color:var(--accent);opacity:.14}
@media(max-width:1000px){.steps,.steps.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.steps,.steps.three{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* voice widget slot */
.voice{text-align:center;padding:clamp(28px,4vw,44px);border-color:var(--accent-strong)}
.voice h2{font-size:clamp(26px,3.4vw,38px)}
.voice>p{color:var(--muted);margin-top:10px}
/* Il widget ElevenLabs è position:fixed e si ancora in basso a destra del suo contenitore:
   il transform fa da contenitore, così il pulsante resta centrato sotto la sfera e non finisce nell'angolo della scheda. */
#convai-slot{width:min(100%,320px);height:150px;margin:6px auto 0;position:relative;transform:translateZ(0)}
#convai-mobile-hint{display:none;color:var(--accent);font-weight:600;margin-top:14px}
.orb{width:110px;height:110px;border-radius:50%;margin:22px auto 0;position:relative;background:radial-gradient(circle at 35% 30%,#7ff3e4,var(--teal) 55%,#0b6f64);box-shadow:0 0 60px -6px var(--teal)}
.orb::before,.orb::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--accent-strong);animation:orb 2.6s ease-out infinite}
.orb::after{animation-delay:-1.3s}
@keyframes orb{from{transform:scale(.8);opacity:.9}to{transform:scale(1.5);opacity:0}}
.gdpr{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;margin-top:20px}
.gdpr svg{width:16px;height:16px;color:var(--accent)}

/* table */
.tablewrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:640px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font:600 12.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
td.code{font-weight:700;color:var(--accent)}
td.y{color:var(--accent);font-weight:700}td.n{color:var(--muted)}

/* creds */
.creds{display:inline-grid;grid-template-columns:auto auto;gap:6px 18px;padding:16px 20px;border-radius:14px;background:var(--flat);border:1px solid var(--line);text-align:left;margin:16px 0;font-size:15.5px}
.creds dt{color:var(--muted)}.creds dd{font-weight:700;font-family:ui-monospace,Menlo,monospace}

/* prose (privacy, termini, articoli) */
.prose{max-width:780px;margin:0 auto;color:var(--text-2);font-size:17.5px;line-height:1.75}
.prose.boxed{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:clamp(22px,4vw,48px)}
.prose h1{font-size:clamp(32px,4.6vw,50px);color:var(--text);margin-bottom:16px}
.prose h2{font-size:clamp(23px,2.6vw,30px);color:var(--text);margin:44px 0 14px;line-height:1.2}
.prose.boxed h2:first-child{margin-top:0}
.prose h3{font-size:21px;color:var(--text);margin:30px 0 10px;line-height:1.25}
.prose h4{font:600 18px var(--disp);color:var(--text);margin:24px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px;display:grid;gap:8px}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose strong,.prose b{color:var(--strong)}
.prose blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--teal);background:var(--flat);border-radius:0 14px 14px 0}
.prose img{border-radius:16px;margin:22px 0;height:auto}
.prose .crumbs{font-size:14px;color:var(--muted);margin-bottom:22px}
.prose .crumbs a{color:var(--muted);text-decoration:none}.prose .crumbs a:hover{color:var(--accent)}
.prose .byline{font-size:14.5px;color:var(--muted);margin-bottom:28px}
.prose .tldr{margin:0 0 30px}
.prose .tldr p{margin:0}
.prose .tldr p+p{margin-top:8px}
.prose section.after{margin-top:48px;padding-top:30px;border-top:1px solid var(--line)}
.prose section.after h2{margin-top:0}
.prose section.author{display:flex;gap:16px;align-items:flex-start}
.prose section.author .ico{margin:0}
.prose section.author p{margin:0;font-size:15.5px}
.prose section.author p:first-child{font-weight:700;color:var(--text);font-size:17px}
.prose section.cta-box{border:1px solid var(--accent-strong);border-radius:var(--r);background:var(--accent-bg);padding:clamp(24px,4vw,40px);text-align:center}
.prose section.cta-box p{color:var(--text-2)}
.prose section.cta-box a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:14px;font:600 16px/1 var(--sans);text-decoration:none;background:linear-gradient(180deg,#27d3bf,var(--teal));color:var(--on-accent);margin-top:6px}
.updated{color:var(--muted);font-size:14.5px;margin-top:12px}

/* blog index */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.post h2,.post h3{font-size:21px;line-height:1.25;margin-bottom:10px}
.post p{font-size:15.5px}
.post .more{display:inline-block;margin-top:14px;color:var(--accent);font-weight:600;font-size:14.5px}
.post time{display:block;font-size:13px;color:var(--muted);margin-bottom:10px;letter-spacing:.04em}
@media(max-width:760px){.posts{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:15px;color:var(--muted);background:var(--page-deep)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h4{font:600 15px var(--sans);color:var(--text);margin-bottom:14px}
footer ul{list-style:none;padding:0;display:grid;gap:9px}
footer a{text-decoration:none}footer a:hover{color:var(--accent)}
footer .logo{margin-bottom:14px}
.legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid var(--line);margin-top:40px;padding-top:24px;font-size:14px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .rec,.flow path,.merge .pk,.orb::before,.orb::after{animation:none}
}