/* ============================================================
   TGM Gestionale · supplemento alla site.css
   Solo l'apertura "scura e animata" dell'hero, nell'idioma TGM:
   Notte TGM + griglia retrowave in deriva + bagliore che respira.
   Niente componenti estranei al brand: tutto il resto sta in site.css.
   ============================================================ */

/* Ken Burns lento sulla foto hero: lo zoom converge verso la pila di giochi */
.hero.is-anim .hero-bg img{
  animation:tgmHeroZoom 26s ease-in-out infinite alternate;
  transform-origin:42% 58%;
}

/* Ancore non coperte dalla nav sticky (scoped a questa pagina) */
:target{scroll-margin-top:calc(var(--nav-h) + 16px);}
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px);}

/* Nessuno scroll orizzontale, soprattutto da mobile */
html{overflow-x:hidden;}
body{overflow-x:hidden;}
/* iOS Safari: clip è più rigido di hidden contro il pan laterale */
@supports (overflow:clip){html,body{overflow-x:clip;}}
/* iOS/WebKit: perché l'overflow-x su body venga rispettato serve il contesto */
body{position:relative;}
/* iOS Safari: niente auto-ingrandimento del testo, che allarga gli elementi
   e crea lo scroll laterale (menu fisso "tagliato" a destra) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* nessun media o embed può allargare la pagina */
img,svg,video{max-width:100%;}
.schema-svg{max-width:none;}

/* Mobile: più aria ai lati, il testo non sta mai a filo dello schermo */
@media (max-width:560px){
  .hero-inner{padding-left:28px;padding-right:28px;}
  .main .section{padding-left:28px;padding-right:28px;}
  .section-break-inner{padding-left:28px;padding-right:28px;}
  .cta-block-inner{padding-left:28px;padding-right:28px;}
  .footer-inner,.footer .copy{padding-left:28px;padding-right:28px;}
}

/* Focus visibile su qualsiasi fondo, anche scuro (override del viola globale) */
:focus-visible{outline:3px solid #fff;outline-offset:2px;
  box-shadow:0 0 0 6px rgba(161,0,255,.85);border-radius:6px;}

