/* funnext, sito di presentazione. Impostazione ispirata alle pagine prodotto di Miro (layout, ritmo, blocchi),
   colori e testi di funnext: colori e font dal Brand manual funnext 2.0 (navy #162344, viola #8A36C2, magenta #C02677, giallo #F2D44A, Helvetica Neue). Nessuna libreria. */
:root{
  --bg:#FBFAF7; --bg2:#F3F1EA; --ink:#14141B; --ink2:#14141B; --muted:#14141B; --line:#E6E2D8;
  --card:#fff; --giallo:#F2D44A; --giallo-chiaro:#FBF3CC; --navy:#162344; --navy2:#162344; --nero:#162344; --magenta:#C02677; --magenta-bg:#FBE8F2;
  --viola:#8A36C2; --viola-bg:#F1E6F9; --verde:#1F7A4D; --verde-bg:#E3F3EA; --blu:#2B5FB0; --blu-bg:#E4EDFA;
  --ambra:#8A6E00; --ambra-bg:#FFF1BD; --rosso:#B3261E; --rosso-bg:#FBE9E7;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:16px; --w:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}

/* barra annuncio */
.annuncio{background:var(--nero);color:#fff;font-size:14px;text-align:center;padding:9px 16px}
.annuncio a{text-decoration:none;display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.annuncio b{background:var(--giallo);color:var(--nero);border-radius:6px;padding:2px 9px;font-weight:600}
.annuncio .pill{background:var(--magenta);border-radius:999px;padding:2px 10px;font-size:12px;letter-spacing:.02em}

/* header */
header.top{position:sticky;top:10px;z-index:50;margin:10px auto 0;max-width:calc(var(--w) + 40px);padding:0 10px}
.bar{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 24px rgba(28,36,52,.06);display:flex;align-items:center;gap:10px;padding:8px 14px}
.logo{display:flex;align-items:center;margin-right:8px}
.logo img{height:40px;width:auto}
nav.main{display:flex;gap:2px;flex:1}
nav.main>ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
nav.main li{position:relative}
nav.main .t{font:inherit;font-size:14.5px;background:none;border:0;padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
nav.main .t:hover,nav.main li.open>.t{background:var(--bg2)}
nav.main .t svg{width:10px;height:10px;transition:transform .15s}
nav.main li.open>.t svg{transform:rotate(180deg)}
.menu{display:none;position:absolute;top:calc(100% + 10px);left:-10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(28,36,52,.14);padding:14px;min-width:300px;z-index:60}
li.open>.menu{display:block}
.menu .g{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 10px}
.menu a{display:block;text-decoration:none;padding:9px 10px;border-radius:8px;font-size:15px}
.menu a small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:1px}
.menu a:hover{background:var(--bg2)}
.dx{display:flex;gap:8px;align-items:center;margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;border-radius:9px;padding:11px 18px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translateY(-1px)}
.b-nero{background:var(--viola);color:#fff}
.b-nero:hover{background:#6F2A9C}
.b-giallo{background:var(--giallo);color:var(--nero)}
.b-giallo:hover{box-shadow:0 6px 18px rgba(255,213,0,.45)}
.b-bordo{background:#fff;color:var(--ink);border-color:var(--line)}
.b-bordo:hover{border-color:var(--ink)}
.b-sm{padding:8px 13px;font-size:14px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:42px;height:42px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px}

/* hero */
.hero{position:relative;text-align:center;padding:84px 0 40px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#D9D4C5 1.2px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at 50% 38%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 38%,#000 20%,transparent 72%);opacity:.85}
.hero .wrap{position:relative}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin-bottom:18px;letter-spacing:.01em}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.08;font-weight:400;letter-spacing:-.025em;margin:0 auto 18px;max-width:17em;text-wrap:balance}
h2{font-size:clamp(27px,3.6vw,38px);line-height:1.15;font-weight:400;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
h3{font-size:21px;line-height:1.25;font-weight:500;letter-spacing:-.01em;margin:0 0 8px}
.lead{font-size:clamp(17px,1.7vw,19.5px);color:var(--ink2);max-width:36em;margin:0 auto 26px;text-wrap:pretty}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.nota{font-size:14px;color:var(--muted);margin:0 auto;max-width:34em}
.gloss{font-size:14px;color:var(--muted);max-width:36em;margin:22px auto 0}
.gloss b{color:var(--ink2)}

/* cornice finestra per screenshot */
.finestra{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(28,36,52,.12);overflow:hidden}
.finestra .tb{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:#FAF9F5;align-items:center;font-size:12px;color:var(--muted)}
.finestra .tb i{width:10px;height:10px;border-radius:50%;background:#DDD8CB;display:block}
.finestra .tb span{margin-left:8px}
.finestra img{width:100%}
.hero .finestra{max-width:1000px;margin:46px auto 0;text-align:left}

section.blocco{padding:84px 0}
section.blocco.alt{background:var(--bg2)}
.riga{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center}
.riga.inv{grid-template-columns:1.25fr 1fr}
.riga.inv .tx{order:2}
.riga p{color:var(--ink2);margin:0 0 14px}
.riga ul{padding:0;margin:0 0 22px;list-style:none;display:grid;gap:10px}
.riga li{position:relative;padding-left:22px;color:var(--ink2)}
.riga li:before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--giallo);box-shadow:0 0 0 2px var(--navy)}
.centro{text-align:center}
.centro .lead{margin-bottom:0}

/* numeri */
.numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;text-align:center}
.numeri b{display:block;font-size:clamp(36px,5vw,54px);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.numeri span{color:var(--muted);font-size:14.5px;display:block;max-width:15em;margin:6px auto 0}

/* carosello */
.scroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 26px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.scroll>*{scroll-snap-align:start;flex:0 0 min(420px,84vw)}
.cardp{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;height:100%}
.cardp .im{background:var(--bg2);aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.cardp .im img{width:100%;height:100%;object-fit:cover;object-position:left top}
.cardp .co{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.cardp p{margin:0 0 14px;color:var(--ink2);font-size:15.5px}
.cardp .btn{align-self:flex-start;margin-top:auto}
.frecce{display:flex;gap:8px;justify-content:center;margin-top:6px}
.frecce button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;line-height:1}
.frecce button:hover{border-color:var(--ink)}

/* card generiche */
.griglia{display:grid;gap:20px}
.griglia>*,.riga>*{min-width:0}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.box p{margin:0;color:var(--ink2);font-size:15.5px}
.box .n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;align-items:center;justify-content:center;font-weight:600;font-size:14px;margin-bottom:14px}
a.box{text-decoration:none;display:block;transition:transform .15s,box-shadow .15s}
a.box:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,36,52,.09)}
a.box .piu{display:inline-block;margin-top:14px;font-weight:600;font-size:14.5px}
.tag{display:inline-block;font-size:12px;font-weight:600;border-radius:7px;padding:3px 9px;margin-bottom:12px}
.t-giallo{background:var(--ambra-bg);color:var(--ambra)}.t-viola{background:var(--viola-bg);color:var(--viola)}
.t-verde{background:var(--verde-bg);color:var(--verde)}.t-blu{background:var(--blu-bg);color:var(--blu)}.t-rosso{background:var(--rosso-bg);color:var(--rosso)}

/* sezione scura */
.scuro{background:var(--nero);color:#fff;border-radius:28px;margin:0 14px;padding:80px 0}
.scuro h2{color:#fff}.scuro .lead{color:#B9C0D0}
.scuro .box{background:#1E2D56;border-color:#2C3C6B;color:#fff}
.scuro .box p{color:#B9C0D0}
.scuro a.box:hover{box-shadow:none;border-color:var(--giallo)}
.scuro .piu{color:var(--giallo)}

/* flusso disegnato in css */
.flusso{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 2px 10px;margin-top:16px;scrollbar-width:thin}
.flusso .st{display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:132px}
.flusso .st small{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.flusso .ar{align-self:center;color:var(--muted);padding:0 5px;font-size:15px}
.chip{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:12px;font-weight:600;line-height:1.25;color:var(--ink)}
.scuro .chip{background:#1E2D56;border-color:#3A4B7D;color:#fff}
.chip.ob{background:var(--giallo);border-color:#D9B92E;color:var(--navy)}
.flusso .st.fin{justify-content:center;min-width:120px}

/* tabelle */
table.t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:15.5px}
table.t th,table.t td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{background:#FAF9F5;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
table.t tr:last-child td{border-bottom:0}
.tw{overflow-x:auto;border-radius:var(--r)}

/* faq */
details.q{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-bottom:10px}
details.q summary{cursor:pointer;font-weight:600;padding:17px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.q summary::-webkit-details-marker{display:none}
details.q summary:after{content:"+";font-size:22px;line-height:1;font-weight:400;color:var(--muted)}
details.q[open] summary:after{content:"−"}
details.q p{margin:0 0 18px;color:var(--ink2)}

/* testo lungo */
.prosa{max-width:720px;margin:0 auto}
.prosa p{color:var(--ink2);margin:0 0 16px}
.prosa h2{margin-top:34px;font-size:28px}
.prosa ul{color:var(--ink2);padding-left:20px}
.prosa li{margin-bottom:8px}
.cronaca{border-left:2px solid var(--line);margin:0 0 0 8px;padding:0 0 0 26px}
.cronaca .d{position:relative;margin-bottom:34px}
.cronaca .d:before{content:"";position:absolute;left:-34px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--giallo);border:2px solid var(--navy)}
.cronaca time{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.cronaca h3{margin:2px 0 6px}
.cronaca p,.cronaca ul{color:var(--ink2);margin:0 0 8px}
.avviso{background:var(--magenta-bg);border:1px solid #E3A3C6;border-radius:12px;padding:16px 20px;color:var(--ink);font-size:15.5px}

/* fascia finale */
.fascia{background:var(--navy);color:#fff;border-radius:28px;margin:0 14px;padding:72px 20px;text-align:center}
.fascia h2{color:#fff;max-width:18em;margin:0 auto 14px}
.fascia p{color:#B9C0D0;max-width:34em;margin:0 auto 26px}

/* footer */
footer.piede{background:var(--nero);color:#C9CFDD;border-radius:28px 28px 0 0;margin-top:70px;padding:64px 0 28px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
footer h4{color:#fff;font-size:14.5px;margin:0 0 14px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{text-decoration:none;color:#C9CFDD}
footer a:hover{color:#fff;text-decoration:underline}
footer .chi{border-top:1px solid #2C3C6B;margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#9AA3B8}
footer .chi p{margin:0;max-width:46em}

.breve{padding:64px 0 24px}
.crumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}

@media(max-width:1000px){
  .riga,.riga.inv{grid-template-columns:1fr;gap:30px}.riga.inv .tx{order:0}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .numeri{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .burger{display:block}
  nav.main,.dx .b-bordo{display:none}
  .bar.apri nav.main{display:block;position:absolute;left:10px;right:10px;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(28,36,52,.14);padding:10px;max-height:78vh;overflow:auto}
  .bar.apri nav.main>ul{flex-direction:column}
  .bar.apri .menu{position:static;box-shadow:none;border:0;padding:0 0 6px 10px;min-width:0}
  nav.main .t{width:100%;justify-content:space-between;padding:12px}
  .dx{margin-left:auto}.dx .btn{padding:9px 12px}
  .logo img{height:34px}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero{padding:56px 0 24px}
  section.blocco{padding:60px 0}
  .g3,.g2,.g4{grid-template-columns:1fr}
  footer .cols{grid-template-columns:repeat(2,1fr)}
  .scuro,.fascia{margin:0 8px;border-radius:22px}
  .dx .b-nero{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ===== Prima versione ripristinata (impostazione Miro, dettagli di funnext) + footer chiaro come Google Ads ===== */
h1{font-weight:400;letter-spacing:-.025em}
h2{font-weight:400}
h3{font-weight:500}
.btn{border-radius:9px}
.scuro .lead,.scuro .box p{color:#EEF1F8}
.scuro .flusso .st small{color:#D5DBE8}
.fascia p{color:#EEF1F8}
/* footer chiaro come Google Ads: riga di presentazione, quattro colonne, nota, barra finale */
footer.piede{background:#F8F9FA;color:#14141B;border-radius:0;margin-top:80px;padding:0;font-size:16px}
footer .pf1{padding:34px 0 24px;border-bottom:1px solid #DADCE0}
footer .pf1 p{margin:0;font-size:16.5px}
footer .cols{grid-template-columns:repeat(4,1fr);gap:28px;padding:38px 0 44px}
footer h4{color:#14141B;font-size:16.5px;margin:0 0 16px}
footer ul{gap:12px}
footer a{color:#14141B;text-decoration:none}
footer a:hover{color:#14141B;text-decoration:underline}
footer .pf2{border-top:1px solid #DADCE0;padding:26px 0;font-size:16px}
footer .pf2 p{margin:0}
footer .pf3{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:4px 0 38px}
footer .pf3 .lk{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
footer .pf3 img{height:36px;width:auto}
footer .pf3 .gd:before{content:"?";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#14141B;color:#fff;font-size:13px;font-weight:700;margin-right:7px}
@media(max-width:1000px){footer .cols{grid-template-columns:repeat(2,1fr)}}

/* ===== Scala +30% (2026-11-10): testi, pulsanti, menu, immagini e contenitori un terzo più grandi della prima versione ===== */
:root{--w:1456px}
body{font-size:22px}
.annuncio{font-size:17.5px;padding:11px 18px}
.annuncio .pill{font-size:15px}
.bar{padding:10px 18px;border-radius:18px}
.logo img{height:52px}
nav.main .t{font-size:18.5px;padding:11px 14px}
.menu{min-width:390px;padding:18px}
.menu .g{font-size:15px}
.menu a{font-size:19.5px;padding:11px 13px}
.menu a small{font-size:16.5px}
.btn{font-size:19.5px;padding:14px 26px}
.btn.b-sm{font-size:18.5px;padding:10px 18px}
.hero{padding:110px 0 52px}
.eyebrow{font-size:17px;padding:5px 16px;margin-bottom:24px}
h1{font-size:clamp(44px,7vw,76px);max-width:16em;margin-bottom:24px}
h2{font-size:clamp(35px,4.7vw,50px);margin-bottom:18px}
h3{font-size:27px;margin-bottom:10px}
.lead{font-size:clamp(22px,2.2vw,25px);margin-bottom:34px}
.nota,.gloss{font-size:18px}
.gloss{margin-top:28px}
.hero .finestra{max-width:1300px;margin-top:60px;border-radius:20px}
.finestra .tb{font-size:15px;padding:13px 18px}
.finestra .tb i{width:13px;height:13px}
section.blocco{padding:109px 0}
.riga{gap:72px}
.riga ul{gap:13px;margin-bottom:28px}
.riga li{padding-left:30px}
.riga li:before{width:11px;height:11px}
.numeri{gap:28px;margin-top:57px}
.numeri b{font-size:clamp(47px,6.5vw,70px)}
.numeri span{font-size:18.5px}
.scroll{gap:26px;padding:8px 20px 34px;margin:0 -20px}
.scroll>*{flex-basis:min(546px,84vw)}
.cardp .co{padding:26px 29px 32px;gap:8px}
.cardp p{font-size:20px;margin-bottom:18px}
.frecce button{width:50px;height:50px;font-size:23px}
.box{padding:34px}
.box p{font-size:20px}
.box .n{width:40px;height:40px;font-size:18px}
.tag{font-size:15.5px;padding:4px 12px}
.flusso .st{min-width:172px}
.flusso .st small{font-size:13px}
.flusso .ar{font-size:20px;padding:0 7px}
.chip{font-size:15.5px;padding:9px 13px;border-radius:12px}
table.t{font-size:20px}
table.t th{font-size:16.5px;padding:18px 24px}
table.t td{padding:18px 24px}
details.q{padding:0 26px;border-radius:16px}
details.q summary{font-size:22px;padding:22px 0}
details.q summary:after{font-size:30px}
details.q p{font-size:21px}
.prosa{max-width:940px}
.prosa h2{font-size:36px}
.cronaca time{font-size:17px}
.avviso{font-size:20px;padding:20px 26px}
.scuro{padding:104px 0}
.fascia{padding:94px 26px}
.fascia h2{max-width:17em}
footer.piede{font-size:20px;margin-top:100px}
footer .pf1{padding:44px 0 30px}
footer .pf1 p{font-size:21px}
footer .cols{gap:36px;padding:50px 0 58px}
footer h4{font-size:21px;margin-bottom:20px}
footer ul{gap:15px}
footer .pf2{padding:32px 0;font-size:20px}
footer .pf3 img{height:47px}
footer .pf3 .lk{gap:32px}
footer .pf3 .gd:before{width:25px;height:25px;font-size:16px}
/* con testi più grandi il menu a tendina cede il posto al pulsante già sotto i 1180 px */
@media(max-width:1180px){
  .burger{display:block;width:50px;height:50px}
  nav.main,.dx .b-bordo{display:none}
  .bar.apri nav.main{display:block;position:absolute;left:10px;right:10px;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(28,36,52,.14);padding:10px;max-height:78vh;overflow:auto}
  .bar.apri nav.main>ul{flex-direction:column}
  .bar.apri .menu{position:static;box-shadow:none;border:0;padding:0 0 6px 10px;min-width:0}
  nav.main .t{width:100%;justify-content:space-between;padding:14px}
  .dx{margin-left:auto}
}
@media(max-width:1000px){.riga,.riga.inv{gap:34px}}
@media(max-width:640px){
  body{font-size:18.5px}
  section.blocco{padding:70px 0}
  .btn{font-size:18px;padding:13px 22px}
  .logo img{height:44px}
  .dx .b-nero{display:none}
  h1{font-size:clamp(38px,11vw,52px)}
  footer .cols{grid-template-columns:repeat(2,1fr)}
  footer{font-size:17.5px}
  footer h4,footer .pf1 p{font-size:18.5px}
}

/* Titoli: sans geometrico sobrio, vicino alle forme del logotipo. Figtree (OFL, in assets/fonts) su tutti i dispositivi; se non carica, Avenir Next o Helvetica Neue */
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-600.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/figtree-700.woff2) format("woff2")}
:root{--font-titoli:"Figtree","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:var(--font-titoli)}
h1{font-weight:700}h2{font-weight:700}h3{font-weight:700}
/* Card vere dell'app, usate nella scena animata e nelle ali dell'hero */
.mc{position:absolute;background:#fff;border:1px solid #E2E8F0;border-left:4px solid var(--st,#64748B);border-radius:.9em;padding:.9em 1em;box-shadow:0 1px 2px rgba(22,35,68,.06);width:112px;height:116px;overflow:hidden;font-size:8.5px;text-align:left;color:#162344;transition:transform .35s,opacity .35s,border-color .3s}
.mc .stl{display:block;font-size:.95em;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--st);white-space:nowrap}
.mc b{display:block;font-size:1.25em;line-height:1.2;margin:.35em 0 .3em}
.mc p{margin:0;font-size:1em;line-height:1.35;color:#3B4660}
.mc .sc{display:inline-block;margin-top:.5em;font-size:.95em;font-weight:700;padding:.1em .6em;border-radius:99px;background:#E6F4EC;color:#1F7A4D}
.mc .agg{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:1em;font-weight:700;padding:.4em;background:var(--giallo);color:var(--navy);opacity:0}
.mc.ob{width:176px;height:92px;background:var(--giallo);border:1.5px solid #D1B63A;border-left:1.5px solid #D1B63A;font-size:9.5px}
.mc.ob .stl{color:#6B5900}.mc.ob .stl:before{content:"⚑ "}.mc.ob p{color:#4A3C00}
.mc.ghost{background:rgba(255,249,217,.85);border:1.5px dashed #D1B63A;border-left:1.5px dashed #D1B63A;box-shadow:none}
.mc.ghost .agg{opacity:1}
.mock{position:relative;width:100%;overflow:hidden;background-color:#F8FAFC;background-image:radial-gradient(#CBD5E1 1px,transparent 1px);background-size:14px 14px}
.m-in{position:relative;width:1000px;height:430px;transform-origin:0 0}
.m-svg{position:absolute;left:0;top:0;width:1000px;height:430px}
.m-svg .bt{font:700 10.5px var(--font)}.m-svg .bs{font:9px var(--font);fill:#3B4660}
.m-svg .a-s{fill:none;stroke:#8A36C2;stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .55s ease,opacity .2s}
.m-svg .a-g{fill:none;stroke:#D1B63A;stroke-width:1.5;stroke-dasharray:5 5;transition:opacity .3s}
.m-bar{position:absolute;left:12px;top:10px;display:flex;gap:7px;font-size:10px}
.pl{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;background:#fff;border:1px solid #E2E8F0;color:#162344;font-weight:500}
.pl i{width:7px;height:7px;border-radius:50%;display:block}.pl em{font-style:normal;font-weight:700;background:#F1F5F9;border-radius:99px;padding:0 5px}
.pl.ob{background:var(--giallo);border-color:#D1B63A;font-weight:700}
.m-cur{position:absolute;left:0;top:0;z-index:5;transition:transform 1s cubic-bezier(.45,0,.2,1);pointer-events:none}
.m-clic{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #8A36C2;opacity:0;pointer-events:none}
.m-clic.on{animation:clic .5s ease-out}
@keyframes clic{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}}
.mock.sfuma .m-in{opacity:0;transition:opacity .5s}
.solo-mobile{display:none}
@media(max-width:700px){.hero .mock{display:none}.solo-mobile{display:block}}
/* Ali dell'hero: salgono ai lati del titolo come una conca */
.ali,.w-arco{display:none}
@media(min-width:1360px){
  .ali{display:block;position:absolute;left:0;right:0;top:0;height:640px;pointer-events:none}
  .w-arco{display:block;position:absolute}
  .mc.w{width:214px;height:auto;min-height:0;font-size:13px;padding:.8em 1em;animation:sali 1s cubic-bezier(.2,.7,.2,1) both,fluttua 7s ease-in-out 1s infinite}
  .mc.w .sc{display:inline-block}
  .ali .mc:nth-of-type(2){animation-delay:.15s,1.2s}.ali .mc:nth-of-type(3){animation-delay:.3s,1.4s}.ali .mc:nth-of-type(4){animation-delay:.45s,1.1s}
  @keyframes sali{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
  @keyframes fluttua{50%{transform:translateY(-7px)}}
}
@media(prefers-reduced-motion:reduce){.mc.w{animation:none!important}}

/* Pannello delle proposte (home, secondo blocco) */
.mc.g1{width:158px;height:140px;font-size:12px;border-color:var(--viola);box-shadow:0 0 0 2px var(--viola),0 4px 12px rgba(22,35,68,.12)}
.mc.g2{width:216px;height:104px;font-size:12px}
.mc.g2 .sc{position:absolute;right:12px;top:10px;margin:0}

/* Numeri della home: più vicini tra loro */
.numeri{max-width:880px;margin-left:auto;margin-right:auto;gap:14px!important}
.numeri span{max-width:12em}

/* Etichetta B2B / B2C sulle schede della home */
.tipo{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--navy);background:var(--giallo);border-radius:999px;padding:2px 11px;margin-bottom:12px}
.scuro .lead.sotto{margin-top:0}

.scuro .centro .lead{line-height:1.6;margin-bottom:14px}

/* Sezioni più compatte (aiuto per iniziare, fascia finale) */
section.blocco.compatto{padding:48px 0}
.fascia{padding:52px 20px}
/* Obiettivi: quindici schede raggruppate per fase */
.ob-griglia{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:start}
.ob-g{background:#fff;border:1px solid var(--line);border-top:5px solid var(--st);border-radius:16px;padding:16px 14px;display:grid;gap:12px}
.ob-t{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--st);font-size:17px}
.ob-t span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--st);color:#fff;font-size:14px}
.ob-l{display:grid;gap:10px}
.ob-c{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:12px 12px}
.ob-c h3{font-size:16px;margin:0 0 8px;line-height:1.25}
.ob-c p{margin:0;font-size:14.5px;line-height:1.35;background:var(--giallo-chiaro);border-radius:8px;padding:8px 10px}
.ob-c small{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px}
@media(max-width:1100px){.ob-griglia{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ob-griglia{grid-template-columns:1fr}}
.elenco{padding:0 0 0 20px;margin:12px 0 0;display:grid;gap:8px}
/* Footer: frase del progetto al posto del logo */
footer .pf3 .prog{margin:0;font-weight:500}
/* Moduli: contatti e feedback */
.trappola{position:absolute;left:-9999px;height:0;overflow:hidden}
.modulo{display:grid;gap:14px;max-width:560px}
.modulo label{display:grid;gap:6px;font-size:16px;font-weight:600}
.modulo input[type=text],.modulo input[type=email],.modulo textarea,.fb-form input[type=email],.fb-form textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid #CFD4DB;border-radius:10px;background:#fff;color:var(--ink)}
.modulo textarea{min-height:150px;resize:vertical}
.modulo .consenso{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:400;line-height:1.45}
.modulo .consenso input{margin-top:3px;width:18px;height:18px;flex:none}
.modulo button,.fb-form button{justify-self:start;cursor:pointer;border:0}
.esito{min-height:1.4em;margin:0;font-size:15.5px}
.esito.ok{color:var(--verde)}.esito.errore{color:var(--rosso)}
.form-box{max-width:720px;margin:0 auto}
.form-box h2{margin:0 0 6px}.form-box .sotto{margin:0 0 18px}
.fb-form{display:grid;gap:10px}
.fb-form label{font-weight:600}.fb-form label span{font-weight:400}
.fb-conta{text-align:right;font-size:13px}
.fb-pie{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fb-nota{font-size:14px}
.box.vuoto{max-width:720px;margin:0 auto;text-align:center}
.box time{display:block;font-size:13px;margin-bottom:6px}

/* Menu: ponte invisibile tra il pulsante e il sottomenu, così il puntatore non esce dall'area e il menu non sparisce */
.menu:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
/* Footer chiaro; solo la riga in fondo (frase del progetto, link, copyright) è blu notte con testo bianco */
footer.piede .barra{background:var(--navy);margin-top:0}
footer.piede .barra,footer.piede .barra a,footer.piede .barra a:hover,footer.piede .barra p,footer.piede .barra span{color:#fff}
footer.piede .barra .pf3{padding:22px 0}
footer .pf3 .gd:before{background:#fff;color:var(--navy)}