/* Layer effetti hero: griglia blueprint + bagliore. Sta tra foto e tint. */
.hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hero-fx::before{
  content:"";position:absolute;inset:-40% -10% -8%;
  background-image:
    linear-gradient(rgba(161,0,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(161,0,255,.18) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 82% at 16% 100%,#000 10%,transparent 72%);
          mask-image:radial-gradient(120% 82% at 16% 100%,#000 10%,transparent 72%);
  animation:tgmGridDrift 16s linear infinite;
}
.hero-fx::after{
  content:"";position:absolute;width:58%;height:130%;left:40%;top:-34%;
  background:radial-gradient(closest-side,rgba(200,71,255,.30),transparent 72%);
  filter:blur(22px);
  animation:tgmGlow 9s ease-in-out infinite alternate;
}
@keyframes tgmHeroZoom{from{transform:scale(1);}to{transform:scale(1.08);}}
@keyframes tgmGridDrift{from{background-position:0 0;}to{background-position:0 46px;}}
@keyframes tgmGlow{
  from{opacity:.45;transform:translateY(0) scale(1);}
  to{opacity:.9;transform:translateY(-16px) scale(1.08);}
}

/* La barra flottante ha la sua fascia in cima all'hero: il contenuto non le passa
   mai sotto (in apertura "occupa il suo spazio"), poi la barra fixed segue lo scroll. */
.hero{padding-top:104px;}
@media (max-width:560px){.hero{padding-top:88px;}}

/* CTA secondaria leggibile sull'hero scuro */
.hero .cta-row{margin-top:30px;}
.hero .cta.ghost{color:#fff;border-color:#fff;}
.hero .cta.ghost:hover{background:#fff;color:var(--notte);}

/* ============================================================
   HEADER · barra flottante centrata, scroll-aware (idioma TGM)
   Struttura: logo a sinistra, link al centro, due CTA a destra,
   drawer su mobile. Vetro Notte TGM, primario lime, niente dipendenze.
   ============================================================ */
.hdr{position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:1000;width:calc(100% - 28px);max-width:1000px;}
.hdr-bar{display:flex;align-items:center;gap:14px;
  background:rgba(19,5,40,.74);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.10);border-radius:999px;
  padding:9px 10px 9px 18px;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease,border-color .35s ease;}
.hdr.scrolled .hdr-bar{background:rgba(19,5,40,.9);border-color:rgba(255,255,255,.15);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.82);padding-top:7px;padding-bottom:7px;}

/* tre fasce: brand e cta uguali (flex:1) così i link cadono al centro geometrico */
.hdr-brand{display:flex;align-items:center;gap:10px;flex:1 1 0;text-decoration:none;}
.hdr-brand img{height:29px;width:auto;transition:transform .3s ease;}
.hdr-brand:hover{text-decoration:none;}
.hdr-brand:hover img{transform:translateY(-1px) scale(1.06);}
.hdr-brand span{font-family:var(--font-text);font-weight:700;font-size:15px;color:#fff;
  letter-spacing:.01em;white-space:nowrap;}
.hdr-brand span b{font-weight:500;color:rgba(255,255,255,.82);}

.hdr-nav{display:flex;gap:2px;margin:0;flex:none;align-items:center;}

/* Tendina "Funzioni" nella barra desktop: si apre al passaggio o al focus */
.hdr-dd{position:relative;}
.hdr-dd .caret{font-size:10px;margin-left:2px;opacity:.75;}
.hdr-dd-panel{position:absolute;top:calc(100% + 12px);left:0;min-width:240px;
  display:none;flex-direction:column;gap:2px;
  background:#17082f;border:1px solid rgba(255,255,255,.13);border-radius:16px;
  padding:10px;box-shadow:0 24px 60px -20px rgba(0,0,0,.85);}
/* ponte invisibile: il puntatore non "cade" nel vuoto tra barra e tendina */
.hdr-dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.hdr-dd:hover .hdr-dd-panel,.hdr-dd:focus-within .hdr-dd-panel{display:flex;}
.hdr-dd-panel a{display:block;height:auto;font-family:var(--font-text);font-weight:600;
  font-size:14px;letter-spacing:.01em;text-transform:none;color:rgba(255,255,255,.9);
  padding:10px 13px;border-radius:11px;}
.hdr-dd-panel a:hover{background:rgba(255,255,255,.08);color:#fff;}
.hdr-dd-panel a.active{background:rgba(161,0,255,.32);color:#fff;}

/* Accordion "Funzioni" nel drawer mobile */
.dw-acc{border-radius:12px;overflow:hidden;}
.dw-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:var(--font-text);font-weight:600;font-size:15px;color:#fff;
  padding:13px 14px;border-radius:12px;}
.dw-acc summary::-webkit-details-marker{display:none;}
.dw-acc summary:hover{background:rgba(255,255,255,.07);}
.dw-acc .caret{font-size:11px;opacity:.75;transition:transform .2s ease;}
.dw-acc[open] .caret{transform:rotate(180deg);}
.dw-acc-panel{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px 14px;}
.dw-acc-panel a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.88);
  padding:11px 14px;border-radius:10px;}
.dw-acc-panel a:hover{background:rgba(255,255,255,.07);color:#fff;}
.hdr-nav a{display:inline-flex;align-items:center;height:36px;
  font-family:var(--font-text);font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.86);
  padding:0 13px;border-radius:999px;text-decoration:none;
  transition:color .2s,background .2s;}
.hdr-nav a:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none;}
.hdr-nav a.active{color:#fff;background:rgba(161,0,255,.45);}

.hdr-cta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 0;}
/* bottoni e wordmark della barra in Jost: più leggibili (regola manuale: etichette in Jost) */
.hbtn{display:inline-flex;align-items:center;height:36px;
  font-family:var(--font-text);font-weight:700;font-size:13.5px;letter-spacing:.01em;
  padding:0 17px;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:transform .25s ease,background .2s,box-shadow .25s,color .2s,border-color .2s;}
.hbtn:hover{text-decoration:none;transform:translateY(-1px);}
.hbtn.ghost{color:#fff;border:1px solid rgba(255,255,255,.32);}
.hbtn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;}
.hbtn.primary{background:var(--lime);color:var(--notte);box-shadow:0 8px 22px -10px rgba(72,242,54,.8);}
.hbtn.primary:hover{box-shadow:0 12px 30px -10px rgba(72,242,54,.95);color:var(--notte);}
.hdr.scrolled .hbtn.primary{box-shadow:0 6px 16px -10px rgba(72,242,54,.55);}

/* hamburger: area tattile generosa (48px+), comoda anche con dita grandi */
.hdr-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:14px;min-width:52px;min-height:52px;flex:none;}
.hdr-toggle svg{width:30px;height:30px;display:block;}

/* drawer mobile: mai più alto dello schermo, scorre al suo interno */
.hdr-drawer{display:none;flex-direction:column;gap:2px;margin-top:8px;
  background:#17082f;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:12px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
.hdr.open .hdr-drawer{display:flex;animation:hdrIn .22s ease;}
.hdr-drawer a{font-family:var(--font-text);font-weight:600;font-size:15px;color:#fff;
  padding:13px 14px;border-radius:12px;text-decoration:none;}
.hdr-drawer a:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff;}
/* nel drawer niente evidenziazione della sezione attiva: le voci sono ancore,
   l'evidenza serve solo nella barra desktop */
.hdr-drawer a.active{color:#fff;background:transparent;}
.hdr-drawer .hbtn.primary.block{margin-top:6px;text-align:center;padding:14px;font-size:14px;}
@keyframes hdrIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

.hdr-backdrop{position:fixed;inset:0;z-index:999;background:rgba(8,2,18,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}

@media (max-width:880px){
  .hdr-nav,.hdr-cta{display:none;}
  .hdr-toggle{display:block;}
}
@media (prefers-reduced-motion:reduce){
  .hdr-bar,.hbtn,.hdr-brand img{transition:none!important;}
  .hdr.open .hdr-drawer{animation:none!important;}
}

/* Riga pilastro: testo e immagine centrati verticalmente */
.duo{align-items:center;}
.duo .figure{margin:0;}
/* le illustrazioni dei pilastri hanno già fondo bianco: ombra più tenue, niente alone */
.duo .figure.hero img{box-shadow:0 12px 30px rgba(19,5,40,.09);border-color:#ece7f4;}

/* Lista beneficio con spunta lime (accento grafico, non testo) */
.ticklist{list-style:none;margin:18px 0 0;padding:0;max-width:none;}
.ticklist li{position:relative;padding:9px 0 9px 30px;border-top:1px solid var(--linee);
  font-size:15.5px;color:#2a2230;margin:0;}
.ticklist li:first-child{border-top:0;}
.ticklist li::before{content:"";position:absolute;left:0;top:13px;width:15px;height:15px;
  border-radius:4px;background:var(--lime);box-shadow:0 0 0 4px rgba(72,242,54,.16);}

@media (max-width:880px){
  .duo .figure{margin-top:8px;}
}
@media (prefers-reduced-motion:reduce){
  .hero.is-anim .hero-bg img,.hero-fx::before,.hero-fx::after{animation:none!important;}
}

/* ============================================================
   FORM PREVENTIVO · card bianca riusabile (apertura + chiusura)
   ============================================================ */
.quote-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
@media (max-width:880px){.quote-split{grid-template-columns:1fr;gap:26px;}}

.pform-card{background:#fff;border:1px solid var(--linee);border-radius:18px;
  padding:30px 30px 26px;box-shadow:0 24px 60px -30px rgba(19,5,40,.45);}
.pform-card .pf-title{font-family:var(--font);font-weight:800;font-size:20px;
  letter-spacing:.01em;color:var(--nero);margin:0 0 4px;}
.pform-card .pf-sub{font-size:14px;color:var(--grigio);margin:0 0 18px;}

.pform{display:flex;flex-direction:column;gap:14px;}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:480px){.pf-row{grid-template-columns:1fr;}}
.pf-field{display:flex;flex-direction:column;gap:6px;}
.pf-field span{font-family:var(--font);font-weight:700;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--viola-deep);}
.pf-field input{font-family:var(--font-text);font-size:15.5px;color:var(--nero);
  background:#fff;border:1px solid #dcd3ea;border-radius:10px;padding:12px 13px;
  transition:border-color .18s,box-shadow .18s;width:100%;}
.pf-field input::placeholder{color:#a89fbb;}
.pf-field input:focus{outline:none;border-color:var(--viola);
  box-shadow:0 0 0 3px rgba(161,0,255,.14);}
.pf-field input:user-invalid{border-color:#CC2B2B;}

/* honeypot: nascosto a utenti e screen reader, visibile ai bot */
.pf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}

.pf-consent{display:flex;gap:11px;align-items:flex-start;margin-top:2px;
  font-size:13.5px;line-height:1.45;color:#3a3148;}
.pf-consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--viola);}
.pf-consent a{color:var(--viola);text-decoration:underline;}

.pf-submit{width:100%;justify-content:center;margin-top:4px;}
.pf-status{font-family:var(--font-text);font-size:14px;margin:2px 0 0;min-height:1px;}
.pf-status.ok{color:#15760C;font-weight:600;}
.pf-status.err{color:#CC2B2B;font-weight:600;}

/* form di chiusura: card bianca dentro il blocco scuro .cta-block */
.cta-block .pform-card{box-shadow:0 30px 70px -28px rgba(0,0,0,.6);}
.cta-block .quote-end-tx h2{color:#fff;}
.cta-block .quote-end-tx p{color:#d6cdec;max-width:42ch;}

/* ============================================================
   MULTICANALE · chip dei canali di vendita
   ============================================================ */
.chan-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 4px;}
.chan{font-family:var(--font);font-weight:800;font-size:13px;letter-spacing:.01em;
  color:var(--viola-deep);background:#fff;border:1.5px solid #e4d9f3;
  padding:9px 16px;border-radius:999px;white-space:nowrap;}
.chan.muted{color:var(--grigio);border-style:dashed;border-color:var(--linee);font-weight:700;}

/* ============================================================
   PREZZI · piani (stile pricing recreato in brand TGM)
   ============================================================ */
.setup-note{display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;
  font-family:var(--font-text);font-size:14px;color:#3a3148;
  background:var(--linee-soft);border:1px solid #e4d9f3;border-radius:999px;padding:9px 18px;}
.setup-note b{color:var(--viola-deep);font-family:var(--font);font-weight:800;}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;align-items:stretch;}
@media (max-width:920px){.price-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}}
.price-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linee);
  border-radius:18px;padding:30px 28px;position:relative;
  transition:border-color .2s,box-shadow .2s,transform .2s;}
.price-card:hover{border-color:#dcd2ec;box-shadow:0 18px 44px rgba(19,5,40,.08);transform:translateY(-3px);}
.price-card.featured{border:2px solid var(--viola);box-shadow:0 22px 54px -22px rgba(161,0,255,.45);}
.price-tag{position:absolute;top:-13px;left:28px;background:var(--viola);color:#fff;
  font-family:var(--font);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;}
.price-name{font-family:var(--font);font-weight:900;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--viola);margin:0 0 10px;}
.price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;}
.price-amount .num{font-family:var(--font);font-weight:900;font-size:46px;line-height:1;color:var(--nero);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.price-amount .per{font-family:var(--font-text);font-size:15px;color:var(--grigio);}
.price-desc{font-size:14.5px;color:#3a3148;margin:8px 0 18px;min-height:66px;}
.price-feats{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1;}
.price-feats li{position:relative;padding-left:28px;font-size:14.5px;color:#2a2230;line-height:1.4;}
.price-feats li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;
  background:var(--lime);box-shadow:0 0 0 3px rgba(72,242,54,.16);}
.price-feats li.head{padding-left:0;font-family:var(--font);font-weight:800;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--grigio);margin-top:2px;}
.price-feats li.head::before{display:none;}
.price-card .cta{width:100%;justify-content:center;margin-top:auto;}

/* ============================================================
   SCALA TIPOGRAFICA PIÙ COMPATTA (scoped a questa landing)
   Override su site.css: font ridotti, il resto del sito non cambia.
   ============================================================ */
body{font-size:16px;}
.hero h1{font-size:clamp(32px,5.2vw,60px);}
.hero .payoff{font-size:clamp(15px,1.25vw,17px);}
.hero .meta{font-size:11.5px;}
.main h2,.main h2.title-big{font-size:clamp(24px,3vw,36px);}
.main h3{font-size:clamp(17px,1.7vw,20px);}
.lead{font-size:clamp(16px,1.35vw,18px);}
.section-break h2{font-size:clamp(28px,3.8vw,48px);}
.section-break .lead{font-size:clamp(14px,1vw,16px);}
.cta-block h2{font-size:clamp(26px,3vw,36px);}
.acc-trigger .tt{font-size:15.5px;}
.kicker{font-size:11.5px;}

/* Placeholder grigio: le immagini le farà il grafico */
.imgph{display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;aspect-ratio:16/9;border-radius:14px;
  background:#ECEAF2;border:1px dashed #cfc6e0;color:#7d728f;
  font-family:var(--font);font-weight:800;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:16px;}

/* Risposte FAQ a tutta larghezza (override della misura di lettura globale) */
.acc-panel p,.acc-panel li{max-width:none;}

/* Badge sconto in percentuale accanto ai prezzi barrati */
.pe-off{font-family:var(--font);font-weight:800;font-size:12px;letter-spacing:.04em;
  color:#fff;background:var(--viola);border-radius:999px;padding:4px 10px;
  align-self:center;white-space:nowrap;}

/* Blocco legale nel footer */
.footer .copy .legal{display:flex;flex-direction:column;gap:3px;}
.footer .copy .legal span{color:#cfc6e0;font-size:12.5px;line-height:1.5;}
.footer .copy .legal span:first-child{color:#fff;}

/* FAQ accordion: niente marker nativo del <summary> (Safari/Firefox) */
.acc-trigger{list-style:none;}
.acc-trigger::-webkit-details-marker{display:none;}
.acc summary::marker{content:"";}

/* ============================================================
   SUPPLEMENTO REVISIONE COMMERCIALE (early stage)
   Componenti aggiunti: claim velocità, banda numeri, feature grid,
   pill "in arrivo", prezzo early stage con listino barrato.
   Restano nell'idioma TGM: palette, Heading Now sui numeri, lime d'accento.
   ============================================================ */

/* CTA primaria dell'hero: fondo lime come header e .cta-block (una sola firma
   cromatica per l'azione su fondo scuro, come da manuale bottoni su Notte TGM) */
.hero .cta:not(.ghost){background:var(--lime);color:var(--notte);
  box-shadow:0 10px 30px -12px rgba(72,242,54,.7);}
.hero .cta:not(.ghost):hover{color:var(--notte);box-shadow:0 14px 36px -12px rgba(72,242,54,.9);}

/* Claim di velocità nell'hero: riga forte sotto il payoff */
.hero .speed{display:inline-flex;align-items:flex-start;gap:11px;margin-top:20px;
  background:rgba(72,242,54,.12);border:1px solid rgba(72,242,54,.4);
  border-radius:14px;padding:11px 17px;font-family:var(--font-text);
  font-size:14px;line-height:1.4;color:#eafff0;max-width:100%;}
.hero .speed b{font-family:var(--font);font-weight:800;color:var(--lime);}
.hero .speed .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px rgba(72,242,54,.22);flex:none;margin-top:5px;}

/* Banda numeri: le prove commerciali in cifre (riusa .stat) */
.numbers{margin-top:30px;}
.numbers .stat{text-align:left;}
.numbers .stat .big{color:var(--viola);}
/* le didascalie sono frasi, non etichette: niente maiuscolo tracciato di .stat .lbl */
.numbers .stat .lbl{text-transform:none;letter-spacing:0;font-family:var(--font-text);
  font-weight:500;font-size:14px;color:var(--grigio);margin-bottom:0;}
/* su tablet 2x2, mai una colonna alta e sfilacciata */
@media (max-width:880px){.numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}}
@media (max-width:520px){.numbers{grid-template-columns:1fr;}}

/* Griglia funzioni secondarie: card alte con icona (riusa .card) */
.feat-lead{max-width:64ch;}

/* Pill "in arrivo" per la prossima feature */
.soon-card{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  background:linear-gradient(180deg,#fbf8ff,#f4eeff);border:1px solid #e4d9f3;
  border-radius:18px;padding:28px 30px;margin-top:26px;}
@media (max-width:640px){.soon-card{grid-template-columns:1fr;gap:14px;}}
.soon-badge{display:inline-flex;align-items:center;gap:8px;align-self:start;
  font-family:var(--font);font-weight:800;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--viola);
  padding:7px 14px;border-radius:999px;white-space:nowrap;}
.soon-card h3{margin:0 0 6px;}
.soon-card p{margin:0;color:#3a3148;font-size:15.5px;}

/* Prezzo early stage: offerta unica, listino barrato */
.price-single{max-width:640px;margin:34px auto 0;}
.price-early{display:flex;flex-direction:column;gap:12px;margin:6px 0 4px;
  padding:20px 22px;background:var(--linee-soft);border:1px solid #e4d9f3;border-radius:14px;}
.pe-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pe-lbl{font-family:var(--font);font-weight:800;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio);}
.pe-vals{display:flex;align-items:baseline;gap:10px;}
.pe-was{font-family:var(--font-text);font-size:17px;color:var(--grigio);
  text-decoration:line-through;text-decoration-color:#c9bfe0;}
.pe-now{font-family:var(--font);font-weight:900;font-size:28px;line-height:1;
  color:var(--nero);font-variant-numeric:tabular-nums;}
/* il canone ricorrente è il numero-eroe: gerarchia sul dato che pesa nel tempo */
.pe-line.lead .pe-now{font-size:42px;}
.pe-per{font-family:var(--font-text);font-size:14px;color:var(--grigio);}
.price-save{display:inline-flex;align-items:flex-start;gap:8px;margin-top:2px;
  font-family:var(--font-text);font-size:13.5px;line-height:1.4;color:var(--viola-deep);}
.price-save b{font-family:var(--font);font-weight:800;color:var(--viola);}

/* ============================================================
   MOCKUP UI · racconti dei flussi ricostruiti in HTML/CSS
   Pannelli "interfaccia" nell'idioma TGM (bianco, viola/lime d'accento),
   al posto dei placeholder. Nessuna immagine esterna.
   ============================================================ */
.mock{width:100%;background:#fff;border:1px solid var(--linee);border-radius:16px;
  box-shadow:0 26px 64px -34px rgba(19,5,40,.5);padding:16px 16px 18px;overflow:hidden;}
.mock-top{display:flex;align-items:center;gap:6px;padding-bottom:11px;
  border-bottom:1px solid var(--linee);margin-bottom:14px;}
.mock-top .d{width:9px;height:9px;border-radius:50%;background:#e2daf0;flex:none;}
.mock-top .t{margin-left:8px;font-family:var(--font);font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grigio);}
.mock-top .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-text);font-size:11px;font-weight:600;color:#15760C;}
.mock-top .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#48F236;
  box-shadow:0 0 0 3px rgba(72,242,54,.22);}

/* riga gioco riconosciuto */
.mk-game{display:flex;align-items:center;gap:11px;padding:10px;border-radius:11px;
  background:var(--linee-soft);border:1px solid #ece6f6;}
.mk-game+.mk-game{margin-top:9px;}
.mk-cover{width:34px;height:44px;border-radius:5px;flex:none;
  background:linear-gradient(150deg,#9C00FC,#48F236);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
/* copertine reali nel mockup: l'immagine riempie il riquadro */
img.mk-cover{object-fit:cover;box-shadow:0 3px 10px -2px rgba(19,5,40,.35);background:#fff;}
.mk-game .info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mk-game .info b{font-family:var(--font-text);font-weight:700;font-size:14px;color:var(--nero);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-game .info span{font-family:var(--font-text);font-size:12.5px;color:var(--grigio);}
.mk-game .ok{margin-left:auto;width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--lime);display:grid;place-items:center;color:var(--notte);font-size:12px;font-weight:900;}
.mk-flow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;}
.mk-photo{position:relative;width:96px;height:120px;border-radius:12px;flex:none;
  background:
    linear-gradient(180deg,rgba(19,5,40,.06),rgba(19,5,40,.14)),
    repeating-linear-gradient(90deg,#efe9f8 0 18px,#e6ddf3 18px 20px);
  border:1px solid #e0d8ef;display:grid;place-items:center;}
.mk-photo svg{width:34px;height:34px;color:var(--viola);}
.mk-photo .tag{position:absolute;left:8px;bottom:8px;font-family:var(--font);font-weight:800;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--viola-deep);
  background:#fff;border-radius:6px;padding:3px 7px;}
.mk-scan{position:absolute;left:0;right:0;height:3px;background:var(--lime);
  box-shadow:0 0 12px 2px rgba(72,242,54,.7);animation:mkScan 2.6s ease-in-out infinite;}
@keyframes mkScan{0%,100%{top:10%;opacity:.4;}50%{top:86%;opacity:1;}}
.mk-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-weight:800;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--viola);
  border-radius:999px;padding:4px 9px;margin-bottom:9px;}

/* nodi canali (multicanale) */
.mk-hub{display:flex;flex-direction:column;gap:10px;}
.mk-hub-center{align-self:center;font-family:var(--font);font-weight:900;font-size:13px;
  color:#fff;background:var(--notte);border-radius:12px;padding:12px 16px;text-align:center;
  box-shadow:0 12px 30px -14px rgba(19,5,40,.7);}
.mk-hub-center span{display:block;font-family:var(--font-text);font-weight:500;font-size:11px;
  color:#b9a9e0;letter-spacing:.02em;margin-top:2px;}
.mk-chans{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.mk-chan{background:var(--linee-soft);border:1px solid #ece6f6;border-radius:10px;padding:10px 8px;
  text-align:center;font-family:var(--font-text);font-weight:600;font-size:12px;color:var(--viola-deep);}
.mk-chan em{display:block;font-style:normal;font-size:10.5px;color:#15760C;font-weight:700;margin-top:3px;}
.mk-chan.soon em{color:var(--grigio);}

/* magazzini + offline */
.mk-whs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;}
.mk-wh{background:var(--linee-soft);border:1px solid #ece6f6;border-radius:12px;padding:13px;}
.mk-wh b{display:block;font-family:var(--font);font-weight:800;font-size:13px;color:var(--nero);}
.mk-wh span{font-family:var(--font-text);font-size:11.5px;color:var(--grigio);}
.mk-wh .q{margin-top:8px;font-family:var(--font);font-weight:900;font-size:22px;color:var(--viola);font-variant-numeric:tabular-nums;}
.mk-move{display:grid;place-items:center;color:var(--viola);font-weight:900;}
.mk-move svg{width:26px;height:26px;}
.mk-off{margin-top:13px;display:flex;align-items:center;gap:9px;background:#130528;border-radius:11px;
  padding:11px 13px;color:#fff;font-family:var(--font-text);font-size:12.5px;}
.mk-off svg{width:18px;height:18px;color:var(--lime);flex:none;}
.mk-off b{color:var(--lime);font-family:var(--font);font-weight:800;}

/* marketing flow */
.mk-steps{display:flex;align-items:stretch;gap:8px;}
.mk-step{flex:1;background:var(--linee-soft);border:1px solid #ece6f6;border-radius:11px;padding:11px 10px;text-align:center;}
.mk-step .ic{width:30px;height:30px;border-radius:9px;margin:0 auto 7px;display:grid;place-items:center;
  background:#fff;border:1px solid #e4d9f3;color:var(--viola);}
.mk-step .ic svg{width:16px;height:16px;}
.mk-step b{font-family:var(--font-text);font-weight:700;font-size:12px;color:var(--nero);display:block;}
.mk-step span{font-family:var(--font-text);font-size:11px;color:var(--grigio);}
.mk-sep{align-self:center;color:var(--viola);font-weight:900;}
/* flussi attivi nel mockup marketing */
.mk-flows{margin-top:13px;border:1px solid #ece6f6;border-radius:12px;padding:12px 13px;
  background:var(--linee-soft);}
.mk-flows-title{font-family:var(--font);font-weight:800;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio);margin-bottom:8px;}
.mk-flow-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #e8e1f3;}
.mk-flow-row:first-of-type{border-top:0;}
.mk-flow-row .nm{flex:1;min-width:0;font-family:var(--font-text);font-size:12.5px;color:#2a2230;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-flow-row .ch{font-family:var(--font-text);font-weight:600;font-size:10.5px;color:var(--viola-deep);
  background:#fff;border:1px solid #e4d9f3;border-radius:999px;padding:3px 9px;white-space:nowrap;}
.mk-flow-row .st{font-family:var(--font-text);font-weight:700;font-size:10.5px;color:var(--grigio);white-space:nowrap;}
.mk-flow-row .st.on{color:#15760C;}
.mk-flow-row .st.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#48F236;box-shadow:0 0 0 2px rgba(72,242,54,.2);margin-right:5px;vertical-align:1px;}

.mk-msg{margin-top:13px;background:linear-gradient(150deg,#9C00FC,#4A047B);border-radius:12px;
  padding:13px 15px;color:#fff;}
.mk-msg .from{font-family:var(--font-text);font-size:11px;color:#e5d6ff;}
.mk-msg .txt{font-family:var(--font-text);font-size:13px;margin-top:3px;}

/* mini-dashboard bilancio */
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mk-kpi{background:var(--linee-soft);border:1px solid #ece6f6;border-radius:11px;padding:11px;}
.mk-kpi .lbl{font-family:var(--font-text);font-size:10.5px;color:var(--grigio);}
.mk-kpi .val{font-family:var(--font);font-weight:900;font-size:19px;color:var(--nero);margin-top:3px;font-variant-numeric:tabular-nums;}
.mk-kpi .val.vio{color:var(--viola);}
.mk-bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:14px;padding-top:6px;border-top:1px solid var(--linee);}
.mk-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#C847FF,#9C00FC);opacity:.85;}

@media (max-width:880px){
  .mk-flow{grid-template-columns:1fr;}
  .mk-photo{width:100%;height:96px;}
}
/* le colonne dei mockup non allargano mai il contenitore (schermi stretti) */
.mk-flow>*,.mk-cards,.mk-game .info{min-width:0;}
.mk-game .info b{max-width:100%;}

/* ============================================================
   REVISIONE POP CULTURE · componenti aggiunti
   ============================================================ */

/* Badge -80% nella sezione carico: il numero che restituisce le ore */
.save80{display:inline-flex;align-items:center;gap:14px;margin:14px 0 12px;
  background:linear-gradient(120deg,#f6efff,#efe5ff);border:1.5px solid #e0d2f5;
  border-radius:14px;padding:12px 18px;}
.save80 .n{font-family:var(--font);font-weight:900;font-size:34px;line-height:1;
  color:var(--viola);font-variant-numeric:tabular-nums;}
.save80 .t{font-family:var(--font-text);font-size:14px;color:#3a3148;max-width:30ch;line-height:1.35;}

/* Banda numeri: l'80% come eroe della sezione In cifre */
.numbers-hero{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  margin-top:26px;padding:26px 30px;border-radius:18px;
  background:linear-gradient(120deg,#130528,#2A1545);}
@media (max-width:640px){.numbers-hero{grid-template-columns:1fr;gap:10px;}}
.numbers-hero .nh-big{font-family:var(--font);font-weight:900;
  font-size:clamp(56px,7vw,84px);line-height:1;color:var(--lime);
  font-variant-numeric:tabular-nums;text-shadow:0 0 34px rgba(72,242,54,.35);}
.numbers-hero .nh-tx{font-family:var(--font-text);font-size:16px;color:#d6cdec;max-width:46ch;}
.numbers-hero .nh-tx b{color:#fff;}

/* Termini del prezzo: durata, blocco canone, sconto uguale per tutti */
.pe-terms{display:flex;flex-direction:column;gap:6px;margin-top:4px;
  padding-top:12px;border-top:1px solid #e4d9f3;}
.pe-terms span{font-family:var(--font-text);font-size:13.5px;color:#3a3148;}
.pe-terms b{color:var(--viola-deep);font-weight:700;}

/* Mockup bilancio: il primo margine come numero eroe */
.mk-margin{background:linear-gradient(120deg,#faf6ff,#f1e9fc);border:1.5px solid #e4d9f3;
  border-radius:13px;padding:15px 17px;margin-bottom:12px;}
.mk-margin .lbl{font-family:var(--font-text);font-size:11.5px;color:var(--grigio);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.mk-margin .row{display:flex;align-items:baseline;gap:12px;margin-top:4px;}
.mk-margin .pct{font-family:var(--font);font-weight:900;font-size:38px;line-height:1;
  color:var(--viola);font-variant-numeric:tabular-nums;}
.mk-margin .eur{font-family:var(--font);font-weight:800;font-size:19px;color:var(--nero);
  font-variant-numeric:tabular-nums;}
.mk-margin .sub{font-family:var(--font-text);font-size:12px;color:var(--grigio);margin-top:4px;}

/* Mockup confronto listini distributori */
.mk-dist{display:flex;flex-direction:column;gap:9px;}
.mk-dist-prod{display:flex;align-items:center;gap:11px;padding-bottom:10px;
  border-bottom:1px solid var(--linee);}
.mk-dist-prod b{font-family:var(--font-text);font-weight:700;font-size:14px;color:var(--nero);}
.mk-dist-prod .mk-cover{width:28px;height:36px;}
.mk-dist-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:var(--linee-soft);border:1px solid #ece6f6;}
.mk-dist-row .src{font-family:var(--font-text);font-size:13px;color:#3a3148;flex:1;min-width:0;}
.mk-dist-row .prz{font-family:var(--font);font-weight:800;font-size:15px;color:var(--nero);
  font-variant-numeric:tabular-nums;}
.mk-dist-row.best{background:#f2fbef;border-color:#bfe9b6;}
.mk-dist-row.best .prz{color:#15760C;}
.mk-dist-row .tag{font-family:var(--font);font-weight:800;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--notte);background:var(--lime);border-radius:999px;padding:4px 9px;}
.mk-dist-note{margin-top:4px;padding-top:10px;border-top:1px solid var(--linee);
  font-family:var(--font-text);font-size:12px;color:var(--grigio);text-align:center;}

/* Break AI grande: più alto, contenuto centrato, coppia margine/velocità */
.section-break.big{min-height:clamp(420px,58vh,620px);align-items:center;}
.section-break.big .section-break-inner{padding-top:72px;padding-bottom:72px;}
.section-break.big h2{font-size:clamp(32px,4.6vw,58px);max-width:18ch;}
.section-break.big .lead{max-width:62ch;}
.break-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.break-stats>div{display:flex;flex-direction:column;gap:3px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:13px;padding:13px 18px;min-width:220px;}
.break-stats b{font-family:var(--font);font-weight:800;font-size:15px;color:var(--lime);
  letter-spacing:.04em;text-transform:uppercase;}
.break-stats span{font-family:var(--font-text);font-size:13.5px;color:#d6cdec;}

/* GIF del problema: card rettangolare arrotondata, alta quanto la box viola accanto */
.problem-gif{margin:0;display:flex;flex-direction:column;align-self:stretch;gap:10px;}
.problem-gif img{width:100%;flex:1;min-height:340px;object-fit:cover;display:block;
  border-radius:18px;box-shadow:0 24px 60px -28px rgba(19,5,40,.5);
  border:1px solid var(--linee);}
.problem-gif figcaption{text-align:center;font-family:var(--font-text);font-size:13.5px;
  color:var(--grigio);}
/* su mobile la colonna non si stira: la GIF tiene le sue proporzioni,
   niente vuoto tra la card e i box successivi */
@media (max-width:880px){
  .problem-gif{align-self:auto;}
  .problem-gif img{flex:none;min-height:0;height:auto;aspect-ratio:480/347;}
}

/* GIF sotto il box distributori: stessa card rettangolare della GIF del problema */
.dist-gif{margin:18px 0 0;display:flex;flex-direction:column;gap:10px;}
.dist-gif img{width:100%;object-fit:cover;display:block;border-radius:18px;
  box-shadow:0 24px 60px -28px rgba(19,5,40,.5);border:1px solid var(--linee);}
.dist-gif figcaption{text-align:center;font-family:var(--font-text);font-size:13.5px;
  color:var(--grigio);}

/* CTA nel footer: "Richiedi una dimostrazione" come vero bottone lime */
.foot-cta{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-text);font-weight:700;font-size:14px;color:var(--notte)!important;
  background:var(--lime);border-radius:999px;padding:11px 20px;margin-top:4px;
  text-decoration:none!important;box-shadow:0 8px 22px -10px rgba(72,242,54,.7);
  transition:transform .2s ease,box-shadow .2s ease;}
.foot-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(72,242,54,.9);color:var(--notte)!important;}

/* ============================================================
   FUNZIONI ESPLOSE · card di gruppo con sottovoci complete
   ============================================================ */
.fx-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  gap:18px;margin-top:28px;align-items:stretch;}
@media (max-width:1080px){.fx-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.fx-grid{grid-template-columns:1fr;grid-auto-rows:auto;}}
.fx-card{background:#fff;border:1px solid var(--linee);border-radius:16px;
  padding:22px 20px;display:flex;flex-direction:column;height:100%;}
.fx-card:hover{border-color:#dcd2ec;box-shadow:0 14px 36px rgba(19,5,40,.07);}
/* Icone delle funzioni: chip retrowave con gradiente, gloss e scintilla lime */
.fx-card .icon{position:relative;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(140deg,#C847FF 0%,var(--viola) 45%,#4A047B 100%);
  box-shadow:0 10px 22px -8px rgba(161,0,255,.55),
             inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s ease,box-shadow .25s ease;}
.fx-card .icon::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 48%);
  pointer-events:none;}
.fx-card .icon::before{content:"";position:absolute;top:-4px;right:-4px;
  width:11px;height:11px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px #fff,0 0 12px rgba(72,242,54,.85);}
.fx-card:hover .icon{transform:translateY(-2px) scale(1.05);
  box-shadow:0 14px 30px -8px rgba(161,0,255,.7),inset 0 1px 0 rgba(255,255,255,.35);}
.fx-card .icon svg{width:21px;height:21px;position:relative;z-index:1;
  filter:drop-shadow(0 1px 2px rgba(19,5,40,.35));}
.fx-card h3{font-family:var(--font);font-weight:800;font-size:16.5px;color:var(--nero);
  margin:0 0 10px;}
.fx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.fx-list li{position:relative;padding-left:20px;font-family:var(--font-text);
  font-size:13.5px;line-height:1.4;color:#3a3148;}
.fx-list li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;
  border-radius:3px;background:var(--lime);box-shadow:0 0 0 3px rgba(72,242,54,.14);}
.fx-list li.soon{color:var(--grigio);}
.fx-list li.soon::before{background:#d9d0ea;box-shadow:none;}

/* ============================================================
   TEXTURE DI SFONDO · griglia retrowave tenue sulle sezioni alt
   ============================================================ */
.section.alt{position:relative;}
.section.alt::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(161,0,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(161,0,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 80% at 100% 0,#000,transparent 60%);
          mask-image:radial-gradient(120% 80% at 100% 0,#000,transparent 60%);}
.section.alt>*{position:relative;z-index:1;}

/* ============================================================
   ANIMAZIONI DI NAVIGAZIONE · reveal allo scroll
   Fade + rise leggero quando l'elemento entra in vista.
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,.7,.3,1),transform .7s cubic-bezier(.16,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .mk-scan{animation:none!important;}
